@asteby/metacore-runtime-react 17.0.2 → 17.0.4

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @asteby/metacore-runtime-react
 
+## 17.0.4
+
+### Patch Changes
+
+- a745f5c: Relation/option thumbnails: resolved FK relation chips and option badges now
+  render a small thumbnail when the backend stamps an `image` on the sibling
+  `{ value, label }` object or the option (brand logo, product photo, customer
+  avatar), with a graceful initials fallback when the image is missing or fails to
+  load. Applies to the table `relation`/`select`/`status`/`badge` cells; the
+  searchable picker (`DynamicSelectField`) and the detail-view picker already
+  rendered option images. Adds a pure `resolveRelationImage` helper (+ tests).
+
+## 17.0.3
+
+### Patch Changes
+
+- b5c8f5f: Pro datetime columns: `datetime`/`timestamp`/`timestamptz` columns now use the
+  date cell renderer instead of falling through to the raw-ISO fallback. Datetime
+  variants show day + time with a full-precision tooltip on hover (the 7Leguas
+  pattern); plain `date` columns stay day-only. Null and the Go zero-time render
+  an em-dash. Date-typed columns (including the timestamp variants) now infer the
+  `date_range` filter. Adds a pure `formatDateCell` helper (+ tests).
+- Updated dependencies [b5c8f5f]
+  - @asteby/metacore-ui@2.4.2
+
 ## 17.0.2
 
 ### Patch Changes

package/dist/dynamic-columns.d.ts

@@ -1,3 +1,4 @@
+import { type Locale } from 'date-fns';
 import type { ColumnDefinition } from './types';
 import type { GetDynamicColumns } from './dynamic-columns-shim';
 /** Host-supplied helpers consumed by avatar/image cell renderers. */
@@ -37,6 +38,20 @@ export declare const isActionAllowedForRowState: (action: any, row: any) => bool
  * cell can read `row[relationKeyFor(col)]`.
  */
 export declare const relationKeyFor: (col: Pick<ColumnDefinition, "key">) => string;
+/** Cell renderers (`cellStyle`/`type`) that resolve to the date renderer. */
+export declare const DATE_CELL_TYPES: readonly ["date", "datetime", "timestamp", "timestamptz"];
+/**
+ * Pure formatter behind the date/datetime cell. Returns the display string and
+ * an optional full-precision `title` (tooltip), or `null` when the value is
+ * empty/invalid/the Go zero-time so the cell renders an em-dash.
+ *   - `date`: day only (`PPP`), no tooltip.
+ *   - `datetime`/`timestamp(tz)`: day + time (`Pp`) with a full-precision
+ *     tooltip (`PPpp`) — the 7Leguas pattern.
+ */
+export declare function formatDateCell(value: unknown, renderAs: string | undefined, locale: Locale): {
+    display: string;
+    title?: string;
+} | null;
 /**
  * Reads the resolved relation/option label a backend serves for an FK or
  * option column, falling back to the raw value. Pure so the cell renderers and
@@ -46,6 +61,14 @@ export declare const relationKeyFor: (col: Pick<ColumnDefinition, "key">) => str
  *   - else:     the raw value coerced to string ('' when nullish).
  */
 export declare const resolveRelationLabel: (col: ColumnDefinition, row: any) => string;
