@asteby/metacore-runtime-react 4.0.0

package/dist/dynamic-table.js

@@ -0,0 +1,516 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// DynamicTable — metadata-driven CRUD table used by every metacore host.
+// Ported from the ops starter but with the host-specific aliases swapped
+// for metacore packages + context-injected peer deps:
+//   * `@/lib/api` → <ApiProvider> (see api-context.tsx)
+//   * `@/stores/branch-store` → <BranchProvider> (optional)
+//   * `@/stores/metadata-cache` → internal ./metadata-cache zustand store
+//   * `@/components/ui/*` → @asteby/metacore-ui/primitives
+//   * `@/components/data-table/*` → @asteby/metacore-ui/data-table
+//   * `@/components/dynamic/{record,export,import}-dialog` → ./dialogs/*
+//   * `@/components/dynamic/dynamic-columns` → host-injected via the
+//     `getDynamicColumns` prop (hosts retain ownership because the rendered
+//     column cells are tightly coupled to their design system).
+import { useEffect, useState, useMemo, useCallback, useRef } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+import { format } from 'date-fns';
+import { flexRender, getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { cn } from '@asteby/metacore-ui/lib';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Button, Skeleton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@asteby/metacore-ui/primitives';
+import { DataTablePagination, DataTableToolbar, DataTableBulkActions, } from '@asteby/metacore-ui/data-table';
+import { Inbox, Download, Upload, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { Progress } from './dialogs/_primitives';
+import { useMetadataCache } from './metadata-cache';
+import { useApi, useCurrentBranch } from './api-context';
+import { OptionsContext } from './options-context';
+import { ActionModalDispatcher } from './action-modal-dispatcher';
+import { DynamicRecordDialog } from './dialogs/dynamic-record';
+import { ExportDialog } from './dialogs/export';
+import { ImportDialog } from './dialogs/import';
+export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColumns = [], onAction, refreshTrigger, defaultFilters, extraColumns = [], getDynamicColumns = defaultGetDynamicColumns, }) {
+    const { t, i18n } = useTranslation();
+    const api = useApi();
+    const currentBranch = useCurrentBranch();
+    const navigate = useNavigate();
+    const prevBranchId = useRef(currentBranch?.id);
+    const { getMetadata, setMetadata: cacheMetadata } = useMetadataCache();
+    const cachedMeta = getMetadata(model);
+    const [metadata, setMetadata] = useState(cachedMeta || null);
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(!cachedMeta);
+    const [loadingData, setLoadingData] = useState(true);
+    const [optionsMap, setOptionsMap] = useState(new Map());
+    const [recordDialog, setRecordDialog] = useState({ open: false, mode: 'view', recordId: null });
+    const [rowToDelete, setRowToDelete] = useState(null);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [exportOpen, setExportOpen] = useState(false);
+    const [importOpen, setImportOpen] = useState(false);
+    const [actionModal, setActionModal] = useState({ open: false, action: null, record: null });
+    const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false);
+    const [isBulkDeleting, setIsBulkDeleting] = useState(false);
+    const [bulkDeleteProgress, setBulkDeleteProgress] = useState(0);
+    const [bulkDeleteTotal, setBulkDeleteTotal] = useState(0);
+    const [rowSelection, setRowSelection] = useState({});
+    const [sorting, setSorting] = useState([]);
+    const [columnVisibility, setColumnVisibility] = useState(() => {
+        const initial = {};
+        hiddenColumns.forEach(col => { initial[col] = false; });
+        return initial;
+    });
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [rowCount, setRowCount] = useState(0);
+    const [dateRange, setDateRange] = useState(undefined);
+    const [dynamicFilters, setDynamicFilters] = useState({});
+    const [filterOptionsMap, setFilterOptionsMap] = useState(new Map());
+    const initializedFromUrl = useRef(false);
+    const urlHadPerPage = useRef(false);
+    useEffect(() => {
+        if (prevBranchId.current !== currentBranch?.id) {
+            prevBranchId.current = currentBranch?.id;
+            setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+            setRowSelection({});
+        }
+    }, [currentBranch?.id]);
+    const urlAliasToOperator = {
+        'contains': 'ILIKE', 'like': 'LIKE', 'in': 'IN', 'not_in': 'NOT_IN',
+        'gt': 'GT', 'lt': 'LT', 'gte': 'GTE', 'lte': 'LTE',
+        'range': 'RANGE', 'null': 'NULL', 'not_null': 'NOT_NULL',
+    };
+    const operatorToUrlAlias = Object.fromEntries(Object.entries(urlAliasToOperator).map(([alias, op]) => [op, alias]));
+    const urlValueToInternal = (value) => {
+        const colonIdx = value.indexOf(':');
+        if (colonIdx === -1)
+            return value;
+        const prefix = value.substring(0, colonIdx).toLowerCase();
+        const rest = value.substring(colonIdx + 1);
+        const operator = urlAliasToOperator[prefix];
+        return operator ? `${operator}:${rest}` : value;
+    };
+    const internalValueToUrl = (value) => {
+        const colonIdx = value.indexOf(':');
+        if (colonIdx === -1)
+            return value;
+        const prefix = value.substring(0, colonIdx);
+        const rest = value.substring(colonIdx + 1);
+        const alias = operatorToUrlAlias[prefix];
+        return alias ? `${alias}:${rest}` : value;
+    };
+    useEffect(() => {
+        if (!enableUrlSync || initializedFromUrl.current)
+            return;
+        initializedFromUrl.current = true;
+        const params = new URLSearchParams(window.location.search);
+        const page = params.get('page');
+        const perPage = params.get('per_page');
+        if (perPage)
+            urlHadPerPage.current = true;
+        if (page || perPage) {
+            setPagination((prev) => ({
+                pageIndex: page ? Math.max(0, parseInt(page, 10) - 1) : prev.pageIndex,
+                pageSize: perPage ? parseInt(perPage, 10) : prev.pageSize,
+            }));
+        }
+        const sortBy = params.get('sortBy');
+        const order = params.get('order');
+        if (sortBy)
+            setSorting([{ id: sortBy, desc: order === 'desc' }]);
+        const search = params.get('search');
+        if (search)
+            setGlobalFilter(search);
+        const filters = {};
+        params.forEach((rawValue, key) => {
+            if (key.startsWith('f_')) {
+                const filterKey = key.substring(2);
+                if (defaultFilters && filterKey in defaultFilters)
+                    return;
+                const value = urlValueToInternal(rawValue);
+                if (value.startsWith('IN:'))
+                    filters[filterKey] = value.substring(3).split(',');
+                else
+                    filters[filterKey] = [value];
+            }
+        });
+        if (Object.keys(filters).length > 0)
+            setDynamicFilters(filters);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        if (!enableUrlSync || !initializedFromUrl.current)
+            return;
+        const params = new URLSearchParams();
+        if (pagination.pageIndex > 0)
+            params.set('page', String(pagination.pageIndex + 1));
+        if (pagination.pageSize !== 10)
+            params.set('per_page', String(pagination.pageSize));
+        if (sorting.length > 0) {
+            params.set('sortBy', sorting[0].id);
+            params.set('order', sorting[0].desc ? 'desc' : 'asc');
+        }
+        if (globalFilter)
+            params.set('search', globalFilter);
+        Object.entries(dynamicFilters).forEach(([key, values]) => {
+            if (values.length === 0)
+                return;
+            if (defaultFilters && key in defaultFilters)
+                return;
+            if (values.length === 1)
+                params.set(`f_${key}`, internalValueToUrl(values[0]));
+            else
+                params.set(`f_${key}`, `in:${values.join(',')}`);
+        });
+        const search = params.toString();
+        const newUrl = search ? `${window.location.pathname}?${search}` : window.location.pathname;
+        window.history.replaceState(null, '', newUrl);
+    }, [enableUrlSync, pagination, sorting, globalFilter, dynamicFilters, defaultFilters]);
+    const prefetchOptions = useCallback(async (endpoints) => {
+        if (endpoints.length === 0)
+            return new Map();
+        const uniqueEndpoints = Array.from(new Set(endpoints));
+        const promises = uniqueEndpoints.map(async (ep) => {
+            try {
+                const res = await api.get(ep);
+                return { endpoint: ep, data: res.data?.success ? res.data.data : [] };
+            }
+            catch (e) {
+                console.error(`Failed to fetch options for ${ep}`, e);
+                return { endpoint: ep, data: [] };
+            }
+        });
+        const results = await Promise.all(promises);
+        const map = new Map();
+        results.forEach(r => map.set(r.endpoint, r.data));
+        return map;
+    }, [api]);
+    const metaInitRef = useRef(false);
+    useEffect(() => {
+        if (metaInitRef.current)
+            return;
+        metaInitRef.current = true;
+        const initMetadataAndOptions = async () => {
+            let meta;
+            const cached = getMetadata(model);
+            if (cached) {
+                meta = cached;
+                setMetadata(meta);
+                if (!urlHadPerPage.current)
+                    setPagination((prev) => ({ ...prev, pageSize: meta.defaultPerPage || 10 }));
+                setLoading(false);
+            }
+            else {
+                setLoading(true);
+                try {
+                    const res = await api.get(`/metadata/table/${model}`);
+                    if (!res.data.success)
+                        return;
+                    meta = res.data.data;
+                    setMetadata(meta);
+                    cacheMetadata(model, meta);
+                    if (!urlHadPerPage.current)
+                        setPagination((prev) => ({ ...prev, pageSize: meta.defaultPerPage || 10 }));
+                }
+                catch (error) {
+                    console.error('Error al cargar la configuración de la tabla', error);
+                    return;
+                }
+                finally {
+                    setLoading(false);
+                }
+            }
+            const columnEndpoints = meta.columns.filter(c => c.useOptions && c.searchEndpoint).map(c => c.searchEndpoint);
+            const filterEndpoints = (meta.filters || []).filter(f => f.searchEndpoint && (f.type === 'select' || f.type === 'boolean')).map(f => f.searchEndpoint);
+            const allEndpoints = [...columnEndpoints, ...filterEndpoints];
+            if (allEndpoints.length > 0) {
+                prefetchOptions(allEndpoints).then(fetchedMap => {
+                    const colMap = new Map();
+                    columnEndpoints.forEach(ep => { if (fetchedMap.has(ep))
+                        colMap.set(ep, fetchedMap.get(ep)); });
+                    setOptionsMap(colMap);
+                    const fMap = new Map();
+                    filterEndpoints.forEach(ep => {
+                        if (fetchedMap.has(ep)) {
+                            fMap.set(ep, (fetchedMap.get(ep) || []).map((item) => ({
+                                label: item.label || item.name || '',
+                                value: String(item.value ?? item.id ?? ''),
+                                icon: item.icon,
+                                color: item.color || item.class,
+                            })));
+                        }
+                    });
+                    setFilterOptionsMap(fMap);
+                });
+            }
+        };
+        initMetadataAndOptions();
+    }, [model]); // eslint-disable-line react-hooks/exhaustive-deps
+    const buildFilterParams = useCallback(() => {
+        const params = {};
+        if (sorting.length > 0) {
+            params.sortBy = sorting[0].id;
+            params.order = sorting[0].desc ? 'desc' : 'asc';
+        }
+        if (globalFilter)
+            params.search = globalFilter;
+        columnFilters.forEach((filter) => { params[`f_${filter.id}`] = filter.value; });
+        if (defaultFilters)
+            Object.entries(defaultFilters).forEach(([key, value]) => { params[`f_${key}`] = value; });
+        Object.entries(dynamicFilters).forEach(([key, values]) => {
+            if (values.length === 0)
+                return;
+            const gteVal = values.find(v => v.startsWith('GTE:'));
+            const lteVal = values.find(v => v.startsWith('LTE:'));
+            if (gteVal || lteVal) {
+                const min = gteVal ? gteVal.replace('GTE:', '') : '';
+                const max = lteVal ? lteVal.replace('LTE:', '') : '';
+                params[`f_${key}`] = `RANGE:${min},${max}`;
+                return;
+            }
+            if (values.length === 1)
+                params[`f_${key}`] = values[0];
+            else
+                params[`f_${key}`] = `IN:${values.join(',')}`;
+        });
+        if (dateRange?.from) {
+            const startDate = format(dateRange.from, 'yyyy-MM-dd');
+            const endDate = dateRange.to ? format(dateRange.to, 'yyyy-MM-dd') : startDate;
+            params['f_created_at'] = `${startDate}_${endDate}`;
+        }
+        return params;
+    }, [sorting, globalFilter, columnFilters, defaultFilters, dynamicFilters, dateRange]);
+    const hasActiveFilters = useMemo(() => {
+        if (globalFilter)
+            return true;
+        if (columnFilters.length > 0)
+            return true;
+        if (Object.values(dynamicFilters).some(v => v.length > 0))
+            return true;
+        if (dateRange?.from)
+            return true;
+        return false;
+    }, [globalFilter, columnFilters, dynamicFilters, dateRange]);
+    const fetchData = useCallback(async () => {
+        if (!metadata)
+            return;
+        setLoadingData(true);
+        try {
+            const params = {
+                page: pagination.pageIndex + 1,
+                per_page: pagination.pageSize,
+                ...buildFilterParams(),
+            };
+            const res = await api.get(endpoint || `/data/${model}`, { params });
+            if (res.data.success) {
+                setData(res.data.data || []);
+                if (res.data.meta)
+                    setRowCount(res.data.meta.total);
+            }
+        }
+        catch (error) {
+            console.error('Error al cargar los datos', error);
+        }
+        finally {
+            setLoadingData(false);
+        }
+    }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api]);
+    const initialFetchDone = useRef(false);
+    useEffect(() => {
+        if (!metadata)
+            return;
+        if (!initialFetchDone.current) {
+            initialFetchDone.current = true;
+            fetchData();
+            return;
+        }
+        const timeoutId = setTimeout(fetchData, 300);
+        return () => clearTimeout(timeoutId);
+    }, [fetchData, metadata]);
+    const handleRefresh = useCallback(() => { fetchData(); }, [fetchData]);
+    const handleInternalAction = useCallback(async (action, row) => {
+        if (action === 'delete') {
+            setRowToDelete(row);
+            return;
+        }
+        if (action === 'view' || action === 'edit') {
+            if (onAction)
+                await Promise.resolve(onAction(action, row));
+            else
+                setRecordDialog({ open: true, mode: action, recordId: row.id });
+            return;
+        }
+        const linkDef = metadata?.actions?.find((a) => a.key === action && a.type === 'link');
+        if (linkDef?.linkUrl) {
+            const url = linkDef.linkUrl.replace(/\{(\w+)\}/g, (_, field) => String(row[field] ?? ''));
+            navigate({ to: url });
+            return;
+        }
+        const actionDef = metadata?.actions?.find((a) => a.key === action);
+        if (actionDef && (actionDef.fields?.length || actionDef.confirm || actionDef.executable)) {
+            setActionModal({
+                open: true,
+                action: {
+                    key: actionDef.key,
+                    label: actionDef.label,
+                    icon: actionDef.icon || 'Zap',
+                    color: actionDef.color,
+                    confirm: actionDef.confirm,
+                    confirmMessage: actionDef.confirmMessage,
+                    fields: actionDef.fields,
+                    requiresState: actionDef.requiresState,
+                    executable: actionDef.executable,
+                },
+                record: row,
+            });
+            return;
+        }
+        if (onAction) {
+            await Promise.resolve(onAction(action, row));
+            handleRefresh();
+        }
+        else
+            handleRefresh();
+    }, [onAction, handleRefresh, metadata, navigate]);
+    const confirmDelete = async () => {
+        if (!rowToDelete)
+            return;
+        setIsDeleting(true);
+        try {
+            const deleteEndpoint = endpoint ? `${endpoint}/${rowToDelete.id}` : `/data/${model}/${rowToDelete.id}`;
+            const res = await api.delete(deleteEndpoint);
+            if (res.data.success) {
+                toast.success(res.data.message || 'Eliminado correctamente');
+                handleRefresh();
+            }
+            else
+                toast.error(res.data.message || 'Error al eliminar');
+        }
+        catch (error) {
+            console.error('Error al eliminar', error);
+            toast.error('Error al eliminar el registro');
+        }
+        finally {
+            setIsDeleting(false);
+            setRowToDelete(null);
+        }
+    };
+    const confirmBulkDelete = async () => {
+        const selectedRows = table.getFilteredSelectedRowModel().rows;
+        if (selectedRows.length === 0)
+            return;
+        setIsBulkDeleting(true);
+        setBulkDeleteTotal(selectedRows.length);
+        setBulkDeleteProgress(0);
+        let successCount = 0, errorCount = 0;
+        for (let i = 0; i < selectedRows.length; i++) {
+            const row = selectedRows[i];
+            try {
+                const deleteEndpoint = endpoint ? `${endpoint}/${row.original.id}` : `/data/${model}/${row.original.id}`;
+                const res = await api.delete(deleteEndpoint);
+                if (res.data.success)
+                    successCount++;
+                else
+                    errorCount++;
+            }
+            catch (e) {
+                console.error('Error al eliminar', e);
+                errorCount++;
+            }
+            setBulkDeleteProgress(i + 1);
+        }
+        await new Promise(resolve => setTimeout(resolve, 500));
+        setIsBulkDeleting(false);
+        setShowBulkDeleteConfirm(false);
+        setBulkDeleteProgress(0);
+        setBulkDeleteTotal(0);
+        setRowSelection({});
+        if (successCount > 0)
+            toast.success(`${successCount} registro(s) eliminado(s) correctamente`);
+        if (errorCount > 0)
+            toast.error(`${errorCount} registro(s) no pudieron ser eliminados`);
+        handleRefresh();
+    };
+    const handleDynamicFilterChange = useCallback((filterKey, values) => {
+        setDynamicFilters((prev) => ({ ...prev, [filterKey]: values }));
+        setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    }, []);
+    const columnFilterConfigs = useMemo(() => {
+        const map = new Map();
+        if (!metadata?.filters)
+            return map;
+        for (const f of metadata.filters) {
+            const fType = f.type;
+            let options = [];
+            if (f.options && f.options.length > 0) {
+                options = f.options.map(o => ({ label: o.label, value: String(o.value), icon: o.icon, color: o.color }));
+            }
+            if (f.searchEndpoint && filterOptionsMap.has(f.searchEndpoint)) {
+                options = filterOptionsMap.get(f.searchEndpoint) || [];
+            }
+            if (fType === 'select' && options.length === 0 && !f.searchEndpoint)
+                continue;
+            map.set(f.key, {
+                filterType: fType,
+                filterKey: f.column || f.key,
+                options,
+                selectedValues: dynamicFilters[f.column || f.key] || [],
+                onFilterChange: handleDynamicFilterChange,
+                loading: f.searchEndpoint ? !filterOptionsMap.has(f.searchEndpoint) : false,
+                searchEndpoint: f.searchEndpoint,
+            });
+        }
+        return map;
+    }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange]);
+    const columns = useMemo(() => {
+        if (!metadata)
+            return [];
+        const baseColumns = getDynamicColumns(metadata, handleInternalAction, t, i18n.language, columnFilterConfigs);
+        const filteredBase = baseColumns.filter((col) => !hiddenColumns.includes(col.id));
+        const actionsCol = filteredBase.find((c) => c.id === 'actions');
+        const otherCols = filteredBase.filter((c) => c.id !== 'actions');
+        return [...otherCols, ...extraColumns, ...(actionsCol ? [actionsCol] : [])];
+    }, [metadata, handleInternalAction, hiddenColumns, extraColumns, t, i18n.language, columnFilterConfigs, getDynamicColumns]);
+    const filters = useMemo(() => [], []);
+    const table = useReactTable({
+        data,
+        columns,
+        state: { sorting, columnVisibility, rowSelection, columnFilters, globalFilter, pagination },
+        pageCount: Math.ceil(rowCount / pagination.pageSize),
+        manualPagination: true,
+        manualSorting: true,
+        manualFiltering: true,
+        enableRowSelection: true,
+        onRowSelectionChange: setRowSelection,
+        onSortingChange: setSorting,
+        onColumnVisibilityChange: setColumnVisibility,
+        onColumnFiltersChange: setColumnFilters,
+        onGlobalFilterChange: setGlobalFilter,
+        onPaginationChange: setPagination,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFacetedUniqueValues: getFacetedUniqueValues(),
+    });
+    const TableSkeleton = () => (_jsx(_Fragment, { children: Array.from({ length: 5 }).map((_, i) => (_jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableCell, { className: "py-3 w-10", children: _jsx(Skeleton, { className: "h-4 w-4" }) }), _jsx(TableCell, { className: "py-3", children: _jsx(Skeleton, { className: "h-4 w-[70%]" }) }), _jsx(TableCell, { className: "py-3", children: _jsx(Skeleton, { className: "h-4 w-[50%]" }) }), _jsx(TableCell, { className: "py-3", children: _jsx(Skeleton, { className: "h-4 w-[60%]" }) }), _jsx(TableCell, { className: "py-3 w-16", children: _jsx(Skeleton, { className: "h-6 w-6" }) })] }, `skeleton-${i}`))) }));
+    if (loading) {
+        return (_jsxs("div", { className: 'flex flex-col h-full min-h-0 w-full', children: [_jsx("div", { className: 'pb-4 shrink-0', children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Skeleton, { className: "h-9 w-[280px]" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-9 w-9" }), _jsx(Skeleton, { className: "h-9 w-[70px]" })] })] }) }), _jsx("div", { className: 'flex-1 min-h-0 overflow-auto border rounded-md bg-card', children: _jsxs(Table, { className: 'min-w-max w-full', children: [_jsx(TableHeader, { className: 'sticky top-0 z-10', children: _jsxs(TableRow, { className: 'border-b-0 hover:bg-transparent', children: [_jsx(TableHead, { className: 'bg-card border-b h-10 w-10', children: _jsx(Skeleton, { className: "h-4 w-4" }) }), _jsx(TableHead, { className: 'bg-card border-b h-10', children: _jsx(Skeleton, { className: "h-4 w-16" }) }), _jsx(TableHead, { className: 'bg-card border-b h-10', children: _jsx(Skeleton, { className: "h-4 w-14" }) }), _jsx(TableHead, { className: 'bg-card border-b h-10', children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableHead, { className: 'bg-card border-b h-10 w-16', children: _jsx(Skeleton, { className: "h-4 w-12" }) })] }) }), _jsx(TableBody, { children: _jsx(TableSkeleton, {}) })] }) })] }));
+    }
+    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: [_jsx("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: [metadata.canExport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setExportOpen(true), children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), " Exportar"] })), metadata.canImport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setImportOpen(true), children: [_jsx(Upload, { className: "h-4 w-4 mr-1" }), " Importar"] }))] }) }) }), _jsx("div", { className: 'flex-1 min-h-0 overflow-auto border rounded-md bg-card', children: _jsxs(Table, { className: 'min-w-max w-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 ? (table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', children: row.getVisibleCells().map((cell) => {
+                                            const isActionsColumn = cell.column.id === 'actions';
+                                            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)]'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                        }) }, row.id)))) : (_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." })] })] }) }) })) })] }) }), _jsx("div", { className: 'shrink-0 pt-4', children: _jsx(DataTablePagination, { table: table, pageSizeOptions: metadata.perPageOptions }) })] }), _jsx(AlertDialog, { open: !!rowToDelete, onOpenChange: (open) => !open && setRowToDelete(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "\u00BFEst\u00E1 absolutamente seguro?" }), _jsx(AlertDialogDescription, { children: "Esta acci\u00F3n no se puede deshacer. Esto eliminar\u00E1 permanentemente el registro seleccionado de nuestros servidores." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: t('common.cancel') }), _jsx(AlertDialogAction, { onClick: (e) => { e.preventDefault(); confirmDelete(); }, className: "bg-red-600 hover:bg-red-700", disabled: isDeleting, children: isDeleting ? 'Eliminando...' : 'Eliminar' })] })] }) }), _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" })] }))] }) }), _jsx(DynamicRecordDialog, { open: recordDialog.open, onOpenChange: (open) => setRecordDialog((prev) => ({ ...prev, open })), mode: recordDialog.mode, model: model, recordId: recordDialog.recordId, endpoint: endpoint, onSaved: handleRefresh }), metadata.canExport && (_jsx(ExportDialog, { open: exportOpen, onOpenChange: setExportOpen, model: model, metadata: metadata, currentFilters: buildFilterParams(), hasActiveFilters: hasActiveFilters })), metadata.canImport && (_jsx(ImportDialog, { open: importOpen, onOpenChange: setImportOpen, model: model, metadata: metadata, onImported: handleRefresh })), actionModal.action && (_jsx(ActionModalDispatcher, { open: actionModal.open, onOpenChange: (open) => setActionModal((prev) => ({ ...prev, open })), action: actionModal.action, model: model, record: actionModal.record, endpoint: endpoint, onSuccess: 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"] }) })] }));
+}
+/** Sensible default when hosts don't provide their own getDynamicColumns. */
+const defaultGetDynamicColumns = (metadata, _handleAction, _t, _lang, _filters) => (metadata.columns ?? []).map((col) => ({
+    accessorKey: col.name,
+    header: col.label ?? col.name,
+    enableSorting: col.sortable ?? false,
+}));

package/dist/i18n-provider.d.ts

@@ -0,0 +1,16 @@
+import type { i18n as I18nInstance } from 'i18next';
+export interface AddonI18nResources {
+    /** Addon key — used as the i18next namespace. */
+    source: string;
+    /** Map of locale → key/value tree. */
+    resources: Record<string, Record<string, any>>;
+}
+export interface I18nProviderProps {
+    /** The host's i18next instance. */
+    i18n: I18nInstance;
+    /** All addon translations contributed via `manifest.i18n`. */
+    contributions: AddonI18nResources[];
+    children: React.ReactNode;
+}
+export declare function I18nProvider({ i18n, contributions, children }: I18nProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=i18n-provider.d.ts.map

package/dist/i18n-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n-provider.d.ts","sourceRoot":"","sources":["../src/i18n-provider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnD,MAAM,WAAW,kBAAkB;IAC/B,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAA;IACd,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;CACjD;AAED,MAAM,WAAW,iBAAiB;IAC9B,mCAAmC;IACnC,IAAI,EAAE,YAAY,CAAA;IAClB,8DAA8D;IAC9D,aAAa,EAAE,kBAAkB,EAAE,CAAA;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAWhF"}

package/dist/i18n-provider.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// I18nProvider — merges `manifest.i18n` resources from every loaded addon
+// into the host's i18next instance. The host passes the i18n instance; this
+// component just hydrates new namespaces and keeps them live.
+import { useEffect } from 'react';
+export function I18nProvider({ i18n, contributions, children }) {
+    useEffect(() => {
+        for (const c of contributions) {
+            for (const [locale, tree] of Object.entries(c.resources)) {
+                // addBundle(locale, namespace, resources, deep?, overwrite?)
+                i18n.addResourceBundle(locale, c.source, tree, true, false);
+            }
+        }
+    }, [i18n, contributions]);
+    return _jsx(_Fragment, { children: children });
+}

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export * from './types';
+export * from './options-context';
+export * from './dynamic-table';
+export * from './dynamic-form';
+export { ActionModalDispatcher, type ActionModalProps, } from './action-modal-dispatcher';
+export * from './addon-loader';
+export * from './slot';
+export * from './capability-gate';
+export * from './navigation-builder';
+export * from './i18n-provider';
+export * from './api-context';
+export * from './metadata-cache';
+export * from './dynamic-icon';
+export type { ColumnFilterConfig, FilterOption as DynamicColumnFilterOption, GetDynamicColumns, DynamicIconComponent, } from './dynamic-columns-shim';
+export { DynamicRecordDialog } from './dialogs/dynamic-record';
+export { ExportDialog } from './dialogs/export';
+export { ImportDialog } from './dialogs/import';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACH,qBAAqB,EACrB,KAAK,gBAAgB,GACxB,MAAM,2BAA2B,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,YAAY,EACR,kBAAkB,EAClB,YAAY,IAAI,yBAAyB,EACzC,iBAAiB,EACjB,oBAAoB,GACvB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/index.js

@@ -0,0 +1,21 @@
+// Public surface — keep names stable. `ActionMetadata` is intentionally
+// re-exported once from `./types` (the mirror used by runtime-react internally)
+// and NOT re-exported from `./action-modal-dispatcher` here to avoid a
+// duplicate-symbol conflict; consumers who want the canonical SDK type
+// should import from `@asteby/metacore-sdk` directly.
+export * from './types';
+export * from './options-context';
+export * from './dynamic-table';
+export * from './dynamic-form';
+export { ActionModalDispatcher, } from './action-modal-dispatcher';
+export * from './addon-loader';
+export * from './slot';
+export * from './capability-gate';
+export * from './navigation-builder';
+export * from './i18n-provider';
+export * from './api-context';
+export * from './metadata-cache';
+export * from './dynamic-icon';
+export { DynamicRecordDialog } from './dialogs/dynamic-record';
+export { ExportDialog } from './dialogs/export';
+export { ImportDialog } from './dialogs/import';

package/dist/metadata-cache.d.ts

@@ -0,0 +1,42 @@
+import type { TableMetadata } from './types';
+export interface MetadataApiClient {
+    get: (url: string, config?: any) => Promise<{
+        data: any;
+    }>;
+}
+interface MetadataCacheState {
+    cache: Record<string, TableMetadata>;
+    modalCache: Record<string, TableMetadata>;
+    metadataVersion: string;
+    prefetched: boolean;
+    getMetadata: (key: string) => TableMetadata | undefined;
+    getModalMetadata: (key: string) => TableMetadata | undefined;
+    setMetadata: (key: string, metadata: TableMetadata) => void;
+    setModalMetadata: (key: string, metadata: TableMetadata) => void;
+    hasMetadata: (key: string) => boolean;
+    hasModalMetadata: (key: string) => boolean;
+    prefetchAll: (api: MetadataApiClient) => Promise<void>;
+}
+export declare const useMetadataCache: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<MetadataCacheState>, "setState" | "persist"> & {
+    setState(partial: MetadataCacheState | Partial<MetadataCacheState> | ((state: MetadataCacheState) => MetadataCacheState | Partial<MetadataCacheState>), replace?: false | undefined): unknown;
+    setState(state: MetadataCacheState | ((state: MetadataCacheState) => MetadataCacheState), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<MetadataCacheState, {
+            cache: Record<string, TableMetadata>;
+            modalCache: Record<string, TableMetadata>;
+            metadataVersion: string;
+        }, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: MetadataCacheState) => void) => () => void;
+        onFinishHydration: (fn: (state: MetadataCacheState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<MetadataCacheState, {
+            cache: Record<string, TableMetadata>;
+            modalCache: Record<string, TableMetadata>;
+            metadataVersion: string;
+        }, unknown>>;
+    };
+}>;
+export {};
+//# sourceMappingURL=metadata-cache.d.ts.map

package/dist/metadata-cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata-cache.d.ts","sourceRoot":"","sources":["../src/metadata-cache.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,MAAM,WAAW,iBAAiB;IAC9B,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC;QAAE,IAAI,EAAE,GAAG,CAAA;KAAE,CAAC,CAAA;CAC7D;AAED,UAAU,kBAAkB;IACxB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IACpC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IACzC,eAAe,EAAE,MAAM,CAAA;IACvB,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAA;IACvD,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAA;IAC5D,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAA;IAC3D,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAA;IAChE,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IACrC,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC1C,WAAW,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACzD;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;EAwE5B,CAAA"}