@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/commerce/commerce-console.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePlatformCockpit } from "../hooks";
+import {
+  CurrencyFilter,
+  customRange,
+  PageHeader,
+  PageTabs,
+  PeriodSelector,
+  rangeFromKey,
+  useCurrencyParam,
+  usePersistedDateRange,
+  useTabParam
+} from "../_ui";
+import { CommerceOverview } from "./commerce-overview";
+import { MerchantView } from "./merchant-view";
+import styles from "./console.module.css";
+const TABS = ["overview", "merchant"];
+function CommerceConsole() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useSearchParams();
+  const [tab, setTab] = useTabParam(TABS);
+  const {
+    rangeKey,
+    setRangeKey,
+    customStart,
+    customEnd,
+    onCustomChange,
+    compare
+  } = usePersistedDateRange();
+  const range = useMemo(
+    () => rangeKey === "custom" ? customRange(customStart, customEnd) : rangeFromKey(rangeKey),
+    [rangeKey, customStart, customEnd]
+  );
+  const [currency, setCurrency] = useCurrencyParam();
+  const cockpit = usePlatformCockpit({
+    startDate: range.startDate,
+    endDate: range.endDate
+  });
+  const currencies = useMemo(
+    () => cockpit.data?.currencies ?? [],
+    [cockpit.data]
+  );
+  const openMerchant = (id) => {
+    const qs = new URLSearchParams(params.toString());
+    qs.set("tab", "merchant");
+    qs.set("merchant", id);
+    router.push(`${pathname}?${qs.toString()}`, { scroll: false });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.page, children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: "Commerce",
+        description: "What merchants sell, how their orders move and how healthy their stock is.",
+        actions: /* @__PURE__ */ jsxs("div", { className: "adm-toolbar", children: [
+          tab === "overview" && /* @__PURE__ */ jsx(
+            CurrencyFilter,
+            {
+              value: currency,
+              onChange: setCurrency,
+              currencies
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PeriodSelector,
+            {
+              value: rangeKey,
+              onChange: setRangeKey,
+              customStart,
+              customEnd,
+              onCustomChange
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PageTabs,
+      {
+        tabs: [
+          { id: "overview", label: "Overview" },
+          { id: "merchant", label: "By merchant" }
+        ],
+        active: tab,
+        onChange: setTab
+      }
+    ),
+    tab === "overview" ? /* @__PURE__ */ jsx(
+      CommerceOverview,
+      {
+        range,
+        currency,
+        compare,
+        onOpenMerchant: openMerchant
+      }
+    ) : /* @__PURE__ */ jsx(MerchantView, { range })
+  ] });
+}
+export {
+  CommerceConsole
+};
+//# sourceMappingURL=commerce-console.js.map

package/dist/admin/commerce/commerce-console.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/commerce/commerce-console.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation';\nimport { usePlatformCockpit } from '../hooks';\nimport {\n  CurrencyFilter,\n  customRange,\n  PageHeader,\n  PageTabs,\n  PeriodSelector,\n  rangeFromKey,\n  useCurrencyParam,\n  usePersistedDateRange,\n  useTabParam,\n} from '../_ui';\nimport { CommerceOverview } from './commerce-overview';\nimport { MerchantView } from './merchant-view';\nimport styles from './console.module.css';\n\nconst TABS = ['overview', 'merchant'] as const;\n\n/**\n * The console's Commerce page: every merchant at a glance first, then one\n * merchant's catalogue, orders and stock under \"By merchant\".\n */\nexport function CommerceConsole() {\n  const router = useRouter();\n  const pathname = usePathname();\n  const params = useSearchParams();\n  const [tab, setTab] = useTabParam(TABS);\n  const {\n    rangeKey,\n    setRangeKey,\n    customStart,\n    customEnd,\n    onCustomChange,\n    compare,\n  } = usePersistedDateRange();\n  const range = useMemo(\n    () =>\n      rangeKey === 'custom'\n        ? customRange(customStart, customEnd)\n        : rangeFromKey(rangeKey),\n    [rangeKey, customStart, customEnd],\n  );\n  // The same cockpit call the overview makes (one shared request), read here\n  // for the currencies it holds; `?currency=` narrows every figure to one.\n  const [currency, setCurrency] = useCurrencyParam();\n  const cockpit = usePlatformCockpit({\n    startDate: range.startDate,\n    endDate: range.endDate,\n  });\n  const currencies = useMemo(\n    () => cockpit.data?.currencies ?? [],\n    [cockpit.data],\n  );\n\n  /** Open \"By merchant\" on one merchant, in one navigation. */\n  const openMerchant = (id: string) => {\n    const qs = new URLSearchParams(params.toString());\n    qs.set('tab', 'merchant');\n    qs.set('merchant', id);\n    router.push(`${pathname}?${qs.toString()}`, { scroll: false });\n  };\n\n  return (\n    <div className={styles.page}>\n      <PageHeader\n        title=\"Commerce\"\n        description=\"What merchants sell, how their orders move and how healthy their stock is.\"\n        actions={\n          <div className=\"adm-toolbar\">\n            {/* \"By merchant\" stays in that merchant's own currency. */}\n            {tab === 'overview' && (\n              <CurrencyFilter\n                value={currency}\n                onChange={setCurrency}\n                currencies={currencies}\n              />\n            )}\n            <PeriodSelector\n              value={rangeKey}\n              onChange={setRangeKey}\n              customStart={customStart}\n              customEnd={customEnd}\n              onCustomChange={onCustomChange}\n            />\n          </div>\n        }\n      />\n\n      <PageTabs\n        tabs={[\n          { id: 'overview', label: 'Overview' },\n          { id: 'merchant', label: 'By merchant' },\n        ]}\n        active={tab}\n        onChange={setTab}\n      />\n\n      {tab === 'overview' ? (\n        <CommerceOverview\n          range={range}\n          currency={currency}\n          compare={compare}\n          onOpenMerchant={openMerchant}\n        />\n      ) : (\n        <MerchantView range={range} />\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAwEU,SAGI,KAHJ;AAtEV,SAAS,eAAe;AACxB,SAAS,aAAa,WAAW,uBAAuB;AACxD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,OAAO,YAAY;AAEnB,MAAM,OAAO,CAAC,YAAY,UAAU;AAM7B,SAAS,kBAAkB;AAChC,QAAM,SAAS,UAAU;AACzB,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,gBAAgB;AAC/B,QAAM,CAAC,KAAK,MAAM,IAAI,YAAY,IAAI;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAC1B,QAAM,QAAQ;AAAA,IACZ,MACE,aAAa,WACT,YAAY,aAAa,SAAS,IAClC,aAAa,QAAQ;AAAA,IAC3B,CAAC,UAAU,aAAa,SAAS;AAAA,EACnC;AAGA,QAAM,CAAC,UAAU,WAAW,IAAI,iBAAiB;AACjD,QAAM,UAAU,mBAAmB;AAAA,IACjC,WAAW,MAAM;AAAA,IACjB,SAAS,MAAM;AAAA,EACjB,CAAC;AACD,QAAM,aAAa;AAAA,IACjB,MAAM,QAAQ,MAAM,cAAc,CAAC;AAAA,IACnC,CAAC,QAAQ,IAAI;AAAA,EACf;AAGA,QAAM,eAAe,CAAC,OAAe;AACnC,UAAM,KAAK,IAAI,gBAAgB,OAAO,SAAS,CAAC;AAChD,OAAG,IAAI,OAAO,UAAU;AACxB,OAAG,IAAI,YAAY,EAAE;AACrB,WAAO,KAAK,GAAG,QAAQ,IAAI,GAAG,SAAS,CAAC,IAAI,EAAE,QAAQ,MAAM,CAAC;AAAA,EAC/D;AAEA,SACE,qBAAC,SAAI,WAAW,OAAO,MACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SACE,qBAAC,SAAI,WAAU,eAEZ;AAAA,kBAAQ,cACP;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,UAAU;AAAA,cACV;AAAA;AAAA,UACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,WACF;AAAA;AAAA,IAEJ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,UACJ,EAAE,IAAI,YAAY,OAAO,WAAW;AAAA,UACpC,EAAE,IAAI,YAAY,OAAO,cAAc;AAAA,QACzC;AAAA,QACA,QAAQ;AAAA,QACR,UAAU;AAAA;AAAA,IACZ;AAAA,IAEC,QAAQ,aACP;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA;AAAA,IAClB,IAEA,oBAAC,gBAAa,OAAc;AAAA,KAEhC;AAEJ;","names":[]}

package/dist/admin/commerce/commerce-overview.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Button, ErrorBanner } from "@withpotter/ui-kit";
+import { usePlatformCockpit } from "../hooks";
+import {
+  GmvOrdersChart,
+  PICK_CURRENCY,
+  Panel,
+  focusCurrency,
+  moneyIn,
+  periodPhrase,
+  rowFor,
+  toTrend
+} from "../_ui";
+import { OverviewKpis } from "./overview-kpis";
+import { SalesByService } from "./overview-services";
+import { TopMerchants } from "./overview-top-merchants";
+import styles from "./overview.module.css";
+function CommerceOverview({
+  range,
+  currency,
+  compare,
+  onOpenMerchant
+}) {
+  const cockpit = usePlatformCockpit({
+    startDate: range.startDate,
+    endDate: range.endDate
+  });
+  const data = cockpit.data;
+  const currencies = data?.currencies ?? [];
+  const focus = focusCurrency(currencies, currency);
+  const span = periodPhrase(range);
+  const period = `${span[0].toUpperCase()}${span.slice(1)}`;
+  const caption = focus ? `${period} \xB7 ${focus}` : period;
+  const series = useMemo(
+    () => rowFor(data?.trend.performanceSeriesByCurrency, focus)?.series,
+    [data, focus]
+  );
+  const gmvTrend = useMemo(() => toTrend(series, "gmv"), [series]);
+  const ordersTrend = useMemo(() => toTrend(series, "orders"), [series]);
+  const services = data?.salesByService?.length && currencies.length === 1 ? data.salesByService : null;
+  if (cockpit.isError) {
+    return /* @__PURE__ */ jsxs(ErrorBanner, { children: [
+      "The commerce overview could not be loaded.",
+      " ",
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => cockpit.refetch(), children: "Try again" })
+    ] });
+  }
+  const loading = cockpit.isLoading || !data;
+  const pick = /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)]", children: PICK_CURRENCY });
+  return /* @__PURE__ */ jsxs("div", { className: styles.stack, children: [
+    /* @__PURE__ */ jsx(
+      OverviewKpis,
+      {
+        data,
+        loading,
+        currency,
+        focus,
+        compare,
+        caption
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "adm-grid", children: /* @__PURE__ */ jsx("div", { className: "adm-span-12", children: /* @__PURE__ */ jsx(Panel, { title: "GMV & orders", caption, children: focus || loading ? /* @__PURE__ */ jsx(
+      GmvOrdersChart,
+      {
+        gmvTrend,
+        ordersTrend,
+        previousGmvTrend: [],
+        previousOrdersTrend: [],
+        compare: false,
+        span,
+        money: moneyIn(focus ?? "NGN")
+      }
+    ) : pick }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "adm-grid", children: [
+      /* @__PURE__ */ jsx("div", { className: services ? "adm-span-7" : "adm-span-12", children: focus || loading ? /* @__PURE__ */ jsx(
+        TopMerchants,
+        {
+          rows: rowFor(data?.topTenantsByCurrency, focus)?.tenants ?? [],
+          loading,
+          money: moneyIn(focus ?? "NGN"),
+          caption,
+          onOpen: onOpenMerchant
+        }
+      ) : /* @__PURE__ */ jsx(Panel, { title: "Top merchants by sales", caption, children: pick }) }),
+      services && /* @__PURE__ */ jsx("div", { className: "adm-span-5", children: /* @__PURE__ */ jsx(
+        SalesByService,
+        {
+          rows: services,
+          loading,
+          money: moneyIn(currencies[0]),
+          caption
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  CommerceOverview
+};
+//# sourceMappingURL=commerce-overview.js.map

package/dist/admin/commerce/commerce-overview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/commerce/commerce-overview.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport { Button, ErrorBanner } from '@withpotter/ui-kit';\nimport { usePlatformCockpit } from '../hooks';\nimport {\n  GmvOrdersChart,\n  PICK_CURRENCY,\n  Panel,\n  focusCurrency,\n  moneyIn,\n  periodPhrase,\n  rowFor,\n  toTrend,\n  type DateRange,\n} from '../_ui';\nimport { OverviewKpis } from './overview-kpis';\nimport { SalesByService } from './overview-services';\nimport { TopMerchants } from './overview-top-merchants';\nimport styles from './overview.module.css';\n\n/**\n * Commerce across every merchant, from the one cockpit call: the headline\n * figures, who sells most, where the base sits and who needs a look.\n * Nothing here is fetched per merchant. Money comes back once per currency\n * and is never added across currencies or converted.\n */\nexport function CommerceOverview({\n  range,\n  currency,\n  compare,\n  onOpenMerchant,\n}: {\n  range: DateRange;\n  /** The currency filter's choice; '' shows every currency. */\n  currency: string;\n  /** False for \"all time\": there is no earlier period to compare with. */\n  compare: boolean;\n  onOpenMerchant: (id: string) => void;\n}) {\n  const cockpit = usePlatformCockpit({\n    startDate: range.startDate,\n    endDate: range.endDate,\n  });\n  const data = cockpit.data;\n  const currencies = data?.currencies ?? [];\n  // A chart or a ranking draws one currency: the filter's, or the only one.\n  const focus = focusCurrency(currencies, currency);\n  const span = periodPhrase(range);\n  const period = `${span[0].toUpperCase()}${span.slice(1)}`;\n  const caption = focus ? `${period} · ${focus}` : period;\n\n  const series = useMemo(\n    () => rowFor(data?.trend.performanceSeriesByCurrency, focus)?.series,\n    [data, focus],\n  );\n  const gmvTrend = useMemo(() => toTrend(series, 'gmv'), [series]);\n  const ordersTrend = useMemo(() => toTrend(series, 'orders'), [series]);\n  // Sales by service is one mixed figure: only honest with one currency.\n  const services =\n    data?.salesByService?.length && currencies.length === 1\n      ? data.salesByService\n      : null;\n\n  if (cockpit.isError) {\n    return (\n      <ErrorBanner>\n        The commerce overview could not be loaded.{' '}\n        <Button size=\"sm\" variant=\"secondary\" onClick={() => cockpit.refetch()}>\n          Try again\n        </Button>\n      </ErrorBanner>\n    );\n  }\n\n  const loading = cockpit.isLoading || !data;\n  const pick = (\n    <p className=\"text-sm text-[var(--text-secondary)]\">{PICK_CURRENCY}</p>\n  );\n\n  return (\n    <div className={styles.stack}>\n      <OverviewKpis\n        data={data}\n        loading={loading}\n        currency={currency}\n        focus={focus}\n        compare={compare}\n        caption={caption}\n      />\n\n      <div className=\"adm-grid\">\n        <div className=\"adm-span-12\">\n          <Panel title=\"GMV & orders\" caption={caption}>\n            {focus || loading ? (\n              <GmvOrdersChart\n                gmvTrend={gmvTrend}\n                ordersTrend={ordersTrend}\n                previousGmvTrend={[]}\n                previousOrdersTrend={[]}\n                compare={false}\n                span={span}\n                money={moneyIn(focus ?? 'NGN')}\n              />\n            ) : (\n              pick\n            )}\n          </Panel>\n        </div>\n      </div>\n\n      <div className=\"adm-grid\">\n        <div className={services ? 'adm-span-7' : 'adm-span-12'}>\n          {focus || loading ? (\n            <TopMerchants\n              rows={rowFor(data?.topTenantsByCurrency, focus)?.tenants ?? []}\n              loading={loading}\n              money={moneyIn(focus ?? 'NGN')}\n              caption={caption}\n              onOpen={onOpenMerchant}\n            />\n          ) : (\n            <Panel title=\"Top merchants by sales\" caption={caption}>\n              {pick}\n            </Panel>\n          )}\n        </div>\n        {services && (\n          <div className=\"adm-span-5\">\n            <SalesByService\n              rows={services}\n              loading={loading}\n              money={moneyIn(currencies[0])}\n              caption={caption}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAkEM,SAEE,KAFF;AAhEN,SAAS,eAAe;AACxB,SAAS,QAAQ,mBAAmB;AACpC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,OAAO,YAAY;AAQZ,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,UAAU,mBAAmB;AAAA,IACjC,WAAW,MAAM;AAAA,IACjB,SAAS,MAAM;AAAA,EACjB,CAAC;AACD,QAAM,OAAO,QAAQ;AACrB,QAAM,aAAa,MAAM,cAAc,CAAC;AAExC,QAAM,QAAQ,cAAc,YAAY,QAAQ;AAChD,QAAM,OAAO,aAAa,KAAK;AAC/B,QAAM,SAAS,GAAG,KAAK,CAAC,EAAE,YAAY,CAAC,GAAG,KAAK,MAAM,CAAC,CAAC;AACvD,QAAM,UAAU,QAAQ,GAAG,MAAM,SAAM,KAAK,KAAK;AAEjD,QAAM,SAAS;AAAA,IACb,MAAM,OAAO,MAAM,MAAM,6BAA6B,KAAK,GAAG;AAAA,IAC9D,CAAC,MAAM,KAAK;AAAA,EACd;AACA,QAAM,WAAW,QAAQ,MAAM,QAAQ,QAAQ,KAAK,GAAG,CAAC,MAAM,CAAC;AAC/D,QAAM,cAAc,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,GAAG,CAAC,MAAM,CAAC;AAErE,QAAM,WACJ,MAAM,gBAAgB,UAAU,WAAW,WAAW,IAClD,KAAK,iBACL;AAEN,MAAI,QAAQ,SAAS;AACnB,WACE,qBAAC,eAAY;AAAA;AAAA,MACgC;AAAA,MAC3C,oBAAC,UAAO,MAAK,MAAK,SAAQ,aAAY,SAAS,MAAM,QAAQ,QAAQ,GAAG,uBAExE;AAAA,OACF;AAAA,EAEJ;AAEA,QAAM,UAAU,QAAQ,aAAa,CAAC;AACtC,QAAM,OACJ,oBAAC,OAAE,WAAU,wCAAwC,yBAAc;AAGrE,SACE,qBAAC,SAAI,WAAW,OAAO,OACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,SAAI,WAAU,YACb,8BAAC,SAAI,WAAU,eACb,8BAAC,SAAM,OAAM,gBAAe,SACzB,mBAAS,UACR;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,kBAAkB,CAAC;AAAA,QACnB,qBAAqB,CAAC;AAAA,QACtB,SAAS;AAAA,QACT;AAAA,QACA,OAAO,QAAQ,SAAS,KAAK;AAAA;AAAA,IAC/B,IAEA,MAEJ,GACF,GACF;AAAA,IAEA,qBAAC,SAAI,WAAU,YACb;AAAA,0BAAC,SAAI,WAAW,WAAW,eAAe,eACvC,mBAAS,UACR;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,OAAO,MAAM,sBAAsB,KAAK,GAAG,WAAW,CAAC;AAAA,UAC7D;AAAA,UACA,OAAO,QAAQ,SAAS,KAAK;AAAA,UAC7B;AAAA,UACA,QAAQ;AAAA;AAAA,MACV,IAEA,oBAAC,SAAM,OAAM,0BAAyB,SACnC,gBACH,GAEJ;AAAA,MACC,YACC,oBAAC,SAAI,WAAU,cACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN;AAAA,UACA,OAAO,QAAQ,WAAW,CAAC,CAAC;AAAA,UAC5B;AAAA;AAAA,MACF,GACF;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/commerce/console.module.css

@@ -0,0 +1,63 @@
+/* Commerce console: the page, and the chosen merchant inside its Card. */
+
+.page {
+  min-width: 0;
+}
+
+/* "By merchant": the chosen merchant, then their commerce bands. */
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+.current {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+}
+
+.currentMain {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 200px;
+}
+
+.eyebrow {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.currentName {
+  overflow: hidden;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.currentMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.sub {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}

package/dist/admin/commerce/merchant-meta.js

@@ -0,0 +1,40 @@
+const compactMoney = (n, currency) => {
+  if (currency) {
+    try {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currencyDisplay: "narrowSymbol",
+        currency,
+        notation: "compact",
+        maximumFractionDigits: 1
+      }).format(n ?? 0);
+    } catch {
+    }
+  }
+  return compactNumber(n);
+};
+const compactSales = (rows, fallback) => rows?.length ? rows.map((r) => compactMoney(r.amount, r.currency)).join(" \xB7 ") : compactNumber(fallback);
+const compactNumber = (n) => new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 1
+}).format(n ?? 0);
+const STATUS_TONE = {
+  active: "success",
+  pending: "pending",
+  suspended: "failed",
+  deleted: "neutral"
+};
+const logoOf = (row) => {
+  const r = row;
+  return r.logoUrl ?? r.profile?.logoUrl ?? null;
+};
+const bySales = (rows) => [...rows].sort((a, b) => (b.gmv ?? 0) - (a.gmv ?? 0));
+export {
+  STATUS_TONE,
+  bySales,
+  compactMoney,
+  compactNumber,
+  compactSales,
+  logoOf
+};
+//# sourceMappingURL=merchant-meta.js.map

package/dist/admin/commerce/merchant-meta.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/commerce/merchant-meta.ts"],"sourcesContent":["import type { TenantRow, TenantStatus } from '@withpotter/lib/admin-api';\nimport type { PillTone } from '../tenants/[id]/commerce/format';\n\n/**\n * GMV is in the merchant's own currency. With the currency known (tenant\n * detail), show it; list rows carry none, so they get a plain number.\n */\nexport const compactMoney = (n: number, currency?: string | null) => {\n  if (currency) {\n    try {\n      return new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currencyDisplay: 'narrowSymbol',\n        currency,\n        notation: 'compact',\n        maximumFractionDigits: 1,\n      }).format(n ?? 0);\n    } catch {\n      // An unknown code falls through to the plain number.\n    }\n  }\n\n  return compactNumber(n);\n};\n\n/**\n * Sales per currency, compact and never added together: \"₦1.2M · $3.4K\".\n * Falls back to the plain number when the API sends no per-currency rows.\n */\nexport const compactSales = (\n  rows: ReadonlyArray<{ currency: string; amount: number }> | undefined,\n  fallback: number,\n) =>\n  rows?.length\n    ? rows.map((r) => compactMoney(r.amount, r.currency)).join(' · ')\n    : compactNumber(fallback);\n\n/** \"12.4K\": sales without a currency, for list rows. */\nexport const compactNumber = (n: number) =>\n  new Intl.NumberFormat('en-US', {\n    notation: 'compact',\n    maximumFractionDigits: 1,\n  }).format(n ?? 0);\n\nexport const STATUS_TONE: Record<TenantStatus, PillTone> = {\n  active: 'success',\n  pending: 'pending',\n  suspended: 'failed',\n  deleted: 'neutral',\n};\n\n/**\n * A merchant's logo when the API sends one, flat (`logoUrl`) or on the\n * profile (`profile.logoUrl`). Without it EntityAvatar falls back to initials,\n * so every list picks logos up the day the API starts sending them.\n */\nexport const logoOf = (row: object): string | null => {\n  const r = row as {\n    logoUrl?: string | null;\n    profile?: { logoUrl?: string | null } | null;\n  };\n\n  return r.logoUrl ?? r.profile?.logoUrl ?? null;\n};\n\n/**\n * Ranked by sales within the rows shown only. Each figure is in its own\n * merchant's currency, so this orders a page; it is not a platform league.\n */\nexport const bySales = (rows: TenantRow[]) =>\n  [...rows].sort((a, b) => (b.gmv ?? 0) - (a.gmv ?? 0));\n"],"mappings":"AAOO,MAAM,eAAe,CAAC,GAAW,aAA6B;AACnE,MAAI,UAAU;AACZ,QAAI;AACF,aAAO,IAAI,KAAK,aAAa,SAAS;AAAA,QACpC,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB;AAAA,QACA,UAAU;AAAA,QACV,uBAAuB;AAAA,MACzB,CAAC,EAAE,OAAO,KAAK,CAAC;AAAA,IAClB,QAAQ;AAAA,IAER;AAAA,EACF;AAEA,SAAO,cAAc,CAAC;AACxB;AAMO,MAAM,eAAe,CAC1B,MACA,aAEA,MAAM,SACF,KAAK,IAAI,CAAC,MAAM,aAAa,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,KAAK,QAAK,IAC9D,cAAc,QAAQ;AAGrB,MAAM,gBAAgB,CAAC,MAC5B,IAAI,KAAK,aAAa,SAAS;AAAA,EAC7B,UAAU;AAAA,EACV,uBAAuB;AACzB,CAAC,EAAE,OAAO,KAAK,CAAC;AAEX,MAAM,cAA8C;AAAA,EACzD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AACX;AAOO,MAAM,SAAS,CAAC,QAA+B;AACpD,QAAM,IAAI;AAKV,SAAO,EAAE,WAAW,EAAE,SAAS,WAAW;AAC5C;AAMO,MAAM,UAAU,CAAC,SACtB,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,OAAO,EAAE,OAAO,MAAM,EAAE,OAAO,EAAE;","names":[]}

package/dist/admin/commerce/merchant-picker.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Check } from "lucide-react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  EmptyNote,
+  SearchField
+} from "@withpotter/ui-kit";
+import { usePlatformTenants } from "../hooks";
+import { EntityAvatar, Reveal } from "../_fx";
+import { Skeleton } from "../_ui";
+import { StatusPill } from "../tenants/[id]/commerce/status-pill";
+import { bySales, compactSales, logoOf, STATUS_TONE } from "./merchant-meta";
+import styles from "./picker.module.css";
+function MerchantPicker({
+  open,
+  onOpenChange,
+  selectedId,
+  onPick
+}) {
+  const [query, setQuery] = useState("");
+  const [search, setSearch] = useState("");
+  useEffect(() => {
+    const t = window.setTimeout(() => setSearch(query.trim()), 250);
+    return () => window.clearTimeout(t);
+  }, [query]);
+  const list = usePlatformTenants({
+    search: search || void 0,
+    pageSize: 20
+  });
+  const rows = bySales(list.data?.rows ?? []);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-lg", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Choose a merchant" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Search by business name. Results are listed by sales, highest first." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      SearchField,
+      {
+        value: query,
+        onChange: setQuery,
+        placeholder: "Search merchants",
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.results, "aria-busy": list.isLoading, children: list.isLoading ? Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { height: 52, radius: 10 }, i)) : list.isError ? /* @__PURE__ */ jsx(
+      EmptyNote,
+      {
+        className: styles.none,
+        action: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => list.refetch(), children: "Try again" }),
+        children: "Merchants could not be loaded."
+      }
+    ) : rows.length === 0 ? /* @__PURE__ */ jsxs(EmptyNote, { className: styles.none, children: [
+      "No merchant matches \u201C",
+      search,
+      "\u201D. Try another name."
+    ] }) : /* @__PURE__ */ jsx("ul", { className: styles.list, children: rows.map((r, i) => {
+      const active = r.id === selectedId;
+      const logo = logoOf(r);
+      return /* @__PURE__ */ jsx(Reveal, { as: "li", index: i, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: styles.option,
+          "aria-current": active || void 0,
+          onClick: () => onPick(r),
+          children: [
+            logo && /* @__PURE__ */ jsx(
+              EntityAvatar,
+              {
+                name: r.businessName,
+                src: logo,
+                size: 32
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: styles.optionMain, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.name, title: r.businessName, children: r.businessName }),
+              /* @__PURE__ */ jsx("span", { className: styles.sub, title: r.slug, children: r.slug })
+            ] }),
+            /* @__PURE__ */ jsx(
+              StatusPill,
+              {
+                status: r.status,
+                tone: STATUS_TONE[r.status]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: styles.gmv,
+                title: "Lifetime sales, per currency, never added together",
+                children: [
+                  compactSales(r.gmvByCurrency, r.gmv),
+                  " sales"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: styles.check, "aria-hidden": true, children: active && /* @__PURE__ */ jsx(Check, { size: 16 }) })
+          ]
+        }
+      ) }, r.id);
+    }) }) })
+  ] }) });
+}
+export {
+  MerchantPicker
+};
+//# sourceMappingURL=merchant-picker.js.map

