zenit-sdk 0.1.8 → 0.2.0

package/dist/index.js

@@ -2008,6 +2008,152 @@ function useGeolocation(options) {
 
 // src/react/map/map-utils.ts
 var import_leaflet2 = __toESM(require("leaflet"));
+
+// src/config/modalWhitelist.ts
+function normalizeKey(value) {
+  return value.normalize("NFD").replace(/\p{Diacritic}/gu, "").replace(/[_\s-]+/g, "").toLowerCase().trim();
+}
+var CLIENTE_MODAL_WHITELIST = [
+  {
+    id: "nombre_cliente",
+    label: "Nombre del Cliente",
+    aliases: ["nombre_del_cliente", "nombre cliente", "nombre_del_cliente ", "NOMBRE_CLIENTE"]
+  },
+  {
+    id: "dpi",
+    label: "DPI",
+    aliases: ["dpi", "DPI"]
+  },
+  {
+    id: "kpi",
+    label: "Estado",
+    aliases: ["kpi", "KPI"],
+    hint: "kpi_badge"
+  },
+  {
+    id: "tel_principal",
+    label: "Tel\xE9fono",
+    aliases: ["tel_principal", "tel principal", "telefono", "telefono_principal", "TEL_PRINCIPAL"],
+    hint: "phone_link"
+  },
+  {
+    id: "capital_concedido",
+    label: "Capital Concedido",
+    aliases: ["capital_concedido", "capital concedido", "CAPITAL_CONCEDIDO"]
+  },
+  {
+    id: "mora",
+    label: "Monto en Mora",
+    aliases: ["mora", "MORA"],
+    hint: "mora_alert"
+  },
+  {
+    id: "etapa",
+    label: "Etapa del Cr\xE9dito",
+    aliases: ["etapa", "ETAPA"]
+  },
+  {
+    id: "prestamo",
+    label: "No. de Pr\xE9stamo",
+    aliases: ["prestamo", "prestamo_id", "no_prestamo", "numero_prestamo", "PRESTAMO"]
+  },
+  {
+    id: "sucursal",
+    label: "Sucursal",
+    aliases: ["sucursal", "nombre_sucursal", "nombre sucursal", "SUCURSAL"]
+  }
+];
+var SECTOR_MODAL_WHITELIST = [
+  { id: "sector", label: "Sector", aliases: ["nom_sector", "NOM_SECTOR", "sector", "SECTOR"] },
+  { id: "promotor", label: "Promotor", aliases: ["promotor", "PROMOTOR"] },
+  { id: "capital_total", label: "Capital Total", aliases: ["capital_total", "capital total", "CAPITAL_TOTAL"] },
+  {
+    id: "total_capital_mora",
+    label: "Total Capital Mora",
+    aliases: ["total_capital_mora", "total capital mora", "TOTAL_CAPITAL_MORA"]
+  },
+  {
+    id: "tendencia_mora",
+    label: "Tendencia Mora",
+    aliases: ["tendencia_mora", "tendencia mora", "TENDENCIA_MORA"],
+    hint: "trend_icon"
+  },
+  {
+    id: "tendencia_capital",
+    label: "Tendencia Capital",
+    aliases: ["tendencia_capital", "tendencia capital", "TENDENCIA_CAPITAL"],
+    hint: "trend_icon"
+  },
+  {
+    id: "tendencia_castigos",
+    label: "Tendencia Castigos",
+    aliases: ["tendencia_castigos", "tendencia castigos", "TENDENCIA_CASTIGOS"],
+    hint: "trend_icon"
+  },
+  {
+    id: "impacto_sector",
+    label: "Impacto Sector",
+    aliases: ["impacto_sector", "impacto sector", "IMPACTO_SECTOR"]
+  },
+  {
+    id: "total_clientes_sector",
+    label: "Total Clientes Sector",
+    aliases: ["total_clientes_sector", "total clientes sector", "TOTAL_CLIENTES_SECTOR"]
+  },
+  {
+    id: "total_clientes_sanos",
+    label: "Total Clientes Sanos",
+    aliases: ["total_clientes_sanos", "total clientes sanos", "TOTAL_CLIENTES_SANOS"]
+  },
+  {
+    id: "total_clientes_morosos",
+    label: "Total Clientes Morosos",
+    aliases: ["total_clientes_morosos", "total clientes morosos", "TOTAL_CLIENTES_MOROSOS"]
+  },
+  {
+    id: "total_clientes_castigados",
+    label: "Total Clientes Castigados",
+    aliases: ["total_clientes_castigados", "total clientes castigados", "TOTAL_CLIENTES_CASTIGADOS"]
+  },
+  {
+    id: "total_clientes_nuevos",
+    label: "Total Clientes Nuevos",
+    aliases: ["total_clientes_nuevos", "total clientes nuevos", "TOTAL_CLIENTES_NUEVOS"]
+  },
+  {
+    id: "total_clientes_salidos",
+    label: "Total Clientes Salidos",
+    aliases: ["total_clientes_salidos", "total clientes salidos", "TOTAL_CLIENTES_SALIDOS"]
+  },
+  { id: "insights", label: "Insights", aliases: ["insights", "INSIGHTS"], hint: "collapsible" },
+  {
+    id: "recomendaciones",
+    label: "Recomendaciones",
+    aliases: ["recomendaciones", "RECOMENDACIONES"],
+    hint: "collapsible"
+  }
+];
+function applyModalWhitelist(rawData, whitelist) {
+  const keyByNormalized = /* @__PURE__ */ new Map();
+  Object.keys(rawData ?? {}).forEach((rawKey) => {
+    const normalized = normalizeKey(rawKey);
+    if (!normalized || keyByNormalized.has(normalized)) return;
+    keyByNormalized.set(normalized, rawKey);
+  });
+  return whitelist.map(({ id, label, hint, aliases }) => {
+    const candidates = [...aliases, id];
+    for (const candidate of candidates) {
+      const matchedKey = keyByNormalized.get(normalizeKey(candidate));
+      if (!matchedKey) continue;
+      const value = rawData[matchedKey];
+      if (value === null || value === void 0) continue;
+      return { id, label, value, hint: hint ?? null, matchedKey };
+    }
+    return null;
+  }).filter((entry) => Boolean(entry));
+}
+
+// src/react/map/map-utils.ts
 var POPUP_STYLE_ID = "zenit-leaflet-popup-styles";
 var POPUP_EXCLUDED_KEYS = /* @__PURE__ */ new Set(["geom", "geometry", "_private"]);
 var POPUP_TITLE_KEYS = ["id", "nombre", "name", "title", "titulo", "cluster"];
@@ -2267,6 +2413,10 @@ function createPopupContent(properties) {
   const descriptionHtml = header.description ? `<div style="margin-bottom:10px; padding:8px 10px; background:#f8fafc; border-left:3px solid #38bdf8; border-radius:6px; color:#334155; font-size:12px;">${escapeHtml(
     header.description.value
   )}</div>` : "";
+  const whitelistedRows = buildWhitelistedRows(properties, { colorBar, headerHtml, descriptionHtml });
+  if (whitelistedRows) {
+    return whitelistedRows;
+  }
   const rowsHtml = entries.map(([key, value]) => {
     const label = escapeHtml(formatLabel(key));
     const normalizedKey = key.trim().toLowerCase();
@@ -2283,6 +2433,74 @@ function createPopupContent(properties) {
   }).join("");
   return `<div>${colorBar}${headerHtml}${descriptionHtml}${rowsHtml}</div>`;
 }
+function buildWhitelistedRows(properties, headerSections) {
+  const selection = selectModalWhitelist(properties);
+  if (!selection) {
+    logModalWhitelistDebug({
+      modalType: "generic",
+      properties,
+      entries: [],
+      whitelist: null,
+      fallbackToGeneric: true
+    });
+    return null;
+  }
+  const { whitelist, modalType } = selection;
+  const entries = applyModalWhitelist(properties, whitelist);
+  if (entries.length === 0) {
+    logModalWhitelistDebug({
+      modalType,
+      properties,
+      entries,
+      whitelist,
+      fallbackToGeneric: true
+    });
+    return null;
+  }
+  logModalWhitelistDebug({
+    modalType,
+    properties,
+    entries,
+    whitelist,
+    fallbackToGeneric: false
+  });
+  const rowsHtml = entries.map(({ label, value }) => {
+    const valueHtml = renderPopupValue(value);
+    return `
+        <div style="display:grid; grid-template-columns:minmax(90px, 35%) 1fr; gap:8px; padding:6px 0; border-bottom:1px solid #e2e8f0;">
+          <div style="font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:#64748b;">${escapeHtml(label)}</div>
+          <div style="font-size:13px; color:#0f172a; word-break:break-word;">${valueHtml}</div>
+        </div>
+      `;
+  }).join("");
+  return `<div>${headerSections.colorBar}${headerSections.headerHtml}${headerSections.descriptionHtml}${rowsHtml}</div>`;
+}
+function hasAnyKey(properties, candidates) {
+  const normalizedKeys = new Set(Object.keys(properties).map((key) => normalizeKey(key)));
+  return candidates.some((candidate) => normalizedKeys.has(normalizeKey(candidate)));
+}
+function selectModalWhitelist(properties) {
+  if (hasAnyKey(properties, ["nombre_del_cliente", "dpi", "capital_concedido", "kpi"])) {
+    return { modalType: "cliente", whitelist: CLIENTE_MODAL_WHITELIST };
+  }
+  if (hasAnyKey(properties, ["nom_sector", "NOM_SECTOR", "total_clientes_sector", "capital_total", "impacto_sector"])) {
+    return { modalType: "sector", whitelist: SECTOR_MODAL_WHITELIST };
+  }
+  return null;
+}
+function logModalWhitelistDebug(options) {
+  if (process.env.NODE_ENV === "production") return;
+  const { modalType, properties, entries, whitelist, fallbackToGeneric } = options;
+  const matchedIds = new Set(entries.map((entry) => entry.id));
+  const missingFields = (whitelist ?? []).filter((item) => !matchedIds.has(item.id)).map((item) => item.id);
+  console.info("[modal-whitelist]", {
+    modalType,
+    keys: Object.keys(properties),
+    matchedFields: entries.map((entry) => ({ id: entry.id, matchedKey: entry.matchedKey })),
+    missingFields,
+    fallbackToGeneric
+  });
+}
 function isPolygonType(layerType, geometryType) {
   const candidate = (layerType ?? geometryType ?? "").toLowerCase();
   return candidate === "polygon" || candidate === "multipolygon";