Histórico da Página

<style>
    /* Início estilo banner */
  
    .compositiondani-banner {
      position: relative;
      min-height: 220px;
      border-radius: 5px;
      margin-bottom: 5px;
      overflow: hidden;
    }
  
    .compositiondani-banner-image {
      background-image: url("https://totvscrm.com/wp-content/uploads/2024/04/capa-com-fundo-e-sem-icone-TDN-AZUL2.png");
      background-size: cover;
      min-height: inherit;
      width: 100%;
    }
  
    .compositiondani-banner-overlay {
      min-height: inherit;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      pointer-events: none;
    }
  
    .compositiondani-banner-logo-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, -50%);
    }
  
    .compositiondani-banner-logo {
      width: 350px;
      height: 180px;
      background-image: url("https://totvscrm.com/wp-content/uploads/2023/0908/logo-com-descricao-totvsgc.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  
    .compositiondani-banner-title {
      margin-bottom: 10px !important;
      padding: 10px !important;
      background: rgba(0, 0, 0, 0.5) !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      font-size: 12px !important;
      line-height: 1.3 !important;
      max-height: 133px !important;
      font-family: "Roboto", sans-serif !important;
      -webkit-line-clamp: 3 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      color: #ffffff !important;
      position: relative !important;
      margin-top: 130px !important;
      border-radius: 10px !important;
    }
  
    .compositiondani-banner-content {
      position: absolute;
      padding: 30px;
      max-width: 60%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      color: white;
      text-align: center;
    }
  
    .custom-header h1 {
      font-size: 16px;
      background-color: rgba(0, 0, 0, 0.6);
      padding: 10px;
      border-radius: 5px;
      margin: 0;
    }
  
    .negrito-materialize {
      font-weight: bold;
    }
  
    .custom-margin-justified {
      margin: 0 20px;
      text-align: justify;
    }
      /* Final estilo banner */

      #content.page.view {
    padding-right: 0 !important;
}   /* impedir vermelho no nav */

#breadcrumb-section > nav {
    background-color: initial !important;
    box-shadow: none !important;
}

@media only screen and (min-width: 601px) {
    nav, 
    nav .nav-wrapper i, 
    nav a.sidenav-trigger, 
    nav a.sidenav-trigger i {
        height: auto !important;
        line-height: normal !important;
    }
}
/* final vermelho no nav */
   </style>
  
  <header>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/>
  
    <div class="compositiondani-banner">
      <div class="compositiondani-banner-image"></div>
      <div class="compositiondani-banner-overlay"></div>
      <div class="compositiondani-banner-logo-container">
        <div class="compositiondani-banner-logo"></div>
      </div>
      <div class="compositiondani-banner-content">
        <h1 class="compositiondani-banner-title"> 
          IMPLEMENTAÇÃO DA DATA DE VENCIMENTO NAS CONSULTAS DE NOTAS FISCAIS



  </h1>
  </header>
    </div>
  </div>

  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Inclua o estilo do tema Monokai -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css"/>
  
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />

<link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">


  <style>
  /* ==============================
    =       CONFIGURAÇÕES GERAIS      =
    =============================== */

* {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

a {
 
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:hover {
 
}

li {  font-size: 14px !important;
}

h3 {  font-size: 14px !important;
  font-weight: bold;  

}

h1 {  font-size: 13px !important;
  

}

h2 {  font-size: 15px !important;
  font-weight: bold;  

}

td, th {
    padding: 6px;
}

* p {
    margin-bottom: 0 !important;
}

/* ==============================
      =        ESTILOS DE TÍTULOS       =
      =============================== */

#title-text {
  display: none !important;
}

#content > div.page-metadata > div {
    float: none !important;
    line-height: normal !important;
    width: auto !important;
    display: none !important; /* ou outra propriedade de display que você deseja usar */
    margin: 0 !important; /* ou outra propriedade de margin que você deseja usar */
}

