App Recibos empresa Shopbox Scripts

by thvinic

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabela de Lançamentos</title>
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<h1>Tabela de Lançamentos</h1>

<div>
    <label for="nome">Nome:</label>
    <input type="text" id="nome" required>
    
    <label for="descricao">Descrição:</label>
    <input type="text" id="descricao" required>
    
    <label for="valor">Valor (R$):</label>
    <input type="number" id="valor" required step="0.01">
    
    <label for="data">Data:</label>
    <input type="date" id="data" required>
    
    <button onclick="adicionarItem()">Adicionar Item</button>
</div>

<table id="tabela">
    <thead>
        <tr>
            <th>Nome</th>
            <th>Descrição</th>
            <th>Valor (R$)</th>
            <th>Data</th>
            <th>Hora</th>
            <th>Ações</th>
        </tr>
    </thead>
    <tbody>
        <!-- Os itens serão adicionados aqui -->
    </tbody>
</table>

<div id="balanco">Balanço do Mês: R$ 0,00</div>

<canvas id="grafico"></canvas>


</body>
</html>

CSS

<style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        #balanco {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
        }
        #grafico {
            margin-top: 40px;
            width: 100%;
            height: 400px;
        }
    </style>

JavaScript

// Função para calcular o balanço
function calcularBalanco() {
    const tabela = document.getElementById('tabela').getElementsByTagName('tbody')[0];
    let total = 0;

    for (let i = 0; i < tabela.rows.length; i++) {
        const valor = parseFloat(tabela.rows[i].cells[2].textContent.replace('R$ ', '').replace(',', '.'));
        total += valor;
    }

    document.getElementById('balanco').textContent = `Balanço do Mês: R$ ${total.toFixed(2).replace('.', ',')}`;
}

// Função para adicionar item
function adicionarItem() {
    const nome = document.getElementById('nome').value;
    const descricao = document.getElementById('descricao').value;
    const valor = parseFloat(document.getElementById('valor').value).toFixed(2);
    const data = document.getElementById('data').value;

    if (nome && descricao && valor && data) {
        const tabela = document.getElementById('tabela').getElementsByTagName('tbody')[0];
        
        const novaLinha = tabela.insertRow();
        
        const celulaNome = novaLinha.insertCell(0);
        const celulaDescricao = novaLinha.insertCell(1);
        const celulaValor = novaLinha.insertCell(2);
        const celulaData = novaLinha.insertCell(3);
        const celulaHora = novaLinha.insertCell(4);
        const celulaAcoes = novaLinha.insertCell(5);
        
        celulaNome.textContent = nome;
        celulaDescricao.textContent = descricao;
        celulaValor.textContent = `R$ ${valor.replace('.', ',')}`;
        
        // Formata a data para o formato brasileiro
        const dataObj = new Date(data + 'T00:00:00'); // Adiciona hora zero para evitar problemas de fuso horário
        celulaData.textContent = dataObj.toLocaleDateString('pt-BR'); // Exibe apenas a data

        // Coleta a hora atual
        const agora = new Date();
        const horas = String(agora.getHours()).padStart(2, '0');
        const minutos = String(agora.getMinutes()).padStart(2, '0');
        const segundos =...