@asteby/metacore-runtime-react 23.12.3 → 24.0.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @asteby/metacore-runtime-react
 
+## 24.0.1
+
+### Patch Changes
+
+- 4a62c3c: Preview automático del registro en el modal de confirmación de acciones de fila.
+
+  Al confirmar una row-action con `confirm` (p. ej. aceptar/rechazar un traspaso), el
+  `ConfirmActionDialog` ahora muestra un resumen compacto y de solo lectura del registro
+  que va a afectar, para no confirmar a ciegas. Es 100% del SDK y genérico: se apoya en la
+  metadata de tabla del modelo (labels + display hints, leída del cache o con un único fetch
+  a `/metadata/table/<model>`) y en los siblings de relación que la tabla ya resolvió sobre
+  la fila. La heurística surface relaciones resueltas a su label, campos line-items (jsonb,
+  como `Transfer.items`, renderizados producto × cantidad) y un puñado de escalares de
+  identidad; omite `id`, `organization_id`, timestamps y los `*_id` crudos sin label. Se
+  degrada solo: si no hay nada útil que mostrar, no renderiza la sección.
+
+## 24.0.0
+
+### Patch Changes
+
+- 165f25c: feat(dynamic-table): cache first-page rows for instant reload paint
+
+  The table fetched rows into local state, so a full reload showed a full-table
+  skeleton until `/data/:model` resolved — even for the view just seen. Stash the
+  last first-page result in sessionStorage (org/user-scoped → must not outlive the
+  tab session) keyed by model+endpoint+branch+URL params, and seed the initial
+  rows from it so a reload paints instantly and revalidates in the background
+  (stale-while-revalidate).
+
+- Updated dependencies [0704d54]
+  - @asteby/metacore-ui@2.10.0
+
 ## 23.12.3
 
 ### Patch Changes