#section2 > ol > li:nth-child(2) > p {
    margin-bottom: 0;
}



.wiki-content h1,
.wiki-content h2 {
  font-family: "Roboto", sans-serif !important;
  font-size: 13px!important;
 
}

.wiki-content h1 {
  font-size: 13px !important;
}

.wiki-content h2 {
  font-size: 14px !important;
  color: #42526e !important;
  border-bottom: 2px solid #dfe1e5;
   padding-bottom: 5px;
  font-weight: bold;  
}

.custom-heading,
h3.custom-h3 {
  font-size: 16px;
  color: #42526e;
  margin-bottom: 20px;
}

.custom-h1 {
  color: #feac0e;
}

.explanation h2 {
  font-weight: bold;
}

/* ==============================
      =        ESTILOS DE TEXTO         =
      =============================== */

.wiki-content p {
  font-size: 14px !important;
}

.justificado,
.custom-justified {
  text-align: justify;
  margin: 10px 0;
}

/* ==============================
      =       ESTILOS DE LINKS         =
      =============================== */

.wiki-content a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
  text-decoration: none;
  color: #42526e;
  font-size: 14px;


}

.wiki-content a:hover {
  color: white;
}

/* ==============================
      =       ESTILOS DE CONTAINER     =
      =============================== */



.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* ==============================
      =       ESTILOS DE CARDS         =
      =============================== */

.card {
  border: 2px solid #9aa1ad;
  padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #f4f5f7;
  color: #42526e;
  overflow-x: hidden;
   top: 0;

  
}



/* ==============================
      =       ESTILOS DE TABS          =
      =============================== */

.tabs {
  background-color: #dfe1e5;
}

.tabs .tab a {
  color: rgb(66, 82, 110);
}

.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
  color: #0897E9;
  background-color: transparent;
}

.tabs .tab a:focus {
  background-color: rgba(8, 151, 233, 0.25);
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: rgba(16, 148, 184, 0.24);
}

.tabs .indicator {
  background-color: #0897E9;
}

.tab-content {
   gap: 0;
  padding: 10px;
}

.tab-content pre {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==============================
      =        ESTILOS DE ÍCONES        =
      =============================== */

.icon-list,
.icon {
  padding-left: 0;
  list-style-type: none;
}

.icon {
  display: inline-block;
  width: 24px;
  vertical-align: middle;
  margin-right: 45px;
  position: relative;
  left: -25px;
}

.item .label i {
  margin-right: 10px;
}

.label b {
color: #42526e;
}

td th {
color: #42526e;
}

/* ==============================
      =    ESTILOS DE COMPONENTES      =
      =============================== */

.collapsible,
.collapsible-header,
.collapsible-body {
  box-shadow: none !important;
}

.faq-question {
  font-weight: bold;
  margin-bottom: 5px;
}

.faq-answer {
  margin-bottom: 20px;
}





.item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.item:last-child {
  border-bottom: none;
}

.item .label {
  flex: 1;
  font-weight: bold;
}

.item .value {
  flex: 1;
  text-align: right;
}
.item {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item:last-child {
  border-bottom: none;
}

/* Estilos para o label */
.label {
  font-weight: bold;
  display: flex;
  align-items: center;
}

.item .label i {
  margin-right: 10px; /* Adiciona espaço depois dos ícones */
}

/* ==============================
      =     ESTILOS DE IMAGENS         =
      =============================== */

.imagem-responsiva {
  max-width: 100%;
  height: auto;
}

.custom-header-bg img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==============================
      =     ESTILOS DE VÍDEO           =
      =============================== */

#youtube-video-container iframe {
  width: 100%;
  height: auto;
  display: block;
}

.video-container {
    max-width: 800px;
    margin: 0 auto;
  }

.ytp-cued-thumbnail-overlay-image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* ==============================
      =    OUTROS ESTILOS PERSONALIZADOS =
      =============================== */
.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.custom-heading {
  font-size: 16px;
  color: #42526e;
  margin: 10px 0;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 5px;
  font-weight: bold;  
}

#indice {
  border-radius: 5px;
  padding: 20px;
  max-width: 100%;
  overflow: hidden;
}

