@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/tenants/[id]/commerce/layout.module.css

@@ -0,0 +1,27 @@
+/* The commerce view: bands stacked on the section rhythm. */
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-width: 0;
+}
+
+.stack > :global(.adm-grid) + :global(.adm-grid) {
+  margin-top: 0;
+}
+
+.cell {
+  min-width: 0;
+}
+
+/* Sections the flow jumps to: land clear of the top bar, no focus box. */
+.anchor,
+.stack > [id] {
+  min-width: 0;
+  scroll-margin-top: 80px;
+}
+
+.stack > [id]:focus:not(:focus-visible) {
+  outline: none;
+}

package/dist/admin/tenants/[id]/commerce/merchant-commerce.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  usePlatformTenant,
+  useTenantAnalytics,
+  useTenantProductInsights,
+  useTenantTransactions
+} from "../../../hooks";
+import { BestSellers } from "./best-sellers";
+import { CommerceFlow, flowSteps } from "./commerce-flow";
+import { moneyIn } from "./format";
+import { InventoryHealth } from "./inventory-health";
+import { ItemsGallery } from "./items-gallery";
+import { MoneyPanel } from "./money-panel";
+import { OwnerCard } from "./owner-card";
+import { useModuleOn } from "../../../_shell/modules-context";
+import { RecentOrders } from "./recent-orders";
+import styles from "./layout.module.css";
+function MerchantCommerce({
+  tenantId,
+  currency,
+  range
+}) {
+  const span = { startDate: range.startDate, endDate: range.endDate };
+  const ownerView = useModuleOn("ownerView");
+  const tenant = usePlatformTenant(tenantId, span);
+  const analytics = useTenantAnalytics(tenantId, span);
+  const insights = useTenantProductInsights(tenantId, {
+    startDate: range.startDate
+  });
+  const ledger = useTenantTransactions(tenantId, { type: "order", limit: 50 });
+  const cur = insights.data?.currency || currency;
+  const money = moneyIn(cur);
+  const orderStats = analytics.data?.orderStats;
+  const inv = insights.data;
+  const owner = tenant.data?.owner ?? null;
+  const steps = flowSteps({
+    items: inv?.totalProducts ?? null,
+    activeItems: inv?.activeProducts ?? null,
+    orders: tenant.data?.metrics.window.orders ?? orderStats?.total ?? null,
+    paidOrders: tenant.data?.metrics.window.paidOrders ?? null,
+    goingOut: orderStats?.going_out ?? null,
+    unfulfilled: orderStats?.unfulfilled ?? null,
+    stockValue: inv?.inventoryValue ?? null,
+    attention: inv ? inv.lowStock + inv.outOfStock : null,
+    money
+  });
+  return /* @__PURE__ */ jsxs("div", { className: styles.stack, children: [
+    /* @__PURE__ */ jsx(
+      CommerceFlow,
+      {
+        steps,
+        loading: insights.isLoading || tenant.isLoading || analytics.isLoading
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: "commerce-items", tabIndex: -1, className: styles.anchor, children: /* @__PURE__ */ jsx(ItemsGallery, { tenantId, currency: cur }) }),
+    /* @__PURE__ */ jsxs("div", { id: "commerce-stock", tabIndex: -1, className: "adm-grid", children: [
+      /* @__PURE__ */ jsx("div", { className: `adm-span-7 ${styles.cell}`, children: /* @__PURE__ */ jsx(
+        InventoryHealth,
+        {
+          data: inv,
+          loading: insights.isLoading,
+          money
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: `adm-span-5 ${styles.cell}`, children: /* @__PURE__ */ jsx(BestSellers, { data: inv, loading: insights.isLoading, money }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { id: "commerce-orders", tabIndex: -1, className: "adm-grid", children: [
+      /* @__PURE__ */ jsx("div", { className: `adm-span-8 ${styles.cell}`, children: /* @__PURE__ */ jsx(
+        RecentOrders,
+        {
+          orders: tenant.data?.recentOrders ?? [],
+          stats: orderStats,
+          transactions: ledger.data?.transactions ?? [],
+          loading: tenant.isLoading,
+          statsLoading: analytics.isLoading,
+          currency: tenant.data?.currency || cur
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: `adm-span-4 ${styles.cell}`, children: /* @__PURE__ */ jsx(
+        MoneyPanel,
+        {
+          transactions: (ledger.data?.transactions ?? []).slice(0, 12),
+          total: ledger.data?.pagination.total ?? 0,
+          loading: ledger.isLoading,
+          error: ledger.isError,
+          onRetry: () => ledger.refetch()
+        }
+      ) })
+    ] }),
+    ownerView && /* @__PURE__ */ jsx(
+      OwnerCard,
+      {
+        ownerAccountId: owner?.accountId ?? null,
+        ownerName: owner?.name ?? owner?.email ?? null
+      }
+    )
+  ] });
+}
+export {
+  MerchantCommerce
+};
+//# sourceMappingURL=merchant-commerce.js.map

package/dist/admin/tenants/[id]/commerce/merchant-commerce.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/merchant-commerce.tsx"],"sourcesContent":["'use client';\n\nimport {\n  usePlatformTenant,\n  useTenantAnalytics,\n  useTenantProductInsights,\n  useTenantTransactions,\n} from '../../../hooks';\nimport type { DateRange } from '../../../_ui';\nimport { BestSellers } from './best-sellers';\nimport { CommerceFlow, flowSteps } from './commerce-flow';\nimport { moneyIn } from './format';\nimport { InventoryHealth } from './inventory-health';\nimport { ItemsGallery } from './items-gallery';\nimport { MoneyPanel } from './money-panel';\nimport { OwnerCard } from './owner-card';\nimport { useModuleOn } from '../../../_shell/modules-context';\nimport { RecentOrders } from './recent-orders';\nimport styles from './layout.module.css';\n\n/**\n * One merchant's commerce, read-only: what they sell, how orders move, how\n * healthy the shelves are, and the money behind the orders. Fulfilment and\n * stock movements are merchant-only, so they open as the owner.\n */\nexport function MerchantCommerce({\n  tenantId,\n  currency,\n  range,\n}: {\n  tenantId: string;\n  currency: string;\n  range: DateRange;\n}) {\n  const span = { startDate: range.startDate, endDate: range.endDate };\n  const ownerView = useModuleOn('ownerView');\n  const tenant = usePlatformTenant(tenantId, span);\n  const analytics = useTenantAnalytics(tenantId, span);\n  const insights = useTenantProductInsights(tenantId, {\n    startDate: range.startDate,\n  });\n  const ledger = useTenantTransactions(tenantId, { type: 'order', limit: 50 });\n\n  const cur = insights.data?.currency || currency;\n  const money = moneyIn(cur);\n  const orderStats = analytics.data?.orderStats;\n  const inv = insights.data;\n  const owner = tenant.data?.owner ?? null;\n\n  const steps = flowSteps({\n    items: inv?.totalProducts ?? null,\n    activeItems: inv?.activeProducts ?? null,\n    orders: tenant.data?.metrics.window.orders ?? orderStats?.total ?? null,\n    paidOrders: tenant.data?.metrics.window.paidOrders ?? null,\n    goingOut: orderStats?.going_out ?? null,\n    unfulfilled: orderStats?.unfulfilled ?? null,\n    stockValue: inv?.inventoryValue ?? null,\n    attention: inv ? inv.lowStock + inv.outOfStock : null,\n    money,\n  });\n\n  return (\n    <div className={styles.stack}>\n      <CommerceFlow\n        steps={steps}\n        loading={insights.isLoading || tenant.isLoading || analytics.isLoading}\n      />\n\n      <div id=\"commerce-items\" tabIndex={-1} className={styles.anchor}>\n        <ItemsGallery tenantId={tenantId} currency={cur} />\n      </div>\n\n      <div id=\"commerce-stock\" tabIndex={-1} className=\"adm-grid\">\n        <div className={`adm-span-7 ${styles.cell}`}>\n          <InventoryHealth\n            data={inv}\n            loading={insights.isLoading}\n            money={money}\n          />\n        </div>\n        <div className={`adm-span-5 ${styles.cell}`}>\n          <BestSellers data={inv} loading={insights.isLoading} money={money} />\n        </div>\n      </div>\n\n      <div id=\"commerce-orders\" tabIndex={-1} className=\"adm-grid\">\n        <div className={`adm-span-8 ${styles.cell}`}>\n          <RecentOrders\n            orders={tenant.data?.recentOrders ?? []}\n            stats={orderStats}\n            transactions={ledger.data?.transactions ?? []}\n            loading={tenant.isLoading}\n            statsLoading={analytics.isLoading}\n            currency={tenant.data?.currency || cur}\n          />\n        </div>\n        <div className={`adm-span-4 ${styles.cell}`}>\n          <MoneyPanel\n            transactions={(ledger.data?.transactions ?? []).slice(0, 12)}\n            total={ledger.data?.pagination.total ?? 0}\n            loading={ledger.isLoading}\n            error={ledger.isError}\n            onRetry={() => ledger.refetch()}\n          />\n        </div>\n      </div>\n\n      {ownerView && (\n        <OwnerCard\n          ownerAccountId={owner?.accountId ?? null}\n          ownerName={owner?.name ?? owner?.email ?? null}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA+DM,cASA,YATA;AA7DN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAC5B,SAAS,cAAc,iBAAiB;AACxC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,OAAO,YAAY;AAOZ,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,OAAO,EAAE,WAAW,MAAM,WAAW,SAAS,MAAM,QAAQ;AAClE,QAAM,YAAY,YAAY,WAAW;AACzC,QAAM,SAAS,kBAAkB,UAAU,IAAI;AAC/C,QAAM,YAAY,mBAAmB,UAAU,IAAI;AACnD,QAAM,WAAW,yBAAyB,UAAU;AAAA,IAClD,WAAW,MAAM;AAAA,EACnB,CAAC;AACD,QAAM,SAAS,sBAAsB,UAAU,EAAE,MAAM,SAAS,OAAO,GAAG,CAAC;AAE3E,QAAM,MAAM,SAAS,MAAM,YAAY;AACvC,QAAM,QAAQ,QAAQ,GAAG;AACzB,QAAM,aAAa,UAAU,MAAM;AACnC,QAAM,MAAM,SAAS;AACrB,QAAM,QAAQ,OAAO,MAAM,SAAS;AAEpC,QAAM,QAAQ,UAAU;AAAA,IACtB,OAAO,KAAK,iBAAiB;AAAA,IAC7B,aAAa,KAAK,kBAAkB;AAAA,IACpC,QAAQ,OAAO,MAAM,QAAQ,OAAO,UAAU,YAAY,SAAS;AAAA,IACnE,YAAY,OAAO,MAAM,QAAQ,OAAO,cAAc;AAAA,IACtD,UAAU,YAAY,aAAa;AAAA,IACnC,aAAa,YAAY,eAAe;AAAA,IACxC,YAAY,KAAK,kBAAkB;AAAA,IACnC,WAAW,MAAM,IAAI,WAAW,IAAI,aAAa;AAAA,IACjD;AAAA,EACF,CAAC;AAED,SACE,qBAAC,SAAI,WAAW,OAAO,OACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,SAAS,aAAa,OAAO,aAAa,UAAU;AAAA;AAAA,IAC/D;AAAA,IAEA,oBAAC,SAAI,IAAG,kBAAiB,UAAU,IAAI,WAAW,OAAO,QACvD,8BAAC,gBAAa,UAAoB,UAAU,KAAK,GACnD;AAAA,IAEA,qBAAC,SAAI,IAAG,kBAAiB,UAAU,IAAI,WAAU,YAC/C;AAAA,0BAAC,SAAI,WAAW,cAAc,OAAO,IAAI,IACvC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,SAAS,SAAS;AAAA,UAClB;AAAA;AAAA,MACF,GACF;AAAA,MACA,oBAAC,SAAI,WAAW,cAAc,OAAO,IAAI,IACvC,8BAAC,eAAY,MAAM,KAAK,SAAS,SAAS,WAAW,OAAc,GACrE;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,IAAG,mBAAkB,UAAU,IAAI,WAAU,YAChD;AAAA,0BAAC,SAAI,WAAW,cAAc,OAAO,IAAI,IACvC;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,OAAO,MAAM,gBAAgB,CAAC;AAAA,UACtC,OAAO;AAAA,UACP,cAAc,OAAO,MAAM,gBAAgB,CAAC;AAAA,UAC5C,SAAS,OAAO;AAAA,UAChB,cAAc,UAAU;AAAA,UACxB,UAAU,OAAO,MAAM,YAAY;AAAA;AAAA,MACrC,GACF;AAAA,MACA,oBAAC,SAAI,WAAW,cAAc,OAAO,IAAI,IACvC;AAAA,QAAC;AAAA;AAAA,UACC,eAAe,OAAO,MAAM,gBAAgB,CAAC,GAAG,MAAM,GAAG,EAAE;AAAA,UAC3D,OAAO,OAAO,MAAM,WAAW,SAAS;AAAA,UACxC,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,UACd,SAAS,MAAM,OAAO,QAAQ;AAAA;AAAA,MAChC,GACF;AAAA,OACF;AAAA,IAEC,aACC;AAAA,MAAC;AAAA;AAAA,QACC,gBAAgB,OAAO,aAAa;AAAA,QACpC,WAAW,OAAO,QAAQ,OAAO,SAAS;AAAA;AAAA,IAC5C;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/admin/tenants/[id]/commerce/money-panel.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@withpotter/ui-kit";
+import { Reveal } from "../../../_fx";
+import { Panel, Skeleton } from "../../../_ui";
+import { moneyIn, shortDate } from "./format";
+import { StatusPill } from "./status-pill";
+import styles from "./money.module.css";
+function MoneyPanel({
+  transactions,
+  total,
+  loading,
+  error,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsx(
+    Panel,
+    {
+      title: "Money behind orders",
+      count: total || void 0,
+      height: "calc(var(--adm-panel-h) + 120px)",
+      children: error ? /* @__PURE__ */ jsxs("div", { className: styles.state, children: [
+        /* @__PURE__ */ jsx("p", { className: styles.muted, children: "The payments could not be loaded." }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onRetry, children: "Try again" })
+      ] }) : loading ? /* @__PURE__ */ jsx("div", { className: styles.list, "aria-busy": "true", children: Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { height: 44, radius: 8 }, i)) }) : transactions.length === 0 ? /* @__PURE__ */ jsx("p", { className: styles.muted, children: "No order payments yet. Each paid order adds a line here." }) : /* @__PURE__ */ jsx("ul", { className: styles.list, children: transactions.map((t, i) => /* @__PURE__ */ jsxs(Reveal, { as: "li", index: i, className: styles.row, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.main, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: styles.who,
+              title: t.customer?.name || t.customer?.email || t.reference,
+              children: t.customer?.name || t.customer?.email || t.reference
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: styles.muted, children: [
+            shortDate(t.createdAt),
+            " \xB7 ",
+            t.channel || "Online"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.side, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.amount, children: moneyIn(t.currency, 2)(t.amount) }),
+          /* @__PURE__ */ jsx(StatusPill, { status: t.status })
+        ] })
+      ] }, t.id)) })
+    }
+  );
+}
+export {
+  MoneyPanel
+};
+//# sourceMappingURL=money-panel.js.map

package/dist/admin/tenants/[id]/commerce/money-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/money-panel.tsx"],"sourcesContent":["'use client';\n\nimport type { Transaction } from '@withpotter/lib/admin-api';\nimport { Button } from '@withpotter/ui-kit';\nimport { Reveal } from '../../../_fx';\nimport { Panel, Skeleton } from '../../../_ui';\nimport { moneyIn, shortDate } from './format';\nimport { StatusPill } from './status-pill';\nimport styles from './money.module.css';\n\n/** Payments taken against orders, newest first. */\nexport function MoneyPanel({\n  transactions,\n  total,\n  loading,\n  error,\n  onRetry,\n}: {\n  transactions: Transaction[];\n  total: number;\n  loading: boolean;\n  error: boolean;\n  onRetry: () => void;\n}) {\n  return (\n    <Panel\n      title=\"Money behind orders\"\n      count={total || undefined}\n      height=\"calc(var(--adm-panel-h) + 120px)\"\n    >\n      {error ? (\n        <div className={styles.state}>\n          <p className={styles.muted}>The payments could not be loaded.</p>\n          <Button size=\"sm\" variant=\"secondary\" onClick={onRetry}>\n            Try again\n          </Button>\n        </div>\n      ) : loading ? (\n        <div className={styles.list} aria-busy=\"true\">\n          {Array.from({ length: 6 }, (_, i) => (\n            <Skeleton key={i} height={44} radius={8} />\n          ))}\n        </div>\n      ) : transactions.length === 0 ? (\n        <p className={styles.muted}>\n          No order payments yet. Each paid order adds a line here.\n        </p>\n      ) : (\n        <ul className={styles.list}>\n          {transactions.map((t, i) => (\n            <Reveal as=\"li\" key={t.id} index={i} className={styles.row}>\n              <div className={styles.main}>\n                <span\n                  className={styles.who}\n                  title={t.customer?.name || t.customer?.email || t.reference}\n                >\n                  {t.customer?.name || t.customer?.email || t.reference}\n                </span>\n                <span className={styles.muted}>\n                  {shortDate(t.createdAt)} · {t.channel || 'Online'}\n                </span>\n              </div>\n              <div className={styles.side}>\n                <span className={styles.amount}>\n                  {moneyIn(t.currency, 2)(t.amount)}\n                </span>\n                <StatusPill status={t.status} />\n              </div>\n            </Reveal>\n          ))}\n        </ul>\n      )}\n    </Panel>\n  );\n}\n"],"mappings":";AA+BQ,SACE,KADF;AA5BR,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,OAAO,gBAAgB;AAChC,SAAS,SAAS,iBAAiB;AACnC,SAAS,kBAAkB;AAC3B,OAAO,YAAY;AAGZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAO,SAAS;AAAA,MAChB,QAAO;AAAA,MAEN,kBACC,qBAAC,SAAI,WAAW,OAAO,OACrB;AAAA,4BAAC,OAAE,WAAW,OAAO,OAAO,+CAAiC;AAAA,QAC7D,oBAAC,UAAO,MAAK,MAAK,SAAQ,aAAY,SAAS,SAAS,uBAExD;AAAA,SACF,IACE,UACF,oBAAC,SAAI,WAAW,OAAO,MAAM,aAAU,QACpC,gBAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAC7B,oBAAC,YAAiB,QAAQ,IAAI,QAAQ,KAAvB,CAA0B,CAC1C,GACH,IACE,aAAa,WAAW,IAC1B,oBAAC,OAAE,WAAW,OAAO,OAAO,sEAE5B,IAEA,oBAAC,QAAG,WAAW,OAAO,MACnB,uBAAa,IAAI,CAAC,GAAG,MACpB,qBAAC,UAAO,IAAG,MAAgB,OAAO,GAAG,WAAW,OAAO,KACrD;AAAA,6BAAC,SAAI,WAAW,OAAO,MACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,OAAO;AAAA,cAClB,OAAO,EAAE,UAAU,QAAQ,EAAE,UAAU,SAAS,EAAE;AAAA,cAEjD,YAAE,UAAU,QAAQ,EAAE,UAAU,SAAS,EAAE;AAAA;AAAA,UAC9C;AAAA,UACA,qBAAC,UAAK,WAAW,OAAO,OACrB;AAAA,sBAAU,EAAE,SAAS;AAAA,YAAE;AAAA,YAAI,EAAE,WAAW;AAAA,aAC3C;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAW,OAAO,MACrB;AAAA,8BAAC,UAAK,WAAW,OAAO,QACrB,kBAAQ,EAAE,UAAU,CAAC,EAAE,EAAE,MAAM,GAClC;AAAA,UACA,oBAAC,cAAW,QAAQ,EAAE,QAAQ;AAAA,WAChC;AAAA,WAjBmB,EAAE,EAkBvB,CACD,GACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/admin/tenants/[id]/commerce/money.module.css

@@ -0,0 +1,122 @@
+/* Payments taken against orders, and the owner hand-off card. */
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.who {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.side {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.amount {
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.muted {
+  margin: 0;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.owner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  border-radius: var(--adm-card-radius);
+  background: var(--bg-base);
+  box-shadow: var(--adm-shadow-1);
+}
+
+.ownerText {
+  flex: 1;
+  min-width: 220px;
+}
+
+.ownerTitle {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--text-primary);
+}
+
+.ownerSub {
+  margin: 0;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--text-secondary);
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ownerAction {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  max-width: 280px;
+}
+
+.ownerHint {
+  font-size: 12px;
+  line-height: 16px;
+  text-align: right;
+  color: var(--text-tertiary);
+}

package/dist/admin/tenants/[id]/commerce/order-drawer.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "../../../_ui";
+import { humanize, moneyIn } from "./format";
+import { StatusPill } from "./status-pill";
+import styles from "./drawer.module.css";
+const when = (iso) => new Intl.DateTimeFormat("en", {
+  dateStyle: "medium",
+  timeStyle: "short"
+}).format(new Date(iso));
+function OrderDrawer({
+  order,
+  transactions,
+  currency,
+  onClose
+}) {
+  const o = order;
+  const money = moneyIn(o?.currency || currency, 2);
+  const linked = o ? transactions.filter((t) => t.relatedRecords?.orderId === o.id) : [];
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      open: !!o,
+      onClose,
+      title: o ? `Order ${o.orderNumber}` : "",
+      subtitle: o ? o.customerName || o.customerEmail : void 0,
+      meta: o ? /* @__PURE__ */ jsxs("span", { className: styles.drawerMeta, children: [
+        /* @__PURE__ */ jsx(StatusPill, { status: o.status }),
+        /* @__PURE__ */ jsx(StatusPill, { status: o.paymentStatus })
+      ] }) : void 0,
+      children: o && /* @__PURE__ */ jsxs("div", { className: styles.drawerBody, children: [
+        /* @__PURE__ */ jsxs("dl", { className: styles.facts, children: [
+          /* @__PURE__ */ jsx("dt", { children: "Total" }),
+          /* @__PURE__ */ jsx("dd", { className: styles.num, children: money(o.total) }),
+          /* @__PURE__ */ jsx("dt", { children: "Customer" }),
+          /* @__PURE__ */ jsx("dd", { title: o.customerEmail, children: o.customerName || "\u2013" }),
+          /* @__PURE__ */ jsx("dt", { children: "Email" }),
+          /* @__PURE__ */ jsx("dd", { title: o.customerEmail, children: o.customerEmail || "\u2013" }),
+          /* @__PURE__ */ jsx("dt", { children: "Placed" }),
+          /* @__PURE__ */ jsx("dd", { children: when(o.createdAt) })
+        ] }),
+        /* @__PURE__ */ jsx("h3", { className: styles.drawerHeading, children: "Money behind this order" }),
+        linked.length === 0 ? /* @__PURE__ */ jsx("p", { className: styles.muted, children: "No payment is recorded against this order in the recent ledger." }) : /* @__PURE__ */ jsx("ul", { className: styles.ledger, children: linked.map((t) => /* @__PURE__ */ jsxs("li", { className: styles.ledgerRow, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.ledgerMain, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.mono, title: t.reference, children: t.reference }),
+            /* @__PURE__ */ jsxs("span", { className: styles.muted, children: [
+              humanize(t.channel || t.type),
+              " \xB7 fee",
+              " ",
+              moneyIn(t.currency, 2)(t.fee)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.ledgerSide, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.num, children: moneyIn(t.currency, 2)(t.amount) }),
+            /* @__PURE__ */ jsx(StatusPill, { status: t.status })
+          ] })
+        ] }, t.id)) })
+      ] })
+    }
+  );
+}
+export {
+  OrderDrawer
+};
+//# sourceMappingURL=order-drawer.js.map

