@withpotter/components 0.13.0-next.101

package/dist/shell/notification-kinds.js

@@ -0,0 +1,48 @@
+import {
+  Bell,
+  CalendarCheck,
+  Clock,
+  Inbox,
+  LifeBuoy,
+  Package,
+  PackageCheck,
+  PackageX,
+  ShoppingBag,
+  UserPlus,
+  UserX
+} from "lucide-react";
+const KINDS = {
+  "merchant.new_order": { Icon: ShoppingBag, label: "Order", tone: "good" },
+  "booking.new_alert": { Icon: CalendarCheck, label: "Booking", tone: "good" },
+  "merchant.low_stock": { Icon: Package, label: "Stock", tone: "warning" },
+  "merchant.support_reply": {
+    Icon: LifeBuoy,
+    label: "Support",
+    tone: "info"
+  },
+  "merchant.new_inquiry": { Icon: Inbox, label: "Enquiry", tone: "info" },
+  "merchant.team_member_joined": {
+    Icon: UserPlus,
+    label: "Team",
+    tone: "neutral"
+  },
+  // A shop's own riders. Each links to the order (`/dashboard/orders/:id`).
+  "delivery.delivered": { Icon: PackageCheck, label: "Delivery", tone: "good" },
+  "delivery.failed": { Icon: PackageX, label: "Delivery", tone: "warning" },
+  "delivery.declined": { Icon: UserX, label: "Delivery", tone: "warning" },
+  "delivery.not_accepted": { Icon: Clock, label: "Delivery", tone: "warning" }
+};
+function notificationKind(type) {
+  return KINDS[type] ?? { Icon: Bell, label: "Update", tone: "neutral" };
+}
+const TONE_DOT = {
+  good: "var(--success)",
+  warning: "var(--warning)",
+  info: "var(--brand-500)",
+  neutral: "var(--text-muted)"
+};
+export {
+  TONE_DOT,
+  notificationKind
+};
+//# sourceMappingURL=notification-kinds.js.map