#indice h2 {
  text-align: center;
  margin-bottom: 16px;
}

#indice ul {
  list-style-type: none;
  padding-left: 0;
}

#indice li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

#indice li:last-child {
  border-bottom: none;
}

#indice li:hover {
  background-color: #0897E9;
  color: white;
}

/* ==============================
  =      ESTILOS DE TABELAS        =
  ============================== */
.custom-grey {
  background-color: #ffffff;
}

.custom-grey th,
.custom-grey td {
  border: 1px solid #086ea8;
  padding: 10px;
  color:#064569
}

.custom-grey tr:nth-child(even) td {
  background-color: #d2e6f1;
}

.custom-grey tr:nth-child(odd) td {
  background-color: #f4f5f7;
}

.custom-grey th {
  color: #fff;
  background-color: #0897E9;
}



.custom-grey td {
  font-size: 13px;
}

.custom-grey tr:nth-child(odd) {
  background-color: #e4e4e6;
}

.custom-grey tr:nth-child(even) {
  background-color: #dfdfdf;
}

.custom-alert-warning {
  background-color: #fdf1dc; /* ou qualquer outra cor que preferir */
  color: #5c4225; /* cor do texto */
  border: 1px solid #d6800f; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
 
}

.custom-alert-warning .fas {
  color: #5c4225; /* cor do ícone no alerta de aviso */
  margin-right: 10px; /* espaço extra entre o ícone e o texto */
}

.custom-alert-danger {
  background-color: #ffe7ec; /* ou qualquer outra cor que preferir */
  color: #9e1d3b; /* cor do texto */
  border: 1px solid #eb7893; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
  
}

.custom-alert-danger .fas {
  color: #f34b72; /* cor do ícone no alerta de perigo */
  margin-right: 10px; /* espaço extra entre o ícone e o texto */
}


.alert-secondary-custom {
    background-color: #d9eefa; /* Cor de fundo do alerta */
    color: #094f77; /* Cor do texto */
    border: 1px solid #094f77; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
}

.alert-secondary-custom .fas {
    color: #0897E9; /* Cor dos ícones FontAwesome */
    margin-right: 10px; /* Espaço extra entre o ícone e o texto */
}

.custom-content ul li {
    list-style-type: disc !important; /* Forçando 'bolinhas' */
    padding-left: 30px; /* Espaçamento para alinhar com o texto se necessário */
    margin-bottom: 10px; /* Espaço entre itens da lista se necessário */
}

/* ========== FIM DO ESTILO ========= */

