@withpotter/components 0.13.0-next.101

package/dist/notification-drawer.js

@@ -0,0 +1,301 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Link from "next/link";
+import {
+  Bell,
+  Check,
+  CheckCheck,
+  CircleAlert,
+  Clock3,
+  PackageCheck,
+  RefreshCw,
+  ShoppingBag,
+  X
+} from "lucide-react";
+import { ordersApi } from "@withpotter/lib/api";
+const MAX_NOTIFICATIONS = 12;
+function NotificationDrawer({ tenantSlug }) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [orders, setOrders] = useState([]);
+  const [readIds, setReadIds] = useState(/* @__PURE__ */ new Set());
+  const triggerRef = useRef(null);
+  const dialogRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  const storageKey = tenantSlug ? `box:notifications:read:${tenantSlug}` : null;
+  const notifications = useMemo(
+    () => orders.map(toNotification).slice(0, MAX_NOTIFICATIONS),
+    [orders]
+  );
+  const unreadCount = notifications.filter((item) => !readIds.has(item.id)).length;
+  const load = useCallback(async () => {
+    if (!tenantSlug) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await ordersApi.list(tenantSlug, {
+        page: 1,
+        limit: MAX_NOTIFICATIONS
+      });
+      setOrders(response.orders);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Unable to load notifications");
+    } finally {
+      setLoading(false);
+    }
+  }, [tenantSlug]);
+  useEffect(() => {
+    if (!storageKey) {
+      setReadIds(/* @__PURE__ */ new Set());
+      return;
+    }
+    try {
+      const saved = JSON.parse(localStorage.getItem(storageKey) || "[]");
+      setReadIds(new Set(Array.isArray(saved) ? saved.filter((id) => typeof id === "string") : []));
+    } catch {
+      setReadIds(/* @__PURE__ */ new Set());
+    }
+  }, [storageKey]);
+  useEffect(() => {
+    if (tenantSlug) void load();
+  }, [tenantSlug, load]);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") close();
+      if (event.key !== "Tab") return;
+      const focusable = dialogRef.current?.querySelectorAll(
+        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (!focusable?.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    closeButtonRef.current?.focus();
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  function persist(next) {
+    setReadIds(next);
+    if (storageKey) localStorage.setItem(storageKey, JSON.stringify([...next]));
+  }
+  function markRead(id) {
+    if (readIds.has(id)) return;
+    persist(/* @__PURE__ */ new Set([...readIds, id]));
+  }
+  function markAllRead() {
+    persist(/* @__PURE__ */ new Set([...readIds, ...notifications.map((item) => item.id)]));
+  }
+  function close() {
+    triggerRef.current?.focus();
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "data-tour": "notifications",
+        onClick: () => setOpen(true),
+        className: "relative rounded p-2 text-[var(--text-tertiary)] transition-colors hover:bg-[var(--interactive-active)] hover:text-[var(--text-secondary)]",
+        "aria-label": unreadCount ? `Notifications, ${unreadCount} unread` : "Notifications",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
+          unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute right-0.5 top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-brand-500 px-1 text-[9px] font-semibold leading-none text-[var(--text-inverse)]", children: unreadCount > 9 ? "9+" : unreadCount })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[70]", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "absolute inset-0 cursor-default bg-black/20",
+          onClick: close,
+          "aria-label": "Close notifications"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "aside",
+        {
+          ref: dialogRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "notification-drawer-title",
+          className: "absolute inset-y-0 right-0 flex w-full max-w-md flex-col border-l border-[var(--border-default)] bg-[var(--bg-base)]",
+          children: [
+            /* @__PURE__ */ jsxs("header", { className: "flex h-16 items-center justify-between border-b border-[var(--border-default)] px-5", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("h2", { id: "notification-drawer-title", className: "text-base font-semibold text-[var(--text-primary)]", children: "Notifications" }),
+                  unreadCount > 0 && /* @__PURE__ */ jsxs("span", { className: "rounded-full bg-[var(--accent-secondary)] px-2 py-0.5 text-[10px] font-semibold text-brand-600", children: [
+                    unreadCount,
+                    " new"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Recent order activity for this workspace" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: closeButtonRef,
+                  type: "button",
+                  onClick: close,
+                  className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-[var(--text-muted)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]",
+                  "aria-label": "Close notifications",
+                  children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-[var(--border-subtle)] px-5 py-2.5", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void load(),
+                  disabled: loading || !tenantSlug,
+                  className: "inline-flex items-center gap-2 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50",
+                  children: [
+                    /* @__PURE__ */ jsx(RefreshCw, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` }),
+                    "Refresh"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: markAllRead,
+                  disabled: unreadCount === 0,
+                  className: "inline-flex items-center gap-2 text-xs font-medium text-brand-600 hover:text-brand-700 disabled:text-[var(--text-muted)]",
+                  children: [
+                    /* @__PURE__ */ jsx(CheckCheck, { className: "h-3.5 w-3.5" }),
+                    "Mark all read"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+              loading && notifications.length === 0 && /* @__PURE__ */ jsx(NotificationSkeleton, {}),
+              !loading && error && /* @__PURE__ */ jsx("div", { className: "m-5 rounded-md border border-[var(--error)]/20 bg-[var(--error-bg)] p-4 text-sm text-[var(--error)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+                /* @__PURE__ */ jsx(CircleAlert, { className: "mt-0.5 h-4 w-4 shrink-0" }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Notifications could not load" }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs opacity-80", children: error })
+                ] })
+              ] }) }),
+              !loading && !error && notifications.length === 0 && /* @__PURE__ */ jsx("div", { className: "grid min-h-72 place-items-center px-8 text-center", children: /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-[var(--bg-subtle)]", children: /* @__PURE__ */ jsx(Check, { className: "h-5 w-5 text-[var(--success)]" }) }),
+                /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm font-medium text-[var(--text-primary)]", children: "You are all caught up" }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs leading-5 text-[var(--text-muted)]", children: "New order and payment activity will appear here." })
+              ] }) }),
+              notifications.map((item) => {
+                const unread = !readIds.has(item.id);
+                const Icon = item.icon;
+                return /* @__PURE__ */ jsxs(
+                  Link,
+                  {
+                    href: `/dashboard/orders/${item.orderId}`,
+                    onClick: () => {
+                      markRead(item.id);
+                      close();
+                    },
+                    className: `flex gap-3 border-b border-[var(--border-subtle)] px-5 py-4 transition-colors hover:bg-[var(--interactive-hover)] ${unread ? "bg-[var(--bg-subtle)]" : ""}`,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: `mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-md ${toneClass(item.tone)}`, children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) }),
+                      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs("span", { className: "flex items-start justify-between gap-3", children: [
+                          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: item.title }),
+                          unread && /* @__PURE__ */ jsx("span", { className: "mt-1.5 h-2 w-2 shrink-0 rounded-full bg-brand-500" })
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs leading-5 text-[var(--text-tertiary)]", children: item.detail }),
+                        /* @__PURE__ */ jsx("span", { className: "mt-1.5 block text-[11px] text-[var(--text-muted)]", children: relativeTime(item.occurredAt) })
+                      ] })
+                    ]
+                  },
+                  item.id
+                );
+              })
+            ] }),
+            /* @__PURE__ */ jsx("footer", { className: "border-t border-[var(--border-default)] p-4", children: /* @__PURE__ */ jsx(
+              Link,
+              {
+                href: "/dashboard/orders",
+                onClick: close,
+                className: "flex h-10 w-full items-center justify-center rounded-md border border-[var(--border-default)] text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]",
+                children: "View all orders"
+              }
+            ) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function toNotification(order) {
+  const paid = order.paymentStatus === "paid";
+  const completed = order.status === "completed";
+  const title = completed ? `Order ${order.orderNumber} completed` : paid ? `Payment received for ${order.orderNumber}` : `New order ${order.orderNumber}`;
+  const detail = completed ? `${customerName(order)} \xB7 Fulfillment completed` : paid ? `${customerName(order)} \xB7 ${money(order.total, order.currency)} paid \xB7 Awaiting fulfillment` : `${customerName(order)} \xB7 ${money(order.total, order.currency)} \xB7 Payment pending`;
+  return {
+    id: `${order.id}:${order.status}:${order.paymentStatus}:${order.updatedAt}`,
+    orderId: order.id,
+    title,
+    detail,
+    occurredAt: order.updatedAt || order.createdAt,
+    tone: completed || paid ? "success" : order.status === "cancelled" ? "neutral" : "warning",
+    icon: completed ? PackageCheck : paid ? ShoppingBag : Clock3
+  };
+}
+function customerName(order) {
+  return order.customerName?.trim() || order.customerEmail;
+}
+function money(amount, currency) {
+  return new Intl.NumberFormat(typeof navigator === "undefined" ? void 0 : navigator.language, {
+    style: "currency",
+    currency: currency || "NGN",
+    maximumFractionDigits: 2
+  }).format(Number(amount));
+}
+function relativeTime(value) {
+  const elapsed = Date.now() - new Date(value).getTime();
+  const minutes = Math.max(0, Math.floor(elapsed / 6e4));
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(value).toLocaleDateString();
+}
+function toneClass(tone) {
+  if (tone === "success") return "bg-[var(--success-bg)] text-[var(--success)]";
+  if (tone === "warning") return "bg-[var(--warning-bg)] text-[var(--warning)]";
+  return "bg-[var(--bg-muted)] text-[var(--text-secondary)]";
+}
+function NotificationSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "divide-y divide-[var(--border-subtle)]", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex animate-pulse gap-3 px-5 py-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-9 w-9 rounded-md bg-[var(--bg-muted)]" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-3/5 rounded bg-[var(--bg-muted)]" }),
+      /* @__PURE__ */ jsx("div", { className: "h-2.5 w-4/5 rounded bg-[var(--bg-subtle)]" })
+    ] })
+  ] }, index)) });
+}
+export {
+  NotificationDrawer,
+  toNotification
+};
+//# sourceMappingURL=notification-drawer.js.map

package/dist/notification-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/notification-drawer.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport Link from 'next/link';\nimport {\n  Bell,\n  Check,\n  CheckCheck,\n  CircleAlert,\n  Clock3,\n  PackageCheck,\n  RefreshCw,\n  ShoppingBag,\n  X,\n} from 'lucide-react';\nimport { ordersApi, type Order } from '@withpotter/lib/api';\n\nconst MAX_NOTIFICATIONS = 12;\n\ntype DrawerNotification = {\n  id: string;\n  orderId: string;\n  title: string;\n  detail: string;\n  occurredAt: string;\n  tone: 'success' | 'warning' | 'neutral';\n  icon: typeof Bell;\n};\n\nexport function NotificationDrawer({ tenantSlug }: { tenantSlug?: string }) {\n  const [open, setOpen] = useState(false);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [orders, setOrders] = useState<Order[]>([]);\n  const [readIds, setReadIds] = useState<Set<string>>(new Set());\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dialogRef = useRef<HTMLElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const storageKey = tenantSlug ? `box:notifications:read:${tenantSlug}` : null;\n\n  const notifications = useMemo(\n    () => orders.map(toNotification).slice(0, MAX_NOTIFICATIONS),\n    [orders],\n  );\n  const unreadCount = notifications.filter((item) => !readIds.has(item.id)).length;\n\n  const load = useCallback(async () => {\n    if (!tenantSlug) return;\n    setLoading(true);\n    setError(null);\n    try {\n      const response = await ordersApi.list(tenantSlug, {\n        page: 1,\n        limit: MAX_NOTIFICATIONS,\n      });\n      setOrders(response.orders);\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : 'Unable to load notifications');\n    } finally {\n      setLoading(false);\n    }\n  }, [tenantSlug]);\n\n  useEffect(() => {\n    if (!storageKey) {\n      setReadIds(new Set());\n      return;\n    }\n    try {\n      const saved = JSON.parse(localStorage.getItem(storageKey) || '[]');\n      setReadIds(new Set(Array.isArray(saved) ? saved.filter((id): id is string => typeof id === 'string') : []));\n    } catch {\n      setReadIds(new Set());\n    }\n  }, [storageKey]);\n\n  useEffect(() => {\n    if (tenantSlug) void load();\n  }, [tenantSlug, load]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') close();\n      if (event.key !== 'Tab') return;\n      const focusable = dialogRef.current?.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n      );\n      if (!focusable?.length) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (event.shiftKey && document.activeElement === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && document.activeElement === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n    window.addEventListener('keydown', onKeyDown);\n    closeButtonRef.current?.focus();\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [open]);\n\n  function persist(next: Set<string>) {\n    setReadIds(next);\n    if (storageKey) localStorage.setItem(storageKey, JSON.stringify([...next]));\n  }\n\n  function markRead(id: string) {\n    if (readIds.has(id)) return;\n    persist(new Set([...readIds, id]));\n  }\n\n  function markAllRead() {\n    persist(new Set([...readIds, ...notifications.map((item) => item.id)]));\n  }\n\n  function close() {\n    triggerRef.current?.focus();\n    setOpen(false);\n  }\n\n  return (\n    <>\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        data-tour=\"notifications\"\n        onClick={() => setOpen(true)}\n        className=\"relative rounded p-2 text-[var(--text-tertiary)] transition-colors hover:bg-[var(--interactive-active)] hover:text-[var(--text-secondary)]\"\n        aria-label={unreadCount ? `Notifications, ${unreadCount} unread` : 'Notifications'}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n      >\n        <Bell className=\"h-5 w-5\" />\n        {unreadCount > 0 && (\n          <span className=\"absolute right-0.5 top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-brand-500 px-1 text-[9px] font-semibold leading-none text-[var(--text-inverse)]\">\n            {unreadCount > 9 ? '9+' : unreadCount}\n          </span>\n        )}\n      </button>\n\n      {open && (\n        <div className=\"fixed inset-0 z-[70]\">\n          <button\n            type=\"button\"\n            className=\"absolute inset-0 cursor-default bg-black/20\"\n            onClick={close}\n            aria-label=\"Close notifications\"\n          />\n          <aside\n            ref={dialogRef}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby=\"notification-drawer-title\"\n            className=\"absolute inset-y-0 right-0 flex w-full max-w-md flex-col border-l border-[var(--border-default)] bg-[var(--bg-base)]\"\n          >\n            <header className=\"flex h-16 items-center justify-between border-b border-[var(--border-default)] px-5\">\n              <div>\n                <div className=\"flex items-center gap-2\">\n                  <h2 id=\"notification-drawer-title\" className=\"text-base font-semibold text-[var(--text-primary)]\">\n                    Notifications\n                  </h2>\n                  {unreadCount > 0 && (\n                    <span className=\"rounded-full bg-[var(--accent-secondary)] px-2 py-0.5 text-[10px] font-semibold text-brand-600\">\n                      {unreadCount} new\n                    </span>\n                  )}\n                </div>\n                <p className=\"text-xs text-[var(--text-muted)]\">Recent order activity for this workspace</p>\n              </div>\n              <button\n                ref={closeButtonRef}\n                type=\"button\"\n                onClick={close}\n                className=\"inline-flex h-9 w-9 items-center justify-center rounded-md text-[var(--text-muted)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]\"\n                aria-label=\"Close notifications\"\n              >\n                <X className=\"h-4 w-4\" />\n              </button>\n            </header>\n\n            <div className=\"flex items-center justify-between border-b border-[var(--border-subtle)] px-5 py-2.5\">\n              <button\n                type=\"button\"\n                onClick={() => void load()}\n                disabled={loading || !tenantSlug}\n                className=\"inline-flex items-center gap-2 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50\"\n              >\n                <RefreshCw className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />\n                Refresh\n              </button>\n              <button\n                type=\"button\"\n                onClick={markAllRead}\n                disabled={unreadCount === 0}\n                className=\"inline-flex items-center gap-2 text-xs font-medium text-brand-600 hover:text-brand-700 disabled:text-[var(--text-muted)]\"\n              >\n                <CheckCheck className=\"h-3.5 w-3.5\" />\n                Mark all read\n              </button>\n            </div>\n\n            <div className=\"min-h-0 flex-1 overflow-y-auto\">\n              {loading && notifications.length === 0 && <NotificationSkeleton />}\n              {!loading && error && (\n                <div className=\"m-5 rounded-md border border-[var(--error)]/20 bg-[var(--error-bg)] p-4 text-sm text-[var(--error)]\">\n                  <div className=\"flex items-start gap-2\">\n                    <CircleAlert className=\"mt-0.5 h-4 w-4 shrink-0\" />\n                    <div>\n                      <p className=\"font-medium\">Notifications could not load</p>\n                      <p className=\"mt-1 text-xs opacity-80\">{error}</p>\n                    </div>\n                  </div>\n                </div>\n              )}\n              {!loading && !error && notifications.length === 0 && (\n                <div className=\"grid min-h-72 place-items-center px-8 text-center\">\n                  <div>\n                    <span className=\"mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-[var(--bg-subtle)]\">\n                      <Check className=\"h-5 w-5 text-[var(--success)]\" />\n                    </span>\n                    <p className=\"mt-4 text-sm font-medium text-[var(--text-primary)]\">You are all caught up</p>\n                    <p className=\"mt-1 text-xs leading-5 text-[var(--text-muted)]\">New order and payment activity will appear here.</p>\n                  </div>\n                </div>\n              )}\n              {notifications.map((item) => {\n                const unread = !readIds.has(item.id);\n                const Icon = item.icon;\n                return (\n                  <Link\n                    key={item.id}\n                    href={`/dashboard/orders/${item.orderId}`}\n                    onClick={() => {\n                      markRead(item.id);\n                      close();\n                    }}\n                    className={`flex gap-3 border-b border-[var(--border-subtle)] px-5 py-4 transition-colors hover:bg-[var(--interactive-hover)] ${unread ? 'bg-[var(--bg-subtle)]' : ''}`}\n                  >\n                    <span className={`mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-md ${toneClass(item.tone)}`}>\n                      <Icon className=\"h-4 w-4\" />\n                    </span>\n                    <span className=\"min-w-0 flex-1\">\n                      <span className=\"flex items-start justify-between gap-3\">\n                        <span className=\"truncate text-sm font-medium text-[var(--text-primary)]\">{item.title}</span>\n                        {unread && <span className=\"mt-1.5 h-2 w-2 shrink-0 rounded-full bg-brand-500\" />}\n                      </span>\n                      <span className=\"mt-0.5 block text-xs leading-5 text-[var(--text-tertiary)]\">{item.detail}</span>\n                      <span className=\"mt-1.5 block text-[11px] text-[var(--text-muted)]\">{relativeTime(item.occurredAt)}</span>\n                    </span>\n                  </Link>\n                );\n              })}\n            </div>\n\n            <footer className=\"border-t border-[var(--border-default)] p-4\">\n              <Link\n                href=\"/dashboard/orders\"\n                onClick={close}\n                className=\"flex h-10 w-full items-center justify-center rounded-md border border-[var(--border-default)] text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]\"\n              >\n                View all orders\n              </Link>\n            </footer>\n          </aside>\n        </div>\n      )}\n    </>\n  );\n}\n\nexport function toNotification(order: Order): DrawerNotification {\n  const paid = order.paymentStatus === 'paid';\n  const completed = order.status === 'completed';\n  const title = completed\n    ? `Order ${order.orderNumber} completed`\n    : paid\n      ? `Payment received for ${order.orderNumber}`\n      : `New order ${order.orderNumber}`;\n  const detail = completed\n    ? `${customerName(order)} · Fulfillment completed`\n    : paid\n      ? `${customerName(order)} · ${money(order.total, order.currency)} paid · Awaiting fulfillment`\n      : `${customerName(order)} · ${money(order.total, order.currency)} · Payment pending`;\n  return {\n    id: `${order.id}:${order.status}:${order.paymentStatus}:${order.updatedAt}`,\n    orderId: order.id,\n    title,\n    detail,\n    occurredAt: order.updatedAt || order.createdAt,\n    tone: completed || paid ? 'success' : order.status === 'cancelled' ? 'neutral' : 'warning',\n    icon: completed ? PackageCheck : paid ? ShoppingBag : Clock3,\n  };\n}\n\nfunction customerName(order: Order) {\n  return order.customerName?.trim() || order.customerEmail;\n}\n\nfunction money(amount: number, currency: string) {\n  return new Intl.NumberFormat(typeof navigator === 'undefined' ? undefined : navigator.language, {\n    style: 'currency',\n    currency: currency || 'NGN',\n    maximumFractionDigits: 2,\n  }).format(Number(amount));\n}\n\nfunction relativeTime(value: string) {\n  const elapsed = Date.now() - new Date(value).getTime();\n  const minutes = Math.max(0, Math.floor(elapsed / 60_000));\n  if (minutes < 1) return 'Just now';\n  if (minutes < 60) return `${minutes}m ago`;\n  const hours = Math.floor(minutes / 60);\n  if (hours < 24) return `${hours}h ago`;\n  const days = Math.floor(hours / 24);\n  if (days < 7) return `${days}d ago`;\n  return new Date(value).toLocaleDateString();\n}\n\nfunction toneClass(tone: DrawerNotification['tone']) {\n  if (tone === 'success') return 'bg-[var(--success-bg)] text-[var(--success)]';\n  if (tone === 'warning') return 'bg-[var(--warning-bg)] text-[var(--warning)]';\n  return 'bg-[var(--bg-muted)] text-[var(--text-secondary)]';\n}\n\nfunction NotificationSkeleton() {\n  return (\n    <div className=\"divide-y divide-[var(--border-subtle)]\">\n      {Array.from({ length: 4 }, (_, index) => (\n        <div key={index} className=\"flex animate-pulse gap-3 px-5 py-4\">\n          <div className=\"h-9 w-9 rounded-md bg-[var(--bg-muted)]\" />\n          <div className=\"flex-1 space-y-2\">\n            <div className=\"h-3 w-3/5 rounded bg-[var(--bg-muted)]\" />\n            <div className=\"h-2.5 w-4/5 rounded bg-[var(--bg-subtle)]\" />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/notifications-dropdown.d.ts

@@ -0,0 +1,6 @@
+export declare function NotificationsDropdown({ tenantSlug, className, }: {
+    /** Defaults to the signed-in business. */
+    tenantSlug?: string;
+    /** The bell button's classes, so it can match the row it sits in. */
+    className?: string;
+}): import("react").JSX.Element;

package/dist/notifications-dropdown.js

@@ -0,0 +1,169 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import { AnimatePresence, motion } from "motion/react";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { useDemoMode } from "@withpotter/hooks/use-demo-mode";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { merchantNotificationsApi } from "@withpotter/lib/api/merchant-notifications";
+import { durations, eases, springs } from "@withpotter/lib/motion";
+import { SwitcherScrim } from "./shell/switcher-scrim";
+import { NotificationRow } from "./shell/notification-row";
+import { BellMark, bellLabel } from "./shell/bell-mark";
+function timeAgo(iso) {
+  const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1e3);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(iso).toLocaleDateString();
+}
+const TRIGGER = "p-2 rounded text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--interactive-active)] transition-colors cursor-pointer";
+function NotificationsDropdown({
+  tenantSlug,
+  className = TRIGGER
+}) {
+  const router = useRouter();
+  const demo = useDemoMode();
+  const { tenant } = useAuth();
+  const queryClient = useQueryClient();
+  const slug = tenantSlug ?? tenant?.slug;
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState({ bottom: 0, left: 0 });
+  const btnRef = useRef(null);
+  const popRef = useRef(null);
+  const { data } = useApiQuery(
+    ["merchant-notifications"],
+    (s) => merchantNotificationsApi.list(s, { limit: 50 }),
+    { enabled: !demo, live: true }
+  );
+  const notifications = data?.notifications ?? [];
+  const unread = notifications.filter((n) => !n.readAt).length;
+  const unreadCount = Math.max(unread, data?.unreadCount ?? 0);
+  const refresh = () => queryClient.invalidateQueries({
+    queryKey: ["tenant", tenant?.slug, "merchant-notifications"]
+  });
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (popRef.current?.contains(e.target) || btnRef.current?.contains(e.target))
+        return;
+      setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      btnRef.current?.focus();
+    };
+    const dismiss = () => setOpen(false);
+    document.addEventListener("mousedown", onDoc);
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("resize", dismiss);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("resize", dismiss);
+    };
+  }, [open]);
+  const toggle = () => {
+    if (!open) {
+      const b = btnRef.current?.getBoundingClientRect();
+      if (b) setPos({ bottom: window.innerHeight - b.top + 6, left: b.left });
+    }
+    setOpen((v) => !v);
+  };
+  const openItem = (n) => {
+    setOpen(false);
+    if (!n.readAt && slug) {
+      void merchantNotificationsApi.markRead(slug, n.id).catch(() => null).then(refresh);
+    }
+    if (n.link) router.push(n.link);
+  };
+  const markAll = () => {
+    if (!slug) return;
+    void merchantNotificationsApi.markAllRead(slug).catch(() => null).then(refresh);
+  };
+  const label = bellLabel(unreadCount);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ref: btnRef,
+        "data-tour": "notifications",
+        className: `relative ${className}`,
+        title: label,
+        "aria-label": label,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        onClick: toggle,
+        children: /* @__PURE__ */ jsx(BellMark, { unreadCount })
+      }
+    ),
+    typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+        open && /* @__PURE__ */ jsx(SwitcherScrim, {}, "scrim"),
+        open && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            ref: popRef,
+            className: "pv-psw-menu",
+            role: "dialog",
+            "aria-label": "Notifications",
+            initial: { opacity: 0, scale: 0.96, y: 4 },
+            animate: { opacity: 1, scale: 1, y: 0 },
+            transition: springs.gentle,
+            exit: {
+              opacity: 0,
+              scale: 0.98,
+              y: 2,
+              transition: { duration: durations.fast, ease: eases.out }
+            },
+            style: {
+              bottom: pos.bottom,
+              left: pos.left,
+              width: 280,
+              maxWidth: "calc(100vw - 24px)",
+              transformOrigin: "bottom left"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-md font-semibold text-[var(--text-primary)]", children: "Notifications" }),
+                unread > 0 && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: markAll,
+                    className: "text-xs font-medium text-[var(--accent-primary)] transition-opacity hover:opacity-80",
+                    children: "Mark all read"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "pv-psw-sep" }),
+              /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto", children: notifications.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-8 text-center text-sm text-[var(--text-muted)]", children: "Nothing yet. Replies from support, new orders and stock alerts show up here." }) : notifications.map((n) => /* @__PURE__ */ jsx(
+                NotificationRow,
+                {
+                  notification: n,
+                  when: timeAgo(n.createdAt),
+                  onOpen: () => openItem(n)
+                },
+                n.id
+              )) })
+            ]
+          }
+        )
+      ] }),
+      document.body
+    )
+  ] });
+}
+export {
+  NotificationsDropdown
+};
+//# sourceMappingURL=notifications-dropdown.js.map

package/dist/notifications-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/notifications-dropdown.tsx"],"sourcesContent":["'use client';\n\n/**\n * The bell at the foot of the rail: everything that has happened, in one list.\n *\n * Drawn the way the Boxspace dashboard draws it (`shell/notifications-menu`\n * there). The bell always stays in view; when something is unread, a small dot\n * in the brand colour sits on its top-right corner, with a ring of the ground\n * colour so it reads as part of the icon. No count on the bell: it used to\n * carry a 16px pill in a 28px button, which covered the icon and shouted. The\n * number is in the button's label for screen readers, and the list says the\n * rest.\n *\n * The list opens upward from the bell in the same menu skin as Support\n * (`.pv-psw-menu`): a header with Mark all read, then one row per notification\n * (`shell/notification-row`). It reads the same query as the counts on the nav\n * rows (`use-nav-notifications`), so it is one request and the same data.\n * Opening an item marks it read and follows its link.\n */\n\nimport { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useRouter } from 'next/navigation';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { useDemoMode } from '@withpotter/hooks/use-demo-mode';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { merchantNotificationsApi } from '@withpotter/lib/api/merchant-notifications';\nimport type {\n  MerchantNotification,\n  MerchantNotificationList,\n} from '@withpotter/lib/api/types';\nimport { durations, eases, springs } from '@withpotter/lib/motion';\nimport { SwitcherScrim } from './shell/switcher-scrim';\nimport { NotificationRow } from './shell/notification-row';\nimport { BellMark, bellLabel } from './shell/bell-mark';\n\nfunction timeAgo(iso: string): string {\n  const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);\n  if (seconds < 60) return 'just now';\n  const minutes = Math.floor(seconds / 60);\n  if (minutes < 60) return `${minutes}m ago`;\n  const hours = Math.floor(minutes / 60);\n  if (hours < 24) return `${hours}h ago`;\n  const days = Math.floor(hours / 24);\n  if (days < 7) return `${days}d ago`;\n  return new Date(iso).toLocaleDateString();\n}\n\nconst TRIGGER =\n  'p-2 rounded text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--interactive-active)] transition-colors cursor-pointer';\n\nexport function NotificationsDropdown({\n  tenantSlug,\n  className = TRIGGER,\n}: {\n  /** Defaults to the signed-in business. */\n  tenantSlug?: string;\n  /** The bell button's classes, so it can match the row it sits in. */\n  className?: string;\n}) {\n  const router = useRouter();\n  const demo = useDemoMode();\n  const { tenant } = useAuth();\n  const queryClient = useQueryClient();\n  const slug = tenantSlug ?? tenant?.slug;\n\n  const [open, setOpen] = useState(false);\n  const [pos, setPos] = useState({ bottom: 0, left: 0 });\n  const btnRef = useRef<HTMLButtonElement>(null);\n  const popRef = useRef<HTMLDivElement>(null);\n\n  const { data } = useApiQuery<MerchantNotificationList>(\n    ['merchant-notifications'],\n    (s) => merchantNotificationsApi.list(s, { limit: 50 }),\n    { enabled: !demo, live: true },\n  );\n  const notifications = data?.notifications ?? [];\n  const unread = notifications.filter((n) => !n.readAt).length;\n  const unreadCount = Math.max(unread, data?.unreadCount ?? 0);\n\n  const refresh = () =>\n    queryClient.invalidateQueries({\n      queryKey: ['tenant', tenant?.slug, 'merchant-notifications'],\n    });\n\n  useEffect(() => {\n    if (!open) return;\n    const onDoc = (e: MouseEvent) => {\n      if (\n        popRef.current?.contains(e.target as Node) ||\n        btnRef.current?.contains(e.target as Node)\n      )\n        return;\n      setOpen(false);\n    };\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== 'Escape') return;\n      setOpen(false);\n      btnRef.current?.focus();\n    };\n    const dismiss = () => setOpen(false);\n    document.addEventListener('mousedown', onDoc);\n    window.addEventListener('keydown', onKey);\n    window.addEventListener('resize', dismiss);\n    return () => {\n      document.removeEventListener('mousedown', onDoc);\n      window.removeEventListener('keydown', onKey);\n      window.removeEventListener('resize', dismiss);\n    };\n  }, [open]);\n\n  const toggle = () => {\n    if (!open) {\n      const b = btnRef.current?.getBoundingClientRect();\n      if (b) setPos({ bottom: window.innerHeight - b.top + 6, left: b.left });\n    }\n    setOpen((v) => !v);\n  };\n\n  const openItem = (n: MerchantNotification) => {\n    setOpen(false);\n    if (!n.readAt && slug) {\n      void merchantNotificationsApi\n        .markRead(slug, n.id)\n        .catch(() => null)\n        .then(refresh);\n    }\n    if (n.link) router.push(n.link);\n  };\n\n  const markAll = () => {\n    if (!slug) return;\n    void merchantNotificationsApi\n      .markAllRead(slug)\n      .catch(() => null)\n      .then(refresh);\n  };\n\n  const label = bellLabel(unreadCount);\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        ref={btnRef}\n        data-tour=\"notifications\"\n        className={`relative ${className}`}\n        title={label}\n        aria-label={label}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        onClick={toggle}\n      >\n        <BellMark unreadCount={unreadCount} />\n      </button>\n\n      {typeof document !== 'undefined' &&\n        createPortal(\n          <AnimatePresence>\n            {open && <SwitcherScrim key=\"scrim\" />}\n            {open && (\n              <motion.div\n                ref={popRef}\n                className=\"pv-psw-menu\"\n                role=\"dialog\"\n                aria-label=\"Notifications\"\n                initial={{ opacity: 0, scale: 0.96, y: 4 }}\n                animate={{ opacity: 1, scale: 1, y: 0 }}\n                transition={springs.gentle}\n                exit={{\n                  opacity: 0,\n                  scale: 0.98,\n                  y: 2,\n                  transition: { duration: durations.fast, ease: eases.out },\n                }}\n                style={{\n                  bottom: pos.bottom,\n                  left: pos.left,\n                  width: 280,\n                  maxWidth: 'calc(100vw - 24px)',\n                  transformOrigin: 'bottom left',\n                }}\n              >\n                <div className=\"flex items-center justify-between px-3 py-2\">\n                  <span className=\"text-md font-semibold text-[var(--text-primary)]\">\n                    Notifications\n                  </span>\n                  {unread > 0 && (\n                    <button\n                      type=\"button\"\n                      onClick={markAll}\n                      className=\"text-xs font-medium text-[var(--accent-primary)] transition-opacity hover:opacity-80\"\n                    >\n                      Mark all read\n                    </button>\n                  )}\n                </div>\n                <div className=\"pv-psw-sep\" />\n                <div className=\"max-h-96 overflow-y-auto\">\n                  {notifications.length === 0 ? (\n                    <p className=\"px-3 py-8 text-center text-sm text-[var(--text-muted)]\">\n                      Nothing yet. Replies from support, new orders and stock\n                      alerts show up here.\n                    </p>\n                  ) : (\n                    notifications.map((n) => (\n                      <NotificationRow\n                        key={n.id}\n                        notification={n}\n                        when={timeAgo(n.createdAt)}\n                        onOpen={() => openItem(n)}\n                      />\n                    ))\n                  )}\n                </div>\n              </motion.div>\n            )}\n          </AnimatePresence>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/order-editor/order-editor.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Taking an order by hand, as a page.
+ *
+ * It was a `FormDialog`, which put it out of step with every other create
+ * screen in the product: a new product is `/dashboard/catalog/new`, a new
+ * customer and a new invoice are pages too, and CLAUDE.md states the rule
+ * outright — "a create/edit screen is a detail screen; it keeps the sidebar and
+ * uses DetailPage with breadcrumbs, like CustomerEditor and ProductEditor do".
+ * A modal also gave the longest form on the surface the narrowest column and no
+ * URL, so a half-typed order could not be linked, reloaded or come back to.
+ *
+ * The layout mirrors the order DETAIL page — who and what on the left, how it
+ * is paid and handed over on the right — so the screen you fill in is arranged
+ * like the screen you later read.
+ */
+export declare function OrderEditor(): import("react").JSX.Element;