@fonderie/react-admin-screens 1.2.0 → 1.3.1

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/screens/AdminShell.tsx
 import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/react-config-admin-screens";
 import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/react-courier-admin-screens";
-import { useEffect, useState as useState7 } from "react";
+import { useEffect as useEffect2, useState as useState9 } from "react";
 
 // src/styles.ts
 var t = {
@@ -1505,11 +1505,218 @@ import {
   useAdminUserSessions,
   useAdminUsers
 } from "@fonderie/react-admin";
-import { useState as useState4 } from "react";
+import { useState as useState6 } from "react";
+
+// src/billing.ts
+import { useEffect, useState as useState4 } from "react";
+function periodEnd(s) {
+  if (!s.currentPeriodEnd) return null;
+  const date = new Date(s.currentPeriodEnd).toLocaleDateString();
+  if (s.status === "canceled")
+    return { label: new Date(s.currentPeriodEnd) < /* @__PURE__ */ new Date() ? "Ended" : "Ends", date };
+  if (s.cancelAtPeriodEnd) return { label: "Ends", date };
+  return { label: "Renews", date };
+}
+var statusTone = (status) => status === "active" ? "ok" : status === "trialing" ? "info" : status === "past_due" || status === "unpaid" ? "warn" : "neutral";
+function useSubscriptionIndex(client) {
+  const [index, setIndex] = useState4(null);
+  useEffect(() => {
+    if (!client) return;
+    let live = true;
+    (async () => {
+      const map = /* @__PURE__ */ new Map();
+      let cursor;
+      for (let page = 0; page < 20; page++) {
+        const { result } = await client.listSubscriptions({
+          limit: 100,
+          ...cursor ? { cursor } : {}
+        });
+        for (const s of result.subscriptions) {
+          const key = `${s.subscriberType}/${s.subscriberId}`;
+          if (!map.has(key)) map.set(key, s);
+        }
+        if (!result.nextCursor) break;
+        cursor = result.nextCursor;
+      }
+      if (live) setIndex(map);
+    })().catch(() => {
+      if (live) setIndex(/* @__PURE__ */ new Map());
+    });
+    return () => {
+      live = false;
+    };
+  }, [client]);
+  return index;
+}
+
+// src/screens/SubscriberBilling.tsx
+import { useAdminSubscriber } from "@fonderie/react-admin";
+import { useState as useState5 } from "react";
 import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-function UsersScreen({ client, pageSize = 50 }) {
-  const [input, setInput] = useState4("");
-  const [selected, setSelected] = useState4(null);
+function SubscriberBilling({ client, subscriber }) {
+  const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(client, subscriber, { limit: 20 });
+  const [amount, setAmount] = useState5("");
+  const [note, setNote] = useState5("");
+  const [granted, setGranted] = useState5(null);
+  if (isLoading && !wallet && !subscription) return /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Loading billing\u2026" });
+  const end = subscription ? periodEnd(subscription) : null;
+  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+    error ? /* @__PURE__ */ jsx11("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    /* @__PURE__ */ jsxs11("div", { style: { ...styles.grid, marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsxs11("div", { style: styles.card, children: [
+        /* @__PURE__ */ jsx11("div", { style: styles.statLabel, children: "Plan" }),
+        /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              marginTop: 6,
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsx11("strong", { style: { fontSize: 18 }, children: subscription ? subscription.plan : "Free" }),
+              subscription ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
+                /* @__PURE__ */ jsxs11("span", { style: styles.muted, children: [
+                  "\xB7 ",
+                  subscription.interval
+                ] }),
+                /* @__PURE__ */ jsx11(Pill, { tone: statusTone(subscription.status), children: subscription.status })
+              ] }) : /* @__PURE__ */ jsx11("span", { style: styles.muted, children: "no subscription" })
+            ]
+          }
+        ),
+        end ? /* @__PURE__ */ jsxs11("div", { style: styles.statHint, children: [
+          end.label,
+          " ",
+          end.date
+        ] }) : null,
+        subscription?.providerSubscriptionId ? /* @__PURE__ */ jsx11("div", { style: { ...styles.statHint, fontFamily: "var(--fonderie-mono,monospace)" }, children: subscription.providerSubscriptionId }) : null
+      ] }),
+      /* @__PURE__ */ jsxs11("div", { style: styles.card, children: [
+        /* @__PURE__ */ jsx11("div", { style: styles.statLabel, children: "Credits" }),
+        wallet ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
+          /* @__PURE__ */ jsxs11("div", { style: styles.statValue, children: [
+            wallet.balance,
+            " ",
+            /* @__PURE__ */ jsx11("span", { style: { fontSize: 14, fontWeight: 500 }, children: wallet.currency })
+          ] }),
+          /* @__PURE__ */ jsxs11("div", { style: styles.statHint, children: [
+            wallet.purchased ?? "0",
+            " permanent \xB7 ",
+            wallet.granted ?? "0",
+            " plan allowance",
+            wallet.grantedExpiresAt ? ` (expires ${new Date(wallet.grantedExpiresAt).toLocaleDateString()})` : ""
+          ] })
+        ] }) : /* @__PURE__ */ jsx11("div", { style: styles.statHint, children: "No wallet \u2014 billing has no wallet configuration." })
+      ] })
+    ] }),
+    wallet ? /* @__PURE__ */ jsxs11(
+      "form",
+      {
+        style: {
+          ...styles.card,
+          display: "flex",
+          gap: 8,
+          alignItems: "center",
+          flexWrap: "wrap",
+          marginBottom: 16
+        },
+        onSubmit: (e) => {
+          e.preventDefault();
+          const key = `admin-grant-${subscriber.type}-${subscriber.id}-${Date.now()}`;
+          void grant({
+            amount: amount.trim(),
+            ...note ? { description: note } : {},
+            idempotencyKey: key
+          }).then(() => {
+            setGranted(`Granted ${amount.trim()} ${wallet.currency}.`);
+            setAmount("");
+            setNote("");
+          }).catch(() => {
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx11("strong", { style: { fontSize: 13.5, marginRight: 4 }, children: "Grant credits" }),
+          /* @__PURE__ */ jsx11(
+            "input",
+            {
+              value: amount,
+              onChange: (e) => setAmount(e.target.value),
+              placeholder: `amount (${wallet.currency})`,
+              inputMode: "numeric",
+              style: { ...styles.input, width: 150 },
+              "aria-label": "Amount"
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            "input",
+            {
+              value: note,
+              onChange: (e) => setNote(e.target.value),
+              placeholder: "reason (optional)",
+              style: { ...styles.input, flex: 1, minWidth: 180 },
+              "aria-label": "Reason"
+            }
+          ),
+          /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              type: "submit",
+              style: styles.buttonPrimary,
+              disabled: !/^\d+$/.test(amount.trim()),
+              children: [
+                /* @__PURE__ */ jsx11(Icon, { name: "plus", size: 14 }),
+                "Grant"
+              ]
+            }
+          ),
+          granted ? /* @__PURE__ */ jsx11("span", { style: styles.ok, children: granted }) : null
+        ]
+      }
+    ) : null,
+    wallet ? ledger.length === 0 ? /* @__PURE__ */ jsx11(Empty, { icon: "subscriber", title: "No credit movements yet" }) : /* @__PURE__ */ jsxs11(Fragment6, { children: [
+      /* @__PURE__ */ jsxs11("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "When" }),
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Kind" }),
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Amount" }),
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Note" })
+        ] }) }),
+        /* @__PURE__ */ jsx11("tbody", { children: ledger.map((t2) => /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted, whiteSpace: "nowrap" }, children: new Date(t2.createdAt).toLocaleString() }),
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: t2.type }),
+          /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.mono }, children: t2.amount }),
+          /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted }, children: t2.description ?? "" })
+        ] }, t2.id)) })
+      ] }),
+      hasMoreLedger ? /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, marginTop: 8 },
+          onClick: () => void loadMoreLedger(),
+          children: "Load more"
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+
+// src/screens/UsersScreen.tsx
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function UsersScreen({
+  client,
+  pageSize = 50,
+  billingClient,
+  openUserId
+}) {
+  const [input, setInput] = useState6("");
+  const [selected, setSelected] = useState6(
+    openUserId ? { id: openUserId } : null
+  );
+  const plans = useSubscriptionIndex(billingClient);
   const list = useAdminUsers(client, { limit: pageSize });
   const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
     client,
@@ -1518,20 +1725,20 @@ function UsersScreen({ client, pageSize = 50 }) {
   const userId = user?.id ?? null;
   const sessions = useAdminUserSessions(client, userId);
   const history = useAdminLoginHistory(client, userId, { limit: 20 });
-  const yesNo = (v) => v ? /* @__PURE__ */ jsx11(Pill, { tone: "ok", children: "yes" }) : /* @__PURE__ */ jsx11(Pill, { tone: "neutral", children: "no" });
+  const yesNo = (v) => v ? /* @__PURE__ */ jsx12(Pill, { tone: "ok", children: "yes" }) : /* @__PURE__ */ jsx12(Pill, { tone: "neutral", children: "no" });
   const clear = () => {
     setSelected(null);
     setInput("");
   };
-  return /* @__PURE__ */ jsxs11("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs12("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx12(
       PageHeader,
       {
         title: "Users",
         lead: "Everyone signed up. Open an account for its sessions, sign-ins and the suspend and sign-out controls."
       }
     ),
-    /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsxs12(
       "form",
       {
         style: styles.toolbar,
@@ -1541,7 +1748,7 @@ function UsersScreen({ client, pageSize = 50 }) {
           setSelected(email ? { email } : null);
         },
         children: [
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(
             "input",
             {
               type: "email",
@@ -1552,14 +1759,14 @@ function UsersScreen({ client, pageSize = 50 }) {
               "aria-label": "Email"
             }
           ),
-          /* @__PURE__ */ jsxs11("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
-            /* @__PURE__ */ jsx11(Icon, { name: "search", size: 14 }),
+          /* @__PURE__ */ jsxs12("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
+            /* @__PURE__ */ jsx12(Icon, { name: "search", size: 14 }),
             "Look up"
           ] }),
-          selected ? /* @__PURE__ */ jsxs11("button", { type: "button", style: styles.buttonGhost, onClick: clear, children: [
-            /* @__PURE__ */ jsx11(Icon, { name: "back", size: 14 }),
+          selected ? /* @__PURE__ */ jsxs12("button", { type: "button", style: styles.buttonGhost, onClick: clear, children: [
+            /* @__PURE__ */ jsx12(Icon, { name: "back", size: 14 }),
             "All users"
-          ] }) : /* @__PURE__ */ jsx11(
+          ] }) : /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -1572,18 +1779,37 @@ function UsersScreen({ client, pageSize = 50 }) {
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsx11("p", { style: styles.error, role: "alert", children: error.status === 404 ? "No user with that email." : error.explanation }) : null,
-    !selected ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
-      list.error ? /* @__PURE__ */ jsx11("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
-      list.users.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx11(Empty, { icon: "users", title: "No users yet", children: "Sign-ups appear here as they happen." }) : /* @__PURE__ */ jsxs11("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Email" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Name" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Created" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Status" })
+    error && !(error.status === 404 && selected?.id) ? /* @__PURE__ */ jsx12("p", { style: styles.error, role: "alert", children: error.status === 404 ? "No user with that email." : error.explanation }) : null,
+    error?.status === 404 && selected?.id ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+      /* @__PURE__ */ jsxs12("div", { style: styles.notice, role: "status", children: [
+        /* @__PURE__ */ jsx12("strong", { children: "No account with id " }),
+        /* @__PURE__ */ jsx12("code", { style: styles.code, children: selected.id }),
+        /* @__PURE__ */ jsx12("strong", { children: "." }),
+        " It was deleted, or never existed here. Its billing records remain."
+      ] }),
+      billingClient ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+        /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Plan & credits" }),
+        /* @__PURE__ */ jsx12(
+          SubscriberBilling,
+          {
+            client: billingClient,
+            subscriber: { type: "user", id: selected.id }
+          }
+        )
+      ] }) : null
+    ] }) : null,
+    !selected ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+      list.error ? /* @__PURE__ */ jsx12("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+      list.users.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx12(Empty, { icon: "users", title: "No users yet", children: "Sign-ups appear here as they happen." }) : /* @__PURE__ */ jsxs12("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Email" }),
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Name" }),
+          billingClient ? /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Plan" }) : null,
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Created" }),
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Status" })
         ] }) }),
