@open-mercato/ui 0.6.2-develop.3372.1.de9a169973 → 0.6.2-develop.3380.1.bb14509041

package/dist/backend/notifications/NotificationItem.js

@@ -2,8 +2,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useRouter } from "next/navigation";
-import { X, Bell, AlertTriangle, CheckCircle2, XCircle, Info, Loader2 } from "lucide-react";
+import { Bell, AlertTriangle, CheckCircle2, XCircle, Info, Loader2, X } from "lucide-react";
 import { Button } from "../../primitives/button.js";
+import { IconButton } from "../../primitives/icon-button.js";
 import { cn } from "@open-mercato/shared/lib/utils";
 import { formatRelativeTime } from "@open-mercato/shared/lib/time";
 function resolveNotificationText(params) {
@@ -22,12 +23,22 @@ const severityIcons = {
   success: CheckCircle2,
   error: XCircle
 };
-const severityColors = {
+const severityAvatarBg = {
+  info: "bg-status-info-bg",
+  warning: "bg-status-warning-bg",
+  success: "bg-status-success-bg",
+  error: "bg-status-error-bg"
+};
+const severityAvatarText = {
   info: "text-status-info-icon",
   warning: "text-status-warning-icon",
   success: "text-status-success-icon",
   error: "text-status-error-icon"
 };
+function humanizeModuleId(moduleId) {
+  if (!moduleId) return null;
+  return moduleId.split(/[_:.-]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
 function NotificationItem({
   notification,
   onMarkAsRead,
@@ -40,8 +51,10 @@ function NotificationItem({
   const [executing, setExecuting] = React.useState(null);
   const isUnread = notification.status === "unread";
   const hasActions = notification.actions && notification.actions.length > 0;
-  const severity = notification.severity;
+  const severity = notification.severity ?? "info";
   const IconComponent = severityIcons[severity] ?? Bell;
+  const avatarBg = severityAvatarBg[severity] ?? "bg-muted";
+  const avatarText = severityAvatarText[severity] ?? "text-muted-foreground";
   const titleText = resolveNotificationText({
     key: notification.titleKey,
     fallback: notification.title,
@@ -54,22 +67,18 @@ function NotificationItem({
     variables: notification.bodyVariables ?? void 0,
     t
   });
+  const timeAgo = formatRelativeTime(notification.createdAt, { translate: t }) ?? "";
+  const sourceLabel = humanizeModuleId(notification.sourceModule);
   const handleClick = async () => {
-    if (isUnread) {
-      await onMarkAsRead();
-    }
-    if (notification.linkHref) {
-      router.push(notification.linkHref);
-    }
+    if (isUnread) await onMarkAsRead();
+    if (notification.linkHref) router.push(notification.linkHref);
   };
   const handleAction = async (actionId, event) => {
     event?.stopPropagation();
     setExecuting(actionId);
     try {
       const result = await onExecuteAction(actionId);
-      if (result.href) {
-        router.push(result.href);
-      }
+      if (result.href) router.push(result.href);
     } finally {
       setExecuting(null);
     }
@@ -112,12 +121,14 @@ function NotificationItem({
       }
     );
   }
+  const showActions = hasActions && notification.status !== "actioned";
+  const showBodyBubble = !!bodyText && bodyText.length > 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "group relative px-4 py-3 hover:bg-muted/50 cursor-pointer transition-colors",
-        isUnread && "bg-muted/30"
+        "group relative flex gap-4 items-start rounded-xl p-3 transition-colors hover:bg-muted/40 cursor-pointer",
+        isUnread && "bg-muted/20"
       ),
       onClick: handleClick,
       onKeyDown: (e) => {
@@ -129,54 +140,60 @@ function NotificationItem({
       role: "button",
       tabIndex: 0,
       children: [
-        isUnread && /* @__PURE__ */ jsx("div", { className: "absolute left-1.5 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-primary" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
-          /* @__PURE__ */ jsx(
-            "div",
+        /* @__PURE__ */ jsxs("div", { className: cn("relative shrink-0 flex size-10 items-center justify-center rounded-full", avatarBg), children: [
+          /* @__PURE__ */ jsx(IconComponent, { className: cn("size-5", avatarText), "aria-hidden": "true" }),
+          isUnread ? /* @__PURE__ */ jsx(
+            "span",
             {
-              className: cn(
-                "flex-shrink-0 mt-0.5",
-                severityColors[severity] ?? "text-muted-foreground"
-              ),
-              children: /* @__PURE__ */ jsx(IconComponent, { className: "h-5 w-5" })
+              className: "absolute -right-1 -top-1 size-3 rounded-full bg-accent-indigo ring-2 ring-background",
+              "aria-hidden": "true"
             }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-              /* @__PURE__ */ jsx("h4", { className: cn("text-sm font-medium", isUnread && "font-semibold"), children: titleText }),
-              /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-xs text-muted-foreground", children: formatRelativeTime(notification.createdAt, { translate: t }) ?? "" })
-            ] }),
-            bodyText && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground line-clamp-2", children: bodyText }),
-            hasActions && notification.status !== "actioned" && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-start gap-2", children: notification.actions.map((action) => /* @__PURE__ */ jsxs(
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-5 tracking-tight text-foreground", children: titleText }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 text-xs leading-4 text-muted-foreground", children: [
+            timeAgo ? /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: timeAgo }) : null,
+            timeAgo && sourceLabel ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-text-disabled", children: "\xB7" }) : null,
+            sourceLabel ? /* @__PURE__ */ jsx("span", { className: "truncate", children: sourceLabel }) : null
+          ] }),
+          showBodyBubble ? /* @__PURE__ */ jsx("div", { className: "mt-2 inline-flex max-w-full self-start rounded-tr-lg rounded-br-lg rounded-bl-lg rounded-tl-sm border bg-background px-3 py-2 text-sm leading-5 tracking-tight text-muted-foreground shadow-xs", children: /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line break-words", children: bodyText }) }) : null,
+          showActions ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: notification.actions.map((action, idx) => {
+            const isPrimary = idx === notification.actions.length - 1 || action.variant === "default";
+            return /* @__PURE__ */ jsxs(
               Button,
               {
-                variant: action.variant ?? "outline",
+                type: "button",
+                variant: isPrimary ? "default" : "outline",
                 size: "sm",
-                className: "h-auto min-h-8 max-w-full min-w-0 whitespace-normal break-words text-left",
+                className: cn(
+                  "h-8 rounded-md px-2.5 py-1.5 text-sm font-medium",
+                  isPrimary && "bg-accent-indigo text-accent-indigo-foreground hover:bg-accent-indigo/90"
+                ),
                 onClick: (event) => handleAction(action.id, event),
                 disabled: executing !== null,
                 children: [
                   action.labelKey ? t(action.labelKey, action.label) : t(action.label, action.label),
-                  executing === action.id && /* @__PURE__ */ jsx(Loader2, { className: "ml-1 h-3 w-3 animate-spin" })
+                  executing === action.id ? /* @__PURE__ */ jsx(Loader2, { className: "ml-1 size-3 animate-spin" }) : null
                 ]
               },
               action.id
-            )) }),
-            notification.status === "actioned" && notification.actionTaken && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground italic", children: t("notifications.actionTaken", "Action taken: {action}", {
-              action: notification.actionTaken
-            }) })
-          ] }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: "flex-shrink-0 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
-              onClick: handleDismiss,
-              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
-            }
-          )
-        ] })
+            );
+          }) }) : null,
+          notification.status === "actioned" && notification.actionTaken ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs italic text-muted-foreground", children: t("notifications.actionTaken", "Action taken: {action}", { action: notification.actionTaken }) }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "xs",
+            className: "absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100",
+            onClick: handleDismiss,
+            "aria-label": t("notifications.actions.dismiss", "Dismiss"),
+            children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+          }
+        )
       ]
     }
   );

