Header text

Text

<h3 style="white-space:pre-line"><span style="color:#169179"><strong>Control interno de  portafolio de productos</strong></span></h3>

Embed

<div id="loraControlRoot">
  <div class="lora-control-head">
    <div>
      <h3 class="lora-control-title">CONTROL INTERNO DE PRODUCTOS – GRUPO LORA</h3>
      <div class="lora-control-sub">Vista administrativa (solo lectura) para control, limpieza y validación del catálogo.</div>
    </div>
    <div class="lora-control-stamp">
      <div class="lora-stamp-label">Datos cargados</div>
      <div class="lora-stamp-value" id="loraCtrlLoadedAt">—</div>
    </div>
  </div>

  
  <div class="lora-kpis" id="loraCtrlKpis">
    <div class="lora-kpi">
      <div class="lora-kpi__label">TOTAL PRODUCTOS</div>
      <div class="lora-kpi__value" id="kpiTotal">—</div>
    </div>
    <div class="lora-kpi">
      <div class="lora-kpi__label">CATEGORÍAS</div>
      <div class="lora-kpi__value" id="kpiCats">—</div>
    </div>
    <div class="lora-kpi">
      <div class="lora-kpi__label">MARCAS</div>
      <div class="lora-kpi__value" id="kpiBrands">—</div>
    </div>
    <div class="lora-kpi lora-kpi--warn">
      <div class="lora-kpi__label">INCOMPLETOS</div>
      <div class="lora-kpi__value" id="kpiMissing">—</div>
      <div class="lora-kpi__hint">Sin categoría / producto / marca</div>
    </div>
    <div class="lora-kpi lora-kpi--warn2">
      <div class="lora-kpi__label">DUPLICADOS</div>
      <div class="lora-kpi__value" id="kpiDup">—</div>
      <div class="lora-kpi__hint">Misma Categoría + Producto + Marca</div>
    </div>
  </div>

  
  <div class="lora-control-tools">
    <input id="loraCtrlSearch" placeholder="Buscar por categoría, producto o marca…" />

    <select id="loraCtrlCat">
      <option value="">Todas las categorías</option>
    </select>

    <select id="loraCtrlBrand">
      <option value="">Todas las marcas</option>
    </select>

    <label class="lora-toggle">
      <input id="loraCtrlOnlyMissing" type="checkbox" />
      <span>Solo incompletos</span>
    </label>

    <label class="lora-toggle">
      <input id="loraCtrlOnlyDup" type="checkbox" />
      <span>Solo duplicados</span>
    </label>

    <div class="lora-control-right">
      <button id="loraCtrlCopyTable" class="lora-btn lora-btn--sec" type="button">Copiar tabla</button>
      <button id="loraCtrlCsv" class="lora-btn lora-btn--pri" type="button">Descargar CSV</button>
    </div>
  </div>

  <div class="lora-control-status" id="loraCtrlStatus">Cargando productos…</div>

  <div class="lora-control-table-wrap">
    <table class="lora-control-table">
      <thead>
        <tr>
          <th>CATEGORÍA</th>
          <th>PRODUCTO</th>
          <th>MARCA</th>
          <th>ESTATUS</th>
        </tr>
      </thead>
      <tbody id="loraCtrlBody"></tbody>
    </table>
  </div>

  <div id="loraCtrlToast" class="lora-toast">✓</div>
</div>

<style>
/* ===== CONTROL INTERNO LORA (ADMIN) ===== */
#loraControlRoot{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color:#111827;
  background:#fff;
  max-width:1200px;
  margin:auto;
}

