// ─── Motor genérico de listas (EntityListScreen) ─────────────────── // Generic list pattern matching Expedientes: // eyebrow + title + description + actions // KPI tiles // optional filter chips // search + counter (inside table card) // table with sortable columns // // Pass a config object to render any list section. Expone a window: // EntityListScreen, TableDateRange, ExportModal, applyDateRange, // useEntityStats. Consume window.MicosStore (getStats/fetchPage/SCHEMA), // window.KpiCard (ui/primitives.jsx), window.LIST_CONFIG, window.MicosExport, // Icon*. Lo usan 14+ pantallas de lista. P4: TablePill/IdDateCell (definidas // acá antes, sin consumo interno) se movieron a ui/primitives.jsx; Trend murió // (0 usos verificados); se borró la feature completa de borrado-por-fila // (canDeleteRow/onDeleteRow/deleteTitle/deleteDescription/deleteLabel — // ningún caller la pasaba); applyDateRange pasó de huérfana a consumida // internamente por el propio filtro de fechas. P6: prop opcional // `highlightRowId` (resalta una fila puntual con el mismo estilo que ya // usaba Expedientes para el "recién creado" — inset accent + fondo tenue) — // aditivo, ningún caller existente lo pasa, cero cambio para ellos. const { useState: _useStateEL, useMemo: _useMemoEL } = React; // ─── Main EntityListScreen ──────────────────────── // ─── Reusable: control de rango de fechas (desde–hasta) ───────── // Usado por EntityListScreen y por las listas a medida (Expedientes, Inventario, // Finanzas) vía window.TableDateRange. Combina con el buscador (doble filtro). // Helpers de fecha (un solo lugar). ISO interno (YYYY-MM-DD) para filtrar; se // muestra DD/MM/AAAA. Las fechas se construyen por partes para evitar TZ. const _DR_MESES = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']; const _DR_WD = ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá', 'Do']; function _drParse(iso) { const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso || '')); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; } function _drISO(d) { const p = (n) => String(n).padStart(2, '0'); return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`; } function _drFmt(iso) { const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso || '')); return m ? `${m[3]}/${m[2]}/${m[1]}` : ''; } // Selector de rango de fechas: UN solo campo (estilo de la app) que abre un // calendario propio en un popover (portal). Muestra DD/MM/AAAA. La API // (from/to ISO + onFrom/onTo) no cambia, así todas las listas siguen igual. function TableDateRange({ from, to, onFrom, onTo }) { const [open, setOpen] = React.useState(false); const [rect, setRect] = React.useState(null); const triggerRef = React.useRef(null); const _hoy = new Date(); const _base = () => _drParse(from) || _drParse(to) || _hoy; const [view, setView] = React.useState(() => { const b = _base(); return new Date(b.getFullYear(), b.getMonth(), 1); }); React.useEffect(() => { if (!open) return; const sync = () => { if (triggerRef.current) setRect(triggerRef.current.getBoundingClientRect()); }; sync(); const close = () => setOpen(false); window.addEventListener('resize', close); window.addEventListener('scroll', close, true); const onDoc = (e) => { const inPop = e.target.closest && e.target.closest('.dr-pop'); if (triggerRef.current && !triggerRef.current.contains(e.target) && !inPop) setOpen(false); }; document.addEventListener('mousedown', onDoc); return () => { window.removeEventListener('resize', close); window.removeEventListener('scroll', close, true); document.removeEventListener('mousedown', onDoc); }; }, [open]); const toggle = () => { if (!open) { const b = _base(); setView(new Date(b.getFullYear(), b.getMonth(), 1)); } setOpen((o) => !o); }; const pick = (iso) => { if (!from || (from && to)) { onFrom(iso); onTo(''); } else if (iso < from) { onFrom(iso); } else { onTo(iso); setOpen(false); } }; const clear = (e) => { if (e) e.stopPropagation(); onFrom(''); onTo(''); }; const hasVal = !!(from || to); const label = hasVal ? `${from ? _drFmt(from) : '…'} – ${to ? _drFmt(to) : '…'}` : 'Rango de fechas'; const y = view.getFullYear(), m = view.getMonth(); const startWd = (new Date(y, m, 1).getDay() + 6) % 7; // semana arranca lunes const daysInMonth = new Date(y, m + 1, 0).getDate(); const cells = []; for (let i = 0; i < startWd; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) cells.push(d); const todayISO = _drISO(_hoy); const pop = (open && rect) ? ReactDOM.createPortal(
{`${_DR_MESES[m]} ${y}`}
{_DR_WD.map((w) =>
{w}
)} {cells.map((d, i) => { if (d == null) return
; const iso = _drISO(new Date(y, m, d)); const isStart = from && iso === from; const isEnd = to && iso === to; const inRange = from && to && iso > from && iso < to; const cls = ['dr-pop__day']; if (iso === todayISO) cls.push('is-today'); if (inRange) cls.push('in-range'); if (isStart || isEnd) cls.push('is-sel'); if (isStart && to) cls.push('range-start'); if (isEnd && from && to) cls.push('range-end'); return ; })}
, document.body) : null; return (
{pop}
); } // Filtra filas por rango de fechas sobre un campo ISO (YYYY-MM-DD). Inclusivo. function applyDateRange(rows, dateField, from, to) { if (!dateField || (!from && !to)) return rows; return rows.filter((row) => { const d = String(row[dateField] || '').slice(0, 10); if (!d) return false; if (from && d < from) return false; if (to && d > to) return false; return true; }); } // ─── Reusable: modal de exportación (checklist de columnas → Excel) ───────── // exportConfig: [{ label, value:(row)=>string|number }]. rows = filas ya // filtradas. Al confirmar arma el Excel con MicosExport y llama onExported. function ExportModal({ open, onClose, exportConfig = [], rows = [], filename, onExported }) { const [sel, setSel] = React.useState(() => exportConfig.map((_, i) => i)); React.useEffect(() => { if (open) setSel(exportConfig.map((_, i) => i)); }, [open, exportConfig.length]); if (!open) return null; const allSel = sel.length === exportConfig.length; const toggle = (i) => setSel((s) => (s.includes(i) ? s.filter((x) => x !== i) : [...s, i].sort((a, b) => a - b))); const toggleAll = () => setSel(allSel ? [] : exportConfig.map((_, i) => i)); const doExport = () => { const cols = sel.map((i) => exportConfig[i]).filter(Boolean); if (!cols.length) return; const headers = cols.map((c) => c.label); const dataRows = rows.map((row) => cols.map((c) => { let v; try { v = c.value ? c.value(row) : row[c.key]; } catch (_) { v = ''; } return v == null ? '' : v; })); let res = { format: 'xlsx' }; if (window.MicosExport) res = window.MicosExport.exportTable(filename || 'export', headers, dataRows) || res; onClose(); if (onExported) onExported(dataRows.length, res); }; return (
e.stopPropagation()} style={{ background: 'var(--card)', border: '1px solid var(--border)', boxShadow: '0 24px 60px -16px rgba(8,20,24,0.6)', maxHeight: '85vh', display: 'flex', flexDirection: 'column' }}>

