@asteby/metacore-runtime-react 23.1.0 → 23.3.0

package/dist/dynamic-table.js

@@ -26,13 +26,14 @@ import { useApi, useCurrentBranch } from './api-context';
 import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns';
 import { useFacetLoaders, isLongTextColumn } from './use-facet-loaders';
 import { FilterChipsRow, translateOptionLabels } from './filter-chips';
+import { dedupeById, useInfiniteScrollSentinel } from './use-infinite-scroll';
 import { OptionsContext } from './options-context';
 import { getSearchableColumnKeys } from './column-visibility';
 import { useCan, usePermissionsActive, gateTableMetadata } from './permissions-context';
 import { useDynamicRowActions } from './dynamic-row-actions';
 import { ExportDialog } from './dialogs/export';
 import { ImportDialog } from './dialogs/import';
-export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColumns = [], onAction, onRowClick, refreshTrigger, defaultFilters, extraColumns = [], getDynamicColumns = defaultGetDynamicColumns, timeZone, currency, }) {
+export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColumns = [], onAction, onRowClick, refreshTrigger, defaultFilters, extraColumns = [], getDynamicColumns = defaultGetDynamicColumns, timeZone, currency, infiniteScroll = false, }) {
     const { t, i18n } = useTranslation();
     const api = useApi();
     const currentBranch = useCurrentBranch();
@@ -46,6 +47,10 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     const [footerTotals, setFooterTotals] = useState({});
     const [loading, setLoading] = useState(!cachedMeta);
     const [loadingData, setLoadingData] = useState(true);
+    // Infinite-scroll: a top-up page is in flight (distinct from the initial
+    // page load so only a small bottom spinner shows, not the whole-table one).
+    const [loadingMore, setLoadingMore] = useState(false);
+    const infPageRef = useRef(1);
     const [optionsMap, setOptionsMap] = useState(new Map());
     const [exportOpen, setExportOpen] = useState(false);
     const [importOpen, setImportOpen] = useState(false);
@@ -392,10 +397,68 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             console.error('Error al cargar los totales', error);
         }
     }, [model, metadata, aggregateColumns, buildFilterParams, endpoint, currentBranch?.id, api]);