package/dist/admin/commerce/merchant-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/commerce/merchant-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { Check } from 'lucide-react';\nimport type { TenantRow } from '@withpotter/lib/admin-api';\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  EmptyNote,\n  SearchField,\n} from '@withpotter/ui-kit';\nimport { usePlatformTenants } from '../hooks';\nimport { EntityAvatar, Reveal } from '../_fx';\nimport { Skeleton } from '../_ui';\nimport { StatusPill } from '../tenants/[id]/commerce/status-pill';\nimport { bySales, compactSales, logoOf, STATUS_TONE } from './merchant-meta';\nimport styles from './picker.module.css';\n\n/** Search every merchant by name and choose whose commerce to read. */\nexport function MerchantPicker({\n  open,\n  onOpenChange,\n  selectedId,\n  onPick,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  selectedId: string | null;\n  onPick: (row: TenantRow) => void;\n}) {\n  const [query, setQuery] = useState('');\n  const [search, setSearch] = useState('');\n\n  useEffect(() => {\n    const t = window.setTimeout(() => setSearch(query.trim()), 250);\n    return () => window.clearTimeout(t);\n  }, [query]);\n\n  const list = usePlatformTenants({\n    search: search || undefined,\n    pageSize: 20,\n  });\n  const rows = bySales(list.data?.rows ?? []);\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-w-lg\">\n        <DialogHeader>\n          <DialogTitle>Choose a merchant</DialogTitle>\n          <DialogDescription>\n            Search by business name. Results are listed by sales, highest first.\n          </DialogDescription>\n        </DialogHeader>\n        <SearchField\n          value={query}\n          onChange={setQuery}\n          placeholder=\"Search merchants\"\n          autoFocus\n        />\n        <div className={styles.results} aria-busy={list.isLoading}>\n          {list.isLoading ? (\n            Array.from({ length: 5 }, (_, i) => (\n              <Skeleton key={i} height={52} radius={10} />\n            ))\n          ) : list.isError ? (\n            <EmptyNote\n              className={styles.none}\n              action={\n                <Button variant=\"secondary\" onClick={() => list.refetch()}>\n                  Try again\n                </Button>\n              }\n            >\n              Merchants could not be loaded.\n            </EmptyNote>\n          ) : rows.length === 0 ? (\n            <EmptyNote className={styles.none}>\n              No merchant matches “{search}”. Try another name.\n            </EmptyNote>\n          ) : (\n            <ul className={styles.list}>\n              {rows.map((r, i) => {\n                const active = r.id === selectedId;\n                const logo = logoOf(r);\n                return (\n                  <Reveal as=\"li\" key={r.id} index={i}>\n                    <button\n                      type=\"button\"\n                      className={styles.option}\n                      aria-current={active || undefined}\n                      onClick={() => onPick(r)}\n                    >\n                      {logo && (\n                        <EntityAvatar\n                          name={r.businessName}\n                          src={logo}\n                          size={32}\n                        />\n                      )}\n                      <span className={styles.optionMain}>\n                        <span className={styles.name} title={r.businessName}>\n                          {r.businessName}\n                        </span>\n                        <span className={styles.sub} title={r.slug}>\n                          {r.slug}\n                        </span>\n                      </span>\n                      <StatusPill\n                        status={r.status}\n                        tone={STATUS_TONE[r.status]}\n                      />\n                      <span\n                        className={styles.gmv}\n                        title=\"Lifetime sales, per currency, never added together\"\n                      >\n                        {compactSales(r.gmvByCurrency, r.gmv)} sales\n                      </span>\n                      <span className={styles.check} aria-hidden>\n                        {active && <Check size={16} />}\n                      </span>\n                    </button>\n                  </Reveal>\n                );\n              })}\n            </ul>\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/commerce/merchant-view.js

@@ -0,0 +1,113 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Button, Card, EmptyNote, ErrorBanner } from "@withpotter/ui-kit";
+import { usePlatformTenant, usePlatformTenants } from "../hooks";
+import { EntityAvatar, Reveal } from "../_fx";
+import { Skeleton } from "../_ui";
+import { MerchantCommerce } from "../tenants/[id]/commerce";
+import { StatusPill } from "../tenants/[id]/commerce/status-pill";
+import { bySales, compactSales, STATUS_TONE } from "./merchant-meta";
+import { MerchantPicker } from "./merchant-picker";
+import styles from "./console.module.css";
+function MerchantView({ range }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useSearchParams();
+  const [picking, setPicking] = useState(false);
+  const top = usePlatformTenants({ pageSize: 50 });
+  const fallback = bySales(top.data?.rows ?? [])[0]?.id ?? null;
+  const id = params.get("merchant") || fallback;
+  const tenant = usePlatformTenant(id ?? "", {
+    startDate: range.startDate,
+    endDate: range.endDate
+  });
+  const t = tenant.data;
+  const pick = (next) => {
+    const qs = new URLSearchParams(params.toString());
+    qs.set("merchant", next);
+    router.replace(`${pathname}?${qs.toString()}`, { scroll: false });
+    setPicking(false);
+  };
+  const noMerchants = !top.isLoading && !top.isError && !id;
+  return /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+    top.isError && !id ? /* @__PURE__ */ jsxs(ErrorBanner, { children: [
+      "Merchants could not be loaded.",
+      " ",
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => top.refetch(), children: "Try again" })
+    ] }) : noMerchants ? /* @__PURE__ */ jsx(
+      EmptyNote,
+      {
+        well: true,
+        action: /* @__PURE__ */ jsx(Button, { variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/admin/tenants", children: "Go to merchants" }) }),
+        children: "Once a business signs up, its items, orders and stock appear here."
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Reveal, { className: styles.current, children: [
+        t?.profile?.logoUrl && /* @__PURE__ */ jsx(
+          EntityAvatar,
+          {
+            name: t.businessName,
+            src: t.profile.logoUrl,
+            size: 40
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles.currentMain, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.eyebrow, children: "Merchant" }),
+          /* @__PURE__ */ jsx("span", { className: styles.currentName, title: t?.businessName, children: t ? t.businessName : /* @__PURE__ */ jsx(Skeleton, { width: 160, height: 20 }) }),
+          t && /* @__PURE__ */ jsxs("span", { className: styles.currentMeta, children: [
+            /* @__PURE__ */ jsx(
+              StatusPill,
+              {
+                status: t.status,
+                tone: STATUS_TONE[t.status]
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: styles.sub, children: [
+              compactSales(
+                t.metrics.byCurrency?.map((r) => ({
+                  currency: r.currency,
+                  amount: r.gmv
+                })),
+                t.metrics.gmv
+              ),
+              " ",
+              "lifetime sales"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: styles.sub, children: [
+              "Shown in ",
+              t.currency || "NGN",
+              ", the merchant\u2019s currency"
+            ] })
+          ] })
+        ] }),
+        id && /* @__PURE__ */ jsx(Button, { variant: "ghost", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: `/admin/tenants/${id}`, children: "Merchant profile" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setPicking(true), children: "Change merchant" })
+      ] }) }),
+      id && /* @__PURE__ */ jsx(
+        MerchantCommerce,
+        {
+          tenantId: id,
+          currency: t?.currency ?? "NGN",
+          range
+        },
+        id
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      MerchantPicker,
+      {
+        open: picking,
+        onOpenChange: setPicking,
+        selectedId: id,
+        onPick: (row) => pick(row.id)
+      }
+    )
+  ] });
+}
+export {
+  MerchantView
+};
+//# sourceMappingURL=merchant-view.js.map

