403 lines
14 KiB
Plaintext
403 lines
14 KiB
Plaintext
<% /* Reportes - Asistencias y Tickets (Comandas) */ %>
|
|
<div class="container-fluid py-3">
|
|
|
|
<div class="d-flex align-items-center mb-2">
|
|
<h3 class="mb-0">Reportes</h3>
|
|
<span class="ms-auto small text-muted" id="repStatus">—</span>
|
|
</div>
|
|
|
|
<!-- Filtros -->
|
|
<div class="card shadow-sm mb-3">
|
|
<div class="card-body">
|
|
<div class="row g-3 align-items-end">
|
|
<div class="col-12 col-lg-6">
|
|
<label class="form-label mb-1">Asistencias · Rango</label>
|
|
<div class="row g-2">
|
|
<div class="col-6 col-md-4">
|
|
<input id="asistDesde" type="date" class="form-control">
|
|
</div>
|
|
<div class="col-6 col-md-4">
|
|
<input id="asistHasta" type="date" class="form-control">
|
|
</div>
|
|
<div class="col-12 col-md-4 d-grid d-md-block">
|
|
<button id="btnAsistCargar" class="btn btn-primary me-2">Cargar</button>
|
|
<button id="btnAsistExcel" class="btn btn-outline-success me-2">Excel</button>
|
|
<button id="btnAsistPDF" class="btn btn-outline-secondary">PDF</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<label class="form-label mb-1">Tickets (Comandas) · Año</label>
|
|
<div class="row g-2">
|
|
<div class="col-6 col-md-4">
|
|
<input id="ticketsYear" type="number" min="2000" step="1" class="form-control">
|
|
</div>
|
|
<div class="col-6 col-md-8 d-grid d-md-block">
|
|
<button id="btnTicketsCargar" class="btn btn-primary me-2">Cargar</button>
|
|
<button id="btnTicketsExcel" class="btn btn-outline-success me-2">Excel</button>
|
|
<button id="btnTicketsPDF" class="btn btn-outline-secondary">PDF</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="small text-muted mt-2">
|
|
Los archivos Excel se generan como CSV (compatibles). Los PDF se generan con “Imprimir área” del navegador.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reporte Asistencias -->
|
|
<div class="card shadow-sm mb-3" id="PRINT_ASIST">
|
|
<div class="card-header d-flex align-items-center">
|
|
<strong>Asistencias</strong>
|
|
<span class="ms-auto small text-muted" id="asistInfo">—</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-sm align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Documento</th>
|
|
<th>Nombre</th>
|
|
<th>Apellido</th>
|
|
<th>Fecha</th>
|
|
<th class="text-end">Desde</th>
|
|
<th class="text-end">Hasta</th>
|
|
<th class="text-end">Duración</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbAsist">
|
|
<tr><td colspan="7" class="p-3 text-muted">Sin datos</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reporte Tickets -->
|
|
<div class="card shadow-sm" id="PRINT_TICKETS">
|
|
<div class="card-header d-flex align-items-center">
|
|
<strong>Tickets</strong>
|
|
<span class="ms-auto small text-muted" id="ticketsInfo">—</span>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div class="row g-3">
|
|
<div class="col-12 col-lg-6">
|
|
<div class="emp-card p-3 border rounded">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<div class="fw-semibold">Resumen del año</div>
|
|
<div class="small text-muted" id="ticketsYearTitle">—</div>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col-4">
|
|
<div class="small text-muted">Tickets YTD</div>
|
|
<div class="fs-5 fw-semibold" id="tYtd">—</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="small text-muted">Promedio</div>
|
|
<div class="fs-5 fw-semibold" id="tAvg">—</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="small text-muted">Hasta la fecha</div>
|
|
<div class="fs-5 fw-semibold" id="tToDate">—</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<div class="emp-card p-3 border rounded">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<div class="fw-semibold">Tickets por mes</div>
|
|
<div class="small text-muted">Cantidad</div>
|
|
</div>
|
|
<div class="spark-wrap" id="ticketsChart" style="height:140px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="table-responsive">
|
|
<table class="table table-sm align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Mes</th>
|
|
<th class="text-end">Tickets</th>
|
|
<th class="text-end">Importe</th>
|
|
<th class="text-end">Ticket promedio</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbTickets">
|
|
<tr><td colspan="4" class="p-3 text-muted">Sin datos</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.spark rect:hover { filter: brightness(0.9); }
|
|
@media print {
|
|
body * { visibility: hidden !important; }
|
|
#PRINT_ASIST, #PRINT_ASIST *,
|
|
#PRINT_TICKETS, #PRINT_TICKETS * { visibility: visible !important; }
|
|
#PRINT_ASIST, #PRINT_TICKETS { position: absolute; left:0; top:0; width:100%; }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
/* =========================
|
|
Helpers reutilizables
|
|
========================= */
|
|
const $ = s => document.querySelector(s);
|
|
const z2 = n => String(n).padStart(2,'0');
|
|
const fmtMoney = v => (v==null? '—' : new Intl.NumberFormat('es-UY',{style:'currency',currency:'UYU'}).format(Number(v)));
|
|
const fmtHM = mins => { const h = Math.floor(mins/60); const m = Math.round(mins%60); return `${z2(h)}:${z2(m)}`; };
|
|
|
|
// GET JSON simple
|
|
async function jget(url){
|
|
const r = await fetch(url);
|
|
const j = await r.json().catch(()=>null);
|
|
if (!r.ok) throw new Error(j?.error || `${r.status} ${r.statusText}`);
|
|
return j;
|
|
}
|
|
// POST JSON simple
|
|
async function jpost(url, body){
|
|
const r = await fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body||{})});
|
|
const j = await r.json().catch(()=>null);
|
|
if (!r.ok) throw new Error(j?.error || `${r.status} ${r.statusText}`);
|
|
return j;
|
|
}
|
|
|
|
// CSV (Excel-friendly)
|
|
|
|
function toCSV(rows, headers){
|
|
const esc = v => {
|
|
if (v == null) return '';
|
|
if (typeof v === 'number') return String(v); // números sin comillas
|
|
const s = String(v);
|
|
return /[",\n]/.test(s) ? `"${s.replace(/"/g,'""')}"` : s;
|
|
};
|
|
const cols = headers && headers.length ? headers : Object.keys(rows?.[0] || {});
|
|
const lines = [];
|
|
if (headers) lines.push(cols.join(','));
|
|
for (const r of (rows || [])) lines.push(cols.map(c => esc(r[c])).join(','));
|
|
return lines.join('\r\n');
|
|
}
|
|
|
|
function downloadText(filename, text){
|
|
const blob = new Blob([text], {type:'text/csv;charset=utf-8;'});
|
|
const a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = filename;
|
|
a.click();
|
|
URL.revokeObjectURL(a.href);
|
|
}
|
|
// Print solo área
|
|
function printArea(id){
|
|
// cambiamos el hash para que @media print muestre el área; luego invocamos print
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
window.print();
|
|
}
|
|
|
|
// SVG barras simple (sin librerías)
|
|
function barsSVG(series /* [{label:'Ene', value:Number}] */){
|
|
const W=560, H=120, PAD=10, GAP=6;
|
|
const n = series.length||1;
|
|
const max = Math.max(1, ...series.map(d=>d.value||0));
|
|
const bw = Math.max(6, Math.floor((W-PAD*2-GAP*(n-1))/n));
|
|
let x = PAD;
|
|
let bars = '';
|
|
series.forEach((d,i)=>{
|
|
const vh = Math.round((d.value/max)*(H-PAD-26)); // 26px para etiquetas
|
|
const y = H-20 - vh;
|
|
const title = `${d.label} · ${d.value}`;
|
|
bars += `<g>
|
|
<rect x="${x}" y="${y}" width="${bw}" height="${vh}" rx="3" ry="3" class="bar">
|
|
<title>${title}</title>
|
|
</rect>
|
|
<text x="${x + bw/2}" y="${H-6}" text-anchor="middle">${d.label}</text>
|
|
</g>`;
|
|
x += bw + GAP;
|
|
});
|
|
const css = `.bar{fill:#0d6efd}`;
|
|
const axis = `<line x1="${PAD}" y1="${H-20}" x2="${W-PAD}" y2="${H-20}" stroke="#adb5bd" stroke-width="1"/>`;
|
|
return `<svg viewBox="0 0 ${W} ${H}" class="spark" preserveAspectRatio="none">
|
|
<style>${css}</style>
|
|
${axis}
|
|
${bars}
|
|
</svg>`;
|
|
}
|
|
|
|
/* =========================
|
|
Data access (enchufable)
|
|
=========================
|
|
Estas funciones llaman RPCs del server, que a su vez deben
|
|
delegar en funciones SQL. Si aún no existen, ver más abajo
|
|
el bloque "Sugerencia de funciones SQL".
|
|
*/
|
|
async function fetchAsistencias(desde, hasta){
|
|
// endpoint recomendado (RPC):
|
|
// POST /api/rpc/report_asistencia { desde, hasta }
|
|
// Retorna [{documento,nombre,apellido,fecha,desde_hora,hasta_hora,dur_min}]
|
|
try {
|
|
return await jpost('/api/rpc/report_asistencia', { desde, hasta });
|
|
} catch {
|
|
// fallback (si aún no tienes RPC): lee la vista "asistencia_detalle" hipotética
|
|
const url = `/api/table/asistencia_detalle?desde=${encodeURIComponent(desde)}&hasta=${encodeURIComponent(hasta)}&limit=10000`;
|
|
return await jget(url);
|
|
}
|
|
}
|
|
|
|
async function fetchTickets(year){
|
|
// endpoint recomendado (RPC):
|
|
// POST /api/rpc/report_tickets { year }
|
|
// Retorna: { year, total_ytd, avg_ticket, to_date, months:[{mes:1..12, nombre:'Ene', cant, importe, avg}] }
|
|
return await jpost('/api/rpc/report_tickets', { year });
|
|
}
|
|
|
|
/* =========================
|
|
Render Asistencias
|
|
========================= */
|
|
let cacheAsist = [];
|
|
function renderAsistTabla(rows){
|
|
const tb = $('#tbAsist');
|
|
if (!rows?.length){ tb.innerHTML = '<tr><td colspan="7" class="p-3 text-muted">Sin datos</td></tr>'; return; }
|
|
tb.innerHTML = '';
|
|
rows.forEach(r=>{
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>${r.documento||'—'}</td>
|
|
<td>${r.nombre||'—'}</td>
|
|
<td>${r.apellido||'—'}</td>
|
|
<td>${r.fecha||'—'}</td>
|
|
<td class="text-end">${r.desde_hora||'—'}</td>
|
|
<td class="text-end">${r.hasta_hora||'—'}</td>
|
|
<td class="text-end">${fmtHM(Number(r.dur_min||0))}</td>
|
|
`;
|
|
tb.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
async function loadAsist(){
|
|
const d = $('#asistDesde').value;
|
|
const h = $('#asistHasta').value;
|
|
$('#repStatus').textContent = 'Cargando asistencias…';
|
|
const rows = await fetchAsistencias(d,h);
|
|
cacheAsist = rows||[];
|
|
renderAsistTabla(cacheAsist);
|
|
const minsTot = cacheAsist.reduce((s,r)=> s + Number(r.dur_min||0), 0);
|
|
$('#asistInfo').textContent = `${cacheAsist.length} registros · ${fmtHM(minsTot)}`;
|
|
$('#repStatus').textContent = 'Listo';
|
|
}
|
|
|
|
/* =========================
|
|
Render Tickets
|
|
========================= */
|
|
let cacheTickets = null;
|
|
function renderTickets(data){
|
|
const months = data?.months||[];
|
|
$('#ticketsYearTitle').textContent = data?.year || '—';
|
|
$('#tYtd').textContent = months.reduce((s,m)=> s + Number(m.cant||0), 0);
|
|
$('#tAvg').textContent = fmtMoney(data?.avg_ticket ?? 0);
|
|
$('#tToDate').textContent = data?.to_date != null ? fmtMoney(data.to_date) : '—';
|
|
|
|
const series = months.map(m=>({ label:m.nombre||m.mes, value:Number(m.cant||0) }));
|
|
$('#ticketsChart').innerHTML = barsSVG(series);
|
|
|
|
const tb = $('#tbTickets');
|
|
if (!months.length){ tb.innerHTML = '<tr><td colspan="4" class="p-3 text-muted">Sin datos</td></tr>'; return; }
|
|
tb.innerHTML = '';
|
|
months.forEach(m=>{
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>${m.nombre||m.mes}</td>
|
|
<td class="text-end">${m.cant||0}</td>
|
|
<td class="text-end">${fmtMoney(m.importe||0)}</td>
|
|
<td class="text-end">${fmtMoney(m.avg||0)}</td>
|
|
`;
|
|
tb.appendChild(tr);
|
|
});
|
|
$('#ticketsInfo').textContent = `${months.length} meses`;
|
|
}
|
|
|
|
async function loadTickets(){
|
|
const y = Number($('#ticketsYear').value);
|
|
$('#repStatus').textContent = 'Cargando tickets…';
|
|
const data = await fetchTickets(y);
|
|
cacheTickets = data;
|
|
renderTickets(cacheTickets);
|
|
$('#repStatus').textContent = 'Listo';
|
|
}
|
|
|
|
/* =========================
|
|
Excel (CSV) & PDF
|
|
========================= */
|
|
function exportAsistCSV(){
|
|
if (!cacheAsist?.length) return;
|
|
const headers = ['Documento','Nombre','Apellido','Fecha','Desde','Hasta','Duración(min)'];
|
|
const rows = cacheAsist.map(r=>({
|
|
Documento:r.documento||'',
|
|
Nombre:r.nombre||'',
|
|
Apellido:r.apellido||'',
|
|
Fecha:r.fecha||'',
|
|
Desde:r.desde_hora||'',
|
|
Hasta:r.hasta_hora||'',
|
|
'Duración(min)':Number(r.dur_min||0)
|
|
}));
|
|
const csv = toCSV(rows, headers);
|
|
downloadText(`asistencias_${$('#asistDesde').value}_${$('#asistHasta').value}.csv`, csv);
|
|
}
|
|
|
|
function exportTicketsCSV(){
|
|
if (!cacheTickets?.months?.length) return;
|
|
const toInt = v => Math.round(Number(v || 0)); // sin decimales
|
|
const headers = ['Año','Mes','Tickets','Importe','Ticket promedio'];
|
|
const rows = cacheTickets.months.map(m => ({
|
|
'Año': cacheTickets.year,
|
|
'Mes': m.nombre || m.mes,
|
|
'Tickets': Number(m.cant || 0),
|
|
'Importe': toInt(m.importe), // ← entero
|
|
'Ticket promedio': toInt(m.avg) // ← entero
|
|
}));
|
|
const csv = toCSV(rows, headers);
|
|
downloadText(`tickets_${cacheTickets.year}.csv`, csv);
|
|
}
|
|
// PDF vía print-area del navegador
|
|
const onPDFAsist = () => printArea('PRINT_ASIST');
|
|
const onPDFTicket = () => printArea('PRINT_TICKETS');
|
|
|
|
/* =========================
|
|
Eventos + defaults
|
|
========================= */
|
|
document.getElementById('btnAsistCargar').addEventListener('click', loadAsist);
|
|
document.getElementById('btnTicketsCargar').addEventListener('click', loadTickets);
|
|
document.getElementById('btnAsistExcel').addEventListener('click', exportAsistCSV);
|
|
document.getElementById('btnTicketsExcel').addEventListener('click', exportTicketsCSV);
|
|
document.getElementById('btnAsistPDF').addEventListener('click', onPDFAsist);
|
|
document.getElementById('btnTicketsPDF').addEventListener('click', onPDFTicket);
|
|
|
|
// Defaults: último mes y año actual
|
|
(function initDefaults(){
|
|
const today = new Date();
|
|
const y = today.getFullYear();
|
|
const hasta = today.toISOString().slice(0,10);
|
|
const d = new Date(today); d.setMonth(d.getMonth()-1);
|
|
const desde = d.toISOString().slice(0,10);
|
|
$('#asistDesde').value = desde;
|
|
$('#asistHasta').value = hasta;
|
|
$('#ticketsYear').value = y;
|
|
// carga inicial
|
|
loadAsist().catch(()=>{});
|
|
loadTickets().catch(()=>{});
|
|
})();
|
|
</script>
|