@carlonicora/nextjs-jsonapi 1.124.3 → 1.125.0

package/dist/features/help/index.js

@@ -21,7 +21,7 @@ var _chunkYBZVWLPHjs = require('../../chunk-YBZVWLPH.js');
 
 
 
-var _chunkQWZI4N7Sjs = require('../../chunk-QWZI4N7S.js');
+var _chunkJBWBIMZFjs = require('../../chunk-JBWBIMZF.js');
 
 
 var _chunkJO5BLONKjs = require('../../chunk-JO5BLONK.js');
@@ -73,29 +73,29 @@ var _lucidereact = require('lucide-react');
 
 
 function HelpAssistantSheet({ open, onOpenChange }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.Sheet, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkQWZI4N7Sjs.SheetContent,
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.Sheet, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkJBWBIMZFjs.SheetContent,
     {
       side: "right",
       className: "flex w-full flex-col data-[side=right]:sm:max-w-2xl data-[side=right]:lg:max-w-3xl",
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.AssistantProvider, { manageUrl: false, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAssistantSheetBody, {}) })
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.AssistantProvider, { manageUrl: false, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAssistantSheetBody, {}) })
     }
   ) });
 }
 _chunk7QVYU63Ejs.__name.call(void 0, HelpAssistantSheet, "HelpAssistantSheet");
 function HelpAssistantSheetBody() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const ctx = _chunkQWZI4N7Sjs.useAssistantContext.call(void 0, );
+  const ctx = _chunkJBWBIMZFjs.useAssistantContext.call(void 0, );
   const showThread = !!ctx.assistant || ctx.sending || ctx.messages.length > 0;
   const send = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (content) => ctx.sendMessage(content, { howToMode: true }), "send");
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQWZI4N7Sjs.SheetHeader, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.SheetTitle, { children: t("help.askAi.sheet.title") }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.SheetDescription, { children: t("help.askAi.sheet.subtitle") })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkJBWBIMZFjs.SheetHeader, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.SheetTitle, { children: t("help.askAi.sheet.title") }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.SheetDescription, { children: t("help.askAi.sheet.subtitle") })
     ] }),
-    !showThread ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.AssistantEmptyState, { onSend: send }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    !showThread ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.AssistantEmptyState, { onSend: send }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkQWZI4N7Sjs.AssistantThread,
+        _chunkJBWBIMZFjs.AssistantThread,
         {
           messages: ctx.messages,
           sending: ctx.sending,
@@ -105,7 +105,7 @@ function HelpAssistantSheetBody() {
           onRetry: ctx.retrySend
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.AssistantComposer, { onSend: send, disabled: ctx.sending })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.AssistantComposer, { onSend: send, disabled: ctx.sending })
     ] })
   ] });
 }
@@ -115,20 +115,20 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpAssistantSheetBody, "HelpAssistantSheet
 
 function HelpAskAi() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const { currentUser } = _chunkQWZI4N7Sjs.useCurrentUserContext.call(void 0, );
+  const { currentUser } = _chunkJBWBIMZFjs.useCurrentUserContext.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const disabled = !currentUser;
   if (disabled) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQWZI4N7Sjs.Tooltip, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQWZI4N7Sjs.TooltipTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.Button, { variant: "outline", size: "sm", disabled: true }), children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkJBWBIMZFjs.Tooltip, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkJBWBIMZFjs.TooltipTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.Button, { variant: "outline", size: "sm", disabled: true }), children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SparklesIcon, { className: "h-4 w-4" }),
         t("help.askAi.button")
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.TooltipContent, { children: t("help.askAi.loginTooltip") })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.TooltipContent, { children: t("help.askAi.loginTooltip") })
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQWZI4N7Sjs.Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkJBWBIMZFjs.Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SparklesIcon, { className: "h-4 w-4" }),
       t("help.askAi.button")
     ] }),
@@ -141,7 +141,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpAskAi, "HelpAskAi");
 
 function HelpHeader() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const { currentUser } = _chunkQWZI4N7Sjs.useCurrentUserContext.call(void 0, );