package/dist/admin/commerce/merchant-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/commerce/merchant-view.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport Link from 'next/link';\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation';\nimport { Button, Card, EmptyNote, ErrorBanner } from '@withpotter/ui-kit';\nimport { usePlatformTenant, usePlatformTenants } from '../hooks';\nimport { EntityAvatar, Reveal } from '../_fx';\nimport { Skeleton, type DateRange } from '../_ui';\nimport { MerchantCommerce } from '../tenants/[id]/commerce';\nimport { StatusPill } from '../tenants/[id]/commerce/status-pill';\nimport { bySales, compactSales, STATUS_TONE } from './merchant-meta';\nimport { MerchantPicker } from './merchant-picker';\nimport styles from './console.module.css';\n\n/** \"By merchant\": pick a merchant, then read their commerce. */\nexport function MerchantView({ range }: { range: DateRange }) {\n  const router = useRouter();\n  const pathname = usePathname();\n  const params = useSearchParams();\n  const [picking, setPicking] = useState(false);\n\n  const top = usePlatformTenants({ pageSize: 50 });\n  const fallback = bySales(top.data?.rows ?? [])[0]?.id ?? null;\n  const id = params.get('merchant') || fallback;\n  const tenant = usePlatformTenant(id ?? '', {\n    startDate: range.startDate,\n    endDate: range.endDate,\n  });\n  const t = tenant.data;\n\n  const pick = (next: string) => {\n    const qs = new URLSearchParams(params.toString());\n    qs.set('merchant', next);\n    router.replace(`${pathname}?${qs.toString()}`, { scroll: false });\n    setPicking(false);\n  };\n\n  const noMerchants = !top.isLoading && !top.isError && !id;\n\n  return (\n    <div className={styles.body}>\n      {top.isError && !id ? (\n        <ErrorBanner>\n          Merchants could not be loaded.{' '}\n          <Button size=\"sm\" variant=\"secondary\" onClick={() => top.refetch()}>\n            Try again\n          </Button>\n        </ErrorBanner>\n      ) : noMerchants ? (\n        <EmptyNote\n          well\n          action={\n            <Button variant=\"secondary\" asChild>\n              <Link href=\"/admin/tenants\">Go to merchants</Link>\n            </Button>\n          }\n        >\n          Once a business signs up, its items, orders and stock appear here.\n        </EmptyNote>\n      ) : (\n        <>\n          <Card>\n            <Reveal className={styles.current}>\n              {t?.profile?.logoUrl && (\n                <EntityAvatar\n                  name={t.businessName}\n                  src={t.profile.logoUrl}\n                  size={40}\n                />\n              )}\n              <div className={styles.currentMain}>\n                <span className={styles.eyebrow}>Merchant</span>\n                <span className={styles.currentName} title={t?.businessName}>\n                  {t ? t.businessName : <Skeleton width={160} height={20} />}\n                </span>\n                {t && (\n                  <span className={styles.currentMeta}>\n                    <StatusPill\n                      status={t.status}\n                      tone={STATUS_TONE[t.status]}\n                    />\n                    <span className={styles.sub}>\n                      {compactSales(\n                        t.metrics.byCurrency?.map((r) => ({\n                          currency: r.currency,\n                          amount: r.gmv,\n                        })),\n                        t.metrics.gmv,\n                      )}{' '}\n                      lifetime sales\n                    </span>\n                    <span className={styles.sub}>\n                      Shown in {t.currency || 'NGN'}, the merchant’s currency\n                    </span>\n                  </span>\n                )}\n              </div>\n              {id && (\n                <Button variant=\"ghost\" asChild>\n                  <Link href={`/admin/tenants/${id}`}>Merchant profile</Link>\n                </Button>\n              )}\n              <Button variant=\"secondary\" onClick={() => setPicking(true)}>\n                Change merchant\n              </Button>\n            </Reveal>\n          </Card>\n\n          {id && (\n            <MerchantCommerce\n              key={id}\n              tenantId={id}\n              currency={t?.currency ?? 'NGN'}\n              range={range}\n            />\n          )}\n        </>\n      )}\n\n      <MerchantPicker\n        open={picking}\n        onOpenChange={setPicking}\n        selectedId={id}\n        onPick={(row) => pick(row.id)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}