@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/_ui/filters.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Button, SearchField } from "@withpotter/ui-kit";
+import { Select } from "@withpotter/ui-kit/select";
+import { cn } from "@withpotter/lib/utils";
+import styles from "./filters.module.css";
+function Filters({
+  label,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(styles.group, className),
+      role: "search",
+      "aria-label": label,
+      children
+    }
+  );
+}
+const applied = (on) => on ? "true" : void 0;
+function FilterSearch({
+  value,
+  onChange,
+  placeholder,
+  label,
+  fill,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(styles.search, fill && styles.fill, className),
+      "data-applied": applied(!!value),
+      children: /* @__PURE__ */ jsx(
+        SearchField,
+        {
+          compact: true,
+          value,
+          onChange,
+          placeholder,
+          "aria-label": label
+        }
+      )
+    }
+  );
+}
+function FilterSelect({
+  value,
+  onChange,
+  options,
+  label,
+  allValue = "",
+  searchable,
+  placeholder,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(styles.select, className),
+      "data-applied": applied(value !== allValue),
+      children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          size: "sm",
+          triggerClassName: "h-7",
+          ariaLabel: label,
+          value,
+          onChange,
+          options,
+          searchable,
+          placeholder
+        }
+      )
+    }
+  );
+}
+function FilterPress({
+  on,
+  onToggle,
+  children
+}) {
+  return /* @__PURE__ */ jsx("span", { className: styles.press, "data-applied": applied(on), children: /* @__PURE__ */ jsx(Button, { variant: "secondary", "aria-pressed": on, onClick: onToggle, children }) });
+}
+export {
+  FilterPress,
+  FilterSearch,
+  FilterSelect,
+  Filters
+};
+//# sourceMappingURL=filters.js.map

package/dist/admin/_ui/filters.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/filters.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Button, SearchField } from '@withpotter/ui-kit';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { cn } from '@withpotter/lib/utils';\nimport styles from './filters.module.css';\n\n/**\n * The console's one filter toolbar: merchant SearchField, Select and DateField\n * at the md height (28px), one outlined look, fixed widths. It sits right of a\n * card title and wraps as one group; a control narrowing the list is tinted.\n */\nexport function Filters({\n  label,\n  children,\n  className,\n}: {\n  label: string;\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(styles.group, className)}\n      role=\"search\"\n      aria-label={label}\n    >\n      {children}\n    </div>\n  );\n}\n\nconst applied = (on: boolean) => (on ? 'true' : undefined);\n\nexport function FilterSearch({\n  value,\n  onChange,\n  placeholder,\n  label,\n  fill,\n  className,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  /** The field's name, when the placeholder is an example. */\n  label?: string;\n  /** Span the row (a narrow side pane) instead of the toolbar width. */\n  fill?: boolean;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(styles.search, fill && styles.fill, className)}\n      data-applied={applied(!!value)}\n    >\n      <SearchField\n        compact\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        aria-label={label}\n      />\n    </div>\n  );\n}\n\nexport function FilterSelect({\n  value,\n  onChange,\n  options,\n  label,\n  allValue = '',\n  searchable,\n  placeholder,\n  className,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  options: ComponentProps<typeof Select>['options'];\n  label: string;\n  /** The value that means \"not filtering\". */\n  allValue?: string;\n  searchable?: boolean;\n  placeholder?: string;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(styles.select, className)}\n      data-applied={applied(value !== allValue)}\n    >\n      <Select\n        size=\"sm\"\n        triggerClassName=\"h-7\"\n        ariaLabel={label}\n        value={value}\n        onChange={onChange}\n        options={options}\n        searchable={searchable}\n        placeholder={placeholder}\n      />\n    </div>\n  );\n}\n\n/** A two-state filter (\"Mine\"): secondary at rest, tinted while it is on. */\nexport function FilterPress({\n  on,\n  onToggle,\n  children,\n}: {\n  on: boolean;\n  onToggle: () => void;\n  children: ReactNode;\n}) {\n  return (\n    <span className={styles.press} data-applied={applied(on)}>\n      <Button variant=\"secondary\" aria-pressed={on} onClick={onToggle}>\n        {children}\n      </Button>\n    </span>\n  );\n}\n"],"mappings":";AAuBI;AApBJ,SAAS,QAAQ,mBAAmB;AACpC,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,OAAO,YAAY;AAOZ,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,OAAO,OAAO,SAAS;AAAA,MACrC,MAAK;AAAA,MACL,cAAY;AAAA,MAEX;AAAA;AAAA,EACH;AAEJ;AAEA,MAAM,UAAU,CAAC,OAAiB,KAAK,SAAS;AAEzC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,OAAO,QAAQ,QAAQ,OAAO,MAAM,SAAS;AAAA,MAC3D,gBAAc,QAAQ,CAAC,CAAC,KAAK;AAAA,MAE7B;AAAA,QAAC;AAAA;AAAA,UACC,SAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAY;AAAA;AAAA,MACd;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,OAAO,QAAQ,SAAS;AAAA,MACtC,gBAAc,QAAQ,UAAU,QAAQ;AAAA,MAExC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,kBAAiB;AAAA,UACjB,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAGO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,oBAAC,UAAK,WAAW,OAAO,OAAO,gBAAc,QAAQ,EAAE,GACrD,8BAAC,UAAO,SAAQ,aAAY,gBAAc,IAAI,SAAS,UACpD,UACH,GACF;AAEJ;","names":[]}

