+ );
+}
diff --git a/frontend/frontend/src/pages/Cobranza.jsx b/frontend/frontend/src/pages/Cobranza.jsx
new file mode 100644
index 0000000..742498a
--- /dev/null
+++ b/frontend/frontend/src/pages/Cobranza.jsx
@@ -0,0 +1,660 @@
+// src/pages/Cobranza.jsx
+import { useState, useEffect, useMemo } from "react";
+import { api } from "../lib/api";
+import { Loader, ErrorBox, Filters, Select, colorSemaforo } 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 AGRUPACIONES = [{value:"SEDE",label:"Por Sede"},{value:"PROGRAMA",label:"Por Programa"},{value:"ASESOR",label:"Por Asesor"}];
+const SEDES = ["TODOS","LIMA","AREQUIPA","PIURA","TRUJILLO"];
+const FRECS = ["TODOS","DOM","SAB","NOC","MAN","VIR","TAR"];
+
+// Colores por cartera — diferenciados y legibles (sin azul, reservado para TOTAL)
+// ANTERIOR = ámbar suave | MES = verde menta | TOTAL = lila/violeta suave
+const BG_ANT = "#fef3c7", BG_MES = "#d1fae5", BG_TOT = "#ede9fe";
+// Versiones más oscuras para hover de cada cartera
+const HV_ANT = "#fde68a", HV_MES = "#a7f3d0", HV_TOT = "#ddd6fe";
+
+function toMonto(s){ const n = parseFloat(String(s).replace("S/","").replace(/,/g,"").trim()); return isNaN(n)?0:n; }
+function toPct(s){ const n = parseFloat(String(s).replace("%","").trim()); return isNaN(n)?0:n; }
+// Formato moneda SIN decimales (solo visualización)
+function fmtMoneda(s){
+ if (s == null) return "";
+ if (!String(s).includes("S/")) return s; // no es monto, devolver tal cual
+ const n = toMonto(s);
+ return "S/ " + n.toLocaleString("es-PE", { maximumFractionDigits: 0 });
+}
+
+function MiniBar({ valStr }) {
+ if (!valStr || !String(valStr).includes("%")) return —;
+ const pct = toPct(valStr);
+ const c = colorSemaforo(pct);
+ const w = Math.min(Math.max(pct,0),100);
+ return (
+
+ {pct.toFixed(0)}%
+
+
+
+
+ );
+}
+
+export default function Cobranza() {
+ const hoy = new Date();
+ const [ano, setAno] = useState(hoy.getFullYear());
+ const [mes, setMes] = useState(hoy.getMonth() + 1);
+ const [agrupacion, setAgrupacion] = useState("SEDE");
+ const [sectorista, setSectorista] = useState("TODOS");
+ const [sede, setSede] = useState("TODOS");
+ const [frec, setFrec] = useState("TODOS");
+ const [filas, setFilas] = useState([]);
+ const [sectoristas, setSectoristas] = useState(["TODOS"]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [modal, setModal] = useState(null);
+ const [sedeMap, setSedeMap] = useState({}); // programa -> sede (sede.json)
+ const [exportando, setExportando] = useState(false);
+ const [alumnos, setAlumnos] = useState([]); // todos los alumnos (1 sola consulta)
+ const [buscadorAbierto, setBuscadorAbierto] = useState(false);
+
+ const esPrograma = agrupacion === "PROGRAMA";
+ // índices según agrupación
+ const IDX = esPrograma
+ ? { saldo:13, ant:[4,5,6], mes:[7,8,9], tot:[10,11,12] }
+ : { saldo:10, ant:[1,2,3], mes:[4,5,6], tot:[7,8,9] };
+
+ useEffect(() => {
+ let activo = true;
+ setLoading(true); setError(null);
+ api.cobranza(ano, mes, sectorista, agrupacion)
+ .then((res) => {
+ if (!activo) return;
+ setFilas(res.filas || []);
+ setSectoristas(res.sectoristas || ["TODOS"]);
+ setLoading(false);
+ })
+ .catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
+ return () => { activo = false; };
+ }, [ano, mes, agrupacion, sectorista]);
+
+ // Cargar TODOS los alumnos una sola vez (para exportar y buscar) — 1 consulta cacheada
+ useEffect(() => {
+ let activo = true;
+ api.cobranzaDetalleTodos(ano, mes, sectorista)
+ .then((res) => { if (activo) setAlumnos(res.alumnos || []); })
+ .catch(() => { if (activo) setAlumnos([]); });
+ return () => { activo = false; };
+ }, [ano, mes, sectorista]);
+
+ // Cargar clasificación de sede (sede.json) para los programas visibles
+ useEffect(() => {
+ if (!esPrograma) return;
+ const nombres = filas
+ .filter((f) => String(f[0]).toUpperCase() !== "TOTAL GENERAL")
+ .map((f) => String(f[0]));
+ if (nombres.length === 0) return;
+ let activo = true;
+ api.clasificarSede(nombres)
+ .then((res) => { if (activo) setSedeMap(res.mapa || {}); })
+ .catch(() => { if (activo) setSedeMap({}); });
+ return () => { activo = false; };
+ }, [filas, esPrograma]);
+
+ // Filtro sede/frecuencia (solo PROGRAMA) en cliente — usa sede.json
+ const datos = useMemo(() => {
+ let arr = filas.filter((f) => String(f[0]).toUpperCase() !== "TOTAL GENERAL");
+ if (esPrograma) {
+ if (sede !== "TODOS") {
+ arr = arr.filter((f) => {
+ const s = (sedeMap[String(f[0])] || "LIMA").toUpperCase();
+ return s === sede.toUpperCase();
+ });
+ }
+ if (frec !== "TODOS") arr = arr.filter((f) => String(f[1]).toUpperCase() === frec);
+ }
+ return arr;
+ }, [filas, esPrograma, sede, frec, sedeMap]);
+
+ // KPIs: 3 tarjetas (recalculadas con datos filtrados)
+ const kpis = useMemo(() => {
+ let cAnt=0,obAnt=0,cMes=0,obMes=0,cTot=0,obTot=0;
+ datos.forEach((f) => {
+ cAnt += toMonto(f[IDX.ant[0]]); obAnt += toMonto(f[IDX.ant[1]]);
+ cMes += toMonto(f[IDX.mes[0]]); obMes += toMonto(f[IDX.mes[1]]);
+ cTot += toMonto(f[IDX.tot[0]]); obTot += toMonto(f[IDX.tot[1]]);
+ });
+ return { cAnt,obAnt,cMes,obMes,cTot,obTot, saldo: cTot-obTot };
+ }, [datos, IDX]);
+
+ const headers = esPrograma
+ ? ["PROGRAMA","FREC.","N° CUOTA","VENCIMIENTO","CTA X COB. MES ANT.","COB. MES ANT.","% ANT","CTA X COB EN CURSO","COB. EN CURSO","% MES","CTA X COB TOTAL","COB. TOTAL","% TOTAL","SALDO","OPC."]
+ : ["GRUPO","CTA X COB. MES ANT.","COB. MES ANT.","% ANT","CTA X COB EN CURSO","COB. EN CURSO","% MES","CTA X COB TOTAL","COB. TOTAL","% TOTAL","SALDO","OPC."];
+
+ // Anchos para columnas redimensionables (1ª columna más ancha, resto estándar)
+ const anchosCob = headers.map((h, i) => i === 0 ? (esPrograma ? 280 : 200) : (h === "FREC." || h.startsWith("%") || h === "OPC." ? 80 : 120));
+ const cols = useColumnasAjustables(anchosCob);
+
+ function cartClase(ci) {
+ if (IDX.ant.includes(ci)) return "cart-ant";
+ if (IDX.mes.includes(ci)) return "cart-mes";
+ if (IDX.tot.includes(ci)) return "cart-tot";
+ return "";
+ }
+
+ // Alumnos visibles según filtros activos (mismo dataset que Ver / Estado de Cuenta)
+ const alumnosFiltrados = useMemo(() => {
+ let arr = alumnos;
+ if (esPrograma) {
+ if (sede !== "TODOS") arr = arr.filter((a) => String(a.sede).toUpperCase() === sede.toUpperCase());
+ if (frec !== "TODOS") arr = arr.filter((a) => String(a.frecuencia).toUpperCase() === frec);
+ }
+ return arr;
+ }, [alumnos, esPrograma, sede, frec]);
+
+ function grupoDe(a) {
+ if (agrupacion === "SEDE") return a.sede;
+ if (agrupacion === "ASESOR") return ""; // el sectorista ya filtra; no hay sub-grupo por alumno
+ return a.programa; // PROGRAMA
+ }
+
+ // Exportar el DETALLE DE ALUMNOS (rápido: usa el dataset ya cargado, sin N consultas)
+ async function exportarDetalle() {
+ setExportando(true);
+ try {
+ const base = alumnosFiltrados;
+ if (base.length === 0) { alert("No hay alumnos para exportar con los filtros actuales."); return; }
+
+ const toDate = (v) => {
+ if (!v || v === "-") return "";
+ const s = String(v).trim().replace(/\//g,"-");
+ const p = s.split("-");
+ if (p.length === 3 && p[2].length === 4) return new Date(+p[2], +p[1]-1, +p[0]);
+ return String(v);
+ };
+ const pct = (cob, cta) => cta > 0 ? cob/cta : null;
+
+ const XLSX = await import("xlsx-js-style");
+ const COLS = ["GRUPO","MATRÍCULA","ALUMNO","N° CUOTA","F. VENC.","CTA ANT.","COB ANT.","% ANT","CTA MES","COB MES","% MES","CTA TOT","COB TOT","% TOT","SALDO"];
+
+ // Colores suaves por cartera (igual que el dashboard): ANT ámbar, MES verde, TOT lila
+ const CART = { ant:"FEF3C7", mes:"D1FAE5", tot:"EDE9FE" };
+ const cartFill = (c) => {
+ if ([5,6,7].includes(c)) return CART.ant;
+ if ([8,9,10].includes(c)) return CART.mes;
+ if ([11,12,13].includes(c)) return CART.tot;
+ return null;
+ };
+ const headerStyle = { font:{bold:true,color:{rgb:"FFFFFF"},sz:11}, fill:{fgColor:{rgb:"1E40AF"}}, alignment:{horizontal:"center",vertical:"center"} };
+ const moneyFmt = '"S/" #,##0';
+ const pctFmt = '0%';
+ const dateFmt = "dd/mm/yyyy";
+ const cellStyle = (c) => { const f = cartFill(c); return f ? { fill:{fgColor:{rgb:f}} } : undefined; };
+
+ const ws = {};
+ COLS.forEach((h,c)=>{ ws[XLSX.utils.encode_cell({r:0,c})] = {v:h,t:"s",s:headerStyle}; });
+
+ base.forEach((a, ri) => {
+ const r = ri + 1;
+ const vals = [
+ grupoDe(a), a.matricula, a.alumno, a.num_cuota, toDate(a.fch_venc),
+ a.cta_ant, a.cob_ant, pct(a.cob_ant,a.cta_ant),
+ a.cta_cur, a.cob_cur, pct(a.cob_cur,a.cta_cur),
+ a.cta_tot, a.cob_tot, pct(a.cob_tot,a.cta_tot),
+ a.saldo,
+ ];
+ vals.forEach((v, c) => {
+ const ref = XLSX.utils.encode_cell({r,c});
+ const st = cellStyle(c);
+ if ([5,6,8,9,11,12,14].includes(c)) ws[ref] = { v:Number(v)||0, t:"n", z:moneyFmt, ...(st?{s:st}:{}) };
+ else if ([7,10,13].includes(c)) ws[ref] = (v===null) ? { v:"-", t:"s", ...(st?{s:st}:{}) } : { v:Number(v), t:"n", z:pctFmt, ...(st?{s:st}:{}) };
+ else if (c===4 && v instanceof Date) ws[ref] = { v, t:"d", z:dateFmt };
+ else ws[ref] = { v: v ?? "", t:"s" };
+ });
+ });
+
+ // TOTAL GENERAL (suma de montos)
+ const rTot = base.length + 1;
+ const totalStyle = { font:{bold:true}, fill:{fgColor:{rgb:"EFF6FF"}} };
+ const sum = (k) => base.reduce((s,a)=>s+(Number(a[k])||0),0);
+ const totVals = { 5:sum("cta_ant"),6:sum("cob_ant"),8:sum("cta_cur"),9:sum("cob_cur"),11:sum("cta_tot"),12:sum("cob_tot"),14:sum("saldo") };
+ 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 (totVals[c]!==undefined) ws[ref] = {v:totVals[c],t:"n",z:moneyFmt,s:totalStyle};
+ else ws[ref] = {v:"",t:"s",s:totalStyle};
+ });
+
+ ws["!ref"] = XLSX.utils.encode_range({ s:{r:0,c:0}, e:{r:rTot,c:COLS.length-1} });
+ ws["!cols"] = [{wch:26},{wch:12},{wch:28},{wch:9},{wch:12},{wch:12},{wch:12},{wch:8},{wch:12},{wch:12},{wch:8},{wch:12},{wch:12},{wch:8},{wch:13}];
+
+ const wb = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(wb, ws, "Cobranza");
+ const sufijo = agrupacion + (esPrograma && sede!=="TODOS" ? `_${sede}` : "") + (sectorista!=="TODOS" ? `_${sectorista}` : "");
+ XLSX.writeFile(wb, `cobranza_${sufijo}_${ano}_${mes}.xlsx`);
+ } finally {
+ setExportando(false);
+ }
+ }
+
+ return (
+
+
📋 Cobranza
+
+
+
+
+ {loading ? :
+ error ? :
+ <>
+
+
+
+
+
+
{headers.map((h, i)=>
{h}
)}
+
+ {datos.map((f, ri) => {
+ // En la tabla principal SIEMPRE son agrupaciones (Sede/Programa/Asesor),
+ // nunca alumnos individuales → NO aplicar rojo por deuda aquí.
+ // Regla "-": si % del grupo está vacío, CTA y COB del grupo → "-"
+ const antVacio = !String(f[IDX.ant[2]]||"").trim() || ["-","—"].includes(String(f[IDX.ant[2]]).trim());
+ const mesVacio = !String(f[IDX.mes[2]]||"").trim() || ["-","—"].includes(String(f[IDX.mes[2]]).trim());
+ const totVacio = !String(f[IDX.tot[2]]||"").trim() || ["-","—"].includes(String(f[IDX.tot[2]]).trim());
+ return (
+
+ {f.slice(0, headers.length-1).map((v, ci) => {
+ const isPct = IDX.ant[2]===ci || IDX.mes[2]===ci || IDX.tot[2]===ci;
+ let val = v;
+ if ((ci===IDX.ant[0]||ci===IDX.ant[1]||ci===IDX.ant[2]) && antVacio) val = "—";
+ if ((ci===IDX.mes[0]||ci===IDX.mes[1]||ci===IDX.mes[2]) && mesVacio) val = "—";
+ if ((ci===IDX.tot[0]||ci===IDX.tot[1]||ci===IDX.tot[2]) && totVacio) val = "—";
+ const cartCls = cartClase(ci);
+ const clss = (ci===0?"col-name":"") + (cartCls?` ${cartCls}`:"");
+ return (
+
+ {isPct ? (val==="—" ? — : ) : fmtMoneda(val)}
+
+ );
+ })}
+
+
+
+
+ );
+ })}
+ {datos.length > 0 && (() => {
+ // Fila TOTAL GENERAL — suma de los datos visibles (respeta filtros)
+ const t = {};
+ [IDX.ant[0],IDX.ant[1],IDX.mes[0],IDX.mes[1],IDX.tot[0],IDX.tot[1],IDX.saldo]
+ .forEach((ci)=>{ t[ci] = datos.reduce((s,f)=>s+toMonto(f[ci]),0); });
+ const ratio = (cob,cta)=> cta>0 ? `${Math.round(cob/cta*100)}%` : "";
+ const cell = (ci) => {
+ if (ci===0) return "TOTAL GENERAL";
+ if (ci===IDX.ant[2]) return ratio(t[IDX.ant[1]],t[IDX.ant[0]]);
+ if (ci===IDX.mes[2]) return ratio(t[IDX.mes[1]],t[IDX.mes[0]]);
+ if (ci===IDX.tot[2]) return ratio(t[IDX.tot[1]],t[IDX.tot[0]]);
+ if (t[ci]!==undefined) return "S/ " + t[ci].toLocaleString("es-PE",{maximumFractionDigits:0});
+ return "";
+ };
+ return (
+
+ }
+
+ );
+}
diff --git a/frontend/frontend/src/pages/Comisiones.jsx b/frontend/frontend/src/pages/Comisiones.jsx
new file mode 100644
index 0000000..e519e99
--- /dev/null
+++ b/frontend/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) => (
+
+
+ );
+}
+
+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) => (
+
+ ))}
+
+
+
+ {loading ? :
+ !qAplicado ?
Escribe para buscar.
:
+ resultados.length === 0 ?
Sin coincidencias.
:
+
+
+ {resultados.length}{resultados.length===100?"+":""} resultado(s) {modo==="EDITAR" && "— modo edición"}
+
+ );
+}
diff --git a/frontend/src/pages/Cobranza.jsx b/frontend/src/pages/Cobranza.jsx
new file mode 100644
index 0000000..742498a
--- /dev/null
+++ b/frontend/src/pages/Cobranza.jsx
@@ -0,0 +1,660 @@
+// src/pages/Cobranza.jsx
+import { useState, useEffect, useMemo } from "react";
+import { api } from "../lib/api";
+import { Loader, ErrorBox, Filters, Select, colorSemaforo } 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 AGRUPACIONES = [{value:"SEDE",label:"Por Sede"},{value:"PROGRAMA",label:"Por Programa"},{value:"ASESOR",label:"Por Asesor"}];
+const SEDES = ["TODOS","LIMA","AREQUIPA","PIURA","TRUJILLO"];
+const FRECS = ["TODOS","DOM","SAB","NOC","MAN","VIR","TAR"];
+
+// Colores por cartera — diferenciados y legibles (sin azul, reservado para TOTAL)
+// ANTERIOR = ámbar suave | MES = verde menta | TOTAL = lila/violeta suave
+const BG_ANT = "#fef3c7", BG_MES = "#d1fae5", BG_TOT = "#ede9fe";
+// Versiones más oscuras para hover de cada cartera
+const HV_ANT = "#fde68a", HV_MES = "#a7f3d0", HV_TOT = "#ddd6fe";
+
+function toMonto(s){ const n = parseFloat(String(s).replace("S/","").replace(/,/g,"").trim()); return isNaN(n)?0:n; }
+function toPct(s){ const n = parseFloat(String(s).replace("%","").trim()); return isNaN(n)?0:n; }
+// Formato moneda SIN decimales (solo visualización)
+function fmtMoneda(s){
+ if (s == null) return "";
+ if (!String(s).includes("S/")) return s; // no es monto, devolver tal cual
+ const n = toMonto(s);
+ return "S/ " + n.toLocaleString("es-PE", { maximumFractionDigits: 0 });
+}
+
+function MiniBar({ valStr }) {
+ if (!valStr || !String(valStr).includes("%")) return —;
+ const pct = toPct(valStr);
+ const c = colorSemaforo(pct);
+ const w = Math.min(Math.max(pct,0),100);
+ return (
+
+ {pct.toFixed(0)}%
+
+
+
+
+ );
+}
+
+export default function Cobranza() {
+ const hoy = new Date();
+ const [ano, setAno] = useState(hoy.getFullYear());
+ const [mes, setMes] = useState(hoy.getMonth() + 1);
+ const [agrupacion, setAgrupacion] = useState("SEDE");
+ const [sectorista, setSectorista] = useState("TODOS");
+ const [sede, setSede] = useState("TODOS");
+ const [frec, setFrec] = useState("TODOS");
+ const [filas, setFilas] = useState([]);
+ const [sectoristas, setSectoristas] = useState(["TODOS"]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [modal, setModal] = useState(null);
+ const [sedeMap, setSedeMap] = useState({}); // programa -> sede (sede.json)
+ const [exportando, setExportando] = useState(false);
+ const [alumnos, setAlumnos] = useState([]); // todos los alumnos (1 sola consulta)
+ const [buscadorAbierto, setBuscadorAbierto] = useState(false);
+
+ const esPrograma = agrupacion === "PROGRAMA";
+ // índices según agrupación
+ const IDX = esPrograma
+ ? { saldo:13, ant:[4,5,6], mes:[7,8,9], tot:[10,11,12] }
+ : { saldo:10, ant:[1,2,3], mes:[4,5,6], tot:[7,8,9] };
+
+ useEffect(() => {
+ let activo = true;
+ setLoading(true); setError(null);
+ api.cobranza(ano, mes, sectorista, agrupacion)
+ .then((res) => {
+ if (!activo) return;
+ setFilas(res.filas || []);
+ setSectoristas(res.sectoristas || ["TODOS"]);
+ setLoading(false);
+ })
+ .catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
+ return () => { activo = false; };
+ }, [ano, mes, agrupacion, sectorista]);
+
+ // Cargar TODOS los alumnos una sola vez (para exportar y buscar) — 1 consulta cacheada
+ useEffect(() => {
+ let activo = true;
+ api.cobranzaDetalleTodos(ano, mes, sectorista)
+ .then((res) => { if (activo) setAlumnos(res.alumnos || []); })
+ .catch(() => { if (activo) setAlumnos([]); });
+ return () => { activo = false; };
+ }, [ano, mes, sectorista]);
+
+ // Cargar clasificación de sede (sede.json) para los programas visibles
+ useEffect(() => {
+ if (!esPrograma) return;
+ const nombres = filas
+ .filter((f) => String(f[0]).toUpperCase() !== "TOTAL GENERAL")
+ .map((f) => String(f[0]));
+ if (nombres.length === 0) return;
+ let activo = true;
+ api.clasificarSede(nombres)
+ .then((res) => { if (activo) setSedeMap(res.mapa || {}); })
+ .catch(() => { if (activo) setSedeMap({}); });
+ return () => { activo = false; };
+ }, [filas, esPrograma]);
+
+ // Filtro sede/frecuencia (solo PROGRAMA) en cliente — usa sede.json
+ const datos = useMemo(() => {
+ let arr = filas.filter((f) => String(f[0]).toUpperCase() !== "TOTAL GENERAL");
+ if (esPrograma) {
+ if (sede !== "TODOS") {
+ arr = arr.filter((f) => {
+ const s = (sedeMap[String(f[0])] || "LIMA").toUpperCase();
+ return s === sede.toUpperCase();
+ });
+ }
+ if (frec !== "TODOS") arr = arr.filter((f) => String(f[1]).toUpperCase() === frec);
+ }
+ return arr;
+ }, [filas, esPrograma, sede, frec, sedeMap]);
+
+ // KPIs: 3 tarjetas (recalculadas con datos filtrados)
+ const kpis = useMemo(() => {
+ let cAnt=0,obAnt=0,cMes=0,obMes=0,cTot=0,obTot=0;
+ datos.forEach((f) => {
+ cAnt += toMonto(f[IDX.ant[0]]); obAnt += toMonto(f[IDX.ant[1]]);
+ cMes += toMonto(f[IDX.mes[0]]); obMes += toMonto(f[IDX.mes[1]]);
+ cTot += toMonto(f[IDX.tot[0]]); obTot += toMonto(f[IDX.tot[1]]);
+ });
+ return { cAnt,obAnt,cMes,obMes,cTot,obTot, saldo: cTot-obTot };
+ }, [datos, IDX]);
+
+ const headers = esPrograma
+ ? ["PROGRAMA","FREC.","N° CUOTA","VENCIMIENTO","CTA X COB. MES ANT.","COB. MES ANT.","% ANT","CTA X COB EN CURSO","COB. EN CURSO","% MES","CTA X COB TOTAL","COB. TOTAL","% TOTAL","SALDO","OPC."]
+ : ["GRUPO","CTA X COB. MES ANT.","COB. MES ANT.","% ANT","CTA X COB EN CURSO","COB. EN CURSO","% MES","CTA X COB TOTAL","COB. TOTAL","% TOTAL","SALDO","OPC."];
+
+ // Anchos para columnas redimensionables (1ª columna más ancha, resto estándar)
+ const anchosCob = headers.map((h, i) => i === 0 ? (esPrograma ? 280 : 200) : (h === "FREC." || h.startsWith("%") || h === "OPC." ? 80 : 120));
+ const cols = useColumnasAjustables(anchosCob);
+
+ function cartClase(ci) {
+ if (IDX.ant.includes(ci)) return "cart-ant";
+ if (IDX.mes.includes(ci)) return "cart-mes";
+ if (IDX.tot.includes(ci)) return "cart-tot";
+ return "";
+ }
+
+ // Alumnos visibles según filtros activos (mismo dataset que Ver / Estado de Cuenta)
+ const alumnosFiltrados = useMemo(() => {
+ let arr = alumnos;
+ if (esPrograma) {
+ if (sede !== "TODOS") arr = arr.filter((a) => String(a.sede).toUpperCase() === sede.toUpperCase());
+ if (frec !== "TODOS") arr = arr.filter((a) => String(a.frecuencia).toUpperCase() === frec);
+ }
+ return arr;
+ }, [alumnos, esPrograma, sede, frec]);
+
+ function grupoDe(a) {
+ if (agrupacion === "SEDE") return a.sede;
+ if (agrupacion === "ASESOR") return ""; // el sectorista ya filtra; no hay sub-grupo por alumno
+ return a.programa; // PROGRAMA
+ }
+
+ // Exportar el DETALLE DE ALUMNOS (rápido: usa el dataset ya cargado, sin N consultas)
+ async function exportarDetalle() {
+ setExportando(true);
+ try {
+ const base = alumnosFiltrados;
+ if (base.length === 0) { alert("No hay alumnos para exportar con los filtros actuales."); return; }
+
+ const toDate = (v) => {
+ if (!v || v === "-") return "";
+ const s = String(v).trim().replace(/\//g,"-");
+ const p = s.split("-");
+ if (p.length === 3 && p[2].length === 4) return new Date(+p[2], +p[1]-1, +p[0]);
+ return String(v);
+ };
+ const pct = (cob, cta) => cta > 0 ? cob/cta : null;
+
+ const XLSX = await import("xlsx-js-style");
+ const COLS = ["GRUPO","MATRÍCULA","ALUMNO","N° CUOTA","F. VENC.","CTA ANT.","COB ANT.","% ANT","CTA MES","COB MES","% MES","CTA TOT","COB TOT","% TOT","SALDO"];
+
+ // Colores suaves por cartera (igual que el dashboard): ANT ámbar, MES verde, TOT lila
+ const CART = { ant:"FEF3C7", mes:"D1FAE5", tot:"EDE9FE" };
+ const cartFill = (c) => {
+ if ([5,6,7].includes(c)) return CART.ant;
+ if ([8,9,10].includes(c)) return CART.mes;
+ if ([11,12,13].includes(c)) return CART.tot;
+ return null;
+ };
+ const headerStyle = { font:{bold:true,color:{rgb:"FFFFFF"},sz:11}, fill:{fgColor:{rgb:"1E40AF"}}, alignment:{horizontal:"center",vertical:"center"} };
+ const moneyFmt = '"S/" #,##0';
+ const pctFmt = '0%';
+ const dateFmt = "dd/mm/yyyy";
+ const cellStyle = (c) => { const f = cartFill(c); return f ? { fill:{fgColor:{rgb:f}} } : undefined; };
+
+ const ws = {};
+ COLS.forEach((h,c)=>{ ws[XLSX.utils.encode_cell({r:0,c})] = {v:h,t:"s",s:headerStyle}; });
+
+ base.forEach((a, ri) => {
+ const r = ri + 1;
+ const vals = [
+ grupoDe(a), a.matricula, a.alumno, a.num_cuota, toDate(a.fch_venc),
+ a.cta_ant, a.cob_ant, pct(a.cob_ant,a.cta_ant),
+ a.cta_cur, a.cob_cur, pct(a.cob_cur,a.cta_cur),
+ a.cta_tot, a.cob_tot, pct(a.cob_tot,a.cta_tot),
+ a.saldo,
+ ];
+ vals.forEach((v, c) => {
+ const ref = XLSX.utils.encode_cell({r,c});
+ const st = cellStyle(c);
+ if ([5,6,8,9,11,12,14].includes(c)) ws[ref] = { v:Number(v)||0, t:"n", z:moneyFmt, ...(st?{s:st}:{}) };
+ else if ([7,10,13].includes(c)) ws[ref] = (v===null) ? { v:"-", t:"s", ...(st?{s:st}:{}) } : { v:Number(v), t:"n", z:pctFmt, ...(st?{s:st}:{}) };
+ else if (c===4 && v instanceof Date) ws[ref] = { v, t:"d", z:dateFmt };
+ else ws[ref] = { v: v ?? "", t:"s" };
+ });
+ });
+
+ // TOTAL GENERAL (suma de montos)
+ const rTot = base.length + 1;
+ const totalStyle = { font:{bold:true}, fill:{fgColor:{rgb:"EFF6FF"}} };
+ const sum = (k) => base.reduce((s,a)=>s+(Number(a[k])||0),0);
+ const totVals = { 5:sum("cta_ant"),6:sum("cob_ant"),8:sum("cta_cur"),9:sum("cob_cur"),11:sum("cta_tot"),12:sum("cob_tot"),14:sum("saldo") };
+ 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 (totVals[c]!==undefined) ws[ref] = {v:totVals[c],t:"n",z:moneyFmt,s:totalStyle};
+ else ws[ref] = {v:"",t:"s",s:totalStyle};
+ });
+
+ ws["!ref"] = XLSX.utils.encode_range({ s:{r:0,c:0}, e:{r:rTot,c:COLS.length-1} });
+ ws["!cols"] = [{wch:26},{wch:12},{wch:28},{wch:9},{wch:12},{wch:12},{wch:12},{wch:8},{wch:12},{wch:12},{wch:8},{wch:12},{wch:12},{wch:8},{wch:13}];
+
+ const wb = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(wb, ws, "Cobranza");
+ const sufijo = agrupacion + (esPrograma && sede!=="TODOS" ? `_${sede}` : "") + (sectorista!=="TODOS" ? `_${sectorista}` : "");
+ XLSX.writeFile(wb, `cobranza_${sufijo}_${ano}_${mes}.xlsx`);
+ } finally {
+ setExportando(false);
+ }
+ }
+
+ return (
+
+
📋 Cobranza
+
+
+
+
+ {loading ? :
+ error ? :
+ <>
+
+
+
+
+
+
{headers.map((h, i)=>
{h}
)}
+
+ {datos.map((f, ri) => {
+ // En la tabla principal SIEMPRE son agrupaciones (Sede/Programa/Asesor),
+ // nunca alumnos individuales → NO aplicar rojo por deuda aquí.
+ // Regla "-": si % del grupo está vacío, CTA y COB del grupo → "-"
+ const antVacio = !String(f[IDX.ant[2]]||"").trim() || ["-","—"].includes(String(f[IDX.ant[2]]).trim());
+ const mesVacio = !String(f[IDX.mes[2]]||"").trim() || ["-","—"].includes(String(f[IDX.mes[2]]).trim());
+ const totVacio = !String(f[IDX.tot[2]]||"").trim() || ["-","—"].includes(String(f[IDX.tot[2]]).trim());
+ return (
+
+ {f.slice(0, headers.length-1).map((v, ci) => {
+ const isPct = IDX.ant[2]===ci || IDX.mes[2]===ci || IDX.tot[2]===ci;
+ let val = v;
+ if ((ci===IDX.ant[0]||ci===IDX.ant[1]||ci===IDX.ant[2]) && antVacio) val = "—";
+ if ((ci===IDX.mes[0]||ci===IDX.mes[1]||ci===IDX.mes[2]) && mesVacio) val = "—";
+ if ((ci===IDX.tot[0]||ci===IDX.tot[1]||ci===IDX.tot[2]) && totVacio) val = "—";
+ const cartCls = cartClase(ci);
+ const clss = (ci===0?"col-name":"") + (cartCls?` ${cartCls}`:"");
+ return (
+
+ {isPct ? (val==="—" ? — : ) : fmtMoneda(val)}
+
+ );
+ })}
+
+
+
+
+ );
+ })}
+ {datos.length > 0 && (() => {
+ // Fila TOTAL GENERAL — suma de los datos visibles (respeta filtros)
+ const t = {};
+ [IDX.ant[0],IDX.ant[1],IDX.mes[0],IDX.mes[1],IDX.tot[0],IDX.tot[1],IDX.saldo]
+ .forEach((ci)=>{ t[ci] = datos.reduce((s,f)=>s+toMonto(f[ci]),0); });
+ const ratio = (cob,cta)=> cta>0 ? `${Math.round(cob/cta*100)}%` : "";
+ const cell = (ci) => {
+ if (ci===0) return "TOTAL GENERAL";
+ if (ci===IDX.ant[2]) return ratio(t[IDX.ant[1]],t[IDX.ant[0]]);
+ if (ci===IDX.mes[2]) return ratio(t[IDX.mes[1]],t[IDX.mes[0]]);
+ if (ci===IDX.tot[2]) return ratio(t[IDX.tot[1]],t[IDX.tot[0]]);
+ if (t[ci]!==undefined) return "S/ " + t[ci].toLocaleString("es-PE",{maximumFractionDigits:0});
+ return "";
+ };
+ return (
+
+ }
+
+ );
+}
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) => (
+
+
+ );
+}
+
+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) => (
+
+ ))}
+
+
+
+ {loading ? :
+ !qAplicado ?
Escribe para buscar.
:
+ resultados.length === 0 ?
Sin coincidencias.
:
+
+
+ {resultados.length}{resultados.length===100?"+":""} resultado(s) {modo==="EDITAR" && "— modo edición"}
+