Actualizar frontend/src/pages/Cobranza.jsx

This commit is contained in:
2026-08-26 11:18:39 -05:00
parent 5b96e4cb59
commit d444c8051b

View File

@@ -417,15 +417,16 @@ function Row({ k, v, bold, color }) {
);
}
function TarjetasResumen({ r }) {
function TarjetasResumen({ r, retiro }) {
const rt = retiro || { sAnt:0, sMes:0, sTot:0 };
const cards = [
["⚠ MES ANTERIOR","#d97706",r.cAnt,r.obAnt],
["📅 MES EN CURSO","#059669",r.cMes,r.obMes],
["💰 CARTERA TOTAL","#7c3aed",r.cTot,r.obTot],
["⚠ MES ANTERIOR","#d97706",r.cAnt,r.obAnt, rt.sAnt],
["📅 MES EN CURSO","#059669",r.cMes,r.obMes, rt.sMes],
["💰 CARTERA TOTAL","#7c3aed",r.cTot,r.obTot, rt.sTot],
];
return (
<div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:14}}>
{cards.map(([titulo,color,cta,cob]) => {
{cards.map(([titulo,color,cta,cob,saldoRetiro]) => {
const ratio = cta>0 ? (cob/cta*100) : 0;
const c = colorSemaforo(ratio);
const saldo = cta - cob;
@@ -436,6 +437,7 @@ function TarjetasResumen({ r }) {
<Row k="Cta x Cobrar" v={`S/ ${cta.toLocaleString("es-PE",{maximumFractionDigits:0})}`} />
<Row k="Cobrado" v={`S/ ${cob.toLocaleString("es-PE",{maximumFractionDigits:0})}`} />
<Row k="Saldo" v={`S/ ${saldo.toLocaleString("es-PE",{maximumFractionDigits:0})}`} bold color={saldo>0?"#dc2626":"#10b981"} />
<Row k="Saldo por Retirar" v={`S/ ${(saldoRetiro||0).toLocaleString("es-PE",{maximumFractionDigits:0})}`} color="#dc2626" />
{cta>0 && (
<div style={{marginTop:8}}>
<div style={{display:"flex",justifyContent:"space-between",marginBottom:4}}>
@@ -675,14 +677,19 @@ function ModalEstadoCuenta({ grupo, ano, mes, sectorista, agrupacion, onClose })
return { total, pagaron, deben };
}, [filas]);
// POR RETIRAR: cantidad de alumnos marcados y suma de su saldo
// POR RETIRAR: cantidad de alumnos marcados y saldos por cartera (ANT, MES, TOTAL)
const retiro = useMemo(() => {
let cant=0, saldo=0;
let cant=0, saldo=0, sAnt=0, sMes=0;
filas.forEach((f) => {
if (String(f[0]).toUpperCase() === "TOTAL") return;
if (porRetirar.has(String(f[0]))) { cant++; saldo += toMonto(f[13]); }
if (porRetirar.has(String(f[0]))) {
cant++;
saldo += toMonto(f[13]);
sAnt += (toMonto(f[4]) - toMonto(f[5])); // CTA ANT - COB ANT
sMes += (toMonto(f[7]) - toMonto(f[8])); // CTA MES - COB MES
}
});
return { cant, saldo };
return { cant, saldo, sAnt, sMes, sTot: sAnt + sMes };
}, [filas, porRetirar]);
return (
@@ -691,7 +698,7 @@ function ModalEstadoCuenta({ grupo, ano, mes, sectorista, agrupacion, onClose })
filas.length === 0 ? <div style={{color:"#94a3b8",padding:20,textAlign:"center"}}>Sin datos.</div> :
<>
<div style={{marginBottom:16}}>
<TarjetasResumen r={resumen} />
<TarjetasResumen r={resumen} retiro={retiro} />
</div>
{/* Etiquetas de conteo de alumnos */}
<div style={{display:"flex",gap:10,marginBottom:14,flexWrap:"wrap",alignItems:"center"}}>