@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/pricing/use-plans.js

@@ -0,0 +1,49 @@
+"use client";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { adminPlansApi } from "@withpotter/lib/admin-pricing-api";
+import { usePlatformAdmins } from "../hooks";
+const PRICING_ROOT = ["platform-admin", "pricing"];
+const key = (...rest) => [...PRICING_ROOT, ...rest];
+const usePlanList = () => useQuery({ queryKey: key("plans"), queryFn: adminPlansApi.list });
+const usePlanDetail = (id) => useQuery({
+  queryKey: key("plans", id),
+  queryFn: () => adminPlansApi.get(id),
+  enabled: Boolean(id)
+});
+const useFeatureCatalogue = () => useQuery({
+  queryKey: key("features"),
+  queryFn: adminPlansApi.features,
+  staleTime: Infinity
+});
+const useDisplaySettings = () => useQuery({ queryKey: key("display"), queryFn: adminPlansApi.display });
+const useApprovals = () => useQuery({ queryKey: key("approvals"), queryFn: adminPlansApi.approvals });
+function usePlansMutation(fn, failure) {
+  const client = useQueryClient();
+  const { toast } = useToast();
+  return useMutation({
+    mutationFn: (args) => fn(...args),
+    onError: (error) => toast({ title: failure, description: error.message, variant: "destructive" }),
+    onSettled: () => client.invalidateQueries({ queryKey: PRICING_ROOT })
+  });
+}
+function useAdminName(selfId) {
+  const { data } = usePlatformAdmins();
+  return (id) => {
+    if (!id) return "An admin";
+    if (id === selfId) return "You";
+    const admin = data?.find((a) => a.id === id);
+    return admin?.name ?? admin?.email ?? "Another admin";
+  };
+}
+export {
+  PRICING_ROOT,
+  useAdminName,
+  useApprovals,
+  useDisplaySettings,
+  useFeatureCatalogue,
+  usePlanDetail,
+  usePlanList,
+  usePlansMutation
+};
+//# sourceMappingURL=use-plans.js.map

package/dist/admin/pricing/use-plans.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/use-plans.ts"],"sourcesContent":["\"use client\";\n\nimport { useMutation, useQuery, useQueryClient } from \"@tanstack/react-query\";\nimport { useToast } from \"@withpotter/ui-kit/use-toast\";\nimport { adminPlansApi } from \"@withpotter/lib/admin-pricing-api\";\nimport { usePlatformAdmins } from \"../hooks\";\n\n/** Every Pricing read sits under this key, so one write refreshes them all. */\nexport const PRICING_ROOT = [\"platform-admin\", \"pricing\"];\nconst key = (...rest: unknown[]) => [...PRICING_ROOT, ...rest];\n\nexport const usePlanList = () =>\n  useQuery({ queryKey: key(\"plans\"), queryFn: adminPlansApi.list });\n\nexport const usePlanDetail = (id: string | null) =>\n  useQuery({\n    queryKey: key(\"plans\", id),\n    queryFn: () => adminPlansApi.get(id as string),\n    enabled: Boolean(id),\n  });\n\nexport const useFeatureCatalogue = () =>\n  useQuery({\n    queryKey: key(\"features\"),\n    queryFn: adminPlansApi.features,\n    staleTime: Infinity,\n  });\n\nexport const useDisplaySettings = () =>\n  useQuery({ queryKey: key(\"display\"), queryFn: adminPlansApi.display });\n\nexport const useApprovals = () =>\n  useQuery({ queryKey: key(\"approvals\"), queryFn: adminPlansApi.approvals });\n\n/**\n * A plan or merchant write: refreshes every Pricing tab when it settles and\n * says why it failed in a toast. Called with its arguments as one array.\n */\nexport function usePlansMutation<A extends unknown[], R>(\n  fn: (...args: A) => Promise<R>,\n  failure: string\n) {\n  const client = useQueryClient();\n  const { toast } = useToast();\n\n  return useMutation({\n    mutationFn: (args: A) => fn(...args),\n    onError: (error: Error) =>\n      toast({ title: failure, description: error.message, variant: \"destructive\" }),\n    onSettled: () => client.invalidateQueries({ queryKey: PRICING_ROOT }),\n  });\n}\n\n/**\n * Who proposed a change, by name: \"You\", the admin's name or email, or\n * \"Another admin\" when the admin list is not readable. Never an id.\n */\nexport function useAdminName(selfId: string | null) {\n  const { data } = usePlatformAdmins();\n\n  return (id: string | null | undefined): string => {\n    if (!id) return \"An admin\";\n    if (id === selfId) return \"You\";\n\n    const admin = data?.find((a) => a.id === id);\n\n    return admin?.name ?? admin?.email ?? \"Another admin\";\n  };\n}\n"],"mappings":";AAEA,SAAS,aAAa,UAAU,sBAAsB;AACtD,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAG3B,MAAM,eAAe,CAAC,kBAAkB,SAAS;AACxD,MAAM,MAAM,IAAI,SAAoB,CAAC,GAAG,cAAc,GAAG,IAAI;AAEtD,MAAM,cAAc,MACzB,SAAS,EAAE,UAAU,IAAI,OAAO,GAAG,SAAS,cAAc,KAAK,CAAC;AAE3D,MAAM,gBAAgB,CAAC,OAC5B,SAAS;AAAA,EACP,UAAU,IAAI,SAAS,EAAE;AAAA,EACzB,SAAS,MAAM,cAAc,IAAI,EAAY;AAAA,EAC7C,SAAS,QAAQ,EAAE;AACrB,CAAC;AAEI,MAAM,sBAAsB,MACjC,SAAS;AAAA,EACP,UAAU,IAAI,UAAU;AAAA,EACxB,SAAS,cAAc;AAAA,EACvB,WAAW;AACb,CAAC;AAEI,MAAM,qBAAqB,MAChC,SAAS,EAAE,UAAU,IAAI,SAAS,GAAG,SAAS,cAAc,QAAQ,CAAC;AAEhE,MAAM,eAAe,MAC1B,SAAS,EAAE,UAAU,IAAI,WAAW,GAAG,SAAS,cAAc,UAAU,CAAC;AAMpE,SAAS,iBACd,IACA,SACA;AACA,QAAM,SAAS,eAAe;AAC9B,QAAM,EAAE,MAAM,IAAI,SAAS;AAE3B,SAAO,YAAY;AAAA,IACjB,YAAY,CAAC,SAAY,GAAG,GAAG,IAAI;AAAA,IACnC,SAAS,CAAC,UACR,MAAM,EAAE,OAAO,SAAS,aAAa,MAAM,SAAS,SAAS,cAAc,CAAC;AAAA,IAC9E,WAAW,MAAM,OAAO,kBAAkB,EAAE,UAAU,aAAa,CAAC;AAAA,EACtE,CAAC;AACH;AAMO,SAAS,aAAa,QAAuB;AAClD,QAAM,EAAE,KAAK,IAAI,kBAAkB;AAEnC,SAAO,CAAC,OAA0C;AAChD,QAAI,CAAC,GAAI,QAAO;AAChB,QAAI,OAAO,OAAQ,QAAO;AAE1B,UAAM,QAAQ,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE;AAE3C,WAAO,OAAO,QAAQ,OAAO,SAAS;AAAA,EACxC;AACF;","names":[]}