.lora-control-head{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  align-items:flex-end;margin-bottom:12px;
}
.lora-control-title{
  font-size:14px;font-weight:800;margin:0;letter-spacing:.6px;
}
.lora-control-sub{color:#6b7280;margin-top:4px;font-size:12px}
.lora-control-stamp{
  border:1px solid #e5e7eb;background:#f9fafb;border-radius:12px;padding:10px 12px;
  min-width:200px;
}
.lora-stamp-label{color:#6b7280;font-weight:700;font-size:11px;letter-spacing:.4px;text-transform:uppercase}
.lora-stamp-value{font-weight:800;color:#111827;margin-top:3px}

/* KPIs */
.lora-kpis{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
  margin-bottom:12px;
}
@media(max-width:980px){ .lora-kpis{grid-template-columns: repeat(2, minmax(0, 1fr));} }
.lora-kpi{
  border:1px solid #e5e7eb;border-radius:14px;background:#fff;
  padding:10px 12px;
}
.lora-kpi__label{
  font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#6b7280;
}
.lora-kpi__value{
  font-size:18px;font-weight:900;color:#111827;margin-top:6px;line-height:1;
}
.lora-kpi__hint{margin-top:6px;color:#6b7280;font-size:11px}
.lora-kpi--warn{border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.04)}
.lora-kpi--warn2{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.06)}

/* Tools */
.lora-control-tools{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-bottom:8px;
}
.lora-control-tools input, .lora-control-tools select{
  padding:8px 12px;border-radius:10px;border:1px solid #d1d5db;
  font-size:12px;background:#fff;color:#111827;
}
.lora-control-tools input{min-width:280px}
.lora-toggle{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;background:#fff;
  cursor:pointer;user-select:none;
}
.lora-toggle input{accent-color:#2563eb}
.lora-control-right{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

/* Buttons */
.lora-btn{
  padding:9px 12px;border-radius:999px;border:none;font-weight:900;
  font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.lora-btn--pri{background:#2563eb;color:#fff}
.lora-btn--sec{background:#6b7280;color:#fff}
.lora-btn:hover{filter:brightness(.98)}

/* Status */
.lora-control-status{color:#6b7280;margin-bottom:10px}

/* Table */
.lora-control-table-wrap{
  overflow:auto;
  border:1px solid #e5e7eb;
  border-radius:12px;
}
.lora-control-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
.lora-control-table th,
.lora-control-table td{
  padding:8px 10px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:middle;
  font-size:12px;
}
.lora-control-table th{
  background:#f3f4f6;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.lora-control-table td:first-child{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.lora-row--missing{background:rgba(220,38,38,.06)}
.lora-row--dup{background:rgba(245,158,11,.08)}
.lora-row--both{background:rgba(220,38,38,.08)}
.lora-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 8px;border-radius:999px;font-weight:900;font-size:11px;
  border:1px solid #e5e7eb;background:#fff;color:#111827;
}
.lora-badge--ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08);color:#065f46}
.lora-badge--missing{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.10);color:#991b1b}
.lora-badge--dup{border-color:rgba(245,158,11,.40);background:rgba(245,158,11,.14);color:#92400e}
.lora-badge--both{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.10);color:#991b1b}

/* Toast */
.lora-toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  background:#111827;color:#fff;padding:8px 12px;border-radius:999px;
  display:none;z-index:1000000;font-size:12px;font-weight:900;
}
</style>

<script>
/* ================= CONFIG (MISMO SHEET) ================= */
const LORA_CTRL_SHEET_ID = "1jU1YIs4lM2risMmzigeR5FdbIueV96AF3sbn4rFLfyw";
const LORA_CTRL_GID = "829567899";

(() => {
  const bodyEl   = document.getElementById("loraCtrlBody");
  const statusEl = document.getElementById("loraCtrlStatus");
  const loadedAt = document.getElementById("loraCtrlLoadedAt");

  const searchEl = document.getElementById("loraCtrlSearch");
  const catSel   = document.getElementById("loraCtrlCat");
  const brandSel = document.getElementById("loraCtrlBrand");
  const onlyMissingEl = document.getElementById("loraCtrlOnlyMissing");
  const onlyDupEl     = document.getElementById("loraCtrlOnlyDup");

  const btnCsv  = document.getElementById("loraCtrlCsv");
  const btnCopy = document.getElementById("loraCtrlCopyTable");
  const toast   = document.getElementById("loraCtrlToast");

  // KPIs
  const kpiTotal = document.getElementById("kpiTotal");
  const kpiCats  = document.getElementById("kpiCats");
  const kpiBrands= document.getElementById("kpiBrands");
  const kpiMissing = document.getElementById("kpiMissing");
  const kpiDup     = document.getElementById("kpiDup");

  let rows = [];          // normalizadas
  let viewRows = [];      // filtradas
  let dupKeySet = new Set(); // keys duplicados

  const esc = (s) => String(s ?? "").replace(/[&<>"']/g, m =>
    ({ "&":"&amp;","<":"&lt;",">":"&gt;","\"":"&quot;","'":"&#039;" }[m])
  );

  function toastMsg(msg){
    toast.textContent = msg;
    toast.style.display = "block";
    clearTimeout(toastMsg._t);
    toastMsg._t = setTimeout(()=>toast.style.display="none", 1400);
  }

  // Normalización fuerte (para consistencia y detectar duplicados reales)
  function normBase(s){
    return String(s ?? "")
      .replace(/\s+/g," ")
      .trim();
  }
  function normUpperNoAccents(s){
    return normBase(s)
      .toUpperCase()
      .normalize("NFD")
      .replace(/[\u0300-\u036f]/g,"");
  }

  function makeKey(r){
    return `${normUpperNoAccents(r.categoria)}||${normUpperNoAccents(r.producto)}||${normUpperNoAccents(r.marca)}`;
  }

  function isMissing(r){
    return !normBase(r.categoria) || !normBase(r.producto) || !normBase(r.marca);
  }

  function render(list){
    bodyEl.innerHTML = list.map(r => {
      const missing = isMissing(r);
      const key = makeKey(r);
      const isDup = dupKeySet.has(key);

      let rowCls = "";
      if(missing && isDup) rowCls = "lora-row--both";
      else if(missing) rowCls = "lora-row--missing";
      else if(isDup) rowCls = "lora-row--dup";

      let badge = `<span class="lora-badge lora-badge--ok">OK</span>`;
      if(missing && isDup) badge = `<span class="lora-badge lora-badge--both">INCOMPLETO + DUP</span>`;
      else if(missing) badge = `<span class="lora-badge lora-badge--missing">INCOMPLETO</span>`;
      else if(isDup) badge = `<span class="lora-badge lora-badge--dup">DUPLICADO</span>`;

      return `
        <tr class="${rowCls}">
          <td>${esc(r.categoria)}</td>
          <td>${esc(r.producto)}</td>
          <td>${esc(r.marca)}</td>
          <td>${badge}</td>
        </tr>
      `;
    }).join("");

    statusEl.textContent = `Mostrando: ${list.length} registros`;
  }

  function fillSelect(selectEl, values, placeholder){
    const cur = selectEl.value || "";
    selectEl.innerHTML = `<option value="">${placeholder}</option>` +
      values.map(v => `<option value="${esc(v)}">${esc(v)}</option>`).join("");
    // intenta preservar selección
    if(values.includes(cur)) selectEl.value = cur;
  }

  function computeDuplicates(){
    const counts = new Map();
    rows.forEach(r => {
      const k = makeKey(r);
      counts.set(k, (counts.get(k) || 0) + 1);
    });
    dupKeySet = new Set([...counts.entries()].filter(([,n])=>n>1).map(([k])=>k));
  }

  function computeKpis(){
    const cats = new Set(rows.map(r => normUpperNoAccents(r.categoria)).filter(Boolean));
    const brands = new Set(rows.map(r => normUpperNoAccents(r.marca)).filter(Boolean));

    const missingCount = rows.filter(isMissing).length;
    const dupCount = dupKeySet.size ? rows.filter(r => dupKeySet.has(makeKey(r))).length : 0;

    kpiTotal.textContent = String(rows.length);
    kpiCats.textContent = String(cats.size);
    kpiBrands.textContent = String(brands.size);
    kpiMissing.textContent = String(missingCount);
    kpiDup.textContent = String(dupCount);

    // Selects
    const catsSorted = [...cats].sort((a,b)=>a.localeCompare(b,"es"));
    const brandsSorted = [...brands].sort((a,b)=>a.localeCompare(b,"es"));

    fillSelect(catSel, catsSorted, "Todas las categorías");
    fillSelect(brandSel, brandsSorted, "Todas las marcas");
  }

  function applyFilters(){
    const q = normUpperNoAccents(searchEl.value);
    const cat = normUpperNoAccents(catSel.value);
    const brand = normUpperNoAccents(brandSel.value);
    const onlyMissing = !!onlyMissingEl.checked;
    const onlyDup = !!onlyDupEl.checked;

    viewRows = rows.filter(r => {
      const rqCat = normUpperNoAccents(r.categoria);
      const rqProd= normUpperNoAccents(r.producto);
      const rqBrand = normUpperNoAccents(r.marca);

      if(cat && rqCat !== cat) return false;
      if(brand && rqBrand !== brand) return false;

      if(onlyMissing && !isMissing(r)) return false;
      if(onlyDup && !dupKeySet.has(makeKey(r))) return false;

      if(q){
        const hit = rqCat.includes(q) || rqProd.includes(q) || rqBrand.includes(q);
        if(!hit) return false;
      }
      return true;
    });

    render(viewRows);
  }

  function toCSV(list){
    const header = ["CATEGORIA","PRODUCTO","MARCA","ESTATUS"];
    const lines = list.map(r=>{
      const missing = isMissing(r);
      const isDup = dupKeySet.has(makeKey(r));
      const status = (missing && isDup) ? "INCOMPLETO + DUP" : (missing ? "INCOMPLETO" : (isDup ? "DUPLICADO" : "OK"));
      const vals = [r.categoria, r.producto, r.marca, status].map(v=>{
        const s = String(v ?? "");
        return `"${s.replace(/"/g,'""')}"`;
      });
      return vals.join(",");
    });
    return [header.join(","), ...lines].join("\r\n");
  }

  function downloadCSV(){
    const csv = toCSV(viewRows.length ? viewRows : rows);
    const blob = new Blob([csv], {type:"text/csv;charset=utf-8;"});
    const a = document.createElement("a");
    const url = URL.createObjectURL(blob);
    a.href = url;
    a.download = "LORA_control_productos.csv";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    toastMsg("CSV descargado ✓");
  }

  async function copyTable(){
    const list = (viewRows.length ? viewRows : rows);
    const header = "CATEGORIA\tPRODUCTO\tMARCA\tESTATUS";
    const lines = list.map(r=>{
      const missing = isMissing(r);
      const isDup = dupKeySet.has(makeKey(r));
      const status = (missing && isDup) ? "INCOMPLETO + DUP" : (missing ? "INCOMPLETO" : (isDup ? "DUPLICADO" : "OK"));
      return `${r.categoria}\t${r.producto}\t${r.marca}\t${status}`;
    });
    const text = [header, ...lines].join("\n");

    try{
      if(navigator.clipboard && window.isSecureContext){
        await navigator.clipboard.writeText(text);
        toastMsg("Tabla copiada ✓");
        return;
      }
    }catch(e){}

    const ta = document.createElement("textarea");
    ta.value = text;
    ta.style.position = "fixed";
    ta.style.left = "-9999px";
    document.body.appendChild(ta);
    ta.select();
    try{
      document.execCommand("copy");
      toastMsg("Tabla copiada ✓");
    }catch(e){
      toastMsg("No se pudo copiar");
    }finally{
      document.body.removeChild(ta);
    }
  }

  // Eventos filtros
  searchEl.addEventListener("input", applyFilters);
  catSel.addEventListener("change", applyFilters);
  brandSel.addEventListener("change", applyFilters);
  onlyMissingEl.addEventListener("change", ()=>{ if(onlyMissingEl.checked) onlyDupEl.checked=false; applyFilters(); });
  onlyDupEl.addEventListener("change", ()=>{ if(onlyDupEl.checked) onlyMissingEl.checked=false; applyFilters(); });

  btnCsv.addEventListener("click", downloadCSV);
  btnCopy.addEventListener("click", copyTable);

  function setLoadedAt(){
    const d = new Date();
    const pad = (n)=>String(n).padStart(2,"0");
    const stamp = `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
    loadedAt.textContent = stamp;
  }

  // Carga Sheet
  (async()=>{
    try{
      statusEl.textContent = "Cargando productos…";
      const url = `https://docs.google.com/spreadsheets/d/${LORA_CTRL_SHEET_ID}/gviz/tq?gid=${LORA_CTRL_GID}`;
      const r = await fetch(url, { cache:"no-store" });
      const t = await r.text();
      const j = JSON.parse(t.slice(t.indexOf("{"), t.lastIndexOf("}")+1));

      const normCol = s => normUpperNoAccents(s);
      const cols = j.table.cols.map(c => normCol(c.label || ""));

      const iCat  = cols.indexOf("CATEGORIA");
      const iProd = cols.indexOf("PRODUCTO");
      const iMar  = cols.indexOf("MARCA");

      if(iCat < 0 || iProd < 0 || iMar < 0){
        statusEl.textContent = "Faltan columnas CATEGORIA / PRODUCTO / MARCA en el Sheet.";
        return;
      }

      rows = (j.table.rows || [])
        .map(rr => ({
          categoria: normUpperNoAccents(rr.c[iCat]?.v ?? ""),
          producto: normBase(rr.c[iProd]?.v ?? ""),
          marca: normBase(rr.c[iMar]?.v ?? "")
        }))
        .filter(r => r.categoria || r.producto || r.marca)
        .sort((a,b)=>
          a.categoria.localeCompare(b.categoria,"es") ||
          a.producto.localeCompare(b.producto,"es") ||
          a.marca.localeCompare(b.marca,"es")
        );

      computeDuplicates();
      computeKpis();
      setLoadedAt();

      viewRows = rows.slice();
      render(viewRows);

    }catch(e){
      console.error(e);
      statusEl.textContent = "No se pudo cargar el listado (verifica publicación del Sheet).";
    }
  })();

})();
</script>