+    // ---- infinite scroll: page fetch that REPLACES (page 1) or APPENDS ----
+    const infPageSize = 30;
+    const fetchPage = useCallback(async (page, append) => {
+        if (!metadata)
+            return;
+        if (append)
+            setLoadingMore(true);
+        else
+            setLoadingData(true);
+        try {
+            const params = {
+                page,
+                per_page: infPageSize,
+                ...buildFilterParams(),
+            };
+            const res = (await api.get(endpoint || `/data/${model}`, {
+                params,
+            }));
+            if (res.data.success) {
+                const rows = res.data.data || [];
+                setData((prev) => (append ? dedupeById(prev, rows) : rows));
+                if (res.data.meta)
+                    setRowCount(res.data.meta.total);
+            }
+        }
+        catch (error) {
+            console.error('Error al cargar los datos', error);
+        }
+        finally {
+            if (append)
+                setLoadingMore(false);
+            else
+                setLoadingData(false);
+        }
+    }, [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id]);
+    // Signature of everything that must reset the incremental list to page 1:
+    // the filters/search AND the sort (both live in buildFilterParams).
+    const filterSignature = useMemo(() => JSON.stringify(buildFilterParams()), [buildFilterParams]);
+    const loadNextPage = useCallback(() => {
+        if (loadingMore || loadingData)
+            return;
+        if (data.length >= rowCount)
+            return;
+        infPageRef.current += 1;
+        void fetchPage(infPageRef.current, true);
+    }, [loadingMore, loadingData, data.length, rowCount, fetchPage]);
+    // Infinite-scroll sentinels. There are two scroll containers (desktop
+    // table + mobile card list) but only one is laid out at a time — the CSS
+    // `hidden`/`sm:hidden` container has no box, so its observer never fires.
+    // Each sentinel drives the SAME `loadNextPage`; its internal guards + the
+    // `disabled` flag keep concurrent/exhausted fetches from doubling up.
+    const infScrollDisabled = !infiniteScroll || loadingMore || loadingData || data.length >= rowCount;
+    const { rootRef: infDesktopRoot, sentinelRef: infDesktopSentinel } = useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled });
+    const { rootRef: infMobileRoot, sentinelRef: infMobileSentinel } = useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled });
     const initialFetchDone = useRef(false);
     useEffect(() => {
         if (!metadata)
             return;
+        // Infinite mode owns its own fetching (reset-to-page-1 effect below);
+        // the classic pagination-driven path is skipped entirely.
+        if (infiniteScroll)
+            return;
         if (!initialFetchDone.current) {
             initialFetchDone.current = true;
             fetchData();
@@ -407,8 +470,41 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             fetchAggregates();
         }, 300);
         return () => clearTimeout(timeoutId);
-    }, [fetchData, fetchAggregates, metadata]);
-    const handleRefresh = useCallback(() => { fetchData(); fetchAggregates(); }, [fetchData, fetchAggregates]);
+    }, [fetchData, fetchAggregates, metadata, infiniteScroll]);
+    // Infinite mode: (re)load page 1 on mount and whenever the filters/sort/
+    // search change (or an explicit refreshTrigger) — replacing the accumulated
+    // rows and resetting the cursor.
+    useEffect(() => {
+        if (!infiniteScroll || !metadata)
+            return;
+        infPageRef.current = 1;
+        const first = !initialFetchDone.current;
+        initialFetchDone.current = true;
+        if (first) {
+            void fetchPage(1, false);
+            void fetchAggregates();
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            void fetchPage(1, false);
+            void fetchAggregates();
+        }, 300);
+        return () => clearTimeout(timeoutId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [infiniteScroll, metadata, filterSignature]);
+    const handleRefresh = useCallback(() => {
+        // Infinite mode owns its own list: refresh reloads page 1 and drops the
+        // accumulated pages (a classic fetchData would collapse it to one small
+        // pagination page). Classic mode keeps the pagination-driven refetch.
+        if (infiniteScroll) {
+            infPageRef.current = 1;
+            void fetchPage(1, false);
+        }
+        else {
+            fetchData();
+        }
+        fetchAggregates();
+    }, [infiniteScroll, fetchPage, fetchData, fetchAggregates]);
     // Per-row action dispatch (view/edit/delete/link/custom) + its dialogs live
     // in the shared hook so DynamicKanban's card menu behaves identically.
     const { handleInternalAction, dialogs: rowActionDialogs } = useDynamicRowActions({
@@ -449,9 +545,9 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         setBulkDeleteTotal(0);
         setRowSelection({});
         if (successCount > 0)
-            toast.success(`${successCount} registro(s) eliminado(s) correctamente`);
+            toast.success(t('dynamic.bulk_delete_success', { count: successCount, defaultValue: '{{count}} registro(s) eliminado(s) correctamente' }));
         if (errorCount > 0)
-            toast.error(`${errorCount} registro(s) no pudieron ser eliminados`);
+            toast.error(t('dynamic.bulk_delete_error', { count: errorCount, defaultValue: '{{count}} registro(s) no pudieron ser eliminados' }));
         handleRefresh();
     };
     const handleDynamicFilterChange = useCallback((filterKey, values) => {
@@ -682,31 +778,35 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     if (!metadata) {
         return _jsx("div", { className: "text-center text-muted-foreground py-8", children: "Error al cargar la configuraci\u00F3n de la tabla." });
     }
-    return (_jsxs(OptionsContext.Provider, { value: { optionsMap }, children: [_jsxs("div", { className: 'flex flex-col h-full min-h-0 w-full', children: [_jsxs("div", { className: 'pb-4 shrink-0', children: [_jsx(DataTableToolbar, { table: table, searchPlaceholder: metadata.searchPlaceholder || 'Buscar...', filters: filters, activeFilters: dynamicFilters, onDynamicFilterChange: handleDynamicFilterChange, dateFilter: { value: dateRange, onChange: setDateRange, placeholder: 'Filtrar por fecha' }, perPageOptions: metadata.perPageOptions, onRefresh: handleRefresh, isLoading: loadingData, selectedCount: Object.keys(rowSelection).length, onBulkDelete: () => setShowBulkDeleteConfirm(true), extraActions: _jsxs(_Fragment, { children: [viewMetadata?.canExport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setExportOpen(true), children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), " Exportar"] })), viewMetadata?.canImport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setImportOpen(true), children: [_jsx(Upload, { className: "h-4 w-4 mr-1" }), " Importar"] }))] }) }), activeFilterChips.length > 0 && (_jsx("div", { className: 'pt-2', children: _jsx(FilterChipsRow, { fields: activeFilterChips, onClearAll: clearAllDynamicFilters, "data-testid": 'table-filter-chips' }) }))] }), _jsx("div", { className: 'hidden sm:block flex-1 min-h-0 overflow-auto border rounded-md bg-card', children: _jsxs(Table, { noWrapper: true, className: cn('min-w-max w-full', aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && 'h-full'), children: [_jsx(TableHeader, { className: 'sticky top-0 z-10', children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: headerGroup.headers.map((header) => {
-                                            const isActionsColumn = header.id === 'actions';
-                                            return (_jsx(TableHead, { colSpan: header.colSpan, style: header.column.columnDef.size ? { width: header.column.columnDef.size } : undefined, className: cn('bg-card border-b h-10', isActionsColumn && 'sticky right-0 z-20 bg-card shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]'), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
-                                        }) }, headerGroup.id))) }), _jsx(TableBody, { children: loadingData && data.length === 0 ? (_jsx(TableSkeleton, {})) : table.getRowModel().rows?.length ? (_jsxs(_Fragment, { children: [table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', className: cn(onRowClick && 'cursor-pointer'), onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: row.getVisibleCells().map((cell) => {
-                                                    const isActionsColumn = cell.column.id === 'actions';
-                                                    const isSelectColumn = cell.column.id === 'select';
-                                                    return (_jsx(TableCell, { style: cell.column.columnDef.size ? { width: cell.column.columnDef.size } : undefined, className: cn('py-2', isActionsColumn && 'sticky right-0 bg-card shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]'), onClick: (isActionsColumn || isSelectColumn) ? (e) => e.stopPropagation() : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                                                }) }, row.id))), aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && (_jsx(TableRow, { className: 'border-0 hover:bg-transparent', children: _jsx(TableCell, { colSpan: columns.length, className: 'h-full p-0' }) }))] })) : (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: _jsx(TableCell, { colSpan: columns.length, className: 'h-full p-0', children: _jsxs("div", { className: "flex h-full py-12 flex-col items-center justify-center gap-2 text-muted-foreground", children: [_jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-muted/50", children: _jsx(Inbox, { className: "h-10 w-10" }) }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground", children: "No se encontraron resultados" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "No hay datos para mostrar en este momento." })] })] }) }) })) }), aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && (_jsx(TableFooter, { className: "bg-transparent", children: _jsx(TableRow, { className: "hover:bg-transparent", children: table.getVisibleLeafColumns().map((leaf, idx) => {
-                                            const col = (metadata?.columns ?? []).find((c) => c.key === leaf.id);
-                                            const isFirst = idx === 0;
-                                            const stickyBase = 'sticky bottom-0 z-10 border-t bg-background py-2 font-semibold';
-                                            // Aggregate cell: render the SUM formatted like the body cell.
-                                            if (col && aggregateOf(col)) {
-                                                return (_jsx(TableCell, { className: `${stickyBase} text-right tabular-nums`, children: formatAggregateTotal(col, footerTotals[leaf.id], currency, i18n.language) }, leaf.id));
-                                            }
-                                            // First non-aggregate column carries the "Total" label.
-                                            return (_jsx(TableCell, { className: stickyBase, children: isFirst ? t('common.total', 'Total') : '' }, leaf.id));
-                                        }) }) }))] }) }), _jsx("div", { className: 'flex flex-1 min-h-0 flex-col gap-2 overflow-y-auto sm:hidden', children: loadingData && data.length === 0 ? (Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: 'rounded-lg border bg-card p-3', children: [_jsx(Skeleton, { className: 'h-4 w-24' }), _jsx(Skeleton, { className: 'mt-2 h-4 w-40' }), _jsx(Skeleton, { className: 'mt-2 h-4 w-32' })] }, i)))) : table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => {
-                            const cells = row.getVisibleCells();
-                            const actionsCell = cells.find((c) => c.column.id === 'actions');
-                            const dataCells = cells.filter((c) => c.column.id !== 'actions' && c.column.id !== 'select');
-                            return (_jsxs("div", { "data-state": row.getIsSelected() && 'selected', className: cn('flex flex-col gap-1.5 rounded-lg border bg-card p-3 data-[state=selected]:border-primary/40', onRowClick && 'cursor-pointer'), onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: [dataCells.map((cell) => {
-                                        const header = cell.column.columnDef.header;
-                                        const label = typeof header === 'string' ? header : cell.column.id;
-                                        return (_jsxs("div", { className: 'flex items-start justify-between gap-3 text-sm', children: [_jsx("span", { className: 'shrink-0 text-muted-foreground', children: label }), _jsx("span", { className: 'min-w-0 break-words text-right font-medium', children: flexRender(cell.column.columnDef.cell, cell.getContext()) })] }, cell.id));
-                                    }), actionsCell && (_jsx("div", { className: 'flex justify-end border-t pt-2', onClick: onRowClick ? (e) => e.stopPropagation() : undefined, children: flexRender(actionsCell.column.columnDef.cell, actionsCell.getContext()) }))] }, row.id));
-                        })) : (_jsxs("div", { className: 'flex flex-col items-center justify-center gap-2 rounded-lg border bg-card py-12 text-muted-foreground', children: [_jsx("div", { className: 'flex h-16 w-16 items-center justify-center rounded-full bg-muted/50', children: _jsx(Inbox, { className: 'h-8 w-8' }) }), _jsx("h3", { className: 'text-base font-semibold text-foreground', children: "No se encontraron resultados" }), _jsx("p", { className: 'text-sm text-muted-foreground', children: "No hay datos para mostrar en este momento." })] })) }), _jsx("div", { className: 'shrink-0 pt-4', children: _jsx(DataTablePagination, { table: table, pageSizeOptions: metadata.perPageOptions }) })] }), rowActionDialogs, _jsx(AlertDialog, { open: showBulkDeleteConfirm, onOpenChange: (open) => !open && !isBulkDeleting && setShowBulkDeleteConfirm(false), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: isBulkDeleting ? 'Eliminando registros...' : '¿Eliminar múltiples registros?' }), _jsx(AlertDialogDescription, { children: isBulkDeleting ? (_jsxs("div", { className: "space-y-4 mt-4", children: [_jsx(Progress, { value: (bulkDeleteProgress / bulkDeleteTotal) * 100 }), _jsxs("p", { className: "text-center text-sm", children: ["Procesando ", bulkDeleteProgress, " de ", bulkDeleteTotal, " registros..."] })] })) : (_jsxs(_Fragment, { children: ["Esta acci\u00F3n no se puede deshacer. Se eliminar\u00E1n permanentemente ", _jsx("strong", { children: Object.keys(rowSelection).length }), " registro(s) de nuestros servidores."] })) })] }), !isBulkDeleting && (_jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('common.cancel') }), _jsx(AlertDialogAction, { onClick: (e) => { e.preventDefault(); confirmBulkDelete(); }, className: "bg-red-600 hover:bg-red-700", children: "Eliminar todos" })] }))] }) }), viewMetadata?.canExport && (_jsx(ExportDialog, { open: exportOpen, onOpenChange: setExportOpen, model: model, metadata: metadata, currentFilters: buildFilterParams(), hasActiveFilters: hasActiveFilters })), viewMetadata?.canImport && (_jsx(ImportDialog, { open: importOpen, onOpenChange: setImportOpen, model: model, metadata: metadata, onImported: handleRefresh })), _jsx(DataTableBulkActions, { table: table, entityName: "registro", children: _jsxs(Button, { variant: "destructive", size: "sm", className: "h-8", onClick: () => setShowBulkDeleteConfirm(true), children: [_jsx(Trash2, { className: "h-4 w-4 mr-1.5" }), " Eliminar"] }) })] }));
+    return (_jsxs(OptionsContext.Provider, { value: { optionsMap }, children: [_jsxs("div", { className: 'flex flex-col h-full min-h-0 w-full', children: [_jsxs("div", { className: 'pb-4 shrink-0', children: [_jsx(DataTableToolbar, { table: table, searchPlaceholder: metadata.searchPlaceholder || 'Buscar...', filters: filters, activeFilters: dynamicFilters, onDynamicFilterChange: handleDynamicFilterChange, dateFilter: { value: dateRange, onChange: setDateRange, placeholder: 'Filtrar por fecha' }, perPageOptions: metadata.perPageOptions, onRefresh: handleRefresh, isLoading: loadingData, selectedCount: Object.keys(rowSelection).length, onBulkDelete: () => setShowBulkDeleteConfirm(true), extraActions: _jsxs(_Fragment, { children: [viewMetadata?.canExport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setExportOpen(true), children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), " Exportar"] })), viewMetadata?.canImport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setImportOpen(true), children: [_jsx(Upload, { className: "h-4 w-4 mr-1" }), " Importar"] }))] }) }), activeFilterChips.length > 0 && (_jsx("div", { className: 'pt-2', children: _jsx(FilterChipsRow, { fields: activeFilterChips, onClearAll: clearAllDynamicFilters, "data-testid": 'table-filter-chips' }) }))] }), _jsxs("div", { ref: infDesktopRoot, className: 'hidden sm:block flex-1 min-h-0 overflow-auto border rounded-md bg-card', children: [_jsxs(Table, { noWrapper: true, className: cn('min-w-max w-full', aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && 'h-full'), children: [_jsx(TableHeader, { className: 'sticky top-0 z-10', children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: headerGroup.headers.map((header) => {
+                                                const isActionsColumn = header.id === 'actions';
+                                                return (_jsx(TableHead, { colSpan: header.colSpan, style: header.column.columnDef.size ? { width: header.column.columnDef.size } : undefined, className: cn('bg-card border-b h-10', isActionsColumn && 'sticky right-0 z-20 bg-card shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]'), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                            }) }, headerGroup.id))) }), _jsx(TableBody, { children: loadingData && data.length === 0 ? (_jsx(TableSkeleton, {})) : table.getRowModel().rows?.length ? (_jsxs(_Fragment, { children: [table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', className: cn(onRowClick && 'cursor-pointer'), onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: row.getVisibleCells().map((cell) => {
+                                                        const isActionsColumn = cell.column.id === 'actions';
+                                                        const isSelectColumn = cell.column.id === 'select';
+                                                        return (_jsx(TableCell, { style: cell.column.columnDef.size ? { width: cell.column.columnDef.size } : undefined, className: cn('py-2', isActionsColumn && 'sticky right-0 bg-card shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]'), onClick: (isActionsColumn || isSelectColumn) ? (e) => e.stopPropagation() : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                                    }) }, row.id))), aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && (_jsx(TableRow, { className: 'border-0 hover:bg-transparent', children: _jsx(TableCell, { colSpan: columns.length, className: 'h-full p-0' }) }))] })) : (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: _jsx(TableCell, { colSpan: columns.length, className: 'h-full p-0', children: _jsxs("div", { className: "flex h-full py-12 flex-col items-center justify-center gap-2 text-muted-foreground", children: [_jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-muted/50", children: _jsx(Inbox, { className: "h-10 w-10" }) }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground", children: "No se encontraron resultados" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "No hay datos para mostrar en este momento." })] })] }) }) })) }), aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && (_jsx(TableFooter, { className: "bg-transparent", children: _jsx(TableRow, { className: "hover:bg-transparent", children: table.getVisibleLeafColumns().map((leaf, idx) => {
+                                                const col = (metadata?.columns ?? []).find((c) => c.key === leaf.id);
+                                                const isFirst = idx === 0;
+                                                const stickyBase = 'sticky bottom-0 z-10 border-t bg-background py-2 font-semibold';
+                                                // Aggregate cell: render the SUM formatted like the body cell.
+                                                if (col && aggregateOf(col)) {
+                                                    return (_jsx(TableCell, { className: `${stickyBase} text-right tabular-nums`, children: formatAggregateTotal(col, footerTotals[leaf.id], currency, i18n.language) }, leaf.id));
+                                                }
+                                                // First non-aggregate column carries the "Total" label.
+                                                return (_jsx(TableCell, { className: stickyBase, children: isFirst ? t('common.total', 'Total') : '' }, leaf.id));
+                                            }) }) }))] }), infiniteScroll && (_jsxs(_Fragment, { children: [loadingMore && (_jsx("div", { className: 'p-2', children: _jsx(Skeleton, { className: 'h-8 w-full', "data-testid": 'table-loading-more' }) })), _jsx("div", { ref: infDesktopSentinel, className: 'h-1 w-full', "aria-hidden": true })] }))] }), _jsxs("div", { ref: infMobileRoot, className: 'flex flex-1 min-h-0 flex-col gap-2 overflow-y-auto sm:hidden', children: [loadingData && data.length === 0 ? (Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: 'rounded-lg border bg-card p-3', children: [_jsx(Skeleton, { className: 'h-4 w-24' }), _jsx(Skeleton, { className: 'mt-2 h-4 w-40' }), _jsx(Skeleton, { className: 'mt-2 h-4 w-32' })] }, i)))) : table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => {
+                                const cells = row.getVisibleCells();
+                                const actionsCell = cells.find((c) => c.column.id === 'actions');
+                                const dataCells = cells.filter((c) => c.column.id !== 'actions' && c.column.id !== 'select');
+                                return (_jsxs("div", { "data-state": row.getIsSelected() && 'selected', className: cn('flex flex-col gap-1.5 rounded-lg border bg-card p-3 data-[state=selected]:border-primary/40', onRowClick && 'cursor-pointer'), onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: [dataCells.map((cell) => {
+                                            const header = cell.column.columnDef.header;
+                                            const label = typeof header === 'string' ? header : cell.column.id;
+                                            return (_jsxs("div", { className: 'flex items-start justify-between gap-3 text-sm', children: [_jsx("span", { className: 'shrink-0 text-muted-foreground', children: label }), _jsx("span", { className: 'min-w-0 break-words text-right font-medium', children: flexRender(cell.column.columnDef.cell, cell.getContext()) })] }, cell.id));
+                                        }), actionsCell && (_jsx("div", { className: 'flex justify-end border-t pt-2', onClick: onRowClick ? (e) => e.stopPropagation() : undefined, children: flexRender(actionsCell.column.columnDef.cell, actionsCell.getContext()) }))] }, row.id));
+                            })) : (_jsxs("div", { className: 'flex flex-col items-center justify-center gap-2 rounded-lg border bg-card py-12 text-muted-foreground', children: [_jsx("div", { className: 'flex h-16 w-16 items-center justify-center rounded-full bg-muted/50', children: _jsx(Inbox, { className: 'h-8 w-8' }) }), _jsx("h3", { className: 'text-base font-semibold text-foreground', children: "No se encontraron resultados" }), _jsx("p", { className: 'text-sm text-muted-foreground', children: "No hay datos para mostrar en este momento." })] })), infiniteScroll && (_jsxs(_Fragment, { children: [loadingMore && (_jsx(Skeleton, { className: 'h-16 w-full shrink-0', "data-testid": 'table-loading-more-mobile' })), _jsx("div", { ref: infMobileSentinel, className: 'h-1 w-full shrink-0', "aria-hidden": true })] }))] }), _jsx("div", { className: 'shrink-0 pt-4', children: infiniteScroll ? (data.length > 0 && (_jsx("p", { className: 'text-center text-xs text-muted-foreground tabular-nums', children: t('common.showingCount', {
+                                defaultValue: '{{count}} de {{total}}',
+                                count: data.length,
+                                total: rowCount,
+                            }) }))) : (_jsx(DataTablePagination, { table: table, pageSizeOptions: metadata.perPageOptions })) })] }), rowActionDialogs, _jsx(AlertDialog, { open: showBulkDeleteConfirm, onOpenChange: (open) => !open && !isBulkDeleting && setShowBulkDeleteConfirm(false), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: isBulkDeleting ? 'Eliminando registros...' : '¿Eliminar múltiples registros?' }), _jsx(AlertDialogDescription, { children: isBulkDeleting ? (_jsxs("div", { className: "space-y-4 mt-4", children: [_jsx(Progress, { value: (bulkDeleteProgress / bulkDeleteTotal) * 100 }), _jsxs("p", { className: "text-center text-sm", children: ["Procesando ", bulkDeleteProgress, " de ", bulkDeleteTotal, " registros..."] })] })) : (_jsxs(_Fragment, { children: ["Esta acci\u00F3n no se puede deshacer. Se eliminar\u00E1n permanentemente ", _jsx("strong", { children: Object.keys(rowSelection).length }), " registro(s) de nuestros servidores."] })) })] }), !isBulkDeleting && (_jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('common.cancel') }), _jsx(AlertDialogAction, { onClick: (e) => { e.preventDefault(); confirmBulkDelete(); }, className: "bg-red-600 hover:bg-red-700", children: "Eliminar todos" })] }))] }) }), viewMetadata?.canExport && (_jsx(ExportDialog, { open: exportOpen, onOpenChange: setExportOpen, model: model, metadata: metadata, currentFilters: buildFilterParams(), hasActiveFilters: hasActiveFilters })), viewMetadata?.canImport && (_jsx(ImportDialog, { open: importOpen, onOpenChange: setImportOpen, model: model, metadata: metadata, onImported: handleRefresh })), _jsx(DataTableBulkActions, { table: table, entityName: "registro", children: _jsxs(Button, { variant: "destructive", size: "sm", className: "h-8", onClick: () => setShowBulkDeleteConfirm(true), children: [_jsx(Trash2, { className: "h-4 w-4 mr-1.5" }), " Eliminar"] }) })] }));
 }

