@asteby/metacore-runtime-react 18.9.0 → 18.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 18.10.0
+
+### Minor Changes
+
+- 35289f7: feat(dynamic-table): table footer totals — a declarative per-column SUM over the FILTERED set
+
+  A column opts into a footer total via its manifest `display_config.aggregate: "sum"` (mapped by the kernel to `styleConfig.aggregate` at runtime). `DynamicTable` now fetches those totals from a separate `${endpoint}/aggregate` endpoint that reuses the SAME filter/search params as the list (no sort, no pagination) — so the footer reflects the whole filtered set, not the visible page — and refetches whenever filters/search change.
+
+  `<TableFooter>` renders one cell per visible column: aggregate-flagged columns show the total formatted with the SAME helpers the body cells use (currency columns → org currency via `resolveCurrency` + `formatNumber`, number columns honour `styleConfig.decimals`), every other column gets an empty cell, and the first column carries a "Total" label. The footer only renders when at least one column opts in and totals are present.
+
+  New exports from `dynamic-columns`: `aggregateOf(col)` and `formatAggregateTotal(col, value, currency, locale)`.
+
 ## 18.9.0
 
 ### Minor Changes

package/dist/dynamic-columns.d.ts

@@ -22,6 +22,21 @@ export interface DynamicColumnsHelpers {
  * 'USD' as a last resort.
  */
 export declare const resolveCurrency: (col: ColumnDefinition, orgCurrency?: string) => string;
+/**
+ * Reads the column's footer-aggregate opt-in. A column opts into the table
+ * footer total via its manifest `display_config.aggregate` (mapped by the
+ * kernel to `styleConfig.aggregate` at runtime). Returns the aggregate kind
+ * (e.g. `'sum'`) or undefined when the column carries no footer total.
+ */
+export declare const aggregateOf: (col: ColumnDefinition) => string | undefined;
+/**
+ * Formats a footer aggregate total with the SAME rules the body cells use:
+ * currency columns render as the org currency (resolveCurrency), number
+ * columns honour `styleConfig.decimals`, everything else falls back to a
+ * locale-formatted number. Non-numeric/empty totals render as a dash so an
+ * empty filtered set reads cleanly.
+ */
+export declare const formatAggregateTotal: (col: ColumnDefinition, value: unknown, currency?: string, locale?: string) => string;
 /**
  * State-machine gate for per-row actions.
  *

package/dist/dynamic-columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAgC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAoErD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAqKD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,eAAe,2DAA4D,CAAA;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA6C5C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAWtE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOtE,CAAA;AAsID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAinBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}
+{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAgC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAQrD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,gBAAgB,KAAG,MAAM,GAAG,SAG5D,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC7B,KAAK,gBAAgB,EACrB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,SAAS,MAAM,KAChB,MAyBF,CAAA;AA8DD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAqKD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,eAAe,2DAA4D,CAAA;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA6C5C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAWtE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOtE,CAAA;AAsID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAinBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -51,6 +51,42 @@ const EmptyCell = () => _jsx("span", { className: "text-muted-foreground", child
  */
 export const resolveCurrency = (col, orgCurrency) => styleCfg(col, 'currency') || orgCurrency || 'USD';
 const formatNumber = (value, opts, locale) => new Intl.NumberFormat(locale || undefined, opts).format(value);
+/**
+ * Reads the column's footer-aggregate opt-in. A column opts into the table
+ * footer total via its manifest `display_config.aggregate` (mapped by the
+ * kernel to `styleConfig.aggregate` at runtime). Returns the aggregate kind
+ * (e.g. `'sum'`) or undefined when the column carries no footer total.
+ */
+export const aggregateOf = (col) => {
+    const v = styleCfg(col, 'aggregate');
+    return typeof v === 'string' && v !== '' ? v : undefined;
+};
+/**
+ * Formats a footer aggregate total with the SAME rules the body cells use:
+ * currency columns render as the org currency (resolveCurrency), number
+ * columns honour `styleConfig.decimals`, everything else falls back to a
+ * locale-formatted number. Non-numeric/empty totals render as a dash so an
+ * empty filtered set reads cleanly.
+ */
+export const formatAggregateTotal = (col, value, currency, locale) => {
+    const num = typeof value === 'number' ? value : Number(value);
+    if (value === null || value === undefined || isNaN(num))
+        return '—';
+    const renderAs = col.cellStyle ?? col.type;
+    if (renderAs === 'currency') {
+        const decimals = styleCfg(col, 'decimals') ?? 2;
+        return formatNumber(num, {
+            style: 'currency',
+            currency: resolveCurrency(col, currency),
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+        }, locale);
+    }
+    const decimals = styleCfg(col, 'decimals');
+    return formatNumber(num, decimals !== undefined
+        ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals }
+        : {}, locale);
+};
 /**
  * Semantic status → badge color. Used by the `status` cell when no explicit
  * `options` color is declared. Generic, value-driven mapping.

package/dist/dynamic-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AA+B9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAUnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,GACX,EAAE,iBAAiB,+BAgyBnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAUnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,GACX,EAAE,iBAAiB,+BAm2BnB"}

package/dist/dynamic-table.js

@@ -17,14 +17,14 @@ 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 { Table, TableBody, TableCell, TableFooter, 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 { defaultGetDynamicColumns, DATE_CELL_TYPES } from './dynamic-columns';
+import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns';
 import { OptionsContext } from './options-context';
 import { ActionModalDispatcher } from './action-modal-dispatcher';
 import { getSearchableColumnKeys } from './column-visibility';
@@ -41,6 +41,9 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     const cachedMeta = getMetadata(model);
     const [metadata, setMetadata] = useState(cachedMeta || null);
     const [data, setData] = useState([]);
+    // Footer totals: per-column SUM over the FILTERED set, fetched from a
+    // separate /aggregate endpoint (NOT summed from the visible page).
+    const [footerTotals, setFooterTotals] = useState({});
     const [loading, setLoading] = useState(!cachedMeta);
     const [loadingData, setLoadingData] = useState(true);
     const [optionsMap, setOptionsMap] = useState(new Map());
@@ -345,6 +348,28 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             setLoadingData(false);
         }
     }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api]);
+    // Columns whose metadata opts into a footer total (display_config.aggregate
+    // → styleConfig.aggregate). When empty, no footer row is rendered and no
+    // aggregate request is made.
+    const aggregateColumns = useMemo(() => (metadata?.columns ?? []).filter((c) => aggregateOf(c)), [metadata]);
+    // fetchAggregates GETs the SUM of each aggregate-flagged column over the SAME
+    // filtered set as the list (reuses buildFilterParams), then stores the totals
+    // keyed by column. Sort/pagination are irrelevant to a footer total and are
+    // omitted (the backend ignores them); only filters/search drive the result.
+    const fetchAggregates = useCallback(async () => {
+        if (!metadata || aggregateColumns.length === 0)
+            return;
+        try {
+            const { sortBy, order, ...filterParams } = buildFilterParams();
+            const base = endpoint || `/data/${model}`;
+            const res = (await api.get(`${base}/aggregate`, { params: filterParams }));
+            if (res.data.success)
+                setFooterTotals(res.data.data || {});
+        }
+        catch (error) {
+            console.error('Error al cargar los totales', error);
+        }
+    }, [model, metadata, aggregateColumns, buildFilterParams, endpoint, currentBranch?.id, api]);
     const initialFetchDone = useRef(false);
     useEffect(() => {
         if (!metadata)
@@ -352,12 +377,16 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         if (!initialFetchDone.current) {
             initialFetchDone.current = true;
             fetchData();
+            fetchAggregates();
             return;
         }
-        const timeoutId = setTimeout(fetchData, 300);
+        const timeoutId = setTimeout(() => {
+            fetchData();
+            fetchAggregates();
+        }, 300);
         return () => clearTimeout(timeoutId);
-    }, [fetchData, metadata]);
-    const handleRefresh = useCallback(() => { fetchData(); }, [fetchData]);
+    }, [fetchData, fetchAggregates, metadata]);
+    const handleRefresh = useCallback(() => { fetchData(); fetchAggregates(); }, [fetchData, fetchAggregates]);
     const handleInternalAction = useCallback(async (action, row) => {
         if (action === 'delete') {
             setRowToDelete(row);
@@ -597,7 +626,16 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                                         }) }, 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: '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) => {
+                                        }) }, 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." })] })] }) }) })) }), aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && (_jsx(TableFooter, { 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;
+                                            // Aggregate cell: render the SUM formatted like the body cell.
+                                            if (col && aggregateOf(col)) {
+                                                return (_jsx(TableCell, { className: "py-2 text-right font-semibold 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: "py-2 font-semibold", 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');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "18.9.0",
+  "version": "18.10.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "date-fns": ">=3",
     "react-day-picker": ">=8",
     "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.5.0"
+    "@asteby/metacore-ui": "^2.5.1"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -61,8 +61,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-ui": "2.5.0",
-    "@asteby/metacore-sdk": "3.2.0"
+    "@asteby/metacore-sdk": "3.2.0",
+    "@asteby/metacore-ui": "2.5.1"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/dynamic-columns.tsx

@@ -107,6 +107,56 @@ const formatNumber = (
     locale?: string,
 ) => new Intl.NumberFormat(locale || undefined, opts).format(value)
 
+/**
+ * Reads the column's footer-aggregate opt-in. A column opts into the table
+ * footer total via its manifest `display_config.aggregate` (mapped by the
+ * kernel to `styleConfig.aggregate` at runtime). Returns the aggregate kind
+ * (e.g. `'sum'`) or undefined when the column carries no footer total.
+ */
+export const aggregateOf = (col: ColumnDefinition): string | undefined => {
+    const v = styleCfg(col, 'aggregate')
+    return typeof v === 'string' && v !== '' ? v : undefined
+}
+
+/**
+ * Formats a footer aggregate total with the SAME rules the body cells use:
+ * currency columns render as the org currency (resolveCurrency), number
+ * columns honour `styleConfig.decimals`, everything else falls back to a
+ * locale-formatted number. Non-numeric/empty totals render as a dash so an
+ * empty filtered set reads cleanly.
+ */
+export const formatAggregateTotal = (
+    col: ColumnDefinition,
+    value: unknown,
+    currency?: string,
+    locale?: string,
+): string => {
+    const num = typeof value === 'number' ? value : Number(value)
+    if (value === null || value === undefined || isNaN(num)) return '—'
+    const renderAs = col.cellStyle ?? col.type
+    if (renderAs === 'currency') {
+        const decimals = styleCfg(col, 'decimals') ?? 2
+        return formatNumber(
+            num,
+            {
+                style: 'currency',
+                currency: resolveCurrency(col, currency),
+                minimumFractionDigits: decimals,
+                maximumFractionDigits: decimals,
+            },
+            locale,
+        )
+    }
+    const decimals = styleCfg(col, 'decimals')
+    return formatNumber(
+        num,
+        decimals !== undefined
+            ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals }
+            : {},
+        locale,
+    )
+}
+
 /**
  * Semantic status → badge color. Used by the `status` cell when no explicit
  * `options` color is declared. Generic, value-driven mapping.

package/src/dynamic-table.tsx

@@ -39,6 +39,7 @@ import {
     Table,
     TableBody,
     TableCell,
+    TableFooter,
     TableHead,
     TableHeader,
     TableRow,
@@ -65,7 +66,7 @@ import { Progress } from './dialogs/_primitives'
 import { useMetadataCache } from './metadata-cache'
 import { useApi, useCurrentBranch } from './api-context'
 import type { ColumnFilterConfig, GetDynamicColumns } from './dynamic-columns-shim'
-import { defaultGetDynamicColumns, DATE_CELL_TYPES } from './dynamic-columns'
+import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns'
 import { OptionsContext } from './options-context'
 import { ActionModalDispatcher } from './action-modal-dispatcher'
 import type { TableMetadata, ApiResponse, ActionMetadata } from './types'
@@ -130,6 +131,9 @@ export function DynamicTable({
 
     const [metadata, setMetadata] = useState<TableMetadata | null>(cachedMeta || null)
     const [data, setData] = useState<any[]>([])
+    // Footer totals: per-column SUM over the FILTERED set, fetched from a
+    // separate /aggregate endpoint (NOT summed from the visible page).
+    const [footerTotals, setFooterTotals] = useState<Record<string, any>>({})
     const [loading, setLoading] = useState(!cachedMeta)
     const [loadingData, setLoadingData] = useState(true)
     const [optionsMap, setOptionsMap] = useState<Map<string, any[]>>(new Map())
@@ -424,19 +428,49 @@ export function DynamicTable({
         }
     }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api])
 
+    // Columns whose metadata opts into a footer total (display_config.aggregate
+    // → styleConfig.aggregate). When empty, no footer row is rendered and no
+    // aggregate request is made.
+    const aggregateColumns = useMemo(
+        () => (metadata?.columns ?? []).filter((c) => aggregateOf(c as any)),
+        [metadata],
+    )
+
+    // fetchAggregates GETs the SUM of each aggregate-flagged column over the SAME
+    // filtered set as the list (reuses buildFilterParams), then stores the totals
+    // keyed by column. Sort/pagination are irrelevant to a footer total and are
+    // omitted (the backend ignores them); only filters/search drive the result.
+    const fetchAggregates = useCallback(async () => {
+        if (!metadata || aggregateColumns.length === 0) return
+        try {
+            const { sortBy, order, ...filterParams } = buildFilterParams()
+            const base = endpoint || `/data/${model}`
+            const res = (await api.get(`${base}/aggregate`, { params: filterParams })) as {
+                data: ApiResponse<Record<string, any>>
+            }
+            if (res.data.success) setFooterTotals(res.data.data || {})
+        } catch (error) {
+            console.error('Error al cargar los totales', error)
+        }
+    }, [model, metadata, aggregateColumns, buildFilterParams, endpoint, currentBranch?.id, api])
+
     const initialFetchDone = useRef(false)
     useEffect(() => {
         if (!metadata) return
         if (!initialFetchDone.current) {
             initialFetchDone.current = true
             fetchData()
+            fetchAggregates()
             return
         }
-        const timeoutId = setTimeout(fetchData, 300)
+        const timeoutId = setTimeout(() => {
+            fetchData()
+            fetchAggregates()
+        }, 300)
         return () => clearTimeout(timeoutId)
-    }, [fetchData, metadata])
+    }, [fetchData, fetchAggregates, metadata])
 
-    const handleRefresh = useCallback(() => { fetchData() }, [fetchData])
+    const handleRefresh = useCallback(() => { fetchData(); fetchAggregates() }, [fetchData, fetchAggregates])
 
     const handleInternalAction = useCallback(async (action: string, row: any) => {
         if (action === 'delete') { setRowToDelete(row); return }
@@ -777,6 +811,40 @@ export function DynamicTable({
                                 </TableRow>
                             )}
                         </TableBody>
+                        {aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && (
+                            <TableFooter>
+                                <TableRow className="hover:bg-transparent">
+                                    {table.getVisibleLeafColumns().map((leaf: any, idx: number) => {
+                                        const col = (metadata?.columns ?? []).find(
+                                            (c) => c.key === leaf.id,
+                                        )
+                                        const isFirst = idx === 0
+                                        // Aggregate cell: render the SUM formatted like the body cell.
+                                        if (col && aggregateOf(col as any)) {
+                                            return (
+                                                <TableCell
+                                                    key={leaf.id}
+                                                    className="py-2 text-right font-semibold tabular-nums"
+                                                >
+                                                    {formatAggregateTotal(
+                                                        col as any,
+                                                        footerTotals[leaf.id],
+                                                        currency,
+                                                        i18n.language,
+                                                    )}
+                                                </TableCell>
+                                            )
+                                        }
+                                        // First non-aggregate column carries the "Total" label.
+                                        return (
+                                            <TableCell key={leaf.id} className="py-2 font-semibold">
+                                                {isFirst ? t('common.total', 'Total') : ''}
+                                            </TableCell>
+                                        )
+                                    })}
+                                </TableRow>
+                            </TableFooter>
+                        )}
                     </Table>
                 </div>