pre {
    border-radius: 5px;
    padding: 10px;
    overflow: auto;
  }

  .copy-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
  }

  </style>
  

   





  <!-- Tabs e conteúdo das guias -->
  <div class="card">
    <ul class="tabs">
        <li class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li>
        <li class="tab col s4"><a href="#tab2">DETALHES TÉCNICOS</a></li>
        <li class="tab col s4"><a href="#tab3">FAQ</a></li>
    </ul>
     <!-- Tab Content -->
 
      <div id="tab1" class="col s12">
        <div class="tab-content">
          <div style="background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;">
            <section id="section1" style="margin-top: 40px;">
               <!-- Tab 70 conteúdo -->
  <!-- Segundo Card -->

    <!-- Primeiro Card -->
      <!-- Primeiro Card -->
  <div class="card">
    <div class="item">
      <span class="label">
        <table border="1">
          <tr>
              <td><i class="fas fa-tags"></i> <b>Produto:</b></td>
              <td>Automação da Força de Vendas</td>
          </tr>
          <tr>
              <td><i class="fas fa-link"></i> <b>Linha de Produto:</b></td>
              <td>TOTVS CRM</td>
          </tr>
          <tr>
              <td><i class="fas fa-chart-pie"></i> <b>Segmento:</b></td>
              <td>Cross Segmentos</td>
          </tr>
          <tr>
              <td><i class="fas fa-desktop"></i> <b>Módulo:</b></td>
              <td>Venda/Nota Fiscal</td>
          </tr>
          <tr>
              <td><i class="fas fa-globe"></i> <b>Aplicação:</b></td>
              <td>Mobile/Web</td>
          </tr>
          <tr>
              <td><i class="fas fa-hashtag"></i> <b>Identificador:</b></td>
              <td>
                
                DTSFAPD-2120  </td>
          </tr>
      </table>
      </span>
    </div>
    </div>
 

      <br>

      <h2 class="custom-heading">
        <i class="fa-solid fa-eye"></i>&nbsp &nbsp VISÃO GERAL
      </h2>
      <p class="justificado">
        A recente melhoria no módulo de Nota Fiscal do TOTVS SFA inclui a adição do campo "Data de Vencimento" nas notas fiscais, que é diretamente derivada da "Data Prevista de Faturamento" do pedido no ERP. Este novo campo permite uma gestão mais precisa e facilitada do processo de faturamento, melhorando a visibilidade sobre o cronograma de faturamento dos pedidos diretamente na interface das notas fiscais.
      </p>
<br>

    <h2 class="custom-heading">
      <i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO
    </h2>
    <p class="justificado">
      Permitir que os usuários do TOTVS SFA tenham uma visão clara e imediata sobre a data prevista para o faturamento de cada nota fiscal, ajudando a monitorar a eficiência e a pontualidade do processo de faturamento dentro da organização. Essa melhoria visa aprimorar o controle sobre os ciclos de faturamento e ajudar na organização das atividades relacionadas. </p>

  <!-- ... (seu conteúdo existente) ... -->


