Actualizar frontend/src/pages/Rentabilidad.jsx

This commit is contained in:
2026-09-10 13:28:53 -05:00
parent 84ca180559
commit 8cbee48947

View File

@@ -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>}