package/dist/action-modal-dispatcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AAgDA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AA0FhD,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCA+DlB"}
+{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AAwDA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AA0FhD,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCA+DlB"}

package/dist/action-modal-dispatcher.js

@@ -19,8 +19,10 @@ import { DynamicRelations } from './dynamic-relations';
 import { DynamicSelectField } from './dynamic-select-field';
 import { DynamicDateField } from './dynamic-date-field';
 import { UploadField } from './upload-field';
-import { isLineItemsField, resolveWidget, resolveDependsValue, getDependsOn } from './dynamic-form-schema';
+import { isLineItemsField, resolveWidget, resolveDependsValue, getDependsOn, getFieldRef } from './dynamic-form-schema';
 import { FieldGrid, FieldCell, FieldLabel } from './field-grid';
+import { useMetadataCache } from './metadata-cache';
+import { ViewValue, objectLabel, relationSiblingValue, isLineItemsField as isRecordLineItemsField, } from './dialogs/dynamic-record';
 // Canonical registry lives in @asteby/metacore-sdk
 import { getActionComponent, } from '@asteby/metacore-sdk';
 function isPrefillSpec(v) {
@@ -110,6 +112,143 @@ function buildActionUrl(endpoint, model, recordId, actionKey) {
     }
     return hasRecord ? `/data/${model}/me/${recordId}/action/${actionKey}` : `/data/${model}/me/action/${actionKey}`;
 }
+// ── Preview automático del registro en el modal de confirmación ─────────────
+//
+// Antes de confirmar una row-action (aceptar/rechazar un traspaso, etc.) el
+// usuario ve un resumen compacto y read-only de QUÉ registro va a afectar, para
+// no confirmar a ciegas. Es 100% del SDK y genérico: se apoya en la metadata de
+// tabla del modelo (labels + display hints) y en los siblings de relación que la
+// tabla ya resolvió sobre el `record`. Se degrada solo — si no hay ni un campo
+// ni líneas útiles que mostrar, no renderiza nada (ni una caja vacía).
+// Claves de sistema/infra que nunca aportan contexto al preview.
+const PREVIEW_SKIP_KEYS = new Set([
+    'id',
+    'organization_id',
+    'org_id',
+    'created_at',
+    'updated_at',
+    'deleted_at',
+    'created_by',
+    'created_by_id',
+    'updated_by',
+    'updated_by_id',
+]);
+// Campos escalares "de identidad" que sí vale la pena anclar en el preview
+// aunque no sean relación ni line-items (nombre, folio, estado, etc.).
+const PREVIEW_INTEREST_KEYS = new Set([
+    'name',
+    'title',
+    'code',
+    'reference',
+    'folio',
+    'number',
+    'status',
+    'stage',
+    'state',
+]);
+const PREVIEW_INTEREST_STYLES = new Set(['status', 'badge', 'currency']);
+const MAX_PREVIEW_FIELD_ROWS = 6;
+function isEmptyPreviewValue(value) {
+    if (value === null || value === undefined || value === '')
+        return true;
+    if (Array.isArray(value))
+        return value.length === 0;
+    if (typeof value === 'object' && !(value instanceof Date))
+        return Object.keys(value).length === 0;
+    return false;
+}
+// selectPreviewColumns aplica la heurística compacta sobre las columnas del
+// modelo: relaciones resueltas a su label, campos line-items (jsonb) y un puñado
+// de escalares de identidad. Omite id/org/timestamps y los *_id crudos cuya
+// relación no resolvió a un label legible.
+function selectPreviewColumns(columns, record) {
+    if (!columns || !record)
+        return [];
+    const lineItemRows = [];
+    const fieldRows = [];
+    for (const col of columns) {
+        if (!col || !col.key)
+            continue;
+        if (col.hidden)
+            continue;
+        if (PREVIEW_SKIP_KEYS.has(col.key))
+            continue;
+        const value = record[col.key];
+        // Line-items (jsonb array como Transfer.items) → mini-tabla producto×cantidad.
+        if (isRecordLineItemsField(col, value)) {
+            if (isEmptyPreviewValue(value))
+                continue;
+            lineItemRows.push({ col, value, lineItems: true });
+            continue;
+        }
+        // Relación (ref / search / dynamic_select / *_id): solo si el sibling
+        // resolvió a un label legible; si es un *_id crudo sin resolver, se omite.
+        const isRelation = !!getFieldRef(col) ||
+            col.type === 'search' ||
+            col.type === 'relation' ||
+            col.widget === 'dynamic_select' ||
+            (typeof col.key === 'string' && col.key.endsWith('_id'));
+        if (isRelation) {
+            const sib = relationSiblingValue(col, record);
+            const label = typeof sib === 'string' ? sib : objectLabel(sib);
+            if (!label)
+                continue;
+            fieldRows.push({ col, value, lineItems: false });
+            continue;
+        }
+        // Escalar de identidad (nombre/folio/estado/moneda…) con valor.
+        const styleKey = col.cellStyle ?? col.type;
+        const interesting = PREVIEW_INTEREST_KEYS.has(col.key) || PREVIEW_INTEREST_STYLES.has(String(styleKey));
+        if (interesting && !isEmptyPreviewValue(value)) {
+            fieldRows.push({ col, value, lineItems: false });
+        }
+    }
+    return [...fieldRows.slice(0, MAX_PREVIEW_FIELD_ROWS), ...lineItemRows];
+}
+function RecordPreview({ model, record }) {
+    const { t } = useTranslation();
+    const api = useApi();
+    const cached = useMetadataCache((s) => s.getMetadata(model));
+    const setMetadata = useMetadataCache((s) => s.setMetadata);
+    const [fetched, setFetched] = useState(null);
+    // Sin metadata cacheada → UN fetch a /metadata/table/<model> (mismo patrón
+    // que model-action-toolbar). Se guarda en el store para próximos usos.
+    useEffect(() => {
+        if (cached || !model)
+            return;
+        let cancelled = false;
+        api
+            .get(`/metadata/table/${model}`)
+            .then((res) => {
+            if (cancelled)
+                return;
+            const meta = (res.data?.data ?? res.data);
+            if (meta && Array.isArray(meta.columns)) {
+                setFetched(meta);
+                setMetadata(model, meta);
+            }
+        })
+            .catch(() => {
+            if (!cancelled)
+                setFetched(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [cached, model, api, setMetadata]);
+    const meta = cached ?? fetched;
+    const rows = useMemo(() => selectPreviewColumns(meta?.columns, record), [meta, record]);
+    // Degradación: nada útil que mostrar → no renderiza la sección.
+    if (rows.length === 0)
+        return null;
+    return (_jsx("div", { className: "mt-1 overflow-hidden rounded-md border bg-muted/30 text-sm", children: rows.map(({ col, value, lineItems }) => {
+            const label = t(col.label, { defaultValue: col.label });
+            if (lineItems) {
+                return (_jsxs("div", { className: "border-t px-3 py-2 first:border-t-0", children: [_jsx("div", { className: "mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }), _jsx(ViewValue, { field: col, value: value, record: record })] }, col.key));
+            }
+            return (_jsxs("div", { className: "flex items-baseline gap-3 border-t px-3 py-1.5 first:border-t-0", children: [_jsx("span", { className: "w-1/3 shrink-0 truncate text-muted-foreground", children: label }), _jsx("div", { className: "min-w-0 flex-1 [&_p]:py-0", children: _jsx(ViewValue, { field: col, value: value, record: record }) })] }, col.key));
+        }) }));
+}
 function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoint, onSuccess }) {
     const { t } = useTranslation();
     const api = useApi();
@@ -139,7 +278,7 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
             setExecuting(false);
         }
     };
-    return (_jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), label] }), _jsx(AlertDialogDescription, { children: action.confirmMessage || `${label}?` })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: executing, children: t('common.cancel') }), _jsxs(AlertDialogAction, { onClick: (e) => { e.preventDefault(); execute(); }, disabled: executing, style: action.color ? { backgroundColor: action.color } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), label] })] })] }) }));
+    return (_jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), label] }), _jsx(AlertDialogDescription, { children: action.confirmMessage || `${label}?` })] }), record ? _jsx(RecordPreview, { model: model, record: record }) : null, _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: executing, children: t('common.cancel') }), _jsxs(AlertDialogAction, { onClick: (e) => { e.preventDefault(); execute(); }, disabled: executing, style: action.color ? { backgroundColor: action.color } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), label] })] })] }) }));
 }
 function GenericActionModal({ open, onOpenChange, action, model, record, endpoint, onSuccess }) {
     const { t } = useTranslation();

package/dist/dialogs/dynamic-record.d.ts

@@ -159,6 +159,9 @@ export interface DynamicRecordDialogProps {
      */
     onChange?: () => void;
 }
+export declare function objectLabel(value: any): string | undefined;
+export declare function relationSiblingValue(field: FieldDef, record: any): any;
+export declare function fieldItemFields(field: FieldDef): ItemField[] | undefined;
 export declare function isLineItemsField(field: FieldDef, value: any): boolean;
 export declare function fkSeedOption(field: FieldDef, value: any, record: any): ResolvedOption | null;
 export declare function isMoneyField(field: FieldDef, value: any): boolean;

package/dist/dialogs/dynamic-record.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-record.d.ts","sourceRoot":"","sources":["../../src/dialogs/dynamic-record.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"dynamic-record.d.ts","sourceRoot":"","sources":["../../src/dialogs/dynamic-record.tsx"],"names":[],"mappings":"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"}