</section>


       
          </section>

          <section id="section2" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHES FUNCIONAIS</h2>
                
              <br>
              <ol start="1">
                <li>
                  <strong>Melhoria na Integração com ERP:</strong><br>
                  <p>A "Data de Vencimento" é alimentada pela "Data Prevista de Faturamento" dos pedidos, garantindo alinhamento e consistência com o planejamento original feito no ERP.</p>
                </li>  </ol>

                <ol start="2">
                  <li>
                    <strong>Exibição Configurável:</strong><br>
                    <p>A visibilidade do campo "Data de Vencimento" pode ser configurada detalhadamente pelo administrador, permitindo ajustes específicos para adequar a visualização às necessidades de cada usuário ou contexto operacional. Esta configuração está disponível em:</p>
                  </section>

                  <section id="section2" style="margin-top: 40px;">
                    <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHES FUNCIONAIS</h2>
                    
                    <br>
                    <ol start="1">
                      <li>
                        <strong>Melhoria na Integração com ERP:</strong><br>
                        <p>A "Data de Vencimento" é alimentada pela "Data Prevista de Faturamento" dos pedidos, garantindo alinhamento e consistência com o planejamento original feito no ERP.</p>
                      </li>
                    </ol>
                    <img src="https://totvscrm.com/wp-content/uploads/2024/08/MOCKUP-TDN-RELEASE-COMPONENTES13a44-SFA2-Recuperado.png" alt="Visualização Android" title="Visualização Android" style="width: 80%; height: auto; max-width: 80%; display: block;"> 
                  
                    <ol start="2">
                      <li>
                        <strong>Exibição Configurável:</strong><br>
                        <p>A visibilidade do campo "Data de Vencimento" pode ser configurada detalhadamente pelo administrador, permitindo ajustes específicos para adequar a visualização às necessidades de cada usuário ou contexto operacional. Esta configuração está disponível em:</p> <br>
                        <ul>
                          <li style="list-style-type: disc; margin-left:15px;">
                            <strong> Localização da Configuração:</strong> Acesse Configuração > Configuração Pedido > Consulta Nota Fiscal dentro do TOTVS SFA.
                          </li>
                          <li style="list-style-type: disc; margin-left:15px;">
                            <strong>Opções de Configuração:</strong> Os administradores podem definir onde e como a "Data de Vencimento" será exibida:
                            <ul>
                              <li style="list-style-type: disc; margin-left:15px;">WEB_CABECALHO_DATAVENCIMENTO: Ativa ou desativa a exibição da data no cabeçalho da nota fiscal na interface web.</li>
                              <li style="list-style-type: disc; margin-left:15px;">WEB_LISTAGEM_DATAVENCIMENTO: Ativa ou desativa a exibição da data na listagem das notas fiscais na interface web.</li>
                              <li style="list-style-type: disc; margin-left:15px;">ANDROID_CABECALHO_DATAVENCIMENTO: Ativa ou desativa a exibição da data no cabeçalho da nota fiscal no aplicativo Android.</li>
                              <li style="list-style-type: disc; margin-left:15px;">ANDROID_LISTAGEM_DATAVENCIMENTO: Ativa ou desativa a exibição da data na listagem das notas fiscais no aplicativo Android.</li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ol>
                  </section>

                  </li>  </ol>

                 
                  
                    <img src="https://totvscrm.com/wp-content/uploads/2024/08/MOCKUP-TDN-RELEASE-COMPONENTES13a-SFA2-Recuperado.png" alt="Visualização Android" title="Visualização Android" style="width: 80%; height: auto; max-width: 80%; display: block;">    
                    
                    </li> 
                
              </ol>
        </section>
         
      
            <section id="section3" style="margin-top: 40px;">
              <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp COMO USAR?</h2>
              <ol>
                <li>
                  <strong>Acesso às Configurações:</strong>
                  <ul>
                    <li style="list-style-type: disc; margin-left:15px;">Navegue até <strong>Configurações > Configuração Pedido > Consulta Nota Fiscal</strong>.</li>
                  </ul>
                </li>
                <li>
                  <strong>Ajuste da Visibilidade:</strong>
                  <ul>
                    <li style="list-style-type: disc; margin-left:15px;">Localize as opções relacionadas à "Data de Vencimento":
                      <ul>
                        <li style="list-style-type: disc; margin-left:15px;"><strong>WEB_CABECALHO_DATAVENCIMENTO</strong></li>
                        <li style="list-style-type: disc; margin-left:15px;"><strong>WEB_LISTAGEM_DATAVENCIMENTO</strong></li>
                        <li style="list-style-type: disc; margin-left:15px;"><strong>ANDROID_CABECALHO_DATAVENCIMENTO</strong></li>
                        <li style="list-style-type: disc; margin-left:15px;"><strong>ANDROID_LISTAGEM_DATAVENCIMENTO</strong></li>
                      </ul>
                    </li>
                    <li style="list-style-type: disc; margin-left:15px;">Ative ou desative cada configuração conforme necessário para mostrar a "Data de Vencimento" no cabeçalho ou na listagem das notas fiscais em ambas as plataformas, Web e Android.</li>
                  </ul>
                </li>
              </ol>
              <ol start="3">
              
                <li>
                  <strong>Na Web e no Android:</strong>
                  <ul>
                    <li style="list-style-type: disc; margin-left:15px;">Após configurar, a "Data de Vencimento" aparecerá automaticamente na interface selecionada (cabeçalho ou listagem) de notas fiscais em <strong>Venda > Nota Fiscal > Listar</strong>.</li>
                    <li style="list-style-type: disc; margin-left:15px;">Se configurado para aparecer no cabeçalho, você verá a data ao clicar no ícone de visualização (ícone de olho) de uma nota fiscal específica.</li>
                  </ul>
                </li>
        
              </ol>

              <p>
                <video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;">
                  <source src="https://totvscrm.com/wp-content/uploads/2024/08/Vid-20240806-182759.mp4" type="video/mp4">
                </video>
              </p>
              <br>

        </section> 
         
        <section id="section4" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLO PRÁTICO</h2>
                         
            <p>
                
                <br>
                
                <b>Desafio Antigo:</b>
                <p> 
                  Antes da implementação da "Data de Vencimento", os usuários do TOTVS SFA não tinham uma forma direta de verificar a data prevista para o faturamento de uma nota fiscal diretamente na plataforma.
                  </p>
                
                <br>
                
                <b>Solução Atualizada:</b>
                <p>Com a nova funcionalidade implementada no TOTVS SFA, o processo se tornou mais eficiente e transparente.</p>
                
                <br>
                
                
                </p>
            </section> 
      
         
          </div>
          </div>
        </div>
   
          
            <!-- Tab 30 fim -->

            <div id="tab2" class="col s12">
              <div class="tab-content">
                <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
                  <section id="section5" style="margin-top: 40px;">
                  <!-- Primeira coluna do conteúdo da guia 2 -->
                  <h2 class="custom-heading"><i class="fa-solid fa-gear"></i>&nbsp DETALHES TÉCNICOS</h2>
      

                  <p><strong>APLICAÇÃO</strong></p>