package/dist/shell/notification-kinds.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/notification-kinds.ts"],"sourcesContent":["import {\n  Bell,\n  CalendarCheck,\n  Clock,\n  Inbox,\n  LifeBuoy,\n  Package,\n  PackageCheck,\n  PackageX,\n  ShoppingBag,\n  UserPlus,\n  UserX,\n  type LucideIcon,\n} from 'lucide-react';\n\n/** The colour of the dot on a notification's tile: what kind of news it is. */\nexport type NotificationTone = 'good' | 'warning' | 'info' | 'neutral';\n\nexport interface NotificationKind {\n  Icon: LucideIcon;\n  /** The context line under the title, before the time. */\n  label: string;\n  tone: NotificationTone;\n}\n\nconst KINDS: Record<string, NotificationKind> = {\n  'merchant.new_order': { Icon: ShoppingBag, label: 'Order', tone: 'good' },\n  'booking.new_alert': { Icon: CalendarCheck, label: 'Booking', tone: 'good' },\n  'merchant.low_stock': { Icon: Package, label: 'Stock', tone: 'warning' },\n  'merchant.support_reply': {\n    Icon: LifeBuoy,\n    label: 'Support',\n    tone: 'info',\n  },\n  'merchant.new_inquiry': { Icon: Inbox, label: 'Enquiry', tone: 'info' },\n  'merchant.team_member_joined': {\n    Icon: UserPlus,\n    label: 'Team',\n    tone: 'neutral',\n  },\n  // A shop's own riders. Each links to the order (`/dashboard/orders/:id`).\n  'delivery.delivered': { Icon: PackageCheck, label: 'Delivery', tone: 'good' },\n  'delivery.failed': { Icon: PackageX, label: 'Delivery', tone: 'warning' },\n  'delivery.declined': { Icon: UserX, label: 'Delivery', tone: 'warning' },\n  'delivery.not_accepted': { Icon: Clock, label: 'Delivery', tone: 'warning' },\n};\n\n/** How a notification of this type is drawn. A type nobody has styled is still a bell. */\nexport function notificationKind(type: string): NotificationKind {\n  return KINDS[type] ?? { Icon: Bell, label: 'Update', tone: 'neutral' };\n}\n\nexport const TONE_DOT: Record<NotificationTone, string> = {\n  good: 'var(--success)',\n  warning: 'var(--warning)',\n  info: 'var(--brand-500)',\n  neutral: 'var(--text-muted)',\n};\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAYP,MAAM,QAA0C;AAAA,EAC9C,sBAAsB,EAAE,MAAM,aAAa,OAAO,SAAS,MAAM,OAAO;AAAA,EACxE,qBAAqB,EAAE,MAAM,eAAe,OAAO,WAAW,MAAM,OAAO;AAAA,EAC3E,sBAAsB,EAAE,MAAM,SAAS,OAAO,SAAS,MAAM,UAAU;AAAA,EACvE,0BAA0B;AAAA,IACxB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,wBAAwB,EAAE,MAAM,OAAO,OAAO,WAAW,MAAM,OAAO;AAAA,EACtE,+BAA+B;AAAA,IAC7B,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA;AAAA,EAEA,sBAAsB,EAAE,MAAM,cAAc,OAAO,YAAY,MAAM,OAAO;AAAA,EAC5E,mBAAmB,EAAE,MAAM,UAAU,OAAO,YAAY,MAAM,UAAU;AAAA,EACxE,qBAAqB,EAAE,MAAM,OAAO,OAAO,YAAY,MAAM,UAAU;AAAA,EACvE,yBAAyB,EAAE,MAAM,OAAO,OAAO,YAAY,MAAM,UAAU;AAC7E;AAGO,SAAS,iBAAiB,MAAgC;AAC/D,SAAO,MAAM,IAAI,KAAK,EAAE,MAAM,MAAM,OAAO,UAAU,MAAM,UAAU;AACvE;AAEO,MAAM,WAA6C;AAAA,EACxD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX;","names":[]}

package/dist/shell/notification-row.d.ts

@@ -0,0 +1,14 @@
+import type { MerchantNotification } from '@withpotter/lib/api/types';
+/**
+ * One notification: a tile for what kind of news it is, with a dot for how it
+ * went, the headline, and where and when underneath.
+ *
+ * Unread reads at full strength on a tinted row and read recedes, so a long
+ * list shows what is waiting without a second marker.
+ */
+export declare function NotificationRow({ notification, when, onOpen, }: {
+    notification: MerchantNotification;
+    /** The age, already worded ("just now", "5m ago"). */
+    when: string;
+    onOpen: () => void;
+}): import("react").JSX.Element;

package/dist/shell/notification-row.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { notificationKind, TONE_DOT } from "./notification-kinds";
+function NotificationRow({
+  notification,
+  when,
+  onOpen
+}) {
+  const { Icon, label, tone } = notificationKind(notification.type);
+  const unread = !notification.readAt;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onOpen,
+      title: notification.body || void 0,
+      className: `flex w-full items-start gap-2 px-3 py-2 text-left transition-colors hover:bg-[var(--interactive-hover)] ${unread ? "bg-[var(--bg-subtle)]" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative shrink-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-9 place-items-center rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)] text-[var(--text-secondary)]", children: /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": true }) }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute -right-0.5 -top-0.5 size-3 rounded-full ring-2 ring-[var(--bg-base)]",
+              style: { background: TONE_DOT[tone] }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `block truncate text-sm leading-snug ${unread ? "font-medium text-[var(--text-primary)]" : "text-[var(--text-tertiary)]"}`,
+              children: notification.title
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "mt-0.5 block truncate text-xs text-[var(--text-tertiary)]", children: [
+            label,
+            " \xB7 ",
+            when
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  NotificationRow
+};
+//# sourceMappingURL=notification-row.js.map

package/dist/shell/notification-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/notification-row.tsx"],"sourcesContent":["import type { MerchantNotification } from '@withpotter/lib/api/types';\nimport { notificationKind, TONE_DOT } from './notification-kinds';\n\n/**\n * One notification: a tile for what kind of news it is, with a dot for how it\n * went, the headline, and where and when underneath.\n *\n * Unread reads at full strength on a tinted row and read recedes, so a long\n * list shows what is waiting without a second marker.\n */\nexport function NotificationRow({\n  notification,\n  when,\n  onOpen,\n}: {\n  notification: MerchantNotification;\n  /** The age, already worded (\"just now\", \"5m ago\"). */\n  when: string;\n  onOpen: () => void;\n}) {\n  const { Icon, label, tone } = notificationKind(notification.type);\n  const unread = !notification.readAt;\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onOpen}\n      title={notification.body || undefined}\n      className={`flex w-full items-start gap-2 px-3 py-2 text-left transition-colors hover:bg-[var(--interactive-hover)] ${\n        unread ? 'bg-[var(--bg-subtle)]' : ''\n      }`}\n    >\n      <span className=\"relative shrink-0\">\n        <span className=\"grid size-9 place-items-center rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)] text-[var(--text-secondary)]\">\n          <Icon className=\"size-4\" aria-hidden />\n        </span>\n        <span\n          aria-hidden\n          className=\"absolute -right-0.5 -top-0.5 size-3 rounded-full ring-2 ring-[var(--bg-base)]\"\n          style={{ background: TONE_DOT[tone] }}\n        />\n      </span>\n      <span className=\"min-w-0 flex-1\">\n        <span\n          className={`block truncate text-sm leading-snug ${\n            unread\n              ? 'font-medium text-[var(--text-primary)]'\n              : 'text-[var(--text-tertiary)]'\n          }`}\n        >\n          {notification.title}\n        </span>\n        <span className=\"mt-0.5 block truncate text-xs text-[var(--text-tertiary)]\">\n          {label} · {when}\n        </span>\n      </span>\n    </button>\n  );\n}\n"],"mappings":"AAgCM,SAEI,KAFJ;AA/BN,SAAS,kBAAkB,gBAAgB;AASpC,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,EAAE,MAAM,OAAO,KAAK,IAAI,iBAAiB,aAAa,IAAI;AAChE,QAAM,SAAS,CAAC,aAAa;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO,aAAa,QAAQ;AAAA,MAC5B,WAAW,2GACT,SAAS,0BAA0B,EACrC;AAAA,MAEA;AAAA,6BAAC,UAAK,WAAU,qBACd;AAAA,8BAAC,UAAK,WAAU,mIACd,8BAAC,QAAK,WAAU,UAAS,eAAW,MAAC,GACvC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cACV,OAAO,EAAE,YAAY,SAAS,IAAI,EAAE;AAAA;AAAA,UACtC;AAAA,WACF;AAAA,QACA,qBAAC,UAAK,WAAU,kBACd;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,uCACT,SACI,2CACA,6BACN;AAAA,cAEC,uBAAa;AAAA;AAAA,UAChB;AAAA,UACA,qBAAC,UAAK,WAAU,6DACb;AAAA;AAAA,YAAM;AAAA,YAAI;AAAA,aACb;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/shell/plan-upgrade-link.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An Upgrade row at the foot of the menu, for the owner, when the admin
+ * switches it on and there is another public plan to move to. A row, not a
+ * card: the rail carries no cards.
+ */
+export declare function PlanUpgradeLink({ collapsed }: {
+    collapsed?: boolean;
+}): import("react").JSX.Element | null;

package/dist/shell/plan-upgrade-link.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { CircleArrowUp } from "lucide-react";
+import { PLAN_PAGE } from "@withpotter/lib/plan-access";
+import { useMerchantPlans } from "@withpotter/lib/use-merchant-plan";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+function PlanUpgradeLink({ collapsed = false }) {
+  const { data } = useMerchantPlans();
+  const { isOwner } = usePermissions();
+  const other = data?.plans.some((p) => p.id !== data.currentPlanId);
+  if (!data?.display.menuUpgrade || !isOwner || !other) return null;
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: PLAN_PAGE,
+      className: `side-foot-link ${collapsed ? "!w-7 !justify-center !gap-0 !px-0" : ""}`,
+      "aria-label": "Upgrade your plan",
+      children: [
+        /* @__PURE__ */ jsx(CircleArrowUp, { className: "h-4 w-4 text-[var(--accent-primary)]", "aria-hidden": true }),
+        !collapsed && /* @__PURE__ */ jsx("span", { children: "Upgrade" })
+      ]
+    }
+  );
+}
+export {
+  PlanUpgradeLink
+};
+//# sourceMappingURL=plan-upgrade-link.js.map

package/dist/shell/plan-upgrade-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/plan-upgrade-link.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { CircleArrowUp } from 'lucide-react';\nimport { PLAN_PAGE } from '@withpotter/lib/plan-access';\nimport { useMerchantPlans } from '@withpotter/lib/use-merchant-plan';\nimport { usePermissions } from '@withpotter/lib/use-permissions';\n\n/**\n * An Upgrade row at the foot of the menu, for the owner, when the admin\n * switches it on and there is another public plan to move to. A row, not a\n * card: the rail carries no cards.\n */\nexport function PlanUpgradeLink({ collapsed = false }: { collapsed?: boolean }) {\n  const { data } = useMerchantPlans();\n  const { isOwner } = usePermissions();\n  const other = data?.plans.some((p) => p.id !== data.currentPlanId);\n\n  if (!data?.display.menuUpgrade || !isOwner || !other) return null;\n\n  return (\n    <Link\n      href={PLAN_PAGE}\n      className={`side-foot-link ${collapsed ? '!w-7 !justify-center !gap-0 !px-0' : ''}`}\n      aria-label=\"Upgrade your plan\"\n    >\n      <CircleArrowUp className=\"h-4 w-4 text-[var(--accent-primary)]\" aria-hidden />\n      {!collapsed && <span>Upgrade</span>}\n    </Link>\n  );\n}\n"],"mappings":";AAqBI,SAKE,KALF;AAnBJ,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAOxB,SAAS,gBAAgB,EAAE,YAAY,MAAM,GAA4B;AAC9E,QAAM,EAAE,KAAK,IAAI,iBAAiB;AAClC,QAAM,EAAE,QAAQ,IAAI,eAAe;AACnC,QAAM,QAAQ,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK,aAAa;AAEjE,MAAI,CAAC,MAAM,QAAQ,eAAe,CAAC,WAAW,CAAC,MAAO,QAAO;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAW,kBAAkB,YAAY,sCAAsC,EAAE;AAAA,MACjF,cAAW;AAAA,MAEX;AAAA,4BAAC,iBAAc,WAAU,wCAAuC,eAAW,MAAC;AAAA,QAC3E,CAAC,aAAa,oBAAC,UAAK,qBAAO;AAAA;AAAA;AAAA,EAC9B;AAEJ;","names":[]}

package/dist/shell/product-switcher.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The business switcher: one trigger, one scope.
+ *
+ * Ordered by hierarchy, not by scope: the business you are in (a header block,
+ * not a row), then *Switch to* the ones you could be in, then the person they
+ * belong to (`switcher-account-group`). Out of this menu on purpose: the theme
+ * flip (a preference, it rides the footer), Plan & billing, the team row and
+ * business settings (footer rows now), and the plan label under the name. A
+ * merchant presses this to change business, so every row between them and that
+ * is in the way.
+ */
+export declare function ProductSwitcher({ variant, }?: {
+    /**
+     * `head` is the flat row at the top of the rail: mark and name only, with
+     * search beside it (see `side-head` in shell.css).
+     * `foot` is the same switcher drawn as a flat row at the bottom of the rail
+     * (mark, name, chevron) whose menu opens UPWARD, because there is no room
+     * under it. Same menu, same state, same keyboard walk.
+     */
+    variant?: 'top' | 'foot' | 'head';
+}): import("react").JSX.Element;

package/dist/shell/product-switcher.js

@@ -0,0 +1,299 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "motion/react";
+import { durations, eases, springs } from "@withpotter/lib/motion";
+import { useRouter } from "next/navigation";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+import { Check, ChevronDown, Settings, UserPlus } from "lucide-react";
+import { useSidebarCards } from "./sidebar-cards";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { WorkspaceMark } from "./workspace-mark";
+import { businessCategoryLabel } from "@withpotter/lib/business-categories";
+import { byRecentlyUsed, noteWorkspaceUsed } from "@withpotter/lib/workspace-recents";
+import { SwitcherScrim } from "./switcher-scrim";
+import { SwitcherWorkspaceList } from "./switcher-workspace-list";
+import { CreateBusinessModal } from "@withpotter/components/create-business-modal";
+import { useSettingsModal } from "./settings-modal-context";
+import { ShellIcon } from "./icons";
+import { TeamModal } from "@withpotter/pages-core/dashboard/settings/team/_components/team-modal";
+import {
+  LocationScopePin,
+  SwitcherLocationGroup
+} from "./switcher-location-group";
+const INLINE_WORKSPACES = 2;
+function ProductSwitcher({
+  variant = "top"
+} = {}) {
+  const foot = variant === "foot";
+  const head = variant === "head";
+  const { tenant, user, workspaces, switchWorkspace, logout } = useAuth();
+  const planLabel = useSidebarCards()?.planLabel;
+  const router = useRouter();
+  const { can, loading: permissionsLoading } = usePermissions();
+  const canManageTeam = can("canManageTeam") && !permissionsLoading;
+  const [open, setOpen] = useState(false);
+  const [showCreate, setShowCreate] = useState(false);
+  const { openSettings } = useSettingsModal();
+  const [teamOpen, setTeamOpen] = useState(false);
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 280 });
+  const btnRef = useRef(null);
+  const popRef = useRef(null);
+  useEffect(() => {
+    if (tenant?.slug) noteWorkspaceUsed(tenant.slug);
+  }, [tenant?.slug]);
+  const toggle = () => {
+    if (!open) {
+      const b = btnRef.current?.getBoundingClientRect();
+      if (b)
+        setPos({
+          ...foot ? { bottom: window.innerHeight - b.top + 6 } : { top: b.bottom + 6 },
+          left: b.left,
+          width: Math.max(b.width, 280)
+        });
+    }
+    setOpen((v) => !v);
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (popRef.current?.contains(e.target) || e.target?.closest?.("[data-pv-psw-flyout]") || 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);
+    popRef.current?.focus();
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("resize", dismiss);
+    };
+  }, [open]);
+  const onMenuKey = (e) => {
+    if (e.key === "Tab") {
+      setOpen(false);
+      return;
+    }
+    const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : e.key === "Home" || e.key === "End" ? 0 : null;
+    if (step === null) return;
+    e.preventDefault();
+    const items = Array.from(
+      popRef.current?.querySelectorAll("button, a[href]") ?? []
+    );
+    if (!items.length) return;
+    if (step === 0) {
+      (e.key === "Home" ? items[0] : items[items.length - 1]).focus();
+      return;
+    }
+    const at = items.indexOf(document.activeElement);
+    items[(at + step + items.length) % items.length].focus();
+  };
+  const name = tenant?.businessName ?? "Your business";
+  const describe = (w) => [w.role !== "owner" ? w.role : "", businessCategoryLabel(w.tenant)].filter(Boolean).join(" \xB7 ");
+  const activeDescription = useMemo(() => {
+    const mine = workspaces.find((w) => w.tenant.slug === tenant?.slug);
+    if (mine) return describe(mine);
+    return tenant ? businessCategoryLabel(tenant) : "";
+  }, [workspaces, tenant]);
+  const go = (href) => {
+    setOpen(false);
+    router.push(href);
+  };
+  const onSwitch = async (slug) => {
+    setOpen(false);
+    if (slug === tenant?.slug) return;
+    await switchWorkspace(slug);
+    router.replace("/dashboard");
+  };
+  const listed = useMemo(
+    () => byRecentlyUsed(
+      workspaces.filter((w) => w.tenant.slug !== tenant?.slug),
+      (w) => w.tenant.slug
+    ),
+    // Re-read on every switch: the slug changing IS the event that reorders
+    // this, and it is the only one that can happen while the menu is mounted.
+    [workspaces, tenant?.slug]
+  );
+  const shown = listed.slice(0, INLINE_WORKSPACES);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        ref: btnRef,
+        className: "pswitch" + (foot ? " pswitch-foot" : "") + (head ? " pswitch-head" : "") + (activeDescription && variant === "top" ? " has-sub" : "") + (open ? " open" : ""),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: toggle,
+        title: name,
+        children: [
+          /* @__PURE__ */ jsx(
+            WorkspaceMark,
+            {
+              className: "wmark",
+              logo: tenant?.businessLogo,
+              label: name
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "pl", children: [
+            /* @__PURE__ */ jsx("b", { children: name }),
+            activeDescription && variant === "top" && /* @__PURE__ */ jsx("span", { children: activeDescription })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "sw", children: [
+            /* @__PURE__ */ jsx(LocationScopePin, {}),
+            foot || head ? /* @__PURE__ */ jsx(ChevronDown, { width: 15, height: 15 }) : /* @__PURE__ */ jsx(ShellIcon.updown, { width: 15, height: 15 })
+          ] })
+        ]
+      }
+    ),
+    typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+        open && /* @__PURE__ */ jsx(SwitcherScrim, {}, "scrim"),
+        open && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            ref: popRef,
+            className: "pv-psw-menu",
+            tabIndex: -1,
+            role: "menu",
+            "aria-label": "Businesses and account",
+            onKeyDown: onMenuKey,
+            initial: { opacity: 0, scale: 0.96, y: foot ? 4 : -4 },
+            animate: { opacity: 1, scale: 1, y: 0 },
+            transition: springs.gentle,
+            exit: {
+              opacity: 0,
+              scale: 0.98,
+              y: foot ? 2 : -2,
+              transition: { duration: durations.fast, ease: eases.out }
+            },
+            style: {
+              top: pos.top,
+              bottom: pos.bottom,
+              left: pos.left,
+              minWidth: pos.width,
+              transformOrigin: foot ? "bottom left" : "top left"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": `This business: ${name}`, children: [
+                tenant && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "pv-psw-item current",
+                    role: "menuitem",
+                    "aria-current": "true",
+                    onClick: () => onSwitch(tenant.slug),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        WorkspaceMark,
+                        {
+                          className: "pv-psw-ic",
+                          logo: tenant.businessLogo,
+                          label: name
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "pv-psw-txt", children: [
+                        /* @__PURE__ */ jsx("b", { children: name }),
+                        activeDescription && /* @__PURE__ */ jsx("span", { className: "cap", children: activeDescription })
+                      ] }),
+                      planLabel && /* @__PURE__ */ jsx("span", { className: "pv-psw-plan", children: planLabel }),
+                      /* @__PURE__ */ jsx(Check, { className: "pv-psw-check", width: 15, height: 15 })
+                    ]
+                  }
+                ),
+                canManageTeam && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "pv-psw-row",
+                    role: "menuitem",
+                    onClick: () => {
+                      setOpen(false);
+                      setTeamOpen(true);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(UserPlus, { width: 15, height: 15 }),
+                      "Invite your team"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SwitcherLocationGroup,
+                  {
+                    onPicked: () => setOpen(false),
+                    onManage: () => go("/dashboard/operations/locations")
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "pv-psw-row",
+                    role: "menuitem",
+                    onClick: () => {
+                      setOpen(false);
+                      openSettings();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Settings, { width: 15, height: 15 }),
+                      "Settings"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "pv-psw-sep" }),
+              /* @__PURE__ */ jsx(
+                SwitcherWorkspaceList,
+                {
+                  shown,
+                  total: workspaces.length,
+                  describe,
+                  onSwitch,
+                  onAdd: () => {
+                    setOpen(false);
+                    setShowCreate(true);
+                  },
+                  onManage: () => go("/dashboard/workspaces"),
+                  user: user ?? void 0,
+                  onAccount: () => {
+                    setOpen(false);
+                    openSettings("/dashboard/settings/profile");
+                  },
+                  onLogout: () => {
+                    setOpen(false);
+                    logout();
+                  },
+                  onClose: () => setOpen(false)
+                }
+              )
+            ]
+          },
+          "menu"
+        )
+      ] }),
+      document.body
+    ),
+    /* @__PURE__ */ jsx(
+      CreateBusinessModal,
+      {
+        open: showCreate,
+        onClose: () => setShowCreate(false)
+      }
+    ),
+    teamOpen && /* @__PURE__ */ jsx(TeamModal, { open: true, initialInvite: true, onClose: () => setTeamOpen(false) })
+  ] });
+}
+export {
+  ProductSwitcher
+};
+//# sourceMappingURL=product-switcher.js.map

package/dist/shell/product-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/product-switcher.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { durations, eases, springs } from '@withpotter/lib/motion';\nimport { useRouter } from 'next/navigation';\nimport { usePermissions } from '@withpotter/lib/use-permissions';\nimport { Check, ChevronDown, Settings, UserPlus } from 'lucide-react';\nimport { useSidebarCards } from './sidebar-cards';\nimport { useAuth, type Workspace } from '@withpotter/lib/auth-context';\nimport { WorkspaceMark } from './workspace-mark';\nimport { businessCategoryLabel } from '@withpotter/lib/business-categories';\nimport { byRecentlyUsed, noteWorkspaceUsed } from '@withpotter/lib/workspace-recents';\nimport { SwitcherScrim } from './switcher-scrim';\nimport { SwitcherWorkspaceList } from './switcher-workspace-list';\nimport { CreateBusinessModal } from '@withpotter/components/create-business-modal';\nimport { useSettingsModal } from './settings-modal-context';\nimport { ShellIcon } from './icons';\nimport { TeamModal } from '@withpotter/pages-core/dashboard/settings/team/_components/team-modal';\nimport {\n  LocationScopePin,\n  SwitcherLocationGroup,\n} from './switcher-location-group';\n\n/**\n * How many other workspaces the menu lists before deferring to the page.\n *\n * Two, and the two most recently opened — John, 2026-08-23. Three rows of\n * somewhere-else was the largest block in a menu whose subject is the\n * workspace you are in, and picking which two by recency is the only ordering\n * that gets better the more the menu is used. See `workspace-recents`.\n */\nconst INLINE_WORKSPACES = 2;\n\n/**\n * The business switcher: one trigger, one scope.\n *\n * Ordered by hierarchy, not by scope: the business you are in (a header block,\n * not a row), then *Switch to* the ones you could be in, then the person they\n * belong to (`switcher-account-group`). Out of this menu on purpose: the theme\n * flip (a preference, it rides the footer), Plan & billing, the team row and\n * business settings (footer rows now), and the plan label under the name. A\n * merchant presses this to change business, so every row between them and that\n * is in the way.\n */\nexport function ProductSwitcher({\n  variant = 'top',\n}: {\n  /**\n   * `head` is the flat row at the top of the rail: mark and name only, with\n   * search beside it (see `side-head` in shell.css).\n   * `foot` is the same switcher drawn as a flat row at the bottom of the rail\n   * (mark, name, chevron) whose menu opens UPWARD, because there is no room\n   * under it. Same menu, same state, same keyboard walk.\n   */\n  variant?: 'top' | 'foot' | 'head';\n} = {}) {\n  const foot = variant === 'foot';\n  const head = variant === 'head';\n  const { tenant, user, workspaces, switchWorkspace, logout } = useAuth();\n  const planLabel = useSidebarCards()?.planLabel;\n  const router = useRouter();\n  const { can, loading: permissionsLoading } = usePermissions();\n  // False while the membership request is in flight, so the row appears when\n  // the answer arrives rather than flashing at somebody who turns out to be\n  // staff.\n  const canManageTeam = can('canManageTeam') && !permissionsLoading;\n  const [open, setOpen] = useState(false);\n  const [showCreate, setShowCreate] = useState(false);\n  // The settings window is one shared modal (`SettingsModalProvider`), so closing\n  // this menu cannot unmount it.\n  const { openSettings } = useSettingsModal();\n  // Mounted only while open: the modal reads the whole team on mount.\n  const [teamOpen, setTeamOpen] = useState(false);\n  const [pos, setPos] = useState<{\n    top?: number;\n    bottom?: number;\n    left: number;\n    width: number;\n  }>({ top: 0, left: 0, width: 280 });\n  const btnRef = useRef<HTMLButtonElement>(null);\n  const popRef = useRef<HTMLDivElement>(null);\n\n  /**\n   * Stamp the workspace you are in as the most recently used one.\n   *\n   * Here rather than in `persistActiveWorkspace`, which is the tidier choke\n   * point and the wrong place to spend lines: auth-context is on the file-size\n   * ledger and must shrink, not grow. This is equivalent — the shell renders\n   * for every workspace that becomes active, whatever route made it active —\n   * and it keeps the whole feature in the one component that reads it.\n   */\n  useEffect(() => {\n    if (tenant?.slug) noteWorkspaceUsed(tenant.slug);\n  }, [tenant?.slug]);\n\n  // Measure at click time (not in an effect) so the portaled menu is\n  // positioned before it paints.\n  const toggle = () => {\n    if (!open) {\n      const b = btnRef.current?.getBoundingClientRect();\n      if (b)\n        setPos({\n          ...(foot\n            ? { bottom: window.innerHeight - b.top + 6 }\n            : { top: b.bottom + 6 }),\n          left: b.left,\n          width: Math.max(b.width, 280),\n        });\n    }\n    setOpen((v) => !v);\n  };\n\n  useEffect(() => {\n    if (!open) return;\n    const onDoc = (e: MouseEvent) => {\n      if (\n        popRef.current?.contains(e.target as Node) ||\n        (e.target as Element | null)?.closest?.('[data-pv-psw-flyout]') ||\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    // This is the app's primary navigation surface, so it has to be usable\n    // from the keyboard alone: opening lands on the first control and the\n    // arrows walk the list.\n    //\n    // THE MENU, not its first row. There is nothing to type into any more, so\n    // focusing the first control puts a ring on the workspace you are already\n    // in the instant the menu opens, which reads as a selected row rather than\n    // a landing place. The container takes focus instead and the arrow handler\n    // below walks into the list from there — `indexOf` returns -1 for the\n    // container, so ArrowDown lands on the first item.\n    popRef.current?.focus();\n    return () => {\n      document.removeEventListener('mousedown', onDoc);\n      window.removeEventListener('keydown', onKey);\n      window.removeEventListener('resize', dismiss);\n    };\n  }, [open]);\n\n  const onMenuKey = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Tab') {\n      setOpen(false);\n      return;\n    }\n    const step =\n      e.key === 'ArrowDown'\n        ? 1\n        : e.key === 'ArrowUp'\n          ? -1\n          : e.key === 'Home' || e.key === 'End'\n            ? 0\n            : null;\n    if (step === null) return;\n    e.preventDefault();\n    // `button, a[href]` — not `button`. Help & support is a real Link so it can\n    // be cmd-clicked like any destination, and a selector of `button` alone\n    // walked straight past it: the one row in this menu that leaves the app for\n    // a page was the one row the arrows could not reach.\n    const items = Array.from(\n      popRef.current?.querySelectorAll<HTMLElement>('button, a[href]') ?? [],\n    );\n    if (!items.length) return;\n    if (step === 0) {\n      (e.key === 'Home' ? items[0] : items[items.length - 1]).focus();\n      return;\n    }\n    const at = items.indexOf(document.activeElement as HTMLElement);\n    items[(at + step + items.length) % items.length].focus();\n  };\n\n  const name = tenant?.businessName ?? 'Your business';\n\n  /** Sub-line for a row: what kind of business it is, prefixed by a role worth naming. */\n  const describe = (w: Workspace) =>\n    [w.role !== 'owner' ? w.role : '', businessCategoryLabel(w.tenant)]\n      .filter(Boolean)\n      .join(' · ');\n\n  /**\n   * What the workspace you are in is, in the sub-line the list rows use.\n   *\n   * Off the workspace ENTRY where there is one, because that is what carries\n   * your role here; `tenant` alone can only answer the category half.\n   */\n  const activeDescription = useMemo(() => {\n    const mine = workspaces.find((w) => w.tenant.slug === tenant?.slug);\n    if (mine) return describe(mine);\n    return tenant ? businessCategoryLabel(tenant) : '';\n  }, [workspaces, tenant]);\n\n  const go = (href: string) => {\n    setOpen(false);\n    router.push(href);\n  };\n\n  const onSwitch = async (slug: string) => {\n    setOpen(false);\n    if (slug === tenant?.slug) return;\n    // Soft swap: switchWorkspace swaps the tenant in context and every\n    // useAuth() consumer re-renders. Refresh server segments only — no reload.\n    await switchWorkspace(slug);\n    router.replace('/dashboard');\n  };\n\n  /**\n   * Everywhere but here. The workspace you are in leads the menu as the first\n   * row of its own group, ticked and carrying its picture and its category —\n   * so listing it again down here would be the same row twice, which is what\n   * the tick had to distinguish it from.\n   */\n  const listed = useMemo(\n    () =>\n      byRecentlyUsed(\n        workspaces.filter((w) => w.tenant.slug !== tenant?.slug),\n        (w) => w.tenant.slug,\n      ),\n    // Re-read on every switch: the slug changing IS the event that reorders\n    // this, and it is the only one that can happen while the menu is mounted.\n    [workspaces, tenant?.slug],\n  );\n\n  // The first few, and a way to the rest. There is no filter here any more:\n  // John, 2026-08-23, \"take out the search bar\". It only ever appeared above\n  // three workspaces, it was the first thing focus landed on, and the page it\n  // defers to can search properly.\n  const shown = listed.slice(0, INLINE_WORKSPACES);\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        ref={btnRef}\n        className={\n          'pswitch' +\n          (foot ? ' pswitch-foot' : '') +\n          (head ? ' pswitch-head' : '') +\n          (activeDescription && variant === 'top' ? ' has-sub' : '') +\n          (open ? ' open' : '')\n        }\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={toggle}\n        title={name}\n      >\n        <WorkspaceMark\n          className=\"wmark\"\n          logo={tenant?.businessLogo}\n          label={name}\n        />\n        <span className=\"pl\">\n          <b>{name}</b>\n          {/* What the business IS, where the plan label used to be (John,\n              2026-08-23) — a fact about the workspace rather than a billing\n              status, which is what the most permanent line in the app should\n              hold. Absent when nothing is stored, and the card drops a step\n              rather than holding the space open. Set in Settings → General. */}\n          {activeDescription && variant === 'top' && (\n            <span>{activeDescription}</span>\n          )}\n        </span>\n        <span className=\"sw\">\n          <LocationScopePin />\n          {foot || head ? (\n            <ChevronDown width={15} height={15} />\n          ) : (\n            <ShellIcon.updown width={15} height={15} />\n          )}\n        </span>\n      </button>\n\n      {/* AnimatePresence INSIDE the portal, and the portal itself is only\n          rendered once there is somewhere to put it. `{open && createPortal(…)}`\n          ripped the menu out of the tree the moment it closed, so it arrived on\n          a spring and vanished on a frame — the exact defect `FormDialog`\n          documents for `{editing && <FormDialog/>}`. */}\n      {/* `document` rather than a mounted flag: the portal's children are\n          `open && …`, which is false on the first client render, so it puts\n          nothing in the DOM and there is no markup for the server to disagree\n          with. A state-in-effect flag would have been one render pass to learn\n          what `typeof` already knows. */}\n      {typeof document !== 'undefined' &&\n        createPortal(\n          <AnimatePresence>\n            {open && <SwitcherScrim key=\"scrim\" />}\n            {open && (\n              <motion.div\n                key=\"menu\"\n                ref={popRef}\n                className=\"pv-psw-menu\"\n                tabIndex={-1}\n                role=\"menu\"\n                aria-label=\"Businesses and account\"\n                onKeyDown={onMenuKey}\n                /* THE MOTION SYSTEM, not a 140ms CSS keyframe (John, 2026-08-23).\n               `springs.gentle` is the surface preset every dialog and sheet\n               arrives on; this menu was one of the hand-rolled surfaces that\n               never got it. It grows from its top-left, the corner nearest the\n               trigger, so it reads as coming OUT of the control. No exit, for\n               the reason `PageTransition` gives: a dismissed menu lingering\n               delays whatever you pressed it to reach. */\n                initial={{ opacity: 0, scale: 0.96, y: foot ? 4 : -4 }}\n                animate={{ opacity: 1, scale: 1, y: 0 }}\n                transition={springs.gentle}\n                /* IT LEAVES FASTER THAN IT ARRIVES. The note above is still true —\n               a dismissed menu lingering delays whatever you pressed it to\n               reach — but \"no delay\" and \"no motion\" are different things, and\n               what shipped was the second. So the exit is a tween at\n               `--motion-fast`, half the arrival and on the way OUT of the same\n               corner: gone before you can want it gone, and still a movement\n               rather than a cut. */\n                exit={{\n                  opacity: 0,\n                  scale: 0.98,\n                  y: foot ? 2 : -2,\n                  transition: { duration: durations.fast, ease: eases.out },\n                }}\n                style={{\n                  top: pos.top,\n                  bottom: pos.bottom,\n                  left: pos.left,\n                  minWidth: pos.width,\n                  transformOrigin: foot ? 'bottom left' : 'top left',\n                }}\n              >\n                {/* NO ROWS ABOVE THE LIST AT ALL NOW, and that is the end of\n                a sequence rather than a fourth opinion. Workspace settings and\n                the team went to the rail (John, 2026-09-03); the heading and\n                the rule under this group went with them; and Plan & billing\n                went last, once we had actually checked what it describes.\n\n                WHY PLAN & BILLING WENT. John, 2026-09-03: *\"exactly no plans\n                just credits.\"* There is one plan and nothing renews it; what a\n                merchant can buy is credits. It is a settings page\n                (/dashboard/settings/billing), reached through Workspace\n                settings in the rail.\n\n                SO THE MENU IS WHAT IT SAYS IT IS — the workspace you are in,\n                then the ones you are not, then you.\n\n                THE WORKSPACE ITSELF LEADS IT. John, 2026-08-23: *\"the active\n                workspace should be on top the workspace settings.\"* It had\n                been a row down in the list wearing a tick, which is where you\n                look to CHANGE workspace, not to read which one you are in —\n                and it left the rows above it acting on a business nothing on\n                screen had named. As the group's first row it is both: the\n                name, the picture and the kind of business, ticked, with what\n                you can do to it directly beneath.\n\n                It stays pressable rather than becoming a static block, because\n                a row that looks like the rows under it should behave like\n                them. `onSwitch` returns early on the slug you are already on,\n                so the press is a no-op rather than a reload. */}\n                <div role=\"group\" aria-label={`This business: ${name}`}>\n                  {tenant && (\n                    <button\n                      type=\"button\"\n                      className=\"pv-psw-item current\"\n                      role=\"menuitem\"\n                      aria-current=\"true\"\n                      onClick={() => onSwitch(tenant.slug)}\n                    >\n                      <WorkspaceMark\n                        className=\"pv-psw-ic\"\n                        logo={tenant.businessLogo}\n                        label={name}\n                      />\n                      <span className=\"pv-psw-txt\">\n                        <b>{name}</b>\n                        {/* The SAME sub-line the rows below use, and guarded the\n                        same way. It was `businessCategoryLabel` written out\n                        again, rendered unconditionally — so a workspace with\n                        no category stored (which is most of them until\n                        somebody picks one) got an empty span holding open a\n                        line, and the row you are in was the one row in the\n                        menu wearing a blank where its neighbours wore\n                        nothing. `describe` also carries the role, which the\n                        rows below show and this one silently dropped. */}\n                        {activeDescription && (\n                          <span className=\"cap\">{activeDescription}</span>\n                        )}\n                      </span>\n                      {planLabel && <span className=\"pv-psw-plan\">{planLabel}</span>}\n                      <Check className=\"pv-psw-check\" width={15} height={15} />\n                    </button>\n                  )}\n                  {/* What you can do to the business you are in, directly beneath\n                      it. Back in the menu on John's call, 2026-10-04 (it had\n                      moved to a rail row on 2026-09-03). */}\n                  {canManageTeam && (\n                    <button\n                      type=\"button\"\n                      className=\"pv-psw-row\"\n                      role=\"menuitem\"\n                      onClick={() => {\n                        setOpen(false);\n                        setTeamOpen(true);\n                      }}\n                    >\n                      <UserPlus width={15} height={15} />\n                      Invite your team\n                    </button>\n                  )}\n                  <SwitcherLocationGroup\n                    onPicked={() => setOpen(false)}\n                    onManage={() => go('/dashboard/operations/locations')}\n                  />\n                  <button\n                    type=\"button\"\n                    className=\"pv-psw-row\"\n                    role=\"menuitem\"\n                    onClick={() => {\n                      setOpen(false);\n                      openSettings();\n                    }}\n                  >\n                    <Settings width={15} height={15} />\n                    Settings\n                  </button>\n                </div>\n\n                {/* Closes off the active business and its actions — only when\n                    there is something under it. */}\n                <div className=\"pv-psw-sep\" />\n\n                <SwitcherWorkspaceList\n                  shown={shown}\n                  total={workspaces.length}\n                  describe={describe}\n                  onSwitch={onSwitch}\n                  onAdd={() => {\n                    setOpen(false);\n                    setShowCreate(true);\n                  }}\n                  onManage={() => go('/dashboard/workspaces')}\n                  user={user ?? undefined}\n                  onAccount={() => {\n                    setOpen(false);\n                    openSettings('/dashboard/settings/profile');\n                  }}\n                  onLogout={() => {\n                    setOpen(false);\n                    logout();\n                  }}\n                  onClose={() => setOpen(false)}\n                />\n              </motion.div>\n            )}\n          </AnimatePresence>,\n          document.body,\n        )}\n\n      <CreateBusinessModal\n        open={showCreate}\n        onClose={() => setShowCreate(false)}\n      />\n\n      {teamOpen && (\n        <TeamModal open initialInvite onClose={() => setTeamOpen(false)} />\n      )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/record-payment-picker.d.ts

@@ -0,0 +1,4 @@
+export declare function RecordPaymentPicker({ open, onClose, }: {
+    open: boolean;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/shell/record-payment-picker.js

@@ -0,0 +1,76 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from "@withpotter/ui-kit/dialog";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { invoicesApi } from "@withpotter/lib/api/invoices";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { RecordPaymentModal } from "@withpotter/pages-finance/dashboard/(finance)/invoices/_components";
+import { asList } from "@withpotter/lib/utils";
+import { EmptyNote } from "@withpotter/ui-kit";
+const NOT_OWED = /* @__PURE__ */ new Set(["draft", "cancelled", "paid"]);
+function RecordPaymentPicker({
+  open,
+  onClose
+}) {
+  const { tenant } = useAuth();
+  const formatCurrency = useFormatCurrency();
+  const [picked, setPicked] = useState(null);
+  const { data, isPending } = useApiQuery(
+    ["record-payment-candidates"],
+    (slug) => invoicesApi.list(slug, { limit: 50 }),
+    { enabled: open }
+  );
+  const invoices = asList(data?.invoices).filter(
+    (i) => i.amountDue > 0 && !NOT_OWED.has(i.status)
+  );
+  const listLoading = isPending && open;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dialog, { open: open && !picked, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Record a payment" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Which one was paid? Money that arrived by transfer or cash." })
+      ] }),
+      listLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-10", children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-[var(--text-tertiary)]" }) }) : invoices.length === 0 ? /* @__PURE__ */ jsx(EmptyNote, { children: "Nothing is waiting to be paid." }) : /* @__PURE__ */ jsx("ul", { className: "max-h-80 divide-y divide-[var(--border-subtle)] overflow-y-auto", children: invoices.map((invoice) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setPicked(invoice),
+          className: "flex w-full items-center justify-between gap-3 px-1 py-3 text-left transition-colors hover:bg-[var(--interactive-hover)]",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "block truncate text-sm text-[var(--text-primary)]", children: invoice.customerName || invoice.customerEmail }),
+              /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-[var(--text-tertiary)]", children: invoice.invoiceNumber })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "flex-none text-sm tabular-nums text-[var(--text-primary)]", children: formatCurrency(invoice.amountDue) })
+          ]
+        }
+      ) }, invoice.id)) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      RecordPaymentModal,
+      {
+        open: !!picked,
+        invoice: picked,
+        tenantSlug: tenant?.slug ?? "",
+        onClose: () => setPicked(null),
+        onRecorded: () => {
+          setPicked(null);
+          onClose();
+        }
+      }
+    )
+  ] });
+}
+export {
+  RecordPaymentPicker
+};
+//# sourceMappingURL=record-payment-picker.js.map