package/dist/dialogs/dynamic-record.js

@@ -47,7 +47,7 @@ function resolvePath(obj, path) {
 // objectLabel pulls a human label off a resolved relation/user object the
 // backend serves: `{value,label}` (FK sibling), `{name,...}` (user object such
 // as created_by), or `{title}`. Returns undefined for plain/empty objects.
-function objectLabel(value) {
+export function objectLabel(value) {
     if (!value || typeof value !== 'object' || Array.isArray(value))
         return undefined;
     const label = value.label ?? value.name ?? value.title;
@@ -66,7 +66,7 @@ function pickImage(value) {
 // FK column. A field `category_id` (search/dynamic_select/ref) ships a sibling
 // `record.category = {value,label,image?}` (or a bare string/{name}); returns
 // the raw sibling (object or string) so the caller can extract label + image.
-function relationSiblingValue(field, record) {
+export function relationSiblingValue(field, record) {
     if (!record)
         return undefined;
     const candidates = [];
@@ -91,7 +91,7 @@ function relationSiblingValue(field, record) {
 }
 // fieldItemFields reads the declared jsonb line-items schema off a field,
 // tolerating the snake_case `item_fields` alias the kernel serves.
-function fieldItemFields(field) {
+export function fieldItemFields(field) {
     return field.itemFields ?? field.item_fields;
 }
 // isLineItemsField — a jsonb line-items column (e.g. Transfer.items): it either

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

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAanF,MAAM,WAAW,iBAAiB;IAC9B,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;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,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;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BAsnCnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAiEnF,MAAM,WAAW,iBAAiB;IAC9B,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;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,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;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BAupCnB"}

package/dist/dynamic-table.js

@@ -33,6 +33,48 @@ import { useCan, usePermissionsActive, gateTableMetadata } from './permissions-c
 import { useDynamicRowActions } from './dynamic-row-actions';
 import { ExportDialog } from './dialogs/export';
 import { ImportDialog } from './dialogs/import';
+// ---------------------------------------------------------------------------
+// Row-data cache (perceived performance).
+//
+// The table fetches rows into local state, so a full page reload starts empty
+// and shows a full skeleton until `/data/:model` resolves — even for a view the
+// user just looked at. We stash the last first-page result and seed the initial
+// state from it so a reload paints the previous rows instantly and the fetch
+// below revalidates in the background (stale-while-revalidate).
+//
+// Deliberately `sessionStorage`, NOT localStorage: row data is org/user-scoped,
+// so it must not outlive the tab session (a browser restart or a different login
+// starts clean). The key includes model+endpoint+branch+URL params so a
+// different filter / sort / page never paints the wrong rows. Only the first
+// page is cached (capped) — infinite-scroll top-ups re-fetch on scroll.
+const TBL_DATA_CACHE_PREFIX = 'mc:tbl:data:v1';
+function tableDataCacheKey(model, endpoint, branchId, search) {
+    const p = new URLSearchParams(search);
+    const parts = [];
+    p.forEach((v, k) => parts.push(`${k}=${v}`));
+    parts.sort();
+    return `${TBL_DATA_CACHE_PREFIX}|${model || ''}|${endpoint || ''}|${branchId || ''}|${parts.join('&')}`;
+}
+function readTableDataCache(key) {
+    try {
+        const raw = sessionStorage.getItem(key);
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        return parsed && Array.isArray(parsed.rows) ? parsed : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeTableDataCache(key, rows, rowCount) {
+    try {
+        sessionStorage.setItem(key, JSON.stringify({ rows: rows.slice(0, 50), rowCount, ts: Date.now() }));
+    }
+    catch {
+        // quota / private mode — the cache is a nicety, never fatal
+    }
+}
 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();
@@ -41,12 +83,22 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     const { getMetadata, setMetadata: cacheMetadata } = useMetadataCache();
     const cachedMeta = getMetadata(model);
     const [metadata, setMetadata] = useState(cachedMeta || null);
-    const [data, setData] = useState([]);
+    // Read the row-data cache ONCE at mount (before the fetch effects run) so the
+    // first paint uses the previous rows for this exact view instead of skeletons.
+    const bootDataKey = tableDataCacheKey(model, endpoint, currentBranch?.id, typeof window !== 'undefined' ? window.location.search : '');
+    const bootDataRef = useRef(undefined);
+    if (bootDataRef.current === undefined) {
+        bootDataRef.current = enableUrlSync ? readTableDataCache(bootDataKey) : null;
+    }
+    const bootData = bootDataRef.current;
+    const [data, setData] = useState(bootData?.rows ?? []);
     // 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);
+    // Cached rows → no full-table skeleton on reload; the background fetch still
+    // runs and swaps in fresh data.
+    const [loadingData, setLoadingData] = useState(!(bootData?.rows?.length));
     // 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);
@@ -72,7 +124,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     const [columnFilters, setColumnFilters] = useState([]);
     const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
     const [globalFilter, setGlobalFilter] = useState('');
-    const [rowCount, setRowCount] = useState(0);
+    const [rowCount, setRowCount] = useState(bootData?.rowCount ?? 0);
     const [dateRange, setDateRange] = useState(undefined);
     const [dynamicFilters, setDynamicFilters] = useState({});
     const [filterOptionsMap, setFilterOptionsMap] = useState(new Map());
@@ -475,9 +527,15 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             };
             const res = await api.get(endpoint || `/data/${model}`, { params });
             if (res.data.success) {
-                setData(res.data.data || []);
+                const rows = res.data.data || [];
+                setData(rows);
                 if (res.data.meta)
                     setRowCount(res.data.meta.total);
+                // Cache the first page for an instant reload paint (see the cache
+                // helpers). Keyed off the live URL so it matches the next mount.
+                if (enableUrlSync && pagination.pageIndex === 0) {
+                    writeTableDataCache(tableDataCacheKey(model, endpoint, currentBranch?.id, window.location.search), rows, res.data.meta?.total ?? rows.length);
+                }
             }
         }
         catch (error) {
@@ -486,7 +544,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         finally {
             setLoadingData(false);
         }
-    }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api]);
+    }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api, enableUrlSync]);
     // 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.
@@ -532,6 +590,10 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 setData((prev) => (append ? dedupeById(prev, rows) : rows));
                 if (res.data.meta)
                     setRowCount(res.data.meta.total);
+                // Cache the first (replace) page for an instant reload paint.
+                if (!append && enableUrlSync) {
+                    writeTableDataCache(tableDataCacheKey(model, endpoint, currentBranch?.id, window.location.search), rows, res.data.meta?.total ?? rows.length);
+                }
                 // A short page means the backend has no more rows, even if
                 // meta.total disagrees with the visible count (count query
                 // vs list query drift, dedupe). Without this the sentinel
@@ -548,7 +610,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             else
                 setLoadingData(false);
         }
-    }, [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id]);
+    }, [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id, enableUrlSync]);
     // 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]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.12.3",
