Form Component - Copy this React, Tailwind Component to your project
1. Clique no botão "Cadastrar Motorista". 2. Após clicar, prossiga para o próximo passo que é abrir a aba "Entregas". 3. Adicione a seção "Entregas" abaixo da tabela de pedidos. 4. Insira os botões "Voltar" e "Próximo" na parte inferior da aba "Entregas". 5. Finalize o processo com a opção de "Fechamento". <html><head><base href="https://adm.ultragaz24horas.com/p/financeiro-acerto-contas-motorista.php"> <title>Ultragaz 24 Horas - Acerto de Contas Motorista</title> <style> body, html { font-family: 'Arial', sans-serif; background-color: #f0f0f0; color: #333; } #datetime-bar { position: fixed; top: 0; left: 0; width: 100%; background-color: #007bff; color: white; text-align: center; padding: 10px 0; font-weight: bold; z-index: 1000; } .container { max-width: 1000px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); padding: 30px; margin-top: 50px; /* Add space for the datetime bar */ } h1, h2 { color: #4a4a4a; border-bottom: 2px solid #e0e0e0; padding-bottom: 10px; } .form-group { margin-bottom: 20px; } label { color: #4a4a4a; font-weight: 600; } input[type="text"], input[type="number"], select { border: 1px solid #d0d0d0; border-radius: 5px; padding: 12px; font-size: 14px; background-color: #f9f9f9; } input[type="text"]:focus, input[type="number"]:focus, select:focus { border-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); } button { background-color: #007bff; color: white; padding: 12px 24px; border-radius: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: background-color 0.3s, transform 0.2s; } button:hover { background-color: #0056b3; transform: translateY(-2px); } table { background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.1); } th { background-color: #007bff; color: white; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; } tr:nth-child(even) { background-color: #f8f9fa; } .tab { border: none; background-color: transparent; margin-bottom: 30px; } .tab button { background-color: #e9ecef; color: #495057; border-radius: 5px 5px 0 0; margin-right: 5px; font-weight: 600; } .tab button:hover { background-color: #007bff; color: white; } .tab button.active { background-color: #007bff; color: white; } .tabcontent { border: none; background-color: #fff; border-radius: 0 5px 5px 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); padding: 20px; } .loading { background-color: rgba(0, 0, 0, 0.7); } .loading-content { background-color: #fff; border-radius: 10px; padding: 30px; } .spinner { border-top: 5px solid #007bff; } </style> </head> <body> <div id="datetime-bar"> <span id="current-datetime"></span> </div> <div class="container"> <h1>Acerto de Contas - Motorista</h1> <div class="tab"> <button class="tablinks active" onclick="openTab(event, 'Cadastro')">Cadastro de Motorista</button> <button class="tablinks" onclick="openTab(event, 'Entregas')">Entregas</button> <button class="tablinks" onclick="openTab(event, 'Fechamento')">Fechamento</button> </div> <div id="Cadastro" class="tabcontent" style="display:block;"> <h2>Cadastro de Motorista</h2> <div class="form-group"> <label for="nome-completo">Nome Completo:</label> <input type="text" id="nome-completo" required> </div> <div class="form-group"> <label for="cpf">CPF:</label> <input type="text" id="cpf" required> </div> <button onclick="cadastrarMotorista()">Cadastrar Motorista</button> </div> <div id="Entregas" class="tabcontent"> <h2>Gestão de Entregas</h2> <div class="form-group"> <label for="motorista">Selecione o Motorista:</label> <select id="motorista"> <option value="">Escolha um motorista</option> </select> </div> <div class="form-group"> <label for="produto">Produto:</label> <select id="produto"> <option value="">Selecione o produto</option> <option value="P13">Botijão P13 - R$ 130,00</option> <option value="P45">Botijão P45 - R$ 430,00</option> <option value="P20">Botijão P20 - R$ 230,00</option> </select> </div> <div class="form-group"> <label for="quantidade">Quantidade:</label> <input type="number" id="quantidade" min="1"> </div> <div class="form-group"> <label for="tipo-entrega">Tipo de Entrega:</label> <select id="tipo-entrega"> <option value="disk">Disk Gás</option> <option value="motorista">Pelo Motorista</option> </select> </div> <button onclick="adicionarEntrega()">Adicionar Entrega</button> <h3>Entregas Registradas</h3> <table id="tabela-entregas"> <thead> <tr> <th>Data</th> <th>Produto</th> <th>Quantidade</th> <th>Tipo</th> <th>Status</th> <th>Valor Total</th> <th>Ações</th> </tr> </thead> <tbody> </tbody> </table> </div> <div id="Fechamento" class="tabcontent"> <h2>Fechamento de Contas</h2> <div class="form-group"> <label for="total-vendas">Total de Vendas:</label> <input type="number" id="total-vendas" readonly> </div> <div class="form-group"> <label for="recebido-dinheiro">Recebido em Dinheiro:</label> <input type="number" id="recebido-dinheiro"> </div> <div class="form-group"> <label for="recebido-cartao">Recebido em Cartão:</label> <input type="number" id="recebido-cartao"> </div> <div class="form-group"> <label for="deposito-brinks">Depósito no Cofre (Brinks):</label> <input type="number" id="deposito-brinks"> </div> <div class="form-group"> <label for="despesas-rua">Despesas de Rua:</label> <input type="number" id="despesas-rua"> </div> <div class="form-group"> <label for="adiantamento">Adiantamento para o Motorista:</label> <input type="number" id="adiantamento"> </div> <button onclick="calcularFechamento()">Calcular Fechamento</button> <button onclick="imprimirRecibo()">Imprimir Recibo</button> <div id="resultado-fechamento" style="display:none;"> <h3>Resumo do Fechamento</h3> <p><strong>Total de Vendas:</strong> R$ <span id="resumo-total-vendas"></span></p> <p><strong>Total Recebido:</strong> R$ <span id="resumo-total-recebido"></span></p> <p><strong>Diferença:</strong> R$ <span id="resumo-diferenca"></span></p> </div> </div> </div> <div class="loading"> <div class="loading-content"> <div class="spinner"></div> <p>Processando...</p> </div> </div> <script> let motoristas = []; let entregas = []; let totalVendas = 0; const precosProdutos = { P13: 130, P20: 230, P45: 430 }; function updateDateTime() { const now = new Date(); const options = { timeZone: 'America/Sao_Paulo', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }; const formatter = new Intl.DateTimeFormat('pt-BR', options); const formattedDateTime = formatter.format(now); document.getElementById('current-datetime').textContent = formattedDateTime; } // Update time every second setInterval(updateDateTime, 1000); // Initial call to display time immediately updateDateTime(); function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } function showLoading() { document.querySelector('.loading').style.display = 'block'; } function hideLoading() { document.querySelector('.loading').style.display = 'none'; } function cadastrarMotorista() { showLoading(); const nome = document.getElementById('nome-completo').value; const cpf = document.getElementById('cpf').value; if (nome && cpf) { setTimeout(() => { motoristas.push({nome, cpf}); atualizarSelectMotoristas(); hideLoading(); alert('Motorista cadastrado com sucesso!'); }, 1000); } else { hideLoading(); alert('Por favor, preencha todos os campos.'); } } function atualizarSelectMotoristas() { const select = document.getElementById('motorista'); select.innerHTML = '<option value="">Escolha um motorista</option>'; motoristas.forEach((motorista, index) => { const option = document.createElement('option'); option.value = index; option.textContent = motorista.nome; select.appendChild(option); }); } function adicionarEntrega() { showLoading(); const motoristaIndex = document.getElementById('motorista').value; const data = new Date().toISOString().split('T')[0]; // Current date const produto = document.getElementById('produto').value; const quantidade = parseInt(document.getElementById('quantidade').value); const tipoEntrega = document.getElementById('tipo-entrega').value; if (motoristaIndex && produto && quantidade && tipoEntrega) { setTimeout(() => { const preco = precosProdutos[produto]; const valorTotal = preco * quantidade; totalVendas += valorTotal; entregas.push({ motorista: motoristas[motoristaIndex].nome, data, produto, quantidade, tipoEntrega, status: 'Aberta', valorTotal }); atualizarTabelaEntregas(); atualizarTotalVendas(); hideLoading(); }, 1000); } else { hideLoading(); alert('Por favor, preencha todos os campos.'); } } function atualizarTotalVendas() { document.getElementById('total-vendas').value = totalVendas.toFixed(2); } function atualizarTabelaEntregas() { const tbody = document.querySelector('#tabela-entregas tbody'); tbody.innerHTML = ''; entregas.forEach((entrega, index) => { const tr = document.createElement('tr'); tr.innerHTML = ` <td>${entrega.data}</td> <td>${entrega.produto}</td> <td>${entrega.quantidade}</td> <td>${entrega.tipoEntrega === 'disk' ? 'Disk Gás' : 'Pelo Motorista'}</td> <td>${entrega.status}</td> <td>R$ ${entrega.valorTotal.toFixed(2)}</td> <td> <button onclick="concluirEntrega(${index})">Concluir</button> <button onclick="removerEntrega(${index})">Remover</button> </td> `; tbody.appendChild(tr); }); } function concluirEntrega(index) { showLoading(); setTimeout(() => { entregas[index].status = 'Concluída'; atualizarTabelaEntregas(); hideLoading(); }, 1000); } function removerEntrega(index) { showLoading(); setTimeout(() => { totalVendas -= entregas[index].valorTotal; entregas.splice(index, 1); atualizarTabelaEntregas(); atualizarTotalVendas(); hideLoading(); }, 1000); } function calcularFechamento() { showLoading(); setTimeout(() => { const totalRecebido = (parseFloat(document.getElementById('recebido-dinheiro').value) || 0) + (parseFloat(document.getElementById('recebido-cartao').value) || 0) + (parseFloat(document.getElementById('deposito-brinks').value) || 0); const despesasRua = parseFloat(document.getElementById('despesas-rua').value) || 0; const adiantamento = parseFloat(document.getElementById('adiantamento').value) || 0; const diferenca = totalVendas - totalRecebido - despesasRua - adiantamento; document.getElementById('resumo-total-vendas').textContent = totalVendas.toFixed(2); document.getElementById('resumo-total-recebido').textContent = totalRecebido.toFixed(2); document.getElementById('resumo-diferenca').textContent = diferenca.toFixed(2); document.getElementById('resultado-fechamento').style.display = 'block'; hideLoading(); }, 1500); } function imprimirRecibo() { showLoading(); setTimeout(() => { const currentDate = new Date().toLocaleDateString('pt-BR', {timeZone: 'America/Sao_Paulo'}); const recibo = ` ULTRAGAZ 24 HORAS - RECIBO DE FECHAMENTO Data: ${currentDate} Total de Vendas: R$ ${totalVendas.toFixed(2)} Recebido em Dinheiro: R$ ${document.getElementById('recebido-dinheiro').value} Recebido em Cartão: R$ ${document.getElementById('recebido-cartao').value} Depósito no Cofre (Brinks): R$ ${document.getElementById('deposito-brinks').value} Despesas de Rua: R$ ${document.getElementById('despesas-rua').value} Adiantamento para o Motorista: R$ ${document.getElementById('adiantamento').value} Total Recebido: R$ ${document.getElementById('resumo-total-recebido').textContent} Diferença: R$ ${document.getElementById('resumo-diferenca').textContent} ___________________________ Assinatura do Motorista ___________________________ Assinatura do Responsável `; const printWindow = window.open('', '', 'height=600,width=800'); printWindow.document.write('<html><head><title>Recibo de Fechamento</title>'); printWindow.document.write('</head><body>'); printWindow.document.write('<pre>' + recibo + '</pre>'); printWindow.document.write('</body></html>'); printWindow.document.close(); printWindow.print(); hideLoading(); }, 2000); } </script> </body> </html>