@asteby/metacore-runtime-react 18.13.0 → 18.13.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 18.13.2
+
+### Patch Changes
+
+- b37e1d7: RecordHistory: event headers show the actor's photo, not just initials — `ActivityEvent` gains `actor_avatar` and the component renders it via the new `resolveAvatarUrl` prop (host resolves the storage path, e.g. ops' `getStorageUrl(path, 'avatars')`; identity fallback for absolute paths).
+
+## 18.13.1
+
+### Patch Changes
+
+- 6b8f7b2: ActivityDiff: drop noise rows from history diffs — raw FK keys (`created_by_id`) are hidden when their resolved sibling (`created_by: {name,…}`) is present in the same snapshot (covers before/after and the changes {from,to} shape), and `deleted_at` joins the meta-key filter alongside id/created_at/updated_at/organization_id.
+
 ## 18.13.0
 
 ### Minor Changes

package/dist/activity-diff.d.ts

@@ -25,6 +25,8 @@ export interface ActivityEvent {
     correlation_id?: string | null;
     actor_id?: string | null;
     actor_label?: string | null;
+    /** Storage path of the actor's avatar image, when the backend resolves one. */
+    actor_avatar?: string | null;
     addon_key: string;
     model: string;
     record_id: string;

package/dist/activity-diff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"activity-diff.d.ts","sourceRoot":"","sources":["../src/activity-diff.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAO/C;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,EAAE,EAAE,OAAO,CAAA;KAAE,CAAC,GAAG,IAAI,CAAA;IAC/D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,iBAAiB;IAC9B,oCAAoC;IACpC,KAAK,EAAE,aAAa,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAiFD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmJpD,CAAA"}
+{"version":3,"file":"activity-diff.d.ts","sourceRoot":"","sources":["../src/activity-diff.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAO/C;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,EAAE,EAAE,OAAO,CAAA;KAAE,CAAC,GAAG,IAAI,CAAA;IAC/D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,iBAAiB;IAC9B,oCAAoC;IACpC,KAAK,EAAE,aAAa,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAuGD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmJpD,CAAA"}

package/dist/activity-diff.js

@@ -23,20 +23,42 @@ import { ActivityValueRenderer } from './activity-value-renderer';
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
+// Meta-level keys that are always present and never meaningful in a
+// human-readable diff.
+const META_KEYS = new Set(['id', 'created_at', 'updated_at', 'organization_id', 'org_id', 'deleted_at']);
+/** True when an object is a backend-resolved sibling ({value,label} relation, {name,…} user). */
+function isResolvedObject(v) {
+    if (!v || typeof v !== 'object' || Array.isArray(v))
+        return false;
+    const o = v;
+    return typeof o.label === 'string' || typeof o.name === 'string';
+}
 /** Returns all field keys that appear in the diff. */
 function diffKeys(event) {
-    if (event.changes && Object.keys(event.changes).length > 0) {
-        return Object.keys(event.changes);
-    }
     const before = event.before ?? {};
     const after = event.after ?? {};
-    const keys = new Set([...Object.keys(before), ...Object.keys(after)]);
-    // Filter out meta-level keys that are always present and rarely meaningful
-    // in a human-readable diff (id, created_at, updated_at, organization_id).
-    const META = new Set(['id', 'created_at', 'updated_at', 'organization_id', 'org_id']);
-    keys.forEach((k) => { if (META.has(k))
-        keys.delete(k); });
-    return Array.from(keys);
+    const source = event.changes && Object.keys(event.changes).length > 0
+        ? new Set(Object.keys(event.changes))
+        : new Set([...Object.keys(before), ...Object.keys(after)]);
+    META_KEYS.forEach((k) => source.delete(k));
+    // A resolved FK appears twice: the raw UUID key (created_by_id) and the
+    // resolved sibling (created_by: {name/label,…}). Drop the raw key — the
+    // sibling row already shows the human value. The sibling's value may live
+    // in before/after or inside changes[sibling] ({from,to}/{before,after}).
+    const siblingResolved = (sibling) => {
+        if (isResolvedObject(before[sibling]) || isResolvedObject(after[sibling]))
+            return true;
+        const ch = event.changes?.[sibling];
+        if (!ch || typeof ch !== 'object')
+            return false;
+        return isResolvedObject(ch.from) || isResolvedObject(ch.to) || isResolvedObject(ch.before) || isResolvedObject(ch.after);
+    };
+    return Array.from(source).filter((k) => {
+        if (!k.endsWith('_id'))
+            return true;
+        const sibling = k.slice(0, -3);
+        return !(source.has(sibling) && siblingResolved(sibling));
+    });
 }
 /** Returns the set of keys where the value actually changed. */
 function changedKeys(event) {

package/dist/record-history.d.ts

@@ -37,6 +37,12 @@ export interface RecordHistoryProps {
      * detail page (e.g. `/activity/:id`). Omitted → no button.
      */
     onOpenEvent?: (event: ActivityEvent) => void;
+    /**
+     * Resolves an event's `actor_avatar` storage path to a fetchable URL
+     * (e.g. ops' `getStorageUrl(path, 'avatars')`). Identity when omitted —
+     * fine for absolute same-origin paths.
+     */
+    resolveAvatarUrl?: (path: string) => string;
 }
 /**
  * Shows the full activity history of a single record as a vertical timeline.

package/dist/record-history.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-history.d.ts","sourceRoot":"","sources":["../src/record-history.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAOpD,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;CAC/C;AAoCD;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6KtD,CAAA"}
+{"version":3,"file":"record-history.d.ts","sourceRoot":"","sources":["../src/record-history.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAOpD,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CAC9C;AAoCD;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqLtD,CAAA"}

package/dist/record-history.js

@@ -15,7 +15,7 @@ import { formatDistanceToNow } from 'date-fns';
 import { es, enUS } from 'date-fns/locale';
 import { ChevronDown, ChevronRight, Clock, ExternalLink } from 'lucide-react';
 import { cn } from '@asteby/metacore-ui/lib';
-import { Avatar, AvatarFallback, Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@asteby/metacore-ui/primitives';
+import { Avatar, AvatarFallback, AvatarImage, Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@asteby/metacore-ui/primitives';
 import { getInitials } from '@asteby/metacore-ui/lib';
 import { ActivityDiff } from './activity-diff';
 // ---------------------------------------------------------------------------
@@ -51,7 +51,7 @@ function actionDotColor(action) {
  * Each event is collapsible — the header shows actor + time; expanding reveals
  * the <ActivityDiff> with field-level changes.
  */
-export const RecordHistory = ({ events, columns, timeZone, currency, locale = 'es', className, onOpenEvent, }) => {
+export const RecordHistory = ({ events, columns, timeZone, currency, locale = 'es', className, onOpenEvent, resolveAvatarUrl, }) => {
     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]);
@@ -94,7 +94,7 @@ export const RecordHistory = ({ events, columns, timeZone, currency, locale = 'e
                             return event.occurred_at;
                         }
                     })();
-                    return (_jsx(Collapsible, { open: isOpen, onOpenChange: () => toggle(event.id), children: _jsxs("div", { className: "relative", children: [_jsx("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" }), _jsxs("div", { className: "rounded-lg border border-border/60 bg-card overflow-hidden", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors", children: [_jsx(Avatar, { className: "h-7 w-7 rounded-full shrink-0", children: _jsx(AvatarFallback, { className: "text-[9px] font-bold bg-primary/10 text-primary", children: getInitials(actor) }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: actor }), _jsx("span", { className: "text-sm text-muted-foreground", children: actionLabel(event.action) })] }), _jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [_jsx(Clock, { className: "h-3 w-3 text-muted-foreground/60 shrink-0" }), _jsx("span", { className: "text-xs text-muted-foreground", title: fullDate, children: timeAgo }), event.addon_key && (_jsx(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0 h-4 ml-1", children: event.addon_key }))] })] }), onOpenEvent && (_jsx("span", { role: "button", tabIndex: 0, "aria-label": "Ver en registro de actividad", title: "Ver en registro de actividad", className: "shrink-0 rounded-md p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors cursor-pointer", onClick: (e) => {
+                    return (_jsx(Collapsible, { open: isOpen, onOpenChange: () => toggle(event.id), children: _jsxs("div", { className: "relative", children: [_jsx("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" }), _jsxs("div", { className: "rounded-lg border border-border/60 bg-card overflow-hidden", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors", children: [_jsxs(Avatar, { className: "h-7 w-7 rounded-full shrink-0", children: [event.actor_avatar ? (_jsx(AvatarImage, { src: resolveAvatarUrl ? resolveAvatarUrl(event.actor_avatar) : event.actor_avatar, alt: actor })) : null, _jsx(AvatarFallback, { className: "text-[9px] font-bold bg-primary/10 text-primary", children: getInitials(actor) })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: actor }), _jsx("span", { className: "text-sm text-muted-foreground", children: actionLabel(event.action) })] }), _jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [_jsx(Clock, { className: "h-3 w-3 text-muted-foreground/60 shrink-0" }), _jsx("span", { className: "text-xs text-muted-foreground", title: fullDate, children: timeAgo }), event.addon_key && (_jsx(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0 h-4 ml-1", children: event.addon_key }))] })] }), onOpenEvent && (_jsx("span", { role: "button", tabIndex: 0, "aria-label": "Ver en registro de actividad", title: "Ver en registro de actividad", className: "shrink-0 rounded-md p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors cursor-pointer", onClick: (e) => {
                                                             e.stopPropagation();
                                                             onOpenEvent(event);
                                                         }, onKeyDown: (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "18.13.0",
+  "version": "18.13.2",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/activity-diff.tsx

@@ -35,6 +35,8 @@ export interface ActivityEvent {
     correlation_id?: string | null
     actor_id?: string | null
     actor_label?: string | null
+    /** Storage path of the actor's avatar image, when the backend resolves one. */
+    actor_avatar?: string | null
     addon_key: string
     model: string
     record_id: string
@@ -74,19 +76,41 @@ export interface ActivityDiffProps {
 // Helpers
 // ---------------------------------------------------------------------------
 
+// Meta-level keys that are always present and never meaningful in a
+// human-readable diff.
+const META_KEYS = new Set(['id', 'created_at', 'updated_at', 'organization_id', 'org_id', 'deleted_at'])
+
+/** True when an object is a backend-resolved sibling ({value,label} relation, {name,…} user). */
+function isResolvedObject(v: unknown): boolean {
+    if (!v || typeof v !== 'object' || Array.isArray(v)) return false
+    const o = v as Record<string, unknown>
+    return typeof o.label === 'string' || typeof o.name === 'string'
+}
+
 /** Returns all field keys that appear in the diff. */
 function diffKeys(event: ActivityEvent): string[] {
-    if (event.changes && Object.keys(event.changes).length > 0) {
-        return Object.keys(event.changes)
-    }
     const before = event.before ?? {}
     const after = event.after ?? {}
-    const keys = new Set([...Object.keys(before), ...Object.keys(after)])
-    // Filter out meta-level keys that are always present and rarely meaningful
-    // in a human-readable diff (id, created_at, updated_at, organization_id).
-    const META = new Set(['id', 'created_at', 'updated_at', 'organization_id', 'org_id'])
-    keys.forEach((k) => { if (META.has(k)) keys.delete(k) })
-    return Array.from(keys)
+    const source =
+        event.changes && Object.keys(event.changes).length > 0
+            ? new Set(Object.keys(event.changes))
+            : new Set([...Object.keys(before), ...Object.keys(after)])
+    META_KEYS.forEach((k) => source.delete(k))
+    // A resolved FK appears twice: the raw UUID key (created_by_id) and the
+    // resolved sibling (created_by: {name/label,…}). Drop the raw key — the
+    // sibling row already shows the human value. The sibling's value may live
+    // in before/after or inside changes[sibling] ({from,to}/{before,after}).
+    const siblingResolved = (sibling: string): boolean => {
+        if (isResolvedObject(before[sibling]) || isResolvedObject(after[sibling])) return true
+        const ch = (event.changes as Record<string, Record<string, unknown>> | undefined)?.[sibling]
+        if (!ch || typeof ch !== 'object') return false
+        return isResolvedObject(ch.from) || isResolvedObject(ch.to) || isResolvedObject(ch.before) || isResolvedObject(ch.after)
+    }
+    return Array.from(source).filter((k) => {
+        if (!k.endsWith('_id')) return true
+        const sibling = k.slice(0, -3)
+        return !(source.has(sibling) && siblingResolved(sibling))
+    })
 }
 
 /** Returns the set of keys where the value actually changed. */

package/src/record-history.tsx

@@ -18,6 +18,7 @@ import { cn } from '@asteby/metacore-ui/lib'
 import {
     Avatar,
     AvatarFallback,
+    AvatarImage,
     Badge,
     Collapsible,
     CollapsibleContent,
@@ -57,6 +58,12 @@ export interface RecordHistoryProps {
      * detail page (e.g. `/activity/:id`). Omitted → no button.
      */
     onOpenEvent?: (event: ActivityEvent) => void
+    /**
+     * Resolves an event's `actor_avatar` storage path to a fetchable URL
+     * (e.g. ops' `getStorageUrl(path, 'avatars')`). Identity when omitted —
+     * fine for absolute same-origin paths.
+     */
+    resolveAvatarUrl?: (path: string) => string
 }
 
 // ---------------------------------------------------------------------------
@@ -106,6 +113,7 @@ export const RecordHistory: React.FC<RecordHistoryProps> = ({
     locale = 'es',
     className,
     onOpenEvent,
+    resolveAvatarUrl,
 }) => {
     const dateLocale = locale === 'en' ? enUS : es
 
@@ -187,8 +195,15 @@ export const RecordHistory: React.FC<RecordHistoryProps> = ({
                                             type="button"
                                             className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors"
                                         >
-                                            {/* Actor avatar */}
+                                            {/* Actor avatar — the photo when the event carries one,
+                                                initials otherwise */}
                                             <Avatar className="h-7 w-7 rounded-full shrink-0">
+                                                {event.actor_avatar ? (
+                                                    <AvatarImage
+                                                        src={resolveAvatarUrl ? resolveAvatarUrl(event.actor_avatar) : event.actor_avatar}
+                                                        alt={actor}
+                                                    />
+                                                ) : null}
                                                 <AvatarFallback className="text-[9px] font-bold bg-primary/10 text-primary">
                                                     {getInitials(actor)}
                                                 </AvatarFallback>