Solucionado submodulos y subiendo codigo real
This commit is contained in:
Panchito
194
frontend/src/pages/Ocupabilidad.jsx
Normal file
194
frontend/src/pages/Ocupabilidad.jsx
Normal file
@@ -0,0 +1,194 @@
|
||||
// src/pages/Ocupabilidad.jsx
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { api } from "../lib/api";
|
||||
import { Loader, ErrorBox, ProgressBar, Filters, Select } from "../components/UI";
|
||||
import { useColumnasAjustables } from "../lib/useColumnasAjustables";
|
||||
|
||||
const MESES = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];
|
||||
const ANOS = [2024, 2025, 2026];
|
||||
const SEDES = ["TODOS", "LIMA", "AREQUIPA", "PIURA", "TRUJILLO"];
|
||||
const PROGRAMAS = ["TODOS", "SEMINARIOS", "OTROS", "TEAC", "TERC"];
|
||||
|
||||
const COLS = ["PROGRAMA","FECHA INICIO","DÍAS PARA INICIO","TOTAL INSCRITOS","RETIRADOS","INSCRITOS EN CURSO","META INSCRITOS","AVANCE INSCRITOS","INSCRITOS MES","INSCRITOS P.C","INSCRITOS REFRIPERU","INSCRITOS CONTINUIDAD"];
|
||||
|
||||
function toNum(v) { const n = parseFloat(String(v).replace("%","").trim()); return isNaN(n) ? 0 : n; }
|
||||
|
||||
export default function Ocupabilidad() {
|
||||
const hoy = new Date();
|
||||
const [ano, setAno] = useState(hoy.getFullYear());
|
||||
const [mes, setMes] = useState(hoy.getMonth() + 1);
|
||||
const [sede, setSede] = useState("TODOS");
|
||||
const [programa, setPrograma] = useState("TODOS");
|
||||
const [mostrarRepro, setMostrarRepro] = useState(true);
|
||||
const [datos, setDatos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const cols = useColumnasAjustables([280, 110, 120, 110, 100, 120, 110, 120, 100, 100, 130, 140]);
|
||||
|
||||
useEffect(() => {
|
||||
let activo = true;
|
||||
setLoading(true); setError(null);
|
||||
api.ocupabilidad(ano, mes, sede, programa)
|
||||
.then((res) => { if (activo) { setDatos(res.datos || []); setLoading(false); } })
|
||||
.catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
|
||||
return () => { activo = false; };
|
||||
}, [ano, mes, sede, programa]);
|
||||
|
||||
// Toggle "Mostrar Reprogramados": si está apagado, ocultar filas de inicio
|
||||
const datosVisibles = useMemo(() => {
|
||||
if (mostrarRepro) return datos;
|
||||
return datos.filter((d) => String(d.dias_para_inicio).trim().toUpperCase() !== "REPROGRAMADO");
|
||||
}, [datos, mostrarRepro]);
|
||||
|
||||
const kpis = useMemo(() => {
|
||||
if (!datosVisibles.length) return null;
|
||||
const esRepro = (d) => String(d.dias_para_inicio).trim().toUpperCase() === "REPROGRAMADO";
|
||||
// Las filas REPROGRAMADO (inicios) no entran en las métricas (igual que escritorio)
|
||||
const validos = datosVisibles.filter((d) => !esRepro(d));
|
||||
const insc = validos.reduce((s, d) => s + (parseInt(d.Inscritos_Activos) || 0), 0);
|
||||
const totalInsc = validos.reduce((s, d) => s + (parseInt(d.Inscritos_Totales) || 0), 0);
|
||||
const retirados = validos.reduce((s, d) => s + (parseInt(d.Retirados ?? d.Inscritos_Retirados) || 0), 0);
|
||||
const meta = validos.reduce((s, d) => s + (parseInt(d.Meta_Curso) || 0), 0);
|
||||
return {
|
||||
cursos: validos.length, // solo programados (sin reprogramados)
|
||||
reprogramados: datosVisibles.filter(esRepro).length, // inicios rojos (REPROGRAMADO)
|
||||
inscritos: totalInsc, // columna TOTAL INSCRITOS
|
||||
meta,
|
||||
avance: meta > 0 ? (totalInsc / meta * 100) : 0,
|
||||
desercion: totalInsc > 0 ? (retirados / totalInsc * 100) : 0,
|
||||
sobreMeta: validos.filter((d) => (parseInt(d.Inscritos_Totales)||0) >= (parseInt(d.Meta_Curso)||1)).length,
|
||||
pc: validos.reduce((s, d) => s + (parseInt(d.Inscritos_PC) || 0), 0),
|
||||
};
|
||||
}, [datosVisibles]);
|
||||
|
||||
const totales = useMemo(() => {
|
||||
const t = { mes:0, total:0, pc:0, retirados:0, activos:0, refri:0, cont:0, meta:0 };
|
||||
datosVisibles.forEach((d) => {
|
||||
t.mes += parseInt(d.Inscritos_Mes)||0;
|
||||
t.total += parseInt(d.Inscritos_Totales)||0;
|
||||
t.pc += parseInt(d.Inscritos_PC)||0;
|
||||
t.retirados += parseInt(d.Retirados ?? d.Inscritos_Retirados)||0;
|
||||
t.activos += parseInt(d.Inscritos_Activos)||0;
|
||||
t.refri += parseInt(d.Descuento)||0;
|
||||
t.cont += parseInt(d.Inscritos_Continuidad)||0;
|
||||
t.meta += parseInt(d.Meta_Curso)||0;
|
||||
});
|
||||
return t;
|
||||
}, [datosVisibles]);
|
||||
|
||||
const KPI_CARDS = kpis ? [
|
||||
["📚","Cursos Activos", kpis.cursos, "programas este mes"],
|
||||
["🔁","Cursos Reprogramados", kpis.reprogramados, "inicios reprogramados"],
|
||||
["👥","Total Inscritos", kpis.inscritos, "alumnos en curso"],
|
||||
["🎯","Meta Total", kpis.meta, "inscritos objetivo"],
|
||||
["📈","Avance Inscritos", `${kpis.avance.toFixed(1)}%`, "total inscritos / meta"],
|
||||
["📉","Deserción", `${kpis.desercion.toFixed(1)}%`, "retirados / total inscritos"],
|
||||
] : [];
|
||||
|
||||
async function exportarExcel() {
|
||||
if (!datosVisibles.length) return;
|
||||
// Cargar SheetJS desde CDN solo cuando se necesita
|
||||
const XLSX = await import("xlsx");
|
||||
const filas = datosVisibles.map((d) => ({
|
||||
"PROGRAMA": d.programa_frecuencia || d.dsc_programa || "",
|
||||
"FECHA INICIO": d.fch_inicio || "",
|
||||
"DÍAS PARA INICIO": d.dias_para_inicio ?? "",
|
||||
"TOTAL INSCRITOS": parseInt(d.Inscritos_Totales)||0,
|
||||
"RETIRADOS": parseInt(d.Retirados ?? d.Inscritos_Retirados)||0,
|
||||
"INSCRITOS EN CURSO": parseInt(d.Inscritos_Activos)||0,
|
||||
"META INSCRITOS": parseInt(d.Meta_Curso)||0,
|
||||
"AVANCE INSCRITOS": d.Avance_Inscritos || "",
|
||||
"INSCRITOS MES": parseInt(d.Inscritos_Mes)||0,
|
||||
"INSCRITOS P.C": parseInt(d.Inscritos_PC)||0,
|
||||
"INSCRITOS REFRIPERU": parseInt(d.Descuento)||0,
|
||||
"INSCRITOS CONTINUIDAD": parseInt(d.Inscritos_Continuidad)||0,
|
||||
}));
|
||||
const ws = XLSX.utils.json_to_sheet(filas);
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, "Ocupabilidad");
|
||||
XLSX.writeFile(wb, `cursos_${ano}_${mes}.xlsx`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="page-title">📊 Ocupabilidad</h1>
|
||||
|
||||
<Filters>
|
||||
<Select label="Año" value={ano} options={ANOS} onChange={(v) => setAno(+v)} />
|
||||
<Select label="Mes" value={mes} options={MESES.map((m,i)=>({value:i+1,label:m}))} onChange={(v) => setMes(+v)} />
|
||||
<Select label="Sede" value={sede} options={SEDES} onChange={setSede} />
|
||||
<Select label="Programa" value={programa} options={PROGRAMAS} onChange={setPrograma} />
|
||||
<div className="filter-group">
|
||||
<label>Reprogramados</label>
|
||||
<label style={{display:"flex",alignItems:"center",gap:6,height:38,cursor:"pointer",fontSize:13}}>
|
||||
<input type="checkbox" checked={mostrarRepro} onChange={(e)=>setMostrarRepro(e.target.checked)} />
|
||||
Mostrar
|
||||
</label>
|
||||
</div>
|
||||
<button className="btn btn-primary" style={{height:38,marginLeft:"auto"}} onClick={exportarExcel} disabled={!datosVisibles.length}>
|
||||
⬇️ Exportar Excel
|
||||
</button>
|
||||
</Filters>
|
||||
|
||||
{loading ? <Loader text="Calculando ocupabilidad..." /> :
|
||||
error ? <ErrorBox msg={error} /> :
|
||||
<>
|
||||
<div className="kpis">
|
||||
{KPI_CARDS.map(([ico,label,val,sub]) => (
|
||||
<div className="kpi" key={label}>
|
||||
<div className="ico">{ico}</div>
|
||||
<div className="label" style={{fontSize:15}}>{label}</div>
|
||||
<div className="value">{val}</div>
|
||||
<div className="sub">{sub}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="table-wrap" style={{overflowX:"auto"}}>
|
||||
<table {...cols.tableProps}>
|
||||
<cols.ColGroup />
|
||||
<thead><tr>{COLS.map((c, i) => <th key={c} style={{position:"relative"}}>{c}<cols.Resizer index={i} /></th>)}</tr></thead>
|
||||
<tbody>
|
||||
{datosVisibles.map((d, i) => {
|
||||
const prog = d.programa_frecuencia || d.dsc_programa || "";
|
||||
const dias = parseInt(d.dias_para_inicio);
|
||||
const pct = toNum(d.Avance_Inscritos);
|
||||
// Inicio reprogramado (existe en Supabase pero no en SQL este mes) → fila roja
|
||||
const esInicio = String(d.dias_para_inicio).trim().toUpperCase() === "REPROGRAMADO";
|
||||
const cel = (v) => esInicio ? "-" : v;
|
||||
return (
|
||||
<tr key={i} className={esInicio ? "row-inicio" : ""}>
|
||||
<td className="col-name" style={{minWidth:300,maxWidth:480,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{prog}</td>
|
||||
<td>{d.fch_inicio || ""}</td>
|
||||
<td style={!esInicio && dias < 0 ? {color:"#dc2626",fontWeight:700} : {}}>{d.dias_para_inicio ?? ""}</td>
|
||||
<td>{cel(parseInt(d.Inscritos_Totales)||0)}</td>
|
||||
<td>{cel(parseInt(d.Retirados ?? d.Inscritos_Retirados)||0)}</td>
|
||||
<td>{cel(parseInt(d.Inscritos_Activos)||0)}</td>
|
||||
<td>{cel(parseInt(d.Meta_Curso)||0)}</td>
|
||||
<td>{esInicio ? "-" : <ProgressBar pct={pct} />}</td>
|
||||
<td>{cel(parseInt(d.Inscritos_Mes)||0)}</td>
|
||||
<td>{cel(parseInt(d.Inscritos_PC)||0)}</td>
|
||||
<td>{cel(parseInt(d.Descuento)||0)}</td>
|
||||
<td>{cel(parseInt(d.Inscritos_Continuidad)||0)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{datosVisibles.length > 0 && (
|
||||
<tr className="total-row">
|
||||
<td className="col-name">TOTAL GENERAL</td>
|
||||
<td>—</td><td>—</td>
|
||||
<td>{totales.total}</td>
|
||||
<td>{totales.retirados}</td>
|
||||
<td>{totales.activos}</td>
|
||||
<td>{totales.meta}</td>
|
||||
<td><ProgressBar pct={totales.meta>0 ? totales.total/totales.meta*100 : 0} /></td>
|
||||
<td>{totales.mes}</td><td>{totales.pc}</td><td>{totales.refri}</td><td>{totales.cont}</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user