package/dist/admin/pricing/use-pricing.js

@@ -0,0 +1,38 @@
+"use client";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { adminPricingApi } from "@withpotter/lib/admin-pricing-api";
+import { useAdminSession } from "../hooks";
+const PRICING_KEY = ["platform-admin", "pricing", "subscription"];
+const usePriceOverview = () => useQuery({ queryKey: PRICING_KEY, queryFn: adminPricingApi.overview });
+function usePricingMutation(fn, failure) {
+  const client = useQueryClient();
+  const { toast } = useToast();
+  return useMutation({
+    mutationFn: (args) => fn(...args),
+    onError: (error) => toast({
+      title: failure,
+      description: error.message,
+      variant: "destructive"
+    }),
+    // The whole of Pricing: Approvals lists base price changes too.
+    onSettled: () => client.invalidateQueries({ queryKey: PRICING_KEY.slice(0, 2) })
+  });
+}
+function usePricingPermissions() {
+  const { data, isLoading } = useAdminSession();
+  const has = (key) => isLoading || data?.role === "superadmin" || (data?.permissions ?? []).includes(key);
+  const hint = (key) => has(key) ? void 0 : `Needs the ${key} permission. The server checks when you act.`;
+  return {
+    adminId: data?.id ?? null,
+    proposeHint: hint("pricing.propose"),
+    approveHint: hint("pricing.approve")
+  };
+}
+export {
+  PRICING_KEY,
+  usePriceOverview,
+  usePricingMutation,
+  usePricingPermissions
+};
+//# sourceMappingURL=use-pricing.js.map

package/dist/admin/pricing/use-pricing.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/use-pricing.ts"],"sourcesContent":["\"use client\";\n\nimport { useMutation, useQuery, useQueryClient } from \"@tanstack/react-query\";\nimport { useToast } from \"@withpotter/ui-kit/use-toast\";\nimport { adminPricingApi } from \"@withpotter/lib/admin-pricing-api\";\nimport { useAdminSession } from \"../hooks\";\n\nexport const PRICING_KEY = [\"platform-admin\", \"pricing\", \"subscription\"];\n\nexport const usePriceOverview = () =>\n  useQuery({ queryKey: PRICING_KEY, queryFn: adminPricingApi.overview });\n\n/**\n * A pricing write that refreshes the page when it settles and says why it\n * failed in a toast. Called with its arguments as one array.\n */\nexport function usePricingMutation<A extends unknown[], R>(\n  fn: (...args: A) => Promise<R>,\n  failure: string\n) {\n  const client = useQueryClient();\n  const { toast } = useToast();\n\n  return useMutation({\n    mutationFn: (args: A) => fn(...args),\n    onError: (error: Error) =>\n      toast({\n        title: failure,\n        description: error.message,\n        variant: \"destructive\",\n      }),\n    // The whole of Pricing: Approvals lists base price changes too.\n    onSettled: () =>\n      client.invalidateQueries({ queryKey: PRICING_KEY.slice(0, 2) }),\n  });\n}\n\n/**\n * Who is signed in, and a hint where they may lack a pricing permission.\n * `/me` may not list role grants, so nothing is locked: the API has the\n * final say with a 403.\n */\nexport function usePricingPermissions() {\n  const { data, isLoading } = useAdminSession();\n  const has = (key: string) =>\n    isLoading ||\n    data?.role === \"superadmin\" ||\n    (data?.permissions ?? []).includes(key);\n  const hint = (key: string) =>\n    has(key)\n      ? undefined\n      : `Needs the ${key} permission. The server checks when you act.`;\n\n  return {\n    adminId: data?.id ?? null,\n    proposeHint: hint(\"pricing.propose\"),\n    approveHint: hint(\"pricing.approve\"),\n  };\n}\n"],"mappings":";AAEA,SAAS,aAAa,UAAU,sBAAsB;AACtD,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAEzB,MAAM,cAAc,CAAC,kBAAkB,WAAW,cAAc;AAEhE,MAAM,mBAAmB,MAC9B,SAAS,EAAE,UAAU,aAAa,SAAS,gBAAgB,SAAS,CAAC;AAMhE,SAAS,mBACd,IACA,SACA;AACA,QAAM,SAAS,eAAe;AAC9B,QAAM,EAAE,MAAM,IAAI,SAAS;AAE3B,SAAO,YAAY;AAAA,IACjB,YAAY,CAAC,SAAY,GAAG,GAAG,IAAI;AAAA,IACnC,SAAS,CAAC,UACR,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,aAAa,MAAM;AAAA,MACnB,SAAS;AAAA,IACX,CAAC;AAAA;AAAA,IAEH,WAAW,MACT,OAAO,kBAAkB,EAAE,UAAU,YAAY,MAAM,GAAG,CAAC,EAAE,CAAC;AAAA,EAClE,CAAC;AACH;AAOO,SAAS,wBAAwB;AACtC,QAAM,EAAE,MAAM,UAAU,IAAI,gBAAgB;AAC5C,QAAM,MAAM,CAAC,QACX,aACA,MAAM,SAAS,iBACd,MAAM,eAAe,CAAC,GAAG,SAAS,GAAG;AACxC,QAAM,OAAO,CAAC,QACZ,IAAI,GAAG,IACH,SACA,aAAa,GAAG;AAEtB,SAAO;AAAA,IACL,SAAS,MAAM,MAAM;AAAA,IACrB,aAAa,KAAK,iBAAiB;AAAA,IACnC,aAAa,KAAK,iBAAiB;AAAA,EACrC;AACF;","names":[]}

