consultoria-as
913e507adc
- Add scripts/import_atlas_data.py to load Atlas data from Excel files - Import 6,206 inventory items, 251 customers and 4,582 historical sales - Create historical_sales table in tenant DB - Add /pos/historical-sales page and /pos/api/historical-sales endpoint - Link in reports sidebar for easy access
161 lines
7.3 KiB
HTML
161 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ventas Históricas - Atlas</title>
|
|
<link rel="stylesheet" href="/pos/static/css/pos.css">
|
|
<style>
|
|
:root { --header-h: 56px; }
|
|
body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f6f8; color: #1f2937; }
|
|
.header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: #111827; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 100; }
|
|
.header h1 { margin: 0; font-size: 16px; font-weight: 600; }
|
|
.header a { color: #9ca3af; text-decoration: none; font-size: 13px; }
|
|
.header a:hover { color: #fff; }
|
|
.container { padding: calc(var(--header-h) + 16px) 16px 24px; max-width: 1200px; margin: 0 auto; }
|
|
.filters { background: #fff; padding: 12px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
|
|
.filters label { font-size: 12px; color: #6b7280; display: block; margin-bottom: 4px; }
|
|
.filters input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
|
|
.filters button { padding: 7px 14px; background: #2563eb; color: #fff; border: none; border-radius: 4px; font-size: 13px; cursor: pointer; }
|
|
.filters button:hover { background: #1d4ed8; }
|
|
.summary { display: flex; gap: 12px; margin-bottom: 16px; }
|
|
.card { background: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); flex: 1; }
|
|
.card .label { font-size: 12px; color: #6b7280; }
|
|
.card .value { font-size: 18px; font-weight: 700; color: #111827; }
|
|
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); font-size: 13px; }
|
|
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; }
|
|
th { background: #f9fafb; font-weight: 600; color: #374151; }
|
|
tr:hover { background: #f9fafb; }
|
|
.num { text-align: right; font-variant-numeric: tabular-nums; }
|
|
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #e5e7eb; font-size: 11px; color: #374151; }
|
|
.empty { text-align: center; padding: 40px; color: #6b7280; }
|
|
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; }
|
|
.pagination button { padding: 6px 12px; border: 1px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; }
|
|
.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.pagination span { font-size: 13px; color: #4b5563; }
|
|
.loading { text-align: center; padding: 40px; color: #6b7280; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>📊 Ventas Históricas - Atlas</h1>
|
|
<a href="/pos/sale">← Regresar al POS</a>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="filters">
|
|
<div>
|
|
<label>Desde</label>
|
|
<input type="date" id="dateFrom">
|
|
</div>
|
|
<div>
|
|
<label>Hasta</label>
|
|
<input type="date" id="dateTo">
|
|
</div>
|
|
<div>
|
|
<label>Cliente</label>
|
|
<input type="text" id="customerFilter" placeholder="Nombre del cliente..." style="width:220px;">
|
|
</div>
|
|
<button onclick="loadData(1)">Buscar</button>
|
|
</div>
|
|
|
|
<div class="summary">
|
|
<div class="card">
|
|
<div class="label">Total de ventas</div>
|
|
<div class="value" id="totalCount">-</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="label">Total vendido</div>
|
|
<div class="value" id="totalSold">-</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="label">Saldo pendiente</div>
|
|
<div class="value" id="totalBalance">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="content">
|
|
<div class="loading">Cargando...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/pos/static/js/api.js"></script>
|
|
<script>
|
|
const fmt = n => n == null ? '-' : '$' + Number(n).toLocaleString('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2});
|
|
const fmtDate = d => d ? new Date(d + 'T00:00:00').toLocaleDateString('es-MX') : '-';
|
|
|
|
async function loadData(page = 1) {
|
|
const content = document.getElementById('content');
|
|
content.innerHTML = '<div class="loading">Cargando...</div>';
|
|
|
|
const params = new URLSearchParams();
|
|
params.set('page', page);
|
|
params.set('per_page', 50);
|
|
const from = document.getElementById('dateFrom').value;
|
|
const to = document.getElementById('dateTo').value;
|
|
const customer = document.getElementById('customerFilter').value.trim();
|
|
if (from) params.set('date_from', from);
|
|
if (to) params.set('date_to', to);
|
|
if (customer) params.set('customer', customer);
|
|
|
|
try {
|
|
const res = await api('/pos/api/historical-sales?' + params.toString());
|
|
render(res.data || [], res.pagination || {});
|
|
} catch (e) {
|
|
content.innerHTML = '<div class="empty">Error: ' + esc(e.message) + '</div>';
|
|
}
|
|
}
|
|
|
|
function render(rows, pagination) {
|
|
const content = document.getElementById('content');
|
|
if (!rows.length) {
|
|
content.innerHTML = '<div class="empty">No se encontraron ventas históricas</div>';
|
|
return;
|
|
}
|
|
|
|
let totalSold = 0, totalBalance = 0;
|
|
rows.forEach(r => { totalSold += r.total || 0; totalBalance += r.balance || 0; });
|
|
|
|
document.getElementById('totalCount').textContent = pagination.total || rows.length;
|
|
document.getElementById('totalSold').textContent = fmt(totalSold);
|
|
document.getElementById('totalBalance').textContent = fmt(totalBalance);
|
|
|
|
let html = '<table><thead><tr>' +
|
|
'<th>Fecha</th><th>Documento</th><th>Cliente</th><th>Forma de pago</th>' +
|
|
'<th class="num">Subtotal</th><th class="num">Total</th><th class="num">Pagado</th><th class="num">Saldo</th>' +
|
|
'</tr></thead><tbody>';
|
|
rows.forEach(r => {
|
|
html += '<tr>' +
|
|
'<td>' + fmtDate(r.sale_date) + '</td>' +
|
|
'<td>' + esc(r.document_no || r.external_document_id || '-') + '</td>' +
|
|
'<td>' + esc(r.customer_name || '-') + '</td>' +
|
|
'<td><span class="badge">' + esc(r.payment_method || '-') + '</span></td>' +
|
|
'<td class="num">' + fmt(r.subtotal) + '</td>' +
|
|
'<td class="num">' + fmt(r.total) + '</td>' +
|
|
'<td class="num">' + fmt(r.amount_paid) + '</td>' +
|
|
'<td class="num">' + fmt(r.balance) + '</td>' +
|
|
'</tr>';
|
|
});
|
|
html += '</tbody></table>';
|
|
|
|
const totalPages = pagination.total_pages || 1;
|
|
const page = pagination.page || 1;
|
|
html += '<div class="pagination">' +
|
|
'<button onclick="loadData(' + (page - 1) + ')" ' + (page <= 1 ? 'disabled' : '') + '>Anterior</button>' +
|
|
'<span>Página ' + page + ' de ' + totalPages + '</span>' +
|
|
'<button onclick="loadData(' + (page + 1) + ')" ' + (page >= totalPages ? 'disabled' : '') + '>Siguiente</button>' +
|
|
'</div>';
|
|
|
|
content.innerHTML = html;
|
|
}
|
|
|
|
function esc(s) {
|
|
if (s == null) return '';
|
|
return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
|
}
|
|
|
|
loadData(1);
|
|
</script>
|
|
</body>
|
|
</html>
|