+/**
+ * Reads the thumbnail URL a backend serves on a resolved FK sibling, when
+ * present. The backend stamps `image` onto the `{ value, label }` relation
+ * object when the referenced model carries an image column (brand logo,
+ * product photo, customer avatar). Returns '' when there is no sibling image —
+ * the chip then renders text-only, exactly as before.
+ */
+export declare const resolveRelationImage: (col: ColumnDefinition, row: any) => string;
 /**
  * Builds the canonical column factory used by `<DynamicTable>` when the host
  * does not supply its own. Pass `{ getImageUrl, apiBaseUrl }` to wire avatar

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

@@ -1 +1 @@
-{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAgDA,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;AAgGD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AA0HD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAWtE,CAAA;AAiED;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAsmBnB;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;AAgGD;;;;;;;;;;;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;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,GACf;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAY5C;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;AA0ED;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAsmBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -169,7 +169,16 @@ const renderRelationBadges = (items, col) => {
             return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1", children: [iconValue && (_jsx(DynamicIcon, { name: iconValue, className: "h-3 w-3" })), _jsx("span", { children: label })] }, `${col.key}-${idx}`));
         }) }));
 };
-const OptionBadge = ({ option }) => {
+/**
+ * Tiny square thumbnail for a resolved relation/option that carries an `image`
+ * (brand logo, product photo, customer/user avatar). Uses the same Avatar
+ * primitive as the `avatar`/`creator` cells so a broken/loading image
+ * gracefully falls back to the record's initials. Sized small (the box is an
+ * inline style so an addon-arbitrary Tailwind class never gets dropped by a
+ * consuming app's class scan). Rendered inline alongside a label — never alone.
+ */
+const RelationThumbnail = ({ src, alt, getImageUrl, size = 18 }) => (_jsxs(Avatar, { className: "shrink-0 rounded-sm ring-1 ring-border/40", style: { width: size, height: size }, children: [_jsx(AvatarImage, { src: getImageUrl ? getImageUrl(src) : src, alt: alt, className: "object-cover" }), _jsx(AvatarFallback, { className: "rounded-sm bg-primary/10 text-[8px] font-bold text-primary", children: getInitials(alt) })] }));
+const OptionBadge = ({ option, getImageUrl }) => {
     const isDark = useIsDarkTheme();
     // Explicit backend color wins; otherwise derive a stable, cohesive color
     // from the option's value (fallback label) so "dead" gray badges come
@@ -177,14 +186,14 @@ const OptionBadge = ({ option }) => {
     // tailwind safelist — addon-arbitrary classes aren't in the host scan.
     const colorSource = option.color || optionColor(option.value || option.label);
     const colorStyles = generateBadgeStyles(colorSource, { isDark });
-    return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1 border-0", style: colorStyles, children: [option.icon && _jsx(DynamicIcon, { name: option.icon, className: "h-3.5 w-3.5" }), _jsx("span", { children: option.label })] }));
+    return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1 border-0", style: colorStyles, children: [option.image ? (_jsx(RelationThumbnail, { src: option.image, alt: option.label, getImageUrl: getImageUrl, size: 16 })) : (option.icon && _jsx(DynamicIcon, { name: option.icon, className: "h-3.5 w-3.5" })), _jsx("span", { children: option.label })] }));
 };
-const BadgeWithEndpointOptions = ({ endpoint, value }) => {
+const BadgeWithEndpointOptions = ({ endpoint, value, getImageUrl }) => {
     const { optionsMap } = React.useContext(OptionsContext);
     const options = optionsMap.get(endpoint) || [];
     const option = options.find((opt) => opt.value === value);
     if (option)
-        return _jsx(OptionBadge, { option: option, fallback: String(value) });
+        return _jsx(OptionBadge, { option: option, fallback: String(value), getImageUrl: getImageUrl });
     // No declared option matched → humanize the raw token as a safety net so a
     // cell never shows `in_progress` verbatim (option.label still wins above).
     return _jsx(Badge, { variant: "outline", children: humanizeToken(value) });
@@ -201,6 +210,31 @@ export const relationKeyFor = (col) => {
     const k = col.key;
     return k.endsWith('_id') ? k.slice(0, -3) : k;
 };
+/** Cell renderers (`cellStyle`/`type`) that resolve to the date renderer. */
+export const DATE_CELL_TYPES = ['date', 'datetime', 'timestamp', 'timestamptz'];
+/**
+ * Pure formatter behind the date/datetime cell. Returns the display string and
+ * an optional full-precision `title` (tooltip), or `null` when the value is
+ * empty/invalid/the Go zero-time so the cell renders an em-dash.
+ *   - `date`: day only (`PPP`), no tooltip.
+ *   - `datetime`/`timestamp(tz)`: day + time (`Pp`) with a full-precision
+ *     tooltip (`PPpp`) — the 7Leguas pattern.
+ */
+export function formatDateCell(value, renderAs, locale) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    const date = new Date(value);
+    if (isNaN(date.getTime()) || date.getFullYear() <= 1)
+        return null;
+    const withTime = renderAs !== 'date';
+    if (withTime) {
+        return {
+            display: format(date, 'Pp', { locale }),
+            title: format(date, 'PPpp', { locale }),
+        };
+    }
+    return { display: format(date, 'PPP', { locale }) };
+}
 /**
  * Reads the resolved relation/option label a backend serves for an FK or
  * option column, falling back to the raw value. Pure so the cell renderers and
@@ -222,24 +256,42 @@ export const resolveRelationLabel = (col, row) => {
         return '';
     return String(raw);
 };
+/**
+ * Reads the thumbnail URL a backend serves on a resolved FK sibling, when
+ * present. The backend stamps `image` onto the `{ value, label }` relation
+ * object when the referenced model carries an image column (brand logo,
+ * product photo, customer avatar). Returns '' when there is no sibling image —
+ * the chip then renders text-only, exactly as before.
+ */
+export const resolveRelationImage = (col, row) => {
+    const sibling = getNestedValue(row, relationKeyFor(col));
+    if (sibling && typeof sibling === 'object') {
+        const img = sibling.image ?? sibling.avatar ?? sibling.photo;
+        if (img !== undefined && img !== null && img !== '')
+            return String(img);
+    }
+    return '';
+};
 /**
  * Renders a resolved FK relation as a clean, truncated chip. Reads the
- * backend-resolved sibling `{ value, label }` (see `relationKeyFor`) and shows
- * its `label`. Falls back to the raw id when no sibling was resolved, and to an
- * empty marker when there is no value at all. Domain-agnostic: works for every
- * `belongs_to` column (category, supplier, warehouse, …) without per-addon code.
+ * backend-resolved sibling `{ value, label[, image] }` (see `relationKeyFor`)
+ * and shows its `label`, prefixed with a small thumbnail when the sibling
+ * carries an `image`. Falls back to the raw id when no sibling was resolved, and
+ * to an empty marker when there is no value at all. Domain-agnostic: works for
+ * every `belongs_to` column (category, supplier, brand, …) without per-addon code.
  */
-const RelationCell = ({ col, row }) => {
+const RelationCell = ({ col, row, getImageUrl }) => {
     const isDark = useIsDarkTheme();
     const display = resolveRelationLabel(col, row);
     if (!display)
         return _jsx(EmptyCell, {});
+    const image = resolveRelationImage(col, row);
     // Deterministic, SUBTLE color keyed on the resolved label — lighter than
     // enum badges (soft tint, no heavy fill) so category/brand chips read as
     // alive yet stay visually distinct from option/status badges. Inline style
     // (hex-derived) bypasses the host tailwind safelist.
     const chipStyles = relationChipStyles(display, { isDark });
-    return (_jsx("span", { className: "inline-flex max-w-[220px] items-center truncate rounded-md px-2 py-0.5 text-sm font-medium", style: chipStyles, title: display, children: _jsx("span", { className: "truncate", children: display }) }));
+    return (_jsxs("span", { className: "inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-sm font-medium", style: chipStyles, title: display, children: [image && (_jsx(RelationThumbnail, { src: image, alt: display, getImageUrl: getImageUrl, size: 18 })), _jsx("span", { className: "truncate", children: display })] }));
 };
 /**
  * Generic avatar-style cell: round/rounded photo (or initials fallback) +
@@ -309,7 +361,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                     if (renderAs === 'badge' && col.useOptions && col.searchEndpoint) {
                         if (!value)
                             return _jsx("span", { className: "text-muted-foreground", children: "-" });
-                        return _jsx(BadgeWithEndpointOptions, { endpoint: col.searchEndpoint, value: value });
+                        return _jsx(BadgeWithEndpointOptions, { endpoint: col.searchEndpoint, value: value, getImageUrl: getImageUrl });
                     }
                     // Static badge options — map value → label/icon/color
                     if (renderAs === 'badge' && col.options && col.options.length > 0) {
@@ -317,7 +369,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                             return _jsx("span", { className: "text-muted-foreground", children: "-" });
                         const option = col.options.find((o) => o.value === String(value));
                         if (option)
-                            return _jsx(OptionBadge, { option: option, fallback: String(value) });
+                            return _jsx(OptionBadge, { option: option, fallback: String(value), getImageUrl: getImageUrl });
                         return _jsx(Badge, { variant: "outline", children: humanizeToken(value) });
                     }
                     if (renderAs === 'relation-badge-list') {
@@ -337,7 +389,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                         const sv = String(value);
                         const option = col.options?.find((o) => o.value === sv);
                         if (option)
-                            return _jsx(OptionBadge, { option: option, fallback: sv });
+                            return _jsx(OptionBadge, { option: option, fallback: sv, getImageUrl: getImageUrl });
                         const isDark = typeof document !== 'undefined' &&
                             document.documentElement.classList.contains('dark');
                         const styles = generateBadgeStyles(statusColorFor(sv), { isDark });
@@ -352,7 +404,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                     // `row[<key w/o _id>] = { value, label }` sibling.
                     if (renderAs === 'relation' ||
                         (col.ref && !col.options?.length && renderAs !== 'badge' && renderAs !== 'status')) {
-                        return _jsx(RelationCell, { col: col, row: row.original });
+                        return _jsx(RelationCell, { col: col, row: row.original, getImageUrl: getImageUrl });
                     }
                     // Option/type column: a `select`-style column ships its
                     // localized `options: [{value,label,color,icon}]` inline and
@@ -366,23 +418,18 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                             return _jsx(EmptyCell, {});
                         const option = col.options.find((o) => o.value === String(value));
                         if (option)
-                            return _jsx(OptionBadge, { option: option, fallback: String(value) });
+                            return _jsx(OptionBadge, { option: option, fallback: String(value), getImageUrl: getImageUrl });
                         return _jsx(Badge, { variant: "outline", children: humanizeToken(value) });
                     }
                     switch (renderAs) {
-                        case 'date': {
-                            if (!value)
+                        case 'date':
+                        case 'datetime':
+                        case 'timestamp':
+                        case 'timestamptz': {
+                            const formatted = formatDateCell(value, renderAs, dateLocale);
+                            if (!formatted)
                                 return _jsx("span", { className: "text-muted-foreground", children: "-" });
-                            try {
-                                const date = new Date(value);
-                                if (isNaN(date.getTime()) || date.getFullYear() <= 1) {
-                                    return _jsx("span", { className: "text-muted-foreground", children: "-" });
-                                }
-                                return (_jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [_jsx(icons.Calendar, { className: "h-3.5 w-3.5 opacity-70" }), _jsx("span", { className: "text-sm font-medium", children: format(date, 'PPP', { locale: dateLocale }) })] }));
-                            }
-                            catch {
-                                return _jsx("span", { children: String(value) });
-                            }
+                            return (_jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", title: formatted.title, children: [_jsx(icons.Calendar, { className: "h-3.5 w-3.5 opacity-70" }), _jsx("span", { className: "text-sm font-medium", children: formatted.display })] }));
                         }
                         case 'search':
                         case 'avatar':

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;CACxC;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,GAC/C,EAAE,iBAAiB,+BA+xBnB"}
+{"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;CACxC;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,GAC/C,EAAE,iBAAiB,+BAgyBnB"}

package/dist/dynamic-table.js

@@ -24,7 +24,7 @@ import { toast } from 'sonner';
 import { Progress } from './dialogs/_primitives';
 import { useMetadataCache } from './metadata-cache';
 import { useApi, useCurrentBranch } from './api-context';
-import { defaultGetDynamicColumns } from './dynamic-columns';
+import { defaultGetDynamicColumns, DATE_CELL_TYPES } from './dynamic-columns';
 import { OptionsContext } from './options-context';
 import { ActionModalDispatcher } from './action-modal-dispatcher';
 import { getSearchableColumnKeys } from './column-visibility';
@@ -520,7 +520,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 filterType = 'boolean';
             else if (c.type === 'number')
                 filterType = 'number_range';
-            else if (c.type === 'date')
+            else if (DATE_CELL_TYPES.includes(c.type))
                 filterType = 'date_range';
             else
                 filterType = 'text';

package/dist/types.d.ts

@@ -81,7 +81,7 @@ export type ColumnVisibility = 'all' | 'table' | 'modal' | 'list' | (string & {}
 export interface ColumnDefinition {
     key: string;
     label: string;
-    type: 'text' | 'number' | 'date' | 'select' | 'search' | 'relation-badge-list' | 'avatar' | 'boolean' | 'phone' | 'media-gallery' | 'image' | 'url' | 'link' | 'email' | 'currency' | 'percent' | 'progress' | 'badge' | 'status' | 'tags' | 'color' | 'code' | 'truncate-text' | 'creator' | 'user' | 'relation';
+    type: 'text' | 'number' | 'date' | 'datetime' | 'timestamp' | 'timestamptz' | 'select' | 'search' | 'relation-badge-list' | 'avatar' | 'boolean' | 'phone' | 'media-gallery' | 'image' | 'url' | 'link' | 'email' | 'currency' | 'percent' | 'progress' | 'badge' | 'status' | 'tags' | 'color' | 'code' | 'truncate-text' | 'creator' | 'user' | 'relation';
     sortable: boolean;
     filterable: boolean;
     /**

package/dist/types.d.ts.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "17.0.2",
+  "version": "17.0.4",
   "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.4.1"
+    "@asteby/metacore-ui": "^2.4.2"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -62,7 +62,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.4.1"
+    "@asteby/metacore-ui": "2.4.2"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/format-date-cell.test.ts

@@ -0,0 +1,52 @@
+// Pure-logic coverage for the date/datetime cell formatter behind
+// `defaultGetDynamicColumns`. Locks the contract the JSX cell relies on:
+// `date` → day only (no tooltip), `datetime`/`timestamp(tz)` → day + time with
+// a full-precision tooltip, and null/invalid/Go-zero-time → `null` (em-dash).
+import { describe, it, expect } from 'vitest'
+import { enUS } from 'date-fns/locale'
+import { formatDateCell } from '../dynamic-columns'
+
+describe('formatDateCell', () => {
+    const iso = '2026-06-06T17:47:33.201Z'
+
+    it('renders day only with no tooltip for `date`', () => {
+        const out = formatDateCell(iso, 'date', enUS)
+        expect(out).not.toBeNull()
+        expect(out!.title).toBeUndefined()
+        // `PPP` is the long day form — no time component.
+        expect(out!.display).not.toMatch(/\d{1,2}:\d{2}/)
+        expect(out!.display).toMatch(/2026/)
+    })
+
+    it('renders day + time and a full-precision tooltip for `datetime`', () => {
+        const out = formatDateCell(iso, 'datetime', enUS)
+        expect(out).not.toBeNull()
+        expect(out!.display).toMatch(/\d{1,2}:\d{2}/)
+        expect(out!.title).toBeDefined()
+        expect(out!.title).toMatch(/\d{1,2}:\d{2}/)
+    })
+
+    it('treats timestamp/timestamptz like datetime (day + time + tooltip)', () => {
+        for (const t of ['timestamp', 'timestamptz']) {
+            const out = formatDateCell(iso, t, enUS)
+            expect(out).not.toBeNull()
+            expect(out!.display).toMatch(/\d{1,2}:\d{2}/)
+            expect(out!.title).toBeDefined()
+        }
+    })
+
+    it('returns null for null/undefined/empty (empty cell)', () => {
+        expect(formatDateCell(null, 'datetime', enUS)).toBeNull()
+        expect(formatDateCell(undefined, 'datetime', enUS)).toBeNull()
+        expect(formatDateCell('', 'datetime', enUS)).toBeNull()
+    })
+
+    it('returns null for the Go zero-time (0001-01-01T00:00:00Z)', () => {
+        expect(formatDateCell('0001-01-01T00:00:00Z', 'datetime', enUS)).toBeNull()
+        expect(formatDateCell('0001-01-01T00:00:00Z', 'date', enUS)).toBeNull()
+    })
+
+    it('returns null for an unparseable value', () => {
+        expect(formatDateCell('not-a-date', 'datetime', enUS)).toBeNull()
+    })
+})

package/src/__tests__/relation-option-cells.test.ts

@@ -3,7 +3,7 @@
 // host's render tests); here we lock the value-resolution contract that drives
 // them so a backend shape change is caught without a DOM.
 import { describe, it, expect } from 'vitest'
-import { relationKeyFor, resolveRelationLabel } from '../dynamic-columns'
+import { relationKeyFor, resolveRelationImage, resolveRelationLabel } from '../dynamic-columns'
 import type { ColumnDefinition } from '../types'
 
 const col = (over: Partial<ColumnDefinition>): ColumnDefinition => ({
@@ -64,3 +64,44 @@ describe('resolveRelationLabel', () => {
         expect(resolveRelationLabel(col({ ref: 'categories' }), row)).toBe('Sin categoría')
     })
 })
+
+describe('resolveRelationImage', () => {
+    const brandCol = (over: Partial<ColumnDefinition> = {}): ColumnDefinition =>
+        col({ key: 'brand_id', label: 'Marca', ref: 'brands', ...over })
+
+    it('reads the thumbnail the backend stamps on the resolved sibling', () => {
+        const row = {
+            brand_id: 'uuid-1',
+            brand: { value: 'uuid-1', label: 'Michelin', image: 'https://cdn/x/m.png' },
+        }
+        expect(resolveRelationImage(brandCol(), row)).toBe('https://cdn/x/m.png')
+    })
+
+    it('also accepts avatar/photo aliases on the sibling', () => {
+        expect(
+            resolveRelationImage(brandCol(), {
+                brand: { value: 'u', label: 'X', avatar: 'a.png' },
+            }),
+        ).toBe('a.png')
+        expect(
+            resolveRelationImage(brandCol(), {
+                brand: { value: 'u', label: 'X', photo: 'p.png' },
+            }),
+        ).toBe('p.png')
+    })
+
+    it('returns empty string when the sibling carries no image (text-only chip)', () => {
+        const row = { brand_id: 'uuid-2', brand: { value: 'uuid-2', label: 'Genérica' } }
+        expect(resolveRelationImage(brandCol(), row)).toBe('')
+    })
+
+    it('returns empty string when there is no sibling at all', () => {
+        expect(resolveRelationImage(brandCol(), { brand_id: 'uuid-3' })).toBe('')
+        expect(resolveRelationImage(brandCol(), {})).toBe('')
+    })
+
+    it('ignores an empty-string image (no broken thumbnail)', () => {
+        const row = { brand: { value: 'u', label: 'X', image: '' } }
+        expect(resolveRelationImage(brandCol(), row)).toBe('')
+    })
+})

package/src/dynamic-columns.tsx

@@ -14,7 +14,7 @@
 
 import * as React from 'react'
 import { ColumnDef } from '@tanstack/react-table'
-import { format } from 'date-fns'
+import { format, type Locale } from 'date-fns'
 import { es, enUS } from 'date-fns/locale'
 import * as icons from 'lucide-react'
 import { MoreHorizontal } from 'lucide-react'
@@ -272,12 +272,42 @@ const renderRelationBadges = (items: any, col: ColumnDefinition) => {
     )
 }
 
+/**
+ * Tiny square thumbnail for a resolved relation/option that carries an `image`
+ * (brand logo, product photo, customer/user avatar). Uses the same Avatar
+ * primitive as the `avatar`/`creator` cells so a broken/loading image
+ * gracefully falls back to the record's initials. Sized small (the box is an
+ * inline style so an addon-arbitrary Tailwind class never gets dropped by a
+ * consuming app's class scan). Rendered inline alongside a label — never alone.
+ */
+const RelationThumbnail: React.FC<{
+    src: string
+    alt: string
+    getImageUrl?: (path: string) => string
+    size?: number
+}> = ({ src, alt, getImageUrl, size = 18 }) => (
+    <Avatar
+        className="shrink-0 rounded-sm ring-1 ring-border/40"
+        style={{ width: size, height: size }}
+    >
+        <AvatarImage
+            src={getImageUrl ? getImageUrl(src) : src}
+            alt={alt}
+            className="object-cover"
+        />
+        <AvatarFallback className="rounded-sm bg-primary/10 text-[8px] font-bold text-primary">
+            {getInitials(alt)}
+        </AvatarFallback>
+    </Avatar>
+)
+
 interface OptionBadgeProps {
-    option: { value: string; label: string; icon?: string; color?: string }
+    option: { value: string; label: string; icon?: string; color?: string; image?: string }
     fallback: string
+    getImageUrl?: (path: string) => string
 }
 
-const OptionBadge: React.FC<OptionBadgeProps> = ({ option }) => {
+const OptionBadge: React.FC<OptionBadgeProps> = ({ option, getImageUrl }) => {
     const isDark = useIsDarkTheme()
     // Explicit backend color wins; otherwise derive a stable, cohesive color
     // from the option's value (fallback label) so "dead" gray badges come
@@ -287,17 +317,30 @@ const OptionBadge: React.FC<OptionBadgeProps> = ({ option }) => {
     const colorStyles = generateBadgeStyles(colorSource, { isDark })
     return (
         <Badge variant="outline" className="flex items-center gap-1 border-0" style={colorStyles}>
-            {option.icon && <DynamicIcon name={option.icon} className="h-3.5 w-3.5" />}
+            {option.image ? (
+                <RelationThumbnail
+                    src={option.image}
+                    alt={option.label}
+                    getImageUrl={getImageUrl}
+                    size={16}
+                />
+            ) : (
+                option.icon && <DynamicIcon name={option.icon} className="h-3.5 w-3.5" />
+            )}
             <span>{option.label}</span>
         </Badge>
     )
 }
 
-const BadgeWithEndpointOptions: React.FC<{ endpoint: string; value: any }> = ({ endpoint, value }) => {
+const BadgeWithEndpointOptions: React.FC<{
+    endpoint: string
+    value: any
+    getImageUrl?: (path: string) => string
+}> = ({ endpoint, value, getImageUrl }) => {
     const { optionsMap } = React.useContext(OptionsContext)
     const options = optionsMap.get(endpoint) || []
     const option = options.find((opt: any) => opt.value === value)
-    if (option) return <OptionBadge option={option} fallback={String(value)} />
+    if (option) return <OptionBadge option={option} fallback={String(value)} getImageUrl={getImageUrl} />
     // No declared option matched → humanize the raw token as a safety net so a
     // cell never shows `in_progress` verbatim (option.label still wins above).
     return <Badge variant="outline">{humanizeToken(value)}</Badge>
@@ -316,6 +359,35 @@ export const relationKeyFor = (col: Pick<ColumnDefinition, 'key'>): string => {
     return k.endsWith('_id') ? k.slice(0, -3) : k
 }
 
+/** Cell renderers (`cellStyle`/`type`) that resolve to the date renderer. */
+export const DATE_CELL_TYPES = ['date', 'datetime', 'timestamp', 'timestamptz'] as const
+
+/**
+ * Pure formatter behind the date/datetime cell. Returns the display string and
+ * an optional full-precision `title` (tooltip), or `null` when the value is
+ * empty/invalid/the Go zero-time so the cell renders an em-dash.
+ *   - `date`: day only (`PPP`), no tooltip.
+ *   - `datetime`/`timestamp(tz)`: day + time (`Pp`) with a full-precision
+ *     tooltip (`PPpp`) — the 7Leguas pattern.
+ */
+export function formatDateCell(
+    value: unknown,
+    renderAs: string | undefined,
+    locale: Locale,
+): { display: string; title?: string } | null {
+    if (value === null || value === undefined || value === '') return null
+    const date = new Date(value as any)
+    if (isNaN(date.getTime()) || date.getFullYear() <= 1) return null
+    const withTime = renderAs !== 'date'
+    if (withTime) {
+        return {
+            display: format(date, 'Pp', { locale }),
+            title: format(date, 'PPpp', { locale }),
+        }
+    }
+    return { display: format(date, 'PPP', { locale }) }
+}
+
 /**
  * Reads the resolved relation/option label a backend serves for an FK or
  * option column, falling back to the raw value. Pure so the cell renderers and
@@ -337,17 +409,39 @@ export const resolveRelationLabel = (col: ColumnDefinition, row: any): string =>
     return String(raw)
 }
 
+/**
+ * Reads the thumbnail URL a backend serves on a resolved FK sibling, when
+ * present. The backend stamps `image` onto the `{ value, label }` relation
+ * object when the referenced model carries an image column (brand logo,
+ * product photo, customer avatar). Returns '' when there is no sibling image —
+ * the chip then renders text-only, exactly as before.
+ */
+export const resolveRelationImage = (col: ColumnDefinition, row: any): string => {
+    const sibling = getNestedValue(row, relationKeyFor(col))
+    if (sibling && typeof sibling === 'object') {
+        const img = sibling.image ?? sibling.avatar ?? sibling.photo
+        if (img !== undefined && img !== null && img !== '') return String(img)
+    }
+    return ''
+}
+
 /**
  * Renders a resolved FK relation as a clean, truncated chip. Reads the
- * backend-resolved sibling `{ value, label }` (see `relationKeyFor`) and shows
- * its `label`. Falls back to the raw id when no sibling was resolved, and to an
- * empty marker when there is no value at all. Domain-agnostic: works for every
- * `belongs_to` column (category, supplier, warehouse, …) without per-addon code.
+ * backend-resolved sibling `{ value, label[, image] }` (see `relationKeyFor`)
+ * and shows its `label`, prefixed with a small thumbnail when the sibling
+ * carries an `image`. Falls back to the raw id when no sibling was resolved, and
+ * to an empty marker when there is no value at all. Domain-agnostic: works for
+ * every `belongs_to` column (category, supplier, brand, …) without per-addon code.
  */
-const RelationCell: React.FC<{ col: ColumnDefinition; row: any }> = ({ col, row }) => {
+const RelationCell: React.FC<{
+    col: ColumnDefinition
+    row: any
+    getImageUrl?: (path: string) => string
+}> = ({ col, row, getImageUrl }) => {
     const isDark = useIsDarkTheme()
     const display = resolveRelationLabel(col, row)
     if (!display) return <EmptyCell />
+    const image = resolveRelationImage(col, row)
     // Deterministic, SUBTLE color keyed on the resolved label — lighter than
     // enum badges (soft tint, no heavy fill) so category/brand chips read as
     // alive yet stay visually distinct from option/status badges. Inline style
@@ -355,10 +449,13 @@ const RelationCell: React.FC<{ col: ColumnDefinition; row: any }> = ({ col, row
     const chipStyles = relationChipStyles(display, { isDark })
     return (
         <span
-            className="inline-flex max-w-[220px] items-center truncate rounded-md px-2 py-0.5 text-sm font-medium"
+            className="inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-sm font-medium"
             style={chipStyles}
             title={display}
         >
+            {image && (
+                <RelationThumbnail src={image} alt={display} getImageUrl={getImageUrl} size={18} />
+            )}
             <span className="truncate">{display}</span>
         </span>
     )
@@ -494,14 +591,14 @@ export function makeDefaultGetDynamicColumns(
                     // Endpoint-loaded badge options (preloaded into OptionsContext)
                     if (renderAs === 'badge' && col.useOptions && col.searchEndpoint) {
                         if (!value) return <span className="text-muted-foreground">-</span>
-                        return <BadgeWithEndpointOptions endpoint={col.searchEndpoint} value={value} />
+                        return <BadgeWithEndpointOptions endpoint={col.searchEndpoint} value={value} getImageUrl={getImageUrl} />
                     }
 
                     // Static badge options — map value → label/icon/color
                     if (renderAs === 'badge' && col.options && col.options.length > 0) {
                         if (!value && value !== 0) return <span className="text-muted-foreground">-</span>
                         const option = col.options.find((o) => o.value === String(value))
-                        if (option) return <OptionBadge option={option} fallback={String(value)} />
+                        if (option) return <OptionBadge option={option} fallback={String(value)} getImageUrl={getImageUrl} />
                         return <Badge variant="outline">{humanizeToken(value)}</Badge>
                     }
 
@@ -521,7 +618,7 @@ export function makeDefaultGetDynamicColumns(
                         if (!value && value !== 0) return <EmptyCell />
                         const sv = String(value)
                         const option = col.options?.find((o) => o.value === sv)
-                        if (option) return <OptionBadge option={option} fallback={sv} />
+                        if (option) return <OptionBadge option={option} fallback={sv} getImageUrl={getImageUrl} />
                         const isDark =
                             typeof document !== 'undefined' &&
                             document.documentElement.classList.contains('dark')
@@ -544,7 +641,7 @@ export function makeDefaultGetDynamicColumns(
                         renderAs === 'relation' ||
                         (col.ref && !col.options?.length && renderAs !== 'badge' && renderAs !== 'status')
                     ) {
-                        return <RelationCell col={col} row={row.original} />
+                        return <RelationCell col={col} row={row.original} getImageUrl={getImageUrl} />
                     }
 
                     // Option/type column: a `select`-style column ships its
@@ -559,29 +656,29 @@ export function makeDefaultGetDynamicColumns(
                     ) {
                         if (!value && value !== 0) return <EmptyCell />
                         const option = col.options.find((o) => o.value === String(value))
-                        if (option) return <OptionBadge option={option} fallback={String(value)} />
+                        if (option) return <OptionBadge option={option} fallback={String(value)} getImageUrl={getImageUrl} />
                         return <Badge variant="outline">{humanizeToken(value)}</Badge>
                     }
 
                     switch (renderAs) {
-                        case 'date': {
-                            if (!value) return <span className="text-muted-foreground">-</span>
-                            try {
-                                const date = new Date(value)
-                                if (isNaN(date.getTime()) || date.getFullYear() <= 1) {
-                                    return <span className="text-muted-foreground">-</span>
-                                }
-                                return (
-                                    <div className="flex items-center gap-1.5 text-muted-foreground">
-                                        <icons.Calendar className="h-3.5 w-3.5 opacity-70" />
-                                        <span className="text-sm font-medium">
-                                            {format(date, 'PPP', { locale: dateLocale })}
-                                        </span>
-                                    </div>
-                                )
-                            } catch {
-                                return <span>{String(value)}</span>
-                            }
+                        case 'date':
+                        case 'datetime':
+                        case 'timestamp':
+                        case 'timestamptz': {
+                            const formatted = formatDateCell(value, renderAs, dateLocale)
+                            if (!formatted)
+                                return <span className="text-muted-foreground">-</span>
+                            return (
+                                <div
+                                    className="flex items-center gap-1.5 text-muted-foreground"
+                                    title={formatted.title}
+                                >
+                                    <icons.Calendar className="h-3.5 w-3.5 opacity-70" />
+                                    <span className="text-sm font-medium">
+                                        {formatted.display}
+                                    </span>
+                                </div>
+                            )
                         }
 
                         case 'search':

package/src/dynamic-table.tsx

@@ -65,7 +65,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 } from './dynamic-columns'
+import { defaultGetDynamicColumns, DATE_CELL_TYPES } from './dynamic-columns'
 import { OptionsContext } from './options-context'
 import { ActionModalDispatcher } from './action-modal-dispatcher'
 import type { TableMetadata, ApiResponse, ActionMetadata } from './types'
@@ -555,7 +555,8 @@ export function DynamicTable({
             else if (hasStaticOptions || hasEndpoint) filterType = 'select'
             else if (c.type === 'boolean') filterType = 'boolean'
             else if (c.type === 'number') filterType = 'number_range'
-            else if (c.type === 'date') filterType = 'date_range'
+            else if ((DATE_CELL_TYPES as readonly string[]).includes(c.type))
+                filterType = 'date_range'
             else filterType = 'text'
 
             const options = hasStaticOptions

package/src/types.ts

@@ -87,6 +87,11 @@ export interface ColumnDefinition {
         | 'text'
         | 'number'
         | 'date'
+        // Timestamp variants. They share the `date` cell renderer but append
+        // the time + a full-precision tooltip (see formatDateCell).
+        | 'datetime'
+        | 'timestamp'
+        | 'timestamptz'
         | 'select'
         | 'search'
         | 'relation-badge-list'