package/dist/use-infinite-scroll.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Returns a NEW array = `existing` followed by every row in `incoming` whose
+ * `id` is not already present. Stable on identity/order of `existing`. Pure.
+ */
+export declare function dedupeById<T extends {
+    id?: any;
+}>(existing: T[], incoming: T[]): T[];
+export interface UseInfiniteScrollOptions {
+    /** Fired when the sentinel scrolls into view and loading is enabled. */
+    onLoadMore: () => void;
+    /** When true, the observer is inert (no more pages, or a load in flight). */
+    disabled?: boolean;
+    /** Pixels of pre-fetch margin below the viewport. Default 200. */
+    rootMargin?: number;
+}
+export interface InfiniteScrollRefs<R extends HTMLElement = HTMLDivElement, S extends HTMLElement = HTMLDivElement> {
+    rootRef: React.RefObject<R | null>;
+    sentinelRef: React.RefObject<S | null>;
+}
+/**
+ * IntersectionObserver-backed infinite scroll. Attach `rootRef` to the
+ * scrollable container and `sentinelRef` to a small element at its bottom. The
+ * latest `onLoadMore`/`disabled` are read through a ref so the observer isn't
+ * torn down and rebuilt on every render.
+ */
+export declare function useInfiniteScrollSentinel<R extends HTMLElement = HTMLDivElement, S extends HTMLElement = HTMLDivElement>({ onLoadMore, disabled, rootMargin, }: UseInfiniteScrollOptions): InfiniteScrollRefs<R, S>;
+//# sourceMappingURL=use-infinite-scroll.d.ts.map