package/dist/backend/notifications/NotificationItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/notifications/NotificationItem.tsx"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { useRouter } from 'next/navigation'\nimport { X, Bell, AlertTriangle, CheckCircle2, XCircle, Info, Loader2 } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { formatRelativeTime } from '@open-mercato/shared/lib/time'\nimport type { NotificationDto, NotificationRendererProps, NotificationTypeAction } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { ComponentType } from 'react'\n\nexport type NotificationItemProps = {\n  notification: NotificationDto\n  onMarkAsRead: () => Promise<void>\n  onExecuteAction: (actionId: string) => Promise<{ href?: string }>\n  onDismiss: () => Promise<void>\n  t: TranslateFn\n  /**\n   * Optional custom renderer component for this notification type.\n   * When provided, this component will be used instead of the default rendering.\n   *\n   * Custom renderers receive full control over the notification's appearance while\n   * still having access to action handlers and notification data.\n   *\n   * @example\n   * ```tsx\n   * // In your module's notifications.client.ts\n   * export const salesNotificationTypes = [\n   *   {\n   *     type: 'sales.order.created',\n   *     Renderer: SalesOrderCreatedRenderer,\n   *     // ...other fields\n   *   }\n   * ]\n   *\n   * // Usage in NotificationPanel\n   * const renderer = salesNotificationTypes.find(t => t.type === notification.type)?.Renderer\n   * <NotificationItem\n   *   notification={notification}\n   *   customRenderer={renderer}\n   *   ...\n   * />\n   * ```\n   */\n  customRenderer?: ComponentType<NotificationRendererProps>\n}\n\n\nfunction resolveNotificationText(params: {\n  key?: string | null\n  fallback?: string | null\n  variables?: Record<string, string> | null\n  t: TranslateFn\n}): string {\n  const { key, fallback, variables, t } = params\n  if (key) {\n    return t(key, fallback ?? key, variables ?? undefined)\n  }\n  if (fallback) {\n    return t(fallback, variables ?? undefined)\n  }\n  return ''\n}\n\nconst severityIcons = {\n  info: Info,\n  warning: AlertTriangle,\n  success: CheckCircle2,\n  error: XCircle,\n}\n\nconst severityColors = {\n  info: 'text-status-info-icon',\n  warning: 'text-status-warning-icon',\n  success: 'text-status-success-icon',\n  error: 'text-status-error-icon',\n}\n\nexport function NotificationItem({\n  notification,\n  onMarkAsRead,\n  onExecuteAction,\n  onDismiss,\n  t,\n  customRenderer: CustomRenderer,\n}: NotificationItemProps) {\n  const router = useRouter()\n  const [executing, setExecuting] = React.useState<string | null>(null)\n\n  const isUnread = notification.status === 'unread'\n  const hasActions = notification.actions && notification.actions.length > 0\n  const severity = notification.severity as keyof typeof severityIcons\n  const IconComponent = severityIcons[severity] ?? Bell\n  const titleText = resolveNotificationText({\n    key: notification.titleKey,\n    fallback: notification.title,\n    variables: notification.titleVariables ?? undefined,\n    t,\n  })\n  const bodyText = resolveNotificationText({\n    key: notification.bodyKey,\n    fallback: notification.body ?? undefined,\n    variables: notification.bodyVariables ?? undefined,\n    t,\n  })\n\n  const handleClick = async () => {\n    if (isUnread) {\n      await onMarkAsRead()\n    }\n    if (notification.linkHref) {\n      router.push(notification.linkHref)\n    }\n  }\n\n  const handleAction = async (actionId: string, event?: React.MouseEvent) => {\n    event?.stopPropagation()\n    setExecuting(actionId)\n    try {\n      const result = await onExecuteAction(actionId)\n      if (result.href) {\n        router.push(result.href)\n      }\n    } finally {\n      setExecuting(null)\n    }\n  }\n\n  const handleDismiss = async (event?: React.MouseEvent) => {\n    event?.stopPropagation()\n    await onDismiss()\n  }\n\n  // Convert notification actions to the format expected by custom renderers\n  const rendererActions: NotificationTypeAction[] = notification.actions.map((action) => ({\n    id: action.id,\n    labelKey: action.labelKey ?? action.label,\n    variant: action.variant as NotificationTypeAction['variant'],\n    icon: action.icon,\n  }))\n\n  // Use custom renderer if provided\n  if (CustomRenderer) {\n    return (\n      <CustomRenderer\n        notification={{\n          id: notification.id,\n          type: notification.type,\n          title: titleText,\n          body: bodyText || null,\n          titleKey: notification.titleKey,\n          bodyKey: notification.bodyKey,\n          titleVariables: notification.titleVariables ?? null,\n          bodyVariables: notification.bodyVariables ?? null,\n          icon: notification.icon,\n          severity: notification.severity,\n          status: notification.status,\n          sourceModule: notification.sourceModule,\n          sourceEntityType: notification.sourceEntityType,\n          sourceEntityId: notification.sourceEntityId,\n          linkHref: notification.linkHref ?? null,\n          createdAt: notification.createdAt,\n        }}\n        onAction={handleAction}\n        onDismiss={handleDismiss}\n        actions={rendererActions}\n      />\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        'group relative px-4 py-3 hover:bg-muted/50 cursor-pointer transition-colors',\n        isUnread && 'bg-muted/30'\n      )}\n      onClick={handleClick}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault()\n          handleClick()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      {isUnread && (\n        <div className=\"absolute left-1.5 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-primary\" />\n      )}\n\n      <div className=\"flex gap-3\">\n        <div\n          className={cn(\n            'flex-shrink-0 mt-0.5',\n            severityColors[severity] ?? 'text-muted-foreground'\n          )}\n        >\n          <IconComponent className=\"h-5 w-5\" />\n        </div>\n\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"flex items-start justify-between gap-2\">\n            <h4 className={cn('text-sm font-medium', isUnread && 'font-semibold')}>\n              {titleText}\n            </h4>\n            <span className=\"flex-shrink-0 text-xs text-muted-foreground\">\n              {formatRelativeTime(notification.createdAt, { translate: t }) ?? ''}\n            </span>\n          </div>\n\n          {bodyText && (\n            <p className=\"mt-1 text-sm text-muted-foreground line-clamp-2\">\n              {bodyText}\n            </p>\n          )}\n\n          {hasActions && notification.status !== 'actioned' && (\n            <div className=\"mt-2 flex flex-wrap items-start gap-2\">\n              {notification.actions.map((action) => (\n                <Button\n                  key={action.id}\n                  variant={\n                    (action.variant as 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost') ??\n                    'outline'\n                  }\n                  size=\"sm\"\n                  className=\"h-auto min-h-8 max-w-full min-w-0 whitespace-normal break-words text-left\"\n                  onClick={(event) => handleAction(action.id, event)}\n                  disabled={executing !== null}\n                >\n                  {action.labelKey\n                    ? t(action.labelKey, action.label)\n                    : t(action.label, action.label)}\n                  {executing === action.id && (\n                    <Loader2 className=\"ml-1 h-3 w-3 animate-spin\" />\n                  )}\n                </Button>\n              ))}\n            </div>\n          )}\n\n          {notification.status === 'actioned' && notification.actionTaken && (\n            <p className=\"mt-1 text-xs text-muted-foreground italic\">\n              {t('notifications.actionTaken', 'Action taken: {action}', {\n                action: notification.actionTaken,\n              })}\n            </p>\n          )}\n        </div>\n\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"flex-shrink-0 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity\"\n          onClick={handleDismiss}\n        >\n          <X className=\"h-3 w-3\" />\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { useRouter } from 'next/navigation'\nimport { Bell, AlertTriangle, CheckCircle2, XCircle, Info, Loader2, X } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { formatRelativeTime } from '@open-mercato/shared/lib/time'\nimport type { NotificationDto, NotificationRendererProps, NotificationTypeAction } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { ComponentType } from 'react'\n\nexport type NotificationItemProps = {\n  notification: NotificationDto\n  onMarkAsRead: () => Promise<void>\n  onExecuteAction: (actionId: string) => Promise<{ href?: string }>\n  onDismiss: () => Promise<void>\n  t: TranslateFn\n  customRenderer?: ComponentType<NotificationRendererProps>\n}\n\nfunction resolveNotificationText(params: {\n  key?: string | null\n  fallback?: string | null\n  variables?: Record<string, string> | null\n  t: TranslateFn\n}): string {\n  const { key, fallback, variables, t } = params\n  if (key) {\n    return t(key, fallback ?? key, variables ?? undefined)\n  }\n  if (fallback) {\n    return t(fallback, variables ?? undefined)\n  }\n  return ''\n}\n\nconst severityIcons = {\n  info: Info,\n  warning: AlertTriangle,\n  success: CheckCircle2,\n  error: XCircle,\n}\n\n// Avatar background \u2014 soft tints matching the Figma example item palette\nconst severityAvatarBg = {\n  info: 'bg-status-info-bg',\n  warning: 'bg-status-warning-bg',\n  success: 'bg-status-success-bg',\n  error: 'bg-status-error-bg',\n}\n\nconst severityAvatarText = {\n  info: 'text-status-info-icon',\n  warning: 'text-status-warning-icon',\n  success: 'text-status-success-icon',\n  error: 'text-status-error-icon',\n}\n\nfunction humanizeModuleId(moduleId?: string | null): string | null {\n  if (!moduleId) return null\n  return moduleId\n    .split(/[_:.-]+/)\n    .filter(Boolean)\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join(' ')\n}\n\nexport function NotificationItem({\n  notification,\n  onMarkAsRead,\n  onExecuteAction,\n  onDismiss,\n  t,\n  customRenderer: CustomRenderer,\n}: NotificationItemProps) {\n  const router = useRouter()\n  const [executing, setExecuting] = React.useState<string | null>(null)\n\n  const isUnread = notification.status === 'unread'\n  const hasActions = notification.actions && notification.actions.length > 0\n  const severity = (notification.severity as keyof typeof severityIcons) ?? 'info'\n  const IconComponent = severityIcons[severity] ?? Bell\n  const avatarBg = severityAvatarBg[severity] ?? 'bg-muted'\n  const avatarText = severityAvatarText[severity] ?? 'text-muted-foreground'\n\n  const titleText = resolveNotificationText({\n    key: notification.titleKey,\n    fallback: notification.title,\n    variables: notification.titleVariables ?? undefined,\n    t,\n  })\n  const bodyText = resolveNotificationText({\n    key: notification.bodyKey,\n    fallback: notification.body ?? undefined,\n    variables: notification.bodyVariables ?? undefined,\n    t,\n  })\n  const timeAgo = formatRelativeTime(notification.createdAt, { translate: t }) ?? ''\n  const sourceLabel = humanizeModuleId(notification.sourceModule)\n\n  const handleClick = async () => {\n    if (isUnread) await onMarkAsRead()\n    if (notification.linkHref) router.push(notification.linkHref)\n  }\n\n  const handleAction = async (actionId: string, event?: React.MouseEvent) => {\n    event?.stopPropagation()\n    setExecuting(actionId)\n    try {\n      const result = await onExecuteAction(actionId)\n      if (result.href) router.push(result.href)\n    } finally {\n      setExecuting(null)\n    }\n  }\n\n  const handleDismiss = async (event?: React.MouseEvent) => {\n    event?.stopPropagation()\n    await onDismiss()\n  }\n\n  const rendererActions: NotificationTypeAction[] = notification.actions.map((action) => ({\n    id: action.id,\n    labelKey: action.labelKey ?? action.label,\n    variant: action.variant as NotificationTypeAction['variant'],\n    icon: action.icon,\n  }))\n\n  if (CustomRenderer) {\n    return (\n      <CustomRenderer\n        notification={{\n          id: notification.id,\n          type: notification.type,\n          title: titleText,\n          body: bodyText || null,\n          titleKey: notification.titleKey,\n          bodyKey: notification.bodyKey,\n          titleVariables: notification.titleVariables ?? null,\n          bodyVariables: notification.bodyVariables ?? null,\n          icon: notification.icon,\n          severity: notification.severity,\n          status: notification.status,\n          sourceModule: notification.sourceModule,\n          sourceEntityType: notification.sourceEntityType,\n          sourceEntityId: notification.sourceEntityId,\n          linkHref: notification.linkHref ?? null,\n          createdAt: notification.createdAt,\n        }}\n        onAction={handleAction}\n        onDismiss={handleDismiss}\n        actions={rendererActions}\n      />\n    )\n  }\n\n  const showActions = hasActions && notification.status !== 'actioned'\n  const showBodyBubble = !!bodyText && bodyText.length > 0\n\n  return (\n    <div\n      className={cn(\n        'group relative flex gap-4 items-start rounded-xl p-3 transition-colors hover:bg-muted/40 cursor-pointer',\n        isUnread && 'bg-muted/20'\n      )}\n      onClick={handleClick}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault()\n          handleClick()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      {/* Avatar: severity-tinted circle with severity icon */}\n      <div className={cn('relative shrink-0 flex size-10 items-center justify-center rounded-full', avatarBg)}>\n        <IconComponent className={cn('size-5', avatarText)} aria-hidden=\"true\" />\n        {isUnread ? (\n          <span\n            className=\"absolute -right-1 -top-1 size-3 rounded-full bg-accent-indigo ring-2 ring-background\"\n            aria-hidden=\"true\"\n          />\n        ) : null}\n      </div>\n\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        {/* Title row */}\n        <p className=\"text-sm font-medium leading-5 tracking-tight text-foreground\">\n          {titleText}\n        </p>\n\n        {/* Description row: time \u00B7 source */}\n        <div className=\"flex flex-wrap items-center gap-1 text-xs leading-4 text-muted-foreground\">\n          {timeAgo ? <span className=\"whitespace-nowrap\">{timeAgo}</span> : null}\n          {timeAgo && sourceLabel ? (\n            <span aria-hidden=\"true\" className=\"text-text-disabled\">\u00B7</span>\n          ) : null}\n          {sourceLabel ? <span className=\"truncate\">{sourceLabel}</span> : null}\n        </div>\n\n        {/* Optional body bubble */}\n        {showBodyBubble ? (\n          <div className=\"mt-2 inline-flex max-w-full self-start rounded-tr-lg rounded-br-lg rounded-bl-lg rounded-tl-sm border bg-background px-3 py-2 text-sm leading-5 tracking-tight text-muted-foreground shadow-xs\">\n            <p className=\"whitespace-pre-line break-words\">{bodyText}</p>\n          </div>\n        ) : null}\n\n        {/* Optional actions row */}\n        {showActions ? (\n          <div className=\"mt-2 flex flex-wrap items-center gap-2\">\n            {notification.actions.map((action, idx) => {\n              const isPrimary = idx === notification.actions.length - 1 || action.variant === 'default'\n              return (\n                <Button\n                  key={action.id}\n                  type=\"button\"\n                  variant={isPrimary ? 'default' : 'outline'}\n                  size=\"sm\"\n                  className={cn(\n                    'h-8 rounded-md px-2.5 py-1.5 text-sm font-medium',\n                    isPrimary && 'bg-accent-indigo text-accent-indigo-foreground hover:bg-accent-indigo/90',\n                  )}\n                  onClick={(event) => handleAction(action.id, event)}\n                  disabled={executing !== null}\n                >\n                  {action.labelKey ? t(action.labelKey, action.label) : t(action.label, action.label)}\n                  {executing === action.id ? <Loader2 className=\"ml-1 size-3 animate-spin\" /> : null}\n                </Button>\n              )\n            })}\n          </div>\n        ) : null}\n\n        {notification.status === 'actioned' && notification.actionTaken ? (\n          <p className=\"mt-1 text-xs italic text-muted-foreground\">\n            {t('notifications.actionTaken', 'Action taken: {action}', { action: notification.actionTaken })}\n          </p>\n        ) : null}\n      </div>\n\n      <IconButton\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"xs\"\n        className=\"absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100\"\n        onClick={handleDismiss}\n        aria-label={t('notifications.actions.dismiss', 'Dismiss')}\n      >\n        <X className=\"size-3.5\" />\n      </IconButton>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/backend/notifications/NotificationPanel.js