package/dist/admin/pricing/use-subscriptions.js

@@ -0,0 +1,21 @@
+"use client";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  subscriptionBillingApi
+} from "@withpotter/lib/subscription-billing-api";
+const KEY = ["platform-admin", "pricing", "subscriptions"];
+const useMerchantBilling = (query) => useQuery({
+  queryKey: [...KEY, query],
+  queryFn: () => subscriptionBillingApi.merchants(query),
+  placeholderData: keepPreviousData
+});
+const useMerchantBillingHistory = (tenantId) => useQuery({
+  queryKey: [...KEY, "history", tenantId],
+  queryFn: () => subscriptionBillingApi.history(tenantId),
+  enabled: Boolean(tenantId)
+});
+export {
+  useMerchantBilling,
+  useMerchantBillingHistory
+};
+//# sourceMappingURL=use-subscriptions.js.map

package/dist/admin/pricing/use-subscriptions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/pricing/use-subscriptions.ts"],"sourcesContent":["\"use client\";\n\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport {\n  subscriptionBillingApi,\n  type MerchantBillingQuery,\n} from \"@withpotter/lib/subscription-billing-api\";\n\nconst KEY = [\"platform-admin\", \"pricing\", \"subscriptions\"];\n\n/** One page of merchants and how their subscription stands. */\nexport const useMerchantBilling = (query: MerchantBillingQuery) =>\n  useQuery({\n    queryKey: [...KEY, query],\n    queryFn: () => subscriptionBillingApi.merchants(query),\n    placeholderData: keepPreviousData,\n  });\n\n/** One merchant's months, opened from a row. */\nexport const useMerchantBillingHistory = (tenantId: string | null) =>\n  useQuery({\n    queryKey: [...KEY, \"history\", tenantId],\n    queryFn: () => subscriptionBillingApi.history(tenantId as string),\n    enabled: Boolean(tenantId),\n  });\n"],"mappings":";AAEA,SAAS,kBAAkB,gBAAgB;AAC3C;AAAA,EACE;AAAA,OAEK;AAEP,MAAM,MAAM,CAAC,kBAAkB,WAAW,eAAe;AAGlD,MAAM,qBAAqB,CAAC,UACjC,SAAS;AAAA,EACP,UAAU,CAAC,GAAG,KAAK,KAAK;AAAA,EACxB,SAAS,MAAM,uBAAuB,UAAU,KAAK;AAAA,EACrD,iBAAiB;AACnB,CAAC;AAGI,MAAM,4BAA4B,CAAC,aACxC,SAAS;AAAA,EACP,UAAU,CAAC,GAAG,KAAK,WAAW,QAAQ;AAAA,EACtC,SAAS,MAAM,uBAAuB,QAAQ,QAAkB;AAAA,EAChE,SAAS,QAAQ,QAAQ;AAC3B,CAAC;","names":[]}

package/dist/admin/product-insights/all-merchants-view.js