package/dist/admin/_ui/filters.module.css

@@ -0,0 +1,88 @@
+/* The filter toolbar: one row of 28px controls right of the card title,
+   wrapping as one group. Tokens, not skins: the primitives keep their own
+   look and read these scoped values. */
+
+.group {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  max-width: 100%;
+  min-width: 0;
+  margin-left: auto;
+
+  /* One white, outlined face for search, select and date alike. */
+  --bg-muted: var(--bg-base);
+  --border-subtle: var(--border-default);
+  --border-strong: var(--border-default);
+  /* Placeholders and glyphs a step darker, so they read on white. */
+  --text-muted: var(--text-tertiary);
+}
+
+.search {
+  width: 240px;
+  max-width: 100%;
+}
+
+.fill {
+  width: 100%;
+}
+
+.select {
+  width: 176px;
+}
+
+.dates {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.date {
+  width: 132px;
+}
+
+.dash {
+  color: var(--text-tertiary);
+}
+
+/* Narrowing the list: wash, ink and a brand hairline. */
+.press {
+  display: inline-flex;
+}
+
+.search[data-applied],
+.select[data-applied],
+.press[data-applied] {
+  --bg-base: var(--adm-tint);
+  --bg-muted: var(--adm-tint);
+  --border-default: var(--adm-tint-line);
+  --border-subtle: var(--adm-tint-line);
+  --border-strong: var(--adm-tint-line);
+  --text-primary: var(--adm-tint-ink);
+  --text-secondary: var(--adm-tint-ink);
+}
+
+@media (max-width: 719px) {
+  .group {
+    flex: 1 1 100%;
+    justify-content: stretch;
+  }
+
+  .search {
+    flex: 1 1 100%;
+    width: auto;
+  }
+
+  .select,
+  .dates {
+    flex: 1 1 auto;
+  }
+
+  .date {
+    flex: 1;
+    width: auto;
+  }
+}

package/dist/admin/_ui/index.js

@@ -0,0 +1,120 @@
+import { PageHeader } from "./page-header";
+import { Panel } from "./panel";
+import { PageTabs, useTabParam } from "./page-tabs";
+import { WorkspaceTab, useInWorkspaceTab, NESTED_TAB_PARAM } from "./workspace-tab";
+import { StatCard } from "./stat-card";
+import { Sparkline } from "./sparkline";
+import { DataTable } from "./data-table";
+import { FilterBar } from "./filter-bar";
+import { Filters, FilterSearch, FilterSelect, FilterPress } from "./filters";
+import { CurrencyFilter, useCurrencyParam } from "./currency-filter";
+import {
+  byCurrency,
+  currenciesIn,
+  inCurrency,
+  totalsByCurrency
+} from "./currency-filter-model";
+import { FilterDate, FilterDates } from "./filter-dates";
+import { Pagination } from "./pagination";
+import { Drawer } from "./drawer";
+import { Skeleton } from "./skeleton";
+import { EmptyState } from "./empty-state";
+import { AdmLoading } from "./loading";
+import { ColumnPicker } from "./column-picker";
+import { GmvOrdersChart, toTrend } from "./trend";
+import { DonutChart } from "./donut-chart";
+import {
+  rangeFromKey,
+  customRange,
+  formatSpan,
+  periodPhrase,
+  RANGE_OPTIONS
+} from "./period";
+import { PeriodSelector } from "./period-selector";
+import { usePersistedDateRange } from "./prefs";
+import { MoneyLines } from "./money-lines";
+import {
+  PICK_CURRENCY,
+  focusCurrency,
+  formatMoney,
+  moneyIn,
+  moneyLines,
+  noneText,
+  rowFor,
+  shownRows
+} from "./money-view";
+import { tableStyles, rowBtn, dangerRowBtn, chip, selectStyle } from "./styles";
+import {
+  STATUS_COLORS,
+  STATUS_FALLBACK,
+  CATEGORY_PALETTE,
+  PROVIDER_COLORS,
+  ROLE_COLORS,
+  ACCENT,
+  statusColor,
+  categoryColor
+} from "./chart-colors";
+export {
+  ACCENT,
+  AdmLoading,
+  CATEGORY_PALETTE,
+  ColumnPicker,
+  CurrencyFilter,
+  DataTable,
+  DonutChart,
+  Drawer,
+  EmptyState,
+  FilterBar,
+  FilterDate,
+  FilterDates,
+  FilterPress,
+  FilterSearch,
+  FilterSelect,
+  Filters,
+  GmvOrdersChart,
+  MoneyLines,
+  NESTED_TAB_PARAM,
+  PICK_CURRENCY,
+  PROVIDER_COLORS,
+  PageHeader,
+  PageTabs,
+  Pagination,
+  Panel,
+  PeriodSelector,
+  RANGE_OPTIONS,
+  ROLE_COLORS,
+  STATUS_COLORS,
+  STATUS_FALLBACK,
+  Skeleton,
+  Sparkline,
+  StatCard,
+  WorkspaceTab,
+  byCurrency,
+  categoryColor,
+  chip,
+  currenciesIn,
+  customRange,
+  dangerRowBtn,
+  focusCurrency,
+  formatMoney,
+  formatSpan,
+  inCurrency,
+  moneyIn,
+  moneyLines,
+  noneText,
+  periodPhrase,
+  rangeFromKey,
+  rowBtn,
+  rowFor,
+  selectStyle,
+  shownRows,
+  statusColor,
+  tableStyles,
+  toTrend,
+  totalsByCurrency,
+  useCurrencyParam,
+  useInWorkspaceTab,
+  usePersistedDateRange,
+  useTabParam
+};
+//# sourceMappingURL=index.js.map

package/dist/admin/_ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/index.ts"],"sourcesContent":["/**\n * The console's own kit, and only the parts the desk on this line uses.\n *\n * The full kit has charts, a period selector, currency toggles and stat cards\n * for the nine sections whose platform-admin routes have not reached staging.\n * They came across with everything else and were deleted rather than kept\n * dark: an unused module is one nobody notices has stopped compiling, and the\n * donut chart was already failing this repo's immutability rule. They come\n * back with the pages that need them.\n */\nexport { PageHeader } from './page-header';\nexport { Panel } from './panel';\nexport { PageTabs, useTabParam } from './page-tabs';\nexport { WorkspaceTab, useInWorkspaceTab, NESTED_TAB_PARAM } from './workspace-tab';\nexport { StatCard } from './stat-card';\nexport type { StatCardDelta } from './stat-card';\nexport { Sparkline } from './sparkline';\nexport { DataTable } from './data-table';\nexport type { Column } from './data-table';\nexport { FilterBar } from './filter-bar';\nexport { Filters, FilterSearch, FilterSelect, FilterPress } from './filters';\nexport { CurrencyFilter, useCurrencyParam } from './currency-filter';\nexport {\n  byCurrency,\n  currenciesIn,\n  inCurrency,\n  totalsByCurrency,\n} from './currency-filter-model';\nexport { FilterDate, FilterDates } from './filter-dates';\nexport { Pagination } from './pagination';\nexport { Drawer } from './drawer';\nexport { Skeleton } from './skeleton';\nexport { EmptyState } from './empty-state';\nexport { AdmLoading } from './loading';\nexport { ColumnPicker } from './column-picker';\nexport type { ColumnOption } from './column-picker';\nexport { GmvOrdersChart, toTrend } from './trend';\nexport { DonutChart } from './donut-chart';\nexport type { DonutSlice } from './donut-chart';\nexport {\n  rangeFromKey,\n  customRange,\n  formatSpan,\n  periodPhrase,\n  RANGE_OPTIONS,\n} from './period';\nexport { PeriodSelector } from './period-selector';\nexport type { RangeKey, DateRange } from './period';\nexport { usePersistedDateRange } from './prefs';\nexport { MoneyLines } from './money-lines';\nexport {\n  PICK_CURRENCY,\n  focusCurrency,\n  formatMoney,\n  moneyIn,\n  moneyLines,\n  noneText,\n  rowFor,\n  shownRows,\n} from './money-view';\nexport { tableStyles, rowBtn, dangerRowBtn, chip, selectStyle } from './styles';\nexport {\n  STATUS_COLORS,\n  STATUS_FALLBACK,\n  CATEGORY_PALETTE,\n  PROVIDER_COLORS,\n  ROLE_COLORS,\n  ACCENT,\n  statusColor,\n  categoryColor,\n} from './chart-colors';\n"],"mappings":"AAUA,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,UAAU,mBAAmB;AACtC,SAAS,cAAc,mBAAmB,wBAAwB;AAClE,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB;AAC1B,SAAS,SAAS,cAAc,cAAc,mBAAmB;AACjE,SAAS,gBAAgB,wBAAwB;AACjD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY,mBAAmB;AACxC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAE7B,SAAS,gBAAgB,eAAe;AACxC,SAAS,kBAAkB;AAE3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAE/B,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa,QAAQ,cAAc,MAAM,mBAAmB;AACrE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/dist/admin/_ui/list-card.js

@@ -0,0 +1,119 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, TableShell } from "@withpotter/ui-kit";
+import { EmptyState } from "./empty-state";
+import { Skeleton } from "./skeleton";
+import styles from "./list-card.module.css";
+const EMPTY = "\u2013";
+function ListCard({
+  title,
+  count,
+  controls,
+  head,
+  columns,
+  minWidth = 760,
+  selection,
+  isLoading,
+  isError,
+  onRetry,
+  errorTitle,
+  isEmpty,
+  emptyIcon,
+  emptyTitle,
+  emptyDescription,
+  footer,
+  children
+}) {
+  const state = (body) => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns, className: "!p-0", children: body }) });
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: `adm-section ${styles.card}`,
+      "aria-label": title,
+      "aria-busy": isLoading || void 0,
+      children: /* @__PURE__ */ jsx(
+        TableShell,
+        {
+          bare: true,
+          minWidth,
+          head,
+          selection,
+          columnCount: columns,
+          toolbar: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("h2", { className: styles.title, children: [
+              title,
+              count !== void 0 && /* @__PURE__ */ jsx("span", { className: styles.count, children: count })
+            ] }),
+            controls
+          ] }),
+          footer,
+          children: isLoading ? Array.from({ length: 8 }, (_, row) => /* @__PURE__ */ jsx("tr", { "aria-hidden": true, children: Array.from({ length: columns }, (_2, col) => /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Skeleton, { width: `${48 + (row + col) % 4 * 12}%` }) }, col)) }, `sk-${row}`)) : isError ? state(
+            /* @__PURE__ */ jsx(
+              EmptyState,
+              {
+                tone: "error",
+                title: errorTitle,
+                description: "Please retry. If this persists, check the API logs.",
+                action: onRetry && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onRetry, children: "Try again" })
+              }
+            )
+          ) : isEmpty ? state(
+            /* @__PURE__ */ jsx(
+              EmptyState,
+              {
+                icon: emptyIcon,
+                title: emptyTitle,
+                description: emptyDescription
+              }
+            )
+          ) : children
+        }
+      )
+    }
+  );
+}
+function ListPager({
+  page,
+  totalPages,
+  total,
+  noun,
+  onPage
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+    /* @__PURE__ */ jsx("span", { children: total != null ? `${new Intl.NumberFormat().format(total)} ${noun}` : "" }),
+    /* @__PURE__ */ jsxs("div", { className: styles.pages, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "secondary",
+          onClick: () => onPage(Math.max(1, page - 1)),
+          disabled: page <= 1,
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Page ",
+        page,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "secondary",
+          onClick: () => onPage(Math.min(totalPages, page + 1)),
+          disabled: page >= totalPages,
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  EMPTY,
+  ListCard,
+  ListPager
+};
+//# sourceMappingURL=list-card.js.map

package/dist/admin/_ui/list-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/list-card.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentType, ReactNode } from 'react';\nimport { Button, TableShell } from '@withpotter/ui-kit';\nimport { EmptyState } from './empty-state';\nimport { Skeleton } from './skeleton';\nimport styles from './list-card.module.css';\n\n/** What an empty cell shows: an en dash, never a blank. */\nexport const EMPTY = '–';\n\n/**\n * A list table in its own card: title, search and filters in the toolbar,\n * rows scrolling under a sticky header, the pager in the footer. Owns the\n * loading, error and empty rows so each list page only declares columns.\n */\nexport function ListCard({\n  title,\n  count,\n  controls,\n  head,\n  columns,\n  minWidth = 760,\n  selection,\n  isLoading,\n  isError,\n  onRetry,\n  errorTitle,\n  isEmpty,\n  emptyIcon,\n  emptyTitle,\n  emptyDescription,\n  footer,\n  children,\n}: {\n  title: string;\n  count?: number;\n  controls?: ReactNode;\n  /** The header <tr> of <Th> cells. */\n  head: ReactNode;\n  /** Column count, for skeleton and state rows. */\n  columns: number;\n  minWidth?: number;\n  /** Takes the header row's place while rows are ticked. */\n  selection?: ReactNode;\n  isLoading?: boolean;\n  isError?: boolean;\n  onRetry?: () => void;\n  errorTitle: string;\n  isEmpty?: boolean;\n  emptyIcon?: ComponentType<{ size?: number; color?: string }>;\n  emptyTitle: string;\n  emptyDescription?: string;\n  footer?: ReactNode;\n  children: ReactNode;\n}) {\n  const state = (body: ReactNode) => (\n    <tr>\n      <td colSpan={columns} className=\"!p-0\">\n        {body}\n      </td>\n    </tr>\n  );\n\n  return (\n    <section\n      className={`adm-section ${styles.card}`}\n      aria-label={title}\n      aria-busy={isLoading || undefined}\n    >\n      <TableShell\n        bare\n        minWidth={minWidth}\n        head={head}\n        selection={selection}\n        columnCount={columns}\n        toolbar={\n          <>\n            <h2 className={styles.title}>\n              {title}\n              {count !== undefined && (\n                <span className={styles.count}>{count}</span>\n              )}\n            </h2>\n            {controls}\n          </>\n        }\n        footer={footer}\n      >\n        {isLoading\n          ? Array.from({ length: 8 }, (_, row) => (\n              <tr key={`sk-${row}`} aria-hidden>\n                {Array.from({ length: columns }, (_, col) => (\n                  <td key={col}>\n                    <Skeleton width={`${48 + ((row + col) % 4) * 12}%`} />\n                  </td>\n                ))}\n              </tr>\n            ))\n          : isError\n            ? state(\n                <EmptyState\n                  tone=\"error\"\n                  title={errorTitle}\n                  description=\"Please retry. If this persists, check the API logs.\"\n                  action={\n                    onRetry && (\n                      <Button size=\"sm\" variant=\"secondary\" onClick={onRetry}>\n                        Try again\n                      </Button>\n                    )\n                  }\n                />,\n              )\n            : isEmpty\n              ? state(\n                  <EmptyState\n                    icon={emptyIcon}\n                    title={emptyTitle}\n                    description={emptyDescription}\n                  />,\n                )\n              : children}\n      </TableShell>\n    </section>\n  );\n}\n\n/** Count on the left, Previous · Page n of m · Next on the right. */\nexport function ListPager({\n  page,\n  totalPages,\n  total,\n  noun,\n  onPage,\n}: {\n  page: number;\n  totalPages: number;\n  total?: number;\n  noun: string;\n  onPage: (next: number) => void;\n}) {\n  return (\n    <div className={styles.footer}>\n      <span>\n        {total != null\n          ? `${new Intl.NumberFormat().format(total)} ${noun}`\n          : ''}\n      </span>\n      <div className={styles.pages}>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onClick={() => onPage(Math.max(1, page - 1))}\n          disabled={page <= 1}\n        >\n          Previous\n        </Button>\n        <span>\n          Page {page} of {totalPages}\n        </span>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          onClick={() => onPage(Math.min(totalPages, page + 1))}\n          disabled={page >= totalPages}\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA0DM,SAmBI,UAnBJ,KAoBM,YApBN;AAvDN,SAAS,QAAQ,kBAAkB;AACnC,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,OAAO,YAAY;AAGZ,MAAM,QAAQ;AAOd,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAqBG;AACD,QAAM,QAAQ,CAAC,SACb,oBAAC,QACC,8BAAC,QAAG,SAAS,SAAS,WAAU,QAC7B,gBACH,GACF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,eAAe,OAAO,IAAI;AAAA,MACrC,cAAY;AAAA,MACZ,aAAW,aAAa;AAAA,MAExB;AAAA,QAAC;AAAA;AAAA,UACC,MAAI;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA,aAAa;AAAA,UACb,SACE,iCACE;AAAA,iCAAC,QAAG,WAAW,OAAO,OACnB;AAAA;AAAA,cACA,UAAU,UACT,oBAAC,UAAK,WAAW,OAAO,OAAQ,iBAAM;AAAA,eAE1C;AAAA,YACC;AAAA,aACH;AAAA,UAEF;AAAA,UAEC,sBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,QAC5B,oBAAC,QAAqB,eAAW,MAC9B,gBAAM,KAAK,EAAE,QAAQ,QAAQ,GAAG,CAACA,IAAG,QACnC,oBAAC,QACC,8BAAC,YAAS,OAAO,GAAG,MAAO,MAAM,OAAO,IAAK,EAAE,KAAK,KAD7C,GAET,CACD,KALM,MAAM,GAAG,EAMlB,CACD,IACD,UACE;AAAA,YACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,aAAY;AAAA,gBACZ,QACE,WACE,oBAAC,UAAO,MAAK,MAAK,SAAQ,aAAY,SAAS,SAAS,uBAExD;AAAA;AAAA,YAGN;AAAA,UACF,IACA,UACE;AAAA,YACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,aAAa;AAAA;AAAA,YACf;AAAA,UACF,IACA;AAAA;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;AAGO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE,qBAAC,SAAI,WAAW,OAAO,QACrB;AAAA,wBAAC,UACE,mBAAS,OACN,GAAG,IAAI,KAAK,aAAa,EAAE,OAAO,KAAK,CAAC,IAAI,IAAI,KAChD,IACN;AAAA,IACA,qBAAC,SAAI,WAAW,OAAO,OACrB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,SAAS,MAAM,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,UAC3C,UAAU,QAAQ;AAAA,UACnB;AAAA;AAAA,MAED;AAAA,MACA,qBAAC,UAAK;AAAA;AAAA,QACE;AAAA,QAAK;AAAA,QAAK;AAAA,SAClB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,SAAS,MAAM,OAAO,KAAK,IAAI,YAAY,OAAO,CAAC,CAAC;AAAA,UACpD,UAAU,QAAQ;AAAA,UACnB;AAAA;AAAA,MAED;AAAA,OACF;AAAA,KACF;AAEJ;","names":["_"]}

package/dist/admin/_ui/list-card.module.css

@@ -0,0 +1,96 @@
+/* A list table in a card of its own: toolbar, scrolling rows, pager footer. */
+
+.card {
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--adm-card-radius);
+  background: var(--bg-base);
+  box-shadow: var(--adm-shadow-1);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 auto 0 4px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.count {
+  padding: 0 8px;
+  border-radius: 999px;
+  background: var(--adm-hover);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 20px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+}
+
+/* The list grows with its rows; only a wide table scrolls, sideways. */
+.card div:has(> table),
+.fill div:has(> table) {
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.note {
+  margin: 0;
+  padding: 0 20px;
+}
+
+.card thead th,
+.fill thead th {
+  white-space: nowrap;
+  background: var(--bg-base);
+}
+
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 13px;
+  line-height: 20px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+}
+
+.pages {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.muted {
+  color: var(--text-secondary);
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.num {
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.clip {
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dash {
+  color: var(--text-tertiary);
+}

package/dist/admin/_ui/loading.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BoxesLoader } from "@withpotter/ui-kit/boxes-loader";
+function AdmLoading({
+  label,
+  size = "md"
+}) {
+  const inner = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 12,
+        padding: "40px 0"
+      },
+      children: [
+        /* @__PURE__ */ jsx(BoxesLoader, { size }),
+        label ? /* @__PURE__ */ jsx("span", { style: { color: "var(--text-tertiary)", fontSize: 13 }, children: label }) : null
+      ]
+    }
+  );
+  return inner;
+}
+export {
+  AdmLoading
+};
+//# sourceMappingURL=loading.js.map

package/dist/admin/_ui/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/loading.tsx"],"sourcesContent":["import { BoxesLoader } from '@withpotter/ui-kit/boxes-loader';\n\n/**\n * Box branded loading state for the admin surfaces. Renders the animated\n * boxes loader centered (standalone, never wrapped in a card), with an\n * optional label. Use this instead of plain \"Loading…\" text so loading\n * activity stays on-brand.\n */\nexport function AdmLoading({\n  label,\n  size = 'md',\n}: {\n  label?: string;\n  size?: 'sm' | 'md' | 'lg';\n}) {\n  const inner = (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 12,\n        padding: '40px 0',\n      }}\n    >\n      <BoxesLoader size={size} />\n      {label ? (\n        <span style={{ color: 'var(--text-tertiary)', fontSize: 13 }}>\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n\n  return inner;\n}\n"],"mappings":"AAgBI,SAUE,KAVF;AAhBJ,SAAS,mBAAmB;AAQrB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AACT,GAGG;AACD,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MAEA;AAAA,4BAAC,eAAY,MAAY;AAAA,QACxB,QACC,oBAAC,UAAK,OAAO,EAAE,OAAO,wBAAwB,UAAU,GAAG,GACxD,iBACH,IACE;AAAA;AAAA;AAAA,EACN;AAGF,SAAO;AACT;","names":[]}

package/dist/admin/_ui/money-lines.js

@@ -0,0 +1,19 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { moneyLines, noneText } from "./money-view";
+import styles from "./money-lines.module.css";
+function MoneyLines({
+  rows,
+  currency,
+  amount,
+  empty,
+  decimals = 0
+}) {
+  const lines = moneyLines(rows, currency, amount, decimals);
+  if (!lines.length) return /* @__PURE__ */ jsx(Fragment, { children: noneText(currency, empty) });
+  if (lines.length === 1) return /* @__PURE__ */ jsx(Fragment, { children: lines[0] });
+  return /* @__PURE__ */ jsx("span", { className: styles.lines, children: lines.map((line) => /* @__PURE__ */ jsx("span", { children: line }, line)) });
+}
+export {
+  MoneyLines
+};
+//# sourceMappingURL=money-lines.js.map

package/dist/admin/_ui/money-lines.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/money-lines.tsx"],"sourcesContent":["import { moneyLines, noneText } from './money-view';\nimport styles from './money-lines.module.css';\n\n/**\n * A money figure that comes back once per currency: one line per shown\n * currency, never a total across them. Empty says \"No NGN\" when filtered.\n */\nexport function MoneyLines<T extends { currency: string }>({\n  rows,\n  currency,\n  amount,\n  empty,\n  decimals = 0,\n}: {\n  rows: readonly T[] | undefined;\n  /** The currency filter's choice; '' shows every currency. */\n  currency: string;\n  amount: (row: T) => number;\n  /** What to show with no money at all and no filter. */\n  empty?: string;\n  decimals?: number;\n}) {\n  const lines = moneyLines(rows, currency, amount, decimals);\n\n  if (!lines.length) return <>{noneText(currency, empty)}</>;\n  if (lines.length === 1) return <>{lines[0]}</>;\n\n  return (\n    <span className={styles.lines}>\n      {lines.map((line) => (\n        <span key={line}>{line}</span>\n      ))}\n    </span>\n  );\n}\n"],"mappings":"AAwB4B;AAxB5B,SAAS,YAAY,gBAAgB;AACrC,OAAO,YAAY;AAMZ,SAAS,WAA2C;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAQG;AACD,QAAM,QAAQ,WAAW,MAAM,UAAU,QAAQ,QAAQ;AAEzD,MAAI,CAAC,MAAM,OAAQ,QAAO,gCAAG,mBAAS,UAAU,KAAK,GAAE;AACvD,MAAI,MAAM,WAAW,EAAG,QAAO,gCAAG,gBAAM,CAAC,GAAE;AAE3C,SACE,oBAAC,UAAK,WAAW,OAAO,OACrB,gBAAM,IAAI,CAAC,SACV,oBAAC,UAAiB,kBAAP,IAAY,CACxB,GACH;AAEJ;","names":[]}

package/dist/admin/_ui/money-lines.module.css

@@ -0,0 +1,4 @@
+.lines {
+  display: grid;
+  gap: 2px;
+}

package/dist/admin/_ui/money-view.js

@@ -0,0 +1,43 @@
+function formatMoney(amount, currency, decimals = 0) {
+  const plain = () => new Intl.NumberFormat("en-US", { maximumFractionDigits: decimals }).format(amount);
+  if (currency === "XXX") return `${plain()} (no currency)`;
+  try {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currencyDisplay: "narrowSymbol",
+      currency,
+      maximumFractionDigits: decimals
+    }).format(amount);
+  } catch {
+    return `${currency} ${plain()}`;
+  }
+}
+const moneyIn = (currency, decimals = 0) => (amount) => formatMoney(amount, currency, decimals);
+function focusCurrency(currencies, selected) {
+  if (selected) return selected;
+  return currencies.length === 1 ? currencies[0] : null;
+}
+function shownRows(rows, selected) {
+  return (rows ?? []).filter((r) => !selected || r.currency === selected);
+}
+function rowFor(rows, currency) {
+  return currency ? (rows ?? []).find((r) => r.currency === currency) : void 0;
+}
+function moneyLines(rows, selected, amountOf, decimals = 0) {
+  return shownRows(rows, selected).map((r) => formatMoney(amountOf(r), r.currency, decimals));
+}
+function noneText(selected, fallback = "\u2013") {
+  return selected ? `No ${selected}` : fallback;
+}
+const PICK_CURRENCY = "Pick a currency to see this. Amounts in different currencies are never added together.";
+export {
+  PICK_CURRENCY,
+  focusCurrency,
+  formatMoney,
+  moneyIn,
+  moneyLines,
+  noneText,
+  rowFor,
+  shownRows
+};
+//# sourceMappingURL=money-view.js.map

package/dist/admin/_ui/money-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/_ui/money-view.ts"],"sourcesContent":["/**\n * How a page shows money that comes back once per currency.\n *\n * Amounts in different currencies are never added together and never\n * converted. A headline figure shows one line per currency; a chart or a\n * leaderboard needs one currency, so it follows the currency filter, or the\n * only currency there is, and otherwise asks for one to be picked.\n */\n\n/** An amount in its own currency's major unit: 120000, 'NGN' → \"₦120,000\". */\nexport function formatMoney(amount: number, currency: string, decimals = 0): string {\n  const plain = () =>\n    new Intl.NumberFormat('en-US', { maximumFractionDigits: decimals }).format(amount);\n  // XXX is ISO \"no currency\": the engine's label for a row with none.\n  if (currency === 'XXX') return `${plain()} (no currency)`;\n  try {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currencyDisplay: 'narrowSymbol',\n      currency,\n      maximumFractionDigits: decimals,\n    }).format(amount);\n  } catch {\n    return `${currency} ${plain()}`;\n  }\n}\n\n/** A formatter for one currency, for charts and tables that take `(n) => string`. */\nexport const moneyIn =\n  (currency: string, decimals = 0) =>\n  (amount: number): string =>\n    formatMoney(amount, currency, decimals);\n\n/**\n * The one currency a chart or leaderboard shows: the filter's choice, else\n * the only currency in the data, else null (several, none chosen).\n */\nexport function focusCurrency(currencies: readonly string[], selected: string): string | null {\n  if (selected) return selected;\n  return currencies.length === 1 ? currencies[0] : null;\n}\n\n/** The rows for the chosen currency; every row when none is chosen. */\nexport function shownRows<T extends { currency: string }>(\n  rows: readonly T[] | undefined,\n  selected: string,\n): T[] {\n  return (rows ?? []).filter((r) => !selected || r.currency === selected);\n}\n\n/** The row for one currency, if the data has it. */\nexport function rowFor<T extends { currency: string }>(\n  rows: readonly T[] | undefined,\n  currency: string | null,\n): T | undefined {\n  return currency ? (rows ?? []).find((r) => r.currency === currency) : undefined;\n}\n\n/** One formatted line per shown currency, A→Z as the API sends them. */\nexport function moneyLines<T extends { currency: string }>(\n  rows: readonly T[] | undefined,\n  selected: string,\n  amountOf: (row: T) => number,\n  decimals = 0,\n): string[] {\n  return shownRows(rows, selected).map((r) => formatMoney(amountOf(r), r.currency, decimals));\n}\n\n/** What an empty money figure says: \"No NGN\" when filtered, else the fallback. */\nexport function noneText(selected: string, fallback = '–'): string {\n  return selected ? `No ${selected}` : fallback;\n}\n\n/** The line under a chart that cannot add currencies together. */\nexport const PICK_CURRENCY = 'Pick a currency to see this. Amounts in different currencies are never added together.';\n"],"mappings":"AAUO,SAAS,YAAY,QAAgB,UAAkB,WAAW,GAAW;AAClF,QAAM,QAAQ,MACZ,IAAI,KAAK,aAAa,SAAS,EAAE,uBAAuB,SAAS,CAAC,EAAE,OAAO,MAAM;AAEnF,MAAI,aAAa,MAAO,QAAO,GAAG,MAAM,CAAC;AACzC,MAAI;AACF,WAAO,IAAI,KAAK,aAAa,SAAS;AAAA,MACpC,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB;AAAA,MACA,uBAAuB;AAAA,IACzB,CAAC,EAAE,OAAO,MAAM;AAAA,EAClB,QAAQ;AACN,WAAO,GAAG,QAAQ,IAAI,MAAM,CAAC;AAAA,EAC/B;AACF;AAGO,MAAM,UACX,CAAC,UAAkB,WAAW,MAC9B,CAAC,WACC,YAAY,QAAQ,UAAU,QAAQ;AAMnC,SAAS,cAAc,YAA+B,UAAiC;AAC5F,MAAI,SAAU,QAAO;AACrB,SAAO,WAAW,WAAW,IAAI,WAAW,CAAC,IAAI;AACnD;AAGO,SAAS,UACd,MACA,UACK;AACL,UAAQ,QAAQ,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,aAAa,QAAQ;AACxE;AAGO,SAAS,OACd,MACA,UACe;AACf,SAAO,YAAY,QAAQ,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,aAAa,QAAQ,IAAI;AACxE;AAGO,SAAS,WACd,MACA,UACA,UACA,WAAW,GACD;AACV,SAAO,UAAU,MAAM,QAAQ,EAAE,IAAI,CAAC,MAAM,YAAY,SAAS,CAAC,GAAG,EAAE,UAAU,QAAQ,CAAC;AAC5F;AAGO,SAAS,SAAS,UAAkB,WAAW,UAAa;AACjE,SAAO,WAAW,MAAM,QAAQ,KAAK;AACvC;AAGO,MAAM,gBAAgB;","names":[]}