@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/tenants/[id]/account-officer-dialog.js

@@ -0,0 +1,58 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Banner, Button, Field, FormDialog, Select } from "@withpotter/ui-kit";
+import { usePlatformAdmins } from "../../hooks";
+import { officerOptions } from "../account-officer-options";
+import { useSetAccountOfficer } from "./use-set-account-officer";
+function AccountOfficerDialog({
+  open,
+  tenantId,
+  name,
+  currentId,
+  onClose
+}) {
+  const admins = usePlatformAdmins();
+  const save = useSetAccountOfficer(tenantId);
+  const [picked, setPicked] = useState(currentId ?? "");
+  const options = officerOptions(admins.data);
+  const close = () => {
+    setPicked(currentId ?? "");
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(
+    FormDialog,
+    {
+      open,
+      title: `Account officer for ${name}`,
+      onClose: close,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: close, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            loading: save.isPending,
+            disabled: !picked || picked === currentId,
+            onClick: () => save.mutate(picked, { onSuccess: onClose }),
+            children: "Save"
+          }
+        )
+      ] }),
+      children: admins.isError ? /* @__PURE__ */ jsx(Banner, { tone: "error", children: "Could not load the admins list." }) : /* @__PURE__ */ jsx(Field, { label: "Account officer", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: picked,
+          onChange: setPicked,
+          options,
+          placeholder: admins.isLoading ? "Loading admins\u2026" : "Pick an admin",
+          ariaLabel: "Account officer",
+          searchable: true
+        }
+      ) })
+    }
+  );
+}
+export {
+  AccountOfficerDialog
+};
+//# sourceMappingURL=account-officer-dialog.js.map

package/dist/admin/tenants/[id]/account-officer-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/tenants/%5Bid%5D/account-officer-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Banner, Button, Field, FormDialog, Select } from '@withpotter/ui-kit';\nimport { usePlatformAdmins } from '../../hooks';\nimport { officerOptions } from '../account-officer-options';\nimport { useSetAccountOfficer } from './use-set-account-officer';\n\n/** Pick the active admin who looks after this merchant. */\nexport function AccountOfficerDialog({\n  open,\n  tenantId,\n  name,\n  currentId,\n  onClose,\n}: {\n  open: boolean;\n  tenantId: string;\n  name: string;\n  currentId: string | null;\n  onClose: () => void;\n}) {\n  const admins = usePlatformAdmins();\n  const save = useSetAccountOfficer(tenantId);\n  const [picked, setPicked] = useState(currentId ?? '');\n  const options = officerOptions(admins.data);\n  const close = () => {\n    setPicked(currentId ?? '');\n    onClose();\n  };\n\n  return (\n    <FormDialog\n      open={open}\n      title={`Account officer for ${name}`}\n      onClose={close}\n      footer={\n        <>\n          <Button variant=\"secondary\" onClick={close}>\n            Cancel\n          </Button>\n          <Button\n            loading={save.isPending}\n            disabled={!picked || picked === currentId}\n            onClick={() => save.mutate(picked, { onSuccess: onClose })}\n          >\n            Save\n          </Button>\n        </>\n      }\n    >\n      {admins.isError ? (\n        <Banner tone=\"error\">Could not load the admins list.</Banner>\n      ) : (\n        <Field label=\"Account officer\">\n          <Select\n            value={picked}\n            onChange={setPicked}\n            options={options}\n            placeholder={\n              admins.isLoading ? 'Loading admins…' : 'Pick an admin'\n            }\n            ariaLabel=\"Account officer\"\n            searchable\n          />\n        </Field>\n      )}\n    </FormDialog>\n  );\n}\n"],"mappings":";AAqCQ,mBACE,KADF;AAnCR,SAAS,gBAAgB;AACzB,SAAS,QAAQ,QAAQ,OAAO,YAAY,cAAc;AAC1D,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAG9B,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,SAAS,kBAAkB;AACjC,QAAM,OAAO,qBAAqB,QAAQ;AAC1C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,aAAa,EAAE;AACpD,QAAM,UAAU,eAAe,OAAO,IAAI;AAC1C,QAAM,QAAQ,MAAM;AAClB,cAAU,aAAa,EAAE;AACzB,YAAQ;AAAA,EACV;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,uBAAuB,IAAI;AAAA,MAClC,SAAS;AAAA,MACT,QACE,iCACE;AAAA,4BAAC,UAAO,SAAQ,aAAY,SAAS,OAAO,oBAE5C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,KAAK;AAAA,YACd,UAAU,CAAC,UAAU,WAAW;AAAA,YAChC,SAAS,MAAM,KAAK,OAAO,QAAQ,EAAE,WAAW,QAAQ,CAAC;AAAA,YAC1D;AAAA;AAAA,QAED;AAAA,SACF;AAAA,MAGD,iBAAO,UACN,oBAAC,UAAO,MAAK,SAAQ,6CAA+B,IAEpD,oBAAC,SAAM,OAAM,mBACX;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA,aACE,OAAO,YAAY,yBAAoB;AAAA,UAEzC,WAAU;AAAA,UACV,YAAU;AAAA;AAAA,MACZ,GACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/admin/tenants/[id]/account-officer.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useConfirm } from "@withpotter/ui-kit";
+import { useAdminSession } from "../../hooks";
+import { AccountOfficerDialog } from "./account-officer-dialog";
+import { useSetAccountOfficer } from "./use-set-account-officer";
+import styles from "./tenant-layout.module.css";
+function AccountOfficerLine({
+  tenantId,
+  name,
+  officer
+}) {
+  const confirm = useConfirm();
+  const { data: session } = useAdminSession();
+  const superadmin = session?.role === "superadmin";
+  const remove = useSetAccountOfficer(tenantId);
+  const [picking, setPicking] = useState(false);
+  const removeOfficer = async () => {
+    if (!officer) return;
+    const ok = await confirm({
+      title: `Remove ${officer.name} as account officer?`,
+      description: `${name} will have no account officer until you assign one.`,
+      confirmLabel: "Remove",
+      tone: "danger"
+    });
+    if (ok) remove.mutate(null);
+  };
+  return /* @__PURE__ */ jsxs("span", { className: styles.officer, children: [
+    "Account officer:",
+    " ",
+    officer ? /* @__PURE__ */ jsx("span", { title: officer.email, children: officer.name }) : "None",
+    superadmin && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPicking(true), children: officer ? "Change" : "Assign" }),
+    superadmin && officer && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-tone": "danger",
+        disabled: remove.isPending,
+        onClick: () => void removeOfficer(),
+        children: "Remove"
+      }
+    ),
+    picking && /* @__PURE__ */ jsx(
+      AccountOfficerDialog,
+      {
+        open: true,
+        tenantId,
+        name,
+        currentId: officer?.id ?? null,
+        onClose: () => setPicking(false)
+      }
+    )
+  ] });
+}
+export {
+  AccountOfficerLine
+};
+//# sourceMappingURL=account-officer.js.map