<p>Pelo tools, opção 18 deverá ser criado os seguintes registros:</p>

<div class="code panel pdl conf-macro output-block" style="border-width: 1px;" data-hasbody="true" data-macro-name="code">
  <div class="codeHeader panelHeader pdl" style="border-bottom-width: 1px;"><b>wsconfigconsultanotafiscal.xml</b></div>
  <div class="codeContent panelContent pdl">
    <pre style="white-space: pre-wrap; ">
      &lt;insert tableName="WsConfigConsNotaFiscal"&gt;
          &lt;column name="idWsConfigConsNotaFiscal" valueSequenceNext="SEQPKWSCONFIGCONSNOTAFISCAL"/&gt;
          &lt;column name="chave" valueComputed="'ANDROID_CABECALHO_DATAVENCIMENTO'"/&gt;
          &lt;column name="label" valueComputed="'standard.pedidoconfig.lbl.grid.consulta.notafiscal.datavencimento'"/&gt;
          &lt;column name="linha" valueComputed="'0'"/&gt;
          &lt;column name="coluna" valueComputed="'0'"/&gt;
          &lt;column name="idnVisivel" valueComputed="0"/&gt;
          &lt;column name="idnexibircoluna" valueComputed="1"/&gt;
          &lt;column name="idnexibirfiltro" valueComputed="1"/&gt;
          &lt;column name="contexto" valueComputed="'NOTA_FISCAL_CABECALHO'"/&gt;
      &lt;/insert&gt;
  </pre>

  </div>
</div>