@@ -1,10 +1,11 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { X, Bell, CheckCheck, Loader2, RotateCcw } from "lucide-react";
+import Link from "next/link";
+import { ArrowDown, ArrowUp, Bell, Loader2, RotateCcw, Settings2, X } from "lucide-react";
 import { Button } from "../../primitives/button.js";
 import { IconButton } from "../../primitives/icon-button.js";
-import { Tabs, TabsList, TabsTrigger } from "../../primitives/tabs.js";
+import { Sheet, SheetContent, SheetTitle } from "../../primitives/sheet.js";
 import { NotificationItem } from "./NotificationItem.js";
 function NotificationPanel({
   open,
@@ -43,87 +44,90 @@ function NotificationPanel({
     }
   };
   React.useEffect(() => {
-    if (!open) return;
-    const prevOverflow = document.body.style.overflow;
+    if (!open || typeof document === "undefined") return;
+    const previous = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
-      document.body.style.overflow = prevOverflow;
+      document.body.style.overflow = previous;
     };
   }, [open]);
-  React.useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape" && open) {
-        onOpenChange(false);
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open, onOpenChange]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "fixed inset-0 z-overlay bg-black/20",
-        onClick: () => onOpenChange(false),
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "fixed right-0 top-0 z-modal h-full w-full max-w-md border-l bg-background shadow-lg",
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": t("notifications.title", "Notifications"),
-        children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsx("h2", { className: "font-semibold", children: t("notifications.title", "Notifications") }),
-              unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-destructive px-2 py-0.5 text-xs text-destructive-foreground", children: unreadCount })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              unreadCount > 0 && /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: handleMarkAllRead,
-                  disabled: markingAllRead,
-                  children: [
-                    markingAllRead ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(CheckCheck, { className: "mr-1 h-4 w-4" }),
-                    t("notifications.markAllRead", "Mark all read")
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "lg", onClick: () => onOpenChange(false), children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            Tabs,
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    SheetContent,
+    {
+      side: "right",
+      className: "gap-0 p-0",
+      hideClose: true,
+      "aria-label": t("notifications.title", "Notifications"),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b px-5 py-4", children: [
+          /* @__PURE__ */ jsx(SheetTitle, { className: "text-base font-medium leading-6 tracking-tight text-foreground", children: t("notifications.title", "Notifications") }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            unreadCount > 0 ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: handleMarkAllRead,
+                disabled: markingAllRead,
+                className: "inline-flex items-center gap-1 rounded-md px-1 text-sm font-medium leading-5 text-accent-indigo transition-colors hover:text-accent-indigo/80 disabled:opacity-50",
+                children: [
+                  markingAllRead ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }) : null,
+                  t("notifications.markAllRead", "Mark all read")
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => onOpenChange(false),
+                "aria-label": t("notifications.close", "Close notifications"),
+                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { role: "tablist", className: "flex items-center gap-5 border-b px-5 py-3.5", children: ["all", "unread", "action"].map((value) => {
+          const isActive = filter === value;
+          const label = value === "all" ? t("notifications.filters.all", "All") : value === "unread" ? t("notifications.filters.unread", "Unread") : t("notifications.filters.actionRequired", "Action Required");
+          return /* @__PURE__ */ jsxs(
+            "button",
             {
-              value: filter,
-              onValueChange: (v) => setFilter(v),
-              className: "border-b",
-              children: /* @__PURE__ */ jsxs(TabsList, { className: "w-full justify-start rounded-none border-0 bg-transparent px-4", children: [
-                /* @__PURE__ */ jsx(TabsTrigger, { value: "all", children: t("notifications.filters.all", "All") }),
-                /* @__PURE__ */ jsx(TabsTrigger, { value: "unread", children: t("notifications.filters.unread", "Unread") }),
-                /* @__PURE__ */ jsx(TabsTrigger, { value: "action", children: t("notifications.filters.actionRequired", "Action Required") })
-              ] })
-            }
-          ),
-          dismissUndo && onUndoDismiss && /* @__PURE__ */ jsx("div", { className: "border-b bg-muted/50 px-4 py-2 text-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsx("span", { children: t("notifications.toast.dismissed", "Notification dismissed") }),
-            /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onUndoDismiss(), children: [
-              /* @__PURE__ */ jsx(RotateCcw, { className: "mr-1 h-3 w-3" }),
-              t("notifications.actions.undo", "Undo")
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overscroll-contain", children: filteredNotifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-muted-foreground", children: [
-            /* @__PURE__ */ jsx(Bell, { className: "mb-2 h-8 w-8 opacity-50" }),
-            /* @__PURE__ */ jsx("p", { children: t("notifications.empty", "No notifications") })
-          ] }) : /* @__PURE__ */ jsx("div", { className: "divide-y", children: filteredNotifications.map((notification) => /* @__PURE__ */ jsx(
+              type: "button",
+              role: "tab",
+              "aria-selected": isActive,
+              onClick: () => setFilter(value),
+              className: "relative inline-flex items-center gap-1.5 pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none focus-visible:text-foreground data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground",
+              "data-active": isActive,
+              children: [
+                /* @__PURE__ */ jsx("span", { children: label }),
+                value === "unread" && unreadCount > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-accent-indigo px-1 text-overline font-medium text-accent-indigo-foreground", children: unreadCount > 99 ? "99+" : unreadCount }) : null,
+                isActive ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "absolute bottom-[-14px] left-0 right-0 h-0.5 bg-foreground",
+                    "aria-hidden": "true"
+                  }
+                ) : null
+              ]
+            },
+            value
+          );
+        }) }),
+        dismissUndo && onUndoDismiss && /* @__PURE__ */ jsx("div", { className: "border-b bg-muted/50 px-4 py-2 text-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("span", { children: t("notifications.toast.dismissed", "Notification dismissed") }),
+          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onUndoDismiss(), children: [
+            /* @__PURE__ */ jsx(RotateCcw, { className: "mr-1 h-3 w-3" }),
+            t("notifications.actions.undo", "Undo")
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden overscroll-contain", children: filteredNotifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-muted/50", children: /* @__PURE__ */ jsx(Bell, { className: "size-5", "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm", children: t("notifications.empty", "No notifications") })
+        ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 p-2", children: filteredNotifications.map((notification, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          idx > 0 ? /* @__PURE__ */ jsx("div", { className: "my-px h-px bg-border", "aria-hidden": "true" }) : null,
+          /* @__PURE__ */ jsx(
             NotificationItem,
             {
               notification,
@@ -132,13 +136,32 @@ function NotificationPanel({
               onDismiss: () => onDismiss(notification.id),
               t,
               customRenderer: customRenderers?.[notification.type]
-            },
-            notification.id
-          )) }) })
+            }
+          )
+        ] }, notification.id)) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-t px-5 py-3.5 text-xs leading-4 text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { children: t("notifications.footer.useHint", "Use") }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded border bg-muted/50 px-1 py-0.5", children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded border bg-muted/50 px-1 py-0.5", children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) }),
+            /* @__PURE__ */ jsx("span", { children: t("notifications.footer.toNavigate", "to navigate") })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: "/backend/config/notifications",
+              onClick: () => onOpenChange(false),
+              className: "inline-flex items-center gap-1.5 font-medium text-muted-foreground transition-colors hover:text-foreground",
+              children: [
+                /* @__PURE__ */ jsx(Settings2, { className: "size-3.5", "aria-hidden": "true" }),
+                t("notifications.footer.manage", "Manage notifications")
+              ]
+            }
+          )
         ] })