@@ -0,0 +1,146 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { TimeSeriesChart } from "@withpotter/components/charts";
+import { adminAdoptionApi } from "@withpotter/lib/admin-adoption-api";
+import { AdmLoading, Panel, StatCard } from "../_ui";
+import { BarList } from "../audit/bar-list";
+import { LoadFailed } from "../audit/load-failed";
+const sentence = (s) => s.charAt(0).toUpperCase() + s.slice(1).replace(/[._]/g, " ");
+function AllMerchantsView({
+  range,
+  caption
+}) {
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: [
+      "platform-admin",
+      "product-adoption",
+      range.startDate,
+      range.endDate
+    ],
+    // "All time" has no start; say so, or the API reads it as 30 days.
+    queryFn: () => adminAdoptionApi.adoption({
+      startDate: range.startDate ?? "2020-01-01T00:00:00.000Z",
+      endDate: range.endDate
+    })
+  });
+  if (isError) {
+    return /* @__PURE__ */ jsx(
+      LoadFailed,
+      {
+        message: "Merchant usage could not be loaded.",
+        onRetry: () => void refetch()
+      }
+    );
+  }
+  if (isLoading || !data) return /* @__PURE__ */ jsx(AdmLoading, { label: "Loading merchant usage\u2026" });
+  const used = data.adoption.filter((a) => a.merchants > 0);
+  const top = used[0];
+  const activePct = data.merchants ? Math.round(data.activeMerchants / data.merchants * 100) : 0;
+  const trend = data.weeklyActive.map((w) => ({
+    date: w.week,
+    value: w.merchants
+  }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("section", { "aria-label": "Usage indicators", className: "adm-grid", children: [
+      /* @__PURE__ */ jsx("div", { className: "adm-span-3", children: /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          label: "Merchants",
+          value: data.merchants,
+          sub: "Live workspaces"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "adm-span-3", children: /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          label: "Active merchants",
+          value: data.activeMerchants,
+          sub: `${activePct}% did something ${caption.toLowerCase()}`
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "adm-span-3", children: /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          label: "Most adopted",
+          value: top?.label ?? "\u2013",
+          sub: top ? `${top.pct}% of merchants` : "No usage yet"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "adm-span-3", children: /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          label: "Features in use",
+          value: `${used.length} of ${data.adoption.length}`,
+          sub: "Used by at least one merchant"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "adm-grid", children: [
+      /* @__PURE__ */ jsx("div", { className: "adm-span-6", children: /* @__PURE__ */ jsx(
+        Panel,
+        {
+          title: "Feature adoption",
+          caption: "Merchants who have used it, all time",
+          height: "var(--adm-panel-h)",
+          children: /* @__PURE__ */ jsx(
+            BarList,
+            {
+              rows: data.adoption.map((a) => ({
+                key: a.key,
+                label: `${a.label} \xB7 ${a.pct}%`,
+                count: a.merchants
+              })),
+              empty: "No merchants yet."
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "adm-span-6", children: /* @__PURE__ */ jsx(Panel, { title: "Active merchants by week", caption, children: /* @__PURE__ */ jsx(
+        TimeSeriesChart,
+        {
+          data: trend,
+          label: "Active merchants",
+          emptyMessage: "No merchant activity in this window",
+          height: 284
+        }
+      ) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "adm-grid", children: [
+      /* @__PURE__ */ jsx("div", { className: "adm-span-6", children: /* @__PURE__ */ jsx(Panel, { title: "What merchants do most", caption, height: "auto", children: /* @__PURE__ */ jsx(
+        BarList,
+        {
+          rows: data.topActions.map((a) => ({
+            key: a.action,
+            label: `${sentence(a.action)} \xB7 ${a.merchants} merchants`,
+            count: a.count
+          })),
+          empty: "No recorded actions in this window."
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx("div", { className: "adm-span-6", children: /* @__PURE__ */ jsx(
+        Panel,
+        {
+          title: "Devices",
+          caption: `Sessions ${caption.toLowerCase()}`,
+          height: "auto",
+          children: /* @__PURE__ */ jsx(
+            BarList,
+            {
+              rows: data.devices.map((d) => ({
+                key: d.kind,
+                label: `${sentence(d.kind)} \xB7 ${d.accounts} people`,
+                count: d.sessions
+              })),
+              empty: "No sessions in this window."
+            }
+          )
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  AllMerchantsView
+};
+//# sourceMappingURL=all-merchants-view.js.map

package/dist/admin/product-insights/all-merchants-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/product-insights/all-merchants-view.tsx"],"sourcesContent":["'use client';\n\nimport { useQuery } from '@tanstack/react-query';\nimport { TimeSeriesChart } from '@withpotter/components/charts';\nimport { adminAdoptionApi } from '@withpotter/lib/admin-adoption-api';\nimport { AdmLoading, Panel, StatCard, type DateRange } from '../_ui';\nimport { BarList } from '../audit/bar-list';\nimport { LoadFailed } from '../audit/load-failed';\n\nconst sentence = (s: string) =>\n  s.charAt(0).toUpperCase() + s.slice(1).replace(/[._]/g, ' ');\n\n/**\n * Every merchant at once: which features they have used, how many were\n * active, what they do most and on which devices. Read from our own data,\n * so it works whether or not PostHog is connected.\n */\nexport function AllMerchantsView({\n  range,\n  caption,\n}: {\n  range: DateRange;\n  caption: string;\n}) {\n  const { data, isLoading, isError, refetch } = useQuery({\n    queryKey: [\n      'platform-admin',\n      'product-adoption',\n      range.startDate,\n      range.endDate,\n    ],\n    // \"All time\" has no start; say so, or the API reads it as 30 days.\n    queryFn: () =>\n      adminAdoptionApi.adoption({\n        startDate: range.startDate ?? '2020-01-01T00:00:00.000Z',\n        endDate: range.endDate,\n      }),\n  });\n\n  if (isError) {\n    return (\n      <LoadFailed\n        message=\"Merchant usage could not be loaded.\"\n        onRetry={() => void refetch()}\n      />\n    );\n  }\n\n  if (isLoading || !data) return <AdmLoading label=\"Loading merchant usage…\" />;\n\n  const used = data.adoption.filter((a) => a.merchants > 0);\n  const top = used[0];\n  const activePct = data.merchants\n    ? Math.round((data.activeMerchants / data.merchants) * 100)\n    : 0;\n  const trend = data.weeklyActive.map((w) => ({\n    date: w.week,\n    value: w.merchants,\n  }));\n\n  return (\n    <>\n      <section aria-label=\"Usage indicators\" className=\"adm-grid\">\n        <div className=\"adm-span-3\">\n          <StatCard\n            label=\"Merchants\"\n            value={data.merchants}\n            sub=\"Live workspaces\"\n          />\n        </div>\n        <div className=\"adm-span-3\">\n          <StatCard\n            label=\"Active merchants\"\n            value={data.activeMerchants}\n            sub={`${activePct}% did something ${caption.toLowerCase()}`}\n          />\n        </div>\n        <div className=\"adm-span-3\">\n          <StatCard\n            label=\"Most adopted\"\n            value={top?.label ?? '–'}\n            sub={top ? `${top.pct}% of merchants` : 'No usage yet'}\n          />\n        </div>\n        <div className=\"adm-span-3\">\n          <StatCard\n            label=\"Features in use\"\n            value={`${used.length} of ${data.adoption.length}`}\n            sub=\"Used by at least one merchant\"\n          />\n        </div>\n      </section>\n\n      <div className=\"adm-grid\">\n        <div className=\"adm-span-6\">\n          <Panel\n            title=\"Feature adoption\"\n            caption=\"Merchants who have used it, all time\"\n            height=\"var(--adm-panel-h)\"\n          >\n            <BarList\n              rows={data.adoption.map((a) => ({\n                key: a.key,\n                label: `${a.label} · ${a.pct}%`,\n                count: a.merchants,\n              }))}\n              empty=\"No merchants yet.\"\n            />\n          </Panel>\n        </div>\n        <div className=\"adm-span-6\">\n          <Panel title=\"Active merchants by week\" caption={caption}>\n            <TimeSeriesChart\n              data={trend}\n              label=\"Active merchants\"\n              emptyMessage=\"No merchant activity in this window\"\n              height={284}\n            />\n          </Panel>\n        </div>\n      </div>\n\n      <div className=\"adm-grid\">\n        <div className=\"adm-span-6\">\n          <Panel title=\"What merchants do most\" caption={caption} height=\"auto\">\n            <BarList\n              rows={data.topActions.map((a) => ({\n                key: a.action,\n                label: `${sentence(a.action)} · ${a.merchants} merchants`,\n                count: a.count,\n              }))}\n              empty=\"No recorded actions in this window.\"\n            />\n          </Panel>\n        </div>\n        <div className=\"adm-span-6\">\n          <Panel\n            title=\"Devices\"\n            caption={`Sessions ${caption.toLowerCase()}`}\n            height=\"auto\"\n          >\n            <BarList\n              rows={data.devices.map((d) => ({\n                key: d.kind,\n                label: `${sentence(d.kind)} · ${d.accounts} people`,\n                count: d.sessions,\n              }))}\n              empty=\"No sessions in this window.\"\n            />\n          </Panel>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/product-insights/page.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { ProductInsightsWorkspace } from "./product-insights-workspace";
+function AdminProductInsightsPage() {
+  return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ProductInsightsWorkspace, {}) });
+}
+export {
+  AdminProductInsightsPage as default
+};
+//# sourceMappingURL=page.js.map

package/dist/admin/product-insights/page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/product-insights/page.tsx"],"sourcesContent":["'use client';\n\nimport { Suspense } from 'react';\nimport { ProductInsightsWorkspace } from './product-insights-workspace';\n\n/** The report tabs read `?tab=`, so the workspace waits on search params. */\nexport default function AdminProductInsightsPage() {\n  return (\n    <Suspense>\n      <ProductInsightsWorkspace />\n    </Suspense>\n  );\n}\n"],"mappings":";AASM;AAPN,SAAS,gBAAgB;AACzB,SAAS,gCAAgC;AAG1B,SAAR,2BAA4C;AACjD,SACE,oBAAC,YACC,8BAAC,4BAAyB,GAC5B;AAEJ;","names":[]}

package/dist/admin/product-insights/product-insights-workspace.js

@@ -0,0 +1,112 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { platformAdminApi } from "@withpotter/lib/admin-api";
+import {
+  Filters,
+  PageTabs,
+  PeriodSelector,
+  customRange,
+  periodPhrase,
+  rangeFromKey,
+  usePersistedDateRange,
+  useTabParam
+} from "../_ui";
+import { SectionHeader } from "../audit/section-header";
+import { MerchantFilter } from "../reviews/merchant-filter";
+import { toMerchant } from "../reviews/use-merchant-search";
+import { AllMerchantsView } from "./all-merchants-view";
+import { VIEWS } from "./report-copy";
+import { ProductInsightReportPanel } from "./report-panel";
+import { useInsightReport } from "./use-insight-report";
+import styles from "./product-insights.module.css";
+const TABS = [
+  { id: "all", label: "All merchants" },
+  { id: "overview", label: "Overview" },
+  { id: "features", label: "Features" },
+  { id: "funnels", label: "Funnels" },
+  { id: "paths", label: "Paths" }
+];
+const KEYS = ["all", ...VIEWS];
+function ProductInsightsWorkspace() {
+  const [tab, setTab] = useTabParam(KEYS);
+  const all = tab === "all";
+  const view = all ? "overview" : tab;
+  const [chosen, setChosen] = useState(null);
+  const { rangeKey, setRangeKey, customStart, customEnd, onCustomChange } = usePersistedDateRange();
+  const range = useMemo(
+    () => rangeKey === "custom" ? customRange(customStart, customEnd) : rangeFromKey(rangeKey),
+    [rangeKey, customStart, customEnd]
+  );
+  const first = useQuery({
+    queryKey: ["platform-admin", "product-insights-first-tenant"],
+    queryFn: () => platformAdminApi.tenants({ page: 1, pageSize: 1 }),
+    enabled: !chosen
+  });
+  const firstRow = first.data?.rows[0];
+  const merchant = chosen ?? (firstRow ? toMerchant(firstRow) : null);
+  const { report, previousReport } = useInsightReport(
+    view,
+    all ? "" : merchant?.id ?? "",
+    range
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      SectionHeader,
+      {
+        title: "Product insights",
+        description: "How every merchant uses Box, then adoption, funnels and paths for one merchant.",
+        actions: /* @__PURE__ */ jsx(
+          PeriodSelector,
+          {
+            value: rangeKey,
+            onChange: setRangeKey,
+            customStart,
+            customEnd,
+            onCustomChange
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(PageTabs, { tabs: TABS, active: tab, onChange: setTab }),
+    all && /* @__PURE__ */ jsx(
+      AllMerchantsView,
+      {
+        range,
+        caption: `${periodPhrase(range).charAt(0).toUpperCase()}${periodPhrase(range).slice(1)}`
+      }
+    ),
+    !all && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: `adm-panel ${styles.toolbar}`, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.toolbarNote, children: "Reports cover one merchant at a time." }),
+        /* @__PURE__ */ jsx(Filters, { label: "Report scope", children: /* @__PURE__ */ jsx("div", { className: styles.merchant, children: /* @__PURE__ */ jsx(
+          MerchantFilter,
+          {
+            value: merchant,
+            onChange: setChosen,
+            placeholder: first.isLoading ? "Loading merchants\u2026" : first.isError ? "Merchants unavailable" : "Select merchant"
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        ProductInsightReportPanel,
+        {
+          view,
+          hasTenant: Boolean(merchant),
+          report: report.data,
+          previousReport: previousReport.data,
+          period: periodPhrase(range),
+          isLoading: report.isLoading,
+          isError: report.isError,
+          onRetry: () => void report.refetch(),
+          onWiden: rangeKey === "12m" || rangeKey === "all" ? void 0 : () => setRangeKey("12m")
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ProductInsightsWorkspace
+};
+//# sourceMappingURL=product-insights-workspace.js.map

package/dist/admin/product-insights/product-insights-workspace.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/product-insights/product-insights-workspace.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport { useQuery } from '@tanstack/react-query';\nimport { platformAdminApi } from '@withpotter/lib/admin-api';\nimport {\n  Filters,\n  PageTabs,\n  PeriodSelector,\n  customRange,\n  periodPhrase,\n  rangeFromKey,\n  usePersistedDateRange,\n  useTabParam,\n} from '../_ui';\nimport { SectionHeader } from '../audit/section-header';\nimport { MerchantFilter } from '../reviews/merchant-filter';\nimport { toMerchant, type Merchant } from '../reviews/use-merchant-search';\nimport { AllMerchantsView } from './all-merchants-view';\nimport { VIEWS, type ReportView } from './report-copy';\nimport { ProductInsightReportPanel } from './report-panel';\nimport { useInsightReport } from './use-insight-report';\nimport styles from './product-insights.module.css';\n\nconst TABS = [\n  { id: 'all', label: 'All merchants' },\n  { id: 'overview', label: 'Overview' },\n  { id: 'features', label: 'Features' },\n  { id: 'funnels', label: 'Funnels' },\n  { id: 'paths', label: 'Paths' },\n] as const;\n\nconst KEYS = ['all', ...VIEWS] as const;\n\n/**\n * How merchants use their dashboard, one merchant at a time: the period on\n * the right of the header, the merchant in the toolbar, the report as tabs.\n */\nexport function ProductInsightsWorkspace() {\n  const [tab, setTab] = useTabParam(KEYS);\n  // All merchants is ours; the per-merchant reports load only on their tabs.\n  const all = tab === 'all';\n  const view: ReportView = all ? 'overview' : tab;\n  const [chosen, setChosen] = useState<Merchant | null>(null);\n  const { rangeKey, setRangeKey, customStart, customEnd, onCustomChange } =\n    usePersistedDateRange();\n  const range = useMemo(\n    () =>\n      rangeKey === 'custom'\n        ? customRange(customStart, customEnd)\n        : rangeFromKey(rangeKey),\n    [rangeKey, customStart, customEnd],\n  );\n\n  // Reports are merchant-scoped; until one is picked, open on the first.\n  const first = useQuery({\n    queryKey: ['platform-admin', 'product-insights-first-tenant'],\n    queryFn: () => platformAdminApi.tenants({ page: 1, pageSize: 1 }),\n    enabled: !chosen,\n  });\n  const firstRow = first.data?.rows[0];\n  const merchant = chosen ?? (firstRow ? toMerchant(firstRow) : null);\n  const { report, previousReport } = useInsightReport(\n    view,\n    all ? '' : (merchant?.id ?? ''),\n    range,\n  );\n\n  return (\n    <div>\n      <SectionHeader\n        title=\"Product insights\"\n        description=\"How every merchant uses Box, then adoption, funnels and paths for one merchant.\"\n        actions={\n          <PeriodSelector\n            value={rangeKey}\n            onChange={setRangeKey}\n            customStart={customStart}\n            customEnd={customEnd}\n            onCustomChange={onCustomChange}\n          />\n        }\n      />\n\n      <PageTabs tabs={TABS} active={tab} onChange={setTab} />\n\n      {all && (\n        <AllMerchantsView\n          range={range}\n          caption={`${periodPhrase(range).charAt(0).toUpperCase()}${periodPhrase(range).slice(1)}`}\n        />\n      )}\n\n      {!all && (\n        <>\n          <div className={`adm-panel ${styles.toolbar}`}>\n            <span className={styles.toolbarNote}>\n              Reports cover one merchant at a time.\n            </span>\n            <Filters label=\"Report scope\">\n              <div className={styles.merchant}>\n                <MerchantFilter\n                  value={merchant}\n                  onChange={setChosen}\n                  placeholder={\n                    first.isLoading\n                      ? 'Loading merchants…'\n                      : first.isError\n                        ? 'Merchants unavailable'\n                        : 'Select merchant'\n                  }\n                />\n              </div>\n            </Filters>\n          </div>\n\n          <ProductInsightReportPanel\n            view={view}\n            hasTenant={Boolean(merchant)}\n            report={report.data}\n            previousReport={previousReport.data}\n            period={periodPhrase(range)}\n            isLoading={report.isLoading}\n            isError={report.isError}\n            onRetry={() => void report.refetch()}\n            onWiden={\n              rangeKey === '12m' || rangeKey === 'all'\n                ? undefined\n                : () => setRangeKey('12m')\n            }\n          />\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/product-insights/product-insights.module.css

@@ -0,0 +1,114 @@
+/* White toolbar card: what the report covers on the left, the merchant it
+   is scoped to on the right, one row. */
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding: 8px 16px;
+}
+
+.merchant {
+  width: 240px;
+  max-width: 100%;
+}
+
+.toolbarNote {
+  color: var(--text-tertiary);
+  font-size: 13px;
+}
+
+.report {
+  display: grid;
+  gap: 16px;
+}
+
+.loadingRows {
+  display: grid;
+  gap: 16px;
+}
+
+.interpretation {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+  gap: 24px;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.interpretationLabel {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.interpretation strong {
+  display: block;
+  margin-top: 4px;
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.interpretation p {
+  margin: 4px 0 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.ranking {
+  display: grid;
+  gap: 16px;
+  max-height: var(--adm-panel-h);
+  margin: 0;
+  padding: 0 4px 0 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+}
+
+.rankMeta {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 8px;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.rankMeta strong {
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+
+.track {
+  height: 8px;
+  overflow: hidden;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
+}
+
+.bar {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--brand-500);
+}
+
+@media (max-width: 640px) {
+  .merchant {
+    width: 100%;
+  }
+
+  .interpretation {
+    grid-template-columns: 1fr;
+  }
+}
+
+.empty {
+  padding: 24px 16px;
+  text-align: center;
+}

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

@@ -0,0 +1,69 @@
+const VIEWS = ["overview", "features", "funnels", "paths"];
+const VIEW_COPY = {
+  overview: {
+    title: "Event activity",
+    empty: "No dashboard activity recorded",
+    totalLabel: "recorded events"
+  },
+  features: {
+    title: "Feature adoption",
+    empty: "No feature activity recorded",
+    totalLabel: "feature opens"
+  },
+  funnels: {
+    title: "Workflow step activity",
+    empty: "No workflow activity recorded",
+    totalLabel: "accounts reaching steps"
+  },
+  paths: {
+    title: "Route transitions",
+    empty: "No dashboard transitions recorded",
+    totalLabel: "route transitions"
+  }
+};
+const UNAVAILABLE_COPY = {
+  disabled: "Product insights are disabled for this environment.",
+  unconfigured: "The product insights provider is not configured.",
+  timeout: "The provider took too long to return this report.",
+  provider_error: "The provider could not return this report."
+};
+function labelFor(key) {
+  if (!key) return "Unknown";
+  return key.replace(/^dashboard_/, "").replaceAll("_", " ").replace(/^./, (letter) => letter.toUpperCase());
+}
+function interpretReport(view, leader, leaderShare, conversion, movement) {
+  if (view === "funnels") {
+    return {
+      title: `${conversion ?? 0}% reach the final tracked step`,
+      detail: "The gap between started and completed actions is the clearest workflow friction signal.",
+      action: "Inspect the largest step-to-step loss, then compare the affected route with support and feedback responses."
+    };
+  }
+  if (view === "paths") {
+    return {
+      title: `${leader} is the most common transition`,
+      detail: `${leaderShare}% of observed navigation follows this path, showing where merchant attention is concentrated.`,
+      action: "Check whether this path reaches the intended task outcome or loops merchants back to help and support."
+    };
+  }
+  if (view === "features") {
+    return {
+      title: `${leader} leads feature use`,
+      detail: `${leaderShare}% of feature opens belong to this area${movement === null ? "." : `; total use moved ${movement}% from the prior period.`}`,
+      action: "Compare low-adoption features with tenant setup and permissions before treating low use as low value."
+    };
+  }
+  return {
+    title: movement === null ? "A baseline is forming" : `Activity moved ${movement}%`,
+    detail: `${leader} contributes ${leaderShare}% of recorded dashboard activity.`,
+    action: "Use Features to locate adoption concentration, Funnels to find drop-off, and Paths to understand navigation around it."
+  };
+}
+export {
+  UNAVAILABLE_COPY,
+  VIEWS,
+  VIEW_COPY,
+  interpretReport,
+  labelFor
+};
+//# sourceMappingURL=report-copy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/product-insights/report-copy.ts"],"sourcesContent":["import type { ProductInsightReport } from '@withpotter/lib/product-insights-api';\n\nexport const VIEWS = ['overview', 'features', 'funnels', 'paths'] as const;\nexport type ReportView = (typeof VIEWS)[number];\n\nexport const VIEW_COPY: Record<\n  ReportView,\n  { title: string; empty: string; totalLabel: string }\n> = {\n  overview: {\n    title: 'Event activity',\n    empty: 'No dashboard activity recorded',\n    totalLabel: 'recorded events',\n  },\n  features: {\n    title: 'Feature adoption',\n    empty: 'No feature activity recorded',\n    totalLabel: 'feature opens',\n  },\n  funnels: {\n    title: 'Workflow step activity',\n    empty: 'No workflow activity recorded',\n    totalLabel: 'accounts reaching steps',\n  },\n  paths: {\n    title: 'Route transitions',\n    empty: 'No dashboard transitions recorded',\n    totalLabel: 'route transitions',\n  },\n};\n\nexport const UNAVAILABLE_COPY: Record<\n  Exclude<ProductInsightReport, { available: true }>['reason'],\n  string\n> = {\n  disabled: 'Product insights are disabled for this environment.',\n  unconfigured: 'The product insights provider is not configured.',\n  timeout: 'The provider took too long to return this report.',\n  provider_error: 'The provider could not return this report.',\n};\n\nexport function labelFor(key: string | null) {\n  if (!key) return 'Unknown';\n  return key\n    .replace(/^dashboard_/, '')\n    .replaceAll('_', ' ')\n    .replace(/^./, (letter) => letter.toUpperCase());\n}\n\nexport function interpretReport(\n  view: ReportView,\n  leader: string,\n  leaderShare: number,\n  conversion: number | null,\n  movement: number | null,\n) {\n  if (view === 'funnels') {\n    return {\n      title: `${conversion ?? 0}% reach the final tracked step`,\n      detail:\n        'The gap between started and completed actions is the clearest workflow friction signal.',\n      action:\n        'Inspect the largest step-to-step loss, then compare the affected route with support and feedback responses.',\n    };\n  }\n  if (view === 'paths') {\n    return {\n      title: `${leader} is the most common transition`,\n      detail: `${leaderShare}% of observed navigation follows this path, showing where merchant attention is concentrated.`,\n      action:\n        'Check whether this path reaches the intended task outcome or loops merchants back to help and support.',\n    };\n  }\n  if (view === 'features') {\n    return {\n      title: `${leader} leads feature use`,\n      detail: `${leaderShare}% of feature opens belong to this area${movement === null ? '.' : `; total use moved ${movement}% from the prior period.`}`,\n      action:\n        'Compare low-adoption features with tenant setup and permissions before treating low use as low value.',\n    };\n  }\n  return {\n    title:\n      movement === null\n        ? 'A baseline is forming'\n        : `Activity moved ${movement}%`,\n    detail: `${leader} contributes ${leaderShare}% of recorded dashboard activity.`,\n    action:\n      'Use Features to locate adoption concentration, Funnels to find drop-off, and Paths to understand navigation around it.',\n  };\n}\n"],"mappings":"AAEO,MAAM,QAAQ,CAAC,YAAY,YAAY,WAAW,OAAO;AAGzD,MAAM,YAGT;AAAA,EACF,UAAU;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AACF;AAEO,MAAM,mBAGT;AAAA,EACF,UAAU;AAAA,EACV,cAAc;AAAA,EACd,SAAS;AAAA,EACT,gBAAgB;AAClB;AAEO,SAAS,SAAS,KAAoB;AAC3C,MAAI,CAAC,IAAK,QAAO;AACjB,SAAO,IACJ,QAAQ,eAAe,EAAE,EACzB,WAAW,KAAK,GAAG,EACnB,QAAQ,MAAM,CAAC,WAAW,OAAO,YAAY,CAAC;AACnD;AAEO,SAAS,gBACd,MACA,QACA,aACA,YACA,UACA;AACA,MAAI,SAAS,WAAW;AACtB,WAAO;AAAA,MACL,OAAO,GAAG,cAAc,CAAC;AAAA,MACzB,QACE;AAAA,MACF,QACE;AAAA,IACJ;AAAA,EACF;AACA,MAAI,SAAS,SAAS;AACpB,WAAO;AAAA,MACL,OAAO,GAAG,MAAM;AAAA,MAChB,QAAQ,GAAG,WAAW;AAAA,MACtB,QACE;AAAA,IACJ;AAAA,EACF;AACA,MAAI,SAAS,YAAY;AACvB,WAAO;AAAA,MACL,OAAO,GAAG,MAAM;AAAA,MAChB,QAAQ,GAAG,WAAW,yCAAyC,aAAa,OAAO,MAAM,qBAAqB,QAAQ,0BAA0B;AAAA,MAChJ,QACE;AAAA,IACJ;AAAA,EACF;AACA,SAAO;AAAA,IACL,OACE,aAAa,OACT,0BACA,kBAAkB,QAAQ;AAAA,IAChC,QAAQ,GAAG,MAAM,gBAAgB,WAAW;AAAA,IAC5C,QACE;AAAA,EACJ;AACF;","names":[]}

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

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { EmptyNote } from "@withpotter/ui-kit";
+import { Reveal } from "../_fx";
+import styles from "./product-insights.module.css";
+function ReportEmpty({
+  message,
+  action
+}) {
+  return /* @__PURE__ */ jsx(Reveal, { className: `adm-panel ${styles.empty}`, children: /* @__PURE__ */ jsx(EmptyNote, { action, children: message }) });
+}
+export {
+  ReportEmpty
+};
+//# sourceMappingURL=report-empty.js.map