@asteby/metacore-runtime-react 18.10.2 → 18.11.0

package/src/activity-timeline.tsx

@@ -0,0 +1,574 @@
+/**
+ * activity-timeline.tsx
+ *
+ * <ActivityTimeline> — global activity feed grouped by correlation_id.
+ *
+ * Events that share a correlation_id are folded into a single "operation"
+ * group (e.g. "Juan · Pedido creado · 4 cambios"). Events without a
+ * correlation_id appear as standalone entries.
+ *
+ * Filters: by model, actor, action, and date range. All client-side.
+ *
+ * Transport-agnostic: events arrive via props; column metadata is resolved
+ * per-model via the `resolveColumns(model)` injected function. No fetch.
+ */
+
+import * as React from 'react'
+import { formatDistanceToNow } from 'date-fns'
+import { es, enUS } from 'date-fns/locale'
+import type { Locale } from 'date-fns'
+import {
+    ChevronDown,
+    ChevronRight,
+    Clock,
+    Filter,
+    X,
+    Layers,
+    Activity,
+} from 'lucide-react'
+import { cn } from '@asteby/metacore-ui/lib'
+import {
+    Avatar,
+    AvatarFallback,
+    Badge,
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+    Input,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Button,
+    Separator,
+} 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 ActivityTimelineProps {
+    /**
+     * All activity events to display. The component groups, sorts, and filters
+     * them client-side — order does not matter.
+     */
+    events: ActivityEvent[]
+    /**
+     * Injectable column metadata resolver. Called once per unique model name
+     * encountered in the event list. Returns the column definitions for that
+     * model, or undefined/empty when the host has no metadata for it.
+     *
+     * The host typically implements this as a cache lookup against its
+     * MetadataService / metadata-cache store.
+     */
+    resolveColumns?: (model: string) => ColumnDefinition[] | undefined
+    /** 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
+    /**
+     * When true, the filter bar is hidden. Useful when the host already
+     * provides external filter controls and wants to feed pre-filtered events.
+     */
+    hideFilters?: boolean
+}
+
+// ---------------------------------------------------------------------------
+// Internal types
+// ---------------------------------------------------------------------------
+
+/** A group of events sharing the same correlation_id, or a standalone event. */
+interface EventGroup {
+    /** Shared correlation_id (or the single event's id for ungrouped). */
+    key: string
+    /** The "root" event — first (chronologically) in the group. */
+    root: ActivityEvent
+    /** All events in the group, sorted ascending (oldest first). */
+    events: ActivityEvent[]
+    /** Total number of changed fields across all events in the group. */
+    changedFieldCount: number
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+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'
+}
+
+const ACTION_LABELS_ES: Record<string, string> = {
+    created: 'creó',
+    create: 'creó',
+    updated: 'actualizó',
+    update: 'actualizó',
+    deleted: 'eliminó',
+    delete: 'eliminó',
+}
+
+function groupEvents(events: ActivityEvent[]): EventGroup[] {
+    const grouped = new Map<string, ActivityEvent[]>()
+
+    for (const ev of events) {
+        const key = ev.correlation_id || ev.id
+        const arr = grouped.get(key) ?? []
+        arr.push(ev)
+        grouped.set(key, arr)
+    }
+
+    const result: EventGroup[] = []
+
+    grouped.forEach((evs, key) => {
+        // Sort ascending (oldest first within a group)
+        const sorted = [...evs].sort(
+            (a, b) => new Date(a.occurred_at).getTime() - new Date(b.occurred_at).getTime(),
+        )
+        const root = sorted[0]
+
+        // Count distinct changed fields across all events in this group
+        let changedFieldCount = 0
+        for (const ev of sorted) {
+            if (ev.changes) changedFieldCount += Object.keys(ev.changes).length
+            else if (ev.before || ev.after) {
+                const keys = new Set([...Object.keys(ev.before ?? {}), ...Object.keys(ev.after ?? {})])
+                changedFieldCount += keys.size
+            }
+        }
+
+        result.push({ key, root, events: sorted, changedFieldCount })
+    })
+
+    // Sort groups: most recent root event first
+    result.sort((a, b) => new Date(b.root.occurred_at).getTime() - new Date(a.root.occurred_at).getTime())
+
+    return result
+}
+
+function uniqueValues<K extends keyof ActivityEvent>(
+    events: ActivityEvent[],
+    key: K,
+): string[] {
+    const set = new Set<string>()
+    for (const ev of events) {
+        const v = ev[key]
+        if (v !== undefined && v !== null && v !== '') set.add(String(v))
+    }
+    return Array.from(set).sort()
+}
+
+// ---------------------------------------------------------------------------
+// Component: individual group card
+// ---------------------------------------------------------------------------
+
+interface GroupCardProps {
+    group: EventGroup
+    resolveColumns: (model: string) => ColumnDefinition[] | undefined
+    timeZone?: string
+    currency?: string
+    locale: string
+    dateLocale: Locale
+    isOpen: boolean
+    onToggle: () => void
+}
+
+const GroupCard: React.FC<GroupCardProps> = ({
+    group,
+    resolveColumns,
+    timeZone,
+    currency,
+    locale,
+    dateLocale,
+    isOpen,
+    onToggle,
+}) => {
+    const { root, events, changedFieldCount } = group
+    const isMulti = events.length > 1
+    const actor = root.actor_label || root.actor_id || 'Sistema'
+    const dotColor = actionDotColor(root.action)
+
+    const timeAgo = (() => {
+        try {
+            return formatDistanceToNow(new Date(root.occurred_at), { addSuffix: true, locale: dateLocale })
+        } catch {
+            return root.occurred_at
+        }
+    })()
+
+    const fullDate = (() => {
+        try {
+            return new Date(root.occurred_at).toLocaleString(locale === 'en' ? 'en-US' : 'es-MX', {
+                ...(timeZone ? { timeZone } : {}),
+                dateStyle: 'medium',
+                timeStyle: 'short',
+            })
+        } catch {
+            return root.occurred_at
+        }
+    })()
+
+    const summaryLine = root.summary
+        ? root.summary
+        : `${actor} ${ACTION_LABELS_ES[root.action.toLowerCase()] ?? root.action} ${root.model}`
+
+    return (
+        <Collapsible open={isOpen} onOpenChange={onToggle}>
+            <div className="relative">
+                {/* Timeline dot */}
+                <span
+                    className="absolute -left-5 top-4 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">
+                    {/* Group header */}
+                    <CollapsibleTrigger asChild>
+                        <button
+                            type="button"
+                            className="w-full flex items-start gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors"
+                        >
+                            <Avatar className="h-7 w-7 rounded-full shrink-0 mt-0.5">
+                                <AvatarFallback className="text-[9px] font-bold bg-primary/10 text-primary">
+                                    {getInitials(actor)}
+                                </AvatarFallback>
+                            </Avatar>
+
+                            <div className="flex-1 min-w-0">
+                                {/* Summary line */}
+                                <p className="text-sm font-medium text-foreground truncate" title={summaryLine}>
+                                    {summaryLine}
+                                </p>
+
+                                {/* Meta row */}
+                                <div className="flex items-center gap-2 mt-1 flex-wrap">
+                                    <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                                        <Clock className="h-3 w-3 opacity-60 shrink-0" />
+                                        <span title={fullDate}>{timeAgo}</span>
+                                    </span>
+
+                                    <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4">
+                                        {root.model}
+                                    </Badge>
+
+                                    {isMulti && (
+                                        <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                                            <Layers className="h-3 w-3 opacity-60 shrink-0" />
+                                            {events.length} eventos
+                                        </span>
+                                    )}
+
+                                    {changedFieldCount > 0 && (
+                                        <span className="text-xs text-muted-foreground">
+                                            {changedFieldCount} campo{changedFieldCount !== 1 ? 's' : ''}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+
+                            <span className="shrink-0 text-muted-foreground mt-1">
+                                {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                            </span>
+                        </button>
+                    </CollapsibleTrigger>
+
+                    {/* Expanded: one diff per event in the group */}
+                    <CollapsibleContent>
+                        <div className="border-t border-border/40 divide-y divide-border/30">
+                            {events.map((ev, idx) => {
+                                const cols = resolveColumns(ev.model)
+                                const evActor = ev.actor_label || ev.actor_id || 'Sistema'
+                                return (
+                                    <div key={ev.id} className="px-4 py-3 space-y-2">
+                                        {/* Show sub-actor + model when group has multiple events */}
+                                        {isMulti && (
+                                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                                <span className="font-medium text-foreground/70">{ev.model}</span>
+                                                <span>·</span>
+                                                <span>{evActor}</span>
+                                                {idx > 0 && (
+                                                    <>
+                                                        <span>·</span>
+                                                        <span title={ev.occurred_at}>
+                                                            {(() => {
+                                                                try {
+                                                                    return formatDistanceToNow(new Date(ev.occurred_at), { addSuffix: true, locale: dateLocale })
+                                                                } catch {
+                                                                    return ev.occurred_at
+                                                                }
+                                                            })()}
+                                                        </span>
+                                                    </>
+                                                )}
+                                            </div>
+                                        )}
+                                        <ActivityDiff
+                                            event={ev}
+                                            columns={cols}
+                                            timeZone={timeZone}
+                                            currency={currency}
+                                            locale={locale}
+                                        />
+                                    </div>
+                                )
+                            })}
+                        </div>
+                    </CollapsibleContent>
+                </div>
+            </div>
+        </Collapsible>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+/**
+ * Global activity feed. Groups correlated events, renders a vertical timeline
+ * with filter controls (model, actor, action, date range).
+ *
+ * The `resolveColumns` function is injected by the host. It maps a model name
+ * to its `ColumnDefinition[]` (e.g. from the host's metadata-cache store).
+ * When omitted or when it returns nothing, field keys are shown raw.
+ */
+export const ActivityTimeline: React.FC<ActivityTimelineProps> = ({
+    events,
+    resolveColumns = () => undefined,
+    timeZone,
+    currency,
+    locale = 'es',
+    className,
+    hideFilters = false,
+}) => {
+    const dateLocale = locale === 'en' ? enUS : es
+
+    // -----------------------------------------------------------------------
+    // Filter state
+    // -----------------------------------------------------------------------
+
+    const [filterModel, setFilterModel] = React.useState<string>('__all__')
+    const [filterActor, setFilterActor] = React.useState<string>('__all__')
+    const [filterAction, setFilterAction] = React.useState<string>('__all__')
+    const [filterFrom, setFilterFrom] = React.useState<string>('')
+    const [filterTo, setFilterTo] = React.useState<string>('')
+
+    const models = React.useMemo(() => uniqueValues(events, 'model'), [events])
+    const actors = React.useMemo(
+        () => uniqueValues(events, 'actor_label').filter(Boolean),
+        [events],
+    )
+    const actions = React.useMemo(() => uniqueValues(events, 'action'), [events])
+
+    const hasFilters =
+        filterModel !== '__all__' ||
+        filterActor !== '__all__' ||
+        filterAction !== '__all__' ||
+        filterFrom !== '' ||
+        filterTo !== ''
+
+    const clearFilters = () => {
+        setFilterModel('__all__')
+        setFilterActor('__all__')
+        setFilterAction('__all__')
+        setFilterFrom('')
+        setFilterTo('')
+    }
+
+    // -----------------------------------------------------------------------
+    // Filtered + grouped events
+    // -----------------------------------------------------------------------
+
+    const filtered = React.useMemo(() => {
+        return events.filter((ev) => {
+            if (filterModel !== '__all__' && ev.model !== filterModel) return false
+            if (filterActor !== '__all__' && ev.actor_label !== filterActor) return false
+            if (filterAction !== '__all__' && ev.action !== filterAction) return false
+            if (filterFrom) {
+                const from = new Date(filterFrom)
+                if (new Date(ev.occurred_at) < from) return false
+            }
+            if (filterTo) {
+                const to = new Date(filterTo)
+                // inclusive end-of-day
+                to.setHours(23, 59, 59, 999)
+                if (new Date(ev.occurred_at) > to) return false
+            }
+            return true
+        })
+    }, [events, filterModel, filterActor, filterAction, filterFrom, filterTo])
+
+    const groups = React.useMemo(() => groupEvents(filtered), [filtered])
+
+    // -----------------------------------------------------------------------
+    // Open/close state (first group open by default)
+    // -----------------------------------------------------------------------
+
+    const [openKeys, setOpenKeys] = React.useState<Set<string>>(() =>
+        groups.length > 0 ? new Set([groups[0].key]) : new Set(),
+    )
+
+    // Reset open state when filtered groups change substantially
+    const prevGroupKeysRef = React.useRef<string>('')
+    React.useEffect(() => {
+        const current = groups.map((g) => g.key).join(',')
+        if (current !== prevGroupKeysRef.current) {
+            prevGroupKeysRef.current = current
+            setOpenKeys(groups.length > 0 ? new Set([groups[0].key]) : new Set())
+        }
+    }, [groups])
+
+    const toggleGroup = (key: string) => {
+        setOpenKeys((prev) => {
+            const next = new Set(prev)
+            if (next.has(key)) next.delete(key)
+            else next.add(key)
+            return next
+        })
+    }
+
+    // -----------------------------------------------------------------------
+    // Render
+    // -----------------------------------------------------------------------
+
+    return (
+        <div className={cn('space-y-4', className)}>
+            {/* Filter bar */}
+            {!hideFilters && (
+                <div className="rounded-lg border border-border/60 bg-muted/20 p-3 space-y-3">
+                    <div className="flex items-center gap-2">
+                        <Filter className="h-4 w-4 text-muted-foreground shrink-0" />
+                        <span className="text-sm font-medium text-muted-foreground">Filtros</span>
+                        {hasFilters && (
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                className="ml-auto h-7 px-2 text-xs"
+                                onClick={clearFilters}
+                            >
+                                <X className="h-3 w-3 mr-1" />
+                                Limpiar
+                            </Button>
+                        )}
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+                        {/* Model filter */}
+                        {models.length > 1 && (
+                            <Select value={filterModel} onValueChange={setFilterModel}>
+                                <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="Módulo" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="__all__">Todos los módulos</SelectItem>
+                                    {models.map((m) => (
+                                        <SelectItem key={m} value={m}>{m}</SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        )}
+
+                        {/* Actor filter */}
+                        {actors.length > 1 && (
+                            <Select value={filterActor} onValueChange={setFilterActor}>
+                                <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="Usuario" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="__all__">Todos los usuarios</SelectItem>
+                                    {actors.map((a) => (
+                                        <SelectItem key={a} value={a}>{a}</SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        )}
+
+                        {/* Action filter */}
+                        {actions.length > 1 && (
+                            <Select value={filterAction} onValueChange={setFilterAction}>
+                                <SelectTrigger className="h-8 text-xs">
+                                    <SelectValue placeholder="Acción" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="__all__">Todas las acciones</SelectItem>
+                                    {actions.map((a) => (
+                                        <SelectItem key={a} value={a}>{a}</SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        )}
+
+                        {/* Date range */}
+                        <div className="col-span-2 sm:col-span-1 flex gap-1">
+                            <Input
+                                type="date"
+                                value={filterFrom}
+                                onChange={(e) => setFilterFrom(e.target.value)}
+                                className="h-8 text-xs"
+                                placeholder="Desde"
+                                title="Desde"
+                            />
+                            <Input
+                                type="date"
+                                value={filterTo}
+                                onChange={(e) => setFilterTo(e.target.value)}
+                                className="h-8 text-xs"
+                                placeholder="Hasta"
+                                title="Hasta"
+                            />
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Timeline */}
+            {groups.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-16 gap-3 text-muted-foreground">
+                    <Activity className="h-10 w-10 opacity-30" />
+                    <p className="text-sm">
+                        {hasFilters ? 'Sin resultados con los filtros actuales.' : 'Sin actividad registrada.'}
+                    </p>
+                </div>
+            ) : (
+                <div className="relative pl-5 space-y-3">
+                    {/* Vertical timeline line */}
+                    <span
+                        className="absolute left-2 top-2 bottom-2 w-px bg-border"
+                        aria-hidden="true"
+                    />
+
+                    {groups.map((group) => (
+                        <GroupCard
+                            key={group.key}
+                            group={group}
+                            resolveColumns={resolveColumns}
+                            timeZone={timeZone}
+                            currency={currency}
+                            locale={locale}
+                            dateLocale={dateLocale}
+                            isOpen={openKeys.has(group.key)}
+                            onToggle={() => toggleGroup(group.key)}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}