package/dist/admin/tenants/[id]/commerce/order-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/order-drawer.tsx"],"sourcesContent":["'use client';\n\nimport type { TenantActivityOrder, Transaction } from '@withpotter/lib/admin-api';\nimport { Drawer } from '../../../_ui';\nimport { humanize, moneyIn } from './format';\nimport { StatusPill } from './status-pill';\nimport styles from './drawer.module.css';\n\nconst when = (iso: string) =>\n  new Intl.DateTimeFormat('en', {\n    dateStyle: 'medium',\n    timeStyle: 'short',\n  }).format(new Date(iso));\n\n/** One order: who, how much, where it stands, and the money behind it. */\nexport function OrderDrawer({\n  order,\n  transactions,\n  currency,\n  onClose,\n}: {\n  order: TenantActivityOrder | null;\n  transactions: Transaction[];\n  currency: string;\n  onClose: () => void;\n}) {\n  const o = order;\n  const money = moneyIn(o?.currency || currency, 2);\n  const linked = o\n    ? transactions.filter((t) => t.relatedRecords?.orderId === o.id)\n    : [];\n\n  return (\n    <Drawer\n      open={!!o}\n      onClose={onClose}\n      title={o ? `Order ${o.orderNumber}` : ''}\n      subtitle={o ? o.customerName || o.customerEmail : undefined}\n      meta={\n        o ? (\n          <span className={styles.drawerMeta}>\n            <StatusPill status={o.status} />\n            <StatusPill status={o.paymentStatus} />\n          </span>\n        ) : undefined\n      }\n    >\n      {o && (\n        <div className={styles.drawerBody}>\n          <dl className={styles.facts}>\n            <dt>Total</dt>\n            <dd className={styles.num}>{money(o.total)}</dd>\n            <dt>Customer</dt>\n            <dd title={o.customerEmail}>{o.customerName || '–'}</dd>\n            <dt>Email</dt>\n            <dd title={o.customerEmail}>{o.customerEmail || '–'}</dd>\n            <dt>Placed</dt>\n            <dd>{when(o.createdAt)}</dd>\n          </dl>\n\n          <h3 className={styles.drawerHeading}>Money behind this order</h3>\n          {linked.length === 0 ? (\n            <p className={styles.muted}>\n              No payment is recorded against this order in the recent ledger.\n            </p>\n          ) : (\n            <ul className={styles.ledger}>\n              {linked.map((t) => (\n                <li key={t.id} className={styles.ledgerRow}>\n                  <div className={styles.ledgerMain}>\n                    <span className={styles.mono} title={t.reference}>\n                      {t.reference}\n                    </span>\n                    <span className={styles.muted}>\n                      {humanize(t.channel || t.type)} · fee{' '}\n                      {moneyIn(t.currency, 2)(t.fee)}\n                    </span>\n                  </div>\n                  <div className={styles.ledgerSide}>\n                    <span className={styles.num}>\n                      {moneyIn(t.currency, 2)(t.amount)}\n                    </span>\n                    <StatusPill status={t.status} />\n                  </div>\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n      )}\n    </Drawer>\n  );\n}\n"],"mappings":";AAwCU,SACE,KADF;AArCV,SAAS,cAAc;AACvB,SAAS,UAAU,eAAe;AAClC,SAAS,kBAAkB;AAC3B,OAAO,YAAY;AAEnB,MAAM,OAAO,CAAC,QACZ,IAAI,KAAK,eAAe,MAAM;AAAA,EAC5B,WAAW;AAAA,EACX,WAAW;AACb,CAAC,EAAE,OAAO,IAAI,KAAK,GAAG,CAAC;AAGlB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,IAAI;AACV,QAAM,QAAQ,QAAQ,GAAG,YAAY,UAAU,CAAC;AAChD,QAAM,SAAS,IACX,aAAa,OAAO,CAAC,MAAM,EAAE,gBAAgB,YAAY,EAAE,EAAE,IAC7D,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA,OAAO,IAAI,SAAS,EAAE,WAAW,KAAK;AAAA,MACtC,UAAU,IAAI,EAAE,gBAAgB,EAAE,gBAAgB;AAAA,MAClD,MACE,IACE,qBAAC,UAAK,WAAW,OAAO,YACtB;AAAA,4BAAC,cAAW,QAAQ,EAAE,QAAQ;AAAA,QAC9B,oBAAC,cAAW,QAAQ,EAAE,eAAe;AAAA,SACvC,IACE;AAAA,MAGL,eACC,qBAAC,SAAI,WAAW,OAAO,YACrB;AAAA,6BAAC,QAAG,WAAW,OAAO,OACpB;AAAA,8BAAC,QAAG,mBAAK;AAAA,UACT,oBAAC,QAAG,WAAW,OAAO,KAAM,gBAAM,EAAE,KAAK,GAAE;AAAA,UAC3C,oBAAC,QAAG,sBAAQ;AAAA,UACZ,oBAAC,QAAG,OAAO,EAAE,eAAgB,YAAE,gBAAgB,UAAI;AAAA,UACnD,oBAAC,QAAG,mBAAK;AAAA,UACT,oBAAC,QAAG,OAAO,EAAE,eAAgB,YAAE,iBAAiB,UAAI;AAAA,UACpD,oBAAC,QAAG,oBAAM;AAAA,UACV,oBAAC,QAAI,eAAK,EAAE,SAAS,GAAE;AAAA,WACzB;AAAA,QAEA,oBAAC,QAAG,WAAW,OAAO,eAAe,qCAAuB;AAAA,QAC3D,OAAO,WAAW,IACjB,oBAAC,OAAE,WAAW,OAAO,OAAO,6EAE5B,IAEA,oBAAC,QAAG,WAAW,OAAO,QACnB,iBAAO,IAAI,CAAC,MACX,qBAAC,QAAc,WAAW,OAAO,WAC/B;AAAA,+BAAC,SAAI,WAAW,OAAO,YACrB;AAAA,gCAAC,UAAK,WAAW,OAAO,MAAM,OAAO,EAAE,WACpC,YAAE,WACL;AAAA,YACA,qBAAC,UAAK,WAAW,OAAO,OACrB;AAAA,uBAAS,EAAE,WAAW,EAAE,IAAI;AAAA,cAAE;AAAA,cAAO;AAAA,cACrC,QAAQ,EAAE,UAAU,CAAC,EAAE,EAAE,GAAG;AAAA,eAC/B;AAAA,aACF;AAAA,UACA,qBAAC,SAAI,WAAW,OAAO,YACrB;AAAA,gCAAC,UAAK,WAAW,OAAO,KACrB,kBAAQ,EAAE,UAAU,CAAC,EAAE,EAAE,MAAM,GAClC;AAAA,YACA,oBAAC,cAAW,QAAQ,EAAE,QAAQ;AAAA,aAChC;AAAA,aAfO,EAAE,EAgBX,CACD,GACH;AAAA,SAEJ;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/admin/tenants/[id]/commerce/order-pipeline.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CountUp, Reveal } from "../../../_fx";
+import { Skeleton } from "../../../_ui";
+import styles from "./orders.module.css";
+const STAGES = [
+  { key: "pending", label: "Pending", tone: "pending" },
+  { key: "confirmed", label: "Confirmed", tone: "processing" },
+  { key: "processing", label: "Processing", tone: "processing" },
+  { key: "completed", label: "Completed", tone: "success" },
+  { key: "cancelled", label: "Cancelled", tone: "neutral" },
+  { key: "refunded", label: "Refunded", tone: "neutral" }
+];
+function OrderPipeline({
+  stats,
+  loading
+}) {
+  const counts = STAGES.map((s) => ({ ...s, n: Number(stats?.[s.key] ?? 0) }));
+  const sum = counts.reduce((a, s) => a + s.n, 0);
+  return /* @__PURE__ */ jsxs("div", { className: styles.pipeline, "aria-busy": loading, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.shareBar,
+        role: "img",
+        "aria-label": counts.map((s) => `${s.label} ${s.n}`).join(", "),
+        children: sum > 0 && counts.filter((s) => s.n > 0).map((s) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: styles.shareSeg,
+            "data-tone": s.tone,
+            style: { flexGrow: s.n }
+          },
+          s.key
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx("ol", { className: styles.stages, children: counts.map((s, i) => /* @__PURE__ */ jsxs(Reveal, { as: "li", index: i, className: styles.stage, children: [
+      /* @__PURE__ */ jsxs("span", { className: styles.stageLabel, "data-tone": s.tone, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.stageDot, "aria-hidden": true }),
+        s.label
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: styles.stageValue, children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: 40, height: 20 }) : /* @__PURE__ */ jsx(CountUp, { value: s.n }) })
+    ] }, s.key)) })
+  ] });
+}
+export {
+  OrderPipeline
+};
+//# sourceMappingURL=order-pipeline.js.map

package/dist/admin/tenants/[id]/commerce/order-pipeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/order-pipeline.tsx"],"sourcesContent":["'use client';\n\nimport type { DashboardStats } from '@withpotter/lib/admin-api';\nimport { CountUp, Reveal } from '../../../_fx';\nimport { Skeleton } from '../../../_ui';\nimport type { PillTone } from './format';\nimport styles from './orders.module.css';\n\ntype Stats = DashboardStats['orderStats'];\n\nconst STAGES: Array<{ key: keyof Stats; label: string; tone: PillTone }> = [\n  { key: 'pending', label: 'Pending', tone: 'pending' },\n  { key: 'confirmed', label: 'Confirmed', tone: 'processing' },\n  { key: 'processing', label: 'Processing', tone: 'processing' },\n  { key: 'completed', label: 'Completed', tone: 'success' },\n  { key: 'cancelled', label: 'Cancelled', tone: 'neutral' },\n  { key: 'refunded', label: 'Refunded', tone: 'neutral' },\n];\n\n/** Where every order in the window sits, as counts and one share bar. */\nexport function OrderPipeline({\n  stats,\n  loading,\n}: {\n  stats: Stats | undefined;\n  loading: boolean;\n}) {\n  const counts = STAGES.map((s) => ({ ...s, n: Number(stats?.[s.key] ?? 0) }));\n  const sum = counts.reduce((a, s) => a + s.n, 0);\n\n  return (\n    <div className={styles.pipeline} aria-busy={loading}>\n      <div\n        className={styles.shareBar}\n        role=\"img\"\n        aria-label={counts.map((s) => `${s.label} ${s.n}`).join(', ')}\n      >\n        {sum > 0 &&\n          counts\n            .filter((s) => s.n > 0)\n            .map((s) => (\n              <span\n                key={s.key}\n                className={styles.shareSeg}\n                data-tone={s.tone}\n                style={{ flexGrow: s.n }}\n              />\n            ))}\n      </div>\n      <ol className={styles.stages}>\n        {counts.map((s, i) => (\n          <Reveal as=\"li\" key={s.key} index={i} className={styles.stage}>\n            <span className={styles.stageLabel} data-tone={s.tone}>\n              <span className={styles.stageDot} aria-hidden />\n              {s.label}\n            </span>\n            <span className={styles.stageValue}>\n              {loading ? (\n                <Skeleton width={40} height={20} />\n              ) : (\n                <CountUp value={s.n} />\n              )}\n            </span>\n          </Reveal>\n        ))}\n      </ol>\n    </div>\n  );\n}\n"],"mappings":";AAyCc,cAWF,YAXE;AAtCd,SAAS,SAAS,cAAc;AAChC,SAAS,gBAAgB;AAEzB,OAAO,YAAY;AAInB,MAAM,SAAqE;AAAA,EACzE,EAAE,KAAK,WAAW,OAAO,WAAW,MAAM,UAAU;AAAA,EACpD,EAAE,KAAK,aAAa,OAAO,aAAa,MAAM,aAAa;AAAA,EAC3D,EAAE,KAAK,cAAc,OAAO,cAAc,MAAM,aAAa;AAAA,EAC7D,EAAE,KAAK,aAAa,OAAO,aAAa,MAAM,UAAU;AAAA,EACxD,EAAE,KAAK,aAAa,OAAO,aAAa,MAAM,UAAU;AAAA,EACxD,EAAE,KAAK,YAAY,OAAO,YAAY,MAAM,UAAU;AACxD;AAGO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AACF,GAGG;AACD,QAAM,SAAS,OAAO,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,GAAG,OAAO,QAAQ,EAAE,GAAG,KAAK,CAAC,EAAE,EAAE;AAC3E,QAAM,MAAM,OAAO,OAAO,CAAC,GAAG,MAAM,IAAI,EAAE,GAAG,CAAC;AAE9C,SACE,qBAAC,SAAI,WAAW,OAAO,UAAU,aAAW,SAC1C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,MAAK;AAAA,QACL,cAAY,OAAO,IAAI,CAAC,MAAM,GAAG,EAAE,KAAK,IAAI,EAAE,CAAC,EAAE,EAAE,KAAK,IAAI;AAAA,QAE3D,gBAAM,KACL,OACG,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,EACrB,IAAI,CAAC,MACJ;AAAA,UAAC;AAAA;AAAA,YAEC,WAAW,OAAO;AAAA,YAClB,aAAW,EAAE;AAAA,YACb,OAAO,EAAE,UAAU,EAAE,EAAE;AAAA;AAAA,UAHlB,EAAE;AAAA,QAIT,CACD;AAAA;AAAA,IACP;AAAA,IACA,oBAAC,QAAG,WAAW,OAAO,QACnB,iBAAO,IAAI,CAAC,GAAG,MACd,qBAAC,UAAO,IAAG,MAAiB,OAAO,GAAG,WAAW,OAAO,OACtD;AAAA,2BAAC,UAAK,WAAW,OAAO,YAAY,aAAW,EAAE,MAC/C;AAAA,4BAAC,UAAK,WAAW,OAAO,UAAU,eAAW,MAAC;AAAA,QAC7C,EAAE;AAAA,SACL;AAAA,MACA,oBAAC,UAAK,WAAW,OAAO,YACrB,oBACC,oBAAC,YAAS,OAAO,IAAI,QAAQ,IAAI,IAEjC,oBAAC,WAAQ,OAAO,EAAE,GAAG,GAEzB;AAAA,SAXmB,EAAE,GAYvB,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/tenants/[id]/commerce/orders.module.css

@@ -0,0 +1,154 @@
+/* Order pipeline, recent orders and the order sheet. */
+
+.pipeline {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 20px 16px;
+}
+
+.shareBar {
+  display: flex;
+  gap: 2px;
+  height: 8px;
+  overflow: hidden;
+  border-radius: 4px;
+  background: var(--bg-subtle);
+}
+
+/* The share bar is a data encoding, so it reads in Box blues: the deeper
+   the shade, the further the order got. Red is kept for real failures. */
+.shareSeg,
+.stageLabel {
+  --seg: var(--adm-cat-7);
+}
+
+.shareSeg {
+  flex-basis: 0;
+  min-width: 4px;
+  background: var(--seg);
+}
+
+.shareSeg[data-tone='success'],
+.stageLabel[data-tone='success'] {
+  --seg: var(--brand-600);
+}
+
+.shareSeg[data-tone='processing'],
+.stageLabel[data-tone='processing'] {
+  --seg: var(--brand-400);
+}
+
+.shareSeg[data-tone='pending'],
+.stageLabel[data-tone='pending'] {
+  --seg: var(--brand-200);
+}
+
+.shareSeg[data-tone='failed'],
+.stageLabel[data-tone='failed'] {
+  --seg: var(--error);
+}
+
+.stages {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.stage {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: var(--bg-subtle);
+}
+
+.stageLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}
+
+.stageDot {
+  width: 6px;
+  height: 6px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: var(--seg);
+}
+
+.stageValue {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.num {
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.mono {
+  font-family: var(--font-mono, monospace);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.truncate {
+  display: block;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.emptyCell,
+.muted {
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--text-secondary);
+}
+
+.emptyCell {
+  text-align: center;
+}
+
+@media (max-width: 1100px) {
+  .stages {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.orderLink {
+  max-width: 100%;
+  overflow: hidden;
+  color: inherit;
+  font: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.orderLink:hover {
+  color: var(--accent-ink, var(--accent-primary));
+}
+
+.orderLink:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}