package/dist/admin/tenants/[id]/account-officer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/tenants/%5Bid%5D/account-officer.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useConfirm } from '@withpotter/ui-kit';\nimport type { AccountOfficer as Officer } from '@withpotter/lib/admin-account-officer-api';\nimport { useAdminSession } from '../../hooks';\nimport { AccountOfficerDialog } from './account-officer-dialog';\nimport { useSetAccountOfficer } from './use-set-account-officer';\nimport styles from './tenant-layout.module.css';\n\n/**\n * \"Account officer: Name\", with Assign, or Change and Remove for a superadmin,\n * who alone may pick one. Other admins see the name only.\n */\nexport function AccountOfficerLine({\n  tenantId,\n  name,\n  officer,\n}: {\n  tenantId: string;\n  name: string;\n  officer: Officer | null;\n}) {\n  const confirm = useConfirm();\n  const { data: session } = useAdminSession();\n  const superadmin = session?.role === 'superadmin';\n  const remove = useSetAccountOfficer(tenantId);\n  const [picking, setPicking] = useState(false);\n\n  const removeOfficer = async () => {\n    if (!officer) return;\n    const ok = await confirm({\n      title: `Remove ${officer.name} as account officer?`,\n      description: `${name} will have no account officer until you assign one.`,\n      confirmLabel: 'Remove',\n      tone: 'danger',\n    });\n    if (ok) remove.mutate(null);\n  };\n\n  return (\n    <span className={styles.officer}>\n      Account officer:{' '}\n      {officer ? <span title={officer.email}>{officer.name}</span> : 'None'}\n      {superadmin && (\n        <button type=\"button\" onClick={() => setPicking(true)}>\n          {officer ? 'Change' : 'Assign'}\n        </button>\n      )}\n      {superadmin && officer && (\n        <button\n          type=\"button\"\n          data-tone=\"danger\"\n          disabled={remove.isPending}\n          onClick={() => void removeOfficer()}\n        >\n          Remove\n        </button>\n      )}\n      {picking && (\n        <AccountOfficerDialog\n          open\n          tenantId={tenantId}\n          name={name}\n          currentId={officer?.id ?? null}\n          onClose={() => setPicking(false)}\n        />\n      )}\n    </span>\n  );\n}\n"],"mappings":";AAyCI,SAEa,KAFb;AAvCJ,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAE3B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,OAAO,YAAY;AAMZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,UAAU,WAAW;AAC3B,QAAM,EAAE,MAAM,QAAQ,IAAI,gBAAgB;AAC1C,QAAM,aAAa,SAAS,SAAS;AACrC,QAAM,SAAS,qBAAqB,QAAQ;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,gBAAgB,YAAY;AAChC,QAAI,CAAC,QAAS;AACd,UAAM,KAAK,MAAM,QAAQ;AAAA,MACvB,OAAO,UAAU,QAAQ,IAAI;AAAA,MAC7B,aAAa,GAAG,IAAI;AAAA,MACpB,cAAc;AAAA,MACd,MAAM;AAAA,IACR,CAAC;AACD,QAAI,GAAI,QAAO,OAAO,IAAI;AAAA,EAC5B;AAEA,SACE,qBAAC,UAAK,WAAW,OAAO,SAAS;AAAA;AAAA,IACd;AAAA,IAChB,UAAU,oBAAC,UAAK,OAAO,QAAQ,OAAQ,kBAAQ,MAAK,IAAU;AAAA,IAC9D,cACC,oBAAC,YAAO,MAAK,UAAS,SAAS,MAAM,WAAW,IAAI,GACjD,oBAAU,WAAW,UACxB;AAAA,IAED,cAAc,WACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAU;AAAA,QACV,UAAU,OAAO;AAAA,QACjB,SAAS,MAAM,KAAK,cAAc;AAAA,QACnC;AAAA;AAAA,IAED;AAAA,IAED,WACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA,WAAW,SAAS,MAAM;AAAA,QAC1B,SAAS,MAAM,WAAW,KAAK;AAAA;AAAA,IACjC;AAAA,KAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@withpotter/ui-kit";
+import { CountUp, Reveal } from "../../../_fx";
+import { Panel, Skeleton } from "../../../_ui";
+import { compact } from "./format";
+import styles from "./health.module.css";
+function BestSellers({
+  data,
+  loading,
+  money
+}) {
+  const rows = (data?.bestSellers ?? []).slice(0, 8);
+  const top = Math.max(...rows.map((r) => r.revenue), 1);
+  return /* @__PURE__ */ jsx(
+    Panel,
+    {
+      title: "Best sellers",
+      count: rows.length || void 0,
+      caption: data ? /* @__PURE__ */ jsxs("span", { children: [
+        "All time \xB7 ",
+        /* @__PURE__ */ jsx(CountUp, { value: data.totalUnitsSold, format: compact }),
+        " ",
+        "units sold"
+      ] }) : "All time",
+      children: loading ? /* @__PURE__ */ jsx("div", { className: styles.sellers, "aria-busy": "true", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { height: 36, radius: 8 }, i)) }) : rows.length === 0 ? /* @__PURE__ */ jsx("p", { className: styles.none, children: "Nothing has sold yet. Best sellers show here after the first paid orders." }) : /* @__PURE__ */ jsx("ol", { className: styles.sellers, children: rows.map((r, i) => /* @__PURE__ */ jsxs(Reveal, { as: "li", index: i, className: styles.seller, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.rank, "data-top": i < 3, children: i + 1 }),
+        /* @__PURE__ */ jsxs("div", { className: styles.sellerMain, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.sellerRow, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.sellerName, title: r.title, children: r.title }),
+            /* @__PURE__ */ jsx("span", { className: styles.sellerRevenue, children: money(r.revenue) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.sellerRow, children: [
+            /* @__PURE__ */ jsx(
+              Progress,
+              {
+                value: r.revenue,
+                max: top,
+                tone: "brand",
+                className: styles.sellerBar
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: styles.units, children: [
+              r.units.toLocaleString(),
+              " sold"
+            ] })
+          ] })
+        ] })
+      ] }, r.id)) })
+    }
+  );
+}
+export {
+  BestSellers
+};
+//# sourceMappingURL=best-sellers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/best-sellers.tsx"],"sourcesContent":["'use client';\n\nimport type { ProductInsights } from '@withpotter/lib/admin-api';\nimport { Progress } from '@withpotter/ui-kit';\nimport { CountUp, Reveal } from '../../../_fx';\nimport { Panel, Skeleton } from '../../../_ui';\nimport { compact, type Money } from './format';\nimport styles from './health.module.css';\n\n/** The items doing the selling, all time, ranked by revenue with a share bar. */\nexport function BestSellers({\n  data,\n  loading,\n  money,\n}: {\n  data: ProductInsights | undefined;\n  loading: boolean;\n  money: Money;\n}) {\n  const rows = (data?.bestSellers ?? []).slice(0, 8);\n  const top = Math.max(...rows.map((r) => r.revenue), 1);\n\n  return (\n    <Panel\n      title=\"Best sellers\"\n      count={rows.length || undefined}\n      caption={\n        data ? (\n          <span>\n            All time · <CountUp value={data.totalUnitsSold} format={compact} />{' '}\n            units sold\n          </span>\n        ) : (\n          'All time'\n        )\n      }\n    >\n      {loading ? (\n        <div className={styles.sellers} aria-busy=\"true\">\n          {Array.from({ length: 5 }, (_, i) => (\n            <Skeleton key={i} height={36} radius={8} />\n          ))}\n        </div>\n      ) : rows.length === 0 ? (\n        <p className={styles.none}>\n          Nothing has sold yet. Best sellers show here after the first paid\n          orders.\n        </p>\n      ) : (\n        <ol className={styles.sellers}>\n          {rows.map((r, i) => (\n            <Reveal as=\"li\" key={r.id} index={i} className={styles.seller}>\n              <span className={styles.rank} data-top={i < 3}>\n                {i + 1}\n              </span>\n              <div className={styles.sellerMain}>\n                <div className={styles.sellerRow}>\n                  <span className={styles.sellerName} title={r.title}>\n                    {r.title}\n                  </span>\n                  <span className={styles.sellerRevenue}>\n                    {money(r.revenue)}\n                  </span>\n                </div>\n                <div className={styles.sellerRow}>\n                  <Progress\n                    value={r.revenue}\n                    max={top}\n                    tone=\"brand\"\n                    className={styles.sellerBar}\n                  />\n                  <span className={styles.units}>\n                    {r.units.toLocaleString()} sold\n                  </span>\n                </div>\n              </div>\n            </Reveal>\n          ))}\n        </ol>\n      )}\n    </Panel>\n  );\n}\n"],"mappings":";AA4BU,SACa,KADb;AAzBV,SAAS,gBAAgB;AACzB,SAAS,SAAS,cAAc;AAChC,SAAS,OAAO,gBAAgB;AAChC,SAAS,eAA2B;AACpC,OAAO,YAAY;AAGZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,QAAQ,MAAM,eAAe,CAAC,GAAG,MAAM,GAAG,CAAC;AACjD,QAAM,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE,OAAO,GAAG,CAAC;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAO,KAAK,UAAU;AAAA,MACtB,SACE,OACE,qBAAC,UAAK;AAAA;AAAA,QACO,oBAAC,WAAQ,OAAO,KAAK,gBAAgB,QAAQ,SAAS;AAAA,QAAG;AAAA,QAAI;AAAA,SAE1E,IAEA;AAAA,MAIH,oBACC,oBAAC,SAAI,WAAW,OAAO,SAAS,aAAU,QACvC,gBAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAC7B,oBAAC,YAAiB,QAAQ,IAAI,QAAQ,KAAvB,CAA0B,CAC1C,GACH,IACE,KAAK,WAAW,IAClB,oBAAC,OAAE,WAAW,OAAO,MAAM,uFAG3B,IAEA,oBAAC,QAAG,WAAW,OAAO,SACnB,eAAK,IAAI,CAAC,GAAG,MACZ,qBAAC,UAAO,IAAG,MAAgB,OAAO,GAAG,WAAW,OAAO,QACrD;AAAA,4BAAC,UAAK,WAAW,OAAO,MAAM,YAAU,IAAI,GACzC,cAAI,GACP;AAAA,QACA,qBAAC,SAAI,WAAW,OAAO,YACrB;AAAA,+BAAC,SAAI,WAAW,OAAO,WACrB;AAAA,gCAAC,UAAK,WAAW,OAAO,YAAY,OAAO,EAAE,OAC1C,YAAE,OACL;AAAA,YACA,oBAAC,UAAK,WAAW,OAAO,eACrB,gBAAM,EAAE,OAAO,GAClB;AAAA,aACF;AAAA,UACA,qBAAC,SAAI,WAAW,OAAO,WACrB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,EAAE;AAAA,gBACT,KAAK;AAAA,gBACL,MAAK;AAAA,gBACL,WAAW,OAAO;AAAA;AAAA,YACpB;AAAA,YACA,qBAAC,UAAK,WAAW,OAAO,OACrB;AAAA,gBAAE,MAAM,eAAe;AAAA,cAAE;AAAA,eAC5B;AAAA,aACF;AAAA,WACF;AAAA,WAxBmB,EAAE,EAyBvB,CACD,GACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,84 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@withpotter/ui-kit";
+import { CountUp } from "../../../_fx";
+import { Skeleton } from "../../../_ui";
+import styles from "./flow.module.css";
+const n = (x) => x == null ? null : x.toLocaleString();
+function flowSteps(v) {
+  const noOrders = v.orders === 0;
+  const waiting = v.goingOut ?? v.unfulfilled;
+  return [
+    {
+      key: "items",
+      target: "commerce-items",
+      label: "Items",
+      tone: "brand",
+      value: v.items,
+      sub: v.items === 0 ? "Nothing listed yet" : `${n(v.activeItems) ?? "None"} on sale`,
+      hint: "Everything in the catalogue: products, services, bookings and digital items."
+    },
+    {
+      key: "orders",
+      target: "commerce-orders",
+      label: "Orders",
+      tone: "ops",
+      value: v.orders,
+      sub: noOrders ? "No orders yet" : `${n(v.paidOrders) ?? "None"} paid`,
+      hint: "Orders placed in the selected period."
+    },
+    {
+      key: "fulfilment",
+      target: "commerce-orders",
+      label: "Fulfilment",
+      tone: "inbox",
+      // No orders means nothing is waiting: say 0, not a dash.
+      value: waiting ?? (noOrders ? 0 : null),
+      sub: noOrders ? "No orders yet" : waiting == null ? "Counts not reported for this period" : waiting === 0 ? "Everything handed over" : "Paid, not yet handed over",
+      hint: "Paid orders still waiting to be sent or collected."
+    },
+    {
+      key: "inventory",
+      target: "commerce-stock",
+      label: "Inventory",
+      tone: "money",
+      value: v.stockValue,
+      format: v.money,
+      sub: v.attention == null ? "Stock value at selling price" : v.attention === 0 ? "Every shelf is stocked" : `${n(v.attention)} items need restocking`,
+      hint: "What the stock on hand is worth at selling price."
+    }
+  ];
+}
+function jumpTo(id) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  el.scrollIntoView({ behavior: still ? "auto" : "smooth", block: "start" });
+  el.focus({ preventScroll: true });
+}
+function CommerceFlow({
+  steps,
+  loading
+}) {
+  return /* @__PURE__ */ jsx("ol", { className: styles.strip, "aria-label": "Commerce flow", children: steps.map((s, i) => /* @__PURE__ */ jsx("li", { className: styles.item, children: /* @__PURE__ */ jsx(Tooltip, { label: s.hint, children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: styles.step,
+      onClick: () => jumpTo(s.target),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.head, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.label, children: s.label }),
+          /* @__PURE__ */ jsx("span", { className: styles.index, "aria-hidden": true, children: i + 1 })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: styles.value, children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: 88, height: 28 }) : s.value == null ? "\u2013" : /* @__PURE__ */ jsx(CountUp, { value: s.value, format: s.format }) }),
+        /* @__PURE__ */ jsx("span", { className: styles.sub, title: s.sub, children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: 120, height: 12 }) : s.sub })
+      ]
+    }
+  ) }) }, s.key)) });
+}
+export {
+  CommerceFlow,
+  flowSteps
+};
+//# sourceMappingURL=commerce-flow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/commerce-flow.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip } from '@withpotter/ui-kit';\nimport { CountUp, type Tone } from '../../../_fx';\nimport { Skeleton } from '../../../_ui';\nimport styles from './flow.module.css';\n\nexport interface FlowStep {\n  key: string;\n  /** The section on this page the stage jumps to. */\n  target: string;\n  label: string;\n  tone: Tone;\n  value: number | null;\n  format?: (n: number) => string;\n  sub: string;\n  hint: string;\n}\n\n/** A count in words, or nothing honest to say yet. */\nconst n = (x: number | null) => (x == null ? null : x.toLocaleString());\n\n/** The four stages a sale moves through, each with its live figure. */\nexport function flowSteps(v: {\n  items: number | null;\n  activeItems: number | null;\n  orders: number | null;\n  paidOrders: number | null;\n  goingOut: number | null;\n  unfulfilled: number | null;\n  stockValue: number | null;\n  attention: number | null;\n  money: (n: number) => string;\n}): FlowStep[] {\n  const noOrders = v.orders === 0;\n  const waiting = v.goingOut ?? v.unfulfilled;\n\n  return [\n    {\n      key: 'items',\n      target: 'commerce-items',\n      label: 'Items',\n      tone: 'brand',\n      value: v.items,\n      sub:\n        v.items === 0\n          ? 'Nothing listed yet'\n          : `${n(v.activeItems) ?? 'None'} on sale`,\n      hint: 'Everything in the catalogue: products, services, bookings and digital items.',\n    },\n    {\n      key: 'orders',\n      target: 'commerce-orders',\n      label: 'Orders',\n      tone: 'ops',\n      value: v.orders,\n      sub: noOrders ? 'No orders yet' : `${n(v.paidOrders) ?? 'None'} paid`,\n      hint: 'Orders placed in the selected period.',\n    },\n    {\n      key: 'fulfilment',\n      target: 'commerce-orders',\n      label: 'Fulfilment',\n      tone: 'inbox',\n      // No orders means nothing is waiting: say 0, not a dash.\n      value: waiting ?? (noOrders ? 0 : null),\n      sub: noOrders\n        ? 'No orders yet'\n        : waiting == null\n          ? 'Counts not reported for this period'\n          : waiting === 0\n            ? 'Everything handed over'\n            : 'Paid, not yet handed over',\n      hint: 'Paid orders still waiting to be sent or collected.',\n    },\n    {\n      key: 'inventory',\n      target: 'commerce-stock',\n      label: 'Inventory',\n      tone: 'money',\n      value: v.stockValue,\n      format: v.money,\n      sub:\n        v.attention == null\n          ? 'Stock value at selling price'\n          : v.attention === 0\n            ? 'Every shelf is stocked'\n            : `${n(v.attention)} items need restocking`,\n      hint: 'What the stock on hand is worth at selling price.',\n    },\n  ];\n}\n\n/** Bring a section into view and give it focus, so keyboards follow. */\nfunction jumpTo(id: string) {\n  const el = document.getElementById(id);\n  if (!el) return;\n  const still = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  el.scrollIntoView({ behavior: still ? 'auto' : 'smooth', block: 'start' });\n  el.focus({ preventScroll: true });\n}\n\nexport function CommerceFlow({\n  steps,\n  loading,\n}: {\n  steps: FlowStep[];\n  loading: boolean;\n}) {\n  return (\n    <ol className={styles.strip} aria-label=\"Commerce flow\">\n      {steps.map((s, i) => (\n        <li key={s.key} className={styles.item}>\n          <Tooltip label={s.hint}>\n            <button\n              type=\"button\"\n              className={styles.step}\n              onClick={() => jumpTo(s.target)}\n            >\n              <span className={styles.head}>\n                <span className={styles.label}>{s.label}</span>\n                <span className={styles.index} aria-hidden>\n                  {i + 1}\n                </span>\n              </span>\n              <span className={styles.value}>\n                {loading ? (\n                  <Skeleton width={88} height={28} />\n                ) : s.value == null ? (\n                  '–'\n                ) : (\n                  <CountUp value={s.value} format={s.format} />\n                )}\n              </span>\n              <span className={styles.sub} title={s.sub}>\n                {loading ? <Skeleton width={120} height={12} /> : s.sub}\n              </span>\n            </button>\n          </Tooltip>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"mappings":";AAuHc,SACE,KADF;AArHd,SAAS,eAAe;AACxB,SAAS,eAA0B;AACnC,SAAS,gBAAgB;AACzB,OAAO,YAAY;AAenB,MAAM,IAAI,CAAC,MAAsB,KAAK,OAAO,OAAO,EAAE,eAAe;AAG9D,SAAS,UAAU,GAUX;AACb,QAAM,WAAW,EAAE,WAAW;AAC9B,QAAM,UAAU,EAAE,YAAY,EAAE;AAEhC,SAAO;AAAA,IACL;AAAA,MACE,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO,EAAE;AAAA,MACT,KACE,EAAE,UAAU,IACR,uBACA,GAAG,EAAE,EAAE,WAAW,KAAK,MAAM;AAAA,MACnC,MAAM;AAAA,IACR;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO,EAAE;AAAA,MACT,KAAK,WAAW,kBAAkB,GAAG,EAAE,EAAE,UAAU,KAAK,MAAM;AAAA,MAC9D,MAAM;AAAA,IACR;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA;AAAA,MAEN,OAAO,YAAY,WAAW,IAAI;AAAA,MAClC,KAAK,WACD,kBACA,WAAW,OACT,wCACA,YAAY,IACV,2BACA;AAAA,MACR,MAAM;AAAA,IACR;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO,EAAE;AAAA,MACT,QAAQ,EAAE;AAAA,MACV,KACE,EAAE,aAAa,OACX,iCACA,EAAE,cAAc,IACd,2BACA,GAAG,EAAE,EAAE,SAAS,CAAC;AAAA,MACzB,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAGA,SAAS,OAAO,IAAY;AAC1B,QAAM,KAAK,SAAS,eAAe,EAAE;AACrC,MAAI,CAAC,GAAI;AACT,QAAM,QAAQ,OAAO,WAAW,kCAAkC,EAAE;AACpE,KAAG,eAAe,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,QAAQ,CAAC;AACzE,KAAG,MAAM,EAAE,eAAe,KAAK,CAAC;AAClC;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGG;AACD,SACE,oBAAC,QAAG,WAAW,OAAO,OAAO,cAAW,iBACrC,gBAAM,IAAI,CAAC,GAAG,MACb,oBAAC,QAAe,WAAW,OAAO,MAChC,8BAAC,WAAQ,OAAO,EAAE,MAChB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,OAAO;AAAA,MAClB,SAAS,MAAM,OAAO,EAAE,MAAM;AAAA,MAE9B;AAAA,6BAAC,UAAK,WAAW,OAAO,MACtB;AAAA,8BAAC,UAAK,WAAW,OAAO,OAAQ,YAAE,OAAM;AAAA,UACxC,oBAAC,UAAK,WAAW,OAAO,OAAO,eAAW,MACvC,cAAI,GACP;AAAA,WACF;AAAA,QACA,oBAAC,UAAK,WAAW,OAAO,OACrB,oBACC,oBAAC,YAAS,OAAO,IAAI,QAAQ,IAAI,IAC/B,EAAE,SAAS,OACb,WAEA,oBAAC,WAAQ,OAAO,EAAE,OAAO,QAAQ,EAAE,QAAQ,GAE/C;AAAA,QACA,oBAAC,UAAK,WAAW,OAAO,KAAK,OAAO,EAAE,KACnC,oBAAU,oBAAC,YAAS,OAAO,KAAK,QAAQ,IAAI,IAAK,EAAE,KACtD;AAAA;AAAA;AAAA,EACF,GACF,KA1BO,EAAE,GA2BX,CACD,GACH;AAEJ;","names":[]}

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