-        /* @__PURE__ */ jsx11("tbody", { children: list.users.map((u) => /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12("tbody", { children: list.users.map((u) => /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -1592,17 +1818,28 @@ function UsersScreen({ client, pageSize = 50 }) {
               children: u.email
             }
           ) }),
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim() || /* @__PURE__ */ jsx11("span", { style: styles.muted, children: "\u2014" }) }),
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: new Date(u.createdAt).toLocaleDateString() }),
-          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
-            u.suspended ? /* @__PURE__ */ jsx11(Pill, { tone: "warn", children: "suspended" }) : null,
-            u.deletedAt ? /* @__PURE__ */ jsx11(Pill, { tone: "neutral", children: "deleted" }) : null,
-            !u.suspended && !u.deletedAt ? /* @__PURE__ */ jsx11(Pill, { tone: "ok", children: "active" }) : null
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim() || /* @__PURE__ */ jsx12("span", { style: styles.muted, children: "\u2014" }) }),
+          billingClient ? /* @__PURE__ */ jsx12("td", { style: styles.td, children: (() => {
+            const sub = plans?.get(`user/${u.id}`);
+            if (!plans) return /* @__PURE__ */ jsx12("span", { style: styles.muted, children: "\u2026" });
+            if (!sub || sub.status === "canceled")
+              return /* @__PURE__ */ jsx12("span", { style: styles.muted, children: "free" });
+            return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+              /* @__PURE__ */ jsx12("strong", { children: sub.plan }),
+              " ",
+              sub.status !== "active" ? /* @__PURE__ */ jsx12(Pill, { tone: statusTone(sub.status), children: sub.status }) : null
+            ] });
+          })() }) : null,
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: new Date(u.createdAt).toLocaleDateString() }),
+          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
+            u.suspended ? /* @__PURE__ */ jsx12(Pill, { tone: "warn", children: "suspended" }) : null,
+            u.deletedAt ? /* @__PURE__ */ jsx12(Pill, { tone: "neutral", children: "deleted" }) : null,
+            !u.suspended && !u.deletedAt ? /* @__PURE__ */ jsx12(Pill, { tone: "ok", children: "active" }) : null
           ] })
         ] }, u.id)) })
       ] }),
-      list.isLoading ? /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Loading\u2026" }) : null,
-      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx11(
+      list.isLoading ? /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Loading\u2026" }) : null,
+      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -1612,48 +1849,48 @@ function UsersScreen({ client, pageSize = 50 }) {
         }
       ) : null
     ] }) : null,
-    user ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
-      /* @__PURE__ */ jsxs11("h2", { style: styles.subtitle, children: [
+    user ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+      /* @__PURE__ */ jsxs12("h2", { style: styles.subtitle, children: [
         user.firstName || user.lastName ? `${user.firstName} ${user.lastName}`.trim() : user.email,
         " ",
-        user.suspended ? /* @__PURE__ */ jsx11(Pill, { tone: "warn", children: "suspended" }) : null,
-        user.deletedAt ? /* @__PURE__ */ jsx11(Pill, { tone: "neutral", children: "deleted" }) : null
+        user.suspended ? /* @__PURE__ */ jsx12(Pill, { tone: "warn", children: "suspended" }) : null,
+        user.deletedAt ? /* @__PURE__ */ jsx12(Pill, { tone: "neutral", children: "deleted" }) : null
       ] }),
-      /* @__PURE__ */ jsx11("table", { style: styles.table, children: /* @__PURE__ */ jsxs11("tbody", { children: [
-        /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "id" }),
-          /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.mono }, children: user.id })
+      /* @__PURE__ */ jsx12("table", { style: styles.table, children: /* @__PURE__ */ jsxs12("tbody", { children: [
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "id" }),
+          /* @__PURE__ */ jsx12("td", { style: { ...styles.td, ...styles.mono }, children: user.id })
         ] }),
-        /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "email" }),
-          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "email" }),
+          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
             user.email,
             " \xB7 verified ",
             yesNo(user.isEmailVerified)
           ] })
         ] }),
-        /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "MFA" }),
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: yesNo(user.mfaEnabled) })
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "MFA" }),
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: yesNo(user.mfaEnabled) })
         ] }),
-        /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "provider" }),
-          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "provider" }),
+          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
             user.provider || "password",
             user.hasPassword ? "" : " \xB7 no password set"
           ] })
         ] }),
-        /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "last login" }),
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: user.lastLogin ? new Date(user.lastLogin).toLocaleString() : /* @__PURE__ */ jsx11("span", { style: styles.muted, children: "never" }) })
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "last login" }),
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: user.lastLogin ? new Date(user.lastLogin).toLocaleString() : /* @__PURE__ */ jsx12("span", { style: styles.muted, children: "never" }) })
         ] }),
-        /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: "created" }),
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: new Date(user.createdAt).toLocaleString() })
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "created" }),
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: new Date(user.createdAt).toLocaleString() })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs11("div", { style: { ...styles.toolbar, marginTop: 12 }, children: [
-        user.suspended ? /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsxs12("div", { style: { ...styles.toolbar, marginTop: 12 }, children: [
+        user.suspended ? /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -1662,7 +1899,7 @@ function UsersScreen({ client, pageSize = 50 }) {
             disabled: isLoading,
             children: "Unsuspend"
           }
-        ) : /* @__PURE__ */ jsx11(
+        ) : /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -1672,7 +1909,7 @@ function UsersScreen({ client, pageSize = 50 }) {
             children: "Suspend"
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -1683,38 +1920,48 @@ function UsersScreen({ client, pageSize = 50 }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx11("h2", { style: styles.subtitle, children: "Live sessions" }),
-      sessions.sessions.length === 0 ? /* @__PURE__ */ jsx11("p", { style: styles.muted, children: "None." }) : /* @__PURE__ */ jsx11("ul", { style: styles.list, children: sessions.sessions.map((s) => /* @__PURE__ */ jsxs11("li", { style: styles.row, children: [
-        /* @__PURE__ */ jsx11("span", { style: styles.mono, children: s.ipAddress ?? "\u2014" }),
+      billingClient ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+        /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Plan & credits" }),
+        /* @__PURE__ */ jsx12(
+          SubscriberBilling,
+          {
+            client: billingClient,
+            subscriber: { type: "user", id: user.id }
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Live sessions" }),
+      sessions.sessions.length === 0 ? /* @__PURE__ */ jsx12("p", { style: styles.muted, children: "None." }) : /* @__PURE__ */ jsx12("ul", { style: styles.list, children: sessions.sessions.map((s) => /* @__PURE__ */ jsxs12("li", { style: styles.row, children: [
+        /* @__PURE__ */ jsx12("span", { style: styles.mono, children: s.ipAddress ?? "\u2014" }),
         " ",
-        describeLocation(s.location) ? /* @__PURE__ */ jsxs11("span", { style: styles.muted, children: [
+        describeLocation(s.location) ? /* @__PURE__ */ jsxs12("span", { style: styles.muted, children: [
           describeLocation(s.location),
           " "
         ] }) : null,
-        /* @__PURE__ */ jsx11("span", { style: styles.muted, children: s.userAgent ?? "" }),
+        /* @__PURE__ */ jsx12("span", { style: styles.muted, children: s.userAgent ?? "" }),
         " ",
-        /* @__PURE__ */ jsxs11("span", { style: styles.muted, children: [
+        /* @__PURE__ */ jsxs12("span", { style: styles.muted, children: [
           "since ",
           new Date(s.createdAt).toLocaleString()
         ] })
       ] }, s.id)) }),
-      /* @__PURE__ */ jsx11("h2", { style: styles.subtitle, children: "Recent sign-ins" }),
-      history.events.length === 0 && !history.isLoading ? /* @__PURE__ */ jsx11("p", { style: styles.muted, children: "None recorded." }) : /* @__PURE__ */ jsx11("ul", { style: styles.list, children: history.events.map((e) => /* @__PURE__ */ jsxs11("li", { style: styles.row, children: [
-        /* @__PURE__ */ jsx11(Pill, { tone: e.outcome === "success" ? "ok" : "bad", children: e.outcome }),
+      /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Recent sign-ins" }),
+      history.events.length === 0 && !history.isLoading ? /* @__PURE__ */ jsx12("p", { style: styles.muted, children: "None recorded." }) : /* @__PURE__ */ jsx12("ul", { style: styles.list, children: history.events.map((e) => /* @__PURE__ */ jsxs12("li", { style: styles.row, children: [
+        /* @__PURE__ */ jsx12(Pill, { tone: e.outcome === "success" ? "ok" : "bad", children: e.outcome }),
         " ",
-        /* @__PURE__ */ jsx11("span", { style: styles.muted, children: e.method }),
+        /* @__PURE__ */ jsx12("span", { style: styles.muted, children: e.method }),
         " ",
-        /* @__PURE__ */ jsx11("span", { style: styles.mono, children: e.ipAddress ?? "\u2014" }),
+        /* @__PURE__ */ jsx12("span", { style: styles.mono, children: e.ipAddress ?? "\u2014" }),
         " ",
-        describeLocation(e.location) ? /* @__PURE__ */ jsx11("span", { style: styles.muted, children: describeLocation(e.location) }) : null,
-        e.location?.proxy || e.location?.hosting ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
+        describeLocation(e.location) ? /* @__PURE__ */ jsx12("span", { style: styles.muted, children: describeLocation(e.location) }) : null,
+        e.location?.proxy || e.location?.hosting ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
           " ",
-          /* @__PURE__ */ jsx11(Pill, { tone: "warn", children: e.location.proxy ? "proxy/VPN" : "hosting" })
+          /* @__PURE__ */ jsx12(Pill, { tone: "warn", children: e.location.proxy ? "proxy/VPN" : "hosting" })
         ] }) : null,
         " ",
-        /* @__PURE__ */ jsx11("span", { style: styles.muted, children: new Date(e.createdAt).toLocaleString() })
+        /* @__PURE__ */ jsx12("span", { style: styles.muted, children: new Date(e.createdAt).toLocaleString() })
       ] }, e.id)) }),
-      history.hasMore && !history.isLoading ? /* @__PURE__ */ jsx11(
+      history.hasMore && !history.isLoading ? /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -1729,24 +1976,24 @@ function UsersScreen({ client, pageSize = 50 }) {
 
 // src/screens/CatalogScreen.tsx
 import { useAdminCatalog } from "@fonderie/react-admin";
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function CatalogScreen({ client }) {
   const { catalog, isLoading, error, refresh, deletePlan } = useAdminCatalog(client);
   const money = (v) => v == null ? "\u2014" : (v / 100).toFixed(2);
-  return /* @__PURE__ */ jsxs12("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs13("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx13(
       PageHeader,
       {
         title: "Catalog",
         lead: "What you sell: plans as configured in code, and as stored in the database, side by side.",
-        actions: /* @__PURE__ */ jsx12(RefreshButton, { onClick: () => void refresh(), busy: isLoading })
+        actions: /* @__PURE__ */ jsx13(RefreshButton, { onClick: () => void refresh(), busy: isLoading })
       }
     ),
-    error ? /* @__PURE__ */ jsx12("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
-    isLoading && !catalog ? /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Loading\u2026" }) : null,
-    catalog ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
-      /* @__PURE__ */ jsx12("h2", { style: { ...styles.subtitle, marginTop: 0 }, children: "Configured (code)" }),
-      /* @__PURE__ */ jsx12(
+    error ? /* @__PURE__ */ jsx13("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    isLoading && !catalog ? /* @__PURE__ */ jsx13("p", { style: styles.status, children: "Loading\u2026" }) : null,
+    catalog ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
+      /* @__PURE__ */ jsx13("h2", { style: { ...styles.subtitle, marginTop: 0 }, children: "Configured (code)" }),
+      /* @__PURE__ */ jsx13(
         "pre",
         {
           style: {
@@ -1760,32 +2007,32 @@ function CatalogScreen({ client }) {
           children: JSON.stringify(catalog.configured, null, 2)
         }
       ),
-      /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Stored (database)" }),
-      catalog.stored.length === 0 ? /* @__PURE__ */ jsx12(Empty, { icon: "catalog", title: "No stored plans", children: "Plans are configured in code; nothing has been written to the database." }) : /* @__PURE__ */ jsxs12("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs12("tr", { children: [
-          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Plan" }),
-          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Tier" }),
-          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Seats" }),
-          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Monthly" }),
-          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Yearly" }),
-          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Trial" }),
-          /* @__PURE__ */ jsx12("th", { style: styles.th })
+      /* @__PURE__ */ jsx13("h2", { style: styles.subtitle, children: "Stored (database)" }),
+      catalog.stored.length === 0 ? /* @__PURE__ */ jsx13(Empty, { icon: "catalog", title: "No stored plans", children: "Plans are configured in code; nothing has been written to the database." }) : /* @__PURE__ */ jsxs13("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Plan" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Tier" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Seats" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Monthly" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Yearly" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Trial" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th })
         ] }) }),
-        /* @__PURE__ */ jsx12("tbody", { children: catalog.stored.map((p) => /* @__PURE__ */ jsxs12("tr", { children: [
-          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx12("strong", { children: p.name }),
-            p.description ? /* @__PURE__ */ jsx12("div", { style: styles.muted, children: p.description }) : null
+        /* @__PURE__ */ jsx13("tbody", { children: catalog.stored.map((p) => /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx13("strong", { children: p.name }),
+            p.description ? /* @__PURE__ */ jsx13("div", { style: styles.muted, children: p.description }) : null
           ] }),
-          /* @__PURE__ */ jsx12("td", { style: styles.td, children: p.tier }),
-          /* @__PURE__ */ jsx12("td", { style: styles.td, children: p.seats ?? "\u221E" }),
-          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: p.tier }),
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: p.seats ?? "\u221E" }),
+          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
             money(p.pricing?.monthly),
             " ",
             p.pricing?.currency ?? ""
           ] }),
-          /* @__PURE__ */ jsx12("td", { style: styles.td, children: money(p.pricing?.yearly) }),
-          /* @__PURE__ */ jsx12("td", { style: styles.td, children: p.trialDays ? `${p.trialDays} d` : "\u2014" }),
-          /* @__PURE__ */ jsx12("td", { style: styles.td, children: /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: money(p.pricing?.yearly) }),
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: p.trialDays ? `${p.trialDays} d` : "\u2014" }),
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -1805,114 +2052,148 @@ function CatalogScreen({ client }) {
 }
 
 // src/screens/SubscriberScreen.tsx
-import { useAdminSubscriber, useAdminSubscribers } from "@fonderie/react-admin";
-import { useState as useState5 } from "react";
-import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
-function SubscriberScreen({ client, pageSize = 50 }) {
-  const [type, setType] = useState5("user");
-  const [idInput, setIdInput] = useState5("");
-  const [subscriber, setSubscriber] = useState5(null);
+import { useAdminSubscribers } from "@fonderie/react-admin";
+import { useState as useState7 } from "react";
+import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var FILTERS = [
+  { label: "All", match: () => true },
+  { label: "Active", match: (s) => s === "active" },
+  { label: "Trialing", match: (s) => s === "trialing" },
+  { label: "Past due", match: (s) => s === "past_due" || s === "unpaid" },
+  { label: "Canceled", match: (s) => s === "canceled" }
+];
+function SubscriberScreen({ client, pageSize = 50, onOpenUser }) {
   const list = useAdminSubscribers(client, { limit: pageSize });
-  const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(client, subscriber, { limit: 20 });
-  const [amount, setAmount] = useState5("");
-  const [note, setNote] = useState5("");
-  const [granted, setGranted] = useState5(null);
-  const open = (t2, id) => {
-    setGranted(null);
-    setType(t2);
-    setIdInput(id);
-    setSubscriber({ type: t2, id });
-  };
-  return /* @__PURE__ */ jsxs13("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx13(
+  const [filter, setFilter] = useState7("All");
+  const [open, setOpen] = useState7(null);
+  const [type, setType] = useState7("workspace");
+  const [idInput, setIdInput] = useState7("");
+  if (open) {
+    return /* @__PURE__ */ jsxs14("div", { style: styles.container, children: [
+      /* @__PURE__ */ jsx14(
+        PageHeader,
+        {
+          title: `${open.type}/${open.id}`,
+          lead: "Plan, credits and what moved.",
+          actions: /* @__PURE__ */ jsxs14("button", { type: "button", style: styles.buttonGhost, onClick: () => setOpen(null), children: [
+            /* @__PURE__ */ jsx14(Icon, { name: "back", size: 14 }),
+            "All subscriptions"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx14(SubscriberBilling, { client, subscriber: open })
+    ] });
+  }
+  const match = FILTERS.find((f) => f.label === filter)?.match ?? (() => true);
+  const rows = list.subscriptions.filter((s) => match(s.status));
+  const openRow = (t2, id) => t2 === "user" && onOpenUser ? onOpenUser(id) : setOpen({ type: t2, id });
+  return /* @__PURE__ */ jsxs14("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx14(
       PageHeader,
       {
-        title: "Subscribers",
-        lead: "Who is subscribed. Open one for their plan, wallet and ledger, and to grant credit."
+        title: "Subscriptions",
+        lead: "Who pays, and who is behind. A user's plan and credits are also on their page under Users \u2014 free users appear only there.",
+        actions: /* @__PURE__ */ jsx14(RefreshButton, { onClick: () => void list.refresh(), busy: list.isLoading })
       }
     ),
-    /* @__PURE__ */ jsxs13(
-      "form",
-      {
-        style: styles.toolbar,
-        onSubmit: (e) => {
-          e.preventDefault();
-          setGranted(null);
-          setSubscriber(idInput.trim() ? { type, id: idInput.trim() } : null);
-        },
-        children: [
-          /* @__PURE__ */ jsxs13(
-            "select",
-            {
-              value: type,
-              onChange: (e) => setType(e.target.value),
-              style: styles.input,
-              "aria-label": "Type",
-              children: [
-                /* @__PURE__ */ jsx13("option", { value: "user", children: "user" }),
-                /* @__PURE__ */ jsx13("option", { value: "workspace", children: "workspace" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx13(
-            "input",
-            {
-              value: idInput,
-              onChange: (e) => setIdInput(e.target.value),
-              placeholder: "subscriber id",
-              style: { ...styles.input, minWidth: 280 },
-              "aria-label": "Subscriber id"
-            }
-          ),
-          /* @__PURE__ */ jsxs13("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
-            /* @__PURE__ */ jsx13(Icon, { name: "search", size: 14 }),
-            "Look up"
-          ] }),
-          subscriber ? /* @__PURE__ */ jsxs13(
-            "button",
-            {
-              type: "button",
-              style: styles.button,
-              onClick: () => {
-                setSubscriber(null);
-                setIdInput("");
-                setGranted(null);
+    /* @__PURE__ */ jsxs14("div", { style: { ...styles.toolbar, justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx14(
+        "fieldset",
+        {
+          style: {
+            display: "flex",
+            gap: 6,
+            flexWrap: "wrap",
+            border: "none",
+            margin: 0,
+            padding: 0,
+            minWidth: 0
+          },
+          "aria-label": "Filter by status",
+          children: FILTERS.map((f) => {
+            const n = list.subscriptions.filter((s) => f.match(s.status)).length;
+            const on = filter === f.label;
+            return /* @__PURE__ */ jsxs14(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": on,
+                onClick: () => setFilter(f.label),
+                style: { ...on ? styles.buttonPrimary : styles.button, height: 28 },
+                children: [
+                  f.label,
+                  /* @__PURE__ */ jsx14("span", { style: { opacity: 0.7 }, children: n })
+                ]
               },
-              children: [
-                /* @__PURE__ */ jsx13(Icon, { name: "back", size: 14 }),
-                "All subscribers"
-              ]
-            }
-          ) : /* @__PURE__ */ jsx13(
-            "button",
-            {
-              type: "button",
-              style: styles.button,
-              onClick: () => void list.refresh(),
-              disabled: list.isLoading,
-              children: "Refresh"
-            }
-          )
-        ]
+              f.label
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxs14(
+        "form",
+        {
+          style: { display: "flex", gap: 6 },
+          onSubmit: (e) => {
+            e.preventDefault();
+            if (idInput.trim()) openRow(type, idInput.trim());
+          },
+          children: [
+            /* @__PURE__ */ jsxs14(
+              "select",
+              {
+                value: type,
+                onChange: (e) => setType(e.target.value),
+                style: styles.input,
+                "aria-label": "Type",
+                children: [
+                  /* @__PURE__ */ jsx14("option", { value: "workspace", children: "workspace" }),
+                  /* @__PURE__ */ jsx14("option", { value: "user", children: "user" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx14(
+              "input",
+              {
+                value: idInput,
+                onChange: (e) => setIdInput(e.target.value),
+                placeholder: "subscriber id",
+                style: { ...styles.input, width: 220 },
+                "aria-label": "Subscriber id"
+              }
+            ),
+            /* @__PURE__ */ jsxs14("button", { type: "submit", style: styles.button, disabled: !idInput.trim(), children: [
+              /* @__PURE__ */ jsx14(Icon, { name: "search", size: 14 }),
+              "Open"
+            ] })
+          ]
+        }
+      )
+    ] }),
+    list.error ? /* @__PURE__ */ jsx14("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+    rows.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx14(
+      Empty,
+      {
+        icon: "subscriber",
+        title: filter === "All" ? "No subscriptions yet" : `No ${filter.toLowerCase()} subscriptions`,
+        children: "Subscriptions appear here once someone checks out."
       }
-    ),
-    error ? /* @__PURE__ */ jsx13("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
-    !subscriber ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
-      list.error ? /* @__PURE__ */ jsx13("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
-      list.subscriptions.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx13(Empty, { icon: "subscriber", title: "No subscribers yet", children: "Subscriptions appear here once someone checks out." }) : /* @__PURE__ */ jsxs13("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs13("tr", { children: [
-          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Subscriber" }),
-          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Plan" }),
-          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Status" }),
-          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Renews" })
-        ] }) }),
-        /* @__PURE__ */ jsx13("tbody", { children: list.subscriptions.map((s) => /* @__PURE__ */ jsxs13("tr", { children: [
-          /* @__PURE__ */ jsx13("td", { style: styles.td, children: /* @__PURE__ */ jsxs13(
+    ) : /* @__PURE__ */ jsxs14("table", { style: styles.table, children: [
+      /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs14("tr", { children: [
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Subscriber" }),
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Plan" }),
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Status" }),
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Renews / ends" })
+      ] }) }),
+      /* @__PURE__ */ jsx14("tbody", { children: rows.map((s) => {
+        const end = periodEnd(s);
+        return /* @__PURE__ */ jsxs14("tr", { children: [
+          /* @__PURE__ */ jsx14("td", { style: styles.td, children: /* @__PURE__ */ jsxs14(
             "button",
             {
               type: "button",
               style: { ...styles.link, ...styles.mono },
-              onClick: () => open(s.subscriberType, s.subscriberId),
+              onClick: () => openRow(s.subscriberType, s.subscriberId),
               children: [
                 s.subscriberType,
                 "/",
@@ -1920,206 +2201,56 @@ function SubscriberScreen({ client, pageSize = 50 }) {
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx13("strong", { children: s.plan }),
-            " \xB7 ",
-            s.interval
+          /* @__PURE__ */ jsxs14("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx14("strong", { children: s.plan }),
+            " ",
+            /* @__PURE__ */ jsxs14("span", { style: styles.muted, children: [
+              "\xB7 ",
+              s.interval
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx13(
-              Pill,
-              {
-                tone: s.status === "active" ? "ok" : s.status === "trialing" ? "info" : s.status === "past_due" ? "warn" : "neutral",
-                children: s.status
-              }
-            ),
-            s.cancelAtPeriodEnd ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
+          /* @__PURE__ */ jsxs14("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx14(Pill, { tone: statusTone(s.status), children: s.status }),
+            s.cancelAtPeriodEnd && s.status !== "canceled" ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
               " ",
-              /* @__PURE__ */ jsx13(Pill, { tone: "warn", dot: false, children: "cancels" })
+              /* @__PURE__ */ jsx14(Pill, { tone: "warn", dot: false, children: "cancels" })
             ] }) : null
           ] }),
-          /* @__PURE__ */ jsx13("td", { style: styles.td, children: s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : /* @__PURE__ */ jsx13("span", { style: styles.muted, children: "\u2014" }) })
-        ] }, s.id)) })
-      ] }),
-      list.isLoading ? /* @__PURE__ */ jsx13("p", { style: styles.status, children: "Loading\u2026" }) : null,
-      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx13(
-        "button",
-        {
-          type: "button",
-          style: { ...styles.button, marginTop: 8 },
-          onClick: () => void list.loadMore(),
-          children: "Load more"
-        }
-      ) : null
-    ] }) : null,
-    subscriber && !isLoading ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
-      /* @__PURE__ */ jsx13("h2", { style: styles.subtitle, children: "Subscription" }),
-      subscription ? /* @__PURE__ */ jsx13("table", { style: styles.table, children: /* @__PURE__ */ jsxs13("tbody", { children: [
-        /* @__PURE__ */ jsxs13("tr", { children: [
-          /* @__PURE__ */ jsx13("td", { style: styles.td, children: "plan" }),
-          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx13("strong", { children: subscription.plan }),
-            " \xB7 ",
-            subscription.interval
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs13("tr", { children: [
-          /* @__PURE__ */ jsx13("td", { style: styles.td, children: "status" }),
-          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
-            subscription.status,
-            subscription.cancelAtPeriodEnd ? " \xB7 cancels at period end" : ""
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs13("tr", { children: [
-          /* @__PURE__ */ jsx13("td", { style: styles.td, children: "period" }),
-          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
-            subscription.currentPeriodStart ? new Date(subscription.currentPeriodStart).toLocaleDateString() : "\u2014",
+          /* @__PURE__ */ jsx14("td", { style: { ...styles.td, whiteSpace: "nowrap" }, children: end ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
+            /* @__PURE__ */ jsx14("span", { style: styles.muted, children: end.label }),
             " ",
-            "\u2192",
-            " ",
-            subscription.currentPeriodEnd ? new Date(subscription.currentPeriodEnd).toLocaleDateString() : "\u2014"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs13("tr", { children: [
-          /* @__PURE__ */ jsx13("td", { style: styles.td, children: "provider" }),
-          /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.mono }, children: subscription.providerSubscriptionId ?? "\u2014" })
-        ] })
-      ] }) }) : /* @__PURE__ */ jsx13("p", { style: styles.muted, children: "No subscription." }),
-      /* @__PURE__ */ jsx13("h2", { style: styles.subtitle, children: "Wallet" }),
-      wallet ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
-        /* @__PURE__ */ jsxs13(
-          "p",
-          {
-            style: {
-              ...styles.card,
-              display: "flex",
-              alignItems: "baseline",
-              gap: 8,
-              flexWrap: "wrap"
-            },
-            children: [
-              /* @__PURE__ */ jsx13(
-                "strong",
-                {
-                  style: {
-                    fontSize: 22,
-                    letterSpacing: "var(--fonderie-tracking-display,-0.05em)"
-                  },
-                  children: wallet.balance
-                }
-              ),
-              " ",
-              wallet.currency,
-              " ",
-              /* @__PURE__ */ jsxs13("span", { style: styles.muted, children: [
-                "(granted ",
-                wallet.granted ?? "0",
-                " \xB7 purchased ",
-                wallet.purchased ?? "0",
-                ") \xB7 minor units, precision ",
-                wallet.precision
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs13(
-          "form",
-          {
-            style: styles.toolbar,
-            onSubmit: (e) => {
-              e.preventDefault();
-              const key = `admin-grant-${subscriber.type}-${subscriber.id}-${Date.now()}`;
-              void grant({
-                amount: amount.trim(),
-                ...note ? { description: note } : {},
-                idempotencyKey: key
-              }).then(() => {
-                setGranted(`Granted ${amount.trim()} ${wallet.currency}.`);
-                setAmount("");
-                setNote("");
-              }).catch(() => {
-              });
-            },
-            children: [
-              /* @__PURE__ */ jsx13(
-                "input",
-                {
-                  value: amount,
-                  onChange: (e) => setAmount(e.target.value),
-                  placeholder: "amount (minor units)",
-                  style: styles.input,
-                  "aria-label": "Amount"
-                }
-              ),
-              /* @__PURE__ */ jsx13(
-                "input",
-                {
-                  value: note,
-                  onChange: (e) => setNote(e.target.value),
-                  placeholder: "reason (optional)",
-                  style: { ...styles.input, minWidth: 220 },
-                  "aria-label": "Reason"
-                }
-              ),
-              /* @__PURE__ */ jsxs13(
-                "button",
-                {
-                  type: "submit",
-                  style: styles.buttonPrimary,
-                  disabled: !/^\d+$/.test(amount.trim()),
-                  children: [
-                    /* @__PURE__ */ jsx13(Icon, { name: "plus", size: 14 }),
-                    "Grant"
-                  ]
-                }
-              ),
-              granted ? /* @__PURE__ */ jsx13("span", { style: styles.ok, children: granted }) : null
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx13("h2", { style: styles.subtitle, children: "Ledger" }),
-        ledger.length === 0 ? /* @__PURE__ */ jsx13(Empty, { icon: "subscriber", title: "Nothing moved yet" }) : /* @__PURE__ */ jsxs13("table", { style: styles.table, children: [
-          /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs13("tr", { children: [
-            /* @__PURE__ */ jsx13("th", { style: styles.th, children: "When" }),
-            /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Kind" }),
-            /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Amount" }),
-            /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Note" })
-          ] }) }),
-          /* @__PURE__ */ jsx13("tbody", { children: ledger.map((t2) => /* @__PURE__ */ jsxs13("tr", { children: [
-            /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.muted }, children: new Date(t2.createdAt).toLocaleString() }),
-            /* @__PURE__ */ jsx13("td", { style: styles.td, children: t2.type }),
-            /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.mono }, children: t2.amount }),
-            /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.muted }, children: t2.description ?? "" })
-          ] }, t2.id)) })
-        ] }),
-        hasMoreLedger ? /* @__PURE__ */ jsx13(
-          "button",
-          {
-            type: "button",
-            style: { ...styles.button, marginTop: 8 },
-            onClick: () => void loadMoreLedger(),
-            children: "Load more"
-          }
-        ) : null
-      ] }) : /* @__PURE__ */ jsx13("p", { style: styles.muted, children: "No wallet \u2014 billing has no wallet configuration." })
-    ] }) : null
+            end.date
+          ] }) : /* @__PURE__ */ jsx14("span", { style: styles.muted, children: "\u2014" }) })
+        ] }, s.id);
+      }) })
+    ] }),
+    list.isLoading ? /* @__PURE__ */ jsx14("p", { style: styles.status, children: "Loading\u2026" }) : null,
+    list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx14(
+      "button",
+      {
+        type: "button",
+        style: { ...styles.button, marginTop: 8 },
+        onClick: () => void list.loadMore(),
+        children: "Load more"
+      }
+    ) : null
   ] });
 }
 
 // src/screens/AuditScreen.tsx
 import { useAdminAudit } from "@fonderie/react-admin";
-import { useState as useState6 } from "react";
-import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 function AuditScreen({ client, pageSize = 50 }) {
-  const [draft, setDraft] = useState6({ workspaceId: "", type: "", actorId: "" });
-  const [filter, setFilter] = useState6(
+  const [draft, setDraft] = useState8({ workspaceId: "", type: "", actorId: "" });
+  const [filter, setFilter] = useState8(
     {}
   );
   const { events, hasMore, isLoading, error, refresh, loadMore } = useAdminAudit(client, {
     ...filter,
     limit: pageSize
   });
-  const field = (key, placeholder) => /* @__PURE__ */ jsx14(
+  const field = (key, placeholder) => /* @__PURE__ */ jsx15(
     "input",
     {
       value: draft[key],
@@ -2129,15 +2260,15 @@ function AuditScreen({ client, pageSize = 50 }) {
       "aria-label": placeholder
     }
   );
-  return /* @__PURE__ */ jsxs14("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs15("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx15(
       PageHeader,
       {
         title: "Audit",
         lead: "What happened, across every workspace unless you name one. The chain's integrity verdict is on the Doctor page."
       }
     ),
-    /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsxs15(
       "form",
       {
         style: styles.toolbar,
@@ -2153,11 +2284,11 @@ function AuditScreen({ client, pageSize = 50 }) {
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
-          /* @__PURE__ */ jsxs14("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
-            /* @__PURE__ */ jsx14(Icon, { name: "search", size: 14 }),
+          /* @__PURE__ */ jsxs15("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
+            /* @__PURE__ */ jsx15(Icon, { name: "search", size: 14 }),
             "Filter"
           ] }),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -2170,25 +2301,25 @@ function AuditScreen({ client, pageSize = 50 }) {
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsx14("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
-    events.length === 0 && !isLoading ? /* @__PURE__ */ jsx14(Empty, { icon: "audit", title: "Nothing recorded for this filter" }) : /* @__PURE__ */ jsxs14("table", { style: styles.table, children: [
-      /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs14("tr", { children: [
-        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "When" }),
-        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Type" }),
-        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Workspace" }),
-        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Actor" }),
-        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Request" })
+    error ? /* @__PURE__ */ jsx15("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    events.length === 0 && !isLoading ? /* @__PURE__ */ jsx15(Empty, { icon: "audit", title: "Nothing recorded for this filter" }) : /* @__PURE__ */ jsxs15("table", { style: styles.table, children: [
+      /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsxs15("tr", { children: [
+        /* @__PURE__ */ jsx15("th", { style: styles.th, children: "When" }),
+        /* @__PURE__ */ jsx15("th", { style: styles.th, children: "Type" }),
+        /* @__PURE__ */ jsx15("th", { style: styles.th, children: "Workspace" }),
+        /* @__PURE__ */ jsx15("th", { style: styles.th, children: "Actor" }),
+        /* @__PURE__ */ jsx15("th", { style: styles.th, children: "Request" })
       ] }) }),
-      /* @__PURE__ */ jsx14("tbody", { children: events.map((e) => /* @__PURE__ */ jsxs14("tr", { children: [
-        /* @__PURE__ */ jsx14("td", { style: { ...styles.td, ...styles.muted }, children: new Date(e.createdAt).toLocaleString() }),
-        /* @__PURE__ */ jsx14("td", { style: { ...styles.td, ...styles.mono }, children: e.type }),
-        /* @__PURE__ */ jsx14("td", { style: { ...styles.td, ...styles.mono }, children: String(e.payload["workspaceId"] ?? "\u2014") }),
-        /* @__PURE__ */ jsx14("td", { style: { ...styles.td, ...styles.mono }, children: e.actorId ?? "\u2014" }),
-        /* @__PURE__ */ jsx14("td", { style: { ...styles.td, ...styles.muted }, children: e.requestId ?? "" })
+      /* @__PURE__ */ jsx15("tbody", { children: events.map((e) => /* @__PURE__ */ jsxs15("tr", { children: [
+        /* @__PURE__ */ jsx15("td", { style: { ...styles.td, ...styles.muted }, children: new Date(e.createdAt).toLocaleString() }),
+        /* @__PURE__ */ jsx15("td", { style: { ...styles.td, ...styles.mono }, children: e.type }),
+        /* @__PURE__ */ jsx15("td", { style: { ...styles.td, ...styles.mono }, children: String(e.payload["workspaceId"] ?? "\u2014") }),
+        /* @__PURE__ */ jsx15("td", { style: { ...styles.td, ...styles.mono }, children: e.actorId ?? "\u2014" }),
+        /* @__PURE__ */ jsx15("td", { style: { ...styles.td, ...styles.muted }, children: e.requestId ?? "" })
       ] }, e.id)) })
     ] }),
-    isLoading ? /* @__PURE__ */ jsx14("p", { style: styles.status, children: "Loading\u2026" }) : null,
-    hasMore && !isLoading ? /* @__PURE__ */ jsx14(
+    isLoading ? /* @__PURE__ */ jsx15("p", { style: styles.status, children: "Loading\u2026" }) : null,
+    hasMore && !isLoading ? /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
@@ -2201,7 +2332,7 @@ function AuditScreen({ client, pageSize = 50 }) {
 }
 
 // src/screens/AdminShell.tsx
-import { Fragment as Fragment9, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var ICON = {
   attention: "attention",
   modules: "modules",
@@ -2222,8 +2353,8 @@ var ICON = {
 var NARROW = "(max-width: 820px)";
 function useNarrow() {
   const query = typeof window !== "undefined" && window.matchMedia ? window.matchMedia(NARROW) : null;
-  const [narrow, setNarrow] = useState7(() => query?.matches ?? false);
-  useEffect(() => {
+  const [narrow, setNarrow] = useState9(() => query?.matches ?? false);
+  useEffect2(() => {
     if (!query) return;
     const on = (e) => setNarrow(e.matches);
     query.addEventListener("change", on);
@@ -2247,7 +2378,7 @@ var NAV = [
     group: "Money",
     items: [
       { page: "catalog", label: "Catalog", needs: "billing" },
-      { page: "subscriber", label: "Subscriber", needs: "billing" }
+      { page: "subscriber", label: "Subscriptions", needs: "billing" }
     ]
   },
   { group: "Settings", items: [{ page: "settings", label: "Config & secrets", needs: "config" }] },
@@ -2280,15 +2411,16 @@ function AdminShell({
   currentOperator
 }) {
   const narrow = useNarrow();
-  const [drawer, setDrawer] = useState7(false);
-  const [own, setOwn] = useState7("attention");
+  const [drawer, setDrawer] = useState9(false);
+  const [own, setOwn] = useState9("attention");
+  const [openUser, setOpenUser] = useState9(void 0);
   const current = page ?? own;
   const go = (p) => {
     if (onNavigate) onNavigate(p);
     if (page === void 0) setOwn(p);
     setDrawer(false);
   };
-  const [editing, setEditing] = useState7(null);
+  const [editing, setEditing] = useState9(null);
   const has = {
     config: Boolean(configClient),
     courier: Boolean(courierClient),
@@ -2300,51 +2432,70 @@ function AdminShell({
   let body;
   switch (current) {
     case "attention":
-      body = /* @__PURE__ */ jsx15(AttentionScreen, { client });
+      body = /* @__PURE__ */ jsx16(AttentionScreen, { client });
       break;
     case "modules":
-      body = /* @__PURE__ */ jsx15(ModulesScreen, { client });
+      body = /* @__PURE__ */ jsx16(ModulesScreen, { client });
       break;
     case "doctor":
-      body = /* @__PURE__ */ jsx15(DoctorScreen, { client });
+      body = /* @__PURE__ */ jsx16(DoctorScreen, { client });
       break;
     case "environment":
-      body = /* @__PURE__ */ jsx15(EnvironmentScreen, { client });
+      body = /* @__PURE__ */ jsx16(EnvironmentScreen, { client });
       break;
     case "routes":
-      body = /* @__PURE__ */ jsx15(RoutesScreen, { client });
+      body = /* @__PURE__ */ jsx16(RoutesScreen, { client });
       break;
     case "tokens":
-      body = /* @__PURE__ */ jsx15(TokensScreen, { client });
+      body = /* @__PURE__ */ jsx16(TokensScreen, { client });
       break;
     case "operators":
-      body = /* @__PURE__ */ jsx15(OperatorsScreen, { client, me: currentOperator });
+      body = /* @__PURE__ */ jsx16(OperatorsScreen, { client, me: currentOperator });
       break;
     case "migrations":
-      body = /* @__PURE__ */ jsx15(MigrationsScreen, { client });
+      body = /* @__PURE__ */ jsx16(MigrationsScreen, { client });
       break;
     case "log":
-      body = /* @__PURE__ */ jsx15(AdminLogScreen, { client });
+      body = /* @__PURE__ */ jsx16(AdminLogScreen, { client });
       break;
     case "catalog":
-      body = billingClient ? /* @__PURE__ */ jsx15(CatalogScreen, { client: billingClient }) : /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a BillingAdminClient to see the catalog here." });
+      body = billingClient ? /* @__PURE__ */ jsx16(CatalogScreen, { client: billingClient }) : /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a BillingAdminClient to see the catalog here." });
       break;
     case "subscriber":
-      body = billingClient ? /* @__PURE__ */ jsx15(SubscriberScreen, { client: billingClient }) : /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a BillingAdminClient to look up subscribers here." });
+      body = billingClient ? /* @__PURE__ */ jsx16(
+        SubscriberScreen,
+        {
+          client: billingClient,
+          ...authClient ? {
+            onOpenUser: (id) => {
+              setOpenUser(id);
+              go("users");
+            }
+          } : {}
+        }
+      ) : /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a BillingAdminClient to look up subscribers here." });
       break;
     case "audit":
-      body = auditClient ? /* @__PURE__ */ jsx15(AuditScreen, { client: auditClient }) : /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuditAdminClient to see the audit trail here." });
+      body = auditClient ? /* @__PURE__ */ jsx16(AuditScreen, { client: auditClient }) : /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuditAdminClient to see the audit trail here." });
       break;
     case "users":
-      body = authClient ? /* @__PURE__ */ jsx15(UsersScreen, { client: authClient }) : /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuthAdminClient to look up users here." });
+      body = authClient ? /* @__PURE__ */ jsx16(
+        UsersScreen,
+        {
+          client: authClient,
+          billingClient,
+          openUserId: openUser
+        },
+        openUser ?? "list"
+      ) : /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuthAdminClient to look up users here." });
       break;
     case "settings":
-      body = !configClient ? /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ jsxs15(Fragment9, { children: [
-        /* @__PURE__ */ jsx15("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs15("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
-          /* @__PURE__ */ jsx15(Icon, { name: "back", size: 14 }),
+      body = !configClient ? /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ jsxs16(Fragment10, { children: [
+        /* @__PURE__ */ jsx16("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs16("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
+          /* @__PURE__ */ jsx16(Icon, { name: "back", size: 14 }),
           "Config & secrets"
         ] }) }),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           ConfigEditorScreen,
           {
             client: configClient,
@@ -2354,7 +2505,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ jsx15(
+      ] }) : /* @__PURE__ */ jsx16(
         ConfigListScreen,
         {
           client: configClient,
@@ -2367,12 +2518,12 @@ function AdminShell({
       );
       break;
     case "templates":
-      body = !courierClient ? /* @__PURE__ */ jsx15("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ jsxs15(Fragment9, { children: [
-        /* @__PURE__ */ jsx15("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs15("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
-          /* @__PURE__ */ jsx15(Icon, { name: "back", size: 14 }),
+      body = !courierClient ? /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ jsxs16(Fragment10, { children: [
+        /* @__PURE__ */ jsx16("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs16("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
+          /* @__PURE__ */ jsx16(Icon, { name: "back", size: 14 }),
           "Templates"
         ] }) }),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           TemplateEditorScreen,
           {
             client: courierClient,
@@ -2380,7 +2531,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ jsx15(
+      ] }) : /* @__PURE__ */ jsx16(
         TemplateListScreen,
         {
           client: courierClient,
@@ -2390,11 +2541,11 @@ function AdminShell({
       break;
   }
   const production = envLabel ? /^prod/i.test(envLabel) : false;
-  const brand = /* @__PURE__ */ jsxs15("div", { style: styles.navBrand, children: [
-    /* @__PURE__ */ jsx15("div", { style: styles.navMark, children: /* @__PURE__ */ jsx15(Icon, { name: "mark", size: 15 }) }),
-    /* @__PURE__ */ jsxs15("div", { style: { minWidth: 0, flex: 1 }, children: [
-      /* @__PURE__ */ jsx15("div", { style: styles.navBrandTitle, children: appName }),
-      envLabel ? /* @__PURE__ */ jsx15(
+  const brand = /* @__PURE__ */ jsxs16("div", { style: styles.navBrand, children: [
+    /* @__PURE__ */ jsx16("div", { style: styles.navMark, children: /* @__PURE__ */ jsx16(Icon, { name: "mark", size: 15 }) }),
+    /* @__PURE__ */ jsxs16("div", { style: { minWidth: 0, flex: 1 }, children: [
+      /* @__PURE__ */ jsx16("div", { style: styles.navBrandTitle, children: appName }),
+      envLabel ? /* @__PURE__ */ jsx16(
         "span",
         {
           style: {
@@ -2411,18 +2562,18 @@ function AdminShell({
         }
       ) : null
     ] }),
-    narrow ? /* @__PURE__ */ jsx15(
+    narrow ? /* @__PURE__ */ jsx16(
       "button",
       {
         type: "button",
         style: styles.buttonGhost,
         "aria-label": "Close menu",
         onClick: () => setDrawer(false),
-        children: /* @__PURE__ */ jsx15(Icon, { name: "close" })
+        children: /* @__PURE__ */ jsx16(Icon, { name: "close" })
       }
     ) : null
   ] });
-  const nav = /* @__PURE__ */ jsxs15(
+  const nav = /* @__PURE__ */ jsxs16(
     "nav",
     {
       style: {
@@ -2432,14 +2583,14 @@ function AdminShell({
       "aria-label": "Admin",
       children: [
         brand,
-        /* @__PURE__ */ jsx15("div", { style: styles.navScroll, children: NAV.map((g) => {
+        /* @__PURE__ */ jsx16("div", { style: styles.navScroll, children: NAV.map((g) => {
           const items = g.items.filter((i) => !i.needs || has[i.needs]);
           if (items.length === 0) return null;
-          return /* @__PURE__ */ jsxs15("div", { children: [
-            /* @__PURE__ */ jsx15("div", { style: styles.navGroup, children: g.group }),
+          return /* @__PURE__ */ jsxs16("div", { children: [
+            /* @__PURE__ */ jsx16("div", { style: styles.navGroup, children: g.group }),
             items.map((i) => {
               const active = current === i.page;
-              return /* @__PURE__ */ jsxs15(
+              return /* @__PURE__ */ jsxs16(
                 "button",
                 {
                   type: "button",
@@ -2448,10 +2599,11 @@ function AdminShell({
                   "aria-current": active ? "page" : void 0,
                   onClick: () => {
                     setEditing(null);
+                    setOpenUser(void 0);
                     go(i.page);
                   },
                   children: [
-                    /* @__PURE__ */ jsx15(Icon, { name: ICON[i.page], style: active ? styles.navIconActive : void 0 }),
+                    /* @__PURE__ */ jsx16(Icon, { name: ICON[i.page], style: active ? styles.navIconActive : void 0 }),
                     i.label
                   ]
                 },
@@ -2460,15 +2612,15 @@ function AdminShell({
             })
           ] }, g.group);
         }) }),
-        footer ? /* @__PURE__ */ jsx15("div", { style: styles.navFooter, children: footer }) : null
+        footer ? /* @__PURE__ */ jsx16("div", { style: styles.navFooter, children: footer }) : null
       ]
     }
   );
   const title = NAV.flatMap((g) => g.items).find((i) => i.page === current)?.label ?? "";
-  return /* @__PURE__ */ jsxs15("div", { style: { ...styles.shell, ...narrow ? { flexDirection: "column" } : {} }, children: [
-    narrow ? /* @__PURE__ */ jsxs15(Fragment9, { children: [
-      /* @__PURE__ */ jsxs15("div", { style: styles.topbar, children: [
-        /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs16("div", { style: { ...styles.shell, ...narrow ? { flexDirection: "column" } : {} }, children: [
+    narrow ? /* @__PURE__ */ jsxs16(Fragment10, { children: [
+      /* @__PURE__ */ jsxs16("div", { style: styles.topbar, children: [
+        /* @__PURE__ */ jsx16(
           "button",
           {
             type: "button",
@@ -2476,18 +2628,18 @@ function AdminShell({
             "aria-label": "Open menu",
             "aria-expanded": drawer,
             onClick: () => setDrawer(true),
-            children: /* @__PURE__ */ jsx15(Icon, { name: "menu" })
+            children: /* @__PURE__ */ jsx16(Icon, { name: "menu" })
           }
         ),
-        /* @__PURE__ */ jsx15("span", { style: { fontWeight: 600, fontSize: 14 }, children: title }),
-        envLabel ? /* @__PURE__ */ jsx15("span", { style: { ...styles.badge, marginLeft: "auto" }, children: envLabel }) : null
+        /* @__PURE__ */ jsx16("span", { style: { fontWeight: 600, fontSize: 14 }, children: title }),
+        envLabel ? /* @__PURE__ */ jsx16("span", { style: { ...styles.badge, marginLeft: "auto" }, children: envLabel }) : null
       ] }),
-      drawer ? /* @__PURE__ */ jsxs15("div", { style: styles.drawer, children: [
+      drawer ? /* @__PURE__ */ jsxs16("div", { style: styles.drawer, children: [
         nav,
-        /* @__PURE__ */ jsx15("div", { style: styles.scrim, onClick: () => setDrawer(false), "aria-hidden": "true" })
+        /* @__PURE__ */ jsx16("div", { style: styles.scrim, onClick: () => setDrawer(false), "aria-hidden": "true" })
       ] }) : null
     ] }) : nav,
-    /* @__PURE__ */ jsx15("main", { className: "fonderie-admin-main", style: styles.main, children: body })
+    /* @__PURE__ */ jsx16("main", { className: "fonderie-admin-main", style: styles.main, children: body })
   ] });
 }
 export {
@@ -2502,6 +2654,7 @@ export {
   ModulesScreen,
   OperatorsScreen,
   RoutesScreen,
+  SubscriberBilling,
   SubscriberScreen,
   TokensScreen,
   UsersScreen