+  "version": "24.0.1",
   "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.3"
+    "@asteby/metacore-ui": "^2.10.0"
   },
   "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.3"
+    "@asteby/metacore-ui": "2.10.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/action-modal-dispatcher.tsx

@@ -42,9 +42,17 @@ import { DynamicRelations } from './dynamic-relations'
 import { DynamicSelectField } from './dynamic-select-field'
 import { DynamicDateField } from './dynamic-date-field'
 import { UploadField } from './upload-field'
-import { isLineItemsField, resolveWidget, resolveDependsValue, getDependsOn } from './dynamic-form-schema'
+import { isLineItemsField, resolveWidget, resolveDependsValue, getDependsOn, getFieldRef } from './dynamic-form-schema'
 import { FieldGrid, FieldCell, FieldLabel } from './field-grid'
-import type { ActionFieldDef } from './types'
+import { useMetadataCache } from './metadata-cache'
+import {
+    ViewValue,
+    objectLabel,
+    relationSiblingValue,
+    fieldItemFields,
+    isLineItemsField as isRecordLineItemsField,
+} from './dialogs/dynamic-record'
+import type { ActionFieldDef, TableMetadata, ColumnDefinition } from './types'
 // Canonical registry lives in @asteby/metacore-sdk
 import {
     type ActionMetadata,
@@ -228,6 +236,172 @@ function buildActionUrl(endpoint: string | undefined, model: string, recordId: s
     return hasRecord ? `/data/${model}/me/${recordId}/action/${actionKey}` : `/data/${model}/me/action/${actionKey}`
 }
 
+// ── Preview automático del registro en el modal de confirmación ─────────────
+//
+// Antes de confirmar una row-action (aceptar/rechazar un traspaso, etc.) el
+// usuario ve un resumen compacto y read-only de QUÉ registro va a afectar, para
+// no confirmar a ciegas. Es 100% del SDK y genérico: se apoya en la metadata de
+// tabla del modelo (labels + display hints) y en los siblings de relación que la
+// tabla ya resolvió sobre el `record`. Se degrada solo — si no hay ni un campo
+// ni líneas útiles que mostrar, no renderiza nada (ni una caja vacía).
+
+// Claves de sistema/infra que nunca aportan contexto al preview.
+const PREVIEW_SKIP_KEYS = new Set([
+    'id',
+    'organization_id',
+    'org_id',
+    'created_at',
+    'updated_at',
+    'deleted_at',
+    'created_by',
+    'created_by_id',
+    'updated_by',
+    'updated_by_id',
+])
+
+// Campos escalares "de identidad" que sí vale la pena anclar en el preview
+// aunque no sean relación ni line-items (nombre, folio, estado, etc.).
+const PREVIEW_INTEREST_KEYS = new Set([
+    'name',
+    'title',
+    'code',
+    'reference',
+    'folio',
+    'number',
+    'status',
+    'stage',
+    'state',
+])
+const PREVIEW_INTEREST_STYLES = new Set(['status', 'badge', 'currency'])
+
+const MAX_PREVIEW_FIELD_ROWS = 6
+
+function isEmptyPreviewValue(value: any): boolean {
+    if (value === null || value === undefined || value === '') return true
+    if (Array.isArray(value)) return value.length === 0
+    if (typeof value === 'object' && !(value instanceof Date)) return Object.keys(value).length === 0
+    return false
+}
+
+interface PreviewRow {
+    col: ColumnDefinition
+    value: any
+    lineItems: boolean
+}
+
+// selectPreviewColumns aplica la heurística compacta sobre las columnas del
+// modelo: relaciones resueltas a su label, campos line-items (jsonb) y un puñado
+// de escalares de identidad. Omite id/org/timestamps y los *_id crudos cuya
+// relación no resolvió a un label legible.
+function selectPreviewColumns(columns: ColumnDefinition[] | undefined, record: any): PreviewRow[] {
+    if (!columns || !record) return []
+    const lineItemRows: PreviewRow[] = []
+    const fieldRows: PreviewRow[] = []
+
+    for (const col of columns) {
+        if (!col || !col.key) continue
+        if (col.hidden) continue
+        if (PREVIEW_SKIP_KEYS.has(col.key)) continue
+        const value = record[col.key]
+
+        // Line-items (jsonb array como Transfer.items) → mini-tabla producto×cantidad.
+        if (isRecordLineItemsField(col as any, value)) {
+            if (isEmptyPreviewValue(value)) continue
+            lineItemRows.push({ col, value, lineItems: true })
+            continue
+        }
+
+        // Relación (ref / search / dynamic_select / *_id): solo si el sibling
+        // resolvió a un label legible; si es un *_id crudo sin resolver, se omite.
+        const isRelation =
+            !!getFieldRef(col as ActionFieldDef) ||
+            col.type === 'search' ||
+            col.type === 'relation' ||
+            (col as { widget?: string }).widget === 'dynamic_select' ||
+            (typeof col.key === 'string' && col.key.endsWith('_id'))
+        if (isRelation) {
+            const sib = relationSiblingValue(col as any, record)
+            const label = typeof sib === 'string' ? sib : objectLabel(sib)
+            if (!label) continue
+            fieldRows.push({ col, value, lineItems: false })
+            continue
+        }
+
+        // Escalar de identidad (nombre/folio/estado/moneda…) con valor.
+        const styleKey = col.cellStyle ?? col.type
+        const interesting =
+            PREVIEW_INTEREST_KEYS.has(col.key) || PREVIEW_INTEREST_STYLES.has(String(styleKey))
+        if (interesting && !isEmptyPreviewValue(value)) {
+            fieldRows.push({ col, value, lineItems: false })
+        }
+    }
+
+    return [...fieldRows.slice(0, MAX_PREVIEW_FIELD_ROWS), ...lineItemRows]
+}
+
+function RecordPreview({ model, record }: { model: string; record: any }) {
+    const { t } = useTranslation()
+    const api = useApi()
+    const cached = useMetadataCache((s) => s.getMetadata(model))
+    const setMetadata = useMetadataCache((s) => s.setMetadata)
+    const [fetched, setFetched] = useState<TableMetadata | null>(null)
+
+    // Sin metadata cacheada → UN fetch a /metadata/table/<model> (mismo patrón
+    // que model-action-toolbar). Se guarda en el store para próximos usos.
+    useEffect(() => {
+        if (cached || !model) return
+        let cancelled = false
+        api
+            .get(`/metadata/table/${model}`)
+            .then((res) => {
+                if (cancelled) return
+                const meta = (res.data?.data ?? res.data) as TableMetadata
+                if (meta && Array.isArray(meta.columns)) {
+                    setFetched(meta)
+                    setMetadata(model, meta)
+                }
+            })
+            .catch(() => {
+                if (!cancelled) setFetched(null)
+            })
+        return () => {
+            cancelled = true
+        }
+    }, [cached, model, api, setMetadata])
+
+    const meta = cached ?? fetched
+    const rows = useMemo(() => selectPreviewColumns(meta?.columns, record), [meta, record])
+
+    // Degradación: nada útil que mostrar → no renderiza la sección.
+    if (rows.length === 0) return null
+
+    return (
+        <div className="mt-1 overflow-hidden rounded-md border bg-muted/30 text-sm">
+            {rows.map(({ col, value, lineItems }) => {
+                const label = t(col.label, { defaultValue: col.label })
+                if (lineItems) {
+                    return (
+                        <div key={col.key} className="border-t px-3 py-2 first:border-t-0">
+                            <div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                                {label}
+                            </div>
+                            <ViewValue field={col as any} value={value} record={record} />
+                        </div>
+                    )
+                }
+                return (
+                    <div key={col.key} className="flex items-baseline gap-3 border-t px-3 py-1.5 first:border-t-0">
+                        <span className="w-1/3 shrink-0 truncate text-muted-foreground">{label}</span>
+                        <div className="min-w-0 flex-1 [&_p]:py-0">
+                            <ViewValue field={col as any} value={value} record={record} />
+                        </div>
+                    </div>
+                )
+            })}
+        </div>
+    )
+}
+
 function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoint, onSuccess }: ActionModalProps) {
     const { t } = useTranslation()
     const api = useApi()
@@ -268,6 +442,7 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
                         {action.confirmMessage || `${label}?`}
                     </AlertDialogDescription>
                 </AlertDialogHeader>
+                {record ? <RecordPreview model={model} record={record} /> : null}
                 <AlertDialogFooter>
                     <AlertDialogCancel disabled={executing}>{t('common.cancel')}</AlertDialogCancel>
                     <AlertDialogAction

package/src/dialogs/dynamic-record.tsx

@@ -267,7 +267,7 @@ function resolvePath(obj: any, path: string): any {
 // objectLabel pulls a human label off a resolved relation/user object the
 // backend serves: `{value,label}` (FK sibling), `{name,...}` (user object such
 // as created_by), or `{title}`. Returns undefined for plain/empty objects.
-function objectLabel(value: any): string | undefined {
+export function objectLabel(value: any): string | undefined {
     if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined
     const label = value.label ?? value.name ?? value.title
     if (label != null && label !== '') return String(label)
@@ -285,7 +285,7 @@ function pickImage(value: any): string | undefined {
 // FK column. A field `category_id` (search/dynamic_select/ref) ships a sibling
 // `record.category = {value,label,image?}` (or a bare string/{name}); returns
 // the raw sibling (object or string) so the caller can extract label + image.
-function relationSiblingValue(field: FieldDef, record: any): any {
+export function relationSiblingValue(field: FieldDef, record: any): any {
     if (!record) return undefined
     const candidates: string[] = []
     const ref = getFieldRef(field as ActionFieldDef)
@@ -305,7 +305,7 @@ function relationSiblingValue(field: FieldDef, record: any): any {
 
 // fieldItemFields reads the declared jsonb line-items schema off a field,
 // tolerating the snake_case `item_fields` alias the kernel serves.
-function fieldItemFields(field: FieldDef): ItemField[] | undefined {
+export function fieldItemFields(field: FieldDef): ItemField[] | undefined {
     return field.itemFields ?? field.item_fields
 }
 

package/src/dynamic-table.tsx

@@ -77,6 +77,58 @@ import { useDynamicRowActions } from './dynamic-row-actions'
 import { ExportDialog } from './dialogs/export'
 import { ImportDialog } from './dialogs/import'
 
+// ---------------------------------------------------------------------------
+// Row-data cache (perceived performance).
+//
+// The table fetches rows into local state, so a full page reload starts empty
+// and shows a full skeleton until `/data/:model` resolves — even for a view the
+// user just looked at. We stash the last first-page result and seed the initial
+// state from it so a reload paints the previous rows instantly and the fetch
+// below revalidates in the background (stale-while-revalidate).
+//
+// Deliberately `sessionStorage`, NOT localStorage: row data is org/user-scoped,
+// so it must not outlive the tab session (a browser restart or a different login
+// starts clean). The key includes model+endpoint+branch+URL params so a
+// different filter / sort / page never paints the wrong rows. Only the first
+// page is cached (capped) — infinite-scroll top-ups re-fetch on scroll.
+const TBL_DATA_CACHE_PREFIX = 'mc:tbl:data:v1'
+interface TableDataCacheEntry { rows: any[]; rowCount: number; ts: number }
+
+function tableDataCacheKey(
+    model: string | undefined,
+    endpoint: string | undefined,
+    branchId: string | number | null | undefined,
+    search: string,
+): string {
+    const p = new URLSearchParams(search)
+    const parts: string[] = []
+    p.forEach((v, k) => parts.push(`${k}=${v}`))
+    parts.sort()
+    return `${TBL_DATA_CACHE_PREFIX}|${model || ''}|${endpoint || ''}|${branchId || ''}|${parts.join('&')}`
+}
+
+function readTableDataCache(key: string): TableDataCacheEntry | null {
+    try {
+        const raw = sessionStorage.getItem(key)
+        if (!raw) return null
+        const parsed = JSON.parse(raw)
+        return parsed && Array.isArray(parsed.rows) ? parsed : null
+    } catch {
+        return null
+    }
+}
+
+function writeTableDataCache(key: string, rows: any[], rowCount: number): void {
+    try {
+        sessionStorage.setItem(
+            key,
+            JSON.stringify({ rows: rows.slice(0, 50), rowCount, ts: Date.now() }),
+        )
+    } catch {
+        // quota / private mode — the cache is a nicety, never fatal
+    }
+}
+
 export interface DynamicTableProps {
     model: string
     endpoint?: string
@@ -148,12 +200,27 @@ export function DynamicTable({
     const cachedMeta = getMetadata(model)
 
     const [metadata, setMetadata] = useState<TableMetadata | null>(cachedMeta || null)
-    const [data, setData] = useState<any[]>([])
+    // Read the row-data cache ONCE at mount (before the fetch effects run) so the
+    // first paint uses the previous rows for this exact view instead of skeletons.
+    const bootDataKey = tableDataCacheKey(
+        model,
+        endpoint,
+        currentBranch?.id,
+        typeof window !== 'undefined' ? window.location.search : '',
+    )
+    const bootDataRef = useRef<TableDataCacheEntry | null | undefined>(undefined)
+    if (bootDataRef.current === undefined) {
+        bootDataRef.current = enableUrlSync ? readTableDataCache(bootDataKey) : null
+    }
+    const bootData = bootDataRef.current
+    const [data, setData] = useState<any[]>(bootData?.rows ?? [])
     // 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)
+    // Cached rows → no full-table skeleton on reload; the background fetch still
+    // runs and swaps in fresh data.
+    const [loadingData, setLoadingData] = useState(!(bootData?.rows?.length))
     // 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)
@@ -182,7 +249,7 @@ export function DynamicTable({
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
     const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 10 })
     const [globalFilter, setGlobalFilter] = useState('')
-    const [rowCount, setRowCount] = useState(0)
+    const [rowCount, setRowCount] = useState(bootData?.rowCount ?? 0)
 
     const [dateRange, setDateRange] = useState<DateRange | undefined>(undefined)
     const [dynamicFilters, setDynamicFilters] = useState<Record<string, string[]>>({})
@@ -557,15 +624,25 @@ export function DynamicTable({
             }
             const res = await api.get(endpoint || `/data/${model}`, { params }) as { data: ApiResponse<any[]> }
             if (res.data.success) {
-                setData(res.data.data || [])
+                const rows = res.data.data || []
+                setData(rows)
                 if (res.data.meta) setRowCount(res.data.meta.total)
+                // Cache the first page for an instant reload paint (see the cache
+                // helpers). Keyed off the live URL so it matches the next mount.
+                if (enableUrlSync && pagination.pageIndex === 0) {
+                    writeTableDataCache(
+                        tableDataCacheKey(model, endpoint, currentBranch?.id, window.location.search),
+                        rows,
+                        res.data.meta?.total ?? rows.length,
+                    )
+                }
             }
         } catch (error) {
             console.error('Error al cargar los datos', error)
         } finally {
             setLoadingData(false)
         }
-    }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api])
+    }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api, enableUrlSync])
 
     // Columns whose metadata opts into a footer total (display_config.aggregate
     // → styleConfig.aggregate). When empty, no footer row is rendered and no
@@ -613,6 +690,14 @@ export function DynamicTable({
                     const rows = res.data.data || []
                     setData((prev) => (append ? dedupeById(prev, rows) : rows))
                     if (res.data.meta) setRowCount(res.data.meta.total)
+                    // Cache the first (replace) page for an instant reload paint.
+                    if (!append && enableUrlSync) {
+                        writeTableDataCache(
+                            tableDataCacheKey(model, endpoint, currentBranch?.id, window.location.search),
+                            rows,
+                            res.data.meta?.total ?? rows.length,
+                        )
+                    }
                     // A short page means the backend has no more rows, even if
                     // meta.total disagrees with the visible count (count query
                     // vs list query drift, dedupe). Without this the sentinel
@@ -626,7 +711,7 @@ export function DynamicTable({
                 else setLoadingData(false)
             }
         },
-        [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id],
+        [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id, enableUrlSync],
     )
 
     // Signature of everything that must reset the incremental list to page 1: