@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/product-insights/report-empty.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/product-insights/report-empty.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { EmptyNote } from '@withpotter/ui-kit';\nimport { Reveal } from '../_fx';\nimport styles from './product-insights.module.css';\n\n/** An empty report: one sentence on what happened and one way forward. */\nexport function ReportEmpty({\n  message,\n  action,\n}: {\n  message: string;\n  action: ReactNode;\n}) {\n  return (\n    <Reveal className={`adm-panel ${styles.empty}`}>\n      <EmptyNote action={action}>{message}</EmptyNote>\n    </Reveal>\n  );\n}\n"],"mappings":"AAeM;AAdN,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,OAAO,YAAY;AAGZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGG;AACD,SACE,oBAAC,UAAO,WAAW,aAAa,OAAO,KAAK,IAC1C,8BAAC,aAAU,QAAiB,mBAAQ,GACtC;AAEJ;","names":[]}

package/dist/admin/product-insights/report-kpis.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MetricRow, MetricTile } from "@withpotter/ui-kit";
+import { CountUp } from "../_fx";
+const sentence = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+function ReportKpis({
+  total,
+  totalLabel,
+  movement,
+  hasBaseline,
+  share,
+  shareLabel,
+  shareSub,
+  categories,
+  period
+}) {
+  return /* @__PURE__ */ jsxs(MetricRow, { children: [
+    /* @__PURE__ */ jsx(
+      MetricTile,
+      {
+        label: "Activity",
+        value: /* @__PURE__ */ jsx(CountUp, { value: total }),
+        footnote: sentence(`${totalLabel}, ${period}`)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MetricTile,
+      {
+        label: "Period change",
+        value: movement === null ? "New" : `${movement > 0 ? "+" : ""}${movement.toLocaleString()}%`,
+        footnote: hasBaseline ? "Against the previous period" : "No earlier period to compare"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MetricTile,
+      {
+        label: shareLabel,
+        value: `${share}%`,
+        footnote: sentence(shareSub)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MetricTile,
+      {
+        label: "Categories",
+        value: /* @__PURE__ */ jsx(CountUp, { value: categories }),
+        footnote: "Distinct rows in this report"
+      }
+    )
+  ] });
+}
+export {
+  ReportKpis
+};
+//# sourceMappingURL=report-kpis.js.map

package/dist/admin/product-insights/report-kpis.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/product-insights/report-kpis.tsx"],"sourcesContent":["import { MetricRow, MetricTile } from '@withpotter/ui-kit';\nimport { CountUp } from '../_fx';\n\nconst sentence = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);\n\n/** The report's four headline figures, in one metric row. */\nexport function ReportKpis({\n  total,\n  totalLabel,\n  movement,\n  hasBaseline,\n  share,\n  shareLabel,\n  shareSub,\n  categories,\n  period,\n}: {\n  total: number;\n  totalLabel: string;\n  movement: number | null;\n  hasBaseline: boolean;\n  share: number;\n  shareLabel: string;\n  shareSub: string;\n  categories: number;\n  period: string;\n}) {\n  return (\n    <MetricRow>\n      <MetricTile\n        label=\"Activity\"\n        value={<CountUp value={total} />}\n        footnote={sentence(`${totalLabel}, ${period}`)}\n      />\n      <MetricTile\n        label=\"Period change\"\n        value={\n          movement === null\n            ? 'New'\n            : `${movement > 0 ? '+' : ''}${movement.toLocaleString()}%`\n        }\n        footnote={\n          hasBaseline\n            ? 'Against the previous period'\n            : 'No earlier period to compare'\n        }\n      />\n      <MetricTile\n        label={shareLabel}\n        value={`${share}%`}\n        footnote={sentence(shareSub)}\n      />\n      <MetricTile\n        label=\"Categories\"\n        value={<CountUp value={categories} />}\n        footnote=\"Distinct rows in this report\"\n      />\n    </MetricRow>\n  );\n}\n"],"mappings":"AA4BI,SAGW,KAHX;AA5BJ,SAAS,WAAW,kBAAkB;AACtC,SAAS,eAAe;AAExB,MAAM,WAAW,CAAC,MAAc,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC;AAG9D,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,SACE,qBAAC,aACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,oBAAC,WAAQ,OAAO,OAAO;AAAA,QAC9B,UAAU,SAAS,GAAG,UAAU,KAAK,MAAM,EAAE;AAAA;AAAA,IAC/C;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OACE,aAAa,OACT,QACA,GAAG,WAAW,IAAI,MAAM,EAAE,GAAG,SAAS,eAAe,CAAC;AAAA,QAE5D,UACE,cACI,gCACA;AAAA;AAAA,IAER;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO,GAAG,KAAK;AAAA,QACf,UAAU,SAAS,QAAQ;AAAA;AAAA,IAC7B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,oBAAC,WAAQ,OAAO,YAAY;AAAA,QACnC,UAAS;AAAA;AAAA,IACX;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/product-insights/report-panel.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Banner, Button } from "@withpotter/ui-kit";
+import { Skeleton } from "../_ui";
+import {
+  UNAVAILABLE_COPY,
+  VIEW_COPY,
+  interpretReport,
+  labelFor
+} from "./report-copy";
+import { ReportEmpty } from "./report-empty";
+import { ReportKpis } from "./report-kpis";
+import { ReportRanking } from "./report-ranking";
+import styles from "./product-insights.module.css";
+function MerchantsLink() {
+  return /* @__PURE__ */ jsx(Button, { variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/admin/tenants", children: "Go to merchants" }) });
+}
+function RetryButton({ onClick }) {
+  return /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick, children: "Retry" });
+}
+function ProductInsightReportPanel({
+  view,
+  hasTenant,
+  report,
+  previousReport,
+  period,
+  isLoading,
+  isError,
+  onRetry,
+  onWiden
+}) {
+  const copy = VIEW_COPY[view];
+  if (!hasTenant) {
+    return /* @__PURE__ */ jsx(
+      ReportEmpty,
+      {
+        message: "Select a merchant to see its report.",
+        action: /* @__PURE__ */ jsx(MerchantsLink, {})
+      }
+    );
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `adm-panel ${styles.loadingRows}`,
+        "aria-busy": "true",
+        "aria-label": `Loading ${copy.title}`,
+        children: [72, 54, 38, 25].map((width) => /* @__PURE__ */ jsx(Skeleton, { width: `${width}%`, height: 30, radius: 4 }, width))
+      }
+    );
+  }
+  if (isError || !report) {
+    return /* @__PURE__ */ jsx(
+      Banner,
+      {
+        tone: "error",
+        title: "Report failed to load",
+        action: /* @__PURE__ */ jsx(RetryButton, { onClick: onRetry }),
+        children: "The report request failed before the provider returned a result."
+      }
+    );
+  }
+  if (!report.available) {
+    return /* @__PURE__ */ jsx(
+      Banner,
+      {
+        tone: report.reason === "disabled" ? "info" : "error",
+        title: "Report unavailable",
+        action: /* @__PURE__ */ jsx(RetryButton, { onClick: onRetry }),
+        children: UNAVAILABLE_COPY[report.reason]
+      }
+    );
+  }
+  const rows = report.rows.filter(
+    (row) => typeof row.total === "number"
+  );
+  if (!rows.length) {
+    return /* @__PURE__ */ jsx(
+      ReportEmpty,
+      {
+        message: `${copy.empty} in this period.`,
+        action: onWiden ? /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onWiden, children: "Show the last 12 months" }) : /* @__PURE__ */ jsx(MerchantsLink, {})
+      }
+    );
+  }
+  const total = rows.reduce((sum, row) => sum + row.total, 0);
+  const previousTotal = previousReport?.available === true ? previousReport.rows.reduce((sum, row) => sum + (row.total ?? 0), 0) : null;
+  const movement = previousTotal && previousTotal > 0 ? Math.round((total - previousTotal) / previousTotal * 100) : null;
+  const leader = [...rows].sort((a, b) => b.total - a.total)[0];
+  const leaderShare = total > 0 ? Math.round(leader.total / total * 100) : 0;
+  const funnelConversion = view === "funnels" && rows[0]?.total ? Math.round(rows.at(-1).total / rows[0].total * 100) : null;
+  const funnels = view === "funnels";
+  return /* @__PURE__ */ jsxs("div", { className: styles.report, children: [
+    /* @__PURE__ */ jsx(
+      ReportKpis,
+      {
+        total,
+        totalLabel: copy.totalLabel,
+        movement,
+        hasBaseline: previousTotal !== null && previousTotal > 0,
+        share: funnels ? funnelConversion ?? 0 : leaderShare,
+        shareLabel: funnels ? "Completion" : "Leading share",
+        shareSub: funnels ? "first to final step" : labelFor(leader.key),
+        categories: rows.length,
+        period
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ReportRanking,
+      {
+        title: copy.title,
+        caption: `${period[0].toUpperCase()}${period.slice(1)}`,
+        rows,
+        interpretation: interpretReport(
+          view,
+          labelFor(leader.key),
+          leaderShare,
+          funnelConversion,
+          movement
+        )
+      }
+    )
+  ] });
+}
+export {
+  ProductInsightReportPanel
+};
+//# sourceMappingURL=report-panel.js.map

package/dist/admin/product-insights/report-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/product-insights/report-panel.tsx"],"sourcesContent":["import Link from 'next/link';\nimport { Banner, Button } from '@withpotter/ui-kit';\nimport type { ProductInsightReport } from '@withpotter/lib/product-insights-api';\nimport { Skeleton } from '../_ui';\nimport {\n  UNAVAILABLE_COPY,\n  VIEW_COPY,\n  interpretReport,\n  labelFor,\n  type ReportView,\n} from './report-copy';\nimport { ReportEmpty } from './report-empty';\nimport { ReportKpis } from './report-kpis';\nimport { ReportRanking } from './report-ranking';\nimport styles from './product-insights.module.css';\n\nfunction MerchantsLink() {\n  return (\n    <Button variant=\"secondary\" asChild>\n      <Link href=\"/admin/tenants\">Go to merchants</Link>\n    </Button>\n  );\n}\n\nfunction RetryButton({ onClick }: { onClick: () => void }) {\n  return (\n    <Button size=\"sm\" variant=\"secondary\" onClick={onClick}>\n      Retry\n    </Button>\n  );\n}\n\nexport function ProductInsightReportPanel({\n  view,\n  hasTenant,\n  report,\n  previousReport,\n  period,\n  isLoading,\n  isError,\n  onRetry,\n  onWiden,\n}: {\n  view: ReportView;\n  hasTenant: boolean;\n  report: ProductInsightReport | undefined;\n  previousReport: ProductInsightReport | undefined;\n  /** The window in words: \"last 30 days\", \"all time\". */\n  period: string;\n  isLoading: boolean;\n  isError: boolean;\n  onRetry: () => void;\n  /** Widen the period; omitted when it is already as wide as it goes. */\n  onWiden?: () => void;\n}) {\n  const copy = VIEW_COPY[view];\n\n  if (!hasTenant) {\n    return (\n      <ReportEmpty\n        message=\"Select a merchant to see its report.\"\n        action={<MerchantsLink />}\n      />\n    );\n  }\n\n  if (isLoading) {\n    return (\n      <div\n        className={`adm-panel ${styles.loadingRows}`}\n        aria-busy=\"true\"\n        aria-label={`Loading ${copy.title}`}\n      >\n        {[72, 54, 38, 25].map((width) => (\n          <Skeleton key={width} width={`${width}%`} height={30} radius={4} />\n        ))}\n      </div>\n    );\n  }\n\n  if (isError || !report) {\n    return (\n      <Banner\n        tone=\"error\"\n        title=\"Report failed to load\"\n        action={<RetryButton onClick={onRetry} />}\n      >\n        The report request failed before the provider returned a result.\n      </Banner>\n    );\n  }\n\n  if (!report.available) {\n    return (\n      <Banner\n        tone={report.reason === 'disabled' ? 'info' : 'error'}\n        title=\"Report unavailable\"\n        action={<RetryButton onClick={onRetry} />}\n      >\n        {UNAVAILABLE_COPY[report.reason]}\n      </Banner>\n    );\n  }\n\n  const rows = report.rows.filter(\n    (row): row is { key: string | null; total: number } =>\n      typeof row.total === 'number',\n  );\n  if (!rows.length) {\n    return (\n      <ReportEmpty\n        message={`${copy.empty} in this period.`}\n        action={\n          onWiden ? (\n            <Button variant=\"secondary\" onClick={onWiden}>\n              Show the last 12 months\n            </Button>\n          ) : (\n            <MerchantsLink />\n          )\n        }\n      />\n    );\n  }\n\n  const total = rows.reduce((sum, row) => sum + row.total, 0);\n  const previousTotal =\n    previousReport?.available === true\n      ? previousReport.rows.reduce((sum, row) => sum + (row.total ?? 0), 0)\n      : null;\n  const movement =\n    previousTotal && previousTotal > 0\n      ? Math.round(((total - previousTotal) / previousTotal) * 100)\n      : null;\n  const leader = [...rows].sort((a, b) => b.total - a.total)[0];\n  const leaderShare = total > 0 ? Math.round((leader.total / total) * 100) : 0;\n  const funnelConversion =\n    view === 'funnels' && rows[0]?.total\n      ? Math.round((rows.at(-1)!.total / rows[0].total) * 100)\n      : null;\n  const funnels = view === 'funnels';\n\n  return (\n    <div className={styles.report}>\n      <ReportKpis\n        total={total}\n        totalLabel={copy.totalLabel}\n        movement={movement}\n        hasBaseline={previousTotal !== null && previousTotal > 0}\n        share={funnels ? (funnelConversion ?? 0) : leaderShare}\n        shareLabel={funnels ? 'Completion' : 'Leading share'}\n        shareSub={funnels ? 'first to final step' : labelFor(leader.key)}\n        categories={rows.length}\n        period={period}\n      />\n      <ReportRanking\n        title={copy.title}\n        caption={`${period[0].toUpperCase()}${period.slice(1)}`}\n        rows={rows}\n        interpretation={interpretReport(\n          view,\n          labelFor(leader.key),\n          leaderShare,\n          funnelConversion,\n          movement,\n        )}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/product-insights/report-ranking.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Panel } from "../_ui";
+import { labelFor } from "./report-copy";
+import styles from "./product-insights.module.css";
+function ReportRanking({
+  title,
+  caption,
+  rows,
+  interpretation
+}) {
+  const maximum = Math.max(...rows.map((row) => row.total), 1);
+  return /* @__PURE__ */ jsxs(Panel, { title, caption, height: "auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.interpretation, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: styles.interpretationLabel, children: "What this means" }),
+        /* @__PURE__ */ jsx("strong", { children: interpretation.title }),
+        /* @__PURE__ */ jsx("p", { children: interpretation.detail })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: styles.interpretationLabel, children: "Next investigation" }),
+        /* @__PURE__ */ jsx("p", { children: interpretation.action })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("ol", { className: styles.ranking, children: rows.map((row, index) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.rankMeta, children: [
+        /* @__PURE__ */ jsx("span", { children: labelFor(row.key) }),
+        /* @__PURE__ */ jsx("strong", { children: row.total.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.track, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.bar,
+          style: {
+            width: `${Math.max(row.total / maximum * 100, 2)}%`
+          }
+        }
+      ) })
+    ] }, `${row.key ?? "unknown"}-${index}`)) })
+  ] });
+}
+export {
+  ReportRanking
+};
+//# sourceMappingURL=report-ranking.js.map

package/dist/admin/product-insights/report-ranking.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/product-insights/report-ranking.tsx"],"sourcesContent":["import { Panel } from '../_ui';\nimport { labelFor } from './report-copy';\nimport styles from './product-insights.module.css';\n\n/** What the figures mean, then every row ranked as a brand-blue bar. */\nexport function ReportRanking({\n  title,\n  caption,\n  rows,\n  interpretation,\n}: {\n  title: string;\n  caption: string;\n  rows: Array<{ key: string | null; total: number }>;\n  interpretation: { title: string; detail: string; action: string };\n}) {\n  const maximum = Math.max(...rows.map((row) => row.total), 1);\n\n  return (\n    <Panel title={title} caption={caption} height=\"auto\">\n      <div className={styles.interpretation}>\n        <div>\n          <span className={styles.interpretationLabel}>What this means</span>\n          <strong>{interpretation.title}</strong>\n          <p>{interpretation.detail}</p>\n        </div>\n        <div>\n          <span className={styles.interpretationLabel}>Next investigation</span>\n          <p>{interpretation.action}</p>\n        </div>\n      </div>\n      <ol className={styles.ranking}>\n        {rows.map((row, index) => (\n          <li key={`${row.key ?? 'unknown'}-${index}`}>\n            <div className={styles.rankMeta}>\n              <span>{labelFor(row.key)}</span>\n              <strong>{row.total.toLocaleString()}</strong>\n            </div>\n            <div className={styles.track} aria-hidden=\"true\">\n              <div\n                className={styles.bar}\n                style={{\n                  width: `${Math.max((row.total / maximum) * 100, 2)}%`,\n                }}\n              />\n            </div>\n          </li>\n        ))}\n      </ol>\n    </Panel>\n  );\n}\n"],"mappings":"AAqBQ,SACE,KADF;AArBR,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,OAAO,YAAY;AAGZ,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,GAAG,CAAC;AAE3D,SACE,qBAAC,SAAM,OAAc,SAAkB,QAAO,QAC5C;AAAA,yBAAC,SAAI,WAAW,OAAO,gBACrB;AAAA,2BAAC,SACC;AAAA,4BAAC,UAAK,WAAW,OAAO,qBAAqB,6BAAe;AAAA,QAC5D,oBAAC,YAAQ,yBAAe,OAAM;AAAA,QAC9B,oBAAC,OAAG,yBAAe,QAAO;AAAA,SAC5B;AAAA,MACA,qBAAC,SACC;AAAA,4BAAC,UAAK,WAAW,OAAO,qBAAqB,gCAAkB;AAAA,QAC/D,oBAAC,OAAG,yBAAe,QAAO;AAAA,SAC5B;AAAA,OACF;AAAA,IACA,oBAAC,QAAG,WAAW,OAAO,SACnB,eAAK,IAAI,CAAC,KAAK,UACd,qBAAC,QACC;AAAA,2BAAC,SAAI,WAAW,OAAO,UACrB;AAAA,4BAAC,UAAM,mBAAS,IAAI,GAAG,GAAE;AAAA,QACzB,oBAAC,YAAQ,cAAI,MAAM,eAAe,GAAE;AAAA,SACtC;AAAA,MACA,oBAAC,SAAI,WAAW,OAAO,OAAO,eAAY,QACxC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA,YACL,OAAO,GAAG,KAAK,IAAK,IAAI,QAAQ,UAAW,KAAK,CAAC,CAAC;AAAA,UACpD;AAAA;AAAA,MACF,GACF;AAAA,SAZO,GAAG,IAAI,OAAO,SAAS,IAAI,KAAK,EAazC,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/product-insights/use-insight-report.js

@@ -0,0 +1,59 @@
+"use client";
+import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  productInsightsApi
+} from "@withpotter/lib/product-insights-api";
+function loadReport(view, params) {
+  if (view === "overview") return productInsightsApi.overview(params);
+  if (view === "features") return productInsightsApi.features(params);
+  if (view === "paths") return productInsightsApi.paths(params);
+  return productInsightsApi.funnels({
+    ...params,
+    eventNames: [
+      "dashboard_feature_opened",
+      "dashboard_action_started",
+      "dashboard_action_completed"
+    ]
+  });
+}
+function previousRange(range) {
+  const start = new Date(range.startDate).getTime();
+  const span = new Date(range.endDate).getTime() - start;
+  if (start <= 0 || span <= 0) return null;
+  return {
+    startDate: new Date(start - span).toISOString(),
+    endDate: range.startDate
+  };
+}
+function useInsightReport(view, tenantId, range) {
+  const params = useMemo(
+    () => ({
+      startDate: range.startDate,
+      endDate: range.endDate,
+      tenantIds: tenantId ? [tenantId] : [],
+      limit: 50
+    }),
+    [range.startDate, range.endDate, tenantId]
+  );
+  const previous = useMemo(() => previousRange(range), [range]);
+  const previousParams = useMemo(
+    () => previous ? { ...params, ...previous } : null,
+    [params, previous]
+  );
+  const report = useQuery({
+    queryKey: ["platform-admin", "product-insights", view, params],
+    queryFn: () => loadReport(view, params),
+    enabled: Boolean(tenantId)
+  });
+  const previousReport = useQuery({
+    queryKey: ["platform-admin", "product-insights", view, previousParams],
+    queryFn: () => loadReport(view, previousParams),
+    enabled: Boolean(tenantId && previousParams)
+  });
+  return { report, previousReport };
+}
+export {
+  useInsightReport
+};
+//# sourceMappingURL=use-insight-report.js.map

package/dist/admin/product-insights/use-insight-report.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/product-insights/use-insight-report.ts"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport { useQuery } from '@tanstack/react-query';\nimport {\n  productInsightsApi,\n  type ProductInsightReportQuery,\n} from '@withpotter/lib/product-insights-api';\nimport type { DateRange } from '../_ui';\nimport type { ReportView } from './report-copy';\n\nfunction loadReport(view: ReportView, params: ProductInsightReportQuery) {\n  if (view === 'overview') return productInsightsApi.overview(params);\n  if (view === 'features') return productInsightsApi.features(params);\n  if (view === 'paths') return productInsightsApi.paths(params);\n  return productInsightsApi.funnels({\n    ...params,\n    eventNames: [\n      'dashboard_feature_opened',\n      'dashboard_action_started',\n      'dashboard_action_completed',\n    ],\n  });\n}\n\n/** The window of the same length that ends where this one starts. */\nfunction previousRange(range: DateRange) {\n  const start = new Date(range.startDate).getTime();\n  const span = new Date(range.endDate).getTime() - start;\n  if (start <= 0 || span <= 0) return null;\n  return {\n    startDate: new Date(start - span).toISOString(),\n    endDate: range.startDate,\n  };\n}\n\n/**\n * The selected report for one merchant, plus the same report for the window\n * before it so the page can say how activity moved. \"All time\" has no window\n * before it, so it skips the comparison instead of asking for nonsense dates.\n */\nexport function useInsightReport(\n  view: ReportView,\n  tenantId: string,\n  range: DateRange,\n) {\n  const params = useMemo<ProductInsightReportQuery>(\n    () => ({\n      startDate: range.startDate,\n      endDate: range.endDate,\n      tenantIds: tenantId ? [tenantId] : [],\n      limit: 50,\n    }),\n    [range.startDate, range.endDate, tenantId],\n  );\n  const previous = useMemo(() => previousRange(range), [range]);\n  const previousParams = useMemo<ProductInsightReportQuery | null>(\n    () => (previous ? { ...params, ...previous } : null),\n    [params, previous],\n  );\n\n  const report = useQuery({\n    queryKey: ['platform-admin', 'product-insights', view, params],\n    queryFn: () => loadReport(view, params),\n    enabled: Boolean(tenantId),\n  });\n  const previousReport = useQuery({\n    queryKey: ['platform-admin', 'product-insights', view, previousParams],\n    queryFn: () => loadReport(view, previousParams!),\n    enabled: Boolean(tenantId && previousParams),\n  });\n\n  return { report, previousReport };\n}\n"],"mappings":";AAEA,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,OAEK;AAIP,SAAS,WAAW,MAAkB,QAAmC;AACvE,MAAI,SAAS,WAAY,QAAO,mBAAmB,SAAS,MAAM;AAClE,MAAI,SAAS,WAAY,QAAO,mBAAmB,SAAS,MAAM;AAClE,MAAI,SAAS,QAAS,QAAO,mBAAmB,MAAM,MAAM;AAC5D,SAAO,mBAAmB,QAAQ;AAAA,IAChC,GAAG;AAAA,IACH,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAGA,SAAS,cAAc,OAAkB;AACvC,QAAM,QAAQ,IAAI,KAAK,MAAM,SAAS,EAAE,QAAQ;AAChD,QAAM,OAAO,IAAI,KAAK,MAAM,OAAO,EAAE,QAAQ,IAAI;AACjD,MAAI,SAAS,KAAK,QAAQ,EAAG,QAAO;AACpC,SAAO;AAAA,IACL,WAAW,IAAI,KAAK,QAAQ,IAAI,EAAE,YAAY;AAAA,IAC9C,SAAS,MAAM;AAAA,EACjB;AACF;AAOO,SAAS,iBACd,MACA,UACA,OACA;AACA,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,WAAW,MAAM;AAAA,MACjB,SAAS,MAAM;AAAA,MACf,WAAW,WAAW,CAAC,QAAQ,IAAI,CAAC;AAAA,MACpC,OAAO;AAAA,IACT;AAAA,IACA,CAAC,MAAM,WAAW,MAAM,SAAS,QAAQ;AAAA,EAC3C;AACA,QAAM,WAAW,QAAQ,MAAM,cAAc,KAAK,GAAG,CAAC,KAAK,CAAC;AAC5D,QAAM,iBAAiB;AAAA,IACrB,MAAO,WAAW,EAAE,GAAG,QAAQ,GAAG,SAAS,IAAI;AAAA,IAC/C,CAAC,QAAQ,QAAQ;AAAA,EACnB;AAEA,QAAM,SAAS,SAAS;AAAA,IACtB,UAAU,CAAC,kBAAkB,oBAAoB,MAAM,MAAM;AAAA,IAC7D,SAAS,MAAM,WAAW,MAAM,MAAM;AAAA,IACtC,SAAS,QAAQ,QAAQ;AAAA,EAC3B,CAAC;AACD,QAAM,iBAAiB,SAAS;AAAA,IAC9B,UAAU,CAAC,kBAAkB,oBAAoB,MAAM,cAAc;AAAA,IACrE,SAAS,MAAM,WAAW,MAAM,cAAe;AAAA,IAC/C,SAAS,QAAQ,YAAY,cAAc;AAAA,EAC7C,CAAC;AAED,SAAO,EAAE,QAAQ,eAAe;AAClC;","names":[]}

package/dist/admin/revenue/channel-panel.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EmptyNote, TableRow, TableShell, Th } from "@withpotter/ui-kit";
+import { PICK_CURRENCY, Panel, moneyIn } from "../_ui";
+import { channelRows } from "./channel-rows";
+import styles from "./revenue.module.css";
+const integer = new Intl.NumberFormat("en-US");
+function ChannelPanel({
+  totals,
+  focus,
+  caption
+}) {
+  if (!totals || totals.length === 0) return null;
+  const rows = channelRows(totals, focus);
+  const money = moneyIn(focus ?? "", 2);
+  return /* @__PURE__ */ jsx(Panel, { title: "Payment channels", caption, flush: true, children: !focus ? /* @__PURE__ */ jsx(EmptyNote, { className: styles.empty, children: PICK_CURRENCY }) : !rows ? /* @__PURE__ */ jsx(EmptyNote, { className: styles.empty, children: `No ${focus} payments through the gateway in this window.` }) : /* @__PURE__ */ jsx(
+    TableShell,
+    {
+      bare: true,
+      minWidth: 440,
+      density: "compact",
+      head: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx(Th, { children: "Channel" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Payments" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Amount" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Share" })
+      ] }),
+      children: rows.map((row) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx("td", { className: styles.name, children: row.label }),
+        /* @__PURE__ */ jsx("td", { className: styles.num, children: integer.format(row.count) }),
+        /* @__PURE__ */ jsx("td", { className: styles.numStrong, children: money(row.amount) }),
+        /* @__PURE__ */ jsx("td", { className: styles.num, children: /* @__PURE__ */ jsxs("span", { className: styles.share, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.shareTrack, "aria-hidden": true, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: styles.shareFill,
+              style: { width: `${Math.min(row.share, 100)}%` }
+            }
+          ) }),
+          row.share.toFixed(1),
+          "%"
+        ] }) })
+      ] }, row.key))
+    }
+  ) });
+}
+export {
+  ChannelPanel
+};
+//# sourceMappingURL=channel-panel.js.map

package/dist/admin/revenue/channel-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/revenue/channel-panel.tsx"],"sourcesContent":["import { EmptyNote, TableRow, TableShell, Th } from '@withpotter/ui-kit';\nimport type { GatewayChannelTotal } from '@withpotter/lib/admin-api';\nimport { PICK_CURRENCY, Panel, moneyIn } from '../_ui';\nimport { channelRows } from './channel-rows';\nimport styles from './revenue.module.css';\n\nconst integer = new Intl.NumberFormat('en-US');\n\n/**\n * How customers paid at the gateway checkout (Card, USSD, Bank transfer, Opay),\n * within one currency: payments, amount and share of that currency. Hidden\n * until the api sends channels, so a box that cannot say shows nothing rather\n * than an empty table.\n */\nexport function ChannelPanel({\n  totals,\n  focus,\n  caption,\n}: {\n  totals: readonly GatewayChannelTotal[] | undefined;\n  /** The one currency shown, or null when there are several and none is chosen. */\n  focus: string | null;\n  caption?: string;\n}) {\n  if (!totals || totals.length === 0) return null;\n\n  const rows = channelRows(totals, focus);\n  const money = moneyIn(focus ?? '', 2);\n\n  return (\n    <Panel title=\"Payment channels\" caption={caption} flush>\n      {!focus ? (\n        <EmptyNote className={styles.empty}>{PICK_CURRENCY}</EmptyNote>\n      ) : !rows ? (\n        <EmptyNote className={styles.empty}>\n          {`No ${focus} payments through the gateway in this window.`}\n        </EmptyNote>\n      ) : (\n        <TableShell\n          bare\n          minWidth={440}\n          density=\"compact\"\n          head={\n            <tr>\n              <Th>Channel</Th>\n              <Th align=\"right\">Payments</Th>\n              <Th align=\"right\">Amount</Th>\n              <Th align=\"right\">Share</Th>\n            </tr>\n          }\n        >\n          {rows.map((row) => (\n            <TableRow key={row.key}>\n              <td className={styles.name}>{row.label}</td>\n              <td className={styles.num}>{integer.format(row.count)}</td>\n              <td className={styles.numStrong}>{money(row.amount)}</td>\n              <td className={styles.num}>\n                <span className={styles.share}>\n                  <span className={styles.shareTrack} aria-hidden>\n                    <span\n                      className={styles.shareFill}\n                      style={{ width: `${Math.min(row.share, 100)}%` }}\n                    />\n                  </span>\n                  {row.share.toFixed(1)}%\n                </span>\n              </td>\n            </TableRow>\n          ))}\n        </TableShell>\n      )}\n    </Panel>\n  );\n}\n"],"mappings":"AAgCQ,cAWI,YAXJ;AAhCR,SAAS,WAAW,UAAU,YAAY,UAAU;AAEpD,SAAS,eAAe,OAAO,eAAe;AAC9C,SAAS,mBAAmB;AAC5B,OAAO,YAAY;AAEnB,MAAM,UAAU,IAAI,KAAK,aAAa,OAAO;AAQtC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,CAAC,UAAU,OAAO,WAAW,EAAG,QAAO;AAE3C,QAAM,OAAO,YAAY,QAAQ,KAAK;AACtC,QAAM,QAAQ,QAAQ,SAAS,IAAI,CAAC;AAEpC,SACE,oBAAC,SAAM,OAAM,oBAAmB,SAAkB,OAAK,MACpD,WAAC,QACA,oBAAC,aAAU,WAAW,OAAO,OAAQ,yBAAc,IACjD,CAAC,OACH,oBAAC,aAAU,WAAW,OAAO,OAC1B,gBAAM,KAAK,iDACd,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,MAAI;AAAA,MACJ,UAAU;AAAA,MACV,SAAQ;AAAA,MACR,MACE,qBAAC,QACC;AAAA,4BAAC,MAAG,qBAAO;AAAA,QACX,oBAAC,MAAG,OAAM,SAAQ,sBAAQ;AAAA,QAC1B,oBAAC,MAAG,OAAM,SAAQ,oBAAM;AAAA,QACxB,oBAAC,MAAG,OAAM,SAAQ,mBAAK;AAAA,SACzB;AAAA,MAGD,eAAK,IAAI,CAAC,QACT,qBAAC,YACC;AAAA,4BAAC,QAAG,WAAW,OAAO,MAAO,cAAI,OAAM;AAAA,QACvC,oBAAC,QAAG,WAAW,OAAO,KAAM,kBAAQ,OAAO,IAAI,KAAK,GAAE;AAAA,QACtD,oBAAC,QAAG,WAAW,OAAO,WAAY,gBAAM,IAAI,MAAM,GAAE;AAAA,QACpD,oBAAC,QAAG,WAAW,OAAO,KACpB,+BAAC,UAAK,WAAW,OAAO,OACtB;AAAA,8BAAC,UAAK,WAAW,OAAO,YAAY,eAAW,MAC7C;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,OAAO;AAAA,cAClB,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,IAAI,OAAO,GAAG,CAAC,IAAI;AAAA;AAAA,UACjD,GACF;AAAA,UACC,IAAI,MAAM,QAAQ,CAAC;AAAA,UAAE;AAAA,WACxB,GACF;AAAA,WAda,IAAI,GAenB,CACD;AAAA;AAAA,EACH,GAEJ;AAEJ;","names":[]}

package/dist/admin/revenue/channel-rows.js

@@ -0,0 +1,17 @@
+function channelRows(totals, currency) {
+  if (!currency) return null;
+  const mine = (totals ?? []).filter((t) => t.currency === currency);
+  if (mine.length === 0) return null;
+  const all = mine.reduce((sum, t) => sum + Number(t.amountMinor), 0);
+  return mine.map((t) => ({
+    key: t.channel.key === "other" ? `other:${t.channel.label}` : t.channel.key,
+    label: t.channel.label,
+    count: t.count,
+    amount: Number(t.amountMinor) / 100,
+    share: all > 0 ? Number(t.amountMinor) / all * 100 : 0
+  })).sort((a, b) => b.amount - a.amount);
+}
+export {
+  channelRows
+};
+//# sourceMappingURL=channel-rows.js.map

package/dist/admin/revenue/channel-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/revenue/channel-rows.ts"],"sourcesContent":["import type { GatewayChannelTotal } from '@withpotter/lib/admin-api';\n\nexport interface ChannelRow {\n  key: string;\n  label: string;\n  count: number;\n  /** In major units, for the money formatter. */\n  amount: number;\n  /** Percent of everything taken in this currency. */\n  share: number;\n}\n\n/**\n * The channels for one currency, biggest first, each with its share of that\n * currency. Currencies are never added together, so no currency means no rows.\n * Null when there is nothing to show: the api did not send channels, or none\n * were taken in this currency.\n */\nexport function channelRows(\n  totals: readonly GatewayChannelTotal[] | undefined,\n  currency: string | null,\n): ChannelRow[] | null {\n  if (!currency) return null;\n  const mine = (totals ?? []).filter((t) => t.currency === currency);\n  if (mine.length === 0) return null;\n\n  const all = mine.reduce((sum, t) => sum + Number(t.amountMinor), 0);\n  return mine\n    .map((t) => ({\n      key: t.channel.key === 'other' ? `other:${t.channel.label}` : t.channel.key,\n      label: t.channel.label,\n      count: t.count,\n      amount: Number(t.amountMinor) / 100,\n      share: all > 0 ? (Number(t.amountMinor) / all) * 100 : 0,\n    }))\n    .sort((a, b) => b.amount - a.amount);\n}\n"],"mappings":"AAkBO,SAAS,YACd,QACA,UACqB;AACrB,MAAI,CAAC,SAAU,QAAO;AACtB,QAAM,QAAQ,UAAU,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,aAAa,QAAQ;AACjE,MAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,QAAM,MAAM,KAAK,OAAO,CAAC,KAAK,MAAM,MAAM,OAAO,EAAE,WAAW,GAAG,CAAC;AAClE,SAAO,KACJ,IAAI,CAAC,OAAO;AAAA,IACX,KAAK,EAAE,QAAQ,QAAQ,UAAU,SAAS,EAAE,QAAQ,KAAK,KAAK,EAAE,QAAQ;AAAA,IACxE,OAAO,EAAE,QAAQ;AAAA,IACjB,OAAO,EAAE;AAAA,IACT,QAAQ,OAAO,EAAE,WAAW,IAAI;AAAA,IAChC,OAAO,MAAM,IAAK,OAAO,EAAE,WAAW,IAAI,MAAO,MAAM;AAAA,EACzD,EAAE,EACD,KAAK,CAAC,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM;AACvC;","names":[]}

package/dist/admin/revenue/cohort-panel.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { EmptyNote, TableShell, Th, ViewSwitch } from "@withpotter/ui-kit";
+import { TONE } from "../_fx";
+import { Panel } from "../_ui";
+import styles from "./revenue.module.css";
+const integer = new Intl.NumberFormat("en-US");
+const LENSES = [
+  { value: "share", label: "Share" },
+  { value: "count", label: "Merchants" }
+];
+function CohortPanel({ cohorts }) {
+  const [lens, setLens] = useState("share");
+  const offsets = cohorts[0]?.retention ?? [];
+  const cell = (v, size) => lens === "share" ? `${v}%` : integer.format(Math.round(size * v / 100));
+  return /* @__PURE__ */ jsx(
+    Panel,
+    {
+      title: "Logo cohort retention",
+      action: cohorts.length > 0 && /* @__PURE__ */ jsx(
+        ViewSwitch,
+        {
+          className: "adm-view-switch",
+          "aria-label": "Show cohort cells as",
+          options: LENSES,
+          value: lens,
+          onChange: setLens
+        }
+      ),
+      footer: "Share of each signup-month cohort still transacting (at least 1 paid order) at each month offset. M0 is the signup month itself.",
+      flush: true,
+      children: cohorts.length === 0 ? /* @__PURE__ */ jsx(EmptyNote, { className: styles.empty, children: "Not enough signup history yet." }) : /* @__PURE__ */ jsx(
+        TableShell,
+        {
+          bare: true,
+          minWidth: Math.max(320, 200 + offsets.length * 64),
+          density: "compact",
+          head: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx(Th, { children: "Cohort" }),
+            /* @__PURE__ */ jsx(Th, { align: "right", children: "Tenants" }),
+            offsets.map((_, i) => /* @__PURE__ */ jsxs(Th, { align: "right", children: [
+              "M",
+              i
+            ] }, i))
+          ] }),
+          children: cohorts.map((c) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("td", { className: styles.cohort, children: c.cohort }),
+            /* @__PURE__ */ jsx("td", { className: styles.num, children: integer.format(c.size) }),
+            c.retention.map((v, i) => /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: styles.heat,
+                "data-empty": v == null,
+                style: v == null ? void 0 : {
+                  // 60% at most, so dark figures stay readable on the darkest cell.
+                  background: `color-mix(in srgb, ${TONE.brand.fg} ${Math.round(
+                    Math.min(v, 100) * 0.6
+                  )}%, transparent)`
+                },
+                children: v == null ? "\u2013" : cell(v, c.size)
+              },
+              i
+            ))
+          ] }, c.cohort))
+        }
+      )
+    }
+  );
+}
+export {
+  CohortPanel
+};
+//# sourceMappingURL=cohort-panel.js.map

package/dist/admin/revenue/cohort-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/revenue/cohort-panel.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { EmptyNote, TableShell, Th, ViewSwitch } from '@withpotter/ui-kit';\nimport type { PlatformRevenue } from '@withpotter/lib/admin-api';\nimport { TONE } from '../_fx';\nimport { Panel } from '../_ui';\nimport styles from './revenue.module.css';\n\nconst integer = new Intl.NumberFormat('en-US');\n\ntype Cohort = NonNullable<PlatformRevenue['quality']>['cohorts'][number];\ntype Lens = 'share' | 'count';\n\nconst LENSES = [\n  { value: 'share' as const, label: 'Share' },\n  { value: 'count' as const, label: 'Merchants' },\n];\n\n/**\n * Logo retention by signup month, shaded by the share still transacting.\n * The switch reads each cell as a share of the cohort or as the merchants\n * that share stands for; the shading stays the share either way.\n */\nexport function CohortPanel({ cohorts }: { cohorts: Cohort[] }) {\n  const [lens, setLens] = useState<Lens>('share');\n  const offsets = cohorts[0]?.retention ?? [];\n  const cell = (v: number, size: number) =>\n    lens === 'share' ? `${v}%` : integer.format(Math.round((size * v) / 100));\n\n  return (\n    <Panel\n      title=\"Logo cohort retention\"\n      action={\n        cohorts.length > 0 && (\n          <ViewSwitch\n            className=\"adm-view-switch\"\n            aria-label=\"Show cohort cells as\"\n            options={LENSES}\n            value={lens}\n            onChange={setLens}\n          />\n        )\n      }\n      footer=\"Share of each signup-month cohort still transacting (at least 1 paid order) at each month offset. M0 is the signup month itself.\"\n      flush\n    >\n      {cohorts.length === 0 ? (\n        <EmptyNote className={styles.empty}>\n          Not enough signup history yet.\n        </EmptyNote>\n      ) : (\n        <TableShell\n          bare\n          minWidth={Math.max(320, 200 + offsets.length * 64)}\n          density=\"compact\"\n          head={\n            <tr>\n              <Th>Cohort</Th>\n              <Th align=\"right\">Tenants</Th>\n              {offsets.map((_, i) => (\n                <Th key={i} align=\"right\">\n                  M{i}\n                </Th>\n              ))}\n            </tr>\n          }\n        >\n          {cohorts.map((c) => (\n            <tr key={c.cohort}>\n              <td className={styles.cohort}>{c.cohort}</td>\n              <td className={styles.num}>{integer.format(c.size)}</td>\n              {c.retention.map((v, i) => (\n                <td\n                  key={i}\n                  className={styles.heat}\n                  data-empty={v == null}\n                  style={\n                    v == null\n                      ? undefined\n                      : {\n                          // 60% at most, so dark figures stay readable on the darkest cell.\n                          background: `color-mix(in srgb, ${TONE.brand.fg} ${Math.round(\n                            Math.min(v, 100) * 0.6,\n                          )}%, transparent)`,\n                        }\n                  }\n                >\n                  {v == null ? '–' : cell(v, c.size)}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </TableShell>\n      )}\n    </Panel>\n  );\n}\n"],"mappings":";AAmCU,cA0BM,YA1BN;AAjCV,SAAS,gBAAgB;AACzB,SAAS,WAAW,YAAY,IAAI,kBAAkB;AAEtD,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,OAAO,YAAY;AAEnB,MAAM,UAAU,IAAI,KAAK,aAAa,OAAO;AAK7C,MAAM,SAAS;AAAA,EACb,EAAE,OAAO,SAAkB,OAAO,QAAQ;AAAA,EAC1C,EAAE,OAAO,SAAkB,OAAO,YAAY;AAChD;AAOO,SAAS,YAAY,EAAE,QAAQ,GAA0B;AAC9D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAe,OAAO;AAC9C,QAAM,UAAU,QAAQ,CAAC,GAAG,aAAa,CAAC;AAC1C,QAAM,OAAO,CAAC,GAAW,SACvB,SAAS,UAAU,GAAG,CAAC,MAAM,QAAQ,OAAO,KAAK,MAAO,OAAO,IAAK,GAAG,CAAC;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QACE,QAAQ,SAAS,KACf;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAW;AAAA,UACX,SAAS;AAAA,UACT,OAAO;AAAA,UACP,UAAU;AAAA;AAAA,MACZ;AAAA,MAGJ,QAAO;AAAA,MACP,OAAK;AAAA,MAEJ,kBAAQ,WAAW,IAClB,oBAAC,aAAU,WAAW,OAAO,OAAO,4CAEpC,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,KAAK,IAAI,KAAK,MAAM,QAAQ,SAAS,EAAE;AAAA,UACjD,SAAQ;AAAA,UACR,MACE,qBAAC,QACC;AAAA,gCAAC,MAAG,oBAAM;AAAA,YACV,oBAAC,MAAG,OAAM,SAAQ,qBAAO;AAAA,YACxB,QAAQ,IAAI,CAAC,GAAG,MACf,qBAAC,MAAW,OAAM,SAAQ;AAAA;AAAA,cACtB;AAAA,iBADK,CAET,CACD;AAAA,aACH;AAAA,UAGD,kBAAQ,IAAI,CAAC,MACZ,qBAAC,QACC;AAAA,gCAAC,QAAG,WAAW,OAAO,QAAS,YAAE,QAAO;AAAA,YACxC,oBAAC,QAAG,WAAW,OAAO,KAAM,kBAAQ,OAAO,EAAE,IAAI,GAAE;AAAA,YAClD,EAAE,UAAU,IAAI,CAAC,GAAG,MACnB;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAW,OAAO;AAAA,gBAClB,cAAY,KAAK;AAAA,gBACjB,OACE,KAAK,OACD,SACA;AAAA;AAAA,kBAEE,YAAY,sBAAsB,KAAK,MAAM,EAAE,IAAI,KAAK;AAAA,oBACtD,KAAK,IAAI,GAAG,GAAG,IAAI;AAAA,kBACrB,CAAC;AAAA,gBACH;AAAA,gBAGL,eAAK,OAAO,WAAM,KAAK,GAAG,EAAE,IAAI;AAAA;AAAA,cAd5B;AAAA,YAeP,CACD;AAAA,eArBM,EAAE,MAsBX,CACD;AAAA;AAAA,MACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/admin/revenue/download-button.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, useToast } from "@withpotter/ui-kit";
+function saveCsv(filename, text) {
+  const url = URL.createObjectURL(
+    new Blob([`\uFEFF${text}`], { type: "text/csv;charset=utf-8" })
+  );
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+}
+function DownloadButton({
+  filename,
+  load,
+  label = "Download as CSV"
+}) {
+  const [busy, setBusy] = useState(false);
+  const { toast } = useToast();
+  const run = async () => {
+    setBusy(true);
+    try {
+      saveCsv(filename, await load());
+    } catch {
+      toast({ title: "The download did not start. Please try again." });
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", loading: busy, onClick: () => void run(), children: label });
+}
+export {
+  DownloadButton,
+  saveCsv
+};
+//# sourceMappingURL=download-button.js.map

package/dist/admin/revenue/download-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/revenue/download-button.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Button, useToast } from '@withpotter/ui-kit';\n\n/** Saves what `load` returns (CSV text) as a file. A byte-order mark is put first so Excel reads names and ₦ correctly. */\nexport function saveCsv(filename: string, text: string): void {\n  const url = URL.createObjectURL(\n    new Blob([`${text}`], { type: 'text/csv;charset=utf-8' }),\n  );\n  const link = document.createElement('a');\n  link.href = url;\n  link.download = filename;\n  document.body.appendChild(link);\n  link.click();\n  link.remove();\n  URL.revokeObjectURL(url);\n}\n\n/** One button that downloads the table as it is filtered. */\nexport function DownloadButton({\n  filename,\n  load,\n  label = 'Download as CSV',\n}: {\n  filename: string;\n  load: () => Promise<string>;\n  label?: string;\n}) {\n  const [busy, setBusy] = useState(false);\n  const { toast } = useToast();\n\n  const run = async () => {\n    setBusy(true);\n    try {\n      saveCsv(filename, await load());\n    } catch {\n      toast({ title: 'The download did not start. Please try again.' });\n    } finally {\n      setBusy(false);\n    }\n  };\n\n  return (\n    <Button variant=\"secondary\" size=\"sm\" loading={busy} onClick={() => void run()}>\n      {label}\n    </Button>\n  );\n}\n"],"mappings":";AA4CI;AA1CJ,SAAS,gBAAgB;AACzB,SAAS,QAAQ,gBAAgB;AAG1B,SAAS,QAAQ,UAAkB,MAAoB;AAC5D,QAAM,MAAM,IAAI;AAAA,IACd,IAAI,KAAK,CAAC,SAAI,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAAA,EAC3D;AACA,QAAM,OAAO,SAAS,cAAc,GAAG;AACvC,OAAK,OAAO;AACZ,OAAK,WAAW;AAChB,WAAS,KAAK,YAAY,IAAI;AAC9B,OAAK,MAAM;AACX,OAAK,OAAO;AACZ,MAAI,gBAAgB,GAAG;AACzB;AAGO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAIG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,EAAE,MAAM,IAAI,SAAS;AAE3B,QAAM,MAAM,YAAY;AACtB,YAAQ,IAAI;AACZ,QAAI;AACF,cAAQ,UAAU,MAAM,KAAK,CAAC;AAAA,IAChC,QAAQ;AACN,YAAM,EAAE,OAAO,gDAAgD,CAAC;AAAA,IAClE,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,SACE,oBAAC,UAAO,SAAQ,aAAY,MAAK,MAAK,SAAS,MAAM,SAAS,MAAM,KAAK,IAAI,GAC1E,iBACH;AAEJ;","names":[]}

package/dist/admin/revenue/figure-list.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { StatusPill } from "../audit/status-pill";
+import styles from "./revenue.module.css";
+function FigureList({ rows }) {
+  return /* @__PURE__ */ jsx("dl", { className: styles.figures, children: rows.map((row) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("dt", { children: [
+      row.status ? /* @__PURE__ */ jsx("span", { className: styles.figurePill, children: /* @__PURE__ */ jsx(StatusPill, { status: row.status, label: row.label }) }) : /* @__PURE__ */ jsx("span", { className: styles.figureLabel, children: row.label }),
+      row.note && /* @__PURE__ */ jsx("span", { className: styles.figureNote, children: row.note })
+    ] }),
+    /* @__PURE__ */ jsxs("dd", { children: [
+      /* @__PURE__ */ jsx("span", { className: styles.figureValue, "data-tone": row.tone, children: row.value }),
+      row.hint && /* @__PURE__ */ jsx("span", { className: styles.figureHint, children: row.hint })
+    ] })
+  ] }, row.label)) });
+}
+export {
+  FigureList
+};
+//# sourceMappingURL=figure-list.js.map

package/dist/admin/revenue/figure-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/revenue/figure-list.tsx"],"sourcesContent":["import { StatusPill } from '../audit/status-pill';\nimport styles from './revenue.module.css';\n\nexport interface Figure {\n  label: string;\n  /** One short line under the label saying what the figure means. */\n  note?: string;\n  value: string;\n  /** One short line under the value, e.g. \"of 1,200\". */\n  hint?: string;\n  tone?: 'default' | 'danger';\n  /** A billing state the label names: drawn as its semantic status pill. */\n  status?: string;\n}\n\n/** Label-left, value-right rows divided by hairlines, as on the Overview. */\nexport function FigureList({ rows }: { rows: Figure[] }) {\n  return (\n    <dl className={styles.figures}>\n      {rows.map((row) => (\n        <div key={row.label}>\n          <dt>\n            {row.status ? (\n              <span className={styles.figurePill}>\n                <StatusPill status={row.status} label={row.label} />\n              </span>\n            ) : (\n              <span className={styles.figureLabel}>{row.label}</span>\n            )}\n            {row.note && <span className={styles.figureNote}>{row.note}</span>}\n          </dt>\n          <dd>\n            <span className={styles.figureValue} data-tone={row.tone}>\n              {row.value}\n            </span>\n            {row.hint && <span className={styles.figureHint}>{row.hint}</span>}\n          </dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n"],"mappings":"AAqBU,SAGM,KAHN;AArBV,SAAS,kBAAkB;AAC3B,OAAO,YAAY;AAeZ,SAAS,WAAW,EAAE,KAAK,GAAuB;AACvD,SACE,oBAAC,QAAG,WAAW,OAAO,SACnB,eAAK,IAAI,CAAC,QACT,qBAAC,SACC;AAAA,yBAAC,QACE;AAAA,UAAI,SACH,oBAAC,UAAK,WAAW,OAAO,YACtB,8BAAC,cAAW,QAAQ,IAAI,QAAQ,OAAO,IAAI,OAAO,GACpD,IAEA,oBAAC,UAAK,WAAW,OAAO,aAAc,cAAI,OAAM;AAAA,MAEjD,IAAI,QAAQ,oBAAC,UAAK,WAAW,OAAO,YAAa,cAAI,MAAK;AAAA,OAC7D;AAAA,IACA,qBAAC,QACC;AAAA,0BAAC,UAAK,WAAW,OAAO,aAAa,aAAW,IAAI,MACjD,cAAI,OACP;AAAA,MACC,IAAI,QAAQ,oBAAC,UAAK,WAAW,OAAO,YAAa,cAAI,MAAK;AAAA,OAC7D;AAAA,OAhBQ,IAAI,KAiBd,CACD,GACH;AAEJ;","names":[]}