@@ -0,0 +1,89 @@
+/* The order sheet: facts, then the money behind the order. */
+
+.drawerMeta {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.drawerBody {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.facts {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  gap: 8px 16px;
+  margin: 0;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.facts dt {
+  color: var(--text-secondary);
+}
+
+.facts dd {
+  margin: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.drawerHeading {
+  margin: 8px 0 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.ledger {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ledgerRow,
+.ledgerSide {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.ledgerRow {
+  justify-content: space-between;
+  padding: 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+}
+
+.ledgerMain {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.num {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.mono {
+  overflow: hidden;
+  font-family: var(--font-mono, monospace);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.muted {
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--text-secondary);
+}

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

@@ -0,0 +1,110 @@
+/* Items → Orders → Fulfilment → Inventory, one band of linked stages. */
+
+.strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--adm-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  min-width: 0;
+}
+
+/* Each stage is a jump to its section below, so it reads as a button. */
+.step {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 16px 20px;
+  border-radius: var(--adm-card-radius);
+  background: var(--bg-base);
+  box-shadow: var(--adm-shadow-1);
+  text-align: left;
+  color: inherit;
+  cursor: pointer;
+  transition: background var(--adm-fast);
+}
+
+.step:hover {
+  background: var(--adm-hover);
+}
+
+.step:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.index {
+  display: inline-grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  background: var(--adm-hover);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.value,
+.sub {
+  display: block;
+}
+
+.value {
+  font-size: 28px;
+  font-weight: 500;
+  line-height: 36px;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.sub {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}
+
+@media (max-width: 1100px) {
+  .strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .strip {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/dist/admin/tenants/[id]/commerce/format.js

@@ -0,0 +1,74 @@
+function moneyIn(currency, decimals = 0) {
+  return (n) => {
+    try {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currencyDisplay: "narrowSymbol",
+        currency: currency || "NGN",
+        maximumFractionDigits: decimals
+      }).format(n);
+    } catch {
+      return `${currency} ${Math.round(n).toLocaleString()}`;
+    }
+  };
+}
+const compact = (n) => new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 1
+}).format(n);
+const shortDate = (iso) => new Intl.DateTimeFormat("en", { month: "short", day: "numeric" }).format(
+  new Date(iso)
+);
+const humanize = (s) => {
+  const t = s.replace(/[_-]+/g, " ").trim();
+  return t ? t[0].toUpperCase() + t.slice(1) : "\u2013";
+};
+const TONE_OF = {
+  completed: "success",
+  paid: "success",
+  success: "success",
+  settled: "success",
+  fulfilled: "success",
+  delivered: "success",
+  collected: "success",
+  pending: "pending",
+  unpaid: "pending",
+  awaiting_confirmation: "pending",
+  authorized: "pending",
+  unfulfilled: "pending",
+  partial: "pending",
+  confirmed: "processing",
+  processing: "processing",
+  checked_in: "processing",
+  ready: "processing",
+  failed: "failed",
+  reversed: "failed",
+  expired: "failed",
+  cancelled: "neutral",
+  refunded: "neutral",
+  partially_refunded: "neutral"
+};
+const toneOf = (status) => TONE_OF[status?.toLowerCase()] ?? "neutral";
+function stockOf(p) {
+  if (!p.trackInventory || p.quantity == null)
+    return { label: "Not tracked", tone: "neutral", available: null };
+  const available = p.quantity - (p.reserved ?? 0);
+  if (available <= 0)
+    return { label: "Out of stock", tone: "failed", available };
+  if (p.lowStockThreshold != null && available <= p.lowStockThreshold)
+    return { label: `Low \xB7 ${available}`, tone: "pending", available };
+  return {
+    label: `In stock \xB7 ${compact(available)}`,
+    tone: "success",
+    available
+  };
+}
+export {
+  compact,
+  humanize,
+  moneyIn,
+  shortDate,
+  stockOf,
+  toneOf
+};
+//# sourceMappingURL=format.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/format.ts"],"sourcesContent":["import type { TenantProduct } from '@withpotter/lib/admin-api';\n\n/** Amounts in the merchant's own currency, whole units for headlines. */\nexport function moneyIn(currency: string, decimals = 0) {\n  return (n: number) => {\n    try {\n      return new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currencyDisplay: 'narrowSymbol',\n        currency: currency || 'NGN',\n        maximumFractionDigits: decimals,\n      }).format(n);\n    } catch {\n      return `${currency} ${Math.round(n).toLocaleString()}`;\n    }\n  };\n}\n\nexport type Money = (n: number) => string;\n\n/** 1.2k / 3.4m, for figures in tight tiles. */\nexport const compact = (n: number) =>\n  new Intl.NumberFormat('en-US', {\n    notation: 'compact',\n    maximumFractionDigits: 1,\n  }).format(n);\n\nexport const shortDate = (iso: string) =>\n  new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric' }).format(\n    new Date(iso),\n  );\n\n/** Sentence-case a machine word: \"checked_in\" → \"Checked in\". */\nexport const humanize = (s: string) => {\n  const t = s.replace(/[_-]+/g, ' ').trim();\n  return t ? t[0].toUpperCase() + t.slice(1) : '–';\n};\n\nexport type PillTone =\n  'success' | 'pending' | 'failed' | 'processing' | 'neutral';\n\nconst TONE_OF: Record<string, PillTone> = {\n  completed: 'success',\n  paid: 'success',\n  success: 'success',\n  settled: 'success',\n  fulfilled: 'success',\n  delivered: 'success',\n  collected: 'success',\n  pending: 'pending',\n  unpaid: 'pending',\n  awaiting_confirmation: 'pending',\n  authorized: 'pending',\n  unfulfilled: 'pending',\n  partial: 'pending',\n  confirmed: 'processing',\n  processing: 'processing',\n  checked_in: 'processing',\n  ready: 'processing',\n  failed: 'failed',\n  reversed: 'failed',\n  expired: 'failed',\n  cancelled: 'neutral',\n  refunded: 'neutral',\n  partially_refunded: 'neutral',\n};\n\nexport const toneOf = (status: string): PillTone =>\n  TONE_OF[status?.toLowerCase()] ?? 'neutral';\n\nexport type StockState = {\n  label: string;\n  tone: PillTone;\n  available: number | null;\n};\n\n/** What a shelf looks like for one item, from the counts the API sends. */\nexport function stockOf(p: TenantProduct): StockState {\n  if (!p.trackInventory || p.quantity == null)\n    return { label: 'Not tracked', tone: 'neutral', available: null };\n\n  const available = p.quantity - (p.reserved ?? 0);\n\n  if (available <= 0)\n    return { label: 'Out of stock', tone: 'failed', available };\n\n  if (p.lowStockThreshold != null && available <= p.lowStockThreshold)\n    return { label: `Low · ${available}`, tone: 'pending', available };\n\n  return {\n    label: `In stock · ${compact(available)}`,\n    tone: 'success',\n    available,\n  };\n}\n"],"mappings":"AAGO,SAAS,QAAQ,UAAkB,WAAW,GAAG;AACtD,SAAO,CAAC,MAAc;AACpB,QAAI;AACF,aAAO,IAAI,KAAK,aAAa,SAAS;AAAA,QACpC,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,UAAU,YAAY;AAAA,QACtB,uBAAuB;AAAA,MACzB,CAAC,EAAE,OAAO,CAAC;AAAA,IACb,QAAQ;AACN,aAAO,GAAG,QAAQ,IAAI,KAAK,MAAM,CAAC,EAAE,eAAe,CAAC;AAAA,IACtD;AAAA,EACF;AACF;AAKO,MAAM,UAAU,CAAC,MACtB,IAAI,KAAK,aAAa,SAAS;AAAA,EAC7B,UAAU;AAAA,EACV,uBAAuB;AACzB,CAAC,EAAE,OAAO,CAAC;AAEN,MAAM,YAAY,CAAC,QACxB,IAAI,KAAK,eAAe,MAAM,EAAE,OAAO,SAAS,KAAK,UAAU,CAAC,EAAE;AAAA,EAChE,IAAI,KAAK,GAAG;AACd;AAGK,MAAM,WAAW,CAAC,MAAc;AACrC,QAAM,IAAI,EAAE,QAAQ,UAAU,GAAG,EAAE,KAAK;AACxC,SAAO,IAAI,EAAE,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,IAAI;AAC/C;AAKA,MAAM,UAAoC;AAAA,EACxC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,uBAAuB;AAAA,EACvB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,oBAAoB;AACtB;AAEO,MAAM,SAAS,CAAC,WACrB,QAAQ,QAAQ,YAAY,CAAC,KAAK;AAS7B,SAAS,QAAQ,GAA8B;AACpD,MAAI,CAAC,EAAE,kBAAkB,EAAE,YAAY;AACrC,WAAO,EAAE,OAAO,eAAe,MAAM,WAAW,WAAW,KAAK;AAElE,QAAM,YAAY,EAAE,YAAY,EAAE,YAAY;AAE9C,MAAI,aAAa;AACf,WAAO,EAAE,OAAO,gBAAgB,MAAM,UAAU,UAAU;AAE5D,MAAI,EAAE,qBAAqB,QAAQ,aAAa,EAAE;AAChD,WAAO,EAAE,OAAO,YAAS,SAAS,IAAI,MAAM,WAAW,UAAU;AAEnE,SAAO;AAAA,IACL,OAAO,iBAAc,QAAQ,SAAS,CAAC;AAAA,IACvC,MAAM;AAAA,IACN;AAAA,EACF;AACF;","names":[]}