@asteby/metacore-runtime-react 23.2.0 → 23.4.0

package/src/dialogs/dynamic-record.tsx

@@ -56,6 +56,14 @@ import { isNilUuid, normalizeNilUuid } from '../nil-uuid'
 import { DynamicIcon, isLucideIconName } from '../dynamic-icon'
 import { humanizeToken } from '../dynamic-columns-helpers'
 import { formatDateCell } from '../dynamic-columns'
+import {
+    OptionBadge,
+    statusColorFor,
+    useIsDarkTheme,
+    type DisplayOption,
+} from '../display-value'
+import { MediaValue, RichText } from '../rich-url'
+import { generateBadgeStyles } from '@asteby/metacore-ui/lib'
 import { CollectionCell, type ItemField } from '../collection-cell'
 import type { ActionFieldDef, RelationMeta } from '../types'
 import { ImageUrlContext, identityImageUrl, type GetImageUrl } from '../image-url-context'
@@ -442,6 +450,21 @@ export function isMoneyField(field: FieldDef, value: any): boolean {
     )
 }
 
+// filterVisibleFields decides which declared fields render in the form for a
+// given mode. `hidden` fields never render. A `readonly` (server/system-
+// generated) field is EXCLUDED on create — the user can't set a value the
+// server will overwrite — but stays visible on edit/view (rendered disabled).
+export function filterVisibleFields(
+    fields: FieldDef[] | undefined,
+    mode: 'view' | 'edit' | 'create',
+): FieldDef[] {
+    return (fields ?? []).filter(f => {
+        if (f.hidden) return false
+        if (mode === 'create' && f.readonly) return false
+        return true
+    })
+}
+
 export function DynamicRecordDialog({
     open,
     onOpenChange,
@@ -557,7 +580,7 @@ export function DynamicRecordDialog({
                 }
             } catch (err) {
                 console.error('[DynamicRecordDialog] load error:', err)
-                if (!seed) toast.error('Error al cargar los datos')
+                if (!seed) toast.error(t('dynamic.load_error', { defaultValue: 'No se pudieron cargar los datos' }))
             } finally {
                 if (!cancelled) setLoading(false)
             }
@@ -662,7 +685,7 @@ export function DynamicRecordDialog({
         try {
             if (isCreate && onCreate) {
                 const created = await onCreate(formValues)
-                toast.success(modalMeta?.messages?.created || 'Registro creado correctamente')
+                toast.success(modalMeta?.messages?.created || t('dynamic.create_success', { defaultValue: 'Registro creado correctamente' }))
                 onSaved?.(created ?? undefined)
                 onOpenChange(false)
                 return
@@ -670,7 +693,7 @@ export function DynamicRecordDialog({
 
             if (!isCreate && recordId && onUpdate) {
                 const updated = await onUpdate(String(recordId), formValues)
-                toast.success(modalMeta?.messages?.updated || 'Guardado correctamente')
+                toast.success(modalMeta?.messages?.updated || t('dynamic.update_success', { defaultValue: 'Guardado correctamente' }))
                 onSaved?.(updated ?? undefined)
                 onOpenChange(false)
                 return
@@ -693,16 +716,18 @@ export function DynamicRecordDialog({
                 // endpoint returns a raw English string that would leak into the toast.
                 toast.success(
                     modalMeta?.messages?.[isCreate ? 'created' : 'updated']
-                        || (isCreate ? 'Registro creado correctamente' : 'Guardado correctamente'),
+                        || (isCreate
+                            ? t('dynamic.create_success', { defaultValue: 'Registro creado correctamente' })
+                            : t('dynamic.update_success', { defaultValue: 'Guardado correctamente' })),
                 )
                 // Hand the persisted record back so callers can auto-select it.
                 onSaved?.(res.data?.data ?? res.data ?? undefined)
                 onOpenChange(false)
             } else {
-                toast.error(res.data?.message || 'Error al guardar')
+                toast.error(res.data?.message || t('dynamic.save_error', { defaultValue: 'No se pudo guardar' }))
             }
         } catch (err: any) {
-            toast.error(err?.response?.data?.message || 'Error al guardar')
+            toast.error(err?.response?.data?.message || t('dynamic.save_error', { defaultValue: 'No se pudo guardar' }))
         } finally {
             setSaving(false)
         }
@@ -716,7 +741,7 @@ export function DynamicRecordDialog({
             onOpenChange(false)
         } catch (err: any) {
             console.error('[DynamicRecordDialog] delete error:', err)
-            toast.error(err?.response?.data?.message || err?.message || 'Error al eliminar')
+            toast.error(err?.response?.data?.message || err?.message || t('dynamic.delete_error', { defaultValue: 'No se pudo eliminar el registro' }))
         } finally {
             setDeleting(false)
         }
@@ -724,11 +749,7 @@ export function DynamicRecordDialog({
 
     const title = modalMeta ? config.getTitle(modalMeta, t) : ''
 
-    const visibleFields = modalMeta?.fields?.filter(f => {
-        if (f.hidden) return false
-        if (isCreate && f.readonly) return false
-        return true
-    }) ?? []
+    const visibleFields = filterVisibleFields(modalMeta?.fields, mode)
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
@@ -877,19 +898,27 @@ interface FieldRowProps {
 }
 
 function FieldRow({ field, record, value, mode, onChange }: FieldRowProps) {
-    const isReadonly = field.readonly || mode === 'view'
+    // A `readonly` field is server/system-generated (e.g. the GitHub addon's
+    // `number`/`github_url`, filled by the API after the outbound create). On
+    // CREATE it is excluded from the form entirely (see `visibleFields`); on EDIT
+    // it stays visible but is NOT editable — rendered as a disabled, muted input
+    // so the user sees its value without being able to change it. View mode keeps
+    // the rich read-only renderer.
+    const isEditReadonly = mode === 'edit' && !!field.readonly
 
     return (
         <div className="flex flex-col gap-1.5">
             <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                 {field.label}
-                {field.required && mode !== 'view' && (
+                {field.required && mode !== 'view' && !isEditReadonly && (
                     <span className="text-destructive ml-0.5">*</span>
                 )}
             </Label>
 
-            {isReadonly ? (
+            {mode === 'view' ? (
                 <ViewValue field={field} value={value} record={record} />
+            ) : isEditReadonly ? (
+                <ReadonlyEditField field={field} value={value} />
             ) : (
                 <EditField field={field} value={value} onChange={onChange} record={record} />
             )}
@@ -897,6 +926,24 @@ function FieldRow({ field, record, value, mode, onChange }: FieldRowProps) {
     )
 }
 
+// ReadonlyEditField — the edit-mode rendering of a `readonly` (system-generated)
+// field: a disabled, muted input that shows the current value without allowing
+// edits. Booleans render as a disabled switch to match their editable
+// counterpart; everything else renders the formatted display value in a disabled
+// text input.
+export function ReadonlyEditField({ field, value }: { field: FieldDef; value: any }) {
+    if (field.type === 'boolean' || typeof value === 'boolean') {
+        return (
+            <div className="flex items-center gap-2 py-1">
+                <Switch checked={!!value} disabled />
+                <span className="text-sm text-muted-foreground">{value ? 'Sí' : 'No'}</span>
+            </div>
+        )
+    }
+    const display = formatDisplayValue(value, field)
+    return <Input value={display === '—' ? '' : display} disabled readOnly className="text-muted-foreground" />
+}
+
 // RelationViewValue — read-only FK lead. Resolves the relation's label + image
 // from (1) the sibling object the table served, then (2) the canonical options
 // endpoint, and renders an OptionLead (thumbnail / icon / color dot) + label.
@@ -975,8 +1022,22 @@ export function ViewValue({
     const timeZone = timeZoneProp ?? ctxTimeZone
     const currency = currencyProp ?? ctxCurrency
 
+    // Declarative display hint the backend stamps (mirrors the table column's
+    // `cellStyle`). The table renders each cell off `cellStyle ?? type`; the
+    // detail view keys off the SAME resolved renderer so both stay in lock-step
+    // (a `datetime` display on a numeric column, a `url` display on a text
+    // column, a `status`/`badge` pill, …).
+    const renderAs = field.cellStyle ?? field.type
+
     // created_by / avatar resolver sibling → name (+ avatar) instead of "—".
-    if (field.type === 'avatar' || field.key === 'created_by' || field.key === 'created_by_id') {
+    if (
+        field.type === 'avatar' ||
+        renderAs === 'avatar' ||
+        renderAs === 'creator' ||
+        renderAs === 'user' ||
+        field.key === 'created_by' ||
+        field.key === 'created_by_id'
+    ) {
         const user = createdBySibling(rawValue, record)
         if (user) {
             return (
@@ -1055,16 +1116,25 @@ export function ViewValue({
         return <IconNameViewValue name={value} />
     }
 
-    if (field.type === 'url' && value) {
+    // URL/link display (matches the table's `url`/`link` cell). Triggers on the
+    // stamped display type — not just the storage `type` — so a text column
+    // carrying `cellStyle:'url'` (e.g. `github_url`) renders as a clickable
+    // external link, opening in a new tab, truncated.
+    if ((renderAs === 'url' || renderAs === 'link') && value) {
+        // Shared media renderer (same as the table cell): an image URL shows a
+        // larger inline thumbnail, a file a chip, else a compact link chip with
+        // a smart label — never the raw 120-char URL.
         return (
-            <a
-                href={value}
-                target="_blank"
-                rel="noreferrer"
-                className="text-sm text-primary hover:underline truncate"
-            >
-                {value}
-            </a>
+            <div className="py-1">
+                <MediaValue
+                    url={String(value)}
+                    getImageUrl={getImageUrl}
+                    label={field.styleConfig?.label as string | undefined}
+                    icon={field.styleConfig?.icon as string | undefined}
+                    thumbHeight={200}
+                    maxLabelWidth={360}
+                />
+            </div>
         )
     }
 
@@ -1088,9 +1158,16 @@ export function ViewValue({
 
     // Date/datetime/timestamp → tz-aware format. `date` pins to UTC (calendar
     // day); instants render in the org timezone with a full-precision tooltip.
-    if (field.type === 'date' || field.type === 'datetime' || field.type === 'timestamp') {
-        const renderAs = field.type === 'date' ? 'date' : field.type
-        const formatted = formatDateCell(value, renderAs, es, timeZone)
+    // Keys off the display type (`cellStyle ?? type`) so a numeric/epoch column
+    // stamped `datetime` (e.g. `synced_at`) formats as a date, never raw digits.
+    if (
+        renderAs === 'date' ||
+        renderAs === 'datetime' ||
+        renderAs === 'timestamp' ||
+        renderAs === 'timestamptz'
+    ) {
+        const dateRenderAs = renderAs === 'date' ? 'date' : renderAs
+        const formatted = formatDateCell(value, dateRenderAs, es, timeZone)
         if (formatted) {
             return (
                 <p className="text-sm py-1" title={formatted.title}>
@@ -1101,27 +1178,56 @@ export function ViewValue({
         return <p className="text-sm py-1 text-muted-foreground">—</p>
     }
 
-    // Enum/option field with served options → colored/iconed badge using the
-    // served label (e.g. "Almacenable" instead of "storable").
+    // Enum/option field with served options → the SAME colored/iconed pill the
+    // table renders (shared `OptionBadge`): resolved color, thumbnail/icon and
+    // the localized option label (e.g. "Almacenable" instead of "storable").
     const opt = servedOption(field, value)
     if (opt) {
-        const lead: Pick<ResolvedOption, 'image' | 'color' | 'icon'> = {
-            image: opt.image ? getImageUrl(opt.image) : null,
-            color: opt.color ?? null,
-            icon: opt.icon ?? null,
-        }
         return (
-            <Badge
-                variant="secondary"
-                className="w-fit flex items-center gap-1"
-                style={opt.color && !opt.icon ? { backgroundColor: opt.color, color: '#fff', borderColor: 'transparent' } : undefined}
-            >
-                <OptionLead option={lead} size={16} />
-                {opt.label}
-            </Badge>
+            <div className="py-1">
+                <OptionBadge
+                    option={{
+                        value: String(opt.value ?? value ?? ''),
+                        label: opt.label,
+                        color: opt.color ?? undefined,
+                        icon: opt.icon ?? undefined,
+                        image: opt.image ?? undefined,
+                    }}
+                    getImageUrl={getImageUrl}
+                />
+            </div>
         )
     }
 
+    // Array of scalars / label objects (e.g. github `labels`, tags, a
+    // group-badge list) → a row of pills, mirroring the table's `tags` /
+    // `relation-badge-list` cells. Checked before the structured-object branch
+    // so a flat label array never renders as a mini-table.
+    if (
+        Array.isArray(value) &&
+        (renderAs === 'tags' ||
+            renderAs === 'relation-badge-list' ||
+            value.every((v) => v === null || typeof v !== 'object' || 'label' in v || 'name' in v))
+    ) {
+        return <BadgeListViewValue items={value} getImageUrl={getImageUrl} />
+    }
+
+    // Status / badge / select display with no served option list — a bare enum
+    // token (e.g. a kanban `stage` like "backlog"). Render a colored pill with a
+    // semantic/value-derived color and a localized-or-humanized label, matching
+    // the table's `status`/`badge` cells.
+    if (
+        (renderAs === 'status' ||
+            renderAs === 'badge' ||
+            renderAs === 'select' ||
+            renderAs === 'option') &&
+        value !== null &&
+        value !== undefined &&
+        typeof value !== 'object'
+    ) {
+        return <StatusBadgeViewValue field={field} value={value} t={t} />
+    }
+
     // Structured value (jsonb column, e.g. fiscal_data) with no label/name/title
     // to surface — render readable key/value pairs instead of falling through to
     // String(value) ("[object Object]").
@@ -1137,16 +1243,32 @@ export function ViewValue({
     }
 
     const display = formatDisplayValue(value, field)
+    // Free text may embed URLs (a github body, notes, a long-text field). Turn
+    // them into rich chips / inline thumbnails with the shared linkifier instead
+    // of showing raw URLs — the rest of the text is preserved verbatim.
+    const hasUrl = display !== '—' && /(https?:\/\/|www\.)\S/i.test(display)
 
-    if (field.type === 'textarea') {
+    if (field.type === 'textarea' || renderAs === 'textarea' || renderAs === 'long-text') {
         return (
-            <p className="text-sm whitespace-pre-wrap rounded-md bg-muted/40 p-3 min-h-[60px]">
-                {display}
+            <p className="text-sm whitespace-pre-wrap rounded-md bg-muted/40 p-3 min-h-[60px] [&_img]:my-1">
+                {hasUrl ? (
+                    <RichText text={display} getImageUrl={getImageUrl} imageHeight={200} />
+                ) : (
+                    display
+                )}
             </p>
         )
     }
 
-    return <p className="text-sm py-1">{display}</p>
+    return (
+        <p className="text-sm py-1">
+            {hasUrl ? (
+                <RichText text={display} getImageUrl={getImageUrl} imageHeight={160} />
+            ) : (
+                display
+            )}
+        </p>
+    )
 }
 
 // IconNameViewValue — read view for a column whose value is a lucide icon name
@@ -1163,6 +1285,79 @@ function IconNameViewValue({ name }: { name: string }) {
     )
 }
 
+// StatusBadgeViewValue — a bare enum/status token (no served option list) as a
+// colored pill: a semantic/value-derived color (same `statusColorFor` the table
+// uses) plus a localized-or-humanized label. Mirrors the table's `status`/
+// `badge` cell so a kanban `stage` ("backlog") reads as a colored, translated
+// badge instead of the raw token.
+function StatusBadgeViewValue({
+    field,
+    value,
+    t,
+}: {
+    field: FieldDef
+    value: any
+    t: (key: string, options?: any) => string
+}) {
+    const isDark = useIsDarkTheme()
+    const token = String(value)
+    // Prefer an explicit per-option color served on the field (metadata.stages /
+    // options), else derive a semantic color from the token.
+    const declared = field.options?.find((o) => String(o.value) === token)
+    const color = declared?.color || statusColorFor(token)
+    // Localized label: the option's already-localized label wins, then a manifest
+    // i18n key matching the raw token, then a humanized fallback.
+    const label =
+        declared?.label ?? t(token, { defaultValue: humanizeToken(token) })
+    return (
+        <div className="py-1">
+            <Badge
+                variant="outline"
+                className="border-0 flex w-fit items-center gap-1"
+                style={generateBadgeStyles(color, { isDark })}
+            >
+                {label}
+            </Badge>
+        </div>
+    )
+}
+
+// BadgeListViewValue — an array of scalars / label objects as a row of pills
+// (github `labels`, tags, a group-badge list). Objects carrying a `color` render
+// as colored `OptionBadge`s; plain strings render as neutral secondary pills.
+function BadgeListViewValue({
+    items,
+    getImageUrl,
+}: {
+    items: any[]
+    getImageUrl: GetImageUrl
+}) {
+    if (!items || items.length === 0) {
+        return <p className="text-sm py-1 text-muted-foreground">—</p>
+    }
+    return (
+        <div className="flex flex-wrap gap-1 py-1">
+            {items.map((item, i) => {
+                if (item !== null && typeof item === 'object') {
+                    const opt: DisplayOption = {
+                        value: String(item.value ?? item.id ?? item.name ?? item.label ?? i),
+                        label: String(item.label ?? item.name ?? item.value ?? ''),
+                        color: item.color ?? undefined,
+                        icon: item.icon ?? undefined,
+                        image: item.image ?? item.avatar ?? undefined,
+                    }
+                    return <OptionBadge key={i} option={opt} getImageUrl={getImageUrl} />
+                }
+                return (
+                    <Badge key={i} variant="secondary" className="w-fit">
+                        {String(item)}
+                    </Badge>
+                )
+            })}
+        </div>
+    )
+}
+
 // StructuredViewValue renders a jsonb object/array that has no resolvable label.
 // It delegates to the shared `CollectionCell` in `'inline'` mode so the detail
 // view gets the SAME pro rendering as the table: a declared `item_fields` schema
@@ -1392,6 +1587,7 @@ export function EditField({ field, value, onChange, record }: {
 }
 
 function ImageUploadField({ field: _field, value, onChange }: { field: FieldDef; value: any; onChange: (val: any) => void }) {
+    const { t } = useTranslation()
     const api = useApi()
     const model = useContext(ModelContext)
     const getImageUrl = useContext(ImageUrlContext)
@@ -1411,7 +1607,7 @@ function ImageUploadField({ field: _field, value, onChange }: { field: FieldDef;
             const url = res.data?.data?.url || res.data?.url
             if (url) onChange(url)
         } catch {
-            toast.error('Error al subir imagen')
+            toast.error(t('dynamic.image_upload_error', { defaultValue: 'No se pudo subir la imagen' }))
         } finally {
             setUploading(false)
             if (inputRef.current) inputRef.current.value = ''

package/src/display-value.tsx

@@ -0,0 +1,134 @@
+/**
+ * Shared display-value primitives.
+ *
+ * These are the building blocks the dynamic TABLE (`dynamic-columns.tsx`) uses
+ * to render "pro" cells — colored option badges, relation thumbnails, semantic
+ * status colors, dark-mode detection. They live here (instead of inline in the
+ * table) so the read-only DETAIL DIALOG (`dialogs/dynamic-record.tsx`) can reuse
+ * the EXACT same rendering. Ecosystem rule: shared primitives, zero copy-paste —
+ * table and dialog must not drift.
+ */
+import React from 'react'
+import { Avatar, AvatarImage, AvatarFallback, Badge } from '@asteby/metacore-ui'
+import {
+    generateBadgeStyles,
+    getInitials,
+    optionColor,
+} from '@asteby/metacore-ui/lib'
+import { DynamicIcon } from './dynamic-icon'
+
+/**
+ * `true` when the host document is in dark mode. Observes the `<html>` class so
+ * badge colors re-derive on theme toggle. SSR/no-DOM safe (starts light).
+ */
+export function useIsDarkTheme(): boolean {
+    const [isDark, setIsDark] = React.useState(
+        () =>
+            typeof document !== 'undefined' &&
+            document.documentElement.classList.contains('dark')
+    )
+    React.useEffect(() => {
+        if (typeof document === 'undefined') return
+        const sync = () =>
+            setIsDark(document.documentElement.classList.contains('dark'))
+        sync()
+        const observer = new MutationObserver(sync)
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        })
+        return () => observer.disconnect()
+    }, [])
+    return isDark
+}
+
+/**
+ * Semantic status → badge color. Used by the `status` cell/value when no
+ * explicit `options` color is declared. Generic, value-driven mapping.
+ */
+export function statusColorFor(value: string): string {
+    const v = value.toLowerCase()
+    if (
+        ['active', 'enabled', 'paid', 'completed', 'done', 'success', 'approved', 'open']
+            .includes(v)
+    )
+        return '#22c55e'
+    if (['pending', 'draft', 'processing', 'in_progress', 'review', 'waiting'].includes(v))
+        return '#eab308'
+    if (
+        ['inactive', 'disabled', 'cancelled', 'canceled', 'failed', 'rejected', 'error', 'closed']
+            .includes(v)
+    )
+        return '#ef4444'
+    return '#6b7280'
+}
+
+/**
+ * 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 (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.
+ */
+export 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>
+)
+
+export interface DisplayOption {
+    value: string
+    label: string
+    icon?: string
+    color?: string
+    image?: string
+}
+
+/**
+ * Colored option badge — the canonical "pro" pill for a select/status/badge
+ * value. Explicit backend `color` wins; otherwise a stable, cohesive color is
+ * derived from the option value so "dead" gray badges come alive. Inline style
+ * (hex-derived) so it works regardless of the host's tailwind safelist —
+ * addon-arbitrary classes aren't in the host scan.
+ */
+export const OptionBadge: React.FC<{
+    option: DisplayOption
+    getImageUrl?: (path: string) => string
+    /** Accepted for call-site compatibility with the table; unused (option.label wins). */
+    fallback?: string
+}> = ({ option, getImageUrl }) => {
+    const isDark = useIsDarkTheme()
+    const colorSource = option.color || optionColor(option.value || option.label)
+    const colorStyles = generateBadgeStyles(colorSource, { isDark })
+    return (
+        <Badge variant="outline" className="flex items-center gap-1 border-0" style={colorStyles}>
+            {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>
+    )
+}