<p><strong>Listagem de Notas fiscais</strong></p>
<ul>
  <li style="list-style-type: disc; margin-left:15px;"><strong>WEB (Venda → Nota fiscal → Listar)</strong>
        <ul>
          <li style="list-style-type: disc; margin-left:15px;">Na listagem de notas fiscais, aplicação deverá considerar para exibição do campo "Data vencimento" a configuração realizada em "Configuração → Configuração pedido → Consulta nota fiscal" no registro de contexto "NOTA_FISCAL_LISTAGEM" chave "WEB_LISTAGEM_DATAVENCIMENTO".</li>
          <li style="list-style-type: disc; margin-left:15px;">Na visualização da Nota fiscal, aplicação deverá considerar para exibição do campo "Data vencimento" a configuração realizada em "Configuração → Configuração pedido → Consulta nota fiscal" no registro de contexto "NOTA_FISCAL_CABECALHO" chave "WEB_CABECALHO_DATAVENCIMENTO".</li>
        </ul>
    </li>
    <li style="list-style-type: disc; margin-left:15px;"><strong>ANDROID (Consulta → Histórico de vendas (Notas fiscais))</strong>
        <ul>
          <li style="list-style-type: disc; margin-left:15px;">Na listagem de notas fiscais, aplicação deverá considerar para exibição do campo "Data vencimento" a configuração realizada em "Configuração → Configuração pedido → Consulta nota fiscal" no registro de contexto "NOTA_FISCAL_LISTAGEM" chave "ANDROID_LISTAGEM_DATAVENCIMENTO".</li>
          <li style="list-style-type: disc; margin-left:15px;">Na visualização da Nota fiscal, aplicação deverá considerar para exibição do campo "Data vencimento" a configuração realizada em "Configuração → Configuração pedido → Consulta nota fiscal" no registro de contexto "NOTA_FISCAL_CABECALHO" chave "ANDROID_CABECALHO_DATAVENCIMENTO".</li>
        </ul>
    </li>
    <li>Considerar a seguinte SQL para buscar o valor da Data vencimento
        <ul>
            <li>
                <div class="code panel pdl conf-macro output-block" style="border-width: 1px;" data-hasbody="true" data-macro-name="code">
                    <div class="codeContent panelContent pdl">
                        <pre class="syntaxhighlighter-pre" data-syntaxhighlighter-params="brush: xml; gutter: false; theme: Confluence" data-theme="Confluence">
                            SELECT DISTINCT 
                                NotaFiscal.idNotaFiscal as idNotaFiscal,
                                NotaFiscal.numeroNotaFiscal as numeroNotaFiscal,
                                Parceiro.nomeParceiro as Cliente,
                                ParceiroTransportadora.nomeParceiro as Transportadora,
                                Local.descricao as Local,
                                TipoNotaFiscal.descricao as TipoNotaFiscal,
                                NotaFiscal.dataEmissao as DataEmissao,
                                NotaFiscal.valorFaturado as ValorFaturado,
                                CentroCusto.descricao as CentroCusto,
                                CondicaoPagamento.descricao as CondicaoPagamento,
                                pedido.dataPrevistaFatura AS DataVencimento,
                                LocalFilialFaturamento.descricao as FilialFaturamento,
                                LocalFilialRetirada.descricao as FilialRetirada,
                                LocalFilialVenda.descricao as FilialVenda,
                                NotaFiscal.idnCancelada as idnCancelada,
                                Segmento.descricao as Segmento,
                                NotaFiscal.observacao as Observacao           
                            from
                                NotaFiscal 
                            left outer join
                                Segmento 
                                    on NotaFiscal.idSegmento=Segmento.idSegmento 
                            left outer join
                                Local LocalFilialFaturamento 
                                    on NotaFiscal.idLocalFilialFaturamento=LocalFilialFaturamento.idLocal 
                            left outer join
                                Local LocalFilialRetirada 
                                    on NotaFiscal.idLocalFilialRetirada=LocalFilialRetirada.idLocal 
                            left outer join
                                Local LocalFilialVenda 
                                    on NotaFiscal.idLocalFilialVenda=LocalFilialVenda.idLocal 
                            left outer join
                                Local 
                                    on NotaFiscal.idLocal=Local.idLocal 
                            left outer join
                                Parceiro 
                                    on NotaFiscal.idParceiro=Parceiro.idParceiro 
                            left outer join
                                Parceiro Transportadora 
                                    on NotaFiscal.idParceiroTransportadora=ParceiroTransportadora.idParceiro 
                            left outer join
                                CondicaoPagamento 
                                    on NotaFiscal.idCondicaoPagamento=CondicaoPagamento.idCondicaoPagamento 
                            left outer join
                                Usuario nf_usr1_ 
                                    on NotaFiscal.idUsuario=nf_usr1_.idUsuario 
                            left outer join
                                CentroCusto 
                                    on NotaFiscal.idCentroCusto=CentroCusto.idCentroCusto 
                            left outer join
                                TipoNotaFiscal 
                                    on NotaFiscal.idTipoNotaFiscal=TipoNotaFiscal.idTipoNotaFiscal 
                            inner join 
                              notafiscalproduto 
                                ON notafiscal.idnotafiscal=notafiscalproduto.idnotafiscal 
                            inner join 
                              pedido 
                                ON notafiscalproduto.idpedido=pedido.idpedido 
                            where
                                NotaFiscal.idNotaFiscal=?
                        </pre>
                    </div>
                </div>
            </li>
        </ul>
    </li>
