Diagnóstico y fix SQL Server: SERVERNAME, TDS_Version, Puerto explicitos
This commit is contained in:
desoladorxx
3
frontend/.env.example
Normal file
3
frontend/.env.example
Normal file
@@ -0,0 +1,3 @@
|
||||
# Plantilla de variables de entorno para el Frontend (React + Vite)
|
||||
# En producción o desarrollo, reemplazar con la URL correspondiente del backend
|
||||
VITE_API_BASE_URL=http://api-leads.escueladerefrigeracion.lat
|
||||
21
frontend/Dockerfile
Normal file
21
frontend/Dockerfile
Normal file
@@ -0,0 +1,21 @@
|
||||
FROM node:18-alpine AS build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
ARG VITE_API_BASE_URL=http://api-leads.escueladerefrigeracion.lat
|
||||
ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
|
||||
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
12
frontend/index.html
Normal file
12
frontend/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Dashboard Leads — Escuela Refrigeración</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
16
frontend/nginx.conf
Normal file
16
frontend/nginx.conf
Normal file
@@ -0,0 +1,16 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
error_page 500 502 503 504 /5x.x.html;
|
||||
location = /5x.x.html {
|
||||
root /usr/share/nginx/html;
|
||||
}
|
||||
}
|
||||
2098
frontend/package-lock.json
generated
Normal file
2098
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
frontend/package.json
Normal file
20
frontend/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "dashboard-leads",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"recharts": "^2.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.2.0",
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
}
|
||||
28
frontend/src/App.jsx
Normal file
28
frontend/src/App.jsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { useState } from "react";
|
||||
import Sidebar from "./components/Sidebar";
|
||||
import Leads from "./pages/Leads";
|
||||
import OtrosGeneral from "./pages/OtrosGeneral";
|
||||
import CampanitaAlertas from "./components/CampanitaAlertas";
|
||||
import ConfigModal from "./components/ConfigModal";
|
||||
|
||||
export default function App() {
|
||||
const [pagina, setPagina] = useState("leads");
|
||||
const [config, setConfig] = useState(false);
|
||||
|
||||
function render() {
|
||||
switch (pagina) {
|
||||
case "leads": return <Leads />;
|
||||
case "otros": return <OtrosGeneral />;
|
||||
default: return null;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<Sidebar active={pagina} onChange={setPagina} onConfig={() => setConfig(true)} />
|
||||
<main className="main">{render()}</main>
|
||||
<CampanitaAlertas />
|
||||
{config && <ConfigModal onClose={() => setConfig(false)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
92
frontend/src/components/CampanitaAlertas.jsx
Normal file
92
frontend/src/components/CampanitaAlertas.jsx
Normal file
@@ -0,0 +1,92 @@
|
||||
// Campanita de alertas: avisa de programas/sedes NO identificados en cartera_junta
|
||||
// (valores que no están en el diccionario alias_normalizacion).
|
||||
import { useState, useEffect } from "react";
|
||||
import { api } from "../lib/api";
|
||||
|
||||
export default function CampanitaAlertas() {
|
||||
const [data, setData] = useState({ programa: [], sede: [] });
|
||||
const [abierto, setAbierto] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let activo = true;
|
||||
api.alertas()
|
||||
.then((r) => { if (activo) setData({ programa: r.programa || [], sede: r.sede || [] }); })
|
||||
.catch(() => { if (activo) setData({ programa: [], sede: [] }); });
|
||||
return () => { activo = false; };
|
||||
}, []);
|
||||
|
||||
const total = (data.programa?.length || 0) + (data.sede?.length || 0);
|
||||
const hay = total > 0;
|
||||
|
||||
return (
|
||||
<div style={{ position: "fixed", right: 18, top: 14, zIndex: 80 }}>
|
||||
<button
|
||||
onClick={() => setAbierto((v) => !v)}
|
||||
title={hay ? `${total} valor(es) sin identificar` : "Sin alertas"}
|
||||
style={{
|
||||
position: "relative", width: 38, height: 38, borderRadius: 10,
|
||||
border: "1px solid " + (hay ? "#f59e0b" : "#334155"),
|
||||
background: hay ? "#78350f" : "rgba(15,23,42,0.9)",
|
||||
color: hay ? "#fde68a" : "#94a3b8",
|
||||
cursor: "pointer", fontSize: 18, lineHeight: 1,
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.25)",
|
||||
}}
|
||||
>
|
||||
🔔
|
||||
{hay && (
|
||||
<span style={{
|
||||
position: "absolute", top: -6, right: -6, minWidth: 18, height: 18,
|
||||
padding: "0 4px", borderRadius: 999, background: "#dc2626", color: "#fff",
|
||||
fontSize: 11, fontWeight: 700, display: "flex", alignItems: "center",
|
||||
justifyContent: "center", border: "1px solid #fff",
|
||||
}}>{total}</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{abierto && (
|
||||
<div style={{
|
||||
position: "absolute", right: 0, top: 46, width: 320, maxHeight: 420,
|
||||
overflowY: "auto", background: "#fff", color: "#0f172a",
|
||||
border: "1px solid #e2e8f0", borderRadius: 12,
|
||||
boxShadow: "0 8px 24px rgba(0,0,0,0.18)", padding: 14, fontSize: 13,
|
||||
}}>
|
||||
<div style={{ fontWeight: 700, marginBottom: 8 }}>🔔 Alertas de normalización</div>
|
||||
{!hay ? (
|
||||
<div style={{ color: "#059669", fontWeight: 600 }}>✓ Todo identificado, nada por revisar.</div>
|
||||
) : (
|
||||
<>
|
||||
{(data.programa?.length > 0) && (
|
||||
<div style={{ marginBottom: 10 }}>
|
||||
<div style={{ fontWeight: 600, color: "#b45309", marginBottom: 4 }}>
|
||||
Nuevo programa no identificado:
|
||||
</div>
|
||||
{data.programa.map((p, i) => (
|
||||
<div key={i} style={{ padding: "3px 0", borderBottom: "1px solid #f1f5f9" }}>
|
||||
<b>{p.valor || "(vacío)"}</b> <span style={{ color: "#94a3b8" }}>· {p.veces}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{(data.sede?.length > 0) && (
|
||||
<div>
|
||||
<div style={{ fontWeight: 600, color: "#b45309", marginBottom: 4 }}>
|
||||
Nueva sede no identificada:
|
||||
</div>
|
||||
{data.sede.map((s, i) => (
|
||||
<div key={i} style={{ padding: "3px 0", borderBottom: "1px solid #f1f5f9" }}>
|
||||
<b>{s.valor || "(vacío)"}</b> <span style={{ color: "#94a3b8" }}>· {s.veces}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ marginTop: 10, color: "#64748b", fontSize: 12 }}>
|
||||
Agrégalos al diccionario (alias_normalizacion) para clasificarlos.
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
313
frontend/src/components/ConfigModal.jsx
Normal file
313
frontend/src/components/ConfigModal.jsx
Normal file
@@ -0,0 +1,313 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { api } from "../lib/api";
|
||||
|
||||
// Desplegable con búsqueda (estilo Claude).
|
||||
function ProgramaSelect({ valor, opciones = [], onSelect }) {
|
||||
const [abierto, setAbierto] = useState(false);
|
||||
const [q, setQ] = useState("");
|
||||
const ref = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
function fuera(e) { if (ref.current && !ref.current.contains(e.target)) setAbierto(false); }
|
||||
document.addEventListener("mousedown", fuera);
|
||||
return () => document.removeEventListener("mousedown", fuera);
|
||||
}, []);
|
||||
|
||||
const filtradas = opciones.filter((o) => o.label.toLowerCase().includes(q.toLowerCase()));
|
||||
|
||||
return (
|
||||
<div ref={ref} style={{ position: "relative", width: "100%" }}>
|
||||
<button onClick={() => setAbierto((v) => !v)}
|
||||
style={{ width: "100%", textAlign: "left", padding: "7px 10px", border: "1px solid #cbd5e1",
|
||||
borderRadius: 8, fontSize: 13, background: "#fff", cursor: "pointer",
|
||||
color: valor ? "#334155" : "#94a3b8", fontFamily: "inherit",
|
||||
display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{valor || "Seleccionar programa..."}
|
||||
</span>
|
||||
<span style={{ color: "#94a3b8", marginLeft: 6 }}>⌄</span>
|
||||
</button>
|
||||
{abierto && (
|
||||
<div style={{ position: "absolute", top: "calc(100% + 6px)", left: 0, right: 0, background: "#fff",
|
||||
border: "1px solid #e2e8f0", borderRadius: 12, boxShadow: "0 12px 34px rgba(0,0,0,0.18)",
|
||||
zIndex: 100, overflow: "hidden" }}>
|
||||
<div style={{ padding: 10, borderBottom: "1px solid #f1f5f9" }}>
|
||||
<input autoFocus value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar..."
|
||||
style={{ width: "100%", padding: "8px 11px", border: "1px solid #cbd5e1", borderRadius: 8,
|
||||
fontSize: 13, fontFamily: "inherit", outline: "none" }} />
|
||||
</div>
|
||||
<div style={{ maxHeight: 220, overflow: "auto" }}>
|
||||
{filtradas.length === 0 ? (
|
||||
<div style={{ padding: "12px 14px", fontSize: 13, color: "#94a3b8" }}>Sin opciones</div>
|
||||
) : filtradas.map((o) => (
|
||||
<div key={o.num_indice} style={{ padding: "9px 14px", fontSize: 13, color: "#334155", cursor: "pointer" }}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = "#f1f5f9"}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={() => { onSelect && onSelect(o); setAbierto(false); setQ(""); }}>
|
||||
{o.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Apartado "Programas": lista de programas con contar=NO (ocultos), con switch para reactivar.
|
||||
function ProgramasOcultos() {
|
||||
const [filas, setFilas] = useState([]);
|
||||
const [cargando, setCargando] = useState(true);
|
||||
const [enc, setEnc] = useState({}); // num_indice -> true si se va a encender
|
||||
const [guardando, setGuardando] = useState(false);
|
||||
const [msg, setMsg] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
api.programasOcultos()
|
||||
.then((r) => { setFilas(r.filas || []); setCargando(false); })
|
||||
.catch(() => setCargando(false));
|
||||
}, []);
|
||||
|
||||
async function guardar() {
|
||||
const nis = Object.entries(enc).filter(([, v]) => v).map(([ni]) => ni);
|
||||
if (nis.length === 0) { setMsg("No hay programas para activar."); return; }
|
||||
setGuardando(true); setMsg("");
|
||||
try {
|
||||
await api.encenderProgramas(nis);
|
||||
setMsg("✓ Activados. Ya aparecen en la matriz.");
|
||||
const r = await api.programasOcultos();
|
||||
setFilas(r.filas || []); setEnc({});
|
||||
} catch (e) { setMsg("Error: " + e.message); }
|
||||
finally { setGuardando(false); }
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ padding: "16px 22px 6px" }}>
|
||||
<div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.5 }}>
|
||||
Aquí están los programas ocultos del <b>Detalle por Curso</b>. Enciende el interruptor
|
||||
y guarda para que vuelvan a aparecer en la tabla del dashboard.
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, overflow: "auto", padding: "8px 22px" }}>
|
||||
{cargando ? (
|
||||
<div style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Cargando...</div>
|
||||
) : filas.length === 0 ? (
|
||||
<div style={{ padding: 30, textAlign: "center", color: "#94a3b8", fontSize: 13 }}>
|
||||
No hay programas ocultos.
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
{filas.map((f) => {
|
||||
const on = !!enc[f.num_indice];
|
||||
return (
|
||||
<div key={f.num_indice} style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
|
||||
padding: "12px 14px", border: "1px solid #e2e8f0", borderRadius: 10, background: "#fff" }}>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ fontSize: 13.5, fontWeight: 600, color: "#0f172a" }}>{f.dsc_det_programa}</div>
|
||||
<div style={{ fontSize: 12, color: "#94a3b8" }}>
|
||||
Índice {f.num_indice}{f.fch_inicio ? ` · ${f.fch_inicio}` : ""}{f.pauta ? ` · Pauta ${f.pauta}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<div onClick={() => setEnc((p) => ({ ...p, [f.num_indice]: !p[f.num_indice] }))}
|
||||
style={{ width: 46, height: 26, borderRadius: 999, cursor: "pointer", flexShrink: 0,
|
||||
background: on ? "#2563eb" : "#cbd5e1", position: "relative", transition: "background .15s" }}>
|
||||
<div style={{ width: 20, height: 20, borderRadius: "50%", background: "#fff",
|
||||
position: "absolute", top: 3, left: on ? 23 : 3, transition: "left .15s",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.3)" }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
|
||||
padding: "14px 22px", borderTop: "1px solid #e2e8f0" }}>
|
||||
<span style={{ fontSize: 13, color: msg.startsWith("✓") ? "#047857" : "#b91c1c" }}>{msg}</span>
|
||||
<button onClick={guardar} disabled={guardando}
|
||||
style={{ padding: "9px 22px", border: "none", background: "#1e3a5f", color: "#fff",
|
||||
borderRadius: 9, fontSize: 14, fontWeight: 700, cursor: guardando ? "wait" : "pointer" }}>
|
||||
{guardando ? "Guardando..." : "Guardar"}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ConfigModal({ onClose }) {
|
||||
const [seccion, setSeccion] = useState("leyenda");
|
||||
const [filas, setFilas] = useState([]);
|
||||
const [cargando, setCargando] = useState(true);
|
||||
const [guardando, setGuardando] = useState(false);
|
||||
const [msg, setMsg] = useState("");
|
||||
const [busca, setBusca] = useState("");
|
||||
const [edit, setEdit] = useState({}); // conjunto -> pauta editada
|
||||
const [editProg, setEditProg] = useState({}); // conjunto -> {num_indice, label} programa elegido
|
||||
const [progOpc, setProgOpc] = useState([]); // opciones del desplegable de Programa
|
||||
|
||||
useEffect(() => {
|
||||
api.leyendaAnuncios()
|
||||
.then((r) => { setFilas(r.filas || []); setCargando(false); })
|
||||
.catch(() => setCargando(false));
|
||||
api.programasDisponibles()
|
||||
.then((r) => setProgOpc(r.programas || []))
|
||||
.catch(() => setProgOpc([]));
|
||||
}, []);
|
||||
|
||||
const setPauta = (conjunto, val) => setEdit((p) => ({ ...p, [conjunto]: val }));
|
||||
const valorPauta = (f) => (edit[f.conjunto] !== undefined ? edit[f.conjunto] : (f.pauta || ""));
|
||||
// Programa mostrado: el elegido si hay, si no el que ya trae la fila
|
||||
const valorPrograma = (f) => (editProg[f.conjunto] !== undefined ? editProg[f.conjunto].label : (f.programa || ""));
|
||||
|
||||
async function guardar() {
|
||||
// Un cambio por conjunto que tenga pauta editada o programa elegido
|
||||
const conjuntos = new Set([...Object.keys(edit), ...Object.keys(editProg)]);
|
||||
const cambios = [];
|
||||
for (const conjunto of conjuntos) {
|
||||
const f = filas.find((x) => x.conjunto === conjunto) || {};
|
||||
const pauta = (edit[conjunto] !== undefined ? edit[conjunto] : (f.pauta || "")).trim();
|
||||
const prog = editProg[conjunto]; // {num_indice, label} o undefined
|
||||
cambios.push({ conjunto, pauta, num_indice: prog ? prog.num_indice : null });
|
||||
}
|
||||
if (cambios.length === 0) { setMsg("No hay cambios."); return; }
|
||||
setGuardando(true); setMsg("");
|
||||
try {
|
||||
await api.guardarLeyenda(cambios);
|
||||
setMsg("✓ Guardado correctamente.");
|
||||
const r = await api.leyendaAnuncios();
|
||||
setFilas(r.filas || []); setEdit({}); setEditProg({});
|
||||
} catch (e) { setMsg("Error: " + e.message); }
|
||||
finally { setGuardando(false); }
|
||||
}
|
||||
|
||||
// Orden: 1) pauta Y programa, 2) pauta sin programa, 3) programa sin pauta, 4) nada
|
||||
const _rango = (f) => {
|
||||
const p = valorPauta(f).trim() !== "";
|
||||
const g = (f.programa || "").trim() !== "";
|
||||
if (p && g) return 0;
|
||||
if (p && !g) return 1;
|
||||
if (!p && g) return 2;
|
||||
return 3;
|
||||
};
|
||||
const filtradas = filas
|
||||
.filter((f) =>
|
||||
!busca || f.conjunto.toLowerCase().includes(busca.toLowerCase())
|
||||
|| String(f.pauta).includes(busca)
|
||||
|| (f.programa || "").toLowerCase().includes(busca.toLowerCase()))
|
||||
.sort((a, b) => (_rango(a) - _rango(b)) || a.conjunto.localeCompare(b.conjunto));
|
||||
|
||||
return (
|
||||
<div onClick={onClose}
|
||||
style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)",
|
||||
display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1200 }}>
|
||||
<div onClick={(e) => e.stopPropagation()}
|
||||
style={{ background: "#fff", borderRadius: 16, width: 1180, maxWidth: "96vw",
|
||||
height: 680, maxHeight: "92vh", display: "flex", overflow: "hidden",
|
||||
boxShadow: "0 24px 70px rgba(0,0,0,0.4)",
|
||||
fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif" }}>
|
||||
{/* Sidebar del modal */}
|
||||
<div style={{ width: 240, background: "#f8fafc", borderRight: "1px solid #e2e8f0", padding: "18px 12px" }}>
|
||||
<div style={{ fontSize: 12, fontWeight: 700, color: "#94a3b8", textTransform: "uppercase",
|
||||
padding: "0 10px 10px" }}>Configuración</div>
|
||||
<button onClick={() => setSeccion("leyenda")}
|
||||
style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
|
||||
border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, marginBottom: 4,
|
||||
background: seccion === "leyenda" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
|
||||
Leyenda de Anuncios
|
||||
</button>
|
||||
<button onClick={() => setSeccion("programas")}
|
||||
style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
|
||||
border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600,
|
||||
background: seccion === "programas" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
|
||||
Programas
|
||||
</button>
|
||||
</div>
|
||||
{/* Contenido */}
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
|
||||
padding: "16px 22px", borderBottom: "1px solid #e2e8f0" }}>
|
||||
<div style={{ fontSize: 17, fontWeight: 700, color: "#0f172a" }}>
|
||||
{seccion === "leyenda" ? "Leyenda de Anuncios" : "Programas"}
|
||||
</div>
|
||||
<button onClick={onClose}
|
||||
style={{ background: "transparent", border: "none", fontSize: 24, cursor: "pointer", color: "#64748b" }}>×</button>
|
||||
</div>
|
||||
|
||||
{seccion === "programas" ? (
|
||||
<ProgramasOcultos />
|
||||
) : (
|
||||
<>
|
||||
<div style={{ padding: "14px 22px 8px" }}>
|
||||
<input value={busca} onChange={(e) => setBusca(e.target.value)}
|
||||
placeholder="Buscar conjunto, pauta o programa..."
|
||||
style={{ width: "100%", padding: "9px 12px", border: "1px solid #cbd5e1",
|
||||
borderRadius: 9, fontSize: 13 }} />
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, overflow: "hidden", padding: "0 22px 4px" }}>
|
||||
{cargando ? (
|
||||
<div style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Cargando...</div>
|
||||
) : (
|
||||
<div style={{ height: "100%", border: "1px solid #e2e8f0", borderRadius: 12,
|
||||
overflow: "auto" }}>
|
||||
<table style={{ width: "100%", borderCollapse: "separate", borderSpacing: 0,
|
||||
tableLayout: "fixed" }}>
|
||||
<colgroup>
|
||||
<col style={{ width: "38%" }} />
|
||||
<col style={{ width: 100 }} />
|
||||
<col style={{ width: "auto" }} />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 20, background: "#1e3a5f", color: "#fff",
|
||||
padding: "11px 14px", fontSize: 13, fontWeight: 600, textAlign: "left",
|
||||
borderTopLeftRadius: 12 }}>Conjunto de Anuncios</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 20, background: "#1e3a5f", color: "#fff",
|
||||
padding: "11px 14px", fontSize: 13, fontWeight: 600, width: 110, textAlign: "left" }}>Pauta</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 20, background: "#1e3a5f", color: "#fff",
|
||||
padding: "11px 14px", fontSize: 13, fontWeight: 600, textAlign: "left", width: 340,
|
||||
borderTopRightRadius: 12 }}>Programa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtradas.map((f) => (
|
||||
<tr key={f.conjunto} style={{ borderBottom: "1px solid #f1f5f9" }}>
|
||||
<td style={{ padding: "8px 14px", fontSize: 13, color: "#334155", textAlign: "left",
|
||||
borderBottom: "1px solid #f1f5f9", wordBreak: "break-word" }}>{f.conjunto}</td>
|
||||
<td style={{ padding: "8px 14px", borderBottom: "1px solid #f1f5f9" }}>
|
||||
<input value={valorPauta(f)} onChange={(e) => setPauta(f.conjunto, e.target.value)}
|
||||
style={{ width: 90, padding: "6px 8px", border: "1px solid #cbd5e1",
|
||||
borderRadius: 6, fontSize: 13, textAlign: "left", fontFamily: "inherit",
|
||||
background: edit[f.conjunto] !== undefined ? "#fffbeb" : "#fff" }} />
|
||||
</td>
|
||||
<td style={{ padding: "8px 14px", borderBottom: "1px solid #f1f5f9",
|
||||
maxWidth: 0, position: "relative" }}>
|
||||
<ProgramaSelect valor={valorPrograma(f)} opciones={progOpc}
|
||||
onSelect={(o) => setEditProg((p) => ({ ...p, [f.conjunto]: o }))} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
|
||||
padding: "14px 22px", borderTop: "1px solid #e2e8f0" }}>
|
||||
<span style={{ fontSize: 13, color: msg.startsWith("✓") ? "#047857" : "#b91c1c" }}>{msg}</span>
|
||||
<button onClick={guardar} disabled={guardando}
|
||||
style={{ padding: "9px 22px", border: "none", background: "#1e3a5f", color: "#fff",
|
||||
borderRadius: 9, fontSize: 14, fontWeight: 700, cursor: guardando ? "wait" : "pointer" }}>
|
||||
{guardando ? "Guardando..." : "Guardar"}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
76
frontend/src/components/Sidebar.jsx
Normal file
76
frontend/src/components/Sidebar.jsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { api } from "../lib/api";
|
||||
|
||||
const MENU = [
|
||||
{ id: "leads", ico: "🎯", label: "Leads" },
|
||||
{ id: "otros", ico: "📊", label: "Otros General" },
|
||||
];
|
||||
|
||||
export default function Sidebar({ active, onChange, onConfig }) {
|
||||
const [menuUser, setMenuUser] = useState(false);
|
||||
const [ultima, setUltima] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const cargar = () => api.ultimaActualizacion()
|
||||
.then((r) => setUltima(r.hora || "")).catch(() => {});
|
||||
cargar();
|
||||
const id = setInterval(cargar, 60 * 1000); // refresca la hora cada minuto
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<aside className="sidebar">
|
||||
<div className="sidebar-logo">Escuela <span>Refrigeración</span></div>
|
||||
<nav className="nav" style={{ flex: 1 }}>
|
||||
{MENU.map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
className={`nav-item ${active === m.id ? "active" : ""}`}
|
||||
onClick={() => onChange(m.id)}
|
||||
>
|
||||
<span className="ico">{m.ico}</span> {m.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Bloque de usuario con menú desplegable */}
|
||||
{ultima && (
|
||||
<div style={{ padding: "0 16px 2px", fontSize: 10, color: "#64748b", textAlign: "left" }}>
|
||||
Actualizado: {ultima}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ position: "relative", borderTop: "1px solid rgba(255,255,255,0.08)", padding: 12 }}>
|
||||
{menuUser && (
|
||||
<div style={{ position: "absolute", bottom: 64, left: 12, right: 12, background: "#1e293b",
|
||||
border: "1px solid rgba(255,255,255,0.12)", borderRadius: 10, overflow: "hidden",
|
||||
boxShadow: "0 8px 24px rgba(0,0,0,0.4)" }}>
|
||||
<button onClick={() => { setMenuUser(false); onConfig && onConfig(); }}
|
||||
style={{ width: "100%", textAlign: "left", padding: "11px 14px", background: "transparent",
|
||||
border: "none", color: "#e2e8f0", cursor: "pointer", fontSize: 13,
|
||||
display: "flex", alignItems: "center", gap: 9 }}>
|
||||
⚙️ Configuración
|
||||
</button>
|
||||
<button onClick={() => setMenuUser(false)}
|
||||
style={{ width: "100%", textAlign: "left", padding: "11px 14px", background: "transparent",
|
||||
border: "none", borderTop: "1px solid rgba(255,255,255,0.08)", color: "#f87171",
|
||||
cursor: "pointer", fontSize: 13, display: "flex", alignItems: "center", gap: 9 }}>
|
||||
⎋ Cerrar sesión
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<button onClick={() => setMenuUser((v) => !v)}
|
||||
style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, background: "transparent",
|
||||
border: "none", cursor: "pointer", padding: "6px 4px", color: "#e2e8f0" }}>
|
||||
<div style={{ width: 34, height: 34, borderRadius: "50%", background: "#2563eb", color: "#fff",
|
||||
display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700,
|
||||
fontSize: 13, flexShrink: 0 }}>AS</div>
|
||||
<div style={{ flex: 1, textAlign: "left", lineHeight: 1.2 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 600 }}>Aron</div>
|
||||
<div style={{ fontSize: 11, color: "#94a3b8" }}>RP ERP</div>
|
||||
</div>
|
||||
<span style={{ fontSize: 11, color: "#94a3b8" }}>{menuUser ? "▲" : "▼"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
31
frontend/src/components/UI.jsx
Normal file
31
frontend/src/components/UI.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
export function Loader({ text = "Cargando..." }) {
|
||||
return (
|
||||
<div className="loader-wrap">
|
||||
<div className="spinner" />
|
||||
<div className="loader-text">{text}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ErrorBox({ msg }) {
|
||||
return <div className="error-box">⚠️ {msg}</div>;
|
||||
}
|
||||
|
||||
export function Filters({ children }) {
|
||||
return <div className="filters">{children}</div>;
|
||||
}
|
||||
|
||||
export function Select({ label, value, options, onChange }) {
|
||||
return (
|
||||
<div className="filter-group">
|
||||
{label && <label>{label}</label>}
|
||||
<select value={value} onChange={(e) => onChange(e.target.value)}>
|
||||
{options.map((o) => {
|
||||
const val = typeof o === "object" ? o.value : o;
|
||||
const txt = typeof o === "object" ? o.label : o;
|
||||
return <option key={val} value={val}>{txt}</option>;
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
41
frontend/src/lib/api.js
Normal file
41
frontend/src/lib/api.js
Normal file
@@ -0,0 +1,41 @@
|
||||
// Cliente del backend FastAPI de Leads.
|
||||
const rawUrl = import.meta.env.VITE_API_BASE_URL || "http://localhost:8001";
|
||||
const BASE_URL = rawUrl.replace(/\/+$/, "");
|
||||
|
||||
|
||||
async function get(path, params = {}) {
|
||||
const qs = new URLSearchParams(params).toString();
|
||||
const r = await fetch(`${BASE_URL}${path}${qs ? "?" + qs : ""}`);
|
||||
if (!r.ok) throw new Error(`Error ${r.status} en ${path}`);
|
||||
return r.json();
|
||||
}
|
||||
|
||||
export const api = {
|
||||
leadsFiltros: () => get("/api/leads/filtros"),
|
||||
leads: (ano = "TODOS", mes = "TODOS", dia = "TODOS", programa = "TODOS", sede = "TODOS") =>
|
||||
get("/api/leads", { ano, mes, dia, programa, sede }),
|
||||
otrosGeneral: (ano = "TODOS", mes = "TODOS", dia = "TODOS") =>
|
||||
get("/api/otros-general", { ano, mes, dia }),
|
||||
ultimaActualizacion: () => get("/api/ultima-actualizacion"),
|
||||
conjuntosSinPauta: () => get("/api/conjuntos-sin-pauta"),
|
||||
usoPauta: (pauta, excluir) => get("/api/pauta/uso", { pauta, excluir: excluir || "" }),
|
||||
leyendaAnuncios: () => get("/api/leyenda-anuncios"),
|
||||
programasDisponibles: () => get("/api/programas-disponibles"),
|
||||
programasOcultos: () => get("/api/programas-ocultos"),
|
||||
encenderProgramas: (num_indices) =>
|
||||
fetch(`${BASE_URL}/api/programas-ocultos/encender`, {
|
||||
method: "POST", headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ num_indices }),
|
||||
}).then((r) => { if (!r.ok) throw new Error("Error al guardar"); return r.json(); }),
|
||||
guardarLeyenda: (cambios) =>
|
||||
fetch(`${BASE_URL}/api/leyenda-anuncios/guardar`, {
|
||||
method: "POST", headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ cambios }),
|
||||
}).then((r) => { if (!r.ok) throw new Error("Error al guardar"); return r.json(); }),
|
||||
guardarPauta: (num_indice, pauta, conjunto, contar) =>
|
||||
fetch(`${BASE_URL}/api/curso/guardar-pauta`, {
|
||||
method: "POST", headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ num_indice, pauta, conjunto, contar }),
|
||||
}).then((r) => { if (!r.ok) throw new Error("Error al guardar"); return r.json(); }),
|
||||
alertas: () => get("/api/leads/alertas"),
|
||||
};
|
||||
56
frontend/src/lib/useColumnasAjustables.jsx
Normal file
56
frontend/src/lib/useColumnasAjustables.jsx
Normal file
@@ -0,0 +1,56 @@
|
||||
// src/lib/useColumnasAjustables.jsx
|
||||
// Hook para columnas redimensionables (arrastrar el borde, estilo Excel).
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export function useColumnasAjustables(anchosIniciales) {
|
||||
const [anchos, setAnchos] = useState(anchosIniciales);
|
||||
|
||||
useEffect(() => {
|
||||
if (anchos.length !== anchosIniciales.length) {
|
||||
setAnchos(anchosIniciales);
|
||||
}
|
||||
}, [anchosIniciales.length]);
|
||||
|
||||
function iniciarResize(e, i) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const xInicial = e.clientX;
|
||||
const anchoInicial = anchos[i];
|
||||
function onMove(ev) {
|
||||
const nuevo = Math.max(50, 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);
|
||||
}
|
||||
|
||||
function ColGroup() {
|
||||
return (
|
||||
<colgroup>
|
||||
{anchos.map((w, i) => <col key={i} style={{ width: w, minWidth: w }} />)}
|
||||
</colgroup>
|
||||
);
|
||||
}
|
||||
|
||||
function Resizer({ index }) {
|
||||
return (
|
||||
<span
|
||||
onMouseDown={(e) => iniciarResize(e, index)}
|
||||
className="col-resizer"
|
||||
style={{ position: "absolute", top: 0, right: 0, width: 8, height: "100%",
|
||||
cursor: "col-resize", userSelect: "none", zIndex: 5 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const anchoTotal = anchos.reduce((a, b) => a + b, 0);
|
||||
const tableProps = {
|
||||
style: { tableLayout: "fixed", width: "100%", minWidth: anchoTotal },
|
||||
};
|
||||
|
||||
return { anchos, ColGroup, Resizer, anchoTotal, tableProps };
|
||||
}
|
||||
10
frontend/src/main.jsx
Normal file
10
frontend/src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
import "./styles.css";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
760
frontend/src/pages/Leads.jsx
Normal file
760
frontend/src/pages/Leads.jsx
Normal file
@@ -0,0 +1,760 @@
|
||||
import { useState, useEffect, useMemo, Fragment } from "react";
|
||||
import { api } from "../lib/api";
|
||||
import { Loader, ErrorBox, Filters, Select } from "../components/UI";
|
||||
import { useColumnasAjustables } from "../lib/useColumnasAjustables";
|
||||
import {
|
||||
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LabelList,
|
||||
AreaChart, Area, Legend, ComposedChart,
|
||||
} from "recharts";
|
||||
|
||||
const MESES = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];
|
||||
|
||||
export default function Leads() {
|
||||
const hoy = new Date();
|
||||
const [ano, setAno] = useState(String(hoy.getFullYear()));
|
||||
const [mes, setMes] = useState(String(hoy.getMonth() + 1));
|
||||
const [dia, setDia] = useState("TODOS");
|
||||
const [tipoProg, setTipoProg] = useState("TODOS");
|
||||
const [sede, setSede] = useState("TODOS");
|
||||
|
||||
const [filtros, setFiltros] = useState({ anos: [2026], tipos: [] });
|
||||
const [data, setData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [expandido, setExpandido] = useState({}); // estado -> abierto
|
||||
const [expAsesor, setExpAsesor] = useState({}); // "estado|asesor" -> abierto
|
||||
const [expSede, setExpSede] = useState({}); // sede -> abierto (tabla pauta)
|
||||
const [expTipo, setExpTipo] = useState({}); // "sede|tipo" -> abierto (códigos)
|
||||
const [expMat, setExpMat] = useState({}); // num_indice -> abierto (subfilas canal)
|
||||
const [modalCurso, setModalCurso] = useState(null); // curso seleccionado para el pop-up "Ver"
|
||||
const [editando, setEditando] = useState(false); // modo edición del pop-up
|
||||
const [editPauta, setEditPauta] = useState(""); // valor pauta en edición
|
||||
const [editConj, setEditConj] = useState(""); // conjunto elegido
|
||||
const [editContar, setEditContar] = useState("SI"); // switch contar SI/NO
|
||||
const [avisoContar, setAvisoContar] = useState(false);// mostró la alerta al cambiar a NO
|
||||
const [conjOpc, setConjOpc] = useState([]); // conjuntos sin pauta (desplegable)
|
||||
const [guardando, setGuardando] = useState(false);
|
||||
const [msgGuardar, setMsgGuardar] = useState("");
|
||||
const [reload, setReload] = useState(0);
|
||||
const [avisoUso, setAvisoUso] = useState(null); // {cursos, conjuntos} si la pauta ya se usa
|
||||
// Vista de columnas de la matriz: TOTAL y/o ASIGNADO. Si ninguno → ambos (todo).
|
||||
const [verTotal, setVerTotal] = useState(true);
|
||||
const [verAsig, setVerAsig] = useState(true);
|
||||
|
||||
// Definición de columnas de la matriz. modo: "fija" | "total" | "asig".
|
||||
// key = campo en la fila; label = encabezado; w = ancho; render opcional.
|
||||
const _fmtMoney = (v) => v ? `$${Number(v).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "—";
|
||||
const COLS_MAT = [
|
||||
{ key: "personalizado", label: "Programa", w: 340, modo: "fija", prog: true },
|
||||
{ key: "fecha_inicio", label: "Fecha Inicio", w: 110, modo: "fija" },
|
||||
{ key: "importe_pauta", label: "Importe Pauta", w: 120, modo: "fija", bold: true, render: (c) => _fmtMoney(c.importe_pauta) },
|
||||
{ key: "importe_pauta_mes", label: "Importe Pauta en el Mes", w: 150, modo: "fija", bold: true, render: (c) => _fmtMoney(c.importe_pauta_mes) },
|
||||
{ key: "cartera_total", label: "Cartera Total", w: 110, modo: "total" },
|
||||
{ key: "cartera_total_asig", label: "Cartera Total Asig.", w: 130, modo: "asig", bold: true },
|
||||
{ key: "leads_nuevos", label: "L. Recibidos", w: 120, modo: "total" },
|
||||
{ key: "leads_nuevos_asesor", label: "L. Procesados", w: 130, modo: "asig" },
|
||||
{ key: "leads_nuevos_mes", label: "L. Recibidos del Mes", w: 150, modo: "total" },
|
||||
{ key: "leads_nuevos_mes_asesor", label: "L. Procesados del Mes", w: 160, modo: "asig" },
|
||||
{ key: "matriculas_no_iden", label: "Matriculas no iden.", w: 140, modo: "fija", bold: true },
|
||||
{ key: "mat_leads_nuevos", label: "Matriculas Leads Nuevos", w: 160, modo: "fija", bold: true },
|
||||
{ key: "mat_leads_antiguos", label: "Matriculas Leads Antiguos", w: 170, modo: "fija", bold: true },
|
||||
{ key: "__ver", label: "", w: 70, modo: "fija", ver: true },
|
||||
];
|
||||
// Si desmarcan ambos → mostrar todo (como si ambos activos)
|
||||
const _t = verTotal || (!verTotal && !verAsig);
|
||||
const _a = verAsig || (!verTotal && !verAsig);
|
||||
const colsVisibles = COLS_MAT.filter(
|
||||
(c) => c.modo === "fija" || (c.modo === "total" && _t) || (c.modo === "asig" && _a)
|
||||
);
|
||||
// Columnas redimensionables de la matriz (según columnas visibles)
|
||||
const colsMat = useColumnasAjustables(colsVisibles.map((c) => c.w));
|
||||
|
||||
// Cargar opciones de filtros una vez
|
||||
useEffect(() => {
|
||||
api.leadsFiltros().then(setFiltros).catch(() => {});
|
||||
}, []);
|
||||
|
||||
// Auto-refresco: cada 15 min vuelve a pedir datos frescos (sin que el usuario haga F5)
|
||||
useEffect(() => {
|
||||
const id = setInterval(() => setReload((n) => n + 1), 15 * 60 * 1000);
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
// Cargar dashboard cuando cambian los filtros (igual que el PBI)
|
||||
useEffect(() => {
|
||||
let activo = true;
|
||||
// Mostrar spinner solo si aún no hay datos (primera carga). En recargas/auto-
|
||||
// refresco, actualiza en silencio para no tapar la tabla.
|
||||
if (!data) setLoading(true);
|
||||
setError(null);
|
||||
api.leads(ano, mes, dia, tipoProg, sede)
|
||||
.then((res) => { if (activo) { setData(res); setLoading(false); } })
|
||||
.catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
|
||||
return () => { activo = false; };
|
||||
}, [ano, mes, dia, tipoProg, sede, reload]);
|
||||
|
||||
const k = data?.kpis;
|
||||
const fmtPct = (v) => `${Number(v ?? 0).toFixed(2)} %`;
|
||||
|
||||
// Cierra el pop-up y resetea el modo edición (para que reabra limpio)
|
||||
function cerrarModal() {
|
||||
setModalCurso(null); setEditando(false); setAvisoUso(null);
|
||||
setAvisoContar(false); setMsgGuardar("");
|
||||
}
|
||||
|
||||
// Guarda la pauta/conjunto (llamado tras confirmar o si la pauta no está en uso)
|
||||
async function hacerGuardado() {
|
||||
setGuardando(true); setMsgGuardar(""); setAvisoUso(null);
|
||||
try {
|
||||
await api.guardarPauta(modalCurso.num_indice, editPauta.trim(), editConj || null, editContar);
|
||||
setMsgGuardar("✓ Guardado. Refrescando datos...");
|
||||
setTimeout(() => { setModalCurso(null); setEditando(false); setReload((n) => n + 1); }, 800);
|
||||
} catch (e) {
|
||||
setMsgGuardar("Error al guardar: " + e.message);
|
||||
} finally { setGuardando(false); }
|
||||
}
|
||||
|
||||
// opciones de filtros
|
||||
const optAnos = useMemo(() => (filtros.anos || []).map(String), [filtros]);
|
||||
const optMes = useMemo(() => MESES.map((m,i)=>({ value: String(i+1), label: m })), []);
|
||||
const optDia = useMemo(() => ["TODOS", ...Array.from({length:31}, (_,i)=>String(i+1))], []);
|
||||
const optTipo = useMemo(() => ["TODOS", "TEAC", "TERC", "SEMINARIOS", "OTROS"], []);
|
||||
const optSede = useMemo(() => ["TODOS", "LIMA", "AREQUIPA", "TRUJILLO", "PIURA"], []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="page-title">🎯 Leads</h1>
|
||||
|
||||
<Filters>
|
||||
<Select label="Programa" value={tipoProg} options={optTipo} onChange={setTipoProg} />
|
||||
<Select label="Sede" value={sede} options={optSede} onChange={setSede} />
|
||||
<Select label="Año" value={ano} options={optAnos} onChange={setAno} />
|
||||
<Select label="Mes" value={mes} options={optMes} onChange={setMes} />
|
||||
<Select label="Día" value={dia} options={optDia} onChange={setDia} />
|
||||
</Filters>
|
||||
|
||||
{loading ? <Loader text="Cargando leads..." /> :
|
||||
error ? <ErrorBox msg={error} /> :
|
||||
!k ? <ErrorBox msg="Sin datos" /> :
|
||||
<>
|
||||
{/* ── FILA DE KPIs (4 tarjetas compuestas, como el PBI) ── */}
|
||||
<div className="kpis">
|
||||
{/* Tarjeta 1: Leads Recibidos / Procesados / % */}
|
||||
<div className="kpi-multi">
|
||||
<KpiRow ico="🧲" label="Leads Recibidos" value={k.leads_recibidos} />
|
||||
<KpiRow ico="🛠️" label="Leads Procesados" value={k.leads_procesados} />
|
||||
<KpiRow ico="↻" label="% Porcentaje Procesados" value={fmtPct(k.pct_procesados)} />
|
||||
</div>
|
||||
|
||||
{/* Tarjeta 2: Procesados / Contactados / % */}
|
||||
<div className="kpi-multi">
|
||||
<KpiRow ico="🔧" label="Leads Procesados" value={k.leads_procesados} />
|
||||
<KpiRow ico="📞" label="Total Contactados" value={k.leads_contactados} />
|
||||
<KpiRow ico="↻" label="% Contactabilidad" value={fmtPct(k.pct_contactados)} />
|
||||
</div>
|
||||
|
||||
{/* Tarjeta 3: Matriculados / Matrículas mes / Ocupabilidad */}
|
||||
<div className="kpi-multi">
|
||||
<KpiRow ico="🎓" label="Total matriculados" value={k.total_matriculados} />
|
||||
<KpiRow ico="📅" label="Matrículas en los Cursos del Mes" value={k.matriculas_mes} />
|
||||
<KpiRow ico="💱" label="Ocupabilidad en los Cursos del Mes" value={fmtPct(k.ocupabilidad)} />
|
||||
</div>
|
||||
|
||||
{/* Tarjeta 4: Cursos programados / reprog / susp / iniciados */}
|
||||
<div className="kpi-multi">
|
||||
<KpiRow ico="📚" label="Cursos Programados" value={k.cursos_programados} />
|
||||
<KpiRow ico="🔁" label="Cursos Reprogramados" value={k.cursos_reprogramados} />
|
||||
<KpiRow ico="⛔" label="Cursos Suspendidos" value={k.cursos_suspendidos} />
|
||||
<KpiRow ico="🚀" label="Cursos Iniciados" value={k.cursos_iniciados} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── FILA INFERIOR: gráfico + tabla ── */}
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginTop: 16 }}>
|
||||
<div className="card">
|
||||
<div className="card-title">Matrículas por Día</div>
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<ComposedChart data={data.matriculas_por_dia} margin={{ top: 24, right: 24, left: -6, bottom: 8 }}>
|
||||
<defs>
|
||||
<linearGradient id="gradMat" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#3b82f6" stopOpacity={0.25} />
|
||||
<stop offset="100%" stopColor="#3b82f6" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#eef2f7" vertical={false} />
|
||||
<XAxis dataKey="dia" tick={{ fontSize: 10, fill: "#94a3b8" }} interval={0}
|
||||
axisLine={{ stroke: "#e2e8f0" }} tickLine={false} />
|
||||
<YAxis tick={{ fontSize: 11, fill: "#94a3b8" }} allowDecimals={false}
|
||||
axisLine={false} tickLine={false} width={32} />
|
||||
<Tooltip content={<TooltipMatriculas />} cursor={{ stroke: "#cbd5e1", strokeDasharray: "4 4" }} />
|
||||
<Area type="monotone" dataKey="cantidad" stroke="none" fill="url(#gradMat)" />
|
||||
<Line type="monotone" dataKey="cantidad" stroke="#2563eb" strokeWidth={2.5}
|
||||
dot={{ r: 3, fill: "#fff", stroke: "#2563eb", strokeWidth: 2 }}
|
||||
activeDot={{ r: 5, fill: "#2563eb", stroke: "#fff", strokeWidth: 2 }}>
|
||||
<LabelList dataKey="cantidad" position="top" fontSize={10} fill="#64748b"
|
||||
formatter={(v) => (v > 0 ? v : "")} />
|
||||
</Line>
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ padding: 0, overflow: "hidden" }}>
|
||||
<div className="table-wrap" style={{ border: "none", maxHeight: 360, overflowY: "auto" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2 }}>Estado/Objeción</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Leads Procesados</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.estado_objecion.filas.map((f) => {
|
||||
const abierto = !!expandido[f.estado];
|
||||
const tieneAsesores = (f.asesores || []).length > 0;
|
||||
return (
|
||||
<Fragment key={f.estado}>
|
||||
<tr>
|
||||
<td className="col-name">
|
||||
{tieneAsesores && (
|
||||
<button
|
||||
onClick={() => setExpandido((p) => ({ ...p, [f.estado]: !p[f.estado] }))}
|
||||
style={{ border: "none", background: "transparent", cursor: "pointer",
|
||||
fontWeight: 700, marginRight: 6, color: "#2563eb", fontSize: 14 }}>
|
||||
{abierto ? "−" : "+"}
|
||||
</button>
|
||||
)}
|
||||
{f.estado}
|
||||
</td>
|
||||
<td>{f.cantidad}</td>
|
||||
</tr>
|
||||
{abierto && (f.asesores || []).map((a) => {
|
||||
const keyA = f.estado + "|" + a.asesor;
|
||||
const abiertoA = !!expAsesor[keyA];
|
||||
const tieneTel = (a.telefonos || []).length > 0;
|
||||
return (
|
||||
<Fragment key={keyA}>
|
||||
<tr style={{ background: "#f8fafc" }}>
|
||||
<td className="col-name" style={{ paddingLeft: 30, color: "#475569", fontSize: 12 }}>
|
||||
{tieneTel && (
|
||||
<button
|
||||
onClick={() => setExpAsesor((p) => ({ ...p, [keyA]: !p[keyA] }))}
|
||||
style={{ border: "none", background: "transparent", cursor: "pointer",
|
||||
fontWeight: 700, marginRight: 6, color: "#7c3aed", fontSize: 13 }}>
|
||||
{abiertoA ? "−" : "+"}
|
||||
</button>
|
||||
)}
|
||||
{a.asesor}
|
||||
</td>
|
||||
<td style={{ color: "#475569", fontSize: 12 }}>{a.cantidad}</td>
|
||||
</tr>
|
||||
{abiertoA && (a.telefonos || []).map((t, i) => (
|
||||
<tr key={keyA + "-" + t + "-" + i} style={{ background: "#fcfdff" }}>
|
||||
<td className="col-name" style={{ paddingLeft: 60, color: "#94a3b8", fontSize: 11 }}>📞 {t}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
))}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
<tr className="total-row">
|
||||
<td className="col-name">Total</td>
|
||||
<td>{data.estado_objecion.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── FILA 2: Leads por Programa (área) + Tabla por Sede ── */}
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginTop: 16 }}>
|
||||
<div className="card">
|
||||
<div className="card-title">Leads por Programa</div>
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<AreaChart data={data.leads_por_dia} margin={{ top: 10, right: 24, left: -6, bottom: 8 }}>
|
||||
<defs>
|
||||
<linearGradient id="gradTot" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#60a5fa" stopOpacity={0.55} />
|
||||
<stop offset="100%" stopColor="#60a5fa" stopOpacity={0.05} />
|
||||
</linearGradient>
|
||||
<linearGradient id="gradProc" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#1e40af" stopOpacity={0.6} />
|
||||
<stop offset="100%" stopColor="#1e40af" stopOpacity={0.1} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#eef2f7" vertical={false} />
|
||||
<XAxis dataKey="dia" tick={{ fontSize: 10, fill: "#94a3b8" }} interval={0}
|
||||
axisLine={{ stroke: "#e2e8f0" }} tickLine={false} />
|
||||
<YAxis tick={{ fontSize: 11, fill: "#94a3b8" }} allowDecimals={false}
|
||||
axisLine={false} tickLine={false} width={32} />
|
||||
<Tooltip contentStyle={{ borderRadius: 10, border: "1px solid #e2e8f0",
|
||||
boxShadow: "0 6px 20px rgba(0,0,0,0.1)", fontSize: 12 }} />
|
||||
<Legend iconType="circle" wrapperStyle={{ fontSize: 12, paddingTop: 4 }} />
|
||||
<Area type="linear" dataKey="totales" name="Leads Totales" stroke="#60a5fa"
|
||||
fill="url(#gradTot)" strokeWidth={2.5}
|
||||
dot={{ r: 2.5, fill: "#60a5fa", stroke: "#fff", strokeWidth: 1 }}
|
||||
activeDot={{ r: 5 }} />
|
||||
<Area type="linear" dataKey="procesados" name="Leads Procesados" stroke="#1e40af"
|
||||
fill="url(#gradProc)" strokeWidth={2.5}
|
||||
dot={{ r: 2.5, fill: "#1e40af", stroke: "#fff", strokeWidth: 1 }}
|
||||
activeDot={{ r: 5 }} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ padding: 0, overflow: "hidden" }}>
|
||||
<div className="table-wrap" style={{ border: "none", maxHeight: 360, overflowY: "auto" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 150 }}>Sede</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Importe Gastado</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Resultados</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Recibidos</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Procesados</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Matr.</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 130, whiteSpace: "nowrap" }}>Valor Venta</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.tabla_pauta.filas.map((f) => {
|
||||
const abierto = !!expSede[f.sede];
|
||||
return (
|
||||
<Fragment key={f.sede}>
|
||||
<tr>
|
||||
<td className="col-name">
|
||||
<button onClick={() => setExpSede((p) => ({ ...p, [f.sede]: !p[f.sede] }))}
|
||||
style={{ border: "none", background: "transparent", cursor: "pointer",
|
||||
fontWeight: 700, marginRight: 6, color: "#2563eb", fontSize: 14 }}>
|
||||
{abierto ? "−" : "+"}
|
||||
</button>
|
||||
{f.sede}
|
||||
</td>
|
||||
<td style={{ fontWeight: 600 }}>{f.importe ? `$${Number(f.importe).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "—"}</td>
|
||||
<td>{f.resultados}</td>
|
||||
<td>{f.recibidos}</td>
|
||||
<td>{f.procesados}</td>
|
||||
<td>{f.matriculas}</td>
|
||||
<td>S/ {Number(f.inversion).toLocaleString("es-PE")}</td>
|
||||
</tr>
|
||||
{abierto && f.subfilas.map((s) => {
|
||||
const keyT = f.sede + "|" + s.tipo;
|
||||
const abiertoT = !!expTipo[keyT];
|
||||
const tieneCod = (s.codigos || []).length > 0;
|
||||
return (
|
||||
<Fragment key={keyT}>
|
||||
<tr style={{ background: "#f8fafc" }}>
|
||||
<td className="col-name" style={{ paddingLeft: 30, color: "#475569", fontSize: 12 }}>
|
||||
{tieneCod && (
|
||||
<button onClick={() => setExpTipo((p) => ({ ...p, [keyT]: !p[keyT] }))}
|
||||
style={{ border: "none", background: "transparent", cursor: "pointer",
|
||||
fontWeight: 700, marginRight: 6, color: "#7c3aed", fontSize: 13 }}>
|
||||
{abiertoT ? "−" : "+"}
|
||||
</button>
|
||||
)}
|
||||
{s.tipo}
|
||||
</td>
|
||||
<td style={{ color: "#475569", fontSize: 12, fontWeight: 600 }}>{s.importe ? `$${Number(s.importe).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "—"}</td>
|
||||
<td style={{ color: "#475569", fontSize: 12 }}>{s.resultados}</td>
|
||||
<td style={{ color: "#475569", fontSize: 12 }}>{s.recibidos}</td>
|
||||
<td style={{ color: "#475569", fontSize: 12 }}>{s.procesados}</td>
|
||||
<td style={{ color: "#475569", fontSize: 12 }}>{s.matriculas}</td>
|
||||
<td style={{ color: "#475569", fontSize: 12 }}>S/ {Number(s.inversion).toLocaleString("es-PE")}</td>
|
||||
</tr>
|
||||
{abiertoT && (s.codigos || []).map((cd) => (
|
||||
<tr key={keyT + "-" + cd.codigo} style={{ background: "#fcfdff" }}>
|
||||
<td className="col-name" style={{ paddingLeft: 56, color: "#94a3b8", fontSize: 11 }}>cód. {cd.codigo}</td>
|
||||
<td style={{ color: "#94a3b8", fontSize: 11 }}>{cd.importe ? `$${Number(cd.importe).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "—"}</td>
|
||||
<td style={{ color: "#94a3b8", fontSize: 11 }}>{cd.resultados ? cd.resultados : "—"}</td>
|
||||
<td style={{ color: "#94a3b8", fontSize: 11 }}>{cd.recibidos}</td>
|
||||
<td style={{ color: "#94a3b8", fontSize: 11 }}>{cd.procesados}</td>
|
||||
<td style={{ color: "#94a3b8", fontSize: 11 }}>{cd.matriculas}</td>
|
||||
<td style={{ color: "#94a3b8", fontSize: 11 }}>S/ {Number(cd.inversion).toLocaleString("es-PE")}</td>
|
||||
</tr>
|
||||
))}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
<tr className="total-row">
|
||||
<td className="col-name">Total</td>
|
||||
<td>{`$${Number(data.tabla_pauta.total.importe || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}</td>
|
||||
<td>{data.tabla_pauta.total.resultados}</td>
|
||||
<td>{data.tabla_pauta.total.recibidos}</td>
|
||||
<td>{data.tabla_pauta.total.procesados}</td>
|
||||
<td>{data.tabla_pauta.total.matriculas}</td>
|
||||
<td>S/ {Number(data.tabla_pauta.total.inversion).toLocaleString("es-PE")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── FILA 3: Matriz por Curso (num_indice) ── */}
|
||||
<div className="card" style={{ marginTop: 16, padding: 0, overflow: "hidden" }}>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
|
||||
padding: "14px 16px 6px", gap: 12, flexWrap: "wrap" }}>
|
||||
<div className="card-title" style={{ padding: 0 }}>Detalle por Curso</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8,
|
||||
background: "#f8fafc", border: "1px solid #e2e8f0",
|
||||
borderRadius: 10, padding: "5px 8px" }}>
|
||||
<span style={{ fontSize: 10, fontWeight: 700, color: "#94a3b8",
|
||||
textTransform: "uppercase", letterSpacing: ".5px", marginRight: 2 }}>
|
||||
Ver
|
||||
</span>
|
||||
{[["TOTAL", verTotal, setVerTotal], ["ASIGNADO", verAsig, setVerAsig]].map(([txt, val, set]) => (
|
||||
<label key={txt} onClick={() => set((v) => !v)}
|
||||
style={{
|
||||
display: "flex", alignItems: "center", gap: 7, cursor: "pointer",
|
||||
padding: "5px 12px", borderRadius: 8, userSelect: "none",
|
||||
fontSize: 12, fontWeight: 700, letterSpacing: ".3px",
|
||||
border: val ? "1px solid #1e3a5f" : "1px solid #e2e8f0",
|
||||
background: val ? "#eef2f9" : "#fff",
|
||||
color: val ? "#1e3a5f" : "#64748b",
|
||||
transition: "all .12s ease",
|
||||
}}>
|
||||
<span style={{
|
||||
width: 16, height: 16, borderRadius: 5, flexShrink: 0,
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
border: val ? "none" : "1.5px solid #cbd5e1",
|
||||
background: val ? "#1e3a5f" : "#fff",
|
||||
}}>
|
||||
{val && (
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none"
|
||||
stroke="#fff" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
{txt}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-wrap" style={{ border: "none", maxHeight: 420, overflow: "auto" }}>
|
||||
<table className="matriz-grid" {...colsMat.tableProps}>
|
||||
<colsMat.ColGroup />
|
||||
<thead>
|
||||
<tr>
|
||||
{colsVisibles.map((col, i) => (
|
||||
<th key={col.key} style={{ position: "sticky", top: 0, zIndex: 2,
|
||||
textAlign: i === 0 ? "left" : "center" }}>{col.label}<colsMat.Resizer index={i} /></th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.matriz_cursos.filas.map((c) => {
|
||||
const abierto = !!expMat[c.num_indice];
|
||||
return (
|
||||
<Fragment key={c.num_indice}>
|
||||
<tr>
|
||||
{colsVisibles.map((col) => col.prog ? (
|
||||
<td key={col.key} className="col-name" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{(c.subfilas_canal && c.subfilas_canal.length > 0) && (
|
||||
<span
|
||||
onClick={() => setExpMat((p) => ({ ...p, [c.num_indice]: !p[c.num_indice] }))}
|
||||
style={{ cursor: "pointer", fontWeight: 700, color: "#1e40af",
|
||||
marginRight: 6, userSelect: "none", display: "inline-block", width: 14 }}
|
||||
title="Ver por canal (Pauta / Web / Otros)">
|
||||
{abierto ? "−" : "+"}
|
||||
</span>
|
||||
)}
|
||||
{c.personalizado}
|
||||
</td>
|
||||
) : col.ver ? (
|
||||
<td key={col.key} style={{ textAlign: "center" }}>
|
||||
<button onClick={() => setModalCurso(c)}
|
||||
style={{ border: "1px solid #1e3a5f", background: "#eef2f9", color: "#1e3a5f",
|
||||
borderRadius: 7, padding: "3px 12px", fontSize: 12, fontWeight: 700,
|
||||
cursor: "pointer" }}>
|
||||
Ver
|
||||
</button>
|
||||
</td>
|
||||
) : (
|
||||
<td key={col.key} style={col.bold ? { fontWeight: 600 } : undefined}>
|
||||
{col.render ? col.render(c) : c[col.key]}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
{abierto && (c.subfilas_canal || []).map((sf) => (
|
||||
<tr key={c.num_indice + sf.canal} style={{ background: "#f8fafc" }}>
|
||||
{colsVisibles.map((col) => {
|
||||
if (col.prog) return (
|
||||
<td key={col.key} className="col-name" style={{ paddingLeft: 30, color: "#475569", fontSize: 12 }}>{sf.canal}</td>
|
||||
);
|
||||
if (col.ver) return <td key={col.key}></td>;
|
||||
// Estas columnas -> "-" en subfilas (Importe y Leads Recibidos/Procesados)
|
||||
const GUION = ["importe_pauta", "importe_pauta_mes",
|
||||
"leads_nuevos", "leads_nuevos_asesor",
|
||||
"leads_nuevos_mes", "leads_nuevos_mes_asesor"];
|
||||
if (GUION.includes(col.key)) return (
|
||||
<td key={col.key} style={{ color: "#94a3b8", fontSize: 12 }}>—</td>
|
||||
);
|
||||
const val = sf[col.key];
|
||||
return (
|
||||
<td key={col.key} style={{ color: "#475569", fontSize: 12 }}>{val === undefined ? "—" : val}</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>}
|
||||
|
||||
{/* ── Pop-up "Ver": num_indice, pauta y conjuntos de anuncios ── */}
|
||||
{modalCurso && (
|
||||
<div onClick={cerrarModal}
|
||||
style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)",
|
||||
display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000 }}>
|
||||
<div onClick={(e) => e.stopPropagation()}
|
||||
style={{ background: "#fff", borderRadius: 16, width: 560, maxWidth: "94vw",
|
||||
maxHeight: "86vh", overflow: "auto", boxShadow: "0 24px 70px rgba(0,0,0,0.4)",
|
||||
fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif" }}>
|
||||
<div style={{ background: "#1e3a5f", color: "#fff", padding: "16px 22px",
|
||||
borderTopLeftRadius: 14, borderTopRightRadius: 14,
|
||||
display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 15 }}>{modalCurso.personalizado}</div>
|
||||
<button onClick={cerrarModal}
|
||||
style={{ background: "transparent", border: "none", color: "#fff", fontSize: 22,
|
||||
cursor: "pointer", lineHeight: 1 }}>×</button>
|
||||
</div>
|
||||
<div style={{ padding: "18px 22px" }}>
|
||||
<div style={{ display: "flex", gap: 24, marginBottom: 18, alignItems: "flex-start" }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase" }}>Num Índice</div>
|
||||
<div style={{ fontSize: 18, fontWeight: 700, color: "#0f172a" }}>{modalCurso.num_indice || "—"}</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase" }}>Pauta</div>
|
||||
{editando ? (
|
||||
<input value={editPauta} onChange={(e) => setEditPauta(e.target.value)}
|
||||
placeholder="Código de pauta"
|
||||
style={{ marginTop: 4, padding: "7px 10px", border: "1px solid #cbd5e1",
|
||||
borderRadius: 8, fontSize: 14, width: "100%" }} />
|
||||
) : (
|
||||
<div style={{ fontSize: 18, fontWeight: 700, color: "#1e40af" }}>{modalCurso.pauta || "—"}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editando ? (
|
||||
<>
|
||||
<div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase", marginBottom: 6 }}>
|
||||
Vincular Conjunto de Anuncio (opcional)
|
||||
</div>
|
||||
<select value={editConj} onChange={(e) => setEditConj(e.target.value)}
|
||||
style={{ padding: "8px 10px", border: "1px solid #cbd5e1", borderRadius: 8,
|
||||
fontSize: 13, width: "100%", background: "#fff" }}>
|
||||
<option value="">— Ninguno —</option>
|
||||
{conjOpc.map((cj) => <option key={cj} value={cj}>{cj}</option>)}
|
||||
</select>
|
||||
|
||||
{/* Switch: contar SI/NO */}
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
|
||||
marginTop: 18, padding: "12px 14px", background: "#f8fafc",
|
||||
border: "1px solid #e2e8f0", borderRadius: 10 }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 600, color: "#0f172a" }}>Mostrar en la lista</div>
|
||||
<div style={{ fontSize: 12, color: "#64748b" }}>
|
||||
{editContar === "SI" ? "Este programa aparece en el Detalle por Curso" : "Este programa quedará oculto"}
|
||||
</div>
|
||||
</div>
|
||||
<div onClick={() => {
|
||||
const nuevo = editContar === "SI" ? "NO" : "SI";
|
||||
setEditContar(nuevo);
|
||||
if (nuevo === "NO") setAvisoContar(true);
|
||||
}}
|
||||
style={{ width: 46, height: 26, borderRadius: 999, cursor: "pointer",
|
||||
background: editContar === "SI" ? "#2563eb" : "#cbd5e1",
|
||||
position: "relative", transition: "background .15s", flexShrink: 0 }}>
|
||||
<div style={{ width: 20, height: 20, borderRadius: "50%", background: "#fff",
|
||||
position: "absolute", top: 3, left: editContar === "SI" ? 23 : 3,
|
||||
transition: "left .15s", boxShadow: "0 1px 3px rgba(0,0,0,0.3)" }} />
|
||||
</div>
|
||||
</div>
|
||||
{avisoContar && editContar === "NO" && (
|
||||
<div style={{ marginTop: 10, padding: "10px 12px", background: "#fffbeb",
|
||||
border: "1px solid #fde68a", borderRadius: 8, fontSize: 12.5, color: "#92400e" }}>
|
||||
⚠️ Al poner <b>NO</b> y guardar, este programa ya no aparecerá en la lista.
|
||||
Solo podrás volver a añadirlo desde Configuración.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{msgGuardar && <div style={{ marginTop: 10, fontSize: 13, color: msgGuardar.startsWith("✓") ? "#047857" : "#b91c1c" }}>{msgGuardar}</div>}
|
||||
<div style={{ display: "flex", gap: 8, marginTop: 16, justifyContent: "flex-end" }}>
|
||||
<button onClick={() => { setEditando(false); setMsgGuardar(""); setAvisoContar(false); }}
|
||||
style={{ padding: "8px 16px", border: "1px solid #cbd5e1", background: "#fff",
|
||||
borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer" }}>
|
||||
Cancelar
|
||||
</button>
|
||||
{(() => {
|
||||
const cambioContar = editContar !== (modalCurso.contar || "SI");
|
||||
const puedeGuardar = editPauta.trim() || cambioContar;
|
||||
return (
|
||||
<button disabled={guardando || !puedeGuardar}
|
||||
onClick={async () => {
|
||||
setMsgGuardar("");
|
||||
try {
|
||||
// Verificar uso solo si se ingresó pauta
|
||||
if (editPauta.trim()) {
|
||||
const uso = await api.usoPauta(editPauta.trim(), modalCurso.num_indice);
|
||||
if (uso.en_uso) { setAvisoUso(uso); return; }
|
||||
}
|
||||
await hacerGuardado();
|
||||
} catch (e) { setMsgGuardar("Error: " + e.message); }
|
||||
}}
|
||||
style={{ padding: "8px 18px", border: "none", background: "#1e3a5f", color: "#fff",
|
||||
borderRadius: 8, fontSize: 13, fontWeight: 700,
|
||||
cursor: guardando ? "wait" : "pointer", opacity: (!puedeGuardar || guardando) ? 0.6 : 1 }}>
|
||||
{guardando ? "Guardando..." : "Guardar"}
|
||||
</button>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase", marginBottom: 8 }}>
|
||||
Conjuntos de Anuncios ({(modalCurso.conjuntos || []).length})
|
||||
</div>
|
||||
{(modalCurso.conjuntos || []).length === 0 ? (
|
||||
<div style={{ color: "#94a3b8", fontSize: 13 }}>Sin conjuntos vinculados a esta pauta.</div>
|
||||
) : (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
{modalCurso.conjuntos.map((cj, i) => (
|
||||
<div key={i} style={{ background: "#f8fafc", border: "1px solid #e2e8f0",
|
||||
borderRadius: 8, padding: "8px 12px", fontSize: 13, color: "#334155" }}>
|
||||
{cj}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: "flex", justifyContent: "flex-end", marginTop: 16 }}>
|
||||
<button onClick={() => {
|
||||
setEditando(true); setEditPauta(modalCurso.pauta || ""); setEditConj("");
|
||||
setEditContar(modalCurso.contar || "SI"); setAvisoContar(false); setMsgGuardar("");
|
||||
api.conjuntosSinPauta().then((r) => setConjOpc(r.conjuntos || [])).catch(() => setConjOpc([]));
|
||||
}}
|
||||
style={{ padding: "8px 18px", border: "1px solid #1e3a5f", background: "#eef2f9",
|
||||
color: "#1e3a5f", borderRadius: 8, fontSize: 13, fontWeight: 700, cursor: "pointer" }}>
|
||||
Editar
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Advertencia: la pauta ya está en uso ── */}
|
||||
{avisoUso && (
|
||||
<div style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.6)",
|
||||
display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1100 }}>
|
||||
<div style={{ background: "#fff", borderRadius: 14, width: 440, maxWidth: "92vw",
|
||||
maxHeight: "82vh", overflow: "auto", boxShadow: "0 20px 60px rgba(0,0,0,0.4)" }}>
|
||||
<div style={{ background: "#b45309", color: "#fff", padding: "14px 20px",
|
||||
borderTopLeftRadius: 14, borderTopRightRadius: 14, fontWeight: 700, fontSize: 15 }}>
|
||||
⚠️ Esta pauta ya está en uso
|
||||
</div>
|
||||
<div style={{ padding: "18px 22px" }}>
|
||||
<div style={{ fontSize: 13, color: "#334155", marginBottom: 12 }}>
|
||||
La pauta <b>{editPauta}</b> ya está asignada a:
|
||||
</div>
|
||||
{(avisoUso.cursos || []).length > 0 && (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase", marginBottom: 4 }}>Programas</div>
|
||||
{avisoUso.cursos.map((cu, i) => (
|
||||
<div key={i} style={{ background: "#fffbeb", border: "1px solid #fde68a",
|
||||
borderRadius: 8, padding: "6px 10px", fontSize: 12, color: "#92400e", marginBottom: 4 }}>
|
||||
{cu.dsc_det_programa || "(sin nombre)"} <span style={{ color: "#b45309" }}>· índice {cu.num_indice}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{(avisoUso.conjuntos || []).length > 0 && (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase", marginBottom: 4 }}>Conjuntos de anuncios</div>
|
||||
{avisoUso.conjuntos.map((cj, i) => (
|
||||
<div key={i} style={{ background: "#f8fafc", border: "1px solid #e2e8f0",
|
||||
borderRadius: 8, padding: "6px 10px", fontSize: 12, color: "#334155", marginBottom: 4 }}>
|
||||
{cj}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ fontSize: 13, color: "#0f172a", fontWeight: 600, marginTop: 10 }}>
|
||||
¿Estás seguro de continuar?
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 8, marginTop: 16, justifyContent: "flex-end" }}>
|
||||
<button onClick={() => setAvisoUso(null)}
|
||||
style={{ padding: "8px 18px", border: "1px solid #cbd5e1", background: "#fff",
|
||||
borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer" }}>
|
||||
No
|
||||
</button>
|
||||
<button onClick={hacerGuardado}
|
||||
style={{ padding: "8px 20px", border: "none", background: "#b45309", color: "#fff",
|
||||
borderRadius: 8, fontSize: 13, fontWeight: 700, cursor: "pointer" }}>
|
||||
Sí, guardar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Tooltip personalizado: mini-gráfico de barras horizontales por tipo de programa
|
||||
function TooltipMatriculas({ active, payload, label }) {
|
||||
if (!active || !payload || !payload.length) return null;
|
||||
const p = payload[0].payload;
|
||||
const detalle = p.detalle || [];
|
||||
const max = Math.max(1, ...detalle.map((d) => d.cantidad));
|
||||
return (
|
||||
<div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 10,
|
||||
padding: "10px 12px", boxShadow: "0 6px 20px rgba(0,0,0,0.12)", minWidth: 220 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 12, color: "#1e293b", marginBottom: 2 }}>
|
||||
Día {label} — {p.cantidad} matrícula(s)
|
||||
</div>
|
||||
{detalle.length === 0 ? (
|
||||
<div style={{ fontSize: 11, color: "#94a3b8" }}>Sin matrículas</div>
|
||||
) : detalle.map((d) => (
|
||||
<div key={d.tipo} style={{ display: "flex", alignItems: "center", gap: 6, margin: "4px 0" }}>
|
||||
<span style={{ fontSize: 10, color: "#475569", width: 90, textAlign: "right",
|
||||
whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.tipo}</span>
|
||||
<div style={{ flex: 1, background: "#eff6ff", borderRadius: 3, height: 14, position: "relative" }}>
|
||||
<div style={{ width: `${(d.cantidad / max) * 100}%`, background: "#60a5fa",
|
||||
height: "100%", borderRadius: 3 }} />
|
||||
</div>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, color: "#1e40af", width: 18 }}>{d.cantidad}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function KpiRow({ ico, label, value }) {
|
||||
return (
|
||||
<div className="kpi-row">
|
||||
<span className="ico">{ico}</span>
|
||||
<div className="txt">
|
||||
<div className="label">{label}</div>
|
||||
<div className="value">{value}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
331
frontend/src/pages/OtrosGeneral.jsx
Normal file
331
frontend/src/pages/OtrosGeneral.jsx
Normal file
@@ -0,0 +1,331 @@
|
||||
import { useState, useEffect, useMemo, Fragment } from "react";
|
||||
import { api } from "../lib/api";
|
||||
import { Loader, ErrorBox, Filters, Select } from "../components/UI";
|
||||
|
||||
const MESES = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];
|
||||
|
||||
export default function OtrosGeneral() {
|
||||
const hoy = new Date();
|
||||
const [ano, setAno] = useState(String(hoy.getFullYear()));
|
||||
const [mes, setMes] = useState(String(hoy.getMonth() + 1));
|
||||
const [dia, setDia] = useState("TODOS");
|
||||
|
||||
const [filtros, setFiltros] = useState({ anos: [2026] });
|
||||
const [data, setData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [expAlways, setExpAlways] = useState({});
|
||||
const [expAlwaysProg, setExpAlwaysProg] = useState({});
|
||||
const [expWeb, setExpWeb] = useState({});
|
||||
const [expAsig, setExpAsig] = useState({});
|
||||
const [reload, setReload] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
api.leadsFiltros().then(setFiltros).catch(() => {});
|
||||
}, []);
|
||||
|
||||
// Auto-refresco cada 15 min (sin F5)
|
||||
useEffect(() => {
|
||||
const id = setInterval(() => setReload((n) => n + 1), 15 * 60 * 1000);
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let activo = true;
|
||||
if (!data) setLoading(true); // spinner solo en la primera carga
|
||||
setError(null);
|
||||
api.otrosGeneral(ano, mes, dia)
|
||||
.then((res) => { if (activo) { setData(res); setLoading(false); } })
|
||||
.catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
|
||||
return () => { activo = false; };
|
||||
}, [ano, mes, dia, reload]);
|
||||
|
||||
const optAnos = useMemo(() => (filtros.anos || []).map(String), [filtros]);
|
||||
const optMes = useMemo(() => MESES.map((m,i)=>({ value: String(i+1), label: m })), []);
|
||||
const optDia = useMemo(() => ["TODOS", ...Array.from({length:31}, (_,i)=>String(i+1))], []);
|
||||
|
||||
const money = (v) => `$${Number(v).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
||||
const sol = (v) => `S/ ${Number(v || 0).toLocaleString("en-US", { maximumFractionDigits: 0 })}`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="page-title">📊 Otros General</h1>
|
||||
|
||||
<Filters>
|
||||
<Select label="Año" value={ano} options={optAnos} onChange={setAno} />
|
||||
<Select label="Mes" value={mes} options={optMes} onChange={setMes} />
|
||||
<Select label="Día" value={dia} options={optDia} onChange={setDia} />
|
||||
</Filters>
|
||||
|
||||
{loading ? <Loader text="Cargando..." /> :
|
||||
error ? <ErrorBox msg={error} /> :
|
||||
!data ? <ErrorBox msg="Sin datos" /> :
|
||||
<>
|
||||
{/* ── Inversión Publicitaria por Sede (Always On) ── */}
|
||||
{data.matriz_always && data.matriz_always.filas && (
|
||||
<div className="card" style={{ marginTop: 4, padding: 0, overflow: "hidden" }}>
|
||||
<div className="card-title" style={{ padding: "14px 16px 6px" }}>Inversión Publicitaria por Sede (Always On)</div>
|
||||
<div className="table-wrap" style={{ border: "none", maxHeight: 420, overflow: "auto" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ textAlign: "left" }}>Sede</th>
|
||||
<th>Importe Gastado</th>
|
||||
<th>Resultados</th>
|
||||
<th>Leads Recibidos</th>
|
||||
<th>Leads Procesados</th>
|
||||
<th>Matrículas</th>
|
||||
<th>Valor Venta</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.matriz_always.filas.map((f) => {
|
||||
const abierto = !!expAlways[f.sede];
|
||||
return (
|
||||
<Fragment key={f.sede}>
|
||||
<tr>
|
||||
<td className="col-name">
|
||||
<span
|
||||
onClick={() => setExpAlways((p) => ({ ...p, [f.sede]: !p[f.sede] }))}
|
||||
style={{ cursor: "pointer", fontWeight: 700, color: "#1e40af",
|
||||
marginRight: 6, userSelect: "none", display: "inline-block", width: 14 }}
|
||||
title="Ver por programa">
|
||||
{abierto ? "−" : "+"}
|
||||
</span>
|
||||
{f.sede}
|
||||
</td>
|
||||
<td style={{ fontWeight: 600 }}>{money(f.importe)}</td>
|
||||
<td>{f.resultados}</td>
|
||||
<td>{f.nuevos}</td>
|
||||
<td>{f.nuevos_asig}</td>
|
||||
<td style={{ fontWeight: 600 }}>{f.matriculas}</td>
|
||||
<td style={{ fontWeight: 600 }}>{sol(f.venta)}</td>
|
||||
</tr>
|
||||
{abierto && f.subfilas.map((s) => {
|
||||
const kProg = f.sede + "|" + s.programa;
|
||||
const abiertoP = !!expAlwaysProg[kProg];
|
||||
return (
|
||||
<Fragment key={kProg}>
|
||||
<tr style={{ background: "#f8fafc" }}>
|
||||
<td className="col-name" style={{ paddingLeft: 28, color: "#475569" }}>
|
||||
<span
|
||||
onClick={() => setExpAlwaysProg((p) => ({ ...p, [kProg]: !p[kProg] }))}
|
||||
style={{ cursor: "pointer", fontWeight: 700, color: "#1e40af",
|
||||
marginRight: 6, userSelect: "none", display: "inline-block", width: 14 }}
|
||||
title="Ver por pauta">
|
||||
{abiertoP ? "−" : "+"}
|
||||
</span>
|
||||
{s.programa}
|
||||
</td>
|
||||
<td style={{ color: "#475569", fontWeight: 600 }}>{money(s.importe)}</td>
|
||||
<td style={{ color: "#475569" }}>{s.resultados}</td>
|
||||
<td style={{ color: "#475569" }}>{s.nuevos}</td>
|
||||
<td style={{ color: "#475569" }}>{s.nuevos_asig}</td>
|
||||
<td style={{ color: "#475569", fontWeight: 600 }}>{s.matriculas}</td>
|
||||
<td style={{ color: "#475569", fontWeight: 600 }}>{sol(s.venta)}</td>
|
||||
</tr>
|
||||
{abiertoP && (s.pautas || []).map((pt) => (
|
||||
<tr key={kProg + pt.pauta} style={{ background: "#eef2f7" }}>
|
||||
<td className="col-name" style={{ paddingLeft: 56, color: "#64748b", fontSize: 12 }}>Pauta {pt.pauta}</td>
|
||||
<td style={{ color: "#64748b", fontSize: 12 }}>{money(pt.importe)}</td>
|
||||
<td style={{ color: "#64748b", fontSize: 12 }}>{pt.resultados}</td>
|
||||
<td style={{ color: "#64748b", fontSize: 12 }}>{pt.nuevos}</td>
|
||||
<td style={{ color: "#64748b", fontSize: 12 }}>{pt.nuevos_asig}</td>
|
||||
<td style={{ color: "#64748b", fontSize: 12 }}>{pt.matriculas}</td>
|
||||
<td style={{ color: "#64748b", fontSize: 12 }}>{sol(pt.venta)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
{data.matriz_always.total && (
|
||||
<tr className="total-row">
|
||||
<td className="col-name">Total</td>
|
||||
<td>{money(data.matriz_always.total.importe)}</td>
|
||||
<td>{data.matriz_always.total.resultados}</td>
|
||||
<td>{data.matriz_always.total.nuevos}</td>
|
||||
<td>{data.matriz_always.total.nuevos_asig}</td>
|
||||
<td>{data.matriz_always.total.matriculas}</td>
|
||||
<td>{sol(data.matriz_always.total.venta)}</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Leads Web Formulario por Sede ── */}
|
||||
{data.matriz_webform && data.matriz_webform.filas && (
|
||||
<div className="card" style={{ marginTop: 16, padding: 0, overflow: "hidden" }}>
|
||||
<div className="card-title" style={{ padding: "14px 16px 6px" }}>Leads Web Formulario por Sede</div>
|
||||
<div className="table-wrap" style={{ border: "none", maxHeight: 420, overflow: "auto" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 150 }}>Sede</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Leads Recibidos</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Leads Procesados</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Matrículas</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 130, whiteSpace: "nowrap" }}>Valor Venta</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.matriz_webform.filas.map((f) => {
|
||||
const abierto = !!expWeb[f.sede];
|
||||
return (
|
||||
<Fragment key={f.sede}>
|
||||
<tr>
|
||||
<td className="col-name">
|
||||
<button onClick={() => setExpWeb((p) => ({ ...p, [f.sede]: !p[f.sede] }))}
|
||||
style={{ border: "none", background: "transparent", cursor: "pointer",
|
||||
fontWeight: 700, marginRight: 6, color: "#2563eb", fontSize: 14 }}>
|
||||
{abierto ? "−" : "+"}
|
||||
</button>
|
||||
{f.sede}
|
||||
</td>
|
||||
<td>{f.recibidos}</td>
|
||||
<td>{f.procesados}</td>
|
||||
<td style={{ fontWeight: 600 }}>{f.matriculas}</td>
|
||||
<td style={{ fontWeight: 600 }}>{sol(f.venta)}</td>
|
||||
</tr>
|
||||
{abierto && f.subfilas.map((s) => (
|
||||
<tr key={f.sede + s.programa} style={{ background: "#f8fafc" }}>
|
||||
<td className="col-name" style={{ paddingLeft: 30, color: "#475569", fontSize: 12 }}>{s.programa}</td>
|
||||
<td style={{ color: "#475569", fontSize: 12 }}>{s.recibidos}</td>
|
||||
<td style={{ color: "#475569", fontSize: 12 }}>{s.procesados}</td>
|
||||
<td style={{ color: "#475569", fontSize: 12 }}>{s.matriculas}</td>
|
||||
<td style={{ color: "#475569", fontSize: 12 }}>{sol(s.venta)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
{data.matriz_webform.total && (
|
||||
<tr className="total-row">
|
||||
<td className="col-name">Total</td>
|
||||
<td>{data.matriz_webform.total.recibidos}</td>
|
||||
<td>{data.matriz_webform.total.procesados}</td>
|
||||
<td>{data.matriz_webform.total.matriculas}</td>
|
||||
<td>{sol(data.matriz_webform.total.venta)}</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Leads Asignados por Asesor y Día (pivot) ── */}
|
||||
{data.matriz_asignados && data.matriz_asignados.filas && (
|
||||
<div className="card" style={{ marginTop: 16, padding: 0, overflow: "hidden" }}>
|
||||
<div className="card-title" style={{ padding: "14px 16px 6px" }}>Leads Asignados por Asesor y Día</div>
|
||||
<div className="table-wrap" style={{ border: "none", maxHeight: 460, overflow: "auto" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="col-name" style={{ position: "sticky", top: 0, left: 0, zIndex: 3, minWidth: 180, background: "#1e3a5f" }}>Asesor</th>
|
||||
{data.matriz_asignados.dias.map((d) => (
|
||||
<th key={d} style={{ position: "sticky", top: 0, zIndex: 2 }}>{d}</th>
|
||||
))}
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 70 }}>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.matriz_asignados.filas.map((f) => {
|
||||
const abierto = !!expAsig[f.asesor];
|
||||
return (
|
||||
<Fragment key={f.asesor}>
|
||||
<tr>
|
||||
<td className="col-name">
|
||||
<button onClick={() => setExpAsig((p) => ({ ...p, [f.asesor]: !p[f.asesor] }))}
|
||||
style={{ border: "none", background: "transparent", cursor: "pointer",
|
||||
fontWeight: 700, marginRight: 6, color: "#2563eb", fontSize: 14 }}>
|
||||
{abierto ? "−" : "+"}
|
||||
</button>
|
||||
{f.asesor}
|
||||
</td>
|
||||
{data.matriz_asignados.dias.map((d) => (
|
||||
<td key={d} style={{ color: f.por_dia[d] ? "#0f172a" : "#cbd5e1" }}>{f.por_dia[d] || ""}</td>
|
||||
))}
|
||||
<td style={{ fontWeight: 700 }}>{f.total}</td>
|
||||
</tr>
|
||||
{abierto && (
|
||||
<tr>
|
||||
<td colSpan={data.matriz_asignados.dias.length + 2} style={{ background: "#f8fafc", padding: "8px 14px" }}>
|
||||
{Object.keys(f.tels_dia).length === 0
|
||||
? <span style={{ color: "#94a3b8" }}>—</span>
|
||||
: Object.entries(f.tels_dia).map(([d, tels]) => (
|
||||
<div key={d} style={{ marginBottom: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 600, color: "#475569" }}>Día {d} ({tels.length}): </span>
|
||||
<span style={{ fontSize: 12, color: "#64748b" }}>{tels.join(", ")}</span>
|
||||
</div>
|
||||
))}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
<tr className="total-row">
|
||||
<td className="col-name">Total</td>
|
||||
{data.matriz_asignados.dias.map((d) => (
|
||||
<td key={d}>{data.matriz_asignados.total_por_dia[d] || ""}</td>
|
||||
))}
|
||||
<td>{data.matriz_asignados.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Plantillas WhatsApp (cobradas) por Plantilla ── */}
|
||||
{data.matriz_plantillas && data.matriz_plantillas.filas && (
|
||||
<div className="card" style={{ marginTop: 16, padding: 0, overflow: "hidden" }}>
|
||||
<div className="card-title" style={{ padding: "14px 16px 6px" }}>Plantillas WhatsApp (cobradas)</div>
|
||||
<div className="table-wrap" style={{ border: "none", maxHeight: 460, overflow: "auto" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 220 }}>Plantilla</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Enviadas</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Respondidas</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Asignadas</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2 }}>Matrículas</th>
|
||||
<th style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 130, whiteSpace: "nowrap" }}>Valor Venta</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.matriz_plantillas.filas.map((f) => (
|
||||
<tr key={f.plantilla}>
|
||||
<td className="col-name">{f.plantilla}</td>
|
||||
<td style={{ fontWeight: 600 }}>{f.enviadas}</td>
|
||||
<td>{f.respondidas}</td>
|
||||
<td>{f.asignadas}</td>
|
||||
<td style={{ fontWeight: 600 }}>{f.matriculas}</td>
|
||||
<td style={{ fontWeight: 600 }}>{sol(f.venta)}</td>
|
||||
</tr>
|
||||
))}
|
||||
{data.matriz_plantillas.total && (
|
||||
<tr className="total-row">
|
||||
<td className="col-name">Total</td>
|
||||
<td>{data.matriz_plantillas.total.enviadas}</td>
|
||||
<td>{data.matriz_plantillas.total.respondidas}</td>
|
||||
<td>{data.matriz_plantillas.total.asignadas}</td>
|
||||
<td>{data.matriz_plantillas.total.matriculas}</td>
|
||||
<td>{sol(data.matriz_plantillas.total.venta)}</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
74
frontend/src/styles.css
Normal file
74
frontend/src/styles.css
Normal file
@@ -0,0 +1,74 @@
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f1f5f9; color: #0f172a; }
|
||||
|
||||
.app { display: flex; height: 100vh; overflow: hidden; }
|
||||
|
||||
/* ── Sidebar fija ── */
|
||||
.sidebar {
|
||||
width: 240px; background: #0f172a; color: #e2e8f0;
|
||||
display: flex; flex-direction: column; flex-shrink: 0;
|
||||
height: 100vh; position: sticky; top: 0;
|
||||
}
|
||||
.sidebar-logo { padding: 22px 18px; font-size: 18px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-logo span { color: #60a5fa; }
|
||||
.nav { padding: 12px 8px; }
|
||||
.nav-item {
|
||||
width: 100%; text-align: left; padding: 11px 14px; margin-bottom: 4px;
|
||||
background: transparent; border: none; color: #cbd5e1; border-radius: 8px;
|
||||
cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.nav-item:hover { background: rgba(255,255,255,0.06); }
|
||||
.nav-item.active { background: #2563eb; color: #fff; font-weight: 600; }
|
||||
|
||||
.main { flex: 1; padding: 24px 28px; overflow-y: auto; height: 100vh; }
|
||||
.page-title { font-size: 24px; font-weight: 700; margin-bottom: 18px; color: #0f172a; }
|
||||
|
||||
/* ── Filtros ── */
|
||||
.filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
|
||||
.filter-group { display: flex; flex-direction: column; gap: 4px; }
|
||||
.filter-group label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .3px; }
|
||||
.filter-group select {
|
||||
padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px;
|
||||
background: #fff; min-width: 130px; cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── KPIs ── */
|
||||
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
|
||||
.kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; }
|
||||
.kpi .ico { font-size: 22px; margin-bottom: 6px; }
|
||||
.kpi .label { font-size: 13px; font-weight: 600; color: #475569; }
|
||||
.kpi .value { font-size: 26px; font-weight: 800; color: #0f172a; margin: 4px 0; }
|
||||
.kpi .sub { font-size: 11px; color: #94a3b8; }
|
||||
|
||||
/* tarjeta compuesta (varios sub-kpis) */
|
||||
.kpi-multi { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
|
||||
.kpi-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
|
||||
.kpi-row + .kpi-row { border-top: 1px solid #f1f5f9; }
|
||||
.kpi-row .ico { font-size: 24px; width: 34px; text-align: center; flex-shrink: 0; }
|
||||
.kpi-row .txt { line-height: 1.25; }
|
||||
.kpi-row .txt .label { font-size: 12px; font-weight: 600; color: #64748b; }
|
||||
.kpi-row .txt .value { font-size: 21px; font-weight: 800; color: #0f172a; }
|
||||
|
||||
/* ── Tablas ── */
|
||||
.table-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: auto; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { background: #1e3a5f; color: #f1f5f9; padding: 10px 12px; font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; }
|
||||
td { padding: 9px 12px; font-size: 13px; border-bottom: 1px solid #f1f5f9; text-align: center; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
.total-row td { background: #eff6ff; font-weight: 700; }
|
||||
.col-name { text-align: left !important; }
|
||||
|
||||
/* ── Loader / error ── */
|
||||
.loader-wrap { display: flex; flex-direction: column; align-items: center; padding: 50px; color: #64748b; }
|
||||
.spinner { width: 36px; height: 36px; border: 4px solid #e2e8f0; border-top-color: #2563eb; border-radius: 50%; animation: spin 1s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.loader-text { margin-top: 12px; font-size: 14px; }
|
||||
.error-box { background: #fee2e2; color: #991b1b; padding: 14px 18px; border-radius: 10px; font-size: 14px; }
|
||||
|
||||
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; }
|
||||
.card-title { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 12px; }
|
||||
|
||||
/* Matriz "Detalle por Curso": líneas verticales suaves entre columnas (solo cuerpo) */
|
||||
.matriz-grid tbody td { border-right: 1px solid #eef2f7; }
|
||||
.matriz-grid tbody td:last-child { border-right: none; }
|
||||
7
frontend/vite.config.js
Normal file
7
frontend/vite.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: { port: 5174 },
|
||||
});
|
||||
Reference in New Issue
Block a user