@withpotter/pages-admin 0.13.0-next.101

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

@@ -0,0 +1,144 @@
+/* Inventory health tiles and the best-sellers ranking. */
+
+.tiles {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 24px;
+}
+
+/* Cells, not cards: no border inside the panel's own card. */
+.tile {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.tileHead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.tileLabel {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+  border-radius: 4px;
+}
+
+.tileLabel:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+.tileValue {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+  white-space: nowrap;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.share,
+.units,
+.none {
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}
+
+.none {
+  margin: 0;
+  font-size: 13px;
+  line-height: 20px;
+  white-space: normal;
+}
+
+.sellers {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.seller {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.rank {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  background: var(--bg-subtle);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.rank[data-top='true'] {
+  background: color-mix(in srgb, var(--brand-500) 10%, var(--bg-base));
+  color: color-mix(in srgb, var(--brand-500) 78%, var(--text-primary));
+}
+
+.sellerMain {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.sellerRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.sellerName {
+  flex: 1;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.sellerRevenue {
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.sellerBar {
+  flex: 1;
+}
+
+@media (max-width: 720px) {
+  .tiles {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

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

@@ -0,0 +1,5 @@
+import { MerchantCommerce } from "./merchant-commerce";
+export {
+  MerchantCommerce
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/index.ts"],"sourcesContent":["export { MerchantCommerce } from './merchant-commerce';\n"],"mappings":"AAAA,SAAS,wBAAwB;","names":[]}

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

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress, Tooltip } from "@withpotter/ui-kit";
+import { CountUp } from "../../../_fx";
+import { Panel, Skeleton } from "../../../_ui";
+import styles from "./health.module.css";
+const pct = (v, of) => of > 0 ? `${Math.round(v / of * 100)}%` : "0%";
+function InventoryHealth({
+  data,
+  loading,
+  money
+}) {
+  const tracked = data?.trackedProducts ?? 0;
+  const total = data?.totalProducts ?? 0;
+  const tiles = data ? [
+    {
+      key: "low",
+      label: "Low stock",
+      hint: "At or below the restock level the merchant set.",
+      bar: "warning",
+      value: data.lowStock,
+      of: tracked,
+      share: `${pct(data.lowStock, tracked)} of tracked items`
+    },
+    {
+      key: "out",
+      label: "Out of stock",
+      hint: "Tracked items with nothing left to sell.",
+      bar: "error",
+      value: data.outOfStock,
+      of: tracked,
+      share: `${pct(data.outOfStock, tracked)} of tracked items`
+    },
+    {
+      key: "dead",
+      label: "Dead stock",
+      hint: "Items that have never sold.",
+      bar: "brand",
+      value: data.deadStock,
+      of: total,
+      share: `${pct(data.deadStock, total)} of the catalogue`
+    },
+    {
+      key: "risk",
+      label: "Value at risk",
+      hint: "What low-stock items are worth at selling price.",
+      bar: "error",
+      value: data.inventoryAtRiskValue,
+      of: data.inventoryValue,
+      format: money,
+      share: `${pct(data.inventoryAtRiskValue, data.inventoryValue)} of ${money(data.inventoryValue)}`
+    }
+  ] : [];
+  return /* @__PURE__ */ jsx(
+    Panel,
+    {
+      title: "Inventory health",
+      caption: data ? `${tracked.toLocaleString()} of ${total.toLocaleString()} tracked` : void 0,
+      children: /* @__PURE__ */ jsx("div", { className: styles.tiles, "aria-busy": loading, children: loading ? Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsxs("div", { className: styles.tile, children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: 96, height: 14 }),
+        /* @__PURE__ */ jsx(Skeleton, { width: 64, height: 28 }),
+        /* @__PURE__ */ jsx(Skeleton, { height: 6 })
+      ] }, i)) : tiles.map((t) => /* @__PURE__ */ jsxs("div", { className: styles.tile, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.tileHead, children: /* @__PURE__ */ jsx(Tooltip, { label: t.hint, children: /* @__PURE__ */ jsx("span", { className: styles.tileLabel, tabIndex: 0, children: t.label }) }) }),
+        /* @__PURE__ */ jsx("div", { className: styles.tileValue, children: /* @__PURE__ */ jsx(CountUp, { value: t.value, format: t.format }) }),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            value: t.value,
+            max: Math.max(t.of, 1),
+            tone: t.bar
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: styles.share, title: t.share, children: t.share })
+      ] }, t.key)) })
+    }
+  );
+}
+export {
+  InventoryHealth
+};
+//# sourceMappingURL=inventory-health.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/inventory-health.tsx"],"sourcesContent":["'use client';\n\nimport type { ProductInsights } from '@withpotter/lib/admin-api';\nimport { Progress, Tooltip } from '@withpotter/ui-kit';\nimport { CountUp } from '../../../_fx';\nimport { Panel, Skeleton } from '../../../_ui';\nimport type { Money } from './format';\nimport styles from './health.module.css';\n\ntype Bar = 'warning' | 'error' | 'brand';\n\ninterface Tile {\n  key: string;\n  label: string;\n  hint: string;\n  bar: Bar;\n  value: number;\n  of: number;\n  format?: (n: number) => string;\n  share: string;\n}\n\nconst pct = (v: number, of: number) =>\n  of > 0 ? `${Math.round((v / of) * 100)}%` : '0%';\n\n/** Low, out, dead and at-risk stock, each against what it is a share of. */\nexport function InventoryHealth({\n  data,\n  loading,\n  money,\n}: {\n  data: ProductInsights | undefined;\n  loading: boolean;\n  money: Money;\n}) {\n  const tracked = data?.trackedProducts ?? 0;\n  const total = data?.totalProducts ?? 0;\n  const tiles: Tile[] = data\n    ? [\n        {\n          key: 'low',\n          label: 'Low stock',\n          hint: 'At or below the restock level the merchant set.',\n          bar: 'warning',\n          value: data.lowStock,\n          of: tracked,\n          share: `${pct(data.lowStock, tracked)} of tracked items`,\n        },\n        {\n          key: 'out',\n          label: 'Out of stock',\n          hint: 'Tracked items with nothing left to sell.',\n          bar: 'error',\n          value: data.outOfStock,\n          of: tracked,\n          share: `${pct(data.outOfStock, tracked)} of tracked items`,\n        },\n        {\n          key: 'dead',\n          label: 'Dead stock',\n          hint: 'Items that have never sold.',\n          bar: 'brand',\n          value: data.deadStock,\n          of: total,\n          share: `${pct(data.deadStock, total)} of the catalogue`,\n        },\n        {\n          key: 'risk',\n          label: 'Value at risk',\n          hint: 'What low-stock items are worth at selling price.',\n          bar: 'error',\n          value: data.inventoryAtRiskValue,\n          of: data.inventoryValue,\n          format: money,\n          share: `${pct(data.inventoryAtRiskValue, data.inventoryValue)} of ${money(data.inventoryValue)}`,\n        },\n      ]\n    : [];\n\n  return (\n    <Panel\n      title=\"Inventory health\"\n      caption={\n        data\n          ? `${tracked.toLocaleString()} of ${total.toLocaleString()} tracked`\n          : undefined\n      }\n    >\n      <div className={styles.tiles} aria-busy={loading}>\n        {loading\n          ? Array.from({ length: 4 }, (_, i) => (\n              <div key={i} className={styles.tile}>\n                <Skeleton width={96} height={14} />\n                <Skeleton width={64} height={28} />\n                <Skeleton height={6} />\n              </div>\n            ))\n          : tiles.map((t) => (\n              <div key={t.key} className={styles.tile}>\n                <div className={styles.tileHead}>\n                  <Tooltip label={t.hint}>\n                    <span className={styles.tileLabel} tabIndex={0}>\n                      {t.label}\n                    </span>\n                  </Tooltip>\n                </div>\n                <div className={styles.tileValue}>\n                  <CountUp value={t.value} format={t.format} />\n                </div>\n                <Progress\n                  value={t.value}\n                  max={Math.max(t.of, 1)}\n                  tone={t.bar}\n                />\n                <span className={styles.share} title={t.share}>\n                  {t.share}\n                </span>\n              </div>\n            ))}\n      </div>\n    </Panel>\n  );\n}\n"],"mappings":";AA2Fc,SACE,KADF;AAxFd,SAAS,UAAU,eAAe;AAClC,SAAS,eAAe;AACxB,SAAS,OAAO,gBAAgB;AAEhC,OAAO,YAAY;AAenB,MAAM,MAAM,CAAC,GAAW,OACtB,KAAK,IAAI,GAAG,KAAK,MAAO,IAAI,KAAM,GAAG,CAAC,MAAM;AAGvC,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,UAAU,MAAM,mBAAmB;AACzC,QAAM,QAAQ,MAAM,iBAAiB;AACrC,QAAM,QAAgB,OAClB;AAAA,IACE;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,KAAK;AAAA,MACL,OAAO,KAAK;AAAA,MACZ,IAAI;AAAA,MACJ,OAAO,GAAG,IAAI,KAAK,UAAU,OAAO,CAAC;AAAA,IACvC;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,KAAK;AAAA,MACL,OAAO,KAAK;AAAA,MACZ,IAAI;AAAA,MACJ,OAAO,GAAG,IAAI,KAAK,YAAY,OAAO,CAAC;AAAA,IACzC;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,KAAK;AAAA,MACL,OAAO,KAAK;AAAA,MACZ,IAAI;AAAA,MACJ,OAAO,GAAG,IAAI,KAAK,WAAW,KAAK,CAAC;AAAA,IACtC;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,KAAK;AAAA,MACL,OAAO,KAAK;AAAA,MACZ,IAAI,KAAK;AAAA,MACT,QAAQ;AAAA,MACR,OAAO,GAAG,IAAI,KAAK,sBAAsB,KAAK,cAAc,CAAC,OAAO,MAAM,KAAK,cAAc,CAAC;AAAA,IAChG;AAAA,EACF,IACA,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,SACE,OACI,GAAG,QAAQ,eAAe,CAAC,OAAO,MAAM,eAAe,CAAC,aACxD;AAAA,MAGN,8BAAC,SAAI,WAAW,OAAO,OAAO,aAAW,SACtC,oBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAC5B,qBAAC,SAAY,WAAW,OAAO,MAC7B;AAAA,4BAAC,YAAS,OAAO,IAAI,QAAQ,IAAI;AAAA,QACjC,oBAAC,YAAS,OAAO,IAAI,QAAQ,IAAI;AAAA,QACjC,oBAAC,YAAS,QAAQ,GAAG;AAAA,WAHb,CAIV,CACD,IACD,MAAM,IAAI,CAAC,MACT,qBAAC,SAAgB,WAAW,OAAO,MACjC;AAAA,4BAAC,SAAI,WAAW,OAAO,UACrB,8BAAC,WAAQ,OAAO,EAAE,MAChB,8BAAC,UAAK,WAAW,OAAO,WAAW,UAAU,GAC1C,YAAE,OACL,GACF,GACF;AAAA,QACA,oBAAC,SAAI,WAAW,OAAO,WACrB,8BAAC,WAAQ,OAAO,EAAE,OAAO,QAAQ,EAAE,QAAQ,GAC7C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,EAAE;AAAA,YACT,KAAK,KAAK,IAAI,EAAE,IAAI,CAAC;AAAA,YACrB,MAAM,EAAE;AAAA;AAAA,QACV;AAAA,QACA,oBAAC,UAAK,WAAW,OAAO,OAAO,OAAO,EAAE,OACrC,YAAE,OACL;AAAA,WAlBQ,EAAE,GAmBZ,CACD,GACP;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "@withpotter/ui-kit";
+import { humanize, moneyIn, stockOf } from "./format";
+import { StatusPill } from "./status-pill";
+import styles from "./items.module.css";
+const priceOf = (p, currency) => p.price == null ? "\u2013" : moneyIn(p.currency || currency, 2)(p.price);
+function ItemCard({
+  item,
+  currency,
+  index
+}) {
+  const stock = stockOf(item);
+  return /* @__PURE__ */ jsxs("li", { className: styles.card, "data-index": index, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.media, children: [
+      item.image?.url && // eslint-disable-next-line @next/next/no-img-element -- merchant images, any host
+      /* @__PURE__ */ jsx("img", { src: item.image.url, alt: "", loading: "lazy" }),
+      item.featured && /* @__PURE__ */ jsx("span", { className: styles.featured, children: "Featured" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.name, title: item.title, children: item.title }),
+      /* @__PURE__ */ jsxs("div", { className: styles.metaRow, children: [
+        /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: humanize(item.type) }),
+        item.category && /* @__PURE__ */ jsx("span", { className: styles.category, title: item.category, children: item.category })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.price, children: priceOf(item, currency) }),
+        item.compareAtPrice != null && item.price != null && item.compareAtPrice > item.price && /* @__PURE__ */ jsx("s", { className: styles.was, children: moneyIn(item.currency || currency, 2)(item.compareAtPrice) })
+      ] }),
+      /* @__PURE__ */ jsx(StatusPill, { label: stock.label, tone: stock.tone })
+    ] })
+  ] });
+}
+export {
+  ItemCard,
+  priceOf
+};
+//# sourceMappingURL=item-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/item-card.tsx"],"sourcesContent":["import type { TenantProduct } from '@withpotter/lib/admin-api';\nimport { Badge } from '@withpotter/ui-kit';\nimport { humanize, moneyIn, stockOf } from './format';\nimport { StatusPill } from './status-pill';\nimport styles from './items.module.css';\n\n/** The item's price in its own currency, or the merchant's. */\nexport const priceOf = (p: TenantProduct, currency: string) =>\n  p.price == null ? '–' : moneyIn(p.currency || currency, 2)(p.price);\n\n/** A product as a shopper would see it: picture first, then the facts. */\nexport function ItemCard({\n  item,\n  currency,\n  index,\n}: {\n  item: TenantProduct;\n  currency: string;\n  index: number;\n}) {\n  const stock = stockOf(item);\n\n  return (\n    <li className={styles.card} data-index={index}>\n      <div className={styles.media}>\n        {item.image?.url && (\n          // eslint-disable-next-line @next/next/no-img-element -- merchant images, any host\n          <img src={item.image.url} alt=\"\" loading=\"lazy\" />\n        )}\n        {item.featured && <span className={styles.featured}>Featured</span>}\n      </div>\n      <div className={styles.body}>\n        <div className={styles.name} title={item.title}>\n          {item.title}\n        </div>\n        <div className={styles.metaRow}>\n          <Badge variant=\"secondary\">{humanize(item.type)}</Badge>\n          {item.category && (\n            <span className={styles.category} title={item.category}>\n              {item.category}\n            </span>\n          )}\n        </div>\n        <div className={styles.priceRow}>\n          <span className={styles.price}>{priceOf(item, currency)}</span>\n          {item.compareAtPrice != null &&\n            item.price != null &&\n            item.compareAtPrice > item.price && (\n              <s className={styles.was}>\n                {moneyIn(item.currency || currency, 2)(item.compareAtPrice)}\n              </s>\n            )}\n        </div>\n        <StatusPill label={stock.label} tone={stock.tone} />\n      </div>\n    </li>\n  );\n}\n"],"mappings":"AAwBM,SAGI,KAHJ;AAvBN,SAAS,aAAa;AACtB,SAAS,UAAU,SAAS,eAAe;AAC3C,SAAS,kBAAkB;AAC3B,OAAO,YAAY;AAGZ,MAAM,UAAU,CAAC,GAAkB,aACxC,EAAE,SAAS,OAAO,WAAM,QAAQ,EAAE,YAAY,UAAU,CAAC,EAAE,EAAE,KAAK;AAG7D,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,QAAQ,QAAQ,IAAI;AAE1B,SACE,qBAAC,QAAG,WAAW,OAAO,MAAM,cAAY,OACtC;AAAA,yBAAC,SAAI,WAAW,OAAO,OACpB;AAAA,WAAK,OAAO;AAAA,MAEX,oBAAC,SAAI,KAAK,KAAK,MAAM,KAAK,KAAI,IAAG,SAAQ,QAAO;AAAA,MAEjD,KAAK,YAAY,oBAAC,UAAK,WAAW,OAAO,UAAU,sBAAQ;AAAA,OAC9D;AAAA,IACA,qBAAC,SAAI,WAAW,OAAO,MACrB;AAAA,0BAAC,SAAI,WAAW,OAAO,MAAM,OAAO,KAAK,OACtC,eAAK,OACR;AAAA,MACA,qBAAC,SAAI,WAAW,OAAO,SACrB;AAAA,4BAAC,SAAM,SAAQ,aAAa,mBAAS,KAAK,IAAI,GAAE;AAAA,QAC/C,KAAK,YACJ,oBAAC,UAAK,WAAW,OAAO,UAAU,OAAO,KAAK,UAC3C,eAAK,UACR;AAAA,SAEJ;AAAA,MACA,qBAAC,SAAI,WAAW,OAAO,UACrB;AAAA,4BAAC,UAAK,WAAW,OAAO,OAAQ,kBAAQ,MAAM,QAAQ,GAAE;AAAA,QACvD,KAAK,kBAAkB,QACtB,KAAK,SAAS,QACd,KAAK,iBAAiB,KAAK,SACzB,oBAAC,OAAE,WAAW,OAAO,KAClB,kBAAQ,KAAK,YAAY,UAAU,CAAC,EAAE,KAAK,cAAc,GAC5D;AAAA,SAEN;AAAA,MACA,oBAAC,cAAW,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM;AAAA,OACpD;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Button, EmptyNote, ErrorBanner, ViewSwitch } from "@withpotter/ui-kit";
+import { useTenantProducts } from "../../../hooks";
+import { FilterSearch, FilterSelect, Filters, Skeleton } from "../../../_ui";
+import { humanize } from "./format";
+import { ItemCard } from "./item-card";
+import { ItemsTable } from "./items-table";
+import cards from "./items.module.css";
+import styles from "./shell.module.css";
+const PAGE = 12;
+const CAP = 200;
+const activeCaption = (total, shown) => shown >= CAP && total > shown ? `First ${CAP.toLocaleString()} of ${total.toLocaleString()} active items` : `${total.toLocaleString()} active items \xB7 hidden items not shown`;
+function ItemsGallery({
+  tenantId,
+  currency
+}) {
+  const [view, setView] = useState("grid");
+  const [type, setType] = useState("");
+  const [query, setQuery] = useState("");
+  const [search, setSearch] = useState("");
+  const [shown, setShown] = useState(PAGE);
+  useEffect(() => {
+    const t = window.setTimeout(() => {
+      setSearch(query.trim());
+      setShown(PAGE);
+    }, 300);
+    return () => window.clearTimeout(t);
+  }, [query]);
+  const all = useTenantProducts(tenantId);
+  const list = useTenantProducts(tenantId, {
+    type: type || void 0,
+    search: search || void 0
+  });
+  const types = useMemo(() => {
+    const seen = new Set((all.data?.items ?? []).map((p) => p.type));
+    return [
+      { value: "", label: "All types" },
+      ...[...seen].sort().map((t) => ({ value: t, label: humanize(t) }))
+    ];
+  }, [all.data]);
+  const items = list.data?.items ?? [];
+  const visible = items.slice(0, shown);
+  const filtered = !!type || !!search;
+  return /* @__PURE__ */ jsxs("section", { className: styles.panel, "aria-label": "Items", children: [
+    /* @__PURE__ */ jsxs("header", { className: styles.toolbar, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.titleBlock, children: [
+        /* @__PURE__ */ jsx("h2", { className: styles.title, children: "Items" }),
+        /* @__PURE__ */ jsx("p", { className: styles.caption, children: list.data ? activeCaption(list.data.total, items.length) : "What this merchant sells" })
+      ] }),
+      /* @__PURE__ */ jsxs(Filters, { label: "Filter items", children: [
+        /* @__PURE__ */ jsx(
+          FilterSearch,
+          {
+            value: query,
+            onChange: setQuery,
+            placeholder: "Search items"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FilterSelect,
+          {
+            label: "Item type",
+            value: type,
+            onChange: (v) => {
+              setType(v);
+              setShown(PAGE);
+            },
+            options: types
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ViewSwitch,
+          {
+            "aria-label": "Items view",
+            className: "adm-view-switch",
+            value: view,
+            onChange: setView,
+            options: [
+              { value: "grid", label: "Grid" },
+              { value: "table", label: "Table" }
+            ]
+          }
+        )
+      ] })
+    ] }),
+    list.isError ? /* @__PURE__ */ jsx("div", { className: styles.state, children: /* @__PURE__ */ jsxs(ErrorBanner, { children: [
+      "The items could not be loaded.",
+      " ",
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "secondary",
+          onClick: () => list.refetch(),
+          children: "Try again"
+        }
+      )
+    ] }) }) : list.isLoading ? /* @__PURE__ */ jsx("ul", { className: cards.grid, "aria-busy": "true", "aria-label": "Loading items", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsxs("li", { className: cards.card, children: [
+      /* @__PURE__ */ jsx(Skeleton, { height: 140, radius: 10 }),
+      /* @__PURE__ */ jsxs("div", { className: cards.body, children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: "70%" }),
+        /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
+      ] })
+    ] }, i)) }) : items.length === 0 ? /* @__PURE__ */ jsx("div", { className: styles.state, children: /* @__PURE__ */ jsx(
+      EmptyNote,
+      {
+        well: true,
+        action: filtered && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "secondary",
+            onClick: () => {
+              setQuery("");
+              setType("");
+            },
+            children: "Clear filters"
+          }
+        ),
+        children: filtered ? "No items match these filters." : "No items listed yet. They appear here once the merchant adds them."
+      }
+    ) }) : view === "grid" ? /* @__PURE__ */ jsx("ul", { className: cards.grid, "data-few": visible.length < 4, children: visible.map((item, i) => /* @__PURE__ */ jsx(
+      ItemCard,
+      {
+        item,
+        currency,
+        index: i % PAGE
+      },
+      item.id
+    )) }) : /* @__PURE__ */ jsx(ItemsTable, { items: visible, currency }),
+    items.length > shown && /* @__PURE__ */ jsxs("footer", { className: styles.more, children: [
+      /* @__PURE__ */ jsxs("span", { className: styles.caption, children: [
+        "Showing ",
+        shown.toLocaleString(),
+        " of ",
+        items.length.toLocaleString()
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "secondary",
+          onClick: () => setShown((s) => s + PAGE),
+          children: "Show more"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ItemsGallery
+};
+//# sourceMappingURL=items-gallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/items-gallery.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { Button, EmptyNote, ErrorBanner, ViewSwitch } from '@withpotter/ui-kit';\nimport { useTenantProducts } from '../../../hooks';\nimport { FilterSearch, FilterSelect, Filters, Skeleton } from '../../../_ui';\nimport { humanize } from './format';\nimport { ItemCard } from './item-card';\nimport { ItemsTable } from './items-table';\nimport cards from './items.module.css';\nimport styles from './shell.module.css';\n\nconst PAGE = 12;\n/** The products endpoint returns active items only, at most this many. */\nconst CAP = 200;\ntype View = 'grid' | 'table';\n\n/** Hidden and archived items never come back, so only \"active\" is honest. */\nconst activeCaption = (total: number, shown: number) =>\n  shown >= CAP && total > shown\n    ? `First ${CAP.toLocaleString()} of ${total.toLocaleString()} active items`\n    : `${total.toLocaleString()} active items · hidden items not shown`;\n\n/** What the merchant sells, as a shop window or a table. */\nexport function ItemsGallery({\n  tenantId,\n  currency,\n}: {\n  tenantId: string;\n  currency: string;\n}) {\n  const [view, setView] = useState<View>('grid');\n  const [type, setType] = useState('');\n  const [query, setQuery] = useState('');\n  const [search, setSearch] = useState('');\n  const [shown, setShown] = useState(PAGE);\n\n  useEffect(() => {\n    const t = window.setTimeout(() => {\n      setSearch(query.trim());\n      setShown(PAGE);\n    }, 300);\n    return () => window.clearTimeout(t);\n  }, [query]);\n\n  const all = useTenantProducts(tenantId);\n  const list = useTenantProducts(tenantId, {\n    type: type || undefined,\n    search: search || undefined,\n  });\n\n  const types = useMemo(() => {\n    const seen = new Set((all.data?.items ?? []).map((p) => p.type));\n    return [\n      { value: '', label: 'All types' },\n      ...[...seen].sort().map((t) => ({ value: t, label: humanize(t) })),\n    ];\n  }, [all.data]);\n\n  const items = list.data?.items ?? [];\n  const visible = items.slice(0, shown);\n  const filtered = !!type || !!search;\n\n  return (\n    <section className={styles.panel} aria-label=\"Items\">\n      <header className={styles.toolbar}>\n        <div className={styles.titleBlock}>\n          <h2 className={styles.title}>Items</h2>\n          <p className={styles.caption}>\n            {list.data\n              ? activeCaption(list.data.total, items.length)\n              : 'What this merchant sells'}\n          </p>\n        </div>\n        <Filters label=\"Filter items\">\n          <FilterSearch\n            value={query}\n            onChange={setQuery}\n            placeholder=\"Search items\"\n          />\n          <FilterSelect\n            label=\"Item type\"\n            value={type}\n            onChange={(v) => {\n              setType(v);\n              setShown(PAGE);\n            }}\n            options={types}\n          />\n          <ViewSwitch<View>\n            aria-label=\"Items view\"\n            className=\"adm-view-switch\"\n            value={view}\n            onChange={setView}\n            options={[\n              { value: 'grid', label: 'Grid' },\n              { value: 'table', label: 'Table' },\n            ]}\n          />\n        </Filters>\n      </header>\n\n      {list.isError ? (\n        <div className={styles.state}>\n          <ErrorBanner>\n            The items could not be loaded.{' '}\n            <Button\n              size=\"sm\"\n              variant=\"secondary\"\n              onClick={() => list.refetch()}\n            >\n              Try again\n            </Button>\n          </ErrorBanner>\n        </div>\n      ) : list.isLoading ? (\n        <ul className={cards.grid} aria-busy=\"true\" aria-label=\"Loading items\">\n          {Array.from({ length: 8 }, (_, i) => (\n            <li key={i} className={cards.card}>\n              <Skeleton height={140} radius={10} />\n              <div className={cards.body}>\n                <Skeleton width=\"70%\" />\n                <Skeleton width=\"40%\" />\n              </div>\n            </li>\n          ))}\n        </ul>\n      ) : items.length === 0 ? (\n        <div className={styles.state}>\n          <EmptyNote\n            well\n            action={\n              filtered && (\n                <Button\n                  size=\"sm\"\n                  variant=\"secondary\"\n                  onClick={() => {\n                    setQuery('');\n                    setType('');\n                  }}\n                >\n                  Clear filters\n                </Button>\n              )\n            }\n          >\n            {filtered\n              ? 'No items match these filters.'\n              : 'No items listed yet. They appear here once the merchant adds them.'}\n          </EmptyNote>\n        </div>\n      ) : view === 'grid' ? (\n        <ul className={cards.grid} data-few={visible.length < 4}>\n          {visible.map((item, i) => (\n            <ItemCard\n              key={item.id}\n              item={item}\n              currency={currency}\n              index={i % PAGE}\n            />\n          ))}\n        </ul>\n      ) : (\n        <ItemsTable items={visible} currency={currency} />\n      )}\n\n      {items.length > shown && (\n        <footer className={styles.more}>\n          <span className={styles.caption}>\n            Showing {shown.toLocaleString()} of {items.length.toLocaleString()}\n          </span>\n          <Button\n            size=\"sm\"\n            variant=\"secondary\"\n            onClick={() => setShown((s) => s + PAGE)}\n          >\n            Show more\n          </Button>\n        </footer>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TableRow, TableShell, Th } from "@withpotter/ui-kit";
+import { EntityAvatar } from "../../../_fx";
+import { humanize, stockOf } from "./format";
+import { priceOf } from "./item-card";
+import { StatusPill } from "./status-pill";
+import styles from "./shell.module.css";
+function ItemsTable({
+  items,
+  currency
+}) {
+  return /* @__PURE__ */ jsx(
+    TableShell,
+    {
+      bare: true,
+      minWidth: 720,
+      density: "compact",
+      head: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx(Th, { children: "Item" }),
+        /* @__PURE__ */ jsx(Th, { children: "Type" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Price" }),
+        /* @__PURE__ */ jsx(Th, { children: "Stock" })
+      ] }),
+      children: items.map((item) => {
+        const stock = stockOf(item);
+        return /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", { className: styles.cellItem, children: [
+            item.image?.url && /* @__PURE__ */ jsx(
+              EntityAvatar,
+              {
+                name: item.title,
+                src: item.image.url,
+                size: 32
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: styles.cellName, title: item.title, children: item.title })
+          ] }) }),
+          /* @__PURE__ */ jsx("td", { children: humanize(item.type) }),
+          /* @__PURE__ */ jsx("td", { className: styles.num, children: priceOf(item, currency) }),
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(StatusPill, { label: stock.label, tone: stock.tone }) })
+        ] }, item.id);
+      })
+    }
+  );
+}
+export {
+  ItemsTable
+};
+//# sourceMappingURL=items-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/admin/tenants/%5Bid%5D/commerce/items-table.tsx"],"sourcesContent":["import type { TenantProduct } from '@withpotter/lib/admin-api';\nimport { TableRow, TableShell, Th } from '@withpotter/ui-kit';\nimport { EntityAvatar } from '../../../_fx';\nimport { humanize, stockOf } from './format';\nimport { priceOf } from './item-card';\nimport { StatusPill } from './status-pill';\nimport styles from './shell.module.css';\n\n/**\n * The same items as rows, for comparing price and stock down a column. The\n * API returns active items only, so there is no listing column.\n */\nexport function ItemsTable({\n  items,\n  currency,\n}: {\n  items: TenantProduct[];\n  currency: string;\n}) {\n  return (\n    <TableShell\n      bare\n      minWidth={720}\n      density=\"compact\"\n      head={\n        <tr>\n          <Th>Item</Th>\n          <Th>Type</Th>\n          <Th align=\"right\">Price</Th>\n          <Th>Stock</Th>\n        </tr>\n      }\n    >\n      {items.map((item) => {\n        const stock = stockOf(item);\n\n        return (\n          <TableRow key={item.id}>\n            <td>\n              <span className={styles.cellItem}>\n                {item.image?.url && (\n                  <EntityAvatar\n                    name={item.title}\n                    src={item.image.url}\n                    size={32}\n                  />\n                )}\n                <span className={styles.cellName} title={item.title}>\n                  {item.title}\n                </span>\n              </span>\n            </td>\n            <td>{humanize(item.type)}</td>\n            <td className={styles.num}>{priceOf(item, currency)}</td>\n            <td>\n              <StatusPill label={stock.label} tone={stock.tone} />\n            </td>\n          </TableRow>\n        );\n      })}\n    </TableShell>\n  );\n}\n"],"mappings":"AAyBQ,SACE,KADF;AAxBR,SAAS,UAAU,YAAY,UAAU;AACzC,SAAS,oBAAoB;AAC7B,SAAS,UAAU,eAAe;AAClC,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,OAAO,YAAY;AAMZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAI;AAAA,MACJ,UAAU;AAAA,MACV,SAAQ;AAAA,MACR,MACE,qBAAC,QACC;AAAA,4BAAC,MAAG,kBAAI;AAAA,QACR,oBAAC,MAAG,kBAAI;AAAA,QACR,oBAAC,MAAG,OAAM,SAAQ,mBAAK;AAAA,QACvB,oBAAC,MAAG,mBAAK;AAAA,SACX;AAAA,MAGD,gBAAM,IAAI,CAAC,SAAS;AACnB,cAAM,QAAQ,QAAQ,IAAI;AAE1B,eACE,qBAAC,YACC;AAAA,8BAAC,QACC,+BAAC,UAAK,WAAW,OAAO,UACrB;AAAA,iBAAK,OAAO,OACX;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM,KAAK;AAAA,gBACX,KAAK,KAAK,MAAM;AAAA,gBAChB,MAAM;AAAA;AAAA,YACR;AAAA,YAEF,oBAAC,UAAK,WAAW,OAAO,UAAU,OAAO,KAAK,OAC3C,eAAK,OACR;AAAA,aACF,GACF;AAAA,UACA,oBAAC,QAAI,mBAAS,KAAK,IAAI,GAAE;AAAA,UACzB,oBAAC,QAAG,WAAW,OAAO,KAAM,kBAAQ,MAAM,QAAQ,GAAE;AAAA,UACpD,oBAAC,QACC,8BAAC,cAAW,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,GACpD;AAAA,aAnBa,KAAK,EAoBpB;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

