@fonderie/react-admin-screens 0.4.0 → 0.6.0

package/README.md

@@ -14,7 +14,7 @@ Status: **experimental** (0.x).
 | Money | Catalog · Subscriber | what am I selling (configured vs stored) · what is this subscriber on, their wallet, ledger, a manual grant (`billingClient`) |
 | Settings | Config & secrets | the `@fonderie/config` admin screens, as a sub-page |
 | Messaging | Templates | the `@fonderie/courier` admin screens, as a sub-page |
-| Activity | Audit · Admin log · Access | what happened, every workspace (`auditClient`) · who did what through here · who can be here |
+| Activity | Audit · Admin log · Access | what happened, every workspace (`auditClient`) · who did what through here · who can be here, and issue or revoke scoped tokens |
 
 ```ts
 import { AdminClient, AuditAdminClient, AuthAdminClient, BillingAdminClient, ConfigAdminClient, CourierAdminClient } from '@fonderie/client';
@@ -38,6 +38,13 @@ Pass `page` and `onNavigate` to own the URL (one route per page); omit both
 and the shell keeps the page itself. Settings and Messaging appear only when
 their client is given.
 
+**Give the shell a `read` token, not the root one.** With `@fonderie/admin`
+≥ 0.6 the configured `adminToken` is the root — every scope, including the
+plaintext secret reveal, and the only credential that can mint or revoke.
+Issue a scoped one for the dashboard (`fonderie admin token issue dashboard
+--scopes read`, or the Access page itself) and hand the shell that. The
+Access page then shows issuing as unavailable, which is the point.
+
 Nothing here stores the token: the app constructs the clients and decides
 where the token lives. Every request through the shell lands in the admin
 log, including the ones the token refuses.

package/dist/index.cjs

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(index_exports);
 // src/screens/AdminShell.tsx
 var import_react_config_admin_screens = require("@fonderie/react-config-admin-screens");
 var import_react_courier_admin_screens = require("@fonderie/react-courier-admin-screens");
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/styles.ts
 var styles = {
@@ -346,42 +346,159 @@ function RoutesScreen({ client }) {
 
 // src/screens/TokensScreen.tsx
 var import_react_admin7 = require("@fonderie/react-admin");
+var import_react = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var ALL = ["read", "write", "secrets"];
 function TokensScreen({ client }) {
-  const { report, isLoading, error } = (0, import_react_admin7.useAdminTokens)(client);
+  const { report, isLoading, error, issue, revoke } = (0, import_react_admin7.useAdminTokens)(client);
+  const [name, setName] = (0, import_react.useState)("");
+  const [scopes, setScopes] = (0, import_react.useState)(["read"]);
+  const [days, setDays] = (0, import_react.useState)("");
+  const [minted, setMinted] = (0, import_react.useState)(null);
+  const toggle = (s) => setScopes((prev) => prev.includes(s) ? prev.filter((x) => x !== s) : [...prev, s]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { style: styles.title, children: "Access" }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: styles.status, children: "Loading\u2026" }) : error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: styles.error, role: "alert", children: error.explanation }) : report ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { style: styles.subtitle, children: "Admin token" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
-        report.admin.ok ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.ok, children: "strong" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.bad, children: "weak" }),
-        report.admin.problems.map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.bad, children: p.message }, p.message))
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { style: styles.subtitle, children: "Legacy per-brick tokens" }),
-      report.legacy.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: styles.muted, children: "None \u2014 every brick's admin surface goes through this token." }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { style: styles.list, children: report.legacy.map((l) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { style: styles.row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.mono, children: l.module }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: styles.error, role: "alert", children: error.status === 401 ? "Issuing and revoking need the root token (the one in your deployment config)." : error.explanation }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { style: styles.subtitle, children: "Root token" }),
+    report ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
+      report.admin.ok ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.ok, children: "strong" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.bad, children: "weak" }),
+      report.admin.problems.map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.bad, children: p.message }, p.message))
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { style: styles.subtitle, children: "Issued tokens" }),
+    report?.issued === null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: styles.muted, children: "Issuing is off \u2014 give AdminModule a store and run its migrations." }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      minted ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { style: styles.ok, children: [
+        "Copy this now \u2014 it is never shown again.",
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.muted, children: "still registers its standalone routes with its own token (deprecated)" })
-      ] }, l.module)) })
-    ] }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.mono, children: minted.token }),
+        " (",
+        minted.name,
+        ")"
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "form",
+        {
+          style: styles.toolbar,
+          onSubmit: (e) => {
+            e.preventDefault();
+            const d = Number(days);
+            void issue({
+              name: name.trim(),
+              scopes,
+              ...days && Number.isInteger(d) && d > 0 ? { expiresInDays: d } : {}
+            }).then((t) => {
+              setMinted({ name: t.name, token: t.token });
+              setName("");
+              setDays("");
+            }).catch(() => {
+            });
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "input",
+              {
+                value: name,
+                onChange: (e) => setName(e.target.value),
+                placeholder: "name",
+                style: { ...styles.button, cursor: "text" },
+                "aria-label": "Name"
+              }
+            ),
+            ALL.map((s) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { style: { ...styles.badge, cursor: "pointer" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", checked: scopes.includes(s), onChange: () => toggle(s) }),
+              " ",
+              s
+            ] }, s)),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "input",
+              {
+                value: days,
+                onChange: (e) => setDays(e.target.value),
+                placeholder: "days (optional)",
+                style: { ...styles.button, cursor: "text", width: 140 },
+                "aria-label": "Days"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "submit",
+                style: styles.button,
+                disabled: !name.trim() || scopes.length === 0 || isLoading,
+                children: "Issue"
+              }
+            )
+          ]
+        }
+      ),
+      report?.issued && report.issued.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { style: styles.table, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { style: styles.th, children: "Name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { style: styles.th, children: "Scopes" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { style: styles.th, children: "Created" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { style: styles.th, children: "Expires" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { style: styles.th, children: "Last used" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { style: styles.th })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: report.issued.map((t) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("td", { style: styles.td, children: [
+            t.name,
+            t.revokedAt ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.badge, children: " revoked" }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { style: { ...styles.td, ...styles.mono }, children: t.scopes.join(", ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("td", { style: { ...styles.td, ...styles.muted }, children: [
+            new Date(t.createdAt).toLocaleDateString(),
+            " \xB7 ",
+            t.createdBy
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: t.expiresAt ? new Date(t.expiresAt).toLocaleDateString() : "never" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: t.lastUsedAt ? new Date(t.lastUsedAt).toLocaleString() : "never" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { style: styles.td, children: t.revokedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => {
+                if (window.confirm(
+                  `Revoke "${t.name}"? Anything using it stops working immediately.`
+                ))
+                  void revoke(t.id).catch(() => {
+                  });
+              },
+              children: "Revoke"
+            }
+          ) })
+        ] }, t.id)) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: styles.muted, children: "None issued." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { style: styles.subtitle, children: "Legacy per-brick tokens" }),
+    report && report.legacy.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: styles.muted, children: "None \u2014 every brick's admin surface goes through this token." }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { style: styles.list, children: report?.legacy.map((l) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { style: styles.row, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.mono, children: l.module }),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.muted, children: "still registers its standalone routes with its own token (deprecated)" })
+    ] }, l.module)) })
   ] });
 }
 
 // src/screens/UsersScreen.tsx
 var import_react_admin8 = require("@fonderie/react-admin");
-var import_react = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function UsersScreen({ client }) {
-  const [input, setInput] = (0, import_react.useState)("");
-  const [email, setEmail] = (0, import_react.useState)(void 0);
+function UsersScreen({ client, pageSize = 50 }) {
+  const [input, setInput] = (0, import_react2.useState)("");
+  const [selected, setSelected] = (0, import_react2.useState)(null);
+  const list = (0, import_react_admin8.useAdminUsers)(client, { limit: pageSize });
   const { user, isLoading, error, suspend, unsuspend, revokeSessions } = (0, import_react_admin8.useAdminUser)(
     client,
-    email ? { email } : {}
+    selected ?? {}
   );
   const userId = user?.id ?? null;
   const sessions = (0, import_react_admin8.useAdminUserSessions)(client, userId);
   const history = (0, import_react_admin8.useAdminLoginHistory)(client, userId, { limit: 20 });
   const yesNo = (v) => v ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.ok, children: "yes" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.muted, children: "no" });
+  const clear = () => {
+    setSelected(null);
+    setInput("");
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: styles.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { style: styles.title, children: "Users" }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
@@ -390,7 +507,8 @@ function UsersScreen({ client }) {
         style: styles.toolbar,
         onSubmit: (e) => {
           e.preventDefault();
-          setEmail(input.trim() || void 0);
+          const email = input.trim();
+          setSelected(email ? { email } : null);
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -404,11 +522,60 @@ function UsersScreen({ client }) {
               "aria-label": "Email"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" }),
+          selected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", style: styles.button, onClick: clear, children: "\u2190 All users" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => void list.refresh(),
+              disabled: list.isLoading,
+              children: "Refresh"
+            }
+          )
         ]
       }
     ),
     error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: styles.error, role: "alert", children: error.status === 404 ? "No user with that email." : error.explanation }) : null,
+    !selected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      list.error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+      list.users.length === 0 && !list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: styles.muted, children: "No users yet." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { style: styles.table, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { style: styles.th, children: "Email" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { style: styles.th, children: "Name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { style: styles.th, children: "Created" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { style: styles.th, children: "Status" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: list.users.map((u) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: styles.td, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.navItem, padding: 0 },
+              onClick: () => setSelected({ id: u.id }),
+              children: u.email
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: styles.td, children: `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim() || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.muted, children: "\u2014" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: styles.td, children: new Date(u.createdAt).toLocaleDateString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("td", { style: styles.td, children: [
+            u.suspended ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.badge, children: "suspended" }) : null,
+            u.deletedAt ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.badge, children: "deleted" }) : null,
+            !u.suspended && !u.deletedAt ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.muted, children: "active" }) : null
+          ] })
+        ] }, u.id)) })
+      ] }),
+      list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: styles.status, children: "Loading\u2026" }) : null,
+      list.hasMore && !list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, marginTop: 8 },
+          onClick: () => void list.loadMore(),
+          children: "Load more"
+        }
+      ) : null
+    ] }) : null,
     user ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("h2", { style: styles.subtitle, children: [
         user.firstName || user.lastName ? `${user.firstName} ${user.lastName}`.trim() : user.email,
@@ -583,16 +750,23 @@ function CatalogScreen({ client }) {
 
 // src/screens/SubscriberScreen.tsx
 var import_react_admin10 = require("@fonderie/react-admin");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function SubscriberScreen({ client }) {
-  const [type, setType] = (0, import_react2.useState)("user");
-  const [idInput, setIdInput] = (0, import_react2.useState)("");
-  const [subscriber, setSubscriber] = (0, import_react2.useState)(null);
+function SubscriberScreen({ client, pageSize = 50 }) {
+  const [type, setType] = (0, import_react3.useState)("user");
+  const [idInput, setIdInput] = (0, import_react3.useState)("");
+  const [subscriber, setSubscriber] = (0, import_react3.useState)(null);
+  const list = (0, import_react_admin10.useAdminSubscribers)(client, { limit: pageSize });
   const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = (0, import_react_admin10.useAdminSubscriber)(client, subscriber, { limit: 20 });
-  const [amount, setAmount] = (0, import_react2.useState)("");
-  const [note, setNote] = (0, import_react2.useState)("");
-  const [granted, setGranted] = (0, import_react2.useState)(null);
+  const [amount, setAmount] = (0, import_react3.useState)("");
+  const [note, setNote] = (0, import_react3.useState)("");
+  const [granted, setGranted] = (0, import_react3.useState)(null);
+  const open = (t, id) => {
+    setGranted(null);
+    setType(t);
+    setIdInput(id);
+    setSubscriber({ type: t, id });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: styles.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { style: styles.title, children: "Subscriber" }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -628,11 +802,79 @@ function SubscriberScreen({ client }) {
               "aria-label": "Subscriber id"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" }),
+          subscriber ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => {
+                setSubscriber(null);
+                setIdInput("");
+                setGranted(null);
+              },
+              children: "\u2190 All subscribers"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => void list.refresh(),
+              disabled: list.isLoading,
+              children: "Refresh"
+            }
+          )
         ]
       }
     ),
     error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    !subscriber ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      list.error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+      list.subscriptions.length === 0 && !list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: styles.muted, children: "No subscribers yet." }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { style: styles.table, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { style: styles.th, children: "Subscriber" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { style: styles.th, children: "Plan" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { style: styles.th, children: "Status" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { style: styles.th, children: "Renews" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { children: list.subscriptions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { style: styles.td, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.navItem, padding: 0, ...styles.mono },
+              onClick: () => open(s.subscriberType, s.subscriberId),
+              children: [
+                s.subscriberType,
+                "/",
+                s.subscriberId
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("td", { style: styles.td, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: s.plan }),
+            " \xB7 ",
+            s.interval
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("td", { style: styles.td, children: [
+            s.status,
+            s.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: styles.badge, children: "cancels" }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { style: styles.td, children: s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: styles.muted, children: "\u2014" }) })
+        ] }, s.id)) })
+      ] }),
+      list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: styles.status, children: "Loading\u2026" }) : null,
+      list.hasMore && !list.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, marginTop: 8 },
+          onClick: () => void list.loadMore(),
+          children: "Load more"
+        }
+      ) : null
+    ] }) : null,
     subscriber && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { style: styles.subtitle, children: "Subscription" }),
       subscription ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("table", { style: styles.table, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tbody", { children: [
@@ -757,11 +999,11 @@ function SubscriberScreen({ client }) {
 
 // src/screens/AuditScreen.tsx
 var import_react_admin11 = require("@fonderie/react-admin");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function AuditScreen({ client, pageSize = 50 }) {
-  const [draft, setDraft] = (0, import_react3.useState)({ workspaceId: "", type: "", actorId: "" });
-  const [filter, setFilter] = (0, import_react3.useState)(
+  const [draft, setDraft] = (0, import_react4.useState)({ workspaceId: "", type: "", actorId: "" });
+  const [filter, setFilter] = (0, import_react4.useState)(
     {}
   );
   const { events, hasMore, isLoading, error, refresh, loadMore } = (0, import_react_admin11.useAdminAudit)(client, {
@@ -883,13 +1125,13 @@ function AdminShell({
   page,
   onNavigate
 }) {
-  const [own, setOwn] = (0, import_react4.useState)("attention");
+  const [own, setOwn] = (0, import_react5.useState)("attention");
   const current = page ?? own;
   const go = (p) => {
     if (onNavigate) onNavigate(p);
     if (page === void 0) setOwn(p);
   };
-  const [editing, setEditing] = (0, import_react4.useState)(null);
+  const [editing, setEditing] = (0, import_react5.useState)(null);
   const has = {
     config: Boolean(configClient),
     courier: Boolean(courierClient),