package/dist/use-infinite-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../src/use-infinite-scroll.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,GAAG,CAAA;CAAE,EAC/C,QAAQ,EAAE,CAAC,EAAE,EACb,QAAQ,EAAE,CAAC,EAAE,GACZ,CAAC,EAAE,CAWL;AAED,MAAM,WAAW,wBAAwB;IACvC,wEAAwE;IACxE,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,CAAC,SAAS,WAAW,GAAG,cAAc;IAEtC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IAClC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;CACvC;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,EACA,UAAU,EACV,QAAgB,EAChB,UAAgB,GACjB,EAAE,wBAAwB,GAAG,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAgCrD"}

package/dist/use-infinite-scroll.js

@@ -0,0 +1,60 @@
+// Shared incremental-loading primitives for DynamicTable and DynamicKanban.
+//   - `dedupeById` appends a page of rows to the accumulated set, dropping any
+//     id already present (the server may re-paginate / overlap between a global
+//     page and a scoped top-up).
+//   - `useInfiniteScrollSentinel` wires an IntersectionObserver: attach
+//     `rootRef` to the scroll container and `sentinelRef` to a sentinel at its
+//     bottom; when the sentinel enters view (and it's enabled) `onLoadMore`
+//     fires. Degrades to a no-op where IntersectionObserver is unavailable
+//     (older/SSR/happy-dom) so callers still render.
+import { useEffect, useRef } from 'react';
+/**
+ * Returns a NEW array = `existing` followed by every row in `incoming` whose
+ * `id` is not already present. Stable on identity/order of `existing`. Pure.
+ */
+export function dedupeById(existing, incoming) {
+    if (incoming.length === 0)
+        return existing;
+    const seen = new Set(existing.map((r) => String(r?.id)));
+    const additions = [];
+    for (const row of incoming) {
+        const key = String(row?.id);
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        additions.push(row);
+    }
+    return additions.length === 0 ? existing : [...existing, ...additions];
+}
+/**
+ * IntersectionObserver-backed infinite scroll. Attach `rootRef` to the
+ * scrollable container and `sentinelRef` to a small element at its bottom. The
+ * latest `onLoadMore`/`disabled` are read through a ref so the observer isn't
+ * torn down and rebuilt on every render.
+ */
+export function useInfiniteScrollSentinel({ onLoadMore, disabled = false, rootMargin = 200, }) {
+    const rootRef = useRef(null);
+    const sentinelRef = useRef(null);
+    const cb = useRef(onLoadMore);
+    const disabledRef = useRef(disabled);
+    cb.current = onLoadMore;
+    disabledRef.current = disabled;
+    useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (!sentinel ||
+            typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting && !disabledRef.current) {
+                    cb.current();
+                }
+            }
+        }, { root: rootRef.current ?? null, rootMargin: `0px 0px ${rootMargin}px 0px` });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+        // Re-create only when the margin changes; onLoadMore/disabled are read live.
+    }, [rootMargin]);
+    return { rootRef, sentinelRef };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.1.0",
+  "version": "23.3.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "sonner": ">=1.7",
     "zustand": ">=5",
     "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.9.0"
