a + b, 0);
+
+ // width:100% → llena el contenedor desde el inicio (sin huecos a la derecha).
+ // minWidth:anchoTotal → si las columnas crecen más que el contenedor, aparece scroll.
+ // tableLayout:fixed + colgroup → encabezados y celdas alineados.
const tableProps = {
style: { tableLayout: "fixed", width: "100%", minWidth: anchoTotal },
};
diff --git a/frontend/src/lib/vistaActual.js b/frontend/src/lib/vistaActual.js
new file mode 100644
index 0000000..ca9f75e
--- /dev/null
+++ b/frontend/src/lib/vistaActual.js
@@ -0,0 +1,23 @@
+// src/lib/vistaActual.js
+// Registro de la "vista actual" (clave de caché del backend) + bus de eventos
+// para que la página visible se recargue tras el refresco manual.
+let _clave = null;
+
+export function setVistaActual(clave) {
+ _clave = clave || null;
+}
+
+export function getVistaActual() {
+ return _clave;
+}
+
+const EVENTO = "datos-refrescados";
+
+export function emitirRefresco() {
+ window.dispatchEvent(new Event(EVENTO));
+}
+
+export function onRefrescar(cb) {
+ window.addEventListener(EVENTO, cb);
+ return () => window.removeEventListener(EVENTO, cb);
+}
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 5733886..8fd46bf 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,10 +1,13 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
+import { AuthProvider } from "./lib/auth";
import "./styles.css";
ReactDOM.createRoot(document.getElementById("root")).render(
-
+
+
+
);
diff --git a/frontend/src/pages/Asesores.jsx b/frontend/src/pages/Asesores.jsx
new file mode 100644
index 0000000..d71ec72
--- /dev/null
+++ b/frontend/src/pages/Asesores.jsx
@@ -0,0 +1,105 @@
+// src/pages/Asesores.jsx
+import { useState, useEffect, useCallback } from "react";
+import { api } from "../lib/api";
+import { Loader, ErrorBox } from "../components/UI";
+
+const ESTADO_INFO = {
+ online: { txt: "En Línea", color: "#10b981", bg: "#d1fae5", fg: "#065f46" },
+ busy: { txt: "Ocupado", color: "#f59e0b", bg: "#fef9c3", fg: "#854d0e" },
+ offline:{ txt: "Fuera de Línea", color: "#94a3b8", bg: "#f1f5f9", fg: "#475569" },
+};
+
+export default function Asesores() {
+ const [agentes, setAgentes] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [cambiando, setCambiando] = useState(null);
+
+ const cargar = useCallback(() => {
+ setLoading(true); setError(null);
+ api.asesores()
+ .then((res)=>{ setAgentes(res.agentes||[]); setLoading(false); })
+ .catch((e)=>{ setError(e.message); setLoading(false); });
+ }, []);
+
+ useEffect(() => { cargar(); }, [cargar]);
+
+ async function toggle(ag) {
+ const online = ag.availability_status !== "online";
+ setCambiando(ag.id);
+ try {
+ await api.asesorEstado(ag.id, online);
+ setAgentes((prev)=>prev.map((a)=>a.id===ag.id ? {...a, availability_status: online?"online":"offline"} : a));
+ } catch (e) { /* noop */ }
+ setCambiando(null);
+ }
+
+ async function todos(online) {
+ setCambiando("all");
+ for (const ag of agentes) {
+ try { await api.asesorEstado(ag.id, online); } catch (e) {}
+ }
+ setAgentes((prev)=>prev.map((a)=>({...a, availability_status: online?"online":"offline"})));
+ setCambiando(null);
+ }
+
+ const total = agentes.length;
+ const enLinea = agentes.filter((a)=>a.availability_status==="online").length;
+ const ocupados = agentes.filter((a)=>a.availability_status==="busy").length;
+ const offline = total - enLinea - ocupados;
+
+ return (
+
+
👥 Asesores
+
+ {loading ?
:
+ error ?
:
+ <>
+
+
+
+
+
+
+
+
+
+
+ | ASESOR | EMAIL | ROL | ESTADO | ACCIÓN |
|---|
+
+ {agentes.map((ag)=>{
+ const est = ESTADO_INFO[ag.availability_status] || ESTADO_INFO.offline;
+ const isOnline = ag.availability_status==="online";
+ return (
+
+ | {ag.name || ag.available_name || "—"} |
+ {ag.email || "—"} |
+ {ag.role || "agent"} |
+
+ ● {est.txt}
+ |
+
+
+ |
+
+ );
+ })}
+
+
+
+ }
+
+
📋 Cobranza
+
+
+
+
+ {loading && !datos.length ?
:
+ error ?
:
+
+
+
+
+
+
+ {headers.map((h, i)=>{
+ const st = stickyMain(i, {esHeader:true, bg:"#334155"});
+ const fija = i < FIJAS_MAIN;
+ // Header siempre pegado arriba (top:0); columnas fijas además a la izquierda.
+ const stH = fija
+ ? {...st, top:0, zIndex:30}
+ : {position:"sticky", top:0, zIndex:22, backgroundColor:"#334155"};
+ return | {h} | ;
+ })}
+
+ {datos.map((fRaw, ri) => {
+ const f = filaLayout(fRaw); // layout normalizado (15 o 12 cols)
+ const nCols = headers.length - 1; // sin OPC
+ const sedeKey = String(f[0]).toUpperCase();
+ const abiertaSede = !esPrograma && !esAsesor && expandidas.has(sedeKey);
+
+ const renderCeldas = (fila, {indent=false, bg="#fff"}={}) => {
+ const av = !String(fila[LAY.ant[2]]||"").trim() || ["-","—"].includes(String(fila[LAY.ant[2]]).trim());
+ const mv = !String(fila[LAY.mes[2]]||"").trim() || ["-","—"].includes(String(fila[LAY.mes[2]]).trim());
+ const tv = !String(fila[LAY.tot[2]]||"").trim() || ["-","—"].includes(String(fila[LAY.tot[2]]).trim());
+ return fila.slice(0, nCols).map((v, ci) => {
+ const isPct = LAY.ant[2]===ci || LAY.mes[2]===ci || LAY.tot[2]===ci;
+ let val = v;
+ if ((ci===LAY.ant[0]||ci===LAY.ant[1]||ci===LAY.ant[2]) && av) val = "—";
+ if ((ci===LAY.mes[0]||ci===LAY.mes[1]||ci===LAY.mes[2]) && mv) val = "—";
+ if ((ci===LAY.tot[0]||ci===LAY.tot[1]||ci===LAY.tot[2]) && tv) val = "—";
+ const cartCls = cartClase(ci);
+ const clss = (ci===0?"col-name":"") + (cartCls?` ${cartCls}`:"");
+ const puedeExpandir = (!esPrograma && !esAsesor && ci===0 && !indent);
+ const abierta = puedeExpandir && expandidas.has(String(fila[0]).toUpperCase());
+ return (
+
+ {puedeExpandir && (
+ toggleSede(String(fila[0]))}
+ style={{cursor:"pointer",color:"#1e40af",fontWeight:800,
+ marginRight:8,userSelect:"none",fontSize:14,
+ display:"inline-block",width:12,textAlign:"center",
+ transition:"transform .15s ease"}}>
+ {abierta ? "−" : "+"}
+
+ )}
+ {isPct ? (val==="—" ? — : ) : fmtMoneda(val)}
+ |
+ );
+ });
+ };
+
+ return (
+
+
+ {renderCeldas(f)}
+ |
+
+ |
+
+ {abiertaSede && programasDeSede(fRaw[0]).map((fp, pi) => (
+
+ {renderCeldas(fp, {indent:true, bg:"#f8fafc"})}
+ |
+
+ |
+
+ ))}
+
+ );
+ })}
+ {datos.length > 0 && (() => {
+ // Fila TOTAL GENERAL — suma de los datos CRUDOS (IDX), render en layout LAY.
+ const suma = (idx)=> datos.reduce((s,f)=>s+toMonto(f[idx]),0);
+ const T = { cAnt:suma(IDX.ant[0]), oAnt:suma(IDX.ant[1]),
+ cMes:suma(IDX.mes[0]), oMes:suma(IDX.mes[1]),
+ cTot:suma(IDX.tot[0]), oTot:suma(IDX.tot[1]),
+ saldo:suma(IDX.saldo) };
+ const ratio = (cob,cta)=> cta>0 ? `${Math.round(cob/cta*100)}%` : "";
+ const money = (n)=> "S/ " + n.toLocaleString("es-PE",{maximumFractionDigits:0});
+ // valor por columna del layout LAY
+ const cell = (ci) => {
+ if (ci===0) return "TOTAL GENERAL";
+ if (ci===LAY.ant[0]) return money(T.cAnt);
+ if (ci===LAY.ant[1]) return money(T.oAnt);
+ if (ci===LAY.ant[2]) return ratio(T.oAnt,T.cAnt);
+ if (ci===LAY.mes[0]) return money(T.cMes);
+ if (ci===LAY.mes[1]) return money(T.oMes);
+ if (ci===LAY.mes[2]) return ratio(T.oMes,T.cMes);
+ if (ci===LAY.tot[0]) return money(T.cTot);
+ if (ci===LAY.tot[1]) return money(T.oTot);
+ if (ci===LAY.tot[2]) return ratio(T.oTot,T.cTot);
+ if (ci===LAY.saldo) return money(T.saldo);
+ return "";
+ };
+ return (
+
+ {Array.from({length: headers.length-1}).map((_,ci)=>{
+ const isPct = LAY.ant[2]===ci || LAY.mes[2]===ci || LAY.tot[2]===ci;
+ const val = cell(ci);
+ const fija = ci < FIJAS_MAIN;
+ let left = 0; for (let k=0;k
+ {isPct ? : val}
+
+ );
+ })}
+ | — |
+
+ );
+ })()}
+
+
+
+
}
+
+ {modal && (
+
setModal(null)} />
+ )}
+
+ {buscadorAbierto && (
+ setBuscadorAbierto(false)}
+ />
+ )}
+
+ {/* Encabezado (fijo, sin navegación) */}
+
+ {MESN[mIdx]} {ano}
+
+ {/* Días de la semana */}
+
+ {/* Celdas */}
+
+ {celdas.map((d,i)=>(
+
d && onSelect(fmt(d))}
+ style={{textAlign:"center",padding:"7px 0",fontSize:13,borderRadius:8,
+ cursor:d?"pointer":"default",fontWeight:mismaFecha(d)?800:500,
+ color:mismaFecha(d)?"#fff":(esHoy(d)?"#1e40af":"#334155"),
+ background:mismaFecha(d)?"#1e40af":(esHoy(d)?"#eff6ff":"transparent"),
+ border:esHoy(d)&&!mismaFecha(d)?"1px solid #bfdbfe":"1px solid transparent",
+ transition:"background .12s"}}
+ onMouseEnter={(e)=>{ if(d&&!mismaFecha(d)) e.currentTarget.style.background="#f1f5f9"; }}
+ onMouseLeave={(e)=>{ if(d&&!mismaFecha(d)) e.currentTarget.style.background=esHoy(d)?"#eff6ff":"transparent"; }}>
+ {d||""}
+
+ ))}
+
+ {/* Pie: limpiar filtro */}
+ {sel && sel!=="TODOS" && (
+
+
+
+ )}
+
+
✅
+
AL DÍA
+
Sin deuda pendiente
+
+ {cards.map(([titulo,color,cta,cob,saldoRetiro]) => {
+ const ratio = cta>0 ? (cob/cta*100) : 0;
+ const c = colorSemaforo(ratio);
+ const saldo = cta - cob;
+ return (
+
+
{titulo}
+
+
|
+
|
+
0?"#dc2626":"#10b981"} />
+ |
+ {cta>0 && (
+
+
+ % de Pago
+ {ratio.toFixed(0)}%
+
+
+
+
+ );
+ })}
+
+ {k}
+ {v}
+
+ );
+}
+
+function TarjetasResumen({ r, retiro }) {
+ const rt = retiro || { sAnt:0, sMes:0, sTot:0 };
+ const cards = [
+ ["⚠ MES ANTERIOR","#d97706",r.cAnt,r.obAnt, rt.sAnt],
+ ["📅 MES EN CURSO","#059669",r.cMes,r.obMes, rt.sMes],
+ ["💰 CARTERA TOTAL","#7c3aed",r.cTot,r.obTot, rt.sTot],
+ ];
+ return (
+
+ {cards.map(([titulo,color,cta,cob,saldoRetiro]) => {
+ const ratio = cta>0 ? (cob/cta*100) : 0;
+ const c = colorSemaforo(ratio);
+ const saldo = cta - cob;
+ return (
+
+
{titulo}
+
+
|
+
|
+
0?"#dc2626":"#10b981"} />
+ |
+ {cta>0 && (
+
+
+ % de Pago
+ {ratio.toFixed(0)}%
+
+
+
+
+ );
+ })}
+
+ setTexto(e.target.value)}
+ onKeyDown={(e)=>{ if(e.key==="Enter") setQuery(texto); }}
+ placeholder="Escribe nombre, programa o matrícula (ej: Aro) y presiona Enter"
+ style={{flex:1,padding:"10px 14px",border:"1px solid #cbd5e1",borderRadius:8,fontSize:14}}
+ />
+
+ {query && }
+
+
+ {!query ? (
+
+ Escribe un texto y presiona Enter para buscar.
+
+ ) : resultados.length === 0 ? (
+
+ Sin coincidencias para "{query}".
+
+ ) : (
+ <>
+
+ {resultados.length} alumno(s) encontrado(s)
+
+
+
+
+ {COLS.map((c,i)=>{
+ const fija = i < FIJAS;
+ const stH = fija ? stickyCol(i,{esHeader:true,bg:"#334155"})
+ : { position:"sticky", top:0, zIndex:12, backgroundColor:"#334155" };
+ return | {c} | ;
+ })}
+
+ {resultados.map((a,i)=>{
+ const deuda = a.saldo > 0.01;
+ const retira = porRetirar.has(String(a.matricula)); // POR RETIRAR
+ const bgFila = (i % 2 === 1) ? "#f8fafc" : "#fff";
+ const celdas = [
+ {v:a.programa, cls:"col-name", al:"left", texto:true},
+ {v:a.alumno, cls:"col-name", al:"left", texto:true},
+ {v:a.num_cuota},
+ {v:a.fch_venc},
+ {v:fmtMoneda("S/ "+a.cta_ant), cart:"cart-ant"},
+ {v:fmtMoneda("S/ "+a.cob_ant), cart:"cart-ant"},
+ {pct:pctStr(a.cob_ant,a.cta_ant), cart:"cart-ant"},
+ {v:fmtMoneda("S/ "+a.cta_cur), cart:"cart-mes"},
+ {v:fmtMoneda("S/ "+a.cob_cur), cart:"cart-mes"},
+ {pct:pctStr(a.cob_cur,a.cta_cur), cart:"cart-mes"},
+ {v:fmtMoneda("S/ "+a.cta_tot), cart:"cart-tot"},
+ {v:fmtMoneda("S/ "+a.cob_tot), cart:"cart-tot"},
+ {pct:pctStr(a.cob_tot,a.cta_tot), cart:"cart-tot"},
+ {v:fmtMoneda("S/ "+a.saldo), saldo:true},
+ ];
+ return (
+
+ {celdas.map((c,j)=>(
+ |
+ {c.pct!==undefined ? (c.pct ? : "—") : c.v}
+ |
+ ))}
+
+
+ |
+
+ );
+ })}
+
+
+
Sin datos.
:
+ <>
+
+
+
+ {/* Etiquetas de conteo de alumnos */}
+
+ {/* Grupo 1: conteo general */}
+
+ 👥 Total: {conteo.total}
+
+
+ ✅ Pagaron: {conteo.pagaron}
+
+
+ ⏳ Por pagar: {conteo.deben}
+
+
+ {/* Divisor */}
+
+
+ {/* Grupo 2: POR RETIRAR */}
+
+ 🚫 Por retirar: {retiro.cant}
+
+
+ 💸 Saldo: S/ {retiro.saldo.toLocaleString("es-PE",{maximumFractionDigits:0})}
+
+
+ {/* Checkbox alineado a la derecha */}
+
+
+
+
+
+ {COLS.map((c,i)=>{
+ const fija = i < FIJAS;
+ const stH = fija
+ ? stickyCol(i,{esHeader:true,bg:"#334155"})
+ : { position:"sticky", top:0, zIndex:12, backgroundColor:"#334155" };
+ return | {c} | ;
+ })}
+
+ {filas.filter((f)=>String(f[0]).toUpperCase()!=="TOTAL")
+ .filter((f)=> !soloRetirar || porRetirar.has(String(f[0])))
+ .map((f, i) => {
+ const saldo = toMonto(f[13]);
+ const deuda = saldo > 0.01;
+ // Regla "-": si %ANT vacío → CTA/COB ANT a "—" (igual MES y TOT)
+ const antVacio = !String(f[6]||"").trim() || ["-","—"].includes(String(f[6]).trim());
+ const mesVacio = !String(f[9]||"").trim() || ["-","—"].includes(String(f[9]).trim());
+ const totVacio = !String(f[12]||"").trim() || ["-","—"].includes(String(f[12]).trim());
+ const programa = f[14] || "-"; // programa del alumno (extra del backend)
+ const retira = porRetirar.has(String(f[0])); // alumno POR RETIRAR
+ return (
+
+ {f.slice(0, 14).map((v, j) => {
+ // Columna 0: mostrar PROGRAMA en vez de la matrícula
+ let val = (j===0) ? programa : v;
+ if ((j===4||j===5||j===6) && antVacio) val = "—";
+ if ((j===7||j===8||j===9) && mesVacio) val = "—";
+ if ((j===10||j===11||j===12) && totVacio) val = "—";
+ const isPct = [6,9,12].includes(j);
+ const isMonto = String(val).includes("S/");
+ let cart = "";
+ if ([4,5,6].includes(j)) cart = "cart-ant";
+ else if ([7,8,9].includes(j)) cart = "cart-mes";
+ else if ([10,11,12].includes(j)) cart = "cart-tot";
+ const clss = (((j===0||j===1)?"col-name":"") + (cart?` ${cart}`:"")).trim();
+ const esTexto = (j===0||j===1);
+ const bgFila = (i % 2 === 1) ? "#f8fafc" : "#fff"; // par/impar (i base 0)
+ return (
+ |
+ {isPct ? (val==="—"?—:) : fmtMoneda(val)}
+ |
+ );
+ })}
+ {/* Botón INFO por alumno (estado + observaciones) */}
+
+
+ |
+
+ );
+ })}
+
+
+ {(() => {
+ // TOTAL GENERAL del modal — solo alumnos visibles (respeta sede y filtro POR RETIRAR)
+ const alumnos = filas.filter((f)=>String(f[0]).toUpperCase()!=="TOTAL")
+ .filter((f)=> !soloRetirar || porRetirar.has(String(f[0])));
+ if (alumnos.length===0) return null;
+ const sum = (j)=>alumnos.reduce((s,f)=>s+toMonto(f[j]),0);
+ const t = {4:sum(4),5:sum(5),7:sum(7),8:sum(8),10:sum(10),11:sum(11),13:sum(13)};
+ const r = (cob,cta)=>cta>0?`${Math.round(cob/cta*100)}%`:"";
+ const celda = (j)=>{
+ if (j===0) return "TOTAL GENERAL";
+ if (j===1||j===2||j===3) return "";
+ if (j===6) return r(t[5],t[4]);
+ if (j===9) return r(t[8],t[7]);
+ if (j===12) return r(t[11],t[10]);
+ if (t[j]!==undefined) return "S/ "+t[j].toLocaleString("es-PE",{maximumFractionDigits:0});
+ return "";
+ };
+ return (
+
+ {Array.from({length:14}).map((_,j)=>{
+ const isPct=[6,9,12].includes(j);
+ const val=celda(j);
+ const fija = j < FIJAS;
+ let left = 0; for (let k=0;k
+ {isPct?:val}
+
+ );
+ })}
+ |
+
+ );
+ })()}
+
+
+
+
{alumno.alumno}
+
+ Matrícula: {alumno.matricula} · {alumno.programa}
+
+
+
+
+
+
+ {/* Observaciones */}
+
+
+
+ setNuevaObs(e.target.value)}
+ onKeyDown={(e)=>{ if(e.key==="Enter") agregarObs(); }}
+ placeholder="Escribe una observación…"
+ style={{flex:1,padding:"8px 10px",fontSize:13,borderRadius:8,border:"1px solid #cbd5e1"}} />
+
+
+ {/* Lista de observaciones agregadas (local) */}
+
+ {observaciones.length===0 ? (
+
Sin observaciones.
+ ) : observaciones.map((o,i)=>(
+
+
+
{o.texto}
+
{o.fecha}
+
+
+
+ ))}
+
+
+
+
+
+
+ {/* Mensaje de confirmación (se mantiene visible) */}
+ {guardado && (
+
+ ✅ Guardado correctamente.
+
+ )}
+
+ );
+}
diff --git a/frontend/src/pages/Comisiones.jsx b/frontend/src/pages/Comisiones.jsx
new file mode 100644
index 0000000..e519e99
--- /dev/null
+++ b/frontend/src/pages/Comisiones.jsx
@@ -0,0 +1,1004 @@
+// src/pages/Comisiones.jsx
+import { useState, useEffect, useMemo } from "react";
+import { api } from "../lib/api";
+import { Loader, ErrorBox, Filters, Select } from "../components/UI";
+import Modal from "../components/Modal";
+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 = ["VENDEDOR","INSCRITOS PAGADOS MES EN CURSO","MONTO PAGADO MES EN CURSO","INSCRITOS PAGADOS MES PASADO","MONTO PAGADO MES PASADO","AVANCE TOTAL","OPCIONES"];
+// Mostaza transparente: resalta filas de alumnos con edición (override en Supabase)
+const BG_EDITADO = "rgba(217,160,28,0.14)";
+
+// Filtro del popup → tipo de lista que ya maneja ventasDetalle
+const OPCIONES_POPUP = [
+ { value: "Venta P.C", label: "INSCRITOS PAGADOS MES EN CURSO" },
+ { value: "Venta Pendientes", label: "INSCRITOS PAGADOS MES PASADO" },
+];
+
+function toNum(v){ const n=parseFloat(String(v).replace("S/","").replace(/,/g,"").trim()); return isNaN(n)?0:n; }
+// Formatea cualquier monto a "S/ 1,234" (sin decimales)
+function fmt(v){ return "S/ " + toNum(v).toLocaleString("es-PE",{maximumFractionDigits:0}); }
+// True si la fecha de matrícula (dd/mm/yyyy) es >= 01/01/2025
+function fechaMatDesde2025(fch){
+ const s = String(fch || "").trim();
+ const m = s.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})/);
+ if (!m) return false; // sin fecha válida → excluir
+ const d = new Date(+m[3], +m[2]-1, +m[1]);
+ return d >= new Date(2025, 0, 1);
+}
+
+export default function Comisiones() {
+ 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 [filas, setFilas] = useState([]);
+ const [manualesAno, setManualesAno] = useState([]); // todos los del año (cache)
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [modal, setModal] = useState(null); // { vendedor, manual? }
+ const [modalEdit, setModalEdit] = useState(null); // { vendedor }
+ const [modalEditManual, setModalEditManual] = useState(null); // { nombre }
+ const [modalAdd, setModalAdd] = useState(false);
+ const [modalBuscar, setModalBuscar] = useState(false);
+ const [modalConfig, setModalConfig] = useState(false);
+ const cols = useColumnasAjustables([200, 160, 150, 160, 150, 130, 110]);
+
+ // Carga TODOS los manuales del año (una sola vez por año) → cambio de mes instantáneo
+ function cargarManuales() {
+ api.vendedoresManualesListar(ano, 0)
+ .then((res) => setManualesAno(res.vendedores || []))
+ .catch(() => setManualesAno([]));
+ }
+
+ // Manuales del mes actual: filtrado en memoria (instantáneo, sin esperar red)
+ const manuales = useMemo(
+ () => manualesAno.filter((m) => Number(m.mes) === Number(mes)),
+ [manualesAno, mes]
+ );
+
+ // Tabla de ventas (depende del mes, sede y programa)
+ function cargarTabla() {
+ setLoading(true); setError(null);
+ api.ventas(ano, mes, sede, programa)
+ .then((res) => { setFilas(res.filas || []); setLoading(false); })
+ .catch((e) => { setError(e.message); setLoading(false); });
+ }
+
+ useEffect(() => {
+ let activo = true;
+ setLoading(true); setError(null);
+ api.ventas(ano, mes, sede, programa)
+ .then((res) => { if (activo) { setFilas(res.filas || []); setLoading(false); } })
+ .catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
+ return () => { activo = false; };
+ }, [ano, mes, sede, programa]);
+
+ // Cargar manuales del año cuando cambia el año (o al inicio)
+ useEffect(() => { cargarManuales(); }, [ano]);
+
+ const total = useMemo(() => filas.find((f) => f[0] === "TOTAL GENERAL"), [filas]);
+ const datos = useMemo(() => filas.filter((f) => f[0] !== "TOTAL GENERAL"), [filas]);
+
+ // Agrupar vendedores manuales por nombre (cada nombre = 1 fila, suma de montos)
+ const manualesAgrupados = useMemo(() => {
+ const map = {};
+ manuales.forEach((m) => {
+ if (!map[m.nombre]) map[m.nombre] = { nombre: m.nombre, totalMonto: 0, filas: [] };
+ map[m.nombre].totalMonto += toNum(m.monto);
+ map[m.nombre].filas.push(m);
+ });
+ return Object.values(map);
+ }, [manuales]);
+
+ // Total general de AVANCE TOTAL = ventas + montos manuales
+ // (los manuales solo cuentan cuando NO hay filtro de sede/programa)
+ const totalAvance = useMemo(() => {
+ let s = total ? toNum(total[7]) : 0;
+ if (sede==="TODOS" && programa==="TODOS") manuales.forEach((m) => { s += toNum(m.monto); });
+ return s;
+ }, [total, manuales, sede, programa]);
+
+ const C = { textAlign: "center" }; // todas las columnas centradas
+
+ return (
+
+
🧮 Comisiones
+
+
+
+
+ {loading ?
:
+ error ?
:
+
+
+
+ {COLS.map((c, i) => | {c} | )}
+
+ {datos.map((f, i) => (
+
+ | {f[0]} |
+ {f[3]} | {fmt(f[4])} |
+ {f[5]} | {fmt(f[6])} |
+ {fmt(f[7])} |
+
+
+
+ |
+
+ ))}
+
+ {/* Asesores manuales: solo cuando NO hay filtro de sede/programa */}
+ {sede==="TODOS" && programa==="TODOS" && manualesAgrupados.map((g) => (
+
+ | {g.nombre} |
+ — | — |
+ — | — |
+ {fmt(g.totalMonto)} |
+
+
+
+ |
+
+ ))}
+
+ {total && (
+
+ | TOTAL GENERAL |
+ {total[3]} | {fmt(total[4])} |
+ {total[5]} | {fmt(total[6])} |
+ {fmt(totalAvance)} | — |
+
+ )}
+
+
+
}
+
+ {modal && (
+
setModal(null)}
+ onEliminar={() => { setModal(null); cargarManuales(); }} />
+ )}
+
+ {modalEdit && (
+ setModalEdit(null)} onGuardado={cargarTabla} />
+ )}
+
+ {modalEditManual && (
+ m.nombre===modalEditManual.nombre)}
+ onClose={() => setModalEditManual(null)}
+ onCambio={cargarManuales} />
+ )}
+
+ {modalConfig && (
+ setModalConfig(false)} onGuardado={cargarTabla} />
+ )}
+
+ {modalBuscar && (
+ setModalBuscar(false)} onGuardado={cargarTabla} />
+ )}
+
+ {modalAdd && (
+ setModalAdd(false)}
+ onGuardado={() => { setModalAdd(false); cargarManuales(); }} />
+ )}
+
+
+
+ {loading ? :
+ filas.length === 0 ? Sin registros.
:
+
+
+
+
+
+ | ALUMNO |
+ PROGRAMA |
+ {CAMPOS.map((c,ci)=>{c.label} | )}
+ ACCIÓN |
+
+
+
+ {filas.map((f, i) => {
+ const mat = String(f[15]);
+ return (
+
+ | {f[1]} |
+ {f[8]} |
+ {CAMPOS.map((c) => (
+
+ cambiar(mat, c.idx, v)} />
+ |
+ ))}
+
+
+ |
+
+ );
+ })}
+
+
+
{msg.txt}
+ )}
+
+
+
+
+
+ {confirmar && (
+ setConfirmar(null)}
+ onConfirmar={async () => { await restaurar(confirmar); setConfirmar(null); }}
+ />
+ )}
+
+ );
+}
+
+function ModalEditarManual({ nombre, ano, mes, filasActuales, onClose, onCambio }) {
+ // Todas las filas son locales hasta Guardar (se manda todo en lote)
+ const [rows, setRows] = useState([]);
+ const [guardando, setGuardando] = useState(false);
+ const [msg, setMsg] = useState(null);
+
+ useEffect(() => {
+ const inicial = (filasActuales || []).map((r) => ({
+ descripcion: r.descripcion || "", fch_emision: r.fch_emision || "",
+ monto: String(toNum(r.monto)),
+ }));
+ // Siempre dejar al menos una fila para escribir
+ setRows(inicial.length ? inicial : [{ descripcion:"", fch_emision:"", monto:"" }]);
+ }, [filasActuales]);
+
+ function cambiarRow(i, campo, valor) {
+ setRows((prev) => prev.map((r, idx) => idx === i ? { ...r, [campo]: valor } : r));
+ }
+ function quitarFila(i) {
+ setRows((prev) => prev.filter((_, idx) => idx !== i));
+ }
+ function agregarFila() {
+ setRows((prev) => [...prev, { descripcion:"", fch_emision:"", monto:"" }]);
+ }
+
+ async function guardar() {
+ setGuardando(true); setMsg(null);
+ try {
+ // Solo filas con algún dato
+ const filas = rows
+ .filter((r) => r.descripcion.trim() || r.fch_emision || toNum(r.monto) > 0)
+ .map((r) => ({ descripcion: r.descripcion.trim(), fch_emision: r.fch_emision, monto: toNum(r.monto) }));
+ // Una sola llamada: reemplaza todo (si filas vacío → elimina el vendedor)
+ await api.vendedoresManualesLote({ nombre, ano, mes, filas });
+ onCambio();
+ onClose(); // cerrar tras guardar
+ } catch (e) { setMsg({ ok:false, txt:"Error: " + e.message }); setGuardando(false); }
+ }
+
+ const inp = { width:"100%", padding:"6px 8px", border:"1px solid #cbd5e1", borderRadius:6, fontSize:12, textAlign:"center", boxSizing:"border-box" };
+ const ce = { textAlign:"center" };
+
+ return (
+
+
+
+
+
+ {msg && (
+ {msg.txt}
+ )}
+
+
+
+
+
+ );
+}
+
+function ModalConfig({ ano, mes, onClose, onGuardado }) {
+ const TIPOS = ["TEAC", "TERC", "SEMINARIOS", "OTROS"];
+ const [tc, setTc] = useState(""); // IMP_TC único del mes
+ const [filas, setFilas] = useState([]); // META y COMISIÓN por tipo
+ const [loading, setLoading] = useState(true);
+ const [guardando, setGuardando] = useState(false);
+ const [msg, setMsg] = useState(null);
+
+ useEffect(() => {
+ setLoading(true);
+ api.comisionesConfig(ano, mes)
+ .then((res) => {
+ const guardadas = res.config || [];
+ // TC: tomar el primero que tenga valor (es único por mes)
+ const tcGuardado = guardadas.find((x) => +x.imp_tc > 0);
+ setTc(tcGuardado ? String(tcGuardado.imp_tc) : "");
+ const arr = TIPOS.map((t) => {
+ const g = guardadas.find((x) => x.tipo_programa === t) || {};
+ return { tipo_programa: t, meta: g.meta ?? "", comision: g.comision ?? "" };
+ });
+ setFilas(arr); setLoading(false);
+ })
+ .catch(() => { setTc(""); setFilas(TIPOS.map((t)=>({tipo_programa:t,meta:"",comision:""}))); setLoading(false); });
+ }, [ano, mes]);
+
+ function cambiar(i, campo, val) {
+ setFilas((prev) => prev.map((f, idx) => idx === i ? { ...f, [campo]: val } : f));
+ }
+
+ async function guardar() {
+ setGuardando(true); setMsg(null);
+ try {
+ // El mismo TC del mes se guarda en todas las filas (es único por mes)
+ const payload = filas.map((f) => ({
+ tipo_programa: f.tipo_programa,
+ imp_tc: toNum(tc), meta: toNum(f.meta), comision: toNum(f.comision),
+ }));
+ await api.comisionesConfigGuardar({ ano, mes, filas: payload });
+ if (onGuardado) onGuardado(); // recarga la tabla principal
+ onClose();
+ } catch (e) { setMsg({ ok:false, txt:"Error: " + e.message }); setGuardando(false); }
+ }
+
+ const inp = { width:"100%", padding:"7px 9px", border:"1px solid #cbd5e1", borderRadius:6, fontSize:13, textAlign:"center", boxSizing:"border-box" };
+ const MESES_N = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];
+
+ return (
+
+
+ Configuración para {MESES_N[mes-1]} {ano}.
+
+ {loading ? : <>
+ {/* IMP_TC único del mes */}
+
+
+ setTc(e.target.value)}
+ style={{...inp,maxWidth:160}} />
+ Se usará para convertir dólares este mes. Si lo dejas vacío, usa el TC de la base.
+
+
+ {/* META y COMISIÓN por tipo de programa */}
+
+ }
+ {msg && (
+ {msg.txt}
+ )}
+
+
+
+
+
+ );
+}
+
+function ModalBuscar({ ano, mes, onClose, onGuardado }) {
+ const [todos, setTodos] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [q, setQ] = useState(""); // lo que se escribe
+ const [qAplicado, setQAplicado] = useState(""); // lo que se busca (con debounce)
+ const [modo, setModo] = useState("VER"); // VER | EDITAR
+ const [edits, setEdits] = useState({}); // { num_matricula: { idx: valor } }
+ const [guardando, setGuardando] = useState(false);
+ const [msg, setMsg] = useState(null);
+ const [confirmar, setConfirmar] = useState(null); // matrícula a restaurar
+
+ function cargar() {
+ setLoading(true);
+ api.comisionesDetalleTodos(ano, mes)
+ .then((res) => { setTodos(res.filas || []); setLoading(false); })
+ .catch(() => { setTodos([]); setLoading(false); });
+ }
+ useEffect(() => { cargar(); }, [ano, mes]);
+
+ async function restaurar(mat) {
+ try {
+ await api.comisionesOverrideRestaurar(mat);
+ setEdits((p) => { const c = {...p}; delete c[mat]; return c; });
+ cargar();
+ if (onGuardado) onGuardado(); // recarga la tabla principal
+ setMsg({ ok:true, txt:"✅ Alumno restaurado a sus valores originales." });
+ } catch (e) { setMsg({ ok:false, txt:"No se pudo restaurar: " + e.message }); }
+ }
+
+ // Debounce: aplica la búsqueda 250ms después de dejar de escribir (evita lag)
+ useEffect(() => {
+ const t = setTimeout(() => setQAplicado(q.trim().toLowerCase()), 250);
+ return () => clearTimeout(t);
+ }, [q]);
+
+ // Filtrado en memoria, limitado a 100 resultados para no congelar el render
+ const resultados = useMemo(() => {
+ if (!qAplicado) return [];
+ const out = [];
+ for (let i = 0; i < todos.length && out.length < 100; i++) {
+ const f = todos[i];
+ if (String(f[1]).toLowerCase().includes(qAplicado) ||
+ String(f[8]).toLowerCase().includes(qAplicado) ||
+ String(f[0]).toLowerCase().includes(qAplicado)) {
+ out.push(f);
+ }
+ }
+ return out;
+ }, [qAplicado, todos]);
+
+ const HEADERS = ["VENDEDOR","ALUMNO","PROGRAMA","F. MATRÍCULA","INVERSIÓN NETA","SALDO MATRÍCULA","SALDO 1° CUOTA","FECHA INICIO","FECHA CANCELACIÓN 1","PROMEDIO CUOTA","DÍAS ANTICIPACIÓN","VALOR CUOTA ADICIONAL","SEDE"];
+ const ORDEN = [0, 1, 8, 2, 7, 10, 11, 9, 3, 5, 12, 13, 14];
+ const COL_MONTO = new Set([4, 5, 6, 9, 11]);
+ // Campos editables (mismos que el Editar normal): idx de fila → tipo
+ const EDITABLES = { 2:"fecha", 7:"dinero", 10:"dinero", 11:"dinero", 9:"fecha", 3:"fecha", 5:"dinero", 12:"numero", 13:"dinero", 14:"texto" };
+
+ // Anchos iniciales por columna (VENDEDOR/ALUMNO/PROGRAMA más anchas); +ACCIÓN en modo EDITAR
+ const anchosBuscar = [180, 220, 240, ...Array(HEADERS.length-3).fill(130), ...(modo==="EDITAR" ? [80] : [])];
+ const colsBuscar = useColumnasAjustables(anchosBuscar);
+
+ function setEdit(mat, idx, val) {
+ setEdits((p) => ({ ...p, [mat]: { ...(p[mat]||{}), [idx]: val } }));
+ }
+
+ async function guardar() {
+ setGuardando(true); setMsg(null);
+ try {
+ const registros = Object.entries(edits).map(([mat, campos]) => {
+ const r = { num_matricula: mat };
+ Object.entries(campos).forEach(([idx, val]) => {
+ const map = {2:"fch_matricula",7:"inversion_neta",10:"saldo_matricula",11:"saldo_cuota1",9:"fecha_inicio",3:"fecha_cancelacion1",5:"promedio_cuota",12:"dias_anticipacion",13:"valor_cuota_adicional",14:"tipo_programa"};
+ // Campo borrado a propósito → marcador "__VACIO__"
+ if (map[idx]) r[map[idx]] = (String(val).trim() === "") ? "__VACIO__" : val;
+ });
+ return r;
+ });
+ await api.comisionesOverrideGuardar(registros);
+ setEdits({});
+ if (onGuardado) onGuardado();
+ setMsg({ ok:true, txt:"✅ Cambios guardados." });
+ setGuardando(false);
+ } catch (e) { setMsg({ ok:false, txt:"Error: " + e.message }); setGuardando(false); }
+ }
+
+ return (
+
+
+
setQ(e.target.value)}
+ placeholder="Escribe nombre de alumno, programa o vendedor..."
+ style={{flex:1,padding:"11px 14px",border:"1px solid #cbd5e1",borderRadius:10,fontSize:14,boxSizing:"border-box"}} />
+ {/* Switch VER / EDITAR */}
+
+ {["VER","EDITAR"].map((m) => (
+
+ ))}
+
+
Escribe para buscar.
:
+ resultados.length === 0 ? Sin coincidencias.
:
+
+
+ {resultados.length}{resultados.length===100?"+":""} resultado(s) {modo==="EDITAR" && "— modo edición"}
+
+
+
+
+ {HEADERS.map((h,hi)=>| {h} | )}
+ {modo==="EDITAR" && ACCIÓN | }
+
+
+ {resultados.map((f, i) => {
+ const mat = f[15];
+ return (
+
+ {ORDEN.map((idx, pos) => {
+ const esTexto = pos===0||pos===1||pos===2;
+ const editable = modo==="EDITAR" && EDITABLES[idx] && idx!==0 && idx!==1 && idx!==8;
+ const valActual = (edits[mat] && edits[mat][idx] !== undefined) ? edits[mat][idx] : (f[idx] ?? "");
+ return (
+ |
+ {editable
+ ? setEdit(mat, idx, v)} />
+ : (COL_MONTO.has(pos) ? fmt(f[idx]) : (f[idx] ?? ""))}
+ |
+ );
+ })}
+ {modo==="EDITAR" && (
+
+
+ |
+ )}
+
+ );})}
+
+
+
{msg.txt}
+ )}
+ {modo==="EDITAR" && (
+
+
+
+ )}
+
+ {confirmar && (
+ setConfirmar(null)}
+ onConfirmar={async () => { await restaurar(confirmar); setConfirmar(null); }}
+ />
+ )}
+
+ );
+}
+
+function ModalAgregar({ ano, mes, onClose, onGuardado }) {
+ const [nombre, setNombre] = useState("");
+ const [descripcion, setDescripcion] = useState("");
+ const [fchEmision, setFchEmision] = useState("");
+ const [monto, setMonto] = useState("");
+ const [guardando, setGuardando] = useState(false);
+ const [msg, setMsg] = useState(null);
+
+ async function guardar() {
+ if (!nombre.trim()) { setMsg("El nombre es obligatorio."); return; }
+ setGuardando(true); setMsg(null);
+ try {
+ await api.vendedoresManualesCrear({
+ nombre: nombre.trim(), descripcion: descripcion.trim(),
+ fch_emision: fchEmision, monto: toNum(monto), ano, mes,
+ });
+ onGuardado();
+ } catch (e) {
+ setMsg("Error al guardar: " + e.message);
+ setGuardando(false);
+ }
+ }
+
+ const inp = { width:"100%", padding:"9px 12px", border:"1px solid #cbd5e1", borderRadius:8, fontSize:13, boxSizing:"border-box" };
+
+ return (
+
+
+
+
+ setNombre(e.target.value)} style={inp} placeholder="Nombre del vendedor" autoFocus />
+
+
+
+ setDescripcion(e.target.value)} style={inp} placeholder="Descripción" />
+
+
+
+ setFchEmision(e.target.value)} style={inp} />
+
+
+
+ setMonto(e.target.value)} style={inp} placeholder="0" />
+
+ {msg &&
{msg}
}
+
+
+
+
+
+
+
+ | VENDEDOR |
+ DESCRIPCIÓN |
+ FECHA EMISIÓN |
+ MONTO |
+
+
+ {filasM.map((r) => (
+
+ | {r.nombre} |
+ {r.descripcion || "—"} |
+ {r.fch_emision || "—"} |
+ {fmt(r.monto)} |
+
+ ))}
+
+ | TOTAL GENERAL |
+ | |
+ {fmt(totalM)} |
+
+
+
+
+
+
+
+ );
+ }
+
+ // Orden solicitado de columnas
+ const HEADERS = ["VENDEDOR","ALUMNO","PROGRAMA","F. MATRÍCULA","INVERSIÓN NETA","SALDO MATRÍCULA","SALDO 1° CUOTA","FECHA INICIO","FECHA CANCELACIÓN 1","PROMEDIO CUOTA","DÍAS ANTICIPACIÓN","VALOR CUOTA ADICIONAL","SEDE"];
+ const ORDEN = [0, 1, 8, 2, 7, 10, 11, 9, 3, 5, 12, 13, 14];
+ const COL_MONTO = new Set([4, 5, 6, 9, 11]);
+
+ // Anchos iniciales por columna (px) — el usuario los puede arrastrar
+ const ANCHOS_INI = [180, 240, 280, 110, 130, 130, 130, 110, 140, 120, 120, 150, 130];
+ const [anchos, setAnchos] = useState(ANCHOS_INI);
+
+ function iniciarResize(e, i) {
+ e.preventDefault();
+ const xInicial = e.clientX;
+ const anchoInicial = anchos[i];
+ function onMove(ev) {
+ const nuevo = Math.max(60, anchoInicial + (ev.clientX - xInicial));
+ setAnchos((prev) => { const c = [...prev]; c[i] = nuevo; return c; });
+ }
+ function onUp() {
+ document.removeEventListener("mousemove", onMove);
+ document.removeEventListener("mouseup", onUp);
+ }
+ document.addEventListener("mousemove", onMove);
+ document.addEventListener("mouseup", onUp);
+ }
+
+ const totalInv = useMemo(() => filas.reduce((s,f)=>s+toNum(f[7]),0), [filas]);
+
+ return (
+
+
+
+
+ {loading ? :
+ filas.length === 0 ? Sin registros para esta categoría.
:
+
+
a+b,0)}}>
+
+ {HEADERS.map((h, i) => )}
+
+
+
+ {HEADERS.map((h, i) => (
+ |
+ {h}
+ iniciarResize(e, i)}
+ className="col-resizer"
+ style={{position:"absolute", top:0, right:0, width:8, height:"100%",
+ cursor:"col-resize", userSelect:"none", zIndex:5}} />
+ |
+ ))}
+
+
+
+ {filas.map((f, i) => (
+
+ {ORDEN.map((idx, pos) => {
+ const esTexto = pos === 0 || pos === 1 || pos === 2;
+ const val = COL_MONTO.has(pos) ? fmt(f[idx]) : (f[idx] ?? "");
+ return (
+ |
+ {val}
+ |
+ );
+ })}
+
+ ))}
+
+ | TOTAL GENERAL ({filas.length}) |
+ | | |
+ {fmt(totalInv)} |
+ | | | | | | | |
+
+
+
+
+ {k}
+ {v}
+
+ );
+}
+
+// Popup pequeño de confirmación (reemplaza el confirm() feo del navegador)
+function ConfirmPopup({ mensaje, onConfirmar, onCancelar }) {
+ return (
+
+
e.stopPropagation()} style={{
+ background:"#fff", borderRadius:14, maxWidth:380, width:"100%",
+ boxShadow:"0 20px 60px rgba(0,0,0,0.3)", padding:24,
+ }}>
+
↺
+
{mensaje}
+
+
+
+
+
+
+
+
+
❄️
+
Escuela de Refrigeración
+
Dashboard — Inicia sesión
+
+
+
+
+
+
📊 Ocupabilidad
+
+
+
+
+ {loading ?
:
+ error ?
:
+ <>
+
+ {KPI_CARDS.map(([ico,label,val,sub]) => (
+
+
{ico}
+
{label}
+
{val}
+
{sub}
+
+ ))}
+
+
+
+
+
+ {COLS.map((c, i) => | {c} | )}
+
+ {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 (
+
+ | {prog} |
+ {d.fch_inicio || ""} |
+ {d.dias_para_inicio ?? ""} |
+ {cel(parseInt(d.Inscritos_Totales)||0)} |
+ {cel(parseInt(d.Retirados ?? d.Inscritos_Retirados)||0)} |
+ {cel(parseInt(d.Inscritos_Activos)||0)} |
+ {cel(parseInt(d.Meta_Curso)||0)} |
+ {esInicio ? "-" : } |
+ {cel(parseInt(d.Inscritos_Mes)||0)} |
+ {cel(parseInt(d.Inscritos_PC)||0)} |
+ {cel(parseInt(d.Descuento)||0)} |
+ {cel(parseInt(d.Inscritos_Continuidad)||0)} |
+
+ {esInicio ? "-" : (
+
+ )}
+ |
+
+ );
+ })}
+ {datosVisibles.length > 0 && (
+
+ | TOTAL GENERAL |
+ — | — |
+ {totales.total} |
+ {totales.retirados} |
+ {totales.activos} |
+ {totales.meta} |
+ 0 ? totales.total/totales.meta*100 : 0} /> |
+ {totales.mes} | {totales.pc} | {totales.refri} | {totales.cont} |
+ — |
+
+ )}
+
+
+
+ }
+
+ {modalCurso && (
+
setModalCurso(null)}
+ />
+ )}
+ Sin alumnos.
:
+ <>
+
+
+ 👥 Total: {alumnos.length} alumno{alumnos.length!==1?"s":""}
+
+ {["ALU","PRE","RET"].map((e)=> conteo[e] ? (
+
+ {e}: {conteo[e]}
+
+ ) : null)}
+
+
+
+
+ | ALUMNO |
+ ESTADO |
+ CURSO ANTERIOR (TEAC/TERC) |
+ ESTADO ANTERIOR |
+
+
+ {alumnos.map((a, i) => {
+ const c = colorEstado(a.estado);
+ const tieneAnt = a.curso_anterior && a.curso_anterior !== "-";
+ const cAnt = colorEstado(a.estado_anterior);
+ return (
+
+ | {a.alumno} |
+
+
+ {a.estado}
+
+ |
+
+ {a.curso_anterior || "-"}
+ |
+
+ {tieneAnt ? (
+
+ {a.estado_anterior}
+
+ ) : -}
+ |
+
+ );
+ })}
+
+
+
+
📈 Rentabilidad
+
+
+
+
+ {loading ?
:
+ error ?
:
+ <>
+ {kpis && (
+
+ {[["📚","Programas",kpis.programas,"este mes"],
+ ["🎓","En Curso",kpis.enCurso,"alumnos activos"],
+ ["💵","Venta Actual",kpis.ventaAct,"ingreso total"],
+ ["💸","Costo Actual",kpis.costoAct,"gasto total"],
+ ["📊","M.B. Actual",kpis.mbAct,"margen bruto"]].map(([ico,label,val,sub])=>(
+
+
{ico}
{label}
+
{val}
{sub}
+
+ ))}
+
+ )}
+
+
+
+
+ {COLS.filter((_,i)=>!ocultar(i)).map((c, vi)=>| {c} | )}
+
+ {datos.map((f, ri) => (
+
+ {f.slice(0,13).map((v,ci)=>{
+ if (ocultar(ci)) return null;
+ const isPct = ci===9||ci===12;
+ return (
+ | {v} |
+ );
+ })}
+
+
+
+ |
+
+ ))}
+ {total && (
+
+ {total.slice(0,13).map((v,ci)=>(
+ ocultar(ci) ? null :
+ | {v} |
+ ))}
+ — |
+
+ )}
+
+
+
+ }
+
+ {modalVer &&
setModalVer(null)} />}
+ {modalCostos && setModalCostos(null)} onGuardado={cargar} />}
+ Sin alumnos.
:
+
+
+ {COLS_DET.map((c)=>| {c} | )}
+
+ {filas.map((f,i)=>(
+
+ {f.map((v,j)=>(
+ | =5?"right":(j===1?"left":"center")}}>{v} |
+ ))}
+
+ ))}
+
+
+
Sin datos de costos.
:
+ <>
+
+
+
+
+ {msg && {msg.txt}
}
+
+
+
+
+ }
+
+ );
+}
+
+function Columna({ titulo, color, campos, valores, setVal, total }) {
+ return (
+
+
{titulo}
+ {campos.map(([k,label])=>(
+
+
+ setVal({...valores,[k]:+e.target.value})}
+ style={{width:"100%",padding:"7px 10px",border:"1px solid #cbd5e1",borderRadius:8,fontSize:13}} />
+
+ ))}
+
+ TOTAL: S/ {total.toLocaleString("es-PE",{maximumFractionDigits:0})}
+
+
+
⏳ Saldo Pendiente
+
+
+
+
+
+
+ {loading ?
:
+ error ?
:
+ <>
+
+
👥
Alumnos con Saldo
{filtrados.length}
+
⏳
Saldo {tipoCuota}
{fmt(totalSaldo)}
+
📋
Saldo Matrícula
{fmt(totalMat)}
+
+
+
+
+ {COLS.map((c)=>| {c} | )}
+
+ {filtrados.map((d,i)=>(
+
+ {KEYS.map((k,j)=>{
+ const isMonto = k.includes("SALDO")||k.includes("INV");
+ return (
+ |
+ {isMonto ? fmt(d[k]) : (d[k] ?? "")}
+ |
+ );
+ })}
+
+ ))}
+ {filtrados.length>0 && (
+
+ | TOTAL GENERAL ({filtrados.length}) |
+ {fmt(totalMat)} |
+ {fmt(totalSaldo)} |
+ — | — |
+
+ )}
+
+
+
+ }
+
+
🔐 Usuarios
+
+ {/* Crear nuevo usuario */}
+
+
+ {/* Lista de usuarios */}
+ {loading ?
:
+ error ?
:
+
+
+ | CORREO | NOMBRE | ROL | ACCIONES |
|---|
+
+ {usuarios.map((u) => (
+
+ | {u.email} |
+ {u.nombre || "—"} |
+
+
+ |
+
+
+ |
+
+ ))}
+ {usuarios.length === 0 && (
+ | Sin usuarios. |
+ )}
+
+
+
}
+
+
+ {children}
+
+ );
+}
+
+const inp = { padding:"8px 12px", border:"1px solid #cbd5e1", borderRadius:8, fontSize:13, minWidth:180 };
diff --git a/frontend/src/pages/Ventas.jsx b/frontend/src/pages/Ventas.jsx
new file mode 100644
index 0000000..108347c
--- /dev/null
+++ b/frontend/src/pages/Ventas.jsx
@@ -0,0 +1,272 @@
+// src/pages/Ventas.jsx
+import { useState, useEffect, useMemo } from "react";
+import { api } from "../lib/api";
+import { Loader, ErrorBox, Filters, Select } from "../components/UI";
+import Modal from "../components/Modal";
+import { useColumnasAjustables } from "../lib/useColumnasAjustables";
+import { setVistaActual, onRefrescar } from "../lib/vistaActual";
+
+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 = ["VENDEDOR","INSCRITOS","VENTA TOTAL","INSCRITOS P.C DEL MES","VENTA P.C DEL MES","INSCRITOS MES ANTERIOR","VENTA MES ANTERIOR","AVANCE P.C TOTAL","OPC."];
+const TIPOS = ["Venta Inscritos", "Venta P.C", "Venta Pendientes"];
+const HEADERS_DETALLE = ["VENDEDOR","ALUMNO","F. MATRÍCULA","F. CANCELACIÓN","TIPO","CUOTA PROM.","DESC. ESPECIAL","INV. NETA"];
+
+export default function Ventas() {
+ 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 [filas, setFilas] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [modal, setModal] = useState(null); // { vendedor }
+ const cols = useColumnasAjustables([200, 100, 130, 120, 130, 120, 130, 140, 100]);
+
+ useEffect(() => {
+ let activo = true;
+ setVistaActual(`ventas:${ano}|${mes}|${sede}|${programa}|False`);
+ const cargar = () => {
+ setLoading(true); setError(null);
+ api.ventas(ano, mes, sede, programa)
+ .then((res) => { if (activo) { setFilas(res.filas || []); setLoading(false); } })
+ .catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
+ };
+ cargar();
+ const off = onRefrescar(cargar);
+ return () => { activo = false; off(); };
+ }, [ano, mes, sede, programa]);
+
+ const total = useMemo(() => filas.find((f) => f[0] === "TOTAL GENERAL"), [filas]);
+ const datos = useMemo(() => filas.filter((f) => f[0] !== "TOTAL GENERAL"), [filas]);
+
+ const KPIS = total ? [
+ ["👤","Vendedores", datos.length, "activos este mes"],
+ ["🎓","Total Inscritos", total[1], "matriculados"],
+ ["💵","Venta Total", total[2], "inversión neta"],
+ ["✅","Venta P.C del Mes", total[4], "pagos completos"],
+ ["🚀","Avance P.C Total", total[7], "P.C + Pendientes"],
+ ] : [];
+
+ // Exportar saldos por cuota — Excel con formato (anchos, encabezado de color,
+ // fechas reales, montos numéricos en soles y fila TOTAL GENERAL).
+ async function exportarCuota(tipoCuota) {
+ const toNum = (v) => { const n = parseFloat(String(v).replace("S/","").replace(/,/g,"").trim()); return isNaN(n)?0:n; };
+ // Convierte "dd-mm-yyyy" o "dd/mm/yyyy" a Date; si no puede, devuelve el texto original
+ const toDate = (v) => {
+ if (!v) return "";
+ const s = String(v).trim().replace(/\//g,"-");
+ const p = s.split("-");
+ if (p.length === 3) {
+ let [d,m,y] = p;
+ if (y.length === 4) return new Date(+y, +m-1, +d);
+ }
+ return String(v);
+ };
+
+ let res;
+ try {
+ res = await api.saldoPendiente(tipoCuota);
+ } catch (e) {
+ alert("No se pudo obtener los datos de saldos: " + e.message);
+ return;
+ }
+ const datosS = res.datos || [];
+ const colSaldo = `SALDO ${tipoCuota.toUpperCase()}`;
+ const filtrados = datosS.filter((d) => toNum(d[colSaldo]) > 0.01);
+ if (filtrados.length === 0) { alert(`No hay saldos pendientes para ${tipoCuota}.`); return; }
+
+ 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"];
+ const COL_MONTO = ["SALDO MAT.", colSaldo, "INV. NETA"];
+ const COL_FECHA = ["F. INICIO","F. MATR.","VENCIMIENTO"];
+
+ const XLSX = await import("xlsx-js-style");
+
+ // Construir matriz de celdas (AOA) con tipos correctos
+ const headerStyle = {
+ font: { bold: true, color: { rgb: "FFFFFF" }, sz: 11 },
+ fill: { fgColor: { rgb: "1E40AF" } },
+ alignment: { horizontal: "center", vertical: "center" },
+ };
+ const moneyFmt = '"S/" #,##0';
+ const dateFmt = "dd/mm/yyyy";
+
+ const ws = {};
+ const range = { s: { r: 0, c: 0 }, e: { r: filtrados.length + 1, c: COLS.length - 1 } };
+
+ // Encabezado
+ COLS.forEach((h, c) => {
+ const ref = XLSX.utils.encode_cell({ r: 0, c });
+ ws[ref] = { v: h, t: "s", s: headerStyle };
+ });
+
+ // Filas de datos
+ filtrados.forEach((d, ri) => {
+ KEYS.forEach((k, c) => {
+ const ref = XLSX.utils.encode_cell({ r: ri + 1, c });
+ const col = COLS[c];
+ if (COL_MONTO.includes(col)) {
+ ws[ref] = { v: toNum(d[k]), t: "n", z: moneyFmt };
+ } else if (COL_FECHA.includes(col)) {
+ const dt = toDate(d[k]);
+ if (dt instanceof Date) ws[ref] = { v: dt, t: "d", z: dateFmt };
+ else ws[ref] = { v: dt, t: "s" };
+ } else {
+ ws[ref] = { v: d[k] ?? "", t: "s" };
+ }
+ });
+ });
+
+ // Fila TOTAL GENERAL: promedio en SALDO MAT. y SALDO CUOTA, suma en INV. NETA
+ const rTot = filtrados.length + 1;
+ const sum = (k) => filtrados.reduce((s,d)=>s+toNum(d[k]),0);
+ const prom = (k) => filtrados.length ? sum(k)/filtrados.length : 0;
+ const totalStyle = { font: { bold: true }, fill: { fgColor: { rgb: "EFF6FF" } } };
+ COLS.forEach((col, c) => {
+ const ref = XLSX.utils.encode_cell({ r: rTot, c });
+ if (c === 0) ws[ref] = { v: "TOTAL GENERAL", t: "s", s: totalStyle };
+ else if (col === "SALDO MAT.") ws[ref] = { v: prom("SALDO MAT."), t: "n", z: moneyFmt, s: totalStyle };
+ else if (col === colSaldo) ws[ref] = { v: prom(colSaldo), t: "n", z: moneyFmt, s: totalStyle };
+ else if (col === "INV. NETA") ws[ref] = { v: sum("INV. NETA"), t: "n", z: moneyFmt, s: totalStyle };
+ else ws[ref] = { v: "", t: "s", s: totalStyle };
+ });
+
+ ws["!ref"] = XLSX.utils.encode_range(range);
+ ws["!cols"] = [
+ { wch: 12 }, // MATRÍCULA
+ { wch: 22 }, // VENDEDOR
+ { wch: 28 }, // ALUMNO
+ { wch: 32 }, // PROGRAMA
+ { wch: 12 }, // F. INICIO
+ { wch: 12 }, // F. MATR.
+ { wch: 13 }, // SALDO MAT.
+ { wch: 15 }, // SALDO CUOTA
+ { wch: 13 }, // VENCIMIENTO
+ { wch: 13 }, // INV. NETA
+ ];
+
+ const wb = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(wb, ws, "Saldos");
+ const nombre = tipoCuota.replace("°","").replace(/\s/g,"_");
+ XLSX.writeFile(wb, `saldos_${nombre}.xlsx`);
+ }
+
+ return (
+
+
🛒 Ventas
+
+
+
+
+ {loading ?
:
+ error ?
:
+ <>
+
+ {KPIS.map(([ico,label,val,sub]) => (
+
+
{ico}
+
{label}
+
{val}
+
{sub}
+
+ ))}
+
+
+
+
+
+ {COLS.map((c, i) => | {c} | )}
+
+ {datos.map((f, i) => (
+
+ | {f[0]} |
+ {f[1]} | {f[2]} |
+ {f[3]} | {f[4]} |
+ {f[5]} | {f[6]} |
+ {f[7]} |
+
+
+ |
+
+ ))}
+ {total && (
+
+ | TOTAL GENERAL |
+ {total[1]} | {total[2]} |
+ {total[3]} | {total[4]} |
+ {total[5]} | {total[6]} |
+ {total[7]} | — |
+
+ )}
+
+
+
+ }
+
+ {modal && (
+
setModal(null)} />
+ )}
+
+
+
+ {loading ? :
+ filas.length === 0 ? Sin registros para esta categoría.
:
+
+
+
+ {HEADERS_DETALLE.map((h, i) => | {h} | )}
+
+ {filas.map((f, i) => (
+
+ {f.slice(0, HEADERS_DETALLE.length).map((v, j) => (
+ | {v} |
+ ))}
+
+ ))}
+
+
+