@asteby/metacore-runtime-react 18.10.1 → 18.11.0

package/src/activity-value-renderer.tsx

@@ -0,0 +1,371 @@
+/**
+ * activity-value-renderer.tsx
+ *
+ * Pure, transport-agnostic value renderer for Activity / Time Machine diffs.
+ * Reuses the same display-type logic as dynamic-columns.tsx (currency, status,
+ * date, boolean, badge, relation, url, tags, color, number, percent) so the
+ * diff cells and the table cells are always consistent.
+ *
+ * Kept in its own module so it has no dependency on tanstack-table or the
+ * column-factory machinery — only React + metacore-ui primitives.
+ */
+
+import * as React from 'react'
+import * as icons from 'lucide-react'
+import { es, enUS } from 'date-fns/locale'
+import {
+    Badge,
+    Avatar,
+    AvatarImage,
+    AvatarFallback,
+} from '@asteby/metacore-ui/primitives'
+import { generateBadgeStyles, getInitials, optionColor, relationChipStyles } from '@asteby/metacore-ui/lib'
+import type { ColumnDefinition } from './types'
+import { formatDateCell } from './dynamic-columns'
+import { humanizeToken } from './dynamic-columns-helpers'
+
+// ---------------------------------------------------------------------------
+// Internal helpers (mirror dynamic-columns.tsx private helpers)
+// ---------------------------------------------------------------------------
+
+const styleCfg = (col: ColumnDefinition, ...keys: string[]): any => {
+    const cfg = col.styleConfig
+    if (!cfg) return undefined
+    for (const k of keys) {
+        if (cfg[k] !== undefined && cfg[k] !== null) return cfg[k]
+    }
+    return undefined
+}
+
+const formatNumber = (value: number, opts: Intl.NumberFormatOptions, locale?: string) =>
+    new Intl.NumberFormat(locale || undefined, opts).format(value)
+
+const 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'
+}
+
+const useIsDarkTheme = () => {
+    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'))
+        const observer = new MutationObserver(sync)
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+        return () => observer.disconnect()
+    }, [])
+    return isDark
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface ActivityValueRendererProps {
+    /** The raw value to display (from before/after/changes). */
+    value: unknown
+    /** Column metadata for display formatting. Optional — falls back to string. */
+    col?: ColumnDefinition
+    /** IANA timezone (org config) for datetime cells. */
+    timeZone?: string
+    /** ISO 4217 currency for money cells. */
+    currency?: string
+    /** BCP-47 locale tag (e.g. 'es', 'en'). Defaults to 'es'. */
+    locale?: string
+}
+
+/**
+ * Renders a single field value from an activity event using the same display
+ * type logic as `defaultGetDynamicColumns`. Pass a `ColumnDefinition` to get
+ * rich formatting (currency, status badge, date, boolean, etc.); without it
+ * the component falls back to a plain string representation.
+ */
+export const ActivityValueRenderer: React.FC<ActivityValueRendererProps> = ({
+    value,
+    col,
+    timeZone,
+    currency,
+    locale = 'es',
+}) => {
+    const isDark = useIsDarkTheme()
+    const dateLocale = locale === 'en' ? enUS : es
+
+    // null / undefined → dash
+    if (value === null || value === undefined || value === '') {
+        return <span className="text-muted-foreground">—</span>
+    }
+
+    // No column metadata → plain string
+    if (!col) {
+        if (typeof value === 'object') {
+            return (
+                <span className="text-muted-foreground text-xs font-mono">
+                    {JSON.stringify(value)}
+                </span>
+            )
+        }
+        return <span className="font-medium text-sm">{String(value)}</span>
+    }
+
+    const renderAs = col.cellStyle ?? col.type
+
+    // -----------------------------------------------------------------------
+    // Badge / Status / Select / Option
+    // -----------------------------------------------------------------------
+
+    if (renderAs === 'badge' || renderAs === 'status' || renderAs === 'select' || renderAs === 'option') {
+        const sv = String(value)
+        const option = col.options?.find((o) => o.value === sv)
+        if (option) {
+            const colorSource = option.color || optionColor(option.value || option.label)
+            const styles = generateBadgeStyles(colorSource, { isDark })
+            return (
+                <Badge variant="outline" className="border-0" style={styles}>
+                    {option.label}
+                </Badge>
+            )
+        }
+        if (renderAs === 'status') {
+            const styles = generateBadgeStyles(statusColorFor(sv), { isDark })
+            return (
+                <Badge variant="outline" className="border-0" style={styles}>
+                    {humanizeToken(sv)}
+                </Badge>
+            )
+        }
+        return <Badge variant="outline">{humanizeToken(sv)}</Badge>
+    }
+
+    // -----------------------------------------------------------------------
+    // Date / Datetime / Timestamp
+    // -----------------------------------------------------------------------
+
+    if (['date', 'datetime', 'timestamp', 'timestamptz'].includes(renderAs ?? '')) {
+        const formatted = formatDateCell(value, renderAs, dateLocale, timeZone)
+        if (!formatted) return <span className="text-muted-foreground">—</span>
+        return (
+            <span
+                className="inline-flex items-center gap-1 text-sm text-muted-foreground"
+                title={formatted.title}
+            >
+                <icons.Calendar className="h-3 w-3 opacity-60" />
+                {formatted.display}
+            </span>
+        )
+    }
+
+    // -----------------------------------------------------------------------
+    // Boolean
+    // -----------------------------------------------------------------------
+
+    if (renderAs === 'boolean') {
+        return (
+            <span className="inline-flex items-center gap-1">
+                {value ? (
+                    <icons.Check className="h-3.5 w-3.5 text-green-500" />
+                ) : (
+                    <icons.Minus className="h-3.5 w-3.5 text-muted-foreground" />
+                )}
+                <span className="text-sm text-muted-foreground">{value ? 'Sí' : 'No'}</span>
+            </span>
+        )
+    }
+
+    // -----------------------------------------------------------------------
+    // Currency
+    // -----------------------------------------------------------------------
+
+    if (renderAs === 'currency') {
+        const num = typeof value === 'number' ? value : Number(value)
+        if (isNaN(num)) return <span className="text-muted-foreground">—</span>
+        const decimals = styleCfg(col, 'decimals') ?? 2
+        const curr = styleCfg(col, 'currency') || currency || 'USD'
+        return (
+            <span className="font-medium tabular-nums text-sm">
+                {formatNumber(num, { style: 'currency', currency: curr, minimumFractionDigits: decimals, maximumFractionDigits: decimals }, locale)}
+            </span>
+        )
+    }
+
+    // -----------------------------------------------------------------------
+    // Number / Percent / Progress
+    // -----------------------------------------------------------------------
+
+    if (renderAs === 'number') {
+        const num = typeof value === 'number' ? value : Number(value)
+        if (isNaN(num)) return <span className="text-muted-foreground">—</span>
+        const decimals = styleCfg(col, 'decimals')
+        return (
+            <span className="font-medium tabular-nums text-sm">
+                {formatNumber(
+                    num,
+                    decimals !== undefined ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals } : {},
+                    locale,
+                )}
+            </span>
+        )
+    }
+
+    if (renderAs === 'percent' || renderAs === 'progress') {
+        const num = typeof value === 'number' ? value : Number(value)
+        if (isNaN(num)) return <span className="text-muted-foreground">—</span>
+        return (
+            <span className="font-medium tabular-nums text-sm text-muted-foreground">
+                {Math.round(Math.max(0, Math.min(100, num)))}%
+            </span>
+        )
+    }
+
+    // -----------------------------------------------------------------------
+    // Tags
+    // -----------------------------------------------------------------------
+
+    if (renderAs === 'tags') {
+        const list: string[] = Array.isArray(value)
+            ? value.map(String)
+            : String(value).split(',').map((s) => s.trim()).filter(Boolean)
+        if (list.length === 0) return <span className="text-muted-foreground">—</span>
+        return (
+            <span className="inline-flex flex-wrap gap-1">
+                {list.map((tag, i) => (
+                    <Badge key={i} variant="secondary" className="px-1.5 py-0 text-[10px]">
+                        {tag}
+                    </Badge>
+                ))}
+            </span>
+        )
+    }
+
+    // -----------------------------------------------------------------------
+    // Color
+    // -----------------------------------------------------------------------
+
+    if (renderAs === 'color') {
+        const hex = String(value)
+        return (
+            <span className="inline-flex items-center gap-1.5">
+                <span className="h-3.5 w-3.5 rounded border border-border/60 shrink-0" style={{ background: hex }} />
+                <code className="font-mono text-xs text-muted-foreground">{hex}</code>
+            </span>
+        )
+    }
+
+    // -----------------------------------------------------------------------
+    // URL / Link
+    // -----------------------------------------------------------------------
+
+    if (renderAs === 'url' || renderAs === 'link') {
+        const urlStr = String(value)
+        const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`
+        let label: string
+        try { label = new URL(href).hostname } catch { label = urlStr }
+        return (
+            <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <icons.ExternalLink className="h-3 w-3 shrink-0" />
+                <span className="truncate" style={{ maxWidth: 200 }}>{label}</span>
+            </a>
+        )
+    }
+
+    // -----------------------------------------------------------------------
+    // Email
+    // -----------------------------------------------------------------------
+
+    if (renderAs === 'email') {
+        const email = String(value)
+        return (
+            <a
+                href={`mailto:${email}`}
+                className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <icons.Mail className="h-3 w-3 shrink-0" />
+                <span className="truncate" style={{ maxWidth: 200 }}>{email}</span>
+            </a>
+        )
+    }
+
+    // -----------------------------------------------------------------------
+    // Relation chip (FK / reference)
+    // -----------------------------------------------------------------------
+
+    if (renderAs === 'relation' || renderAs === 'reference' || col.ref) {
+        const sv = String(value)
+        const chipStyles = relationChipStyles(sv, { isDark })
+        return (
+            <span
+                className="inline-flex items-center rounded-md px-2 py-0.5 text-sm font-medium"
+                style={{ ...chipStyles, maxWidth: 180 }}
+                title={sv}
+            >
+                <span className="truncate">{sv}</span>
+            </span>
+        )
+    }
+
+    // -----------------------------------------------------------------------
+    // Creator / User / Avatar — these carry an object (resolved by the backend);
+    // in a diff snapshot the value is likely a string (name/email) or the object.
+    // -----------------------------------------------------------------------
+
+    if (renderAs === 'creator' || renderAs === 'user' || renderAs === 'avatar' || renderAs === 'search') {
+        const name =
+            typeof value === 'object' && value !== null
+                ? String((value as any).name ?? (value as any).label ?? JSON.stringify(value))
+                : String(value)
+        return (
+            <span className="inline-flex items-center gap-1.5">
+                <Avatar className="h-5 w-5 rounded-full">
+                    <AvatarImage src="" alt={name} />
+                    <AvatarFallback className="text-[8px] font-bold bg-primary/10 text-primary">
+                        {getInitials(name)}
+                    </AvatarFallback>
+                </Avatar>
+                <span className="text-sm font-medium truncate" style={{ maxWidth: 180 }}>{name}</span>
+            </span>
+        )
+    }
+
+    // -----------------------------------------------------------------------
+    // Code / truncate-text / phone
+    // -----------------------------------------------------------------------
+
+    if (renderAs === 'code' || renderAs === 'truncate-text') {
+        const sv = String(value)
+        const maxLength = styleCfg(col, 'max_length', 'maxLength')
+        const display = maxLength && sv.length > maxLength ? `${sv.slice(0, maxLength)}…` : sv
+        return <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{display}</code>
+    }
+
+    // -----------------------------------------------------------------------
+    // Generic object fallback
+    // -----------------------------------------------------------------------
+
+    if (typeof value === 'object') {
+        return (
+            <span className="text-muted-foreground text-xs font-mono">
+                {JSON.stringify(value)}
+            </span>
+        )
+    }
+
+    // -----------------------------------------------------------------------
+    // Plain text fallback
+    // -----------------------------------------------------------------------
+
+    return <span className="font-medium text-sm">{String(value)}</span>
+}

package/src/dynamic-table.tsx

@@ -755,7 +755,7 @@ export function DynamicTable({
                     a 7-column table forces a wide horizontal scroll there, so we
                     render a card-per-row list instead (see MobileCards below). */}
                 <div className='hidden sm:block flex-1 min-h-0 overflow-auto border rounded-md bg-card'>
-                    <Table noWrapper className="min-w-max w-full">
+                    <Table noWrapper className={cn('min-w-max w-full', aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && 'h-full')}>
                         <TableHeader className='sticky top-0 z-10'>
                             {table.getHeaderGroups().map((headerGroup: HeaderGroup<any>) => (
                                 <TableRow key={headerGroup.id} className='border-b-0 hover:bg-transparent'>
@@ -779,7 +779,8 @@ export function DynamicTable({
                             {loadingData && data.length === 0 ? (
                                 <TableSkeleton />
                             ) : table.getRowModel().rows?.length ? (
-                                table.getRowModel().rows.map((row: Row<any>) => (
+                                <>
+                                    {table.getRowModel().rows.map((row: Row<any>) => (
                                     <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
                                         {row.getVisibleCells().map((cell: Cell<any, unknown>) => {
                                             const isActionsColumn = cell.column.id === 'actions'
@@ -794,7 +795,16 @@ export function DynamicTable({
                                             )
                                         })}
                                     </TableRow>
-                                ))
+                                    ))}
+                                    {/* Spacer row: absorbs the table's leftover height (table is
+                                        h-full when a footer shows) so the totals footer is pinned to
+                                        the bottom of the box even with only a few rows. */}
+                                    {aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && (
+                                        <TableRow className='border-0 hover:bg-transparent'>
+                                            <TableCell colSpan={columns.length} className='h-full p-0' />
+                                        </TableRow>
+                                    )}
+                                </>
                             ) : (
                                 <TableRow className='border-b-0 hover:bg-transparent'>
                                     <TableCell colSpan={columns.length} className='h-full p-0'>

package/src/index.ts

@@ -132,3 +132,20 @@ export {
     type OrgConfigBridge,
 } from './use-org-config-bridge'
 export { registerValidator } from './dynamic-form-schema'
+export {
+    ActivityValueRenderer,
+    type ActivityValueRendererProps,
+} from './activity-value-renderer'
+export {
+    ActivityDiff,
+    type ActivityEvent,
+    type ActivityDiffProps,
+} from './activity-diff'
+export {
+    RecordHistory,
+    type RecordHistoryProps,
+} from './record-history'
+export {
+    ActivityTimeline,
+    type ActivityTimelineProps,
+} from './activity-timeline'

package/src/record-history.tsx

@@ -0,0 +1,243 @@
+/**
+ * record-history.tsx
+ *
+ * <RecordHistory> — chronological timeline of all ActivityEvents for a single
+ * record. Most recent event first. Each event is shown as a collapsible card
+ * with actor, relative date, and the <ActivityDiff> inline.
+ *
+ * Intended to be embedded in a record dialog tab ("Historial").
+ *
+ * Transport-agnostic: events and column metadata arrive via props. No fetching.
+ */
+
+import * as React from 'react'
+import { formatDistanceToNow } from 'date-fns'
+import { es, enUS } from 'date-fns/locale'
+import { ChevronDown, ChevronRight, User, Clock } from 'lucide-react'
+import { cn } from '@asteby/metacore-ui/lib'
+import {
+    Avatar,
+    AvatarFallback,
+    Badge,
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from '@asteby/metacore-ui/primitives'
+import { getInitials } from '@asteby/metacore-ui/lib'
+import type { ColumnDefinition } from './types'
+import type { ActivityEvent } from './activity-diff'
+import { ActivityDiff } from './activity-diff'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface RecordHistoryProps {
+    /**
+     * All activity events for the record, in any order. The component sorts
+     * them chronologically (most recent first).
+     */
+    events: ActivityEvent[]
+    /**
+     * Column metadata for the record's model. Forwarded to <ActivityDiff> so
+     * field labels and display types are resolved correctly.
+     */
+    columns?: ColumnDefinition[]
+    /** IANA timezone for datetime cells. */
+    timeZone?: string
+    /** ISO 4217 currency for money cells. */
+    currency?: string
+    /** BCP-47 locale. Defaults to 'es'. */
+    locale?: string
+    /** Class applied to the root element. */
+    className?: string
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const ACTION_LABELS: Record<string, string> = {
+    created: 'Creó el registro',
+    create: 'Creó el registro',
+    updated: 'Actualizó el registro',
+    update: 'Actualizó el registro',
+    deleted: 'Eliminó el registro',
+    delete: 'Eliminó el registro',
+}
+
+function actionLabel(action: string): string {
+    return ACTION_LABELS[action.toLowerCase()] ?? action
+}
+
+const ACTION_DOT_COLOR: Record<string, string> = {
+    created: '#22c55e',
+    create: '#22c55e',
+    updated: '#eab308',
+    update: '#eab308',
+    deleted: '#ef4444',
+    delete: '#ef4444',
+}
+
+function actionDotColor(action: string): string {
+    return ACTION_DOT_COLOR[action.toLowerCase()] ?? '#6b7280'
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Shows the full activity history of a single record as a vertical timeline.
+ * Each event is collapsible — the header shows actor + time; expanding reveals
+ * the <ActivityDiff> with field-level changes.
+ */
+export const RecordHistory: React.FC<RecordHistoryProps> = ({
+    events,
+    columns,
+    timeZone,
+    currency,
+    locale = 'es',
+    className,
+}) => {
+    const dateLocale = locale === 'en' ? enUS : es
+
+    // Sort: most recent first
+    const sorted = React.useMemo(
+        () => [...events].sort((a, b) => new Date(b.occurred_at).getTime() - new Date(a.occurred_at).getTime()),
+        [events],
+    )
+
+    // Expand the most-recent event by default
+    const [openIds, setOpenIds] = React.useState<Set<string>>(() =>
+        sorted.length > 0 ? new Set([sorted[0].id]) : new Set(),
+    )
+
+    const toggle = (id: string) => {
+        setOpenIds((prev) => {
+            const next = new Set(prev)
+            if (next.has(id)) next.delete(id)
+            else next.add(id)
+            return next
+        })
+    }
+
+    if (sorted.length === 0) {
+        return (
+            <div className={cn('flex flex-col items-center justify-center py-12 gap-2 text-muted-foreground', className)}>
+                <Clock className="h-8 w-8 opacity-40" />
+                <p className="text-sm">Sin historial de cambios.</p>
+            </div>
+        )
+    }
+
+    return (
+        <div className={cn('relative pl-5', className)}>
+            {/* Vertical line */}
+            <span
+                className="absolute left-2 top-2 bottom-2 w-px bg-border"
+                aria-hidden="true"
+            />
+
+            <div className="space-y-3">
+                {sorted.map((event) => {
+                    const isOpen = openIds.has(event.id)
+                    const dotColor = actionDotColor(event.action)
+                    const actor = event.actor_label || event.actor_id || 'Sistema'
+                    const timeAgo = (() => {
+                        try {
+                            return formatDistanceToNow(new Date(event.occurred_at), { addSuffix: true, locale: dateLocale })
+                        } catch {
+                            return event.occurred_at
+                        }
+                    })()
+                    const fullDate = (() => {
+                        try {
+                            return new Date(event.occurred_at).toLocaleString(locale === 'en' ? 'en-US' : 'es-MX', {
+                                ...(timeZone ? { timeZone } : {}),
+                                dateStyle: 'medium',
+                                timeStyle: 'short',
+                            })
+                        } catch {
+                            return event.occurred_at
+                        }
+                    })()
+
+                    return (
+                        <Collapsible key={event.id} open={isOpen} onOpenChange={() => toggle(event.id)}>
+                            <div className="relative">
+                                {/* Timeline dot */}
+                                <span
+                                    className="absolute -left-5 top-3.5 h-2.5 w-2.5 rounded-full border-2 border-background -translate-x-[4px]"
+                                    style={{ background: dotColor }}
+                                    aria-hidden="true"
+                                />
+
+                                <div className="rounded-lg border border-border/60 bg-card overflow-hidden">
+                                    {/* Event header — always visible */}
+                                    <CollapsibleTrigger asChild>
+                                        <button
+                                            type="button"
+                                            className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors"
+                                        >
+                                            {/* Actor avatar */}
+                                            <Avatar className="h-7 w-7 rounded-full shrink-0">
+                                                <AvatarFallback className="text-[9px] font-bold bg-primary/10 text-primary">
+                                                    {getInitials(actor)}
+                                                </AvatarFallback>
+                                            </Avatar>
+
+                                            <div className="flex-1 min-w-0">
+                                                <div className="flex items-center gap-2 flex-wrap">
+                                                    <span className="text-sm font-semibold text-foreground truncate">
+                                                        {actor}
+                                                    </span>
+                                                    <span className="text-sm text-muted-foreground">
+                                                        {actionLabel(event.action)}
+                                                    </span>
+                                                </div>
+                                                <div className="flex items-center gap-1.5 mt-0.5">
+                                                    <Clock className="h-3 w-3 text-muted-foreground/60 shrink-0" />
+                                                    <span className="text-xs text-muted-foreground" title={fullDate}>
+                                                        {timeAgo}
+                                                    </span>
+                                                    {event.addon_key && (
+                                                        <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4 ml-1">
+                                                            {event.addon_key}
+                                                        </Badge>
+                                                    )}
+                                                </div>
+                                            </div>
+
+                                            {/* Expand/collapse chevron */}
+                                            <span className="shrink-0 text-muted-foreground">
+                                                {isOpen ? (
+                                                    <ChevronDown className="h-4 w-4" />
+                                                ) : (
+                                                    <ChevronRight className="h-4 w-4" />
+                                                )}
+                                            </span>
+                                        </button>
+                                    </CollapsibleTrigger>
+
+                                    {/* Diff — revealed when expanded */}
+                                    <CollapsibleContent>
+                                        <div className="border-t border-border/40 px-4 py-3">
+                                            <ActivityDiff
+                                                event={event}
+                                                columns={columns}
+                                                timeZone={timeZone}
+                                                currency={currency}
+                                                locale={locale}
+                                            />
+                                        </div>
+                                    </CollapsibleContent>
+                                </div>
+                            </div>
+                        </Collapsible>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}