Exportar a Excel

Elegí las columnas a incluir. Se exportan los {rows.length} {rows.length === 1 ? 'registro' : 'registros'} del filtro actual.

{exportConfig.map((c, i) => { const checked = sel.includes(i); return ( ); })}
); } // ─── Reusable: agregados server-side (GET /api//stats) ───────── // Hook liviano compartido por los callers de EntityListScreen (Presupuestos, OC, // Remitos, Compras, Entidades, Médicos, Particulares, Proveedores…) y por // FinanzasScreen (screens-finanzas.jsx, P3), que la llama con una `key` // DINÁMICA (cambia al cambiar de lado/docType, y puede pasar a `null` en los // docTypes que quedan en modo memoria). Mismo patrón defensivo que el piloto // de Expedientes (screens-list.jsx `srvStats`): pide (MicosStore.getStats // cachea por colección), y si falla —o la colección todavía no tiene vista de // /stats— devuelve `null` y el caller sigue con su cálculo en memoria de // siempre (fallback), sin romper la pantalla. RESETEA a `null` en cada cambio // de `key` (incluido null): si no, un caller con key dinámica mostraría el // agregado STALE de la colección ANTERIOR mientras llega (o si nunca llega, // porque la nueva key es null) el de la nueva. function useEntityStats(key) { const [stats, setStats] = _useStateEL(null); React.useEffect(() => { setStats(null); if (!key || !window.MicosStore) return undefined; let cancelled = false; window.MicosStore.getStats(key) .then((data) => { if (!cancelled) setStats(data); }) .catch((e) => console.warn('[useEntityStats]', key, e.message)); return () => { cancelled = true; }; }, [key]); return stats; } function EntityListScreen({ eyebrow, title, description, primaryAction, // { label, icon, onClick } secondaryAction, // { label, icon, onClick } kpis = [], // [{ label, value, delta, deltaTone, icon }] topChips, // { options: [...], applyFilter, allLabel? } — chips rendered ABOVE the KPIs tabs, // { options:[{key,label,title,description,kpis,columns?}], applyFilter:(row,key)=>bool, default? } — segmentado primario estilo Finanzas (Cobros/Pagos): el h1 ES el tab activo y cambia con animación; sin "Todos". `columns` por tab sobreescribe las columnas de la tabla para ese lado. filterChips, // { options: [{ label, value, count, tone? }], value, onChange, allLabel? } columns = [], // [{ key, label, align, width, render, mono }] rows = [], collection, // string — key del SCHEMA (window.MicosStore.SCHEMA), ej. 'presupuestos'. // Si se pasa, el motor pagina SERVER-SIDE (patrón Expedientes/ // screens-list.jsx: fetchPage + IntersectionObserver + total real desde // /stats) en vez de renderizar `rows` completo. Si NO se pasa, se // mantiene el modo anterior (compat con listas que no migraron). searchPlaceholder = 'Buscar…', searchFilter, // (row, q) => bool onRowClick, rowChevron, // muestra una flecha (chevron) al final de la fila clickeable, con feedback de hover emptyText = 'Sin resultados.', extraBelow, // optional ReactNode rendered after the table prefilter, // { label, sublabel, predicate, onClear } — inbound filter from another module dateField, // string — campo ISO de cada fila para el filtro desde–hasta (si se pasa, se muestra) exportConfig, // [{ label, value:(row)=>string|number }] — columnas para el Excel; default deriva de `columns` exportFilename, // nombre base del archivo exportado (default: title) highlightRowId, // id de una fila puntual a resaltar (ej. recién creada) — sin equivalente // genérico antes de P6; mismo estilo que ya usaba Expedientes a mano. sortRows, // (a, b) => n — orden de PRESENTACIÓN client-side sobre lo cargado (P6: // Expedientes ordena por fecha de inicio desc; el orden del server pagina // por created_at/id, que en la semilla bulk es casi aleatorio). Opcional. }) { const [search, setSearch] = _useStateEL(''); const [chipValue, setChipValue] = _useStateEL(filterChips?.value ?? null); const [topChipValue, setTopChipValue] = _useStateEL(topChips?.value ?? null); const [listToast, setListToast] = _useStateEL(null); const [dateFrom, setDateFrom] = _useStateEL(''); const [dateTo, setDateTo] = _useStateEL(''); const [tabValue, setTabValue] = _useStateEL(tabs ? (tabs.default ?? (tabs.options[0] && tabs.options[0].key)) : null); // Dirección de la animación del título al cambiar de tab (ltr al ir a un tab anterior, rtl a uno posterior). const _tabSeen = React.useRef(null); const _tabChanged = !!tabs && _tabSeen.current !== null && _tabSeen.current !== tabValue; const _tabPrevIdx = tabs ? tabs.options.findIndex((o) => o.key === _tabSeen.current) : -1; const _tabCurIdx = tabs ? tabs.options.findIndex((o) => o.key === tabValue) : -1; const _tabDir = _tabCurIdx >= _tabPrevIdx ? 'animate-name-pop-rtl' : 'animate-name-pop-ltr'; React.useEffect(() => { _tabSeen.current = tabValue; }, [tabValue]); // ── Paginación SERVER-SIDE (patrón Expedientes/screens-list.jsx propagado al // motor) — SOLO cuando el caller pasa `collection` (key de window.MicosStore.SCHEMA). // Sin esa prop el motor sigue en modo anterior (renderiza `rows` completo tal cual // lo pasó el caller — compat con listas que no migraron, ej. Logística/Caja Chica/ // Aprobaciones/Ajustes, acopladas a lógica que necesita el array entero en memoria). // Estado PROPIO de esta pantalla: no toca hydrate/BIG_LIMIT/recomputeDerived ni los // arrays globales de window (solo los LEE/mergea puntualmente en el drill-down, más // abajo). Guard sincrónico por ref (`pgLoadingRef`) para no disparar un fetch // duplicado mientras el anterior sigue en vuelo (el observer cierra sobre un state // viejo hasta que el efecto se recree). const [pgRows, setPgRows] = _useStateEL([]); const [pgTotal, setPgTotal] = _useStateEL(0); const [pgLoading, setPgLoading] = _useStateEL(false); const [exportUniverseLoading, setExportUniverseLoading] = _useStateEL(false); const pgOffsetRef = React.useRef(0); const pgLoadingRef = React.useRef(false); const pgSentinelRef = React.useRef(null); const PG_BATCH = (window.LIST_CONFIG && window.LIST_CONFIG.batchSize) || 60; const _schemaCfg = (collection && window.MicosStore && window.MicosStore.SCHEMA) ? window.MicosStore.SCHEMA[collection] : null; // Carga de la primera tanda al montar / si cambia la colección. Fallback: si el // fetch falla, usar `rows` (lo que ya haya hidratado hydrate() en memoria — // semilla o capado a BIG_LIMIT) para no dejar la pantalla vacía. React.useEffect(() => { if (!collection) return undefined; let cancelled = false; setPgRows([]); setPgTotal(0); pgOffsetRef.current = 0; setPgLoading(true); window.MicosStore.fetchPage(collection, { offset: 0, limit: PG_BATCH }) .then((r) => { if (cancelled) return; const items = r.items || []; setPgRows(items); setPgTotal(r.total || 0); pgOffsetRef.current = items.length; }) .catch((e) => { console.warn('[EntityListScreen] fetchPage', collection, e.message); if (cancelled) return; setPgRows(rows.slice()); setPgTotal(rows.length); pgOffsetRef.current = rows.length; }) .finally(() => { if (!cancelled) setPgLoading(false); }); return () => { cancelled = true; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [collection]); // Sentinel + IntersectionObserver (patrón EXACTO de screens-inventario.jsx / // screens-list.jsx): al entrar en viewport, pide la próxima tanda y appendea. const pgHayMas = collection ? pgRows.length < pgTotal : false; React.useEffect(() => { if (!collection || !pgHayMas) return undefined; const el = pgSentinelRef.current; if (!el || typeof IntersectionObserver === 'undefined') return undefined; const obs = new IntersectionObserver((entries) => { if (!(entries[0] && entries[0].isIntersecting) || pgLoadingRef.current) return; pgLoadingRef.current = true; setPgLoading(true); window.MicosStore.fetchPage(collection, { offset: pgOffsetRef.current, limit: PG_BATCH }) .then((r) => { const items = r.items || []; setPgRows((prev) => prev.concat(items)); pgOffsetRef.current += items.length; if (typeof r.total === 'number') setPgTotal(r.total); }) .catch((e) => console.warn('[EntityListScreen] fetchPage (más)', collection, e.message)) .finally(() => { pgLoadingRef.current = false; setPgLoading(false); }); }, { rootMargin: (window.LIST_CONFIG && window.LIST_CONFIG.observerRootMargin) || '400px' }); obs.observe(el); return () => obs.disconnect(); }, [collection, pgHayMas]); // Fuente efectiva de filas: paginada server-side si hay `collection`; si no, la // prop `rows` de siempre (modo anterior, sin migrar). const _sourceRows = collection ? pgRows : rows; // ── Drill-down genérico (patrón openExpediente de screens-list.jsx / applyPath // de app.jsx): al abrir una fila, si el registro NO está en window[coll] (puede // venir de una página 2+ que el store global nunca hidrató), lo trae por // publicId/numero/id y lo mergea ANTES de abrir el detalle — así el detalle // (que lee window[coll] síncrono) nunca se queda con datos incompletos. const _openRow = (row) => { if (!onRowClick) return; if (!collection || !_schemaCfg) { onRowClick(row); return; } const globalArr = window[_schemaCfg.global]; if (Array.isArray(globalArr) && globalArr.some((x) => x.id === row.id)) { onRowClick(row); return; } const ident = row.publicId || row.numero || row.id; fetch(`${_schemaCfg.endpoint}/${encodeURIComponent(ident)}`, { credentials: 'same-origin' }) .then((r) => (r.ok ? r.json() : Promise.reject(r.status))) .then((server) => { if (!server || !server.id) throw new Error('sin id'); const coll = window[_schemaCfg.global] || (window[_schemaCfg.global] = []); if (!coll.some((x) => x.id === server.id)) coll.push(server); onRowClick(server); }) .catch((err) => { console.warn('[EntityListScreen] drill-down fetch', collection, err); onRowClick(row); // best-effort: abre igual con lo que ya tenía }); }; // ── Exportar: columnas para el Excel (default = todas las columnas con label) ── const effExportConfig = (exportConfig && exportConfig.length ? exportConfig : columns.filter((c) => c.label).map((c) => ({ label: c.label, value: (row) => row[c.key] }))); const [exportOpen, setExportOpen] = _useStateEL(false); // ── Abrir el modal de exportar en modo `collection`: traer el UNIVERSO completo del // filtro antes, no solo las tandas ya cargadas (hallazgo #21, AUDITORIA-ui-decorativa — // el modal decía "Se exportan los N registros del filtro actual" pero N era // `pgRows.length`, capado a lo que el scroll infinito hubiera cargado hasta ese momento, // arranca en 60). Si todavía falta universo por traer, lo pagina completo acá mismo // llamando repetido a `fetchPage` (misma API que ya usa el scroll — sin tocar su firma). // Bloquea el observer (`pgLoadingRef`) mientras dura para no pisarse con un scroll // concurrente, y deja `pgRows`/`pgOffsetRef` consistentes al terminar (el scroll infinito // sigue andando bien después: `pgHayMas` da false y no vuelve a pedir nada de más). Efecto // colateral aceptado: como `filtered`/la tabla leen el mismo `pgRows`, después de exportar // la pantalla también queda con el universo completo cargado (ya no hace falta scrollear // para que búsqueda/chips vean todo). const openExportModal = () => { if (!collection || pgRows.length >= pgTotal) { setExportOpen(true); return; } pgLoadingRef.current = true; setExportUniverseLoading(true); const traerResto = (acc, total) => { if (acc.length >= total) return Promise.resolve(acc); return window.MicosStore.fetchPage(collection, { offset: acc.length, limit: PG_BATCH }) .then((r) => { const items = r.items || []; if (!items.length) return acc; // el server no tiene más — corta acá, no vuelve a pedir const nuevoTotal = typeof r.total === 'number' ? r.total : total; return traerResto(acc.concat(items), nuevoTotal); }); }; traerResto(pgRows.slice(), pgTotal) .then((todas) => { setPgRows(todas); pgOffsetRef.current = todas.length; setPgTotal((t) => Math.max(t, todas.length)); }) .catch((e) => { // Best-effort (mismo criterio que el drill-down de más abajo): si falla a mitad de // camino, abre igual con lo que ya se había juntado — nunca deja el botón trabado. console.warn('[EntityListScreen] export: no se pudo traer el universo completo', collection, e.message); }) .finally(() => { pgLoadingRef.current = false; setExportUniverseLoading(false); setExportOpen(true); }); }; // Apply prefilter (from cross-module navigation) first, then top chip filter, then chip filter, then search. // LIMITACIÓN (modo `collection`, igual que Expedientes): estos filtros operan // CLIENT-SIDE sobre `_sourceRows` = `pgRows` (lo ya cargado por el scroll infinito // server-side), no sobre el universo completo. Si el registro buscado todavía no // se cargó, no aparece hasta scrollear más. KPIs/chips no tienen este problema // cuando el caller los conecta a /stats (paso siguiente, fuera del motor). const filtered = _useMemoEL(() => { let r = _sourceRows; if (prefilter?.predicate) { r = r.filter(prefilter.predicate); } if (tabs && tabs.applyFilter && tabValue != null) { r = r.filter((row) => tabs.applyFilter(row, tabValue)); } if (topChips && topChipValue != null && topChips.applyFilter) { r = r.filter((row) => topChips.applyFilter(row, topChipValue)); } if (filterChips && chipValue != null && filterChips.applyFilter) { r = r.filter((row) => filterChips.applyFilter(row, chipValue)); } if (search && searchFilter) { const q = search.toLowerCase(); r = r.filter((row) => searchFilter(row, q)); } r = applyDateRange(r, dateField, dateFrom, dateTo); if (sortRows) r = [...r].sort(sortRows); return r; }, [search, chipValue, topChipValue, tabValue, _sourceRows, prefilter, dateFrom, dateTo, dateField, sortRows]); // Hallazgo auditoría 05/07/2026 ("Contador 'N resultados' junto al buscador"): en modo // `collection`, el contador de la barra superior mostraba SIEMPRE `pgTotal` (el universo // COMPLETO sin filtro, vía X-Total-Count) — con un filtro/búsqueda/chip/rango de fechas // activo, `filtered` (lo que la tabla realmente pinta) podía ser un subconjunto MUCHO más // chico y el número mostrado no reflejaba nada real. `pgTotal` sigue siendo el correcto // SOLO cuando no hay ningún filtro activo (ahí sí es preferible al `filtered.length` de lo // ya cargado, ver comentario de más abajo). Tabs NO cuenta como filtro acá a propósito // (documentado como navegación, no filtro — y hoy solo lo usan listas sin `collection`). const hayFiltroDeListaActivo = !!( (search && searchFilter) || (filterChips && chipValue != null) || (topChips && topChipValue != null) || dateFrom || dateTo || prefilter?.predicate ); const isExportAction = secondaryAction && secondaryAction.label === 'Exportar' && !secondaryAction.onClick; // ── Tabs (segmentado primario estilo Finanzas) ── const _activeTab = tabs ? (tabs.options.find((o) => o.key === tabValue) || tabs.options[0]) : null; const _effTitle = _activeTab ? (_activeTab.title || _activeTab.label) : title; const _effDescription = _activeTab && _activeTab.description != null ? _activeTab.description : description; const _effKpis = _activeTab && _activeTab.kpis ? _activeTab.kpis : kpis; // Filas de la pestaña activa (antes de chips/búsqueda) → base para los conteos por lado. // (Nota: `tabs` hoy solo lo usan listas que NO pasan `collection` — ej. Logística — // así que en modo paginado `_sourceRows` = `rows` de todos modos.) const _tabRows = (tabs && tabs.applyFilter && tabValue != null) ? _sourceRows.filter((r) => tabs.applyFilter(r, tabValue)) : _sourceRows; const _chipBase = tabs ? _tabRows : _sourceRows; // Columnas efectivas: si el tab activo define `columns`, se usan en lugar de las globales. const _cols = (_activeTab && _activeTab.columns) ? _activeTab.columns : columns; const gridTemplate = _cols.map(c => c.width || '1fr').join(' '); const minWidth = _cols.reduce((sum, c) => { const w = c.width || '1fr'; const m = /(\d+)px/.exec(w); return sum + (m ? parseInt(m[1], 10) : 140); }, 0); return (
{/* ── Header ───────────────────────────────── */}
{eyebrow && (

{eyebrow}

)}

