Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.


HTML
<style>
 
  /* Início estilo banner */

  .compositiondani-banner {
    position: relative;
    min-height: 320px;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
  }

  .compositiondani-banner-image {
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/bannert.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%;
    transform: translate(-50%, -50%);
  }

  .compositiondani-banner-logo {
    width: 400px;
    height: 150px;
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/logos.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .compositiondani-banner-title {
    margin-bottom: 10px !important;
    padding: 10px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 14px !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: 190px !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 */ </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">PREVISÃO DE REPOSIÇÃO DE ESTOQUE COMO ESTOQUE VÁLIDO</h1>
    </div>
  </div>
</header>

HTML <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"/> <style> /* ============================== = CONFIGURAÇÕES GERAIS = =============================== */ * { font-family: "Roboto", sans-serif; margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; } a { color: #42526e; text-decoration: none; -webkit-tap-highlight-color: transparent; } a:hover { color: white; } li { font-size: 14px !important; } h3 { font-size: 14px !important; font-weight: bold; } h2 { font-size: 15px !important; font-weight: bold; } /* ============================== = ESTILOS DE TÍTULOS = =============================== */ #title-text { display: none !important; } .wiki-content h1, .wiki-content h2 { font-family: "Roboto", sans-serif !important; } .wiki-content h1 { font-size: 16px !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 = =============================== */ .container2 { display: flex; gap: 20px; padding: 10px; } .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; flex-grow: 1; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; background-color: #f4f5f7; color: #42526e; overflow-x: hidden; } .card:first-child { flex: 4; } .card:last-child { flex: 6; } /* ============================== = 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: #1094b8; background-color: transparent; } .tabs .tab a:focus { background-color: rgba(82, 200, 232, 0.25); } .tabs .tab.disabled a, .tabs .tab.disabled a:hover { color: rgba(16, 148, 184, 0.24); } .tabs .indicator { background-color: #1094b8; } .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; } /* ============================== = 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; } .custom-list { padding-left: 0; margin-left: 1.5em; } .custom-list li { position: relative; padding-left: 1em; } ul.custom-list { padding-left: 10px; } ul.custom-list li { position: relative; list-style-type: disc; padding-left: 30px; margin-bottom: 10px; } .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: #1094b8; color: white; } /* ============================== = ESTILOS DE TABELAS = ============================== */ .custom-grey { background-color: #ffffff; } .custom-grey th, .custom-grey td { border: 1px solid #42526e; padding: 10px; } .custom-grey th { color: #fff; background-color: #42526e; } .custom-grey td { font-size: 13px; } .custom-grey tr:nth-child(odd) { background-color: #e4e4e6; } .custom-grey tr:nth-child(even) { background-color: #dfdfdf; } /* ========== FIM DO ESTILO ========= */ </style>     <div class="container2"> <!-- Primeiro Card --> <div class="card"> <div class="item"> <span class="label">     <i class="fas fa-tags"></i>     <div>Produto:</div> </span> <div>Automação da Força de Vendas</div> </div> <div class="item"> <span class="label">     <i class="fas fa-link"></i>     <div>Linha de Produto:</div> </span> <div>TOTVS CRM</div> </div> <div class="item"> <span class="label">     <i class="fas fa-chart-pie"></i>     <div>Segmento:</div> </span> <div>Cross Segmentos</div> </div> <div class="item"> <span class="label">     <i class="fas fa-desktop"></i>     <div>Módulo:</div> </span> <div>Venda</div> </div> <div class="item"> <span class="label">     <i class="fas fa-globe"></i>     <div>Aplicação:</div> </span> <div>Web/app móvel</div> </div> <div class="item"> <span class="label">     <i class="fas fa-hashtag"></i>     <div>Identificador:</div> </span> <div>15272362</div> </div> </div> <!-- Segundo Card --> <div class="card"> <div class="explanation"> <h2 class="custom-heading"> <i class="fa-solid fa-eye"></i>&nbsp &nbsp VISÃO GERAL </h2> <p class="justificado"> O TOTVS CRM - SFA agora oferece uma visão aprimorada das entradas de estoque futuras por produto, incluindo datas de reposição e quantidades previstas. Esse recurso eleva o nível das decisões de venda, permitindo que sejam baseadas não apenas no estoque atual, mas também no que está a caminho. Ao vender com base em futuras reposições, o sistema ajusta automaticamente a data de faturamento conforme a data de chegada do produto, garantindo eficiência e precisão na gestão de vendas. </p> </div> <div class="explanation"></div> <h2 class="custom-heading"> <i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO </h2> <p class="justificado"> Visa ampliar a visibilidade sobre as entradas futuras de estoque, permitindo vendas mais informadas que consideram tanto o estoque atual quanto o que será reposto em breve. </p> </div> </div> </div> <div class="container2"> <!-- ... (seu conteúdo existente) ... --> <!-- 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: 20px; margin-left: 50px; margin-right: 50px;"> <section id="section1" style="margin-top: 40px;"> <!-- Tab 70 conteúdo --> <h2 class="custom-heading"> <i class="fa-solid fa-book"></i> &nbsp ANTES DE COMEÇAR </h2> <h3>Requisitos</h3> <p>Para utilizar o recurso, certifique-se de estar usando a versão padrão da solução.</p> </section> <section id="section2" style="margin-top: 40px;"> <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHES FUNCIONAIS</h2> <h3>Funções </h3> <ol> <li> <p> <b>Visualização de Entradas Futuras:</b> A funcionalidade permite uma visão proativa do estoque, indicando entradas futuras para cada produto, incluindo datas de reposição e quantidades. </p> </li> <li> <p> <b>Atualização de Data de Faturamento:</b> Com base no estoque e nas entradas previstas, o sistema ajusta automaticamente a data de faturamento, alinhando-a com a disponibilidade do produto. </p> </li> <li> <p> <b>Validação de Estoque:</b> Existe a opção de ativar uma validação que impede vendas que excedam a quantidade total prevista para entrega, garantindo vendas dentro dos limites de estoque projetados. </p> </li> <li> <p> <b>Resumo de Carrinho:</b> A visualização consolidada no carrinho de compras oferece uma visão geral da quantidade total prevista para entrega de produtos selecionados, proporcionando clareza e previsibilidade durante a finalização da compra. </p> </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> <h3> Passo a Passo</h3> <h3>1. Acesse a Funcionalidade Pedidos:</h3> <p>Na lista de produtos, observe a coluna "Categorias".</p> <h3>2. Visualize Detalhes da Ordem de Produção:</h3> <ul class="browser-default"> <li>Procure pelo ícone de prancheta verde na coluna "Categorias".</li> <li>Clique neste ícone.</li> <li>Uma janela pop-up se abrirá com detalhes, como número do pedido, data de emissão, previsão de entrega, filial, armazém, código e quantidade em estoque.</li> </ul> <h3>3. Confira o Estoque e a Quantidade Prevista:</h3> <ul class="browser-default"> <li>Com o produto selecionado, visualize a quantidade atual em estoque.</li> <li>A "Quantidade Prevista" indicará o total do estoque atual mais a quantidade a caminho.</li> </ul> <h3>4. Acompanhe a Previsão de Faturamento:</h3> <ul class="browser-default"> <li>Selecione a opção "Previsão de Faturamento".</li> <li>Visualize quando o produto poderá ser faturado, com base no estoque disponível.</li> </ul> <br> <img src="https://totvscrm.com/wp-content/uploads/2023/08/estoqueprev_2.gif" alt="Minha Imagem" class="imagem-responsiva"> </section> <section id="section4" style="margin-top: 40px;"> <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLO PRÁTICO</h2> <h3>Caso de uso</h3> <p> <b>Cenário:</b> João é representante de vendas em uma empresa no ramo de manufatura. Seu principal instrumento de trabalho é o TOTVS CRM - SFA, onde ele gerencia e emite pedidos para os seus clientes. </p> <br> <p> <b>Desafio Antigo:</b> Sempre que um cliente questionava sobre a data de entrega de um produto específico, João tinha que acessar o ERP da empresa para verificar os detalhes da ordem de produção. Após coletar as informações, ele retornava ao SFA para continuar e finalizar o pedido. Esse método de alternar entre os sistemas não só era ineficiente, mas também abria margem para erros e incoerências nas informações passadas aos clientes. </p><br> <p> <b>Solução Atualizada:</b> Agora, com a integração no TOTVS CRM - SFA, João pode acessar diretamente a funcionalidade de Pedidos e, na lista de produtos, clica no ícone de prancheta na coluna "Categorias". Uma janela pop-up surge com todos os detalhes das ordens de produção, integradas diretamente do ERP. Esta solução otimizou o processo, tornando-o mais rápido e preciso, melhorando assim o atendimento ao cliente e a gestão das vendas. </p> </section> </div> <!-- Tab 30 fim --> <!-- Tab 30 fim --> </div> </div> <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> <br> <b>1. INTEGRAÇÃO - IMPORTAÇÃO DE ORDENS DE PRODUÇÃO</b> <ol> <ul class="browser-default"> <li>Importe os registros da tabela [SC2] do ERP para [ORDEMPRODUCAO].</li> <li> Garanta que apenas ordens de produção válidas (C2_DATRF = '') sejam importadas. </li> <li> Ordens com datafimordem anterior à data atual devem ser atualizadas para IDNATIVO=0 ou excluídas. </li></ul> </ol> <br> <h3>Busca Padrão para ORDEM_PRODUCAO no PedidoEngine</h3> <p> Para garantir que as ordens de compra sejam exibidas na tela do pedido, é crucial definir uma configuração padrão que busque as informações corretas com base nos critérios especificados. Veja abaixo a sugestão de configuração padrão: </p> <br> <ol> <li>Acesse <b>CONFIGURAÇÃO</b>.</li> <li>Selecione <b>CONFIGURAÇÃO PEDIDO</b>.</li> <li>Navegue até <b>BUSCA PRODUTO</b>.</li> <li>Localize a configuração <b>ORDEM_PRODUCAO</b> e <b>[TIPOESTOQUE]</b>;</li> </ol> <br> <div class="responsive-table"> <table class="striped custom-grey"> <thead> <tr> <th></th> <th>TOTVS CRM SFA</th> <th>PROTHEUS</th> <th>Tipo TOTVS CRM SFA</th> <th>Obrigatório</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>IDLOCALFILIAL</td> <td>C2_FILIAL</td> <td>INTEIRO</td> <td>SIM</td> </tr> <tr> <td>2</td> <td>NUMEROPEDIDO</td> <td>C2_NUM</td> <td>VARCHAR</td> <td>SIM</td> </tr> <tr> <td>3</td> <td>IDPRODUTO</td> <td>C2_PRODUTO</td> <td>INTEIRO</td> <td>SIM</td> </tr> <tr> <td>4</td> <td>QUANTIDADE</td> <td>C2_QUANT</td> <td>NUMERIC</td> <td>SIM</td> </tr> <tr> <td>5</td> <td>DATAINICIOORDEM</td> <td>C2_EMISSAO</td> <td>DATE</td> <td>SIM</td> </tr> <tr> <td>6</td> <td>DATAFIMORDEM</td> <td>C2_DATPRF</td> <td>DATE</td> <td>SIM</td> </tr> <tr> <td>7</td> <td>IDNATIVO</td> <td>FIXO 1</td> <td>INTEIRO</td> <td>SIM</td> </tr> <tr> <td>8</td> <td>IDTIPOESTOQUE</td> <td>C2_LOCAL</td> <td>INTEIRO</td> <td>SIM</td> </tr> </tbody> </table> </div> <br> <b>Opções de Filtro Direto e Níveis:</b> <ol> <li>ORDEMPRODUCAO.IDPRODUTO</li> <li>ORDEMPRODUCAO.IDTIPOESTOQUE</li> <li>ORDEMPRODUCAO.IDLOCALFILIAL</li> <li>TIPOESTOQUE.SGLTIPOESTOQUE</li> <li>TIPOESTOQUE.IDNATIVO</li> <li>TIPOESTOQUE.IDNDISPONIVELPARAPEDIDO</li> </ol> <br> <div class="row"> <!-- Observação 1 --> <div class="col s12"> <div class="card-panel" style="background-color: #f4f9fd; border: 1px solid #cdd6e5; box-shadow: none;"> <i class="fa fa-info-circle blue-text" aria-hidden="true"></i> <span class="black-text" style="margin-left: 10px;"> Independentemente das configurações feitas no PedidoEngine, o filtro <b>o.datafimordem >= CURRENT_DATE and o.idnativo=1</b> será sempre aplicado nas buscas. </span> </div> </div> <!-- Observação 2 --> <div class="col s12"> <div class="card-panel" style="background-color: #fffdf6; border: 1px solid #ffeaae; box-shadow: none;"> <i class="fa fa-exclamation-triangle amber-text" aria-hidden="true"></i> <span class="black-text" style="margin-left: 10px;"> Caso não haja uma configuração específica feita no <b>PedidoEngine</b>, a busca padrão a seguir deverá ser aplicada. </span> </div> </div> </div> <pre><code class="language-sql"> SELECT o.numeropedido as Pedido,        l.descricao     AS Filial, tp.descricao as "Tipo Estoque"        p.codigo,       AS Codigo,        quantidade      AS Quantidade,        datainicioordem AS "Data emissao",        datafimordem    AS "Data prevista entrega" FROM   ordemproducao o        INNER JOIN produto p                ON p.idproduto = o.idproduto        INNER JOIN local l                ON l.idlocal = o.idlocalfilial INNER JOIN tipoestoque tp ON tp.idtipoestoque = o.idtipoestoque WHERE  o.idproduto in (select idproduto from tabelapecoproduto where idtabelapreco=tabela_preco_do_cabecalho) and o.datafimordem >= CURRENT_DATE and o.idnativo=1; </code> </pre> <b>2. CONFIGURAÇÃO DE ÍCONE FIXO</b> <br> <b>Comportamento:</b> <ul> <li> Utilize a opção 18 no módulo Tools para incorporar uma nova configuração de ícone na tabela [ICONE]. </li> </ul> <br> <div class="responsive

-

table"> <table class="striped custom-grey"> <thead> <tr> <th>MasterSALES</th> <th></th> <th>Obrigatório</th> </tr> </thead> <tbody> <tr> <td>DESCRIÇÃO</td> <td>Consulta Ordens de produção ativas no ERP</td> <td>SIM</td> </tr> <tr> <td>CÓDIGO</td> <td>ORDEM_PRODUCAO</td> <td>SIM</td> </tr> <tr> <td>IMAGEM</td> <td> <img src="https://totvscrm.com/wp-content/uploads/2023/08/iconesfa.png" alt="Ícone" style="width: 3dvh; height: auto;"></td> <td>SIM</td> </tr> <tr> <td>SGLCONTEXTO</td> <td>PRODUTO</td> <td>SIM</td> </tr> <tr> <td>IDNATIVO</td> <td>0</td> <td>SIM</td> </tr> <tr> <td>IDNFIXO</td> <td>1</td> <td>SIM</td> </tr> </tbody> </table> </div> <br> <ul class="browser-default"> <li> <p> Acrescente a coluna <b>"Ícone Fixo?"</b> na tela de cadastro de ícones, que estará vinculada ao campo <b>[ICONE.IDNFIXO]</b>. </p> </li> <li> <p> Caso <b>[ICONE.IDNFIXO]</b> tenha o valor 1, permita a edição apenas da coluna <b>"DESCRICAO"</b>. Os outros campos devem permanecer não editáveis. </p> </li> </ul> <h3>3. EXIBIÇÃO NA COLUNA CATEGORIA</h3> <b>Comportamento:</b> <ul class="browser-default"> <li> <p> Ao iniciar a criação de um pedido, o sistema deve verificar se o ícone <b>ORDEM_PRODUCAO</b> está habilitado na tabela <b>ICONE</b>. </p> </li> <li> <p>Caso este ícone esteja <b>ATIVO</b>:</p> <ul class="browser-default"> <li> Utilizando as configurações de busca detalhadas no tópico "Busca Padrão", um novo ícone deve ser exibido na coluna <b>CATEGORIA</b> na tela de pesquisa de produtos. Isso deve ser refletido tanto no grid de produtos da interface WEB quanto na interface mobile. </li> <li>Este ícone representará as ordens de compra ativas.</li> </ul> </li> <br> <img src="https://totvscrm.com/wp-content/uploads/2023/08/consulta_produtos.png" alt="Minha Imagem" class="imagem-responsiva"> <img src="https://totvscrm.com/wp-content/uploads/2023/08/grid_produtos.png" alt="Minha Imagem" class="imagem-responsiva"> <img src="https://totvscrm.com/wp-content/uploads/2023/08/card_produtos.png" alt="Minha Imagem" class="imagem-responsiva"> <br> <br> <li> <p>Quando este ícone for clicado pelo usuário:</p> <ul class="browser-default"> <li> Uma janela pop-up deve ser aberta, apresentando a lista de ordens de compra ativas no momento. </li> </ul> </li> </ul> <img src="https://totvscrm.com/wp-content/uploads/2023/08/nova_lista_ordens.png" alt="Minha Imagem" class="imagem-responsiva"> <h1>4. EXIBIÇÃO NO GRID/CARRINHO</h1> <h3>Comportamento:</h3> <ul class="browser-default"> <li>No grid de produtos da interface WEB e nas respectivas telas do aplicativo mobile (Card, Carrinho e Negociação), deve ser exibido um campo para mostrar a "Quantidade Prevista" dos produtos.</li> <li>Esta "Quantidade Prevista" corresponde ao total acumulado das quantidades nas ordens de compra associadas ao produto que foi adicionado ao carrinho.</li> <li>A lógica para obter esta quantidade total se baseia na configuração de busca descrita no tópico acima.</li> <li>O filtro de busca, que consiste na condição <b>(datafimordem >= CURRENT_DATE AND idnativo=1)</b>, é uma constante e não deve ser alterado, independente de qualquer configuração em <code>pedidoengine</code>.</li> <li>Na eventualidade de não existir uma configuração de busca, pode-se recorrer à seguinte consulta para obter a 'Quantidade Prevista':</li> </ul> <br> <pre><code class="language-sql"> SELECT idproduto,        Sum(quantidade) AS "quantidade prevista" FROM   ordemproducao o WHERE  idproduto=:produto_no_carrinho       AND idlocalfilial = :filial_do_pedido   AND datafimordem >= CURRENT_DATE       AND idnativo=1 GROUP  BY idproduto ; </code> </pre> <p>Os campos que irão exibir estas quantidades nas diferentes interfaces são:</p> <br> <ul class="browser-default"> <li><b>WEB_GRID_QUANTIDADE_PREVISTA_ENTRADA</b></li> <li><b>ANDROID_CARD_QUANTIDADE_PREVISTA_ENTRADA</b></li> <li><b>ANDROID_CARRINHO_QUANTIDADE_PREVISTA_ENTRADA</b></li> <li><b>ANDROID_NEGOCIACAO_QUANTIDADE_PREVISTA_ENTRADA</b></li> </ul> <h3>VALIDAÇÃO PARÂMETRO</h3> <br> <ul class="browser-default"> <li>Se o parâmetro <code>HABILITAR_VALIDACAO_ESTOQUE = ATIVO</code>, prosseguir com a seguinte verificação: <ul class="browser-default"> <li>Validar se o parâmetro <code>sim3g.pedido.qtde.prevista.idnValidaQtdePrevista = ATIVO</code>.</li> <li>Se ambos os parâmetros forem ativos, calcular a <strong>QUANTIDADE TOTAL DISPONÍVEL</strong> (considerando ESTOQUE ATUAL + QUANTIDADE PREVISTA).</li> </ul> </li> <li>A <strong>QUANTIDADE PREVISTA</strong> é calculada a partir das ordens de produção definidas na configuração de busca do produto > ORDEM_PRODUCAO.</li> </ul> <br> <pre><code class="language-sql"> SELECT e.idproduto, e.quantidade + (SELECT Sum(quantidade) FROM ordemproducao o WHERE o.idproduto = e.idproduto AND o.idlocalfilial = e.idlocalfilial AND o.idtipoestoque = e.idtipoestoque AND o.idnativo = 1 AND o.datafimordem >= CURRENT_DATE) AS quantidade_disponível FROM estoque e WHERE e.idproduto = :produto_no_carrinho AND e.idlocalfilial = :filial_cabecalho AND e.idtipoestoque = :tipo_estoque_item_carrinho; </code> </pre> <ul class="browser-default"> <li>Após validar os parâmetros e determinar a quantidade total disponível, essa será a referência para validar o estoque, ou seja: <ul class="browser-default"> <li>Se <strong>QUANTIDADE VENDIDA</strong> for maior que a <strong>QUANTIDADE TOTAL DISPONÍVEL</strong>, a venda desse produto será bloqueada.</li> </ul> </li> <li>Caso o usuário tente inserir uma quantidade maior que a disponível, uma mensagem será exibida: <blockquote>‘Quantidade não permitida, pois é superior à quantidade total disponível. Quantidade total disponível (estoque + quantidade prevista = XXX)’</blockquote> </li> </ul> <div class="note"> Abaixo, segue o fluxograma da regra de validação de estoque. (O fluxograma real deverá ser inserido aqui). </div> <br> <img src="https://totvscrm.com/wp-content/uploads/2023/08/qtd_total.png" alt="Minha Imagem" class="imagem-responsiva"> <h3>CRIAÇÃO DE NOVO CAMPO NO BANCO</h3> <ul class="browser-default"> <li>Modificação na tabela <b>ordemproducao</b> para adicionar uma nova coluna referente ao tipo de estoque. </li> </ul> <pre><code class="language-sql"> ALTER TABLE ordemproducao ADD COLUMN idtipoestoque INT8 REFERENCES tipoestoque (idtipoestoque); </code> </pre> </div> </div> </div> <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 acontece se eu tentar vender uma quantidade de produto maior do que a disponível?</div> <div class="collapsible-body"><span>Se a quantidade vendida for maior do que a quantidade total disponível (estoque atual + quantidade prevista), a venda daquele produto será bloqueada e você receberá um aviso. </span></div> </li> <!-- Adicione mais perguntas e respostas aqui conforme necessário --> </ul> </div> <!-- Primeira coluna do conteúdo da guia 2 --> </div> </div> </div> <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 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>