+    "@asteby/metacore-ui": "^2.9.1"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.9.0"
+    "@asteby/metacore-ui": "2.9.1"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/dynamic-kanban-infinite-scroll.test.tsx

@@ -0,0 +1,210 @@
+// @vitest-environment happy-dom
+//
+// DynamicKanban incremental (per-lane) loading:
+//   1. applyLaneTotalsOnMove — the pure count adjustment that keeps a partial
+//      lane's `count/total` header truthful across an optimistic drag.
+//   2. A lane tops up its OWN stage on scroll: firing the sentinel issues
+//      `f_<group_by>=<stage>&page=1&per_page=25` (on top of the active filters)
+//      and appends the rows, with the header total taken from the response meta.
+//   3. Changing the filters re-fetches the initial board page (resets the
+//      per-lane pagination).
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = { t: (_k: string, o?: { defaultValue?: string }) => o?.defaultValue ?? _k, i18n: { language: 'es' } }
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { applyLaneTotalsOnMove, DynamicKanban } from '../dynamic-kanban'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+// ---------------------------------------------------------------------------
+// 1. Pure count adjustment
+// ---------------------------------------------------------------------------
+
+describe('applyLaneTotalsOnMove', () => {
+    it('decrements the source total and increments the destination total', () => {
+        const out = applyLaneTotalsOnMove(
+            { backlog: { total: 5 }, done: { total: 2 } },
+            'backlog',
+            'done',
+        )
+        expect(out.backlog.total).toBe(4)
+        expect(out.done.total).toBe(3)
+    })
+
+    it('leaves lanes with an unknown (null) total alone', () => {
+        const out = applyLaneTotalsOnMove(
+            { backlog: { total: null }, done: { total: 2 } },
+            'backlog',
+            'done',
+        )
+        expect(out.backlog.total).toBeNull()
+        expect(out.done.total).toBe(3)
+    })
+
+    it('never drives a total below zero', () => {
+        const out = applyLaneTotalsOnMove(
+            { backlog: { total: 0 }, done: { total: 1 } },
+            'backlog',
+            'done',
+        )
+        expect(out.backlog.total).toBe(0)
+        expect(out.done.total).toBe(2)
+    })
+
+    it('does not mutate the input map', () => {
+        const input = { backlog: { total: 5 }, done: { total: 2 } }
+        applyLaneTotalsOnMove(input, 'backlog', 'done')
+        expect(input.backlog.total).toBe(5)
+        expect(input.done.total).toBe(2)
+    })
+})
+
+// ---------------------------------------------------------------------------
+// 2 + 3. Per-lane top-up + reset
+// ---------------------------------------------------------------------------
+
+const STAGES = [
+    { key: 'backlog', label: 'Backlog', color: 'slate', order: 0 },
+    { key: 'done', label: 'Done', color: 'green', order: 1 },
+]
+
+function meta(over: Partial<TableMetadata> = {}): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        view_type: 'kanban',
+        group_by: 'stage',
+        stages: STAGES,
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+            { key: 'stage', label: 'Stage', type: 'status', sortable: false, filterable: true, options: STAGES.map((s) => ({ value: s.key, label: s.label })) },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: false,
+        hasActions: false,
+        ...over,
+    }
+}
+
+// Initial global page: one backlog card. A backlog top-up (f_stage=backlog)
+// returns two more backlog cards with a server total of 5.
+function fakeApi(): ApiClient {
+    const ok = (data: unknown, meta?: Record<string, unknown>) => ({
+        data: { success: true, data, ...(meta ? { meta } : {}) },
+    })
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            const stage = cfg?.params?.f_stage
+            if (stage === 'backlog') {
+                return ok(
+                    [
+                        { id: 2, title: 'Backlog Two', stage: 'backlog' },
+                        { id: 3, title: 'Backlog Three', stage: 'backlog' },
+                    ],
+                    { total: 5 },
+                )
+            }
+            if (stage === 'done') return ok([], { total: 0 })
+            // initial global board page
+            return ok([{ id: 1, title: 'Backlog One', stage: 'backlog' }])
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function stageCalls(api: ApiClient, stage: string) {
+    return (api.get as any).mock.calls.filter(
+        (c: any[]) => c[1]?.params?.f_stage === stage,
+    )
+}
+function globalDataCalls(api: ApiClient) {
+    return (api.get as any).mock.calls.filter(
+        (c: any[]) =>
+            !String(c[0]).startsWith('/metadata/table/') &&
+            c[1]?.params?.f_stage === undefined,
+    )
+}
+
+// Controllable IntersectionObserver.
+type IOEntry = { isIntersecting: boolean }
+let observers: Array<{ fire: (v: boolean) => void }> = []
+class FakeIO {
+    cb: (e: IOEntry[]) => void
+    constructor(cb: (e: IOEntry[]) => void) {
+        this.cb = cb
+        observers.push({ fire: (v: boolean) => this.cb([{ isIntersecting: v }]) })
+    }
+    observe() {}
+    disconnect() {}
+}
+
+describe('DynamicKanban per-lane infinite scroll', () => {
+    beforeEach(() => {
+        observers = []
+        ;(globalThis as any).IntersectionObserver = FakeIO
+    })
+    afterEach(() => {
+        delete (globalThis as any).IntersectionObserver
+    })
+
+    it('tops up ONE lane by stage on scroll and shows the server total', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        // Initial board page painted its single backlog card.
+        expect(await screen.findByText('Backlog One')).toBeTruthy()
+        expect(stageCalls(api, 'backlog')).toHaveLength(0)
+
+        // Sentinels enter view → each declared lane tops up its OWN stage.
+        expect(observers.length).toBeGreaterThan(0)
+        observers.forEach((o) => o.fire(true))
+
+        // The backlog top-up ran with the right scoped params...
+        await waitFor(() => expect(stageCalls(api, 'backlog').length).toBeGreaterThan(0))
+        const call = stageCalls(api, 'backlog')[0]
+        expect(call[1].params).toMatchObject({ f_stage: 'backlog', page: 1, per_page: 25 })
+
+        // ...its rows were appended and the header shows count/serverTotal (3/5).
+        expect(await screen.findByText('Backlog Two')).toBeTruthy()
+        expect(await screen.findByText('3/5')).toBeTruthy()
+    })
+
+    it('re-fetches the initial board page when the filters change (reset)', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        const { rerender } = render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Backlog One')
+        const before = globalDataCalls(api).length
+
+        rerender(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" defaultFilters={{ priority: 'high' }} />
+            </ApiProvider>,
+        )
+
+        // A fresh (un-scoped) board fetch fires — the per-lane pagination resets.
+        await waitFor(() => expect(globalDataCalls(api).length).toBeGreaterThan(before))
+    })
+})