+  const { currentUser } = _chunkJBWBIMZFjs.useCurrentUserContext.call(void 0, );
   const { brand } = useHelp();
   const logo = _optionalChain([brand, 'optionalAccess', _ => _.logo]);
   const label = _nullishCoalesce(_optionalChain([brand, 'optionalAccess', _2 => _2.label]), () => ( "Help"));
@@ -157,7 +157,7 @@ function HelpHeader() {
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAskAi, {}),
-      currentUser ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: appHref }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.openApp") }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: "/login" }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.login") })
+      currentUser ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: appHref }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.openApp") }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: "/login" }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.login") })
     ] })
   ] });
 }
@@ -199,7 +199,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, useHelpFilter, "useHelpFilter");
 
 function HelpSideNav() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkQWZI4N7Sjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkJBWBIMZFjs.usePageUrlGenerator.call(void 0, );
   const pathname = _navigation.usePathname.call(void 0, );
   const [articles, setArticles] = _react.useState.call(void 0, []);
   _react.useEffect.call(void 0, () => {
@@ -280,7 +280,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpSideNav, "HelpSideNav");
 function HelpArticleBody(props) {
   const t = _nextintl.useTranslations.call(void 0, );
   const format = _nextintl.useFormatter.call(void 0, );
-  const generateUrl = _chunkQWZI4N7Sjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkJBWBIMZFjs.usePageUrlGenerator.call(void 0, );
   const { howToType, title, summary, updatedAt, prev, next, children } = props;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "article", { className: "prose dark:prose-invert max-w-none", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { className: "text-muted-foreground mb-2 text-xs", children: [
@@ -358,7 +358,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpTOC, "HelpTOC");
 
 function HelpHint({ contextKey }) {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkQWZI4N7Sjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkJBWBIMZFjs.usePageUrlGenerator.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const [picked, setPicked] = _react.useState.call(void 0, null);
   const [articles, setArticles] = _react.useState.call(void 0, []);
@@ -376,7 +376,7 @@ function HelpHint({ contextKey }) {
   if (matches.length === 0) return null;
   const active = _nullishCoalesce(picked, () => ( (matches.length === 1 ? matches[0] : null)));
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkQWZI4N7Sjs.Sheet,
+    _chunkJBWBIMZFjs.Sheet,
     {
       open,
       onOpenChange: (o) => {
@@ -384,11 +384,11 @@ function HelpHint({ contextKey }) {
         if (!o) setPicked(null);
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.SheetTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.Button, { variant: "ghost", size: "icon-sm", "aria-label": t("help.hint.trigger") }), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.HelpCircleIcon, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQWZI4N7Sjs.SheetContent, { side: "right", className: "w-full max-w-md sm:max-w-lg", children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQWZI4N7Sjs.SheetHeader, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.SheetTitle, { children: active ? active.name : t("help.hint.pickArticle") }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.SheetDescription, { children: _nullishCoalesce(_optionalChain([active, 'optionalAccess', _4 => _4.summary]), () => ( "")) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.SheetTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.Button, { variant: "ghost", size: "icon-sm", "aria-label": t("help.hint.trigger") }), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.HelpCircleIcon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkJBWBIMZFjs.SheetContent, { side: "right", className: "w-full max-w-md sm:max-w-lg", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkJBWBIMZFjs.SheetHeader, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.SheetTitle, { children: active ? active.name : t("help.hint.pickArticle") }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.SheetDescription, { children: _nullishCoalesce(_optionalChain([active, 'optionalAccess', _4 => _4.summary]), () => ( "")) })
           ] }),
           active ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-4 space-y-3", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-muted-foreground text-sm", children: active.summary }),
@@ -420,7 +420,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpHint, "HelpHint");
 
 function HelpSearchResultRow({ result, onSelect }) {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkQWZI4N7Sjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkJBWBIMZFjs.usePageUrlGenerator.call(void 0, );
   const [article, setArticle] = _react.useState.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     let active = true;
@@ -431,7 +431,7 @@ function HelpSearchResultRow({ result, onSelect }) {
   }, [result.id]);
   if (!article) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkQWZI4N7Sjs.CommandItem,
+      _chunkJBWBIMZFjs.CommandItem,
       {
         value: result.id,
         disabled: true,
@@ -440,7 +440,7 @@ function HelpSearchResultRow({ result, onSelect }) {
       }
     );
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQWZI4N7Sjs.CommandItem, { value: result.id, onSelect, className: "cursor-pointer p-0", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJBWBIMZFjs.CommandItem, { value: result.id, onSelect, className: "cursor-pointer p-0", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _link2.default,
     {
       href: generateUrl({ page: `/help/${article.howToType}/${article.slug}` }),

package/dist/features/help/index.mjs

@@ -21,7 +21,7 @@ import {
   useAssistantContext,
   useCurrentUserContext,
   usePageUrlGenerator
-} from "../../chunk-5FQJB5QR.mjs";
+} from "../../chunk-LRLVHDFA.mjs";
 import {
   _getStaticHelpContent
 } from "../../chunk-6VNRUTZR.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.124.3",
+  "version": "1.125.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/components/EditableAvatar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Avatar, AvatarFallback, AvatarImage } from "../shadcnui";
-import { useCurrentUserContext } from "../contexts";
 import { S3Interface } from "../features/s3/data/s3.interface";
 import { S3Service } from "../features/s3/data/s3.service";
 import { ModuleWithPermissions } from "../permissions";
@@ -20,6 +19,12 @@ type EditableAvatarProps = {
   patchImage: (imageKey: string) => Promise<void>;
   className?: string;
   fallbackClassName?: string;
+  /**
+   * Company id used to namespace the S3 upload key. Supplied by the caller from
+   * whichever current-user context the host app instantiates, so this leaf
+   * component does not depend on a specific provider being mounted.
+   */
+  companyId: string;
 };
 
 export function EditableAvatar({
@@ -31,8 +36,8 @@ export function EditableAvatar({
   patchImage,
   className,
   fallbackClassName,
+  companyId,
 }: EditableAvatarProps) {
-  const { company } = useCurrentUserContext();
   const t = useTranslations();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -46,15 +51,15 @@ export function EditableAvatar({
     (file: File) => {
       const ext = file.type.split("/").pop() ?? "";
       const ts = new Date().toISOString().replace(/[-:T]/g, "").split(".")[0];
-      return `companies/${company!.id}/${module.name}/${entityId}/${entityId}.${ts}.${ext}`;
+      return `companies/${companyId}/${module.name}/${entityId}/${entityId}.${ts}.${ext}`;
     },
-    [company, module.name, entityId],
+    [companyId, module.name, entityId],
   );
 
   const handleFile = useCallback(
     async (file: File) => {
       if (isUploading) return;
-      if (!company) return;
+      if (!companyId) return;
 
       const previousImage = image;
       const previewUrl = URL.createObjectURL(file);
@@ -90,7 +95,7 @@ export function EditableAvatar({
         setIsUploading(false);
       }
     },
-    [company, generateS3Key, image, isUploading, patchImage, t],
+    [companyId, generateS3Key, image, isUploading, patchImage, t],
   );
 
   const handleRemove = useCallback(async () => {

package/src/components/containers/RoundPageContainer.tsx

@@ -237,20 +237,28 @@ export function RoundPageContainer({
                     <div
                       className={cn(
                         `min-w-0 grow`,
-                        activeFillHeight ? `flex flex-col overflow-hidden` : `overflow-y-auto`,
+                        activeFillHeight ? `flex flex-col overflow-hidden` : `overflow-y-auto p-4`,
                       )}
                     >
-                      {header}
-                      {tabs.map((tab) => (
-                        <TabsContent
-                          key={tab.label}
-                          value={tabValue(tab)}
-                          className={tab.fillHeight ? `flex min-h-0 w-full flex-1 flex-col` : ``}
-                        >
-                          {tab.content}
-                        </TabsContent>
-                      ))}
-                      {children && <div className="flex">{children}</div>}
+                      {/* Centre and constrain rail content (like the non-rail
+                          layout). Fill-height tabs keep the full width. */}
+                      <div
+                        className={cn(
+                          activeFillHeight ? `flex min-h-0 w-full flex-1 flex-col` : `mx-auto w-full max-w-6xl`,
+                        )}
+                      >
+                        {header}
+                        {tabs.map((tab) => (
+                          <TabsContent
+                            key={tab.label}
+                            value={tabValue(tab)}
+                            className={tab.fillHeight ? `flex min-h-0 w-full flex-1 flex-col` : ``}
+                          >
+                            {tab.content}
+                          </TabsContent>
+                        ))}
+                        {children && <div className="flex">{children}</div>}
+                      </div>
                     </div>
                   </div>
                 </Tabs>

package/src/components/forms/CommonDeleter.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { LoaderCircleIcon, Trash2Icon } from "lucide-react";
-import { ReactNode, useState } from "react";
+import { isValidElement, ReactNode, useState } from "react";
 import { useI18nRouter, useI18nTranslations } from "../../i18n";
 import {
   AlertDialog,
@@ -68,7 +68,12 @@ export function CommonDeleter({
 
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
-      {forceShow ? null : (
+      {forceShow ? null : isValidElement(trigger) ? (
+        // A caller-supplied element trigger must REPLACE the trigger's own
+        // <button> via `render` — wrapping it as a child would nest a <button>
+        // inside AlertDialogTrigger's <button> (invalid HTML / hydration error).
+        <AlertDialogTrigger render={trigger} />
+      ) : (
         <AlertDialogTrigger>
           {trigger || (
             <Button

package/src/components/hero/EntityHero.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ReactNode } from "react";
+import { cn } from "../../utils";
+
+type EntityHeroProps = {
+  avatar?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+};
+
+export function EntityHero({ avatar, children, className }: EntityHeroProps) {
+  return (
+    <div className={cn("flex items-start gap-x-6", className)}>
+      {avatar}
+      <div className="flex flex-col gap-y-2">{children}</div>
+    </div>
+  );
+}

package/src/components/hero/EntityHeroAvatar.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { EditableAvatar } from "../EditableAvatar";
+import { EntityAvatar } from "../EntityAvatar";
+import { ModuleWithPermissions } from "../../permissions";
+import { cn, getInitials } from "../../utils";
+
+type EntityHeroAvatarProps = {
+  module: ModuleWithPermissions;
+  entityId: string;
+  name: string;
+  image?: string;
+  patchImage?: (imageKey: string) => Promise<void>;
+  /** Required when `patchImage` is set — namespaces the S3 upload key. */
+  companyId?: string;
+  variant?: "image" | "initials" | "icon";
+  className?: string;
+};
+
+export function EntityHeroAvatar({
+  module,
+  entityId,
+  name,
+  image,
+  patchImage,
+  companyId,
+  variant,
+  className = "h-24 w-24",
+}: EntityHeroAvatarProps) {
+  const resolved = variant ?? (patchImage || image ? "image" : "icon");
+
+  if (patchImage) {
+    return (
+      <EditableAvatar
+        entityId={entityId}
+        module={module}
+        image={image}
+        fallback={getInitials(name)}
+        alt={name}
+        patchImage={patchImage}
+        companyId={companyId ?? ""}
+        className={className}
+        fallbackClassName="text-2xl"
+      />
+    );
+  }
+
+  if (resolved === "image" || resolved === "initials") {
+    return <EntityAvatar image={resolved === "image" ? image : undefined} name={name} className={className} />;
+  }
+
+  const Icon = module.icon;
+  // Not every module declares an icon; fall back to initials so the hero never
+  // renders an empty circle.
+  if (!Icon) {
+    return <EntityAvatar name={name} className={className} />;
+  }
+  return (
+    <div className={cn("bg-muted flex shrink-0 items-center justify-center rounded-full", className)}>
+      <Icon className="text-primary h-10 w-10" />
+    </div>
+  );
+}

package/src/components/hero/EntityHeroLayout.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { ReactNode } from "react";
+import { cn } from "../../utils";
+
+type EntityHeroLayoutProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function EntityHeroLayout({ children, className }: EntityHeroLayoutProps) {
+  return <div className={cn("flex w-full flex-col gap-y-8", className)}>{children}</div>;
+}

package/src/components/hero/EntityHeroMetaRow.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ComponentType, ReactNode } from "react";
+import { cn } from "../../utils";
+
+type EntityHeroMetaRowProps = {
+  icon?: ComponentType<{ className?: string }>;
+  children: ReactNode;
+  className?: string;
+};
+
+export function EntityHeroMetaRow({ icon: Icon, children, className }: EntityHeroMetaRowProps) {
+  return (
+    <div className={cn("text-muted-foreground flex items-center gap-x-2 text-sm", className)}>
+      {Icon ? <Icon className="h-4 w-4 shrink-0" /> : null}
+      {children}
+    </div>
+  );
+}

package/src/components/hero/EntitySection.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ReactNode } from "react";
+import { cn } from "../../utils";
+
+type EntitySectionProps = {
+  title: string;
+  columns?: 2 | 3 | 4;
+  children: ReactNode;
+  className?: string;
+};
+
+export function EntitySection({ title, columns, children, className }: EntitySectionProps) {
+  return (
+    <div className={cn("flex w-full flex-col gap-y-3", className)}>
+      <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">{title}</h3>
+      {columns ? (
+        <div
+          className={cn(
+            "grid grid-cols-1 gap-4",
+            columns === 2 && "md:grid-cols-2",
+            columns === 3 && "md:grid-cols-3",
+            columns === 4 && "md:grid-cols-4",
+          )}
+        >
+          {children}
+        </div>
+      ) : (
+        <div className="flex flex-col gap-y-4">{children}</div>
+      )}
+    </div>
+  );
+}

package/src/components/hero/index.ts

@@ -0,0 +1,5 @@
+export { EntityHeroLayout } from "./EntityHeroLayout";
+export { EntityHero } from "./EntityHero";
+export { EntityHeroAvatar } from "./EntityHeroAvatar";
+export { EntityHeroMetaRow } from "./EntityHeroMetaRow";
+export { EntitySection } from "./EntitySection";

package/src/components/index.ts

@@ -14,6 +14,7 @@ export * from "./pages";
 export * from "./tables";
 export * from "./grids";
 export * from "./fiscal";
+export * from "./hero";
 export { parseFiscalData } from "../utils/fiscal-utils";
 
 // Feature components

package/src/features/user/components/details/UserContent.tsx

@@ -10,7 +10,7 @@ import { Badge, Link } from "../../../../shadcnui";
 import { RoleInterface } from "../../../role";
 import { UserInterface } from "../../data";
 import { UserService } from "../../data/user.service";
-import { useUserContext } from "../../contexts";
+import { useCurrentUserContext, useUserContext } from "../../contexts";
 import { BriefcaseIcon, MailIcon, PhoneIcon } from "lucide-react";
 
 type UserContentProps = {
@@ -21,6 +21,7 @@ export function UserContent({ user }: UserContentProps) {
   const t = useTranslations();
   const generateUrl = usePageUrlGenerator();
   const { setUser } = useUserContext();
+  const { company } = useCurrentUserContext();
 
   const hasBio = !!user.bio;
 
@@ -38,6 +39,7 @@ export function UserContent({ user }: UserContentProps) {
             const updated = await UserService.patchAvatar({ id: user.id, avatar: imageKey });
             setUser(updated);
           }}
+          companyId={company?.id ?? ""}
           className="h-24 w-24"
           fallbackClassName="text-2xl"
         />