Actualizar docker-compose.yml con sintaxis YAML corregida y puerto 80 para frontend

2026-08-29 13:00:33 -05:00
parent 54581c21ab
commit 15c577207d
63 changed files with 11740 additions and 2864 deletions
--- a/frontend/src/pages/SaldoPendiente.jsx
+++ b/frontend/src/pages/SaldoPendiente.jsx
@@ -0,0 +1,96 @@
+// src/pages/SaldoPendiente.jsx
+import { useState, useEffect, useMemo } from "react";
+import { api } from "../lib/api";
+import { Loader, ErrorBox, Filters, Select } from "../components/UI";
+
+const CUOTAS = ["1° Cuota","2° Cuota","3° Cuota","4° Cuota","5° Cuota"];
+
+function toNum(v){ const n=parseFloat(String(v).replace("S/","").replace(/,/g,"").trim()); return isNaN(n)?0:n; }
+function fmt(v){ const n=toNum(v); return "S/ " + n.toLocaleString("es-PE",{maximumFractionDigits:0}); }
+
+export default function SaldoPendiente() {
+  const [tipoCuota, setTipoCuota] = useState("1° Cuota");
+  const [datos, setDatos] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [vendedor, setVendedor] = useState("TODOS");
+
+  useEffect(() => {
+    let activo = true;
+    setLoading(true); setError(null);
+    api.saldoPendiente(tipoCuota)
+      .then((res)=>{ if(activo){setDatos(res.datos||[]);setLoading(false);} })
+      .catch((e)=>{ if(activo){setError(e.message);setLoading(false);} });
+    return ()=>{activo=false;};
+  }, [tipoCuota]);
+
+  const colSaldo = `SALDO ${tipoCuota.toUpperCase()}`;
+  const vendedores = useMemo(() => {
+    const set = new Set(datos.map((d)=>String(d.VENDEDOR||"").trim()).filter(Boolean));
+    return ["TODOS", ...Array.from(set).sort()];
+  }, [datos]);
+
+  const filtrados = useMemo(() => {
+    let arr = datos.filter((d)=>toNum(d[colSaldo])>0.01);
+    if (vendedor!=="TODOS") arr = arr.filter((d)=>String(d.VENDEDOR||"").trim().toUpperCase()===vendedor.toUpperCase());
+    return arr;
+  }, [datos, vendedor, colSaldo]);
+
+  const totalSaldo = useMemo(()=>filtrados.reduce((s,d)=>s+toNum(d[colSaldo]),0),[filtrados,colSaldo]);
+  const totalMat = useMemo(()=>filtrados.reduce((s,d)=>s+toNum(d["SALDO MAT."]),0),[filtrados]);
+
+  const COLS = ["MATRÍCULA","VENDEDOR","ALUMNO","PROGRAMA","F. INICIO","F. MATR.","SALDO MAT.",colSaldo,"VENCIMIENTO","INV. NETA"];
+  const KEYS = ["MATRICULA","VENDEDOR","ALUMNO","PROGRAMA","FECHA INICIO","FECHA MATR.","SALDO MAT.",colSaldo,"VENCIMIENTO","INV. NETA"];
+
+  return (
+    <div>
+      <h1 className="page-title">⏳ Saldo Pendiente</h1>
+
+      <Filters>
+        <Select label="Tipo de cuota" value={tipoCuota} options={CUOTAS} onChange={setTipoCuota} />
+        <Select label="Vendedor" value={vendedor} options={vendedores} onChange={setVendedor} />
+      </Filters>
+
+      {loading ? <Loader text="Calculando saldos..." /> :
+       error ? <ErrorBox msg={error} /> :
+       <>
+         <div className="kpis" style={{gridTemplateColumns:"repeat(3,1fr)"}}>
+           <div className="kpi"><div className="ico">👥</div><div className="label">Alumnos con Saldo</div><div className="value">{filtrados.length}</div></div>
+           <div className="kpi"><div className="ico">⏳</div><div className="label">Saldo {tipoCuota}</div><div className="value" style={{fontSize:20}}>{fmt(totalSaldo)}</div></div>
+           <div className="kpi"><div className="ico">📋</div><div className="label">Saldo Matrícula</div><div className="value" style={{fontSize:20}}>{fmt(totalMat)}</div></div>
+         </div>
+
+         <div className="table-wrap" style={{marginTop:16}}>
+           <table style={{minWidth:1100}}>
+             <thead><tr>{COLS.map((c)=><th key={c}>{c}</th>)}</tr></thead>
+             <tbody>
+               {filtrados.map((d,i)=>(
+                 <tr key={i}>
+                   {KEYS.map((k,j)=>{
+                     const isMonto = k.includes("SALDO")||k.includes("INV");
+                     return (
+                       <td key={j} className={k==="ALUMNO"||k==="PROGRAMA"?"col-name":""}
+                           style={{textAlign:isMonto?"right":(k==="ALUMNO"||k==="PROGRAMA"?"left":"center"),
+                                   fontWeight:k===colSaldo?700:undefined,
+                                   color:k===colSaldo?"#dc2626":undefined}}>
+                         {isMonto ? fmt(d[k]) : (d[k] ?? "")}
+                       </td>
+                     );
+                   })}
+                 </tr>
+               ))}
+               {filtrados.length>0 && (
+                 <tr className="total-row">
+                   <td colSpan={6} style={{textAlign:"left"}}>TOTAL GENERAL ({filtrados.length})</td>
+                   <td style={{textAlign:"right"}}>{fmt(totalMat)}</td>
+                   <td style={{textAlign:"right"}}>{fmt(totalSaldo)}</td>
+                   <td>—</td><td>—</td>
+                 </tr>
+               )}
+             </tbody>
+           </table>
+         </div>
+       </>}
+    </div>
+  );
+}