<title>Kometa Finanças - Sistema</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root{
--primary:#4b6cb7;
--dark:#182848;
--gold:#ffd700;
--accent:#4b6cb7;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:linear-gradient(135deg,#ece9e6,#ffffff);
color:#222;
}
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 20px;
background:linear-gradient(90deg,var(--primary),var(--dark));
color:#fff;
box-shadow:0 4px 8px rgba(0,0,0,0.15);
border-radius:0 0 12px 12px;
}
.logo{ font-family:"Brush Script MT",cursive; font-size:28px; color:var(--gold); text-shadow:1px 1px 2px rgba(0,0,0,0.4);}
.menu-buttons button{
margin-left:8px;
padding:8px 12px;
border-radius:8px;
border:none;
background:var(--gold);
color:#111;
font-weight:700;
cursor:pointer;
}
.menu-buttons button.hiddenBtn{ display:none; }
.section{ max-width:1200px; margin:22px auto; padding:18px; background:white; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.08); display:none;}
.section.active{ display:block; }
.form-container{ display:flex; justify-content:center; align-items:center; min-height:60vh; }
form{ width:320px; background:white; padding:22px; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,0.08); }
form h1{ margin-top:0; text-align:center; color:var(--primary); }
input, select, button{ display:block; width:100%; padding:10px 12px; margin:8px 0; border-radius:8px; border:1px solid #d0d7e6; }
button.primary{ background:var(--primary); color:white; border:none; font-weight:700; cursor:pointer; }
button.ghost{ background:#f3f6fb; color:#333; border:1px solid #e3e8f3; }
.cards{ display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px; }
.card{ flex:1; min-width:190px; background:linear-gradient(180deg,#fff,#f7f9ff); padding:14px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.06); text-align:center;}
.card h4{ margin:0; color:#666; font-weight:600; }
.card p{ margin:8px 0 0; font-size:20px; font-weight:800; color:var(--dark); }
canvas{ width:100% !important; height:320px !important; border-radius:10px; }
table{ width:100%; border-collapse:collapse; margin-top:12px; }
thead th{ background:#f1f5fb; padding:10px; text-align:center; }
td, th{ border:1px solid #e6e9f2; padding:8px; font-size:14px; text-align:center; }
.pago{ background:#e6f7ea; }
.nao-pago{ background:#ffe7e7; }
.btn-small{ padding:6px 8px; border-radius:6px; border:none; cursor:pointer; }
.btn-danger{ background:#ff4b5c; color:white; }
.btn-success{ background:#2ecc71; color:white; }
.btn-pdf{ background:#1976d2; color:white; }
/* Centralizar apenas os formulários de Pagamento e Vendas */
#paymentSection form,
#salesSection form {
max-width: 500px;
margin: 0 auto;
}
</style>
Kometa X
Kometa Finanças
Central de Pagamento
Vendas
Sair
Criar conta
Voltar ao login
Dinheiro
Pix
Cartão de Crédito
Cartão de Débito
Não Pago
Pago
Adicionar Ordem
<!-- Filtro + PDF -->
<div style="margin:10px 0;">
<label>Filtrar por data:
<input type="date" id="filtroDataPagamento" />
</label>
<button type="button" onclick="renderPaymentsTable()">Filtrar</button>
<button type="button" onclick="exportarRelatorioPDF()" class="btn-pdf">Exportar Relatório PDF</button>
</div>
<!-- Resumo -->
<div id="pagamentosResumo" style="margin:10px 0; font-weight:bold; color:#333;"></div>
<table>
<thead>
<tr>
<th>Ordem</th><th>Cliente</th><th>Aparelho</th><th>Valor</th>
<th>Forma</th><th>Status</th><th>Data</th><th>Ações</th>
</tr>
</thead>
<tbody id="ordersTable"></tbody>
</table>
De:
Até:
Filtrar
<script>
/* === Login / Registro === */
const loginSection = document.getElementById("loginSection");
const registerSection = document.getElementById("registerSection");
const dashboardSection = document.getElementById("dashboardSection");
const btnShowRegister = document.getElementById("btnShowRegister");
const btnShowLogin = document.getElementById("btnShowLogin");
const loginForm = document.getElementById("loginForm");
const registerForm = document.getElementById("registerForm");
const btnFinancas = document.getElementById("btnFinancas");
const btnPagamento = document.getElementById("btnPagamento");
const btnVendas = document.getElementById("btnVendas");
const btnSair = document.getElementById("btnSair");
btnShowRegister.onclick = () => {
loginSection.classList.remove("active");
registerSection.classList.add("active");
};
btnShowLogin.onclick = () => {
registerSection.classList.remove("active");
loginSection.classList.add("active");
};
registerForm.onsubmit = (e) => {
e.preventDefault();
const user = document.getElementById("regUser").value.trim();
const pass = document.getElementById("regPass").value.trim();
if (!user || !pass) { alert("Preencha todos os campos!"); return; }
let users = JSON.parse(localStorage.getItem("users") || "[]");
if (users.find(u => u.user === user)) { alert("Usuário já existe!"); return; }
users.push({ user, pass });
localStorage.setItem("users", JSON.stringify(users));
alert("Conta criada com sucesso!");
registerSection.classList.remove("active");
loginSection.classList.add("active");
};
loginForm.onsubmit = (e) => {
e.preventDefault();
const user = document.getElementById("loginUser").value.trim();
const pass = document.getElementById("loginPass").value.trim();
let users = JSON.parse(localStorage.getItem("users") || "[]");
let found = users.find(u => u.user === user && u.pass === pass);
if (found) { entrarNoSistema(); } else { alert("Usuário ou senha incorretos!"); }
};
btnSair.onclick = () => {
dashboardSection.classList.remove("active");
document.getElementById("paymentSection").classList.remove("active");
document.getElementById("salesSection").classList.remove("active");
loginSection.classList.add("active");
[btnFinancas, btnPagamento, btnVendas, btnSair].forEach(b => b.classList.add("hiddenBtn"));
};
btnFinancas.onclick = () => { hideAll(); dashboardSection.classList.add("active"); atualizarGraficos(); };
btnPagamento.onclick = () => { hideAll(); document.getElementById("paymentSection").classList.add("active"); renderPaymentsTable(); atualizarGraficos(); };
btnVendas.onclick = () => { hideAll(); document.getElementById("salesSection").classList.add("active"); renderSalesSection(); atualizarGraficos(); };
function hideAll() {
[dashboardSection, document.getElementById("paymentSection"), document.getElementById("salesSection")].forEach(s => s.classList.remove("active"));
}
function entrarNoSistema() {
loginSection.classList.remove("active");
registerSection.classList.remove("active");
dashboardSection.classList.add("active");
[btnFinancas, btnPagamento, btnVendas, btnSair].forEach(b => b.classList.remove("hiddenBtn"));
atualizarGraficos();
}
/* === Pagamentos === */
let orders = JSON.parse(localStorage.getItem("orders") || "[]");
document.getElementById("orderForm").onsubmit = (e) => {
e.preventDefault();
const cliente = document.getElementById("ordCliente").value;
const numero = document.getElementById("ordNumero").value;
const aparelho = document.getElementById("ordAparelho").value;
const valor = parseFloat(document.getElementById("ordValor").value);
const forma = document.getElementById("ordForma").value;
const status = document.getElementById("ordStatus").value;
const data = document.getElementById("ordData").value;
orders.push({ cliente, numero, aparelho, valor, forma, status, data });
localStorage.setItem("orders", JSON.stringify(orders));
document.getElementById("orderForm").reset();
renderPaymentsTable();
atualizarGraficos();
};
function renderPaymentsTable() {
const filtroData = document.getElementById("filtroDataPagamento").value;
let tbody = document.getElementById("ordersTable");
tbody.innerHTML = "";
let filtrados = filtroData ? orders.filter(o => o.data === filtroData) : orders;
let recebido = 0, receber = 0;
filtrados.forEach((o, idx) => {
if (o.status === "Pago") recebido += o.valor; else receber += o.valor;
let tr = document.createElement("tr");
tr.className = o.status === "Pago" ? "pago" : "nao-pago";
tr.innerHTML = `
${o.numero}${o.cliente}${o.aparelho}
R$ ${o.valor.toFixed(2)}${o.forma}
${o.status}${o.data}
Excluir
`;
tbody.appendChild(tr);
});
document.getElementById("pagamentosResumo").innerText =
`Recebido: R$ ${recebido.toFixed(2)} | A Receber: R$ ${receber.toFixed(2)}`;
}
function deleteOrder(i) {
orders.splice(i, 1);
localStorage.setItem("orders", JSON.stringify(orders));
renderPaymentsTable();
atualizarGraficos();
}
/* === Vendas === */
let sales = JSON.parse(localStorage.getItem("sales") || "[]");
document.getElementById("saleForm").onsubmit = (e) => {
e.preventDefault();
const produto = document.getElementById("saleName").value;
const origem = document.getElementById("saleSource").value;
const valor = parseFloat(document.getElementById("saleValue").value);
const data = new Date().toISOString().split("T")[0];
sales.push({ produto, origem, valor, data });
localStorage.setItem("sales", JSON.stringify(sales));
document.getElementById("saleForm").reset();
renderSalesSection();
atualizarGraficos();
};
function renderSalesSection() {
const ini = document.getElementById("filtroDataIni").value;
const fim = document.getElementById("filtroDataFim").value;
let filtrados = sales;
if (ini && fim) { filtrados = sales.filter(s => s.data >= ini && s.data <= fim); }
else if (ini) { filtrados = sales.filter(s => s.data >= ini); }
else if (fim) { filtrados = sales.filter(s => s.data <= fim); }
let total = 0, qtd = 0;
let lista = document.getElementById("salesList");
lista.innerHTML = "";
filtrados.forEach(s => {
total += s.valor; qtd++;
let div = document.createElement("div");
div.textContent = `${s.data} | ${s.produto} (${s.origem}) - R$ ${s.valor.toFixed(2)}`;
lista.appendChild(div);
});
document.getElementById("salesResumo").innerText =
`Quantidade: ${qtd} | Total: R$ ${total.toFixed(2)}`;
}
/* === GRÁFICOS KOMETA FINANÇAS === */
let chartPagamentos, chartVendas, chartTotalGeral;
function atualizarGraficos() {
// 1️⃣ Pagamentos: Pago vs Não Pago
const totalPago = orders.filter(o => o.status === "Pago").reduce((s, o) => s + o.valor, 0);
const totalNaoPago = orders.filter(o => o.status !== "Pago").reduce((s, o) => s + o.valor, 0);
if(chartPagamentos) chartPagamentos.destroy();
chartPagamentos = new Chart(document.getElementById("chartPagamentos"), {
type: "doughnut",
data: {
labels: ["Pago", "Não Pago"],
datasets: [{
data: [totalPago, totalNaoPago],
backgroundColor: ["#2ecc71", "#ff4b5c"],
borderColor: ["#27ae60","#c0392b"],
borderWidth: 2
}]
},
options: {
plugins: { legend: { position: "bottom", labels: { font: { size: 14 } } } },
responsive: true,
maintainAspectRatio: false
}
});
// 2️⃣ Vendas por Origem
const vendasPorOrigem = {};
sales.forEach(s => { vendasPorOrigem[s.origem] = (vendasPorOrigem[s.origem] || 0) + s.valor; });
if(chartVendas) chartVendas.destroy();
chartVendas = new Chart(document.getElementById("chartVendas"), {
type: "bar",
data: {
labels: Object.keys(vendasPorOrigem),
datasets: [{
label: "Vendas (R$)",
data: Object.values(vendasPorOrigem),
backgroundColor: ["#4b6cb7", "#6a89cc", "#a29bfe"],
borderColor: "#182848",
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } },
scales: {
y: { beginAtZero: true, ticks: { precision:0 } },
x: { ticks: { font: { size: 14 } } }
}
}
});
// 3️⃣ Total Geral: Pagamentos + Vendas
if(chartTotalGeral) chartTotalGeral.destroy();
chartTotalGeral = new Chart(document.getElementById("chartTotal"), {
type: "line",
data: {
labels: ["Pagamentos", "Vendas"],
datasets: [{
label: "Total (R$)",
data: [totalPago + totalNaoPago, Object.values(vendasPorOrigem).reduce((a,b)=>a+b,0)],
backgroundColor: "rgba(75, 108, 183, 0.2)",
borderColor: "#4b6cb7",
borderWidth: 2,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
plugins: { legend: { display: true, position: "bottom" } },
scales: { y: { beginAtZero: true } }
}
});
// Atualiza os cards de resumo também
document.getElementById("cardTotalPagamentos").innerText = `R$ ${(totalPago+totalNaoPago).toFixed(2)}`;
document.getElementById("cardTotalVendas").innerText = `R$ ${Object.values(vendasPorOrigem).reduce((a,b)=>a+b,0).toFixed(2)}`;
document.getElementById("cardTotalGeral").innerText = `R$ ${(totalPago+totalNaoPago+Object.values(vendasPorOrigem).reduce((a,b)=>a+b,0)).toFixed(2)}`;
}
// Chama na inicialização
atualizarGraficos();
</script>