</ul>
<p><br/></p>
  
                                    
                            
                                 
                        
                    
                        


      <!-- Second Card -->
      
                 
      
      
                    </div>
      
              </div>
          </div> 
       

     
      <!-- Second Card -->

    

    <div id="tab3" class="col s12">
      <div class="tab-content">
        <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
              <!-- Primeira coluna do conteúdo da guia 2 -->
              <div class="container">
                <h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTAS FREQUENTES</h2>
                <ul class="collapsible">
                  <li>
                    <div class="collapsible-header"><i class="material-icons">question_answer</i>O que é a "Data de Vencimento" na consulta da nota fiscal?
                        </div>
                    <div class="collapsible-body"><span> A "Data de Vencimento" é uma nova adição ao módulo de Nota Fiscal no TOTVS SFA. Ela reflete a "Data Prevista de Faturamento" de um pedido, permitindo aos usuários ver quando uma nota fiscal deve ser processada.
                      </span></div>
                </li> 
                
                    <!-- Adicione mais perguntas e respostas aqui conforme necessário -->
                    <li>
                      <div class="collapsible-header"><i class="material-icons">question_answer</i> Todos os usuários podem ver a "Data de Vencimento"?
                          </div>
                      <div class="collapsible-body"><span>A visibilidade da "Data de Vencimento" pode ser controlada através das configurações do sistema. Se ativada pelo administrador, todos os usuários com acesso às notas fiscais poderão ver a data conforme configurado.
                        </span></div>
                  </li> 
                       
        

                    <!-- Adicione mais perguntas e respostas aqui conforme necessário -->

                        <!-- Adicione mais perguntas e respostas aqui conforme necessário -->
                </ul>
                
            </div>     </div>

                            <!-- Primeira coluna do conteúdo da guia 2 -->

      


           
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  // Inicialização das tabs
  document.addEventListener("DOMContentLoaded", function () {
    var tabs = document.querySelectorAll(".tabs");
    M.Tabs.init(tabs);
  });
</script>

<script>
  const items = document.querySelectorAll("#indice li");

  items.forEach(item => {
      item.addEventListener('click', (e) => {
          const targetId = e.target.getAttribute('data-target');
          const targetElement = document.getElementById(targetId);
          window.scrollTo({
              top: targetElement.offsetTop - 10,
              behavior: "smooth"
          });
      });
  });
</script>

<script src="https://kit.fontawesome.com/c97d4c197a.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 


<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> 

<script>hljs.highlightAll();</script>

<script>
  hljs.highlightAll();

  function copyCode() {
    navigator.clipboard.writeText(document.querySelector('code').innerText)
      .then(() => {
        alert('Código copiado com sucesso!');
      })
      .catch(err => {
        console.error('Erro ao copiar código: ', err);
      });
  }
</script>
  


<script src="scripts.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.collapsible');
      var instances = M.Collapsible.init(elems);
  });
</script>

 <!-- ... (conteudo video) ... -->
 <script src="https://www.youtube.com/iframe_api"></script>

 <script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '315',
      width: '560',
      videoId: 'FvsuBOvyyro',
      playerVars: {
        start: 1238, // 20:38 em segundos
        end: 1356   // 22:36 em segundos
      }
    });
  }
</script>