From 8cbee48947d738dd5f932fdbabf1f64f57757312 Mon Sep 17 00:00:00 2001
From: Administrator <Dennys.Murillo@escueladerefrigeracion.edu.pe>
Date: Thu, 10 Sep 2026 13:28:53 -0500
Subject: [PATCH] Actualizar frontend/src/pages/Rentabilidad.jsx

---
 frontend/src/pages/Rentabilidad.jsx | 39 +++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/Rentabilidad.jsx b/frontend/src/pages/Rentabilidad.jsx
index 2764294..f38a2f4 100644
--- a/frontend/src/pages/Rentabilidad.jsx
+++ b/frontend/src/pages/Rentabilidad.jsx
@@ -546,7 +546,9 @@ export default function Rentabilidad() {
                    })}
                    <td style={{whiteSpace:"nowrap"}}>
                      <button className="btn btn-ghost" style={{padding:"3px 8px",fontSize:11,marginRight:4}}
-                       onClick={()=>setModalVer({programa:f[0]})}>👁️</button>
+                       onClick={()=>setModalVer({programa:f[0],
+                         ventaIni:f[7], costoIni:f[8], mbIni:f[9],
+                         ventaAct:f[10], costoAct:f[11], mbAct:f[12]})}>👁️</button>
                      <button className="btn btn-ghost" style={{padding:"3px 8px",fontSize:11}}
                        onClick={()=>setModalCostos({programa:f[0]})}>✏️</button>
                    </td>
@@ -569,7 +571,7 @@ export default function Rentabilidad() {
          </div>
        </>}
 
-      {modalVer && <ModalVerDetalle programa={modalVer.programa} ano={ano} mes={mes} onClose={()=>setModalVer(null)} />}
+      {modalVer && <ModalVerDetalle programa={modalVer.programa} ano={ano} mes={mes} resumen={modalVer} onClose={()=>setModalVer(null)} />}
       {modalCostos && <ModalCostos programa={modalCostos.programa} ano={ano} mes={mes} onClose={()=>setModalCostos(null)} onGuardado={cargar} />}
     </div>
   );
@@ -691,7 +693,7 @@ function MesesMulti({ label, meses, onChange }) {
   );
 }
 
-function ModalVerDetalle({ programa, ano, mes, onClose }) {
+function ModalVerDetalle({ programa, ano, mes, resumen, onClose }) {
   const [filas, setFilas] = useState([]);
   const [loading, setLoading] = useState(true);
   useEffect(() => {
@@ -702,23 +704,38 @@ function ModalVerDetalle({ programa, ano, mes, onClose }) {
     return ()=>{activo=false;};
   }, [programa, ano, mes]);
 
-  const COLS_DET = ["VENDEDOR","ALUMNO","F. MATRÍCULA","F. CANCELACIÓN","TIPO","VALOR CUOTA","PROM. DESC. E.","VALOR VENTA"];
+  const COLS_DET = ["VENDEDOR","ALUMNO","F. MATRÍCULA","F. CANCELACIÓN","TIPO","VALOR CUOTA","PROM. DESC. E.","VALOR VENTA","ESTADO"];
 
   return (
-    <Modal title={`👁️ Detalle — ${programa}`} onClose={onClose} width={1000}>
+    <Modal title={`👁️ Detalle — ${programa}`} onClose={onClose} width={1100}>
+      {resumen && (
+        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,marginBottom:16}}>
+          <TarjetaRenta titulo="📊 INICIAL" color="#1e3a5f"
+            venta={resumen.ventaIni} costo={resumen.costoIni} mb={resumen.mbIni} />
+          <TarjetaRenta titulo="📈 ACTUAL" color="#1a5f4a"
+            venta={resumen.ventaAct} costo={resumen.costoAct} mb={resumen.mbAct} />
+        </div>
+      )}
       {loading ? <Loader text="Cargando detalle..." /> :
        filas.length===0 ? <div style={{color:"#94a3b8",padding:20,textAlign:"center"}}>Sin alumnos.</div> :
-       <div className="table-wrap">
-         <table>
-           <thead><tr>{COLS_DET.map((c)=><th key={c}>{c}</th>)}</tr></thead>
+       <div className="table-wrap" style={{overflowX:"auto", overflowY:"auto", maxHeight:"65vh"}}>
+         <table style={{minWidth:1100, width:"max-content"}}>
+           <thead><tr>{COLS_DET.map((c)=><th key={c} style={{whiteSpace:"nowrap", position:"sticky", top:0, zIndex:2}}>{c}</th>)}</tr></thead>
            <tbody>
-             {filas.map((f,i)=>(
+             {filas.map((f,i)=>{
+               const esTot = String(f[0]).toUpperCase()==="TOTAL GENERAL";
+               const stTot = esTot ? {position:"sticky",bottom:0,zIndex:9,
+                 backgroundColor:"#dbeafe",fontWeight:700,color:"#1e3a5f",
+                 boxShadow:"inset 0 1px 0 0 #93c5fd"} : {};
+               return (
                <tr key={i}>
                  {f.map((v,j)=>(
-                   <td key={j} className={j===1?"col-name":""} style={{textAlign:j>=5?"right":(j===1?"left":"center")}}>{v}</td>
+                   <td key={j} className={j===1?"col-name":""}
+                       style={{textAlign:j===1?"left":"center", whiteSpace:"nowrap", ...stTot}}>{v}</td>
                  ))}
                </tr>
-             ))}
+               );
+             })}
            </tbody>
          </table>
        </div>}