Actualizar frontend/src/pages/Rentabilidad.jsx
This commit is contained in:
@@ -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>}
|
||||
|
||||
Reference in New Issue
Block a user