{tabs ? ( {_effTitle} ) : title}

{_effDescription && (

{_effDescription}

)}
{(primaryAction || secondaryAction) && (
{secondaryAction && ( )} {primaryAction && ( )}
)}
{/* ── Tabs (segmentado primario estilo Finanzas: Ingresos/Egresos) ── */} {tabs && (
{tabs.options.map((t) => { const active = tabValue === t.key; return ( ); })}
)} {/* ── Top chips (above KPIs) ──────────────── */} {topChips && (
{topChips.options.map((opt) => { const active = topChipValue === opt.value; return ( ); })}
)} {/* ── KPIs ─────────────────────────────────── */} {_effKpis.length > 0 && (
= 4 ? 'lg:grid-cols-4' : `lg:grid-cols-${_effKpis.length}`} gap-3 sm:gap-4 stagger`}> {_effKpis.map((k, i) => ( ))}
)} {/* ── Filter chips ─────────────────────────── */} {filterChips && (
{filterChips.options.map((opt) => { const active = chipValue === opt.value; return ( ); })}
)} {/* ── Prefilter banner (cross-module filter context) ── */} {prefilter && (

Filtrado desde otro módulo

{prefilter.label} {prefilter.sublabel && ( · {prefilter.sublabel} )}

{prefilter.onClear && ( )}
)} {/* ── Table card (search header + table) ──── */}
{/* Search row */}
setSearch(e.target.value)} placeholder={searchPlaceholder} className="w-full h-10 pl-10 pr-3 text-[13px] font-medium rounded-lg outline-none transition-colors" style={{ background: 'color-mix(in oklab, var(--surface) 50%, transparent)', border: '1px solid color-mix(in oklab, var(--border) 45%, transparent)', color: 'var(--foreground)', }} />
{dateField && ( )} {/* Modo `collection` SIN filtro activo: total REAL del universo (X-Total-Count vía /stats), no lo cargado — así nunca vuelve a mostrar "60" habiendo miles. Modo `collection` CON filtro activo (hallazgo auditoría 05/07/2026): el universo completo ya no es el número correcto — mostramos `filtered.length` como CUALQUIER otra lista (honesto sobre lo ya cargado, mismo criterio que el modo sin `collection`, que siempre usó `filtered.length`). */} {collection && !hayFiltroDeListaActivo ? pgTotal : filtered.length} resultados
{/* Table */}
{/* Head */}
{_cols.map((c, ci) => (
{c.label}
))}
{/* Rows */}
{filtered.map((row, idx) => { const clickable = !!onRowClick; const Wrap = clickable ? 'button' : 'div'; const isHighlighted = highlightRowId != null && row.id === highlightRowId; return (
_openRow(row) : undefined} className={`exp-row w-full grid gap-4 px-6 py-4 items-center text-left ${clickable ? 'cursor-pointer' : ''}`} style={{ gridTemplateColumns: gridTemplate, background: isHighlighted ? 'color-mix(in oklab, var(--accent) 12%, transparent)' : undefined, boxShadow: isHighlighted ? 'inset 3px 0 0 var(--accent)' : undefined, transition: 'background 0.5s ease, box-shadow 0.5s ease', }} > {_cols.map((c, ci) => { const cellInner = c.render ? c.render(row) : ( {row[c.key]} ); const isLast = ci === _cols.length - 1; return (
{isLast && rowChevron && clickable ? (
{cellInner}
) : cellInner}
); })}
); })} {/* Sentinel: al entrar en viewport (cerca del fondo) carga la próxima tanda */} {collection && pgHayMas && (
Cargando más… ({pgRows.length} de {pgTotal})
)} {/* Cierre: llegaste al final */} {collection && !pgHayMas && pgRows.length > 0 && (
— No hay más resultados —
)} {filtered.length === 0 && (

{collection && pgLoading && pgRows.length === 0 ? 'Cargando…' : emptyText}

)}
{/* ── Toast ─────────────────────────────────── */} {listToast && (

{listToast}

)} {/* ── Modal: exportar a Excel (checklist de columnas) ── */} setExportOpen(false)} exportConfig={effExportConfig} rows={filtered} filename={exportFilename || title} onExported={(n, res) => { setListToast(`Exportado · ${n} ${n === 1 ? 'fila' : 'filas'}${res && res.format === 'csv' ? ' (CSV)' : ''}`); setTimeout(() => setListToast(null), 3600); }} /> {extraBelow}
); } Object.assign(window, { EntityListScreen, TableDateRange, ExportModal, applyDateRange, useEntityStats });