-      }
-    )
-  ] });
+      ]
+    }
+  ) });
 }
 export {
   NotificationPanel

package/dist/backend/notifications/NotificationPanel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/notifications/NotificationPanel.tsx"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { X, Bell, CheckCheck, Loader2, RotateCcw } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs'\nimport { NotificationItem } from './NotificationItem'\nimport type { NotificationDto, NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { ComponentType } from 'react'\n\n/**\n * Map of notification type to custom renderer component.\n * Used to provide custom rendering for specific notification types.\n *\n * @example\n * ```tsx\n * const customRenderers = {\n *   'sales.order.created': SalesOrderCreatedRenderer,\n *   'sales.quote.created': SalesQuoteCreatedRenderer,\n * }\n * ```\n */\nexport type NotificationRenderers = Record<string, ComponentType<NotificationRendererProps>>\n\nexport type NotificationPanelProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  notifications: NotificationDto[]\n  unreadCount: number\n  onMarkAsRead: (id: string) => Promise<void>\n  onExecuteAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  onDismiss: (id: string) => Promise<void>\n  dismissUndo?: { notification: NotificationDto; previousStatus: 'read' | 'unread' } | null\n  onUndoDismiss?: () => Promise<void>\n  onMarkAllRead: () => Promise<void>\n  t: TranslateFn\n  /**\n   * Optional map of notification type to custom renderer component.\n   * When a notification's type matches a key in this map, the corresponding\n   * renderer will be used instead of the default NotificationItem rendering.\n   *\n   * @example\n   * ```tsx\n   * import { salesNotificationTypes } from '@open-mercato/core/modules/sales/notifications.client'\n   *\n   * // Build renderers map from notification types\n   * const renderers = Object.fromEntries(\n   *   salesNotificationTypes\n   *     .filter(t => t.Renderer)\n   *     .map(t => [t.type, t.Renderer!])\n   * )\n   *\n   * <NotificationPanel customRenderers={renderers} ... />\n   * ```\n   */\n  customRenderers?: NotificationRenderers\n}\n\nexport function NotificationPanel({\n  open,\n  onOpenChange,\n  notifications,\n  unreadCount,\n  onMarkAsRead,\n  onExecuteAction,\n  onDismiss,\n  dismissUndo,\n  onUndoDismiss,\n  onMarkAllRead,\n  t,\n  customRenderers,\n}: NotificationPanelProps) {\n  const [filter, setFilter] = React.useState<'all' | 'unread' | 'action'>('all')\n  const [markingAllRead, setMarkingAllRead] = React.useState(false)\n\n  const filteredNotifications = React.useMemo(() => {\n    switch (filter) {\n      case 'unread':\n        return notifications.filter((n) => n.status === 'unread')\n      case 'action':\n        return notifications.filter(\n          (n) => n.actions && n.actions.length > 0 && n.status !== 'actioned'\n        )\n      default:\n        return notifications\n    }\n  }, [notifications, filter])\n\n  const handleMarkAllRead = async () => {\n    setMarkingAllRead(true)\n    try {\n      await onMarkAllRead()\n    } finally {\n      setMarkingAllRead(false)\n    }\n  }\n\n  React.useEffect(() => {\n    if (!open) return\n    const prevOverflow = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n    return () => {\n      document.body.style.overflow = prevOverflow\n    }\n  }, [open])\n\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && open) {\n        onOpenChange(false)\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [open, onOpenChange])\n\n  if (!open) return null\n\n  return (\n    <>\n      <div\n        className=\"fixed inset-0 z-overlay bg-black/20\"\n        onClick={() => onOpenChange(false)}\n        aria-hidden=\"true\"\n      />\n\n      <div\n        className=\"fixed right-0 top-0 z-modal h-full w-full max-w-md border-l bg-background shadow-lg\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={t('notifications.title', 'Notifications')}\n      >\n        <div className=\"flex h-full flex-col\">\n          <div className=\"flex items-center justify-between border-b px-4 py-3\">\n            <div className=\"flex items-center gap-2\">\n              <Bell className=\"h-5 w-5\" />\n              <h2 className=\"font-semibold\">{t('notifications.title', 'Notifications')}</h2>\n              {unreadCount > 0 && (\n                <span className=\"rounded-full bg-destructive px-2 py-0.5 text-xs text-destructive-foreground\">\n                  {unreadCount}\n                </span>\n              )}\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {unreadCount > 0 && (\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={handleMarkAllRead}\n                  disabled={markingAllRead}\n                >\n                  {markingAllRead ? (\n                    <Loader2 className=\"mr-1 h-4 w-4 animate-spin\" />\n                  ) : (\n                    <CheckCheck className=\"mr-1 h-4 w-4\" />\n                  )}\n                  {t('notifications.markAllRead', 'Mark all read')}\n                </Button>\n              )}\n              <IconButton variant=\"ghost\" size=\"lg\" onClick={() => onOpenChange(false)}>\n                <X className=\"h-5 w-5\" />\n              </IconButton>\n            </div>\n          </div>\n\n          <Tabs\n            value={filter}\n            onValueChange={(v) => setFilter(v as typeof filter)}\n            className=\"border-b\"\n          >\n            <TabsList className=\"w-full justify-start rounded-none border-0 bg-transparent px-4\">\n              <TabsTrigger value=\"all\">\n                {t('notifications.filters.all', 'All')}\n              </TabsTrigger>\n              <TabsTrigger value=\"unread\">\n                {t('notifications.filters.unread', 'Unread')}\n              </TabsTrigger>\n              <TabsTrigger value=\"action\">\n                {t('notifications.filters.actionRequired', 'Action Required')}\n              </TabsTrigger>\n            </TabsList>\n          </Tabs>\n\n          {dismissUndo && onUndoDismiss && (\n            <div className=\"border-b bg-muted/50 px-4 py-2 text-sm\">\n              <div className=\"flex items-center justify-between gap-3\">\n                <span>\n                  {t('notifications.toast.dismissed', 'Notification dismissed')}\n                </span>\n                <Button variant=\"ghost\" size=\"sm\" onClick={() => onUndoDismiss()}>\n                  <RotateCcw className=\"mr-1 h-3 w-3\" />\n                  {t('notifications.actions.undo', 'Undo')}\n                </Button>\n              </div>\n            </div>\n          )}\n\n          <div className=\"flex-1 overflow-y-auto overscroll-contain\">\n            {filteredNotifications.length === 0 ? (\n              <div className=\"flex flex-col items-center justify-center py-12 text-muted-foreground\">\n                <Bell className=\"mb-2 h-8 w-8 opacity-50\" />\n                <p>{t('notifications.empty', 'No notifications')}</p>\n              </div>\n            ) : (\n              <div className=\"divide-y\">\n                {filteredNotifications.map((notification) => (\n                  <NotificationItem\n                    key={notification.id}\n                    notification={notification}\n                    onMarkAsRead={() => onMarkAsRead(notification.id)}\n                    onExecuteAction={(actionId) => onExecuteAction(notification.id, actionId)}\n                    onDismiss={() => onDismiss(notification.id)}\n                    t={t}\n                    customRenderer={customRenderers?.[notification.type]}\n                  />\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { ArrowDown, ArrowUp, Bell, Loader2, RotateCcw, Settings2, X } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport { Sheet, SheetContent, SheetTitle } from '../../primitives/sheet'\nimport { NotificationItem } from './NotificationItem'\nimport type { NotificationDto, NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { ComponentType } from 'react'\n\n/**\n * Map of notification type to custom renderer component.\n * Used to provide custom rendering for specific notification types.\n *\n * @example\n * ```tsx\n * const customRenderers = {\n *   'sales.order.created': SalesOrderCreatedRenderer,\n *   'sales.quote.created': SalesQuoteCreatedRenderer,\n * }\n * ```\n */\nexport type NotificationRenderers = Record<string, ComponentType<NotificationRendererProps>>\n\nexport type NotificationPanelProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  notifications: NotificationDto[]\n  unreadCount: number\n  onMarkAsRead: (id: string) => Promise<void>\n  onExecuteAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  onDismiss: (id: string) => Promise<void>\n  dismissUndo?: { notification: NotificationDto; previousStatus: 'read' | 'unread' } | null\n  onUndoDismiss?: () => Promise<void>\n  onMarkAllRead: () => Promise<void>\n  t: TranslateFn\n  /**\n   * Optional map of notification type to custom renderer component.\n   * When a notification's type matches a key in this map, the corresponding\n   * renderer will be used instead of the default NotificationItem rendering.\n   *\n   * @example\n   * ```tsx\n   * import { salesNotificationTypes } from '@open-mercato/core/modules/sales/notifications.client'\n   *\n   * // Build renderers map from notification types\n   * const renderers = Object.fromEntries(\n   *   salesNotificationTypes\n   *     .filter(t => t.Renderer)\n   *     .map(t => [t.type, t.Renderer!])\n   * )\n   *\n   * <NotificationPanel customRenderers={renderers} ... />\n   * ```\n   */\n  customRenderers?: NotificationRenderers\n}\n\nexport function NotificationPanel({\n  open,\n  onOpenChange,\n  notifications,\n  unreadCount,\n  onMarkAsRead,\n  onExecuteAction,\n  onDismiss,\n  dismissUndo,\n  onUndoDismiss,\n  onMarkAllRead,\n  t,\n  customRenderers,\n}: NotificationPanelProps) {\n  const [filter, setFilter] = React.useState<'all' | 'unread' | 'action'>('all')\n  const [markingAllRead, setMarkingAllRead] = React.useState(false)\n\n  const filteredNotifications = React.useMemo(() => {\n    switch (filter) {\n      case 'unread':\n        return notifications.filter((n) => n.status === 'unread')\n      case 'action':\n        return notifications.filter(\n          (n) => n.actions && n.actions.length > 0 && n.status !== 'actioned'\n        )\n      default:\n        return notifications\n    }\n  }, [notifications, filter])\n\n  const handleMarkAllRead = async () => {\n    setMarkingAllRead(true)\n    try {\n      await onMarkAllRead()\n    } finally {\n      setMarkingAllRead(false)\n    }\n  }\n\n  // Preserve the body scroll lock contract that consumers (and integration\n  // tests) rely on. Radix Dialog locks scroll via react-remove-scroll which\n  // does not set `document.body.style.overflow` \u2014 we set it ourselves so the\n  // contract is observable.\n  React.useEffect(() => {\n    if (!open || typeof document === 'undefined') return\n    const previous = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n    return () => {\n      document.body.style.overflow = previous\n    }\n  }, [open])\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent\n        side=\"right\"\n        className=\"gap-0 p-0\"\n        hideClose\n        aria-label={t('notifications.title', 'Notifications')}\n      >\n        <div className=\"flex items-center justify-between gap-3 border-b px-5 py-4\">\n          <SheetTitle className=\"text-base font-medium leading-6 tracking-tight text-foreground\">\n            {t('notifications.title', 'Notifications')}\n          </SheetTitle>\n          <div className=\"flex items-center gap-1\">\n            {unreadCount > 0 ? (\n              <button\n                type=\"button\"\n                onClick={handleMarkAllRead}\n                disabled={markingAllRead}\n                className=\"inline-flex items-center gap-1 rounded-md px-1 text-sm font-medium leading-5 text-accent-indigo transition-colors hover:text-accent-indigo/80 disabled:opacity-50\"\n              >\n                {markingAllRead ? <Loader2 className=\"size-3.5 animate-spin\" /> : null}\n                {t('notifications.markAllRead', 'Mark all read')}\n              </button>\n            ) : null}\n            <IconButton\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => onOpenChange(false)}\n              aria-label={t('notifications.close', 'Close notifications')}\n            >\n              <X className=\"size-4\" />\n            </IconButton>\n          </div>\n        </div>\n\n        <div role=\"tablist\" className=\"flex items-center gap-5 border-b px-5 py-3.5\">\n          {(['all', 'unread', 'action'] as const).map((value) => {\n            const isActive = filter === value\n            const label =\n              value === 'all'\n                ? t('notifications.filters.all', 'All')\n                : value === 'unread'\n                  ? t('notifications.filters.unread', 'Unread')\n                  : t('notifications.filters.actionRequired', 'Action Required')\n            return (\n              <button\n                key={value}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isActive}\n                onClick={() => setFilter(value)}\n                className=\"relative inline-flex items-center gap-1.5 pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none focus-visible:text-foreground data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground\"\n                data-active={isActive}\n              >\n                <span>{label}</span>\n                {value === 'unread' && unreadCount > 0 ? (\n                  <span className=\"inline-flex min-w-4 items-center justify-center rounded-full bg-accent-indigo px-1 text-overline font-medium text-accent-indigo-foreground\">\n                    {unreadCount > 99 ? '99+' : unreadCount}\n                  </span>\n                ) : null}\n                {isActive ? (\n                  <span\n                    className=\"absolute bottom-[-14px] left-0 right-0 h-0.5 bg-foreground\"\n                    aria-hidden=\"true\"\n                  />\n                ) : null}\n              </button>\n            )\n          })}\n        </div>\n\n        {dismissUndo && onUndoDismiss && (\n          <div className=\"border-b bg-muted/50 px-4 py-2 text-sm\">\n            <div className=\"flex items-center justify-between gap-3\">\n              <span>\n                {t('notifications.toast.dismissed', 'Notification dismissed')}\n              </span>\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => onUndoDismiss()}>\n                <RotateCcw className=\"mr-1 h-3 w-3\" />\n                {t('notifications.actions.undo', 'Undo')}\n              </Button>\n            </div>\n          </div>\n        )}\n\n        <div className=\"flex-1 overflow-y-auto overflow-x-hidden overscroll-contain\">\n          {filteredNotifications.length === 0 ? (\n            <div className=\"flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground\">\n              <div className=\"flex size-12 items-center justify-center rounded-full bg-muted/50\">\n                <Bell className=\"size-5\" aria-hidden=\"true\" />\n              </div>\n              <p className=\"text-sm\">{t('notifications.empty', 'No notifications')}</p>\n            </div>\n          ) : (\n            <div className=\"flex flex-col gap-1 p-2\">\n              {filteredNotifications.map((notification, idx) => (\n                <React.Fragment key={notification.id}>\n                  {idx > 0 ? <div className=\"my-px h-px bg-border\" aria-hidden=\"true\" /> : null}\n                  <NotificationItem\n                    notification={notification}\n                    onMarkAsRead={() => onMarkAsRead(notification.id)}\n                    onExecuteAction={(actionId) => onExecuteAction(notification.id, actionId)}\n                    onDismiss={() => onDismiss(notification.id)}\n                    t={t}\n                    customRenderer={customRenderers?.[notification.type]}\n                  />\n                </React.Fragment>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 border-t px-5 py-3.5 text-xs leading-4 text-muted-foreground\">\n          <div className=\"flex items-center gap-2\">\n            <span>{t('notifications.footer.useHint', 'Use')}</span>\n            <span className=\"inline-flex items-center rounded border bg-muted/50 px-1 py-0.5\">\n              <ArrowUp className=\"size-3\" aria-hidden=\"true\" />\n            </span>\n            <span className=\"inline-flex items-center rounded border bg-muted/50 px-1 py-0.5\">\n              <ArrowDown className=\"size-3\" aria-hidden=\"true\" />\n            </span>\n            <span>{t('notifications.footer.toNavigate', 'to navigate')}</span>\n          </div>\n          <Link\n            href=\"/backend/config/notifications\"\n            onClick={() => onOpenChange(false)}\n            className=\"inline-flex items-center gap-1.5 font-medium text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            <Settings2 className=\"size-3.5\" aria-hidden=\"true\" />\n            {t('notifications.footer.manage', 'Manage notifications')}\n          </Link>\n        </div>\n      </SheetContent>\n    </Sheet>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }