Criação da tela de clientes e relatórios
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -100,11 +100,11 @@
|
||||
<form method="get" action="/" style="margin: 6px 0 18px">
|
||||
<div class="combo-wrap">
|
||||
<label for="cliente" style="font-size:13px;color:#374151">Selecionar Cliente:</label>
|
||||
<select class="combo" name="cliente" id="cliente">
|
||||
<option value="">Todos</option>
|
||||
{% for c in clientes %}
|
||||
<option value="{{ c }}" {% if c == cliente_atual %}selected{% endif %}>{{ c }}</option>
|
||||
{% endfor %}
|
||||
<select id="cliente" name="cliente" class="combo">
|
||||
<option value="">Todos</option>
|
||||
{% for c in clientes %}
|
||||
<option value="{{ c.id }}" {% if cliente_selecionado == c.id %}selected{% endif %}>{{ c.nome }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -3,43 +3,227 @@
|
||||
{% block content %}
|
||||
<h1>📊 Relatórios</h1>
|
||||
|
||||
<form method="get" style="margin-bottom: 20px;">
|
||||
<label for="cliente">Filtrar por Cliente:</label>
|
||||
<select name="cliente" id="cliente" onchange="this.form.submit()">
|
||||
<option value="">Todos</option>
|
||||
{% for c in clientes %}
|
||||
<option value="{{ c }}" {% if c == cliente_atual %}selected{% endif %}>{{ c }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</form>
|
||||
<div style="display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin: 6px 0 18px;">
|
||||
<div class="combo-wrap">
|
||||
<label for="relatorio-cliente" style="font-size:13px;color:#374151">Selecionar Cliente:</label>
|
||||
<select id="relatorio-cliente" class="combo" style="min-width:340px;">
|
||||
<option value="">Todos</option>
|
||||
{% for c in clientes %}
|
||||
<option value="{{ c.id }}">{{ c.nome }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px;">
|
||||
<a href="/export-excel{% if cliente_atual %}?cliente={{ cliente_atual }}{% endif %}" class="btn btn-primary">
|
||||
📥 Baixar Relatório Corrigido (Excel)
|
||||
</a>
|
||||
<div class="combo-wrap">
|
||||
<label for="tipo-relatorio" style="font-size:13px;color:#374151">Tipo de relatório:</label>
|
||||
<select id="tipo-relatorio" class="combo" style="min-width:240px;">
|
||||
<option value="geral">1. Geral</option>
|
||||
<option value="exclusao_icms">2. Exclusão do ICMS</option>
|
||||
<option value="aliquota_icms">3. Alíquota ICMS (%)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="combo-wrap">
|
||||
<label for="page-size" style="font-size:13px;color:#374151">Itens por página:</label>
|
||||
<select id="page-size" class="combo" style="width:140px;">
|
||||
<option>20</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a id="link-excel" class="btn btn-primary" href="/export-excel">📥 Baixar (Excel)</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr style="background: #2563eb; color: white;">
|
||||
<th style="padding: 10px;">Cliente</th>
|
||||
<th>Data</th>
|
||||
<tr>
|
||||
<th>Cliente</th>
|
||||
<th>UC</th>
|
||||
<th>Referência</th>
|
||||
<th>Nota Fiscal</th>
|
||||
<th>Valor Total</th>
|
||||
<th>ICMS na Base</th>
|
||||
<th>Status</th>
|
||||
<th>ICMS (%)</th>
|
||||
<th>ICMS (R$)</th>
|
||||
<th>PIS (R$)</th>
|
||||
<th>COFINS (R$)</th>
|
||||
<th>Distribuidora</th>
|
||||
<th>Processado em</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody id="relatorios-body">
|
||||
{% for f in faturas %}
|
||||
<tr style="background: {{ loop.cycle('#ffffff', '#f0f4f8') }};">
|
||||
<td style="padding: 10px;">{{ f.nome }}</td>
|
||||
<td>{{ f.data_emissao }}</td>
|
||||
<td>R$ {{ '%.2f'|format(f.valor_total)|replace('.', ',') }}</td>
|
||||
<td>{{ 'Sim' if f.com_icms else 'Não' }}</td>
|
||||
<td>{{ f.status }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ f.nome }}</td>
|
||||
<td class="mono">{{ f.unidade_consumidora }}</td>
|
||||
<td class="mono">{{ f.referencia }}</td>
|
||||
<td class="mono">{{ f.nota_fiscal }}</td>
|
||||
<td>R$ {{ '%.2f'|format((f.valor_total or 0.0))|replace('.', ',') }}</td>
|
||||
<td>{{ '%.2f'|format((f.icms_aliq or 0.0))|replace('.', ',') }}</td>
|
||||
<td>R$ {{ '%.2f'|format((f.icms_valor or 0.0))|replace('.', ',') }}</td>
|
||||
<td>R$ {{ '%.2f'|format((f.pis_valor or 0.0))|replace('.', ',') }}</td>
|
||||
<td>R$ {{ '%.2f'|format((f.cofins_valor or 0.0))|replace('.', ',') }}</td>
|
||||
<td>{{ f.distribuidora or '-' }}</td>
|
||||
<td class="muted">{{ f.data_processamento }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="pager" style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px;">
|
||||
<div id="range" class="muted">Mostrando 0–0 de 0</div>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<button id="prev" class="btn btn-primary">◀ Anterior</button>
|
||||
<button id="next" class="btn btn-primary">Próxima ▶</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.combo {
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 12px 44px 12px 14px;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
color: #111827;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,.06);
|
||||
transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
|
||||
}
|
||||
.combo:focus { outline: none; border-color: #2563eb; box-shadow: 0 8px 28px rgba(37,99,235,.18); }
|
||||
.combo-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; }
|
||||
.combo-wrap:after {
|
||||
content: "▾"; position: absolute; right: 12px; pointer-events: none; color:#6b7280; font-size: 12px;
|
||||
}
|
||||
|
||||
/* tabela no estilo “clientes” */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 34px rgba(0,0,0,.06);
|
||||
}
|
||||
.table thead th {
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .04em;
|
||||
padding: 12px 14px;
|
||||
text-align: left;
|
||||
}
|
||||
.table tbody td {
|
||||
border-top: 1px solid #eef2f7;
|
||||
padding: 12px 14px;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
}
|
||||
.table tbody tr:nth-child(odd){ background:#fafafa; }
|
||||
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
|
||||
.muted { color:#6b7280; }
|
||||
|
||||
#pager .btn[disabled]{ opacity:.5; cursor:not-allowed; }
|
||||
</style>
|
||||
<script>
|
||||
let page = 1;
|
||||
let pageSize = 20;
|
||||
let total = 0;
|
||||
|
||||
function updateExcelLink() {
|
||||
const cliente = document.getElementById('relatorio-cliente').value || '';
|
||||
const tipo = document.getElementById('tipo-relatorio').value || 'geral';
|
||||
const params = new URLSearchParams();
|
||||
params.set('tipo', tipo);
|
||||
if (cliente) params.set('cliente', cliente);
|
||||
document.getElementById('link-excel').setAttribute('href', `/export-excel?${params.toString()}`);
|
||||
}
|
||||
|
||||
async function carregarTabela() {
|
||||
const cliente = document.getElementById('relatorio-cliente').value || '';
|
||||
const url = new URL('/api/relatorios', window.location.origin);
|
||||
url.searchParams.set('page', page);
|
||||
url.searchParams.set('page_size', pageSize);
|
||||
if (cliente) url.searchParams.set('cliente', cliente);
|
||||
|
||||
const r = await fetch(url);
|
||||
const data = await r.json();
|
||||
|
||||
total = data.total;
|
||||
renderRows(data.items);
|
||||
updatePager();
|
||||
updateExcelLink();
|
||||
}
|
||||
|
||||
function renderRows(items) {
|
||||
const tbody = document.getElementById('relatorios-body');
|
||||
if (!items.length) {
|
||||
tbody.innerHTML = `<tr><td colspan="11" style="padding:14px;">Nenhum registro encontrado.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
const fmtBRL = (v) => (v || v === 0) ? Number(v).toLocaleString('pt-BR',{style:'currency',currency:'BRL'}) : '';
|
||||
const fmtNum = (v) => (v || v === 0) ? Number(v).toLocaleString('pt-BR') : '';
|
||||
const fmtDate = (iso) => iso ? new Date(iso).toLocaleString('pt-BR') : '';
|
||||
|
||||
tbody.innerHTML = items.map(f => `
|
||||
<tr>
|
||||
<td>${f.nome || ''}</td>
|
||||
<td class="mono">${f.unidade_consumidora || ''}</td>
|
||||
<td class="mono">${f.referencia || ''}</td>
|
||||
<td class="mono">${f.nota_fiscal || ''}</td>
|
||||
<td>${fmtBRL(f.valor_total)}</td>
|
||||
<td>${fmtNum(f.icms_aliq)}</td>
|
||||
<td>${fmtBRL(f.icms_valor)}</td>
|
||||
<td>${fmtBRL(f.pis_valor)}</td>
|
||||
<td>${fmtBRL(f.cofins_valor)}</td>
|
||||
<td>${f.distribuidora || '-'}</td>
|
||||
<td class="muted">${fmtDate(f.data_processamento)}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function updatePager() {
|
||||
const start = total ? (page - 1) * pageSize + 1 : 0;
|
||||
const end = Math.min(page * pageSize, total);
|
||||
document.getElementById('range').textContent = `Mostrando ${start}–${end} de ${total}`;
|
||||
document.getElementById('prev').disabled = page <= 1;
|
||||
document.getElementById('next').disabled = page * pageSize >= total;
|
||||
}
|
||||
|
||||
document.getElementById('prev').addEventListener('click', () => {
|
||||
if (page > 1) { page--; carregarTabela(); }
|
||||
});
|
||||
document.getElementById('next').addEventListener('click', () => {
|
||||
if (page * pageSize < total) { page++; carregarTabela(); }
|
||||
});
|
||||
document.getElementById('page-size').addEventListener('change', (e) => {
|
||||
pageSize = parseInt(e.target.value, 10);
|
||||
page = 1;
|
||||
carregarTabela();
|
||||
// não precisa alterar o link aqui
|
||||
});
|
||||
document.getElementById('relatorio-cliente').addEventListener('change', () => {
|
||||
page = 1;
|
||||
carregarTabela();
|
||||
updateExcelLink();
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const pre = "{{ cliente_selecionado or '' }}";
|
||||
if (pre) document.getElementById('relatorio-cliente').value = pre;
|
||||
updateExcelLink();
|
||||
carregarTabela();
|
||||
});
|
||||
|
||||
document.getElementById('tipo-relatorio').addEventListener('change', () => {
|
||||
updateExcelLink();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -4,6 +4,16 @@
|
||||
|
||||
<h1 style="font-size: 1.5rem; margin-bottom: 1rem;">📤 Upload de Faturas</h1>
|
||||
|
||||
<!-- Seletor de Cliente (obrigatório) -->
|
||||
<div style="display:flex; gap:12px; align-items:center; margin: 0 0 14px 0;">
|
||||
<label for="select-cliente" style="font-weight:600;">Cliente:</label>
|
||||
<select id="select-cliente" style="min-width:320px; padding:.6rem .8rem; border:1px solid #ddd; border-radius:10px;">
|
||||
<option value="">— Selecione um cliente —</option>
|
||||
</select>
|
||||
<span id="cliente-aviso" class="muted">Selecione o cliente antes de anexar/ processar.</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="upload-box" id="upload-box">
|
||||
<h3>Arraste faturas em PDF aqui ou clique para selecionar</h3>
|
||||
<p style="color: gray; font-size: 0.9rem;">Apenas PDFs textuais (não escaneados)</p>
|
||||
@@ -34,7 +44,6 @@
|
||||
</div>
|
||||
<div id="tabela-wrapper" class="tabela-wrapper"></div>
|
||||
</div>
|
||||
ar
|
||||
<script>
|
||||
let arquivos = [];
|
||||
let statusInterval = null;
|
||||
@@ -43,18 +52,49 @@ ar
|
||||
|
||||
const fileTable = document.getElementById('file-table');
|
||||
|
||||
function handleFiles(files) {
|
||||
if (processado) {
|
||||
document.getElementById("feedback-sucesso").innerText = "";
|
||||
document.getElementById("feedback-erro").innerText = "⚠️ Conclua ou inicie um novo processo antes de adicionar mais arquivos.";
|
||||
document.getElementById("feedback-duplicado").innerText = "";
|
||||
document.getElementById("upload-feedback").classList.remove("hidden");
|
||||
return;
|
||||
|
||||
// <<< NOVO: carrega clientes ativos no combo
|
||||
async function carregarClientes() {
|
||||
try {
|
||||
const r = await fetch('/api/clientes'); // se quiser só ativos: /api/clientes?ativos=true
|
||||
if (!r.ok) throw new Error('Falha ao carregar clientes');
|
||||
const lista = await r.json();
|
||||
|
||||
const sel = document.getElementById('select-cliente');
|
||||
sel.innerHTML = `<option value="">— Selecione um cliente —</option>` +
|
||||
lista.map(c => `<option value="${c.id}">${c.nome_fantasia}${c.cnpj ? ' — ' + c.cnpj : ''}</option>`).join('');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert('Não foi possível carregar a lista de clientes.');
|
||||
}
|
||||
}
|
||||
|
||||
function clienteSelecionado() {
|
||||
return (document.getElementById('select-cliente')?.value || '').trim();
|
||||
}
|
||||
|
||||
// <<< AJUSTE: impedir anexar sem cliente
|
||||
function handleFiles(files) {
|
||||
if (!clienteSelecionado()) {
|
||||
alert('Selecione um cliente antes de anexar os arquivos.');
|
||||
return;
|
||||
}
|
||||
if (processado) {
|
||||
document.getElementById("feedback-sucesso").innerText = "";
|
||||
document.getElementById("feedback-erro").innerText = "⚠️ Conclua ou inicie um novo processo antes de adicionar mais arquivos.";
|
||||
document.getElementById("feedback-duplicado").innerText = "";
|
||||
document.getElementById("upload-feedback").classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
arquivos = [...arquivos, ...files];
|
||||
|
||||
// trava o combo após começar a anexar (opcional)
|
||||
document.getElementById('select-cliente').disabled = true;
|
||||
|
||||
renderTable();
|
||||
}
|
||||
|
||||
arquivos = [...arquivos, ...files];
|
||||
renderTable();
|
||||
}
|
||||
|
||||
function renderTable(statusList = []) {
|
||||
const grupos = ['Aguardando', 'Enviado', 'Erro', 'Duplicado'];
|
||||
@@ -102,7 +142,20 @@ function renderTable(statusList = []) {
|
||||
}
|
||||
|
||||
async function processar(btn) {
|
||||
if (!clienteSelecionado()) {
|
||||
alert("Selecione um cliente antes de processar.");
|
||||
return;
|
||||
}
|
||||
if (arquivos.length === 0) return alert("Nenhum arquivo selecionado.");
|
||||
|
||||
// Confirmação
|
||||
const clienteTxt = document.querySelector('#select-cliente option:checked')?.textContent || '';
|
||||
if (!confirm(`Confirmar processamento de ${arquivos.length} arquivo(s) para o cliente:\n\n${clienteTxt}`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const clienteId = clienteSelecionado();
|
||||
|
||||
document.getElementById("tabela-wrapper").classList.add("bloqueada");
|
||||
|
||||
if (processamentoFinalizado) {
|
||||
@@ -120,8 +173,9 @@ async function processar(btn) {
|
||||
document.getElementById("barra-progresso").style.width = "0%";
|
||||
|
||||
for (let i = 0; i < total; i++) {
|
||||
const file = arquivos[i];
|
||||
const file = arquivos[i]; // <- declare 'file' ANTES de usar
|
||||
const formData = new FormData();
|
||||
formData.append("cliente_id", clienteId); // <- usa o cache do cliente
|
||||
formData.append("files", file);
|
||||
|
||||
// Atualiza status visual antes do envio
|
||||
@@ -129,14 +183,16 @@ async function processar(btn) {
|
||||
nome: file.name,
|
||||
status: "Enviando...",
|
||||
mensagem: `(${i + 1}/${total})`,
|
||||
tempo: "---"
|
||||
tempo: "---",
|
||||
tamanho: (file.size / 1024).toFixed(1) + " KB",
|
||||
data: new Date(file.lastModified).toLocaleDateString()
|
||||
});
|
||||
renderTable(statusList);
|
||||
|
||||
const start = performance.now();
|
||||
try {
|
||||
await fetch("/upload-files", { method: "POST", body: formData });
|
||||
let progresso = Math.round(((i + 1) / total) * 100);
|
||||
const progresso = Math.round(((i + 1) / total) * 100);
|
||||
document.getElementById("barra-progresso").style.width = `${progresso}%`;
|
||||
|
||||
statusList[i].status = "Enviado";
|
||||
@@ -147,9 +203,7 @@ async function processar(btn) {
|
||||
}
|
||||
|
||||
renderTable(statusList);
|
||||
|
||||
// Delay de 200ms entre cada envio
|
||||
await new Promise(r => setTimeout(r, 200));
|
||||
await new Promise(r => setTimeout(r, 200)); // pequeno delay
|
||||
}
|
||||
|
||||
btn.innerText = "⏳ Iniciando processamento...";
|
||||
@@ -206,23 +260,39 @@ async function processar(btn) {
|
||||
}
|
||||
}
|
||||
|
||||
function limpar() {
|
||||
fetch("/clear-all", { method: "POST" });
|
||||
arquivos = [];
|
||||
processado = false;
|
||||
document.getElementById("file-input").value = null;
|
||||
renderTable();
|
||||
function limpar() {
|
||||
fetch("/clear-all", { method: "POST" });
|
||||
|
||||
// limpa feedback visual também
|
||||
document.getElementById("upload-feedback").classList.add("hidden");
|
||||
document.getElementById("feedback-sucesso").innerText = "";
|
||||
document.getElementById("feedback-erro").innerText = "";
|
||||
document.getElementById("feedback-duplicado").innerText = "";
|
||||
document.getElementById("tabela-wrapper").classList.remove("bloqueada");
|
||||
processamentoFinalizado = false;
|
||||
document.getElementById("btn-selecionar").disabled = false;
|
||||
// reset da fila/estado
|
||||
arquivos = [];
|
||||
processado = false;
|
||||
processamentoFinalizado = false;
|
||||
if (statusInterval) { clearInterval(statusInterval); statusInterval = null; }
|
||||
|
||||
// reset dos inputs/visual
|
||||
document.getElementById("file-input").value = null;
|
||||
document.getElementById("tabela-wrapper").classList.remove("bloqueada");
|
||||
document.getElementById("overlay-bloqueio").classList.add("hidden");
|
||||
document.getElementById("barra-progresso").style.width = "0%";
|
||||
document.getElementById("btn-selecionar").disabled = false;
|
||||
|
||||
// 🔓 permitir mudar o cliente novamente
|
||||
const sel = document.getElementById("select-cliente");
|
||||
sel.disabled = false;
|
||||
sel.value = ""; // <- se NÃO quiser limpar a escolha anterior, remova esta linha
|
||||
document.getElementById("cliente-aviso").textContent =
|
||||
"Selecione o cliente antes de anexar/ processar.";
|
||||
|
||||
// limpar feedback
|
||||
document.getElementById("upload-feedback").classList.add("hidden");
|
||||
document.getElementById("feedback-sucesso").innerText = "";
|
||||
document.getElementById("feedback-erro").innerText = "";
|
||||
document.getElementById("feedback-duplicado").innerText = "";
|
||||
|
||||
// limpar tabela
|
||||
renderTable();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function baixarPlanilha() {
|
||||
window.open('/export-excel', '_blank');
|
||||
@@ -233,6 +303,7 @@ async function processar(btn) {
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
carregarClientes();
|
||||
updateStatus();
|
||||
|
||||
const dragOverlay = document.getElementById("drag-overlay");
|
||||
@@ -255,11 +326,15 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
window.addEventListener("drop", e => {
|
||||
e.preventDefault();
|
||||
dragOverlay.classList.remove("active");
|
||||
dragCounter = 0;
|
||||
handleFiles(e.dataTransfer.files);
|
||||
window.addEventListener("drop", e => {
|
||||
e.preventDefault();
|
||||
dragOverlay.classList.remove("active");
|
||||
dragCounter = 0;
|
||||
if (!clienteSelecionado()) {
|
||||
alert('Selecione um cliente antes de anexar os arquivos.');
|
||||
return;
|
||||
}
|
||||
handleFiles(e.dataTransfer.files);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user