@@ -0,0 +1,125 @@
+/* Item cards: picture first, then name, type, price and stock. */
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--adm-gap);
+  margin: 0;
+  padding: 0 20px 20px;
+  list-style: none;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--adm-card-radius);
+  background: var(--bg-base);
+}
+
+/* A short catalogue: wide cards, picture beside the facts, so two or three
+   items fill the band instead of leaving most of it empty. */
+.grid[data-few='true'] {
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.grid[data-few='true'] .card {
+  flex-direction: row;
+}
+
+.grid[data-few='true'] .media {
+  flex: 0 0 40%;
+  max-width: 200px;
+  aspect-ratio: 1;
+}
+
+.grid[data-few='true'] .body {
+  flex: 1;
+  min-width: 0;
+  justify-content: center;
+}
+
+.media {
+  position: relative;
+  display: grid;
+  place-items: center;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  background: var(--bg-subtle);
+}
+
+/* No photo: a flat grey plate with a muted product glyph. */
+.media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.featured {
+  position: absolute;
+  top: 8px;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 20px;
+  box-shadow: var(--adm-shadow-1);
+  left: 8px;
+  background: var(--bg-base);
+  color: color-mix(in srgb, var(--brand-500) 78%, var(--text-primary));
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+}
+
+.name {
+  width: 100%;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.metaRow,
+.priceRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.category {
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}
+
+.price {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  white-space: nowrap;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.was {
+  font-size: 12px;
+  white-space: nowrap;
+  color: var(--text-muted);
+}