Actualizar dominios a dashboardapi y dashboardv1

frontend/src/pages/Vendedores.jsx

@@ -0,0 +1,423 @@
+import { useState, useEffect, useMemo } from "react";
+import { api } from "../lib/api";
+import { Loader, ErrorBox, Filters, Select } from "../components/UI";
+import {
+  AreaChart, Area, BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
+} from "recharts";
+
+const MESES = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];
+
+export default function Vendedores() {
+  const _hoy = new Date();
+  const [vend, setVend] = useState("TODOS");
+  const [ano, setAno] = useState(String(_hoy.getFullYear()));   // año actual
+  const [mes, setMes] = useState(String(_hoy.getMonth() + 1));  // mes actual
+  const [dia, setDia] = useState("TODOS");
+  const [modoTR, setModoTR] = useState("asig");   // "asig" | "resp" para el grafico de tiempo
+
+  const [filtros, setFiltros] = useState({ anos: [2026] });
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [recargando, setRecargando] = useState(false);
+  const [error, setError] = useState(null);
+  const [reload, setReload] = useState(0);
+
+  useEffect(() => { api.leadsFiltros().then(setFiltros).catch(() => {}); }, []);
+  useEffect(() => {
+    const id = setInterval(() => setReload((n) => n + 1), 15 * 60 * 1000);
+    const onActualizar = () => setReload((n) => n + 1);   // recarga al guardar en Config
+    window.addEventListener("datos-actualizar", onActualizar);
+    return () => { clearInterval(id); window.removeEventListener("datos-actualizar", onActualizar); };
+  }, []);
+
+  useEffect(() => {
+    let activo = true;
+    if (!data) setLoading(true);
+    setRecargando(true);       // atenuar contenido mientras se recalcula
+    setError(null);
+    api.vendedores(ano, mes, dia)
+      .then((res) => { if (activo) { setData(res); setLoading(false); setRecargando(false); } })
+      .catch((e) => { if (activo) { setError(e.message); setLoading(false); setRecargando(false); } });
+    return () => { activo = false; };
+  }, [ano, mes, dia, reload]);
+
+  const optVend = useMemo(() => ["TODOS", ...((data && data.vendedores) || [])], [data]);
+  const optAnos = useMemo(() => {
+    const anos = (filtros.anos || []).map(String);
+    const actual = String(_hoy.getFullYear());
+    if (!anos.includes(actual)) anos.push(actual);   // asegura que el año actual sea opcion
+    return ["TODOS", ...anos];
+  }, [filtros]);
+  const optMes  = useMemo(() => [{ value: "TODOS", label: "TODOS" },
+                                 ...MESES.map((m,i)=>({ value: String(i+1), label: m }))], []);
+  const optDia  = useMemo(() => ["TODOS", ...Array.from({length:31}, (_,i)=>String(i+1))], []);
+
+  // Filas visibles: si hay vendedor filtrado, solo esa; si no, todas
+  const filas = useMemo(() => {
+    if (!data) return [];
+    if (vend === "TODOS") return data.filas;
+    return data.filas.filter((f) => f.vendedor === vend);
+  }, [data, vend]);
+
+  const num = (v) => Number(v || 0).toLocaleString("es-PE");
+
+  // Resumen para las tarjetas: si hay 1 vendedor filtrado -> esa fila; si TODOS -> el total
+  const resumen = useMemo(() => {
+    if (!data) return null;
+    if (vend !== "TODOS") return data.filas.find((f) => f.vendedor === vend) || null;
+    return data.total || null;
+  }, [data, vend]);
+
+  // Matriz por programa: si hay 1 vendedor -> la suya; si TODOS -> el total
+  const matrizProg = useMemo(() => {
+    if (!data) return [];
+    if (vend !== "TODOS") return (data.matriz_prog && data.matriz_prog[vend]) || [];
+    return data.matriz_prog_total || [];
+  }, [data, vend]);
+
+  // Matriz Estado/Objeción (Ultima_Etiqueta): por vendedor o total
+  const matrizEtiq = useMemo(() => {
+    if (!data) return [];
+    if (vend !== "TODOS") return (data.matriz_etiq && data.matriz_etiq[vend]) || [];
+    return data.matriz_etiq_total || [];
+  }, [data, vend]);
+
+  // Serie diaria (asignados + matriculas): por vendedor o total
+  const serieDia = useMemo(() => {
+    if (!data) return [];
+    if (vend !== "TODOS") return (data.serie_dia && data.serie_dia[vend]) || [];
+    return data.serie_dia_total || [];
+  }, [data, vend]);
+
+  // Serie tiempo de respuesta (promedio min por dia de asignacion)
+  const serieTR = useMemo(() => {
+    if (!data) return [];
+    if (vend !== "TODOS") return (data.tiempo_resp && data.tiempo_resp[vend]) || [];
+    return data.tiempo_resp_total || [];
+  }, [data, vend]);
+
+  // Serie tiempo de respuesta (promedio min por dia de RESPUESTA)
+  const serieTRr = useMemo(() => {
+    if (!data) return [];
+    if (vend !== "TODOS") return (data.tiempo_resp_r && data.tiempo_resp_r[vend]) || [];
+    return data.tiempo_resp_r_total || [];
+  }, [data, vend]);
+
+  return (
+    <div>
+      <h1 className="page-title">🧑‍💼 Vendedores</h1>
+
+      <Filters>
+        <Select label="Vendedor" value={vend} options={optVend} onChange={setVend} />
+        <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 vendedores..." /> :
+       error ? <ErrorBox msg={error} /> :
+       !data ? <ErrorBox msg="Sin datos" /> :
+       <div style={{ opacity: recargando ? 0.45 : 1,
+                     filter: recargando ? "grayscale(0.2)" : "none",
+                     pointerEvents: recargando ? "none" : "auto",
+                     transition: "opacity 0.25s ease, filter 0.25s ease" }}>
+       {resumen && <ResumenTarjetas r={resumen} num={num} />}
+
+       {/* Gráfico día a día + Estado/Objeción lado a lado */}
+       <div style={{ display: "grid", gridTemplateColumns: "minmax(380px, 2fr) minmax(300px, 1fr)",
+                     gap: 16, marginTop: 16 }}>
+
+         {/* Gráfico día a día: Leads Procesados vs Matrículas */}
+         <div className="card">
+           <div className="card-title">
+             Leads Asignados y Matrículas por Día{vend !== "TODOS" ? ` — ${vend}` : ""}
+           </div>
+           <ResponsiveContainer width="100%" height={360}>
+             <AreaChart data={serieDia} margin={{ top: 10, right: 24, left: -6, bottom: 8 }}>
+               <defs>
+                 <linearGradient id="gradProcV" 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="gradMatV" x1="0" y1="0" x2="0" y2="1">
+                   <stop offset="0%" stopColor="#0f766e" stopOpacity={0.55} />
+                   <stop offset="100%" stopColor="#0f766e" stopOpacity={0.08} />
+                 </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="asignados" name="Leads Asignados" stroke="#60a5fa"
+                     fill="url(#gradProcV)" strokeWidth={2.5}
+                     dot={{ r: 2.5, fill: "#60a5fa", stroke: "#fff", strokeWidth: 1 }}
+                     activeDot={{ r: 5 }} />
+               <Area type="linear" dataKey="matriculas" name="Matrículas" stroke="#0f766e"
+                     fill="url(#gradMatV)" strokeWidth={2.5}
+                     dot={{ r: 2.5, fill: "#0f766e", stroke: "#fff", strokeWidth: 1 }}
+                     activeDot={{ r: 5 }} />
+             </AreaChart>
+           </ResponsiveContainer>
+         </div>
+
+         {/* Matriz Estado/Objeción (Ultima_Etiqueta) — al costado del gráfico */}
+         <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+           <div className="card-title" style={{ padding: "14px 16px 6px" }}>
+             Estado/Objeción{vend !== "TODOS" ? ` — ${vend}` : ""}
+           </div>
+           <div className="table-wrap" style={{ border: "none", maxHeight: 360, overflow: "auto" }}>
+             <table>
+               <thead>
+                 <tr>
+                   <th className="col-name" style={{ position: "sticky", top: 0, zIndex: 2, minWidth: 160 }}>Estado/Objeción</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Leads Asignados</th>
+                 </tr>
+               </thead>
+               <tbody>
+                 {matrizEtiq.map((e) => (
+                   <tr key={e.estado}>
+                     <td className="col-name">{e.estado}</td>
+                     <td>{num(e.cantidad)}</td>
+                   </tr>
+                 ))}
+                 {matrizEtiq.length > 0 && (
+                   <tr className="total-row">
+                     <td className="col-name">Total</td>
+                     <td>{num(matrizEtiq.reduce((s, e) => s + (e.cantidad || 0), 0))}</td>
+                   </tr>
+                 )}
+               </tbody>
+             </table>
+           </div>
+         </div>
+       </div>
+
+
+       {/* Tiempo de respuesta + Sin responder, lado a lado */}
+       <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16, marginTop: 16 }}>
+       {(() => {
+         const esResp = modoTR === "resp";
+         const serie = esResp ? serieTRr : serieTR;
+         const color = esResp ? "#2563eb" : "#f59e0b";
+         const colorSoft = esResp ? "#3b82f6" : "#fbbf24";
+         return (
+       <div>
+         <div className="card" style={{ display: "flex", flexDirection: "column", height: 400 }}>
+           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
+                         height: 40, marginBottom: 8, gap: 8 }}>
+             <div style={{ fontSize: 15, fontWeight: 700, color: "#0f172a" }}>
+               Tiempo de Respuesta por Día (min){vend !== "TODOS" ? ` — ${vend}` : ""}
+             </div>
+             <select value={modoTR} onChange={(e) => setModoTR(e.target.value)}
+                     style={{ fontSize: 12.5, padding: "6px 10px", borderRadius: 8,
+                              border: "1px solid #e2e8f0", background: "#f8fafc",
+                              color: "#334155", fontWeight: 600, cursor: "pointer" }}>
+               <option value="asig">📌 Según Asignación</option>
+               <option value="resp">✅ Según Respuesta</option>
+             </select>
+           </div>
+           <div style={{ flex: 1 }}>
+           <ResponsiveContainer width="100%" height="100%">
+             <LineChart data={serie} margin={{ top: 12, right: 24, left: -6, bottom: 8 }}>
+               <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" 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={38} />
+               <Tooltip content={({ active, payload, label }) => {
+                          if (!active || !payload || !payload.length) return null;
+                          const d = payload[0].payload || {};
+                          return (
+                            <div style={{ background: "#fff", borderRadius: 10, border: "1px solid #e2e8f0",
+                                          boxShadow: "0 8px 24px rgba(0,0,0,0.12)", fontSize: 12,
+                                          padding: "10px 13px", lineHeight: 1.7 }}>
+                              <div style={{ fontWeight: 700, color: "#0f172a", marginBottom: 4 }}>Día {label}</div>
+                              <div style={{ color, fontWeight: 700 }}>Promedio: {d.promedio_min || 0} min</div>
+                              <div style={{ color: "#0f766e" }}>Respondidos{esResp ? " ese día" : ""}: {d.respondidos || 0}</div>
+                              {esResp
+                                ? <div style={{ color: "#94a3b8", fontSize: 11.5 }}>⚠ Respuesta tardía (+2 días): {d.tardios || 0}</div>
+                                : <div style={{ color: "#b91c1c" }}>Sin responder: {d.no_respondidos || 0}</div>}
+                            </div>
+                          );
+                        }} />
+               <Line type="linear" dataKey="promedio_min" name="Promedio (min)" stroke={color}
+                     strokeWidth={2.5}
+                     dot={{ r: 3, fill: color, stroke: "#fff", strokeWidth: 1.5 }}
+                     activeDot={{ r: 6, fill: colorSoft, stroke: "#fff", strokeWidth: 2 }} />
+             </LineChart>
+           </ResponsiveContainer>
+           </div>
+         </div>
+       </div>
+         );
+       })()}
+
+       {/* Leads SIN responder por día (fecha de asignación) — barras */}
+       <div>
+         <div className="card" style={{ display: "flex", flexDirection: "column", height: 400 }}>
+           <div className="card-title" style={{ display: "flex", alignItems: "center", gap: 6, height: 40, marginBottom: 8 }}>
+             <span style={{ width: 10, height: 10, borderRadius: 3, background: "#f43f5e", display: "inline-block" }} />
+             Leads Sin Responder por Día{vend !== "TODOS" ? ` — ${vend}` : ""}
+           </div>
+           <div style={{ flex: 1 }}>
+           {(() => {
+             const datosNR = serieTR.filter((d) => (d.no_respondidos || 0) >= 1);
+             if (datosNR.length === 0) {
+               return (
+                 <div style={{ height: "100%", display: "flex", flexDirection: "column",
+                               alignItems: "center", justifyContent: "center", color: "#94a3b8", gap: 8 }}>
+                   <div style={{ fontSize: 34 }}>✅</div>
+                   <div style={{ fontSize: 13.5, fontWeight: 600, color: "#0f766e" }}>Sin leads pendientes</div>
+                   <div style={{ fontSize: 12 }}>Todos los leads del periodo fueron respondidos.</div>
+                 </div>
+               );
+             }
+             return (
+           <ResponsiveContainer width="100%" height="100%">
+             <BarChart data={datosNR} margin={{ top: 12, right: 24, left: -6, bottom: 8 }}>
+               <defs>
+                 <linearGradient id="gradNoResp" x1="0" y1="0" x2="0" y2="1">
+                   <stop offset="0%" stopColor="#fb7185" stopOpacity={1} />
+                   <stop offset="100%" stopColor="#f43f5e" stopOpacity={0.85} />
+                 </linearGradient>
+               </defs>
+               <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" 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 cursor={{ fill: "#fef2f2" }} content={({ active, payload, label }) => {
+                          if (!active || !payload || !payload.length) return null;
+                          const d = payload[0].payload || {};
+                          return (
+                            <div style={{ background: "#fff", borderRadius: 10, border: "1px solid #e2e8f0",
+                                          boxShadow: "0 8px 24px rgba(0,0,0,0.12)", fontSize: 12,
+                                          padding: "10px 13px", lineHeight: 1.7 }}>
+                              <div style={{ fontWeight: 700, color: "#0f172a", marginBottom: 4 }}>Día {label}</div>
+                              <div style={{ color: "#e11d48", fontWeight: 700 }}>Sin responder: {d.no_respondidos || 0}</div>
+                              <div style={{ color: "#0f766e" }}>Respondidos: {d.respondidos || 0}</div>
+                            </div>
+                          );
+                        }} />
+               <Bar dataKey="no_respondidos" name="Sin responder" fill="url(#gradNoResp)" radius={[4, 4, 0, 0]} maxBarSize={26} />
+             </BarChart>
+           </ResponsiveContainer>
+             );
+           })()}
+           </div>
+         </div>
+       </div>
+       </div>
+
+       {/* Matriz por tipo de programa (al final) */}
+       <div style={{ marginTop: 16 }}>
+         <div className="card" style={{ padding: 0, overflow: "hidden" }}>
+           <div className="card-title" style={{ padding: "14px 16px 6px" }}>
+             Matrículas por Tipo de Programa{vend !== "TODOS" ? ` — ${vend}` : ""}
+           </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 }}>Tipo de Programa</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Total Matrículas</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>Retiradas</th>
+                   <th style={{ position: "sticky", top: 0, zIndex: 2 }}>% Retirados</th>
+                 </tr>
+               </thead>
+               <tbody>
+                 {matrizProg.map((p) => (
+                   <tr key={p.programa}>
+                     <td className="col-name">{p.programa}</td>
+                     <td style={{ fontWeight: 600 }}>{num(p.total)}</td>
+                     <td>{num(p.retiradas)}</td>
+                     <td>{Number(p.pct_retiradas || 0).toLocaleString("es-PE")}%</td>
+                   </tr>
+                 ))}
+                 {matrizProg.length > 0 && (
+                   <tr className="total-row">
+                     <td className="col-name">Total</td>
+                     <td>{num(matrizProg.reduce((s, p) => s + (p.total || 0), 0))}</td>
+                     <td>{num(matrizProg.reduce((s, p) => s + (p.retiradas || 0), 0))}</td>
+                     <td>{(() => {
+                       const t = matrizProg.reduce((s, p) => s + (p.total || 0), 0);
+                       const r = matrizProg.reduce((s, p) => s + (p.retiradas || 0), 0);
+                       return `${(t ? Math.round(r / t * 1000) / 10 : 0).toLocaleString("es-PE")}%`;
+                     })()}</td>
+                   </tr>
+                 )}
+               </tbody>
+             </table>
+           </div>
+         </div>
+       </div>
+
+       </div>}
+    </div>
+  );
+}
+
+// ── Tarjetas de resumen: 3 grupos (Cartera / Matrículas / Leads) en lista ─────
+function ResumenTarjetas({ r, num }) {
+  const pct = Number(r.pct_retiradas || 0);
+  const pctCont = Number(r.pct_contactados || 0);
+  const grupos = [
+    {
+      titulo: "Cartera", acento: "#2563eb",
+      filas: [
+        { label: "Total",  valor: num(r.cartera_total) },
+        { label: "Copito", valor: num(r.cartera_copito) },
+        { label: "Otros",  valor: num(r.cartera_otros) },
+      ],
+    },
+    {
+      titulo: "Matrículas", acento: "#0f766e",
+      filas: [
+        { label: "Total",        valor: num(r.mat_total) },
+        { label: "Retiradas",    valor: num(r.mat_retiradas) },
+        { label: "% Retirados",  valor: `${pct.toLocaleString("es-PE")}%`, alerta: true },
+      ],
+    },
+    {
+      titulo: "Leads", acento: "#7c3aed",
+      filas: [
+        { label: "Asignados",     valor: num(r.leads_asignados) },
+        { label: "Contactados",   valor: num(r.leads_contactados) },
+        { label: "% Contactados", valor: `${pctCont.toLocaleString("es-PE")}%`, resalta: "#7c3aed" },
+      ],
+    },
+  ];
+
+  return (
+    <div style={{ display: "grid",
+                  gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+                  gap: 12, marginBottom: 18 }}>
+      {grupos.map((g) => (
+        <div key={g.titulo} style={{
+          background: "#fff", border: "1px solid #e8ecf3", borderRadius: 12,
+          padding: "14px 16px", boxShadow: "0 1px 3px rgba(16,24,40,0.05)" }}>
+          <div style={{ fontSize: 11, fontWeight: 700, color: g.acento,
+                        textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 10 }}>
+            {g.titulo}
+          </div>
+          {g.filas.map((f, i) => (
+            <div key={f.label} style={{
+              display: "flex", justifyContent: "space-between", alignItems: "center",
+              padding: "6px 0",
+              borderBottom: i < g.filas.length - 1 ? "1px solid #f1f5f9" : "none" }}>
+              <span style={{ fontSize: 12.5, color: "#64748b" }}>{f.label}</span>
+              <span style={{ fontSize: 15, fontWeight: 700,
+                             color: f.alerta ? "#b91c1c" : (f.resalta || "#0f172a") }}>
+                {f.valor}
+              </span>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}