Dashboard Leads - version limpia para servidor (.env y config de despliegue restaurados)

frontend/src/lib/api.js

@@ -0,0 +1,148 @@
+// Cliente del backend FastAPI de Leads.
+// 1) Si existe VITE_API_URL (archivo .env del frontend), se usa esa.
+// 2) Si no, se decide por el host desde el que se abrió la página:
+//      localhost      -> backend local  http://localhost:8001
+//      cualquier otro -> API publicada del servidor
+// Así funciona en desarrollo y en el servidor sin necesitar ningún .env.
+const API_LOCAL = "http://localhost:8001";
+const API_SERVIDOR = "https://api-leads.escueladerefrigeracion.lat";
+
+function _baseUrlPorDefecto() {
+  if (typeof window === "undefined") return API_LOCAL;
+  const h = window.location.hostname;
+  return h === "localhost" || h === "127.0.0.1" || h === "::1"
+    ? API_LOCAL
+    : API_SERVIDOR;
+}
+
+const BASE_URL = (
+  import.meta.env.VITE_API_URL || _baseUrlPorDefecto()
+).replace(/\/+$/, "");
+
+// ── Cache en memoria (frontend) con TTL 15 min y "stale-while-revalidate" ──
+// Guarda la respuesta de cada GET (por path+params). Al volver a pedir:
+//   - si hay dato vigente (< 15 min) -> lo devuelve al instante, SIN fetch.
+//   - si venció -> devuelve el viejo al instante Y refresca en 2º plano.
+// Así, al cambiar de apartado y volver, NO se recarga; y a los 15 min se
+// actualiza solo sin mostrar loader. Los POST invalidan el cache.
+const TTL = 15 * 60 * 1000;                 // 15 minutos
+const _cache = new Map();                   // key -> { ts, data }
+const _enVuelo = new Map();                 // key -> Promise (evita fetch duplicado)
+
+function _key(path, params) {
+  return path + "?" + new URLSearchParams(params).toString();
+}
+
+async function _fetch(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();
+}
+
+// GET con cache. Devuelve SIEMPRE una promesa que resuelve rápido si hay cache.
+function get(path, params = {}) {
+  const key = _key(path, params);
+  const hit = _cache.get(key);
+  const now = Date.now();
+
+  if (hit) {
+    // Hay algo cacheado -> devolverlo YA.
+    if (now - hit.ts >= TTL && !_enVuelo.has(key)) {
+      // Venció: refrescar en 2º plano (no bloquea, no muestra loader).
+      const p = _fetch(path, params)
+        .then((data) => { _cache.set(key, { ts: Date.now(), data }); return data; })
+        .finally(() => _enVuelo.delete(key));
+      _enVuelo.set(key, p);
+    }
+    return Promise.resolve(hit.data);
+  }
+
+  // No hay cache: si ya hay una petición en vuelo para esta key, reusarla.
+  if (_enVuelo.has(key)) return _enVuelo.get(key);
+
+  const p = _fetch(path, params)
+    .then((data) => { _cache.set(key, { ts: Date.now(), data }); return data; })
+    .finally(() => _enVuelo.delete(key));
+  _enVuelo.set(key, p);
+  return p;
+}
+
+// Invalida entradas del cache cuyo path empiece con alguno de los prefijos dados.
+function invalidar(...prefijos) {
+  for (const k of _cache.keys()) {
+    if (prefijos.some((p) => k.startsWith(p))) _cache.delete(k);
+  }
+}
+
+// POST helper: hace el POST y luego invalida los caches afectados.
+async function post(path, body, invalidarPrefijos = []) {
+  const r = await fetch(`${BASE_URL}${path}`, {
+    method: "POST", headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!r.ok) throw new Error(`Error al guardar en ${path}`);
+  const data = await r.json();
+  if (invalidarPrefijos.length) invalidar(...invalidarPrefijos);
+  return data;
+}
+
+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 }),
+  vendedores: (ano = "TODOS", mes = "TODOS", dia = "TODOS") =>
+    get("/api/vendedores", { ano, mes, dia }),
+  roas: (ano = "TODOS", mes = "TODOS", dia = "TODOS") =>
+    get("/api/roas", { ano, mes, dia }),
+  conjuntosSinSede: () => get("/api/conjuntos-sin-sede"),
+  guardarConjuntoSede: (cambios) =>
+    post("/api/conjuntos-sin-sede/guardar", { cambios }, ["/api/conjuntos-sin-sede", "/api/roas"]),
+  borrarConjuntoSede: (conjunto) =>
+    post("/api/conjuntos-sin-sede/borrar", { conjunto }, ["/api/conjuntos-sin-sede", "/api/roas"]),
+  ultimaActualizacion: () => get("/api/ultima-actualizacion"),
+  // Actualiza TODO manualmente (como si pasaran los 15 min), pero EN SEGUNDO
+  // PLANO: NO se toca el cache del cliente mientras el backend trabaja, así el
+  // usuario sigue viendo los datos viejos sin pantallas de carga durante los
+  // ~29s. Recien cuando el backend responde OK se limpia el cache del cliente,
+  // para que a partir de ahi todo muestre los datos nuevos de inmediato.
+  refrescarTodo: async () => {
+    const r = await fetch(`${BASE_URL}/api/cache/refresh`, { method: "POST" });
+    if (!r.ok) throw new Error("Error al actualizar");
+    await r.json();               // espera a que el backend TERMINE de rehacer todo
+    _cache.clear();               // solo AHORA se invalida el cache del cliente
+    // Trae la hora de actualizacion FRESCA (sin cache) y la deja cacheada, para
+    // que el sidebar muestre la hora del refresco manual recien hecho.
+    const hr = await _fetch("/api/ultima-actualizacion", {});
+    _cache.set(_key("/api/ultima-actualizacion", {}), { ts: Date.now(), data: hr });
+    return hr;                     // { hora: "..." }
+  },
+  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) =>
+    post("/api/programas-ocultos/encender", { num_indices },
+         ["/api/programas-ocultos", "/api/programas-disponibles", "/api/leads"]),
+  guardarLeyenda: (cambios) =>
+    post("/api/leyenda-anuncios/guardar", { cambios }, ["/api/leyenda-anuncios", "/api/roas"]),
+  guardarPauta: (num_indice, pauta, conjunto, contar) =>
+    post("/api/curso/guardar-pauta", { num_indice, pauta, conjunto, contar },
+         ["/api/leads", "/api/conjuntos-sin-pauta", "/api/roas"]),
+  alertas: () => get("/api/leads/alertas"),
+  // Leyenda (campanias de Supabase). Al agregar/borrar, invalida TODOS los
+  // apartados que dependen de las leyendas para que el cambio se vea al instante.
+  campanias: () => get("/api/campanias"),
+  agregarCampania: (datos) =>
+    post("/api/campanias/agregar", datos,
+         ["/api/campanias", "/api/leads", "/api/vendedores", "/api/roas", "/api/otros-general"]),
+  editarCampania: (id, datos) =>
+    post("/api/campanias/editar", { id, ...datos },
+         ["/api/campanias", "/api/leads", "/api/vendedores", "/api/roas", "/api/otros-general"]),
+  borrarCampania: (id) =>
+    post("/api/campanias/borrar", { id },
+         ["/api/campanias", "/api/leads", "/api/vendedores", "/api/roas", "/api/otros-general"]),
+};

frontend/src/lib/useColumnasAjustables.jsx

@@ -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 };
+}