836 lines
37 KiB
Plaintext
836 lines
37 KiB
Plaintext
<% /* Reportes - Asistencias, Tickets y Gastos */ %>
|
|
<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">Año (Tickets / Gastos)</label>
|
|
<div class="row g-2">
|
|
<div class="col-6 col-md-4"><input id="anualYear" type="number" min="2000" step="1" class="form-control"></div>
|
|
<div class="col-6 col-md-8 d-grid d-md-block">
|
|
<button id="btnAnualCargar" class="btn btn-primary me-2">Cargar</button>
|
|
<button id="btnAnualExcel" class="btn btn-outline-success me-2">Excel (Comparativo)</button>
|
|
<button id="btnAnualPDF" class="btn btn-outline-secondary">PDF (Comparativo)</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="small text-muted mt-2">
|
|
Los Excel se generan como CSV. Los PDF se generan con “Imprimir área” del navegador.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ASISTENCIA: Resumen diario (últimos 30 días) -->
|
|
<div class="card shadow-sm mb-3" id="PRINT_ASIST">
|
|
<div class="card-header d-flex align-items-center">
|
|
<strong>Asistencia — Resumen diario (últimos 30 días)</strong>
|
|
<span class="ms-auto small text-muted" id="resumeCount">Cargando…</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="resumenCards" class="row g-3"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Tickets -->
|
|
<div class="card shadow-sm mb-3" id="PRINT_TICKETS">
|
|
<div class="card-header d-flex align-items-center">
|
|
<strong>Ventas (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">Ingresos YTD</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 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>
|
|
|
|
<!-- Gastos detallados (filtrable por mes/año) -->
|
|
<div class="card shadow-sm mb-3" id="PRINT_GASTOS_DET">
|
|
<div class="card-header">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col-12 col-lg-4 d-flex align-items-center">
|
|
<strong class="me-2">Gastos detallados — </strong>
|
|
<span id="gdetTitle" class="text-muted small">mes anterior</span>
|
|
</div>
|
|
<div class="col-12 col-lg-4">
|
|
<div class="row g-2">
|
|
<div class="col-7">
|
|
<select id="gdetMes" class="form-select">
|
|
<option value="1">Enero</option>
|
|
<option value="2">Febrero</option>
|
|
<option value="3">Marzo</option>
|
|
<option value="4">Abril</option>
|
|
<option value="5">Mayo</option>
|
|
<option value="6">Junio</option>
|
|
<option value="7">Julio</option>
|
|
<option value="8">Agosto</option>
|
|
<option value="9">Setiembre</option>
|
|
<option value="10">Octubre</option>
|
|
<option value="11">Noviembre</option>
|
|
<option value="12">Diciembre</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-5">
|
|
<input id="gdetAnio" type="number" min="2000" step="1" class="form-control" placeholder="Año">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-4 d-grid d-md-block text-lg-end">
|
|
<button id="btnGdetCargar" class="btn btn-primary btn-sm me-2">Cargar</button>
|
|
<button id="btnGdetExcel" class="btn btn-outline-success btn-sm me-2">Excel</button>
|
|
<button id="btnGdetPDF" class="btn btn-outline-secondary btn-sm">PDF</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row g-3 mb-2">
|
|
<div class="col-12">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<span class="badge bg-primary-subtle border text-primary">Total: <span id="gdetTotal">—</span></span>
|
|
<span class="badge bg-secondary-subtle border text-secondary">Compras: <span id="gdetCompras">—</span></span>
|
|
<span class="badge bg-info-subtle border text-info">Renglones: <span id="gdetRows">—</span></span>
|
|
<span class="badge bg-light border text-muted ms-auto" id="gdetInfo">—</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive table-scroll" id="gdetScroll">
|
|
<table class="table table-sm align-middle mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Fecha</th>
|
|
<th>Proveedor</th>
|
|
<th>Tipo</th>
|
|
<th>Ítem</th>
|
|
<th class="text-end">Cantidad</th>
|
|
<th class="text-end">Precio</th>
|
|
<th class="text-end">Subtotal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbGdet">
|
|
<tr><td colspan="7" class="p-3 text-muted">Sin datos</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Comparativo Ventas vs Gastos -->
|
|
<div class="card shadow-sm" id="PRINT_COMP">
|
|
<div class="card-header d-flex align-items-center">
|
|
<strong>Comparativo: Ventas vs Gastos</strong>
|
|
<span class="ms-auto small text-muted" id="compInfo">—</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="row text-center">
|
|
<div class="col-4"><div class="small text-muted">Ingresos YTD</div><div class="fs-5 fw-semibold" id="cmpSales">—</div></div>
|
|
<div class="col-4"><div class="small text-muted">Gastos YTD</div><div class="fs-5 fw-semibold" id="cmpCost">—</div></div>
|
|
<div class="col-4"><div class="small text-muted">Resultado</div><div class="fs-5 fw-semibold" id="cmpDiff">—</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">Mensual (UYU)</div>
|
|
<div class="small text-muted" id="compYearTitle">—</div>
|
|
</div>
|
|
<div id="compChart" style="height:160px;"></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">Ingresos</th><th class="text-end">Gastos</th><th class="text-end">Resultado</th></tr>
|
|
</thead>
|
|
<tbody id="tbComp"><tr><td colspan="4" class="p-3 text-muted">Sin datos</td></tr></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-2 mt-2">
|
|
<button id="btnCompExcel" class="btn btn-outline-success btn-sm">Excel</button>
|
|
<button id="btnCompPDF" class="btn btn-outline-secondary btn-sm">PDF</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.spark rect:hover { filter: brightness(0.9); }
|
|
.emp-card { border:1px solid #e9ecef; border-radius:.75rem; padding:12px; }
|
|
.emp-meta .badge { background:#f8f9fa; color:#212529; border:1px solid #e9ecef; }
|
|
.spark-wrap { width:100%; height:80px; }
|
|
.spark { width:100%; height:100%; }
|
|
.spark text { font-size:10px; fill:#6c757d; }
|
|
.spark rect:hover { filter: brightness(.9); }
|
|
@media print {
|
|
body * { visibility: hidden !important; }
|
|
#PRINT_ASIST, #PRINT_ASIST *,
|
|
#PRINT_TICKETS, #PRINT_TICKETS *,
|
|
#PRINT_GASTOS_DET, #PRINT_GASTOS_DET *,
|
|
#PRINT_COMP, #PRINT_COMP * { visibility: visible !important; }
|
|
#PRINT_ASIST, #PRINT_TICKETS, #PRINT_GASTOS_DET, #PRINT_COMP { position:absolute; left:0; top:0; width:100%; }
|
|
}
|
|
#PRINT_GASTOS_DET { --gdet-h: 48vh; } /* ~mitad de la pantalla */
|
|
@media (min-width: 992px){ #PRINT_GASTOS_DET { --gdet-h: 420px; } } /* desktop fijo */
|
|
|
|
/* Scroll vertical con encabezado fijo */
|
|
#PRINT_GASTOS_DET .table-scroll{
|
|
max-height: var(--gdet-h);
|
|
overflow: auto; /* vertical + horizontal si hace falta */
|
|
}
|
|
#PRINT_GASTOS_DET .table-scroll thead th{
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
background: var(--bs-table-bg, #fff);
|
|
}
|
|
#PRINT_GASTOS_DET .table-scroll tbody tr:last-child td{
|
|
border-bottom: 0;
|
|
}
|
|
|
|
/* Al imprimir, expandir todo (sin scroll) */
|
|
@media print{
|
|
#PRINT_GASTOS_DET .table-scroll{
|
|
max-height: none !important;
|
|
overflow: visible !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
/* ===== Helpers ===== */
|
|
|
|
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 fmtInt = v => Math.round(Number(v||0));
|
|
const fmtHM = mins => { const h=Math.floor(mins/60); const m=Math.round(mins%60); return `${z2(h)}:${z2(m)}`; };
|
|
const ymd = s => String(s||'').slice(0,10);
|
|
const monthNames = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
|
|
const MONTH_NAMES = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Setiembre','Octubre','Noviembre','Diciembre'];
|
|
|
|
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}`); return j; }
|
|
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}`); return j; }
|
|
|
|
|
|
function getSelectedMonthYear() {
|
|
const m = parseInt(document.querySelector('#gdetMes')?.value, 10);
|
|
const y = parseInt(document.querySelector('#gdetAnio')?.value, 10);
|
|
const now = new Date();
|
|
const month = (Number.isFinite(m) && m>=1 && m<=12) ? m : (now.getMonth()+1);
|
|
const year = (Number.isFinite(y) && y>=2000 && y<=2100) ? y : now.getFullYear();
|
|
return {month, year};
|
|
}
|
|
|
|
function monthRange(month, year) {
|
|
// month: 1..12
|
|
const from = new Date(year, month-1, 1, 0,0,0,0);
|
|
const to = new Date(year, month, 0, 23,59,59,999);
|
|
return {
|
|
desdeISO: from.toISOString(),
|
|
hastaISO: to.toISOString(),
|
|
titulo: `${MONTH_NAMES[month-1]} ${year}`,
|
|
spanTxt: `${from.toLocaleDateString('es-UY')} - ${to.toLocaleDateString('es-UY')}`
|
|
};
|
|
}
|
|
|
|
function toCSV(rows, headers){
|
|
const esc = v => v==null? '' : (typeof v==='number'? String(v) : /[",\n]/.test(String(v)) ? `"${String(v).replace(/"/g,'""')}"` : String(v));
|
|
const cols = headers && headers.length? headers : Object.keys(rows?.[0]||{});
|
|
const out = []; if(headers) out.push(cols.join(','));
|
|
for(const r of (rows||[])) out.push(cols.map(c=>esc(r[c])).join(','));
|
|
return out.join('\r\n');
|
|
}
|
|
function downloadText(name, text){ const blob=new Blob([text],{type:'text/csv;charset=utf-8;'}); const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download=name; a.click(); URL.revokeObjectURL(a.href); }
|
|
function printArea(){ window.print(); }
|
|
|
|
/* === Mini SVGs === */
|
|
function barsSVG(series){ // [{label, value}]
|
|
const W=560,H=120,P=10,G=6;
|
|
const n=series.length||1, max=Math.max(1,...series.map(d=>Number(d.value||0)));
|
|
const bw=Math.max(6,Math.floor((W-P*2-G*(n-1))/n)); let x=P, bars='';
|
|
series.forEach(d=>{ const vh=Math.round((Number(d.value||0)/max)*(H-P-26)); const y=H-20-vh;
|
|
bars+=`<g><rect x="${x}" y="${y}" width="${bw}" height="${vh}" rx="3" ry="3" fill="#0d6efd"><title>${d.label} · ${fmtMoney(d.value)}</title></rect><text x="${x+bw/2}" y="${H-6}" text-anchor="middle">${d.label}</text></g>`; x+=bw+G; });
|
|
return `<svg viewBox="0 0 ${W} ${H}" class="spark" preserveAspectRatio="none"><line x1="${P}" y1="${H-20}" x2="${W-P}" y2="${H-20}" stroke="#adb5bd"/></svg>` .replace('</svg>', bars+'</svg>');
|
|
}
|
|
function barsCompareSVG(a,b){ // a=ventas, b=gastos: arrays [{label,value}]
|
|
const W=560,H=160,P=10,G=8,PAIR=2,INNER=3;
|
|
const n=a.length, max=Math.max(1,...a.map(d=>Number(d.value||0)),...b.map(d=>Number(d.value||0)));
|
|
const bw=Math.max(5,Math.floor((W-P*2-G*(n-1))/(n*PAIR)));
|
|
let x=P, g=''; for(let i=0;i<n;i++){
|
|
const av=Number(a[i].value||0), bv=Number(b[i].value||0);
|
|
const ah=Math.round((av/max)*(H-P-26)), bh=Math.round((bv/max)*(H-P-26));
|
|
const ay=H-20-ah, by=H-20-bh;
|
|
g+=`<g><rect x="${x}" y="${ay}" width="${bw}" height="${ah}" rx="3" ry="3" fill="#198754"><title>${a[i].label} · Ventas ${fmtMoney(av)}</title></rect></g>`;
|
|
x+=bw+INNER;
|
|
g+=`<g><rect x="${x}" y="${by}" width="${bw}" height="${bh}" rx="3" ry="3" fill="#dc3545"><title>${b[i].label} · Gastos ${fmtMoney(bv)}</title></rect><text x="${x-bw/2}" y="${H-6}" text-anchor="middle">${a[i].label}</text></g>`;
|
|
x+=bw+G;
|
|
}
|
|
return `<svg viewBox="0 0 ${W} ${H}" class="spark" preserveAspectRatio="none"><line x1="${P}" y1="${H-20}" x2="${W-P}" y2="${H-20}" stroke="#adb5bd"/></svg>` .replace('</svg>', g+'</svg>');
|
|
}
|
|
|
|
/* ===== Asistencias ===== */
|
|
let cacheAsist=[];
|
|
|
|
async function fetchAsistencias(desde,hasta){
|
|
try { return await jpost('/api/rpc/report_asistencia', { desde, hasta }); }
|
|
catch { const url=`/api/table/asistencia_detalle?desde=${encodeURIComponent(desde)}&hasta=${encodeURIComponent(hasta)}&limit=10000`; return await jget(url); }
|
|
}
|
|
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(){
|
|
let d = $('#asistDesde')?.value;
|
|
let h = $('#asistHasta')?.value;
|
|
|
|
// fallback: últimos 30 días
|
|
if (!d || !h){
|
|
const end = new Date();
|
|
const start = new Date(end);
|
|
start.setDate(end.getDate() - 30);
|
|
d = start.toISOString().slice(0,10);
|
|
h = end.toISOString().slice(0,10);
|
|
if ($('#asistDesde')) $('#asistDesde').value = d;
|
|
if ($('#asistHasta')) $('#asistHasta').value = h;
|
|
}
|
|
|
|
$('#repStatus').textContent = 'Cargando asistencias…';
|
|
cacheAsist = await jpost('/api/rpc/report_asistencia', { desde: d, hasta: h })
|
|
.catch(async ()=>{
|
|
// fallback a tabla genérica si el RPC no está
|
|
const url=`/api/table/asistencia_detalle?desde=${encodeURIComponent(d)}&hasta=${encodeURIComponent(h)}&limit=10000`;
|
|
return await jget(url);
|
|
});
|
|
|
|
renderAsistTabla(cacheAsist||[]);
|
|
const minsTot = (cacheAsist||[]).reduce((s,r)=>s+Number(r.dur_min||0),0);
|
|
$('#asistInfo').textContent = `${cacheAsist?.length||0} registros · ${fmtHM(minsTot)}`;
|
|
$('#repStatus').textContent = 'Listo';
|
|
}
|
|
|
|
|
|
function asistBarsSVG(series /* [{x:'YYYY-MM-DD', h:Number}] */, maxH = null) {
|
|
const W=520, H=80, PAD=6, GAP=3;
|
|
const n = series.length || 1;
|
|
const max = maxH ?? Math.max(1, ...series.map(d => d.h || 0));
|
|
const bw = Math.max(2, Math.floor((W - PAD*2 - GAP*(n-1)) / n));
|
|
let x = PAD, bars = '';
|
|
series.forEach(d => {
|
|
const vh = max ? Math.round((d.h / max) * (H - PAD*2)) : 0;
|
|
const y = H - PAD - vh;
|
|
const label = `${d.x} · ${fmtHM((d.h||0)*60)}`;
|
|
bars += `<rect x="${x}" y="${y}" width="${bw}" height="${vh}" rx="2" ry="2" data-x="${d.x}" data-h="${d.h??0}"><title>${label}</title></rect>`;
|
|
x += bw + GAP;
|
|
});
|
|
const axis = `<line x1="${PAD}" y1="${H-PAD}" x2="${W-PAD}" y2="${H-PAD}" stroke="#adb5bd" stroke-width="1"/>`;
|
|
return `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" class="spark"><style>rect{fill:#0d6efd}</style>${axis}${bars}</svg>`;
|
|
}
|
|
|
|
// Render de tarjetas por empleado (idéntico a usuarios.ejs)
|
|
function asistRenderCards(grouped) {
|
|
const cont = $('#resumenCards');
|
|
if (!cont) return;
|
|
cont.innerHTML = '';
|
|
for (const [key, data] of grouped.entries()) {
|
|
const { doc, nombre, apellido, rows } = data;
|
|
rows.sort((a,b)=> a.fecha.localeCompare(b.fecha));
|
|
const series = rows.map(r => ({ x: r.fecha, h: Number(r.horas)||0 }));
|
|
const totalH = series.reduce((s,d)=> s + d.h, 0);
|
|
const dias = series.length;
|
|
const avgH = dias ? totalH / dias : 0;
|
|
const pairs = rows.reduce((s,r)=> s + (Number(r.pares)||0), 0);
|
|
const last = series.at(-1) || {x:'',h:0};
|
|
const svg = asistBarsSVG(series);
|
|
|
|
const col = document.createElement('div');
|
|
col.className = 'col-12 col-md-6 col-lg-4';
|
|
col.innerHTML = `
|
|
<div class="emp-card h-100">
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<div>
|
|
<div class="fw-semibold">${nombre||''} ${apellido||''}</div>
|
|
<div class="text-muted small">${doc}</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="small text-muted">Total</div>
|
|
<div class="fs-5 fw-semibold">${fmtHM(totalH*60)}</div>
|
|
</div>
|
|
</div>
|
|
<div class="spark-wrap mb-1">${svg}</div>
|
|
<div class="small text-muted legend">Pasá el mouse por una barra…</div>
|
|
<div class="d-flex flex-wrap gap-1 emp-meta mt-2">
|
|
<span class="badge">Días: ${dias}</span>
|
|
<span class="badge">Prom: ${fmtHM(avgH*60)}</span>
|
|
<span class="badge">Pares: ${pairs}</span>
|
|
<span class="badge">Último: ${fmtHM((last.h||0)*60)} ${last.x?`(${last.x})`:''}</span>
|
|
</div>
|
|
</div>`;
|
|
cont.appendChild(col);
|
|
}
|
|
const badge = $('#resumeCount'); if (badge) badge.textContent = `${grouped.size} empleado(s)`;
|
|
}
|
|
|
|
// Leyenda al sobrevolar barras
|
|
const cardsRoot = $('#resumenCards');
|
|
if (cardsRoot){
|
|
cardsRoot.addEventListener('mouseover', (e)=>{
|
|
const r = e.target;
|
|
if (!(r instanceof SVGRectElement)) return;
|
|
const card = r.closest('.emp-card');
|
|
const legend = card?.querySelector('.legend');
|
|
if (!legend) return;
|
|
const x = r.getAttribute('data-x')||'';
|
|
const h = Number(r.getAttribute('data-h')||0);
|
|
legend.textContent = `${x} · ${fmtHM(h*60)}`;
|
|
});
|
|
}
|
|
|
|
// Loader: trae la vista asistencia_resumen_diario y arma tarjetas (30 días)
|
|
async function asistLoadResumenDiario30d(){
|
|
const badge = $('#resumeCount'); if (badge) badge.textContent = 'Cargando…';
|
|
try{
|
|
const rows = await jget('/api/table/asistencia_resumen_diario?limit=5000').catch(()=>[]);
|
|
const today = new Date(); const cut = new Date(today); cut.setDate(today.getDate()-30);
|
|
const byKey = new Map();
|
|
for (const r of (rows||[])) {
|
|
const fStr = ymd(r.fecha); const fDt = new Date(fStr);
|
|
if (!(fDt >= cut)) continue;
|
|
const key = `${r.documento}::${r.nombre||''}::${r.apellido||''}`;
|
|
if (!byKey.has(key)) byKey.set(key, { doc:r.documento, nombre:r.nombre||'', apellido:r.apellido||'', rows:[] });
|
|
byKey.get(key).rows.push({
|
|
fecha: fStr,
|
|
horas: Number(r.horas_dia ?? r.horas ?? (r.minutos_dia||0)/60),
|
|
pares: Number(r.pares_dia ?? r.pares ?? 0)
|
|
});
|
|
}
|
|
asistRenderCards(byKey);
|
|
if (badge) badge.textContent = 'Listo';
|
|
}catch(e){
|
|
if (badge) badge.textContent = 'Error';
|
|
console.error('asistLoadResumenDiario30d:', e);
|
|
}
|
|
}
|
|
|
|
// Auto-carga al abrir reportes (si la card está en el DOM)
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
if (document.getElementById('PRINT_ASIST')) {
|
|
asistLoadResumenDiario30d();
|
|
}
|
|
});
|
|
|
|
|
|
/* ===== Tickets (ventas) ===== */
|
|
let cacheTickets=null;
|
|
|
|
function getYearSafe(val){
|
|
const y = parseInt(val, 10);
|
|
return Number.isFinite(y) && y >= 2000 && y <= 2100
|
|
? y
|
|
: new Date().getFullYear();
|
|
}
|
|
|
|
async function fetchTickets(year){
|
|
const y = getYearSafe(year);
|
|
return await jpost('/api/rpc/report_tickets', { year: y });
|
|
}
|
|
|
|
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||data?.avg_ticket||0);
|
|
$('#tToDate').textContent=fmtMoney(data?.to_date||0);
|
|
$('#ticketsChart').innerHTML=barsSVG(months.map(m=>({label:m.nombre||m.mes,value:Number(m.cant||0)})));
|
|
const tb=$('#tbTickets'); if(!months.length){ tb.innerHTML='<tr><td colspan="4" class="p-3 text-muted">Sin datos</td></tr>'; } else {
|
|
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`;
|
|
}
|
|
|
|
/* ===== Gastos ===== */
|
|
let cacheGastos=null; // {year, months:[{mes,nombre,importe}], total, avg}
|
|
async function fetchGastos(year){
|
|
// 1) Intentar RPC
|
|
try { return await jpost('/api/rpc/report_gastos', { year }); } catch {}
|
|
// 2) Fallback: traer compras y agrupar en el cliente
|
|
const rows = await jget('/api/table/compras?limit=10000&order_by=fec_compra%20asc').catch(()=>[]);
|
|
const months = Array.from({length:12},(_,i)=>({mes:i+1,nombre:monthNames[i],importe:0}));
|
|
let total=0;
|
|
(rows||[]).forEach(r=>{
|
|
const d=new Date(r.fec_compra||r.fec||r.fecha); if(!d.getFullYear) return;
|
|
if (d.getFullYear() !== Number(year)) return;
|
|
const m=d.getMonth(); const t=Number(r.total||0);
|
|
months[m].importe += t; total += t;
|
|
});
|
|
const avg = months.reduce((s,m)=>s+m.importe,0)/12;
|
|
return { year, months, total, avg };
|
|
}
|
|
|
|
function renderGastos(data){
|
|
// siempre cacheo para el comparativo
|
|
cacheGastos = data || { year: new Date().getFullYear(), months: [], total: 0, avg: 0 };
|
|
|
|
const months = cacheGastos.months || [];
|
|
|
|
// elementos de la antigua card (pueden NO existir)
|
|
const yTitle = document.querySelector('#gastosYearTitle');
|
|
const toDate = document.querySelector('#gToDate');
|
|
const avgEl = document.querySelector('#gAvg');
|
|
const chart = document.querySelector('#gastosChart');
|
|
const tb = document.querySelector('#tbGastos');
|
|
const info = document.querySelector('#gastosInfo');
|
|
|
|
// si NO existe ninguno, significa que ya no está la card de Gastos ⇒ solo mantener cache y salir
|
|
if (!yTitle && !toDate && !avgEl && !chart && !tb && !info) return;
|
|
|
|
// a partir de acá, escribir solo si el elemento existe
|
|
if (yTitle) yTitle.textContent = cacheGastos.year ?? '—';
|
|
if (toDate) toDate.textContent = fmtMoney(cacheGastos.total || 0);
|
|
if (avgEl) avgEl.textContent = fmtMoney(cacheGastos.avg || 0);
|
|
|
|
if (chart) {
|
|
chart.innerHTML = barsSVG(months.map(m => ({
|
|
label: m.nombre || m.mes, value: Number(m.importe || 0)
|
|
})));
|
|
}
|
|
|
|
if (tb) {
|
|
if (!months.length) {
|
|
tb.innerHTML = '<tr><td colspan="2" class="p-3 text-muted">Sin datos</td></tr>';
|
|
} else {
|
|
tb.innerHTML = '';
|
|
months.forEach(m => {
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>${m.nombre || m.mes}</td>
|
|
<td class="text-end">${fmtMoney(m.importe || 0)}</td>`;
|
|
tb.appendChild(tr);
|
|
});
|
|
}
|
|
}
|
|
|
|
if (info) info.textContent = `${months.length} meses`;
|
|
}
|
|
|
|
/* ===== Comparativo ===== */
|
|
function renderComparativo(){
|
|
if(!cacheTickets?.months || !cacheGastos?.months) return;
|
|
const y = cacheTickets.year || cacheGastos.year; $('#compYearTitle').textContent=y;
|
|
const ventas = Array.from({length:12},(_,i)=>Number(cacheTickets.months.find(m=>(m.mes||monthNames.indexOf(m.nombre)+1)===i+1)?.importe||0));
|
|
const gastos = Array.from({length:12},(_,i)=>Number(cacheGastos.months[i]?.importe||0));
|
|
const seriesA = ventas.map((v,i)=>({label:monthNames[i], value:v}));
|
|
const seriesB = gastos.map((v,i)=>({label:monthNames[i], value:v}));
|
|
$('#compChart').innerHTML = barsCompareSVG(seriesA, seriesB);
|
|
|
|
const tb=$('#tbComp'); tb.innerHTML='';
|
|
let ySales=0,yCost=0;
|
|
for(let i=0;i<12;i++){
|
|
const s=ventas[i]||0, g=gastos[i]||0, d=s-g; ySales+=s; yCost+=g;
|
|
const tr=document.createElement('tr'); tr.innerHTML=`
|
|
<td>${monthNames[i]}</td>
|
|
<td class="text-end">${fmtMoney(s)}</td>
|
|
<td class="text-end">${fmtMoney(g)}</td>
|
|
<td class="text-end ${d>=0?'text-success':'text-danger'}">${fmtMoney(d)}</td>`;
|
|
tb.appendChild(tr);
|
|
}
|
|
$('#cmpSales').textContent = fmtMoney(ySales);
|
|
$('#cmpCost').textContent = fmtMoney(yCost);
|
|
$('#cmpDiff').textContent = fmtMoney(ySales - yCost);
|
|
$('#compInfo').textContent = '12 meses';
|
|
}
|
|
|
|
/* ===== Exportaciones ===== */
|
|
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)}));
|
|
downloadText(`asistencias_${$('#asistDesde').value}_${$('#asistHasta').value}.csv`, toCSV(rows,headers));
|
|
}
|
|
function exportTicketsCSV(){
|
|
if(!cacheTickets?.months?.length) return;
|
|
const toInt=v=>fmtInt(v);
|
|
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),'Ticket promedio':toInt(m.avg)}));
|
|
downloadText(`tickets_${cacheTickets.year}.csv`, toCSV(rows,headers));
|
|
}
|
|
function exportGastosCSV(){
|
|
if(!cacheGastos?.months?.length) return;
|
|
const toInt=v=>fmtInt(v);
|
|
const headers=['Año','Mes','Gasto'];
|
|
const rows=cacheGastos.months.map(m=>({'Año':cacheGastos.year,'Mes':m.nombre,'Gasto':toInt(m.importe)}));
|
|
downloadText(`gastos_${cacheGastos.year}.csv`, toCSV(rows,headers));
|
|
}
|
|
function exportCompCSV(){
|
|
if(!cacheGastos?.months || !cacheTickets?.months) return;
|
|
const headers=['Mes','Ingresos','Gastos','Resultado'];
|
|
const rows=monthNames.map((nm,i)=>{ const s=Number(cacheTickets.months[i]?.importe||0), g=Number(cacheGastos.months[i]?.importe||0); return {Mes:nm,Ingresos:fmtInt(s),Gastos:fmtInt(g),Resultado:fmtInt(s-g)}; });
|
|
downloadText(`comparativo_${cacheTickets.year||cacheGastos.year}.csv`, toCSV(rows,headers));
|
|
}
|
|
|
|
/* ===== Gastos detallados (mes anterior) ===== */
|
|
let cacheGastosDet = [];
|
|
let cacheGdetMeta = null;
|
|
|
|
async function loadGastosDetallado(optMonth, optYear){
|
|
// 1) rango según select (o params)
|
|
const {month, year} = (Number.isFinite(optMonth) && Number.isFinite(optYear))
|
|
? {month: optMonth, year: optYear}
|
|
: getSelectedMonthYear();
|
|
const {desdeISO, hastaISO, titulo, spanTxt} = monthRange(month, year);
|
|
cacheGdetMeta = { desdeISO, hastaISO, month, year };
|
|
|
|
// 2) traer tablas base
|
|
const [compras, provs, detMats, detProds, mates, prods] = await Promise.all([
|
|
jget('/api/table/compras?limit=10000&order_by=fec_compra%20desc').catch(()=>[]),
|
|
jget('/api/table/proveedores?limit=10000').catch(()=>[]),
|
|
jget('/api/table/deta_comp_materias?limit=100000').catch(()=>[]),
|
|
jget('/api/table/deta_comp_producto?limit=100000').catch(()=>[]),
|
|
jget('/api/table/mate_primas?limit=10000').catch(()=>[]),
|
|
jget('/api/table/productos?limit=10000').catch(()=>[]),
|
|
]);
|
|
|
|
// 3) filtro por rango seleccionado
|
|
const from = new Date(desdeISO), to = new Date(hastaISO);
|
|
const comprasMes = (compras||[]).filter(c=>{
|
|
const d = new Date(c.fec_compra || c.fecha || c.fec);
|
|
return d >= from && d <= to;
|
|
});
|
|
const ids = new Set(comprasMes.map(c=>c.id_compra));
|
|
|
|
// 4) mapas auxiliares
|
|
const provById = Object.fromEntries((provs||[]).map(p=>[p.id_proveedor, p.raz_social||p.rut||`#${p.id_proveedor}`]));
|
|
const matName = Object.fromEntries((mates||[]).map(x=>[x.id_mat_prima, x.nombre]));
|
|
const prodName = Object.fromEntries((prods||[]).map(x=>[x.id_producto, x.nombre]));
|
|
const mapCompra = Object.fromEntries(comprasMes.map(c=>[c.id_compra, c]));
|
|
|
|
// 5) construir filas
|
|
const filas = [];
|
|
(detMats||[]).forEach(d=>{
|
|
if(!ids.has(d.id_compra)) return;
|
|
const c = mapCompra[d.id_compra]; const fecha = new Date(c.fec_compra||c.fecha||c.fec);
|
|
const prov = provById[c.id_proveedor] || '—';
|
|
const qty = Number(d.cantidad||0);
|
|
const pu = Number(d.pre_unitario||0);
|
|
filas.push({
|
|
fecha, fecha_txt: fecha.toLocaleDateString('es-UY'),
|
|
proveedor: prov, tipo: 'Materia', item: (matName[d.id_mat_prima] || `#${d.id_mat_prima}`),
|
|
cantidad: qty, precio: pu, subtotal: qty*pu
|
|
});
|
|
});
|
|
(detProds||[]).forEach(d=>{
|
|
if(!ids.has(d.id_compra)) return;
|
|
const c = mapCompra[d.id_compra]; const fecha = new Date(c.fec_compra||c.fecha||c.fec);
|
|
const prov = provById[c.id_proveedor] || '—';
|
|
const qty = Number(d.cantidad||0);
|
|
const pu = Number(d.pre_unitario||0);
|
|
filas.push({
|
|
fecha, fecha_txt: fecha.toLocaleDateString('es-UY'),
|
|
proveedor: prov, tipo: 'Producto', item: (prodName[d.id_producto] || `#${d.id_producto}`),
|
|
cantidad: qty, precio: pu, subtotal: qty*pu
|
|
});
|
|
});
|
|
|
|
filas.sort((a,b)=> b.fecha - a.fecha);
|
|
cacheGastosDet = filas;
|
|
|
|
// 6) render
|
|
document.querySelector('#gdetTitle')?.replaceChildren(document.createTextNode(titulo));
|
|
document.querySelector('#gdetInfo') ?.replaceChildren(document.createTextNode(spanTxt));
|
|
const tb = document.querySelector('#tbGdet');
|
|
if(!filas.length){ tb.innerHTML = '<tr><td colspan="7" class="p-3 text-muted">Sin datos</td></tr>'; }
|
|
else{
|
|
tb.innerHTML = '';
|
|
filas.forEach(r=>{
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>${r.fecha_txt}</td>
|
|
<td>${r.proveedor}</td>
|
|
<td>${r.tipo}</td>
|
|
<td>${r.item}</td>
|
|
<td class="text-end">${r.cantidad.toLocaleString('es-UY')}</td>
|
|
<td class="text-end">${new Intl.NumberFormat('es-UY',{style:'currency',currency:'UYU'}).format(r.precio)}</td>
|
|
<td class="text-end">${new Intl.NumberFormat('es-UY',{style:'currency',currency:'UYU'}).format(r.subtotal)}</td>`;
|
|
tb.appendChild(tr);
|
|
});
|
|
}
|
|
const total = filas.reduce((s,r)=>s+r.subtotal,0);
|
|
document.querySelector('#gdetTotal') ?.replaceChildren(document.createTextNode(new Intl.NumberFormat('es-UY',{style:'currency',currency:'UYU'}).format(total)));
|
|
document.querySelector('#gdetCompras')?.replaceChildren(document.createTextNode(comprasMes.length.toLocaleString('es-UY')));
|
|
document.querySelector('#gdetRows') ?.replaceChildren(document.createTextNode(filas.length.toLocaleString('es-UY')));
|
|
}
|
|
|
|
|
|
function exportGdetCSV(){
|
|
if(!cacheGastosDet?.length) return;
|
|
const headers = ['Fecha','Proveedor','Tipo','Ítem','Cantidad','Precio','Subtotal'];
|
|
const rows = cacheGastosDet.map(r=>({
|
|
'Fecha': r.fecha_txt,
|
|
'Proveedor': r.proveedor,
|
|
'Tipo': r.tipo,
|
|
'Ítem': r.item,
|
|
'Cantidad': r.cantidad,
|
|
'Precio': Math.round(r.precio),
|
|
'Subtotal': Math.round(r.subtotal)
|
|
}));
|
|
const title = document.querySelector('#gdetTitle')?.textContent?.replace(/\s+/g,'_') || 'mes';
|
|
downloadText(`gastos_detalle_${title}.csv`, toCSV(rows, headers));
|
|
}
|
|
|
|
const onPDFGdet = ()=>printArea('PRINT_GASTOS_DET');
|
|
const onPDFAsist=()=>printArea('PRINT_ASIST');
|
|
const onPDFTicket=()=>printArea('PRINT_TICKETS');
|
|
const onPDFGastos=()=>printArea('PRINT_GASTOS');
|
|
const onPDFComp=()=>printArea('PRINT_COMP');
|
|
|
|
/* ===== Eventos ===== */
|
|
|
|
const btnGdetCargar = document.querySelector('#btnGdetCargar');
|
|
if (btnGdetCargar) btnGdetCargar.addEventListener('click', ()=> loadGastosDetallado());
|
|
|
|
// por UX: recargar al cambiar mes/año
|
|
document.querySelector('#gdetMes') ?.addEventListener('change', ()=> loadGastosDetallado());
|
|
document.querySelector('#gdetAnio')?.addEventListener('change', ()=> loadGastosDetallado());
|
|
|
|
document.querySelector('#btnGdetExcel')?.addEventListener('click', exportGdetCSV);
|
|
document.querySelector('#btnGdetPDF') ?.addEventListener('click', onPDFGdet);
|
|
|
|
|
|
$('#btnAsistCargar').addEventListener('click', loadAsist);
|
|
$('#btnAsistExcel'). addEventListener('click', exportAsistCSV);
|
|
$('#btnAsistPDF'). addEventListener('click', onPDFAsist);
|
|
|
|
$('#btnAnualExcel').addEventListener('click', exportCompCSV);
|
|
$('#btnAnualPDF'). addEventListener('click', onPDFComp);
|
|
|
|
/* ✅ Enlaza los botones de la sección comparativo */
|
|
$('#btnCompExcel').addEventListener('click', exportCompCSV);
|
|
$('#btnCompPDF'). addEventListener('click', onPDFComp);
|
|
|
|
/* ✅ Botones de la nueva sección de gastos detallados */
|
|
$('#btnGdetExcel').addEventListener('click', exportGdetCSV);
|
|
$('#btnGdetPDF'). addEventListener('click', onPDFGdet);
|
|
|
|
|
|
$('#btnAnualCargar').addEventListener('click', async ()=>{
|
|
const y=Number($('#anualYear').value);
|
|
$('#repStatus').textContent='Cargando ventas y gastos…';
|
|
cacheTickets = await fetchTickets(y).catch(()=>null);
|
|
if (cacheTickets) renderTickets(cacheTickets);
|
|
cacheGastos = await fetchGastos(y).catch(()=>null);
|
|
if (cacheGastos) renderGastos(cacheGastos);
|
|
if (cacheTickets && cacheGastos) renderComparativo();
|
|
$('#repStatus').textContent='Listo';
|
|
});
|
|
$('#btnAnualExcel').addEventListener('click', exportCompCSV);
|
|
$('#btnAnualPDF'). addEventListener('click', onPDFComp);
|
|
|
|
/* ===== Defaults al cargar ===== */
|
|
(function init(){
|
|
const today = new Date();
|
|
const y = today.getFullYear();
|
|
|
|
if (!$('#anualYear').value) $('#anualYear').value = y;
|
|
|
|
if (!$('#asistDesde').value || !$('#asistHasta').value){
|
|
const end = new Date();
|
|
const start = new Date(end);
|
|
start.setDate(end.getDate()-30);
|
|
$('#asistDesde').value = start.toISOString().slice(0,10);
|
|
$('#asistHasta').value = end.toISOString().slice(0,10);
|
|
}
|
|
|
|
loadAsist().catch(()=>{});
|
|
(async()=>{
|
|
cacheTickets = await fetchTickets($('#anualYear').value).catch(()=>null);
|
|
if (cacheTickets) renderTickets(cacheTickets);
|
|
cacheGastos = await fetchGastos($('#anualYear').value).catch(()=>null);
|
|
if (cacheGastos) renderGastos(cacheGastos);
|
|
if (cacheTickets && cacheGastos) renderComparativo();
|
|
$('#repStatus').textContent = 'Listo';
|
|
})();
|
|
})();
|
|
|
|
(function presetMesAnterior(){
|
|
const now = new Date();
|
|
const prev = new Date(now.getFullYear(), now.getMonth()-1, 1);
|
|
const mesSel = document.querySelector('#gdetMes');
|
|
const anioIn = document.querySelector('#gdetAnio');
|
|
if (mesSel && !mesSel.value) mesSel.value = String(prev.getMonth()+1);
|
|
if (anioIn && !anioIn.value) anioIn.value = String(prev.getFullYear());
|
|
// primera carga
|
|
loadGastosDetallado(prev.getMonth()+1, prev.getFullYear()).catch(()=>{});
|
|
})();
|
|
|
|
</script> |