@fonderie/react-admin-screens 0.3.0 → 0.5.0

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 { useState as useState3 } from "react";
+import { useState as useState5 } from "react";
 
 // src/styles.ts
 var styles = {
@@ -309,34 +309,146 @@ function RoutesScreen({ client }) {
 
 // src/screens/TokensScreen.tsx
 import { useAdminTokens } from "@fonderie/react-admin";
+import { useState } from "react";
 import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var ALL = ["read", "write", "secrets"];
 function TokensScreen({ client }) {
-  const { report, isLoading, error } = useAdminTokens(client);
+  const { report, isLoading, error, issue, revoke } = useAdminTokens(client);
+  const [name, setName] = useState("");
+  const [scopes, setScopes] = useState(["read"]);
+  const [days, setDays] = useState("");
+  const [minted, setMinted] = useState(null);
+  const toggle = (s) => setScopes((prev) => prev.includes(s) ? prev.filter((x) => x !== s) : [...prev, s]);
   return /* @__PURE__ */ jsxs7("div", { style: styles.container, children: [
     /* @__PURE__ */ jsx7("h1", { style: styles.title, children: "Access" }),
-    isLoading ? /* @__PURE__ */ jsx7("p", { style: styles.status, children: "Loading\u2026" }) : error ? /* @__PURE__ */ jsx7("p", { style: styles.error, role: "alert", children: error.explanation }) : report ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
-      /* @__PURE__ */ jsx7("h2", { style: styles.subtitle, children: "Admin token" }),
-      /* @__PURE__ */ jsxs7("p", { children: [
-        report.admin.ok ? /* @__PURE__ */ jsx7("span", { style: styles.ok, children: "strong" }) : /* @__PURE__ */ jsx7("span", { style: styles.bad, children: "weak" }),
-        report.admin.problems.map((p) => /* @__PURE__ */ jsx7("div", { style: styles.bad, children: p.message }, p.message))
-      ] }),
-      /* @__PURE__ */ jsx7("h2", { style: styles.subtitle, children: "Legacy per-brick tokens" }),
-      report.legacy.length === 0 ? /* @__PURE__ */ jsx7("p", { style: styles.muted, children: "None \u2014 every brick's admin surface goes through this token." }) : /* @__PURE__ */ jsx7("ul", { style: styles.list, children: report.legacy.map((l) => /* @__PURE__ */ jsxs7("li", { style: styles.row, children: [
-        /* @__PURE__ */ jsx7("span", { style: styles.mono, children: l.module }),
+    error ? /* @__PURE__ */ jsx7("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__ */ jsx7("h2", { style: styles.subtitle, children: "Root token" }),
+    report ? /* @__PURE__ */ jsxs7("p", { children: [
+      report.admin.ok ? /* @__PURE__ */ jsx7("span", { style: styles.ok, children: "strong" }) : /* @__PURE__ */ jsx7("span", { style: styles.bad, children: "weak" }),
+      report.admin.problems.map((p) => /* @__PURE__ */ jsx7("div", { style: styles.bad, children: p.message }, p.message))
+    ] }) : null,
+    /* @__PURE__ */ jsx7("h2", { style: styles.subtitle, children: "Issued tokens" }),
+    report?.issued === null ? /* @__PURE__ */ jsx7("p", { style: styles.muted, children: "Issuing is off \u2014 give AdminModule a store and run its migrations." }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+      minted ? /* @__PURE__ */ jsxs7("p", { style: styles.ok, children: [
+        "Copy this now \u2014 it is never shown again.",
         " ",
-        /* @__PURE__ */ jsx7("span", { style: styles.muted, children: "still registers its standalone routes with its own token (deprecated)" })
-      ] }, l.module)) })
-    ] }) : null
+        /* @__PURE__ */ jsx7("span", { style: styles.mono, children: minted.token }),
+        " (",
+        minted.name,
+        ")"
+      ] }) : null,
+      /* @__PURE__ */ jsxs7(
+        "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__ */ jsx7(
+              "input",
+              {
+                value: name,
+                onChange: (e) => setName(e.target.value),
+                placeholder: "name",
+                style: { ...styles.button, cursor: "text" },
+                "aria-label": "Name"
+              }
+            ),
+            ALL.map((s) => /* @__PURE__ */ jsxs7("label", { style: { ...styles.badge, cursor: "pointer" }, children: [
+              /* @__PURE__ */ jsx7("input", { type: "checkbox", checked: scopes.includes(s), onChange: () => toggle(s) }),
+              " ",
+              s
+            ] }, s)),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                value: days,
+                onChange: (e) => setDays(e.target.value),
+                placeholder: "days (optional)",
+                style: { ...styles.button, cursor: "text", width: 140 },
+                "aria-label": "Days"
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "submit",
+                style: styles.button,
+                disabled: !name.trim() || scopes.length === 0 || isLoading,
+                children: "Issue"
+              }
+            )
+          ]
+        }
+      ),
+      report?.issued && report.issued.length > 0 ? /* @__PURE__ */ jsxs7("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs7("tr", { children: [
+          /* @__PURE__ */ jsx7("th", { style: styles.th, children: "Name" }),
+          /* @__PURE__ */ jsx7("th", { style: styles.th, children: "Scopes" }),
+          /* @__PURE__ */ jsx7("th", { style: styles.th, children: "Created" }),
+          /* @__PURE__ */ jsx7("th", { style: styles.th, children: "Expires" }),
+          /* @__PURE__ */ jsx7("th", { style: styles.th, children: "Last used" }),
+          /* @__PURE__ */ jsx7("th", { style: styles.th })
+        ] }) }),
+        /* @__PURE__ */ jsx7("tbody", { children: report.issued.map((t) => /* @__PURE__ */ jsxs7("tr", { children: [
+          /* @__PURE__ */ jsxs7("td", { style: styles.td, children: [
+            t.name,
+            t.revokedAt ? /* @__PURE__ */ jsx7("span", { style: styles.badge, children: " revoked" }) : null
+          ] }),
+          /* @__PURE__ */ jsx7("td", { style: { ...styles.td, ...styles.mono }, children: t.scopes.join(", ") }),
+          /* @__PURE__ */ jsxs7("td", { style: { ...styles.td, ...styles.muted }, children: [
+            new Date(t.createdAt).toLocaleDateString(),
+            " \xB7 ",
+            t.createdBy
+          ] }),
+          /* @__PURE__ */ jsx7("td", { style: { ...styles.td, ...styles.muted }, children: t.expiresAt ? new Date(t.expiresAt).toLocaleDateString() : "never" }),
+          /* @__PURE__ */ jsx7("td", { style: { ...styles.td, ...styles.muted }, children: t.lastUsedAt ? new Date(t.lastUsedAt).toLocaleString() : "never" }),
+          /* @__PURE__ */ jsx7("td", { style: styles.td, children: t.revokedAt ? null : /* @__PURE__ */ jsx7(
+            "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__ */ jsx7("p", { style: styles.muted, children: "None issued." })
+    ] }),
+    /* @__PURE__ */ jsx7("h2", { style: styles.subtitle, children: "Legacy per-brick tokens" }),
+    report && report.legacy.length === 0 ? /* @__PURE__ */ jsx7("p", { style: styles.muted, children: "None \u2014 every brick's admin surface goes through this token." }) : /* @__PURE__ */ jsx7("ul", { style: styles.list, children: report?.legacy.map((l) => /* @__PURE__ */ jsxs7("li", { style: styles.row, children: [
+      /* @__PURE__ */ jsx7("span", { style: styles.mono, children: l.module }),
+      " ",
+      /* @__PURE__ */ jsx7("span", { style: styles.muted, children: "still registers its standalone routes with its own token (deprecated)" })
+    ] }, l.module)) })
   ] });
 }
 
 // src/screens/UsersScreen.tsx
 import { useAdminLoginHistory, useAdminUser, useAdminUserSessions } from "@fonderie/react-admin";
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function UsersScreen({ client }) {
-  const [input, setInput] = useState("");
-  const [email, setEmail] = useState(void 0);
+  const [input, setInput] = useState2("");
+  const [email, setEmail] = useState2(void 0);
   const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
     client,
     email ? { email } : {}
@@ -546,16 +658,16 @@ function CatalogScreen({ client }) {
 
 // src/screens/SubscriberScreen.tsx
 import { useAdminSubscriber } from "@fonderie/react-admin";
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function SubscriberScreen({ client }) {
-  const [type, setType] = useState2("user");
-  const [idInput, setIdInput] = useState2("");
-  const [subscriber, setSubscriber] = useState2(null);
+  const [type, setType] = useState3("user");
+  const [idInput, setIdInput] = useState3("");
+  const [subscriber, setSubscriber] = useState3(null);
   const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(client, subscriber, { limit: 20 });
-  const [amount, setAmount] = useState2("");
-  const [note, setNote] = useState2("");
-  const [granted, setGranted] = useState2(null);
+  const [amount, setAmount] = useState3("");
+  const [note, setNote] = useState3("");
+  const [granted, setGranted] = useState3(null);
   return /* @__PURE__ */ jsxs10("div", { style: styles.container, children: [
     /* @__PURE__ */ jsx10("h1", { style: styles.title, children: "Subscriber" }),
     /* @__PURE__ */ jsxs10(
@@ -718,8 +830,93 @@ function SubscriberScreen({ client }) {
   ] });
 }
 
+// src/screens/AuditScreen.tsx
+import { useAdminAudit } from "@fonderie/react-admin";
+import { useState as useState4 } from "react";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function AuditScreen({ client, pageSize = 50 }) {
+  const [draft, setDraft] = useState4({ workspaceId: "", type: "", actorId: "" });
+  const [filter, setFilter] = useState4(
+    {}
+  );
+  const { events, hasMore, isLoading, error, refresh, loadMore } = useAdminAudit(client, {
+    ...filter,
+    limit: pageSize
+  });
+  const field = (key, placeholder) => /* @__PURE__ */ jsx11(
+    "input",
+    {
+      value: draft[key],
+      onChange: (e) => setDraft({ ...draft, [key]: e.target.value }),
+      placeholder,
+      style: { ...styles.button, cursor: "text" },
+      "aria-label": placeholder
+    }
+  );
+  return /* @__PURE__ */ jsxs11("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx11("h1", { style: styles.title, children: "Audit" }),
+    /* @__PURE__ */ jsxs11(
+      "form",
+      {
+        style: styles.toolbar,
+        onSubmit: (e) => {
+          e.preventDefault();
+          setFilter({
+            ...draft.workspaceId.trim() ? { workspaceId: draft.workspaceId.trim() } : {},
+            ...draft.type.trim() ? { type: draft.type.trim() } : {},
+            ...draft.actorId.trim() ? { actorId: draft.actorId.trim() } : {}
+          });
+        },
+        children: [
+          field("workspaceId", "workspace id (all if empty)"),
+          field("type", "event type"),
+          field("actorId", "actor id"),
+          /* @__PURE__ */ jsx11("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Filter" }),
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => void refresh(),
+              disabled: isLoading,
+              children: "Refresh"
+            }
+          )
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ jsx11("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    events.length === 0 && !isLoading ? /* @__PURE__ */ jsx11("p", { style: styles.muted, children: "Nothing recorded for this filter." }) : /* @__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: "Type" }),
+        /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Workspace" }),
+        /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Actor" }),
+        /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Request" })
+      ] }) }),
+      /* @__PURE__ */ jsx11("tbody", { children: events.map((e) => /* @__PURE__ */ jsxs11("tr", { children: [
+        /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted }, children: new Date(e.createdAt).toLocaleString() }),
+        /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.mono }, children: e.type }),
+        /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.mono }, children: String(e.payload["workspaceId"] ?? "\u2014") }),
+        /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.mono }, children: e.actorId ?? "\u2014" }),
+        /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted }, children: e.requestId ?? "" })
+      ] }, e.id)) })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Loading\u2026" }) : null,
+    hasMore && !isLoading ? /* @__PURE__ */ jsx11(
+      "button",
+      {
+        type: "button",
+        style: { ...styles.button, marginTop: 8 },
+        onClick: () => void loadMore(),
+        children: "Load more"
+      }
+    ) : null
+  ] });
+}
+
 // src/screens/AdminShell.tsx
-import { Fragment as Fragment8, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var NAV = [
   { group: "Today", items: [{ page: "attention", label: "Attention" }] },
   {
@@ -744,6 +941,7 @@ var NAV = [
   {
     group: "Activity",
     items: [
+      { page: "audit", label: "Audit", needs: "audit" },
       { page: "log", label: "Admin log" },
       { page: "tokens", label: "Access" }
     ]
@@ -755,59 +953,64 @@ function AdminShell({
   courierClient,
   authClient,
   billingClient,
+  auditClient,
   environment,
   page,
   onNavigate
 }) {
-  const [own, setOwn] = useState3("attention");
+  const [own, setOwn] = useState5("attention");
   const current = page ?? own;
   const go = (p) => {
     if (onNavigate) onNavigate(p);
     if (page === void 0) setOwn(p);
   };
-  const [editing, setEditing] = useState3(null);
+  const [editing, setEditing] = useState5(null);
   const has = {
     config: Boolean(configClient),
     courier: Boolean(courierClient),
     auth: Boolean(authClient),
-    billing: Boolean(billingClient)
+    billing: Boolean(billingClient),
+    audit: Boolean(auditClient)
   };
   let body;
   switch (current) {
     case "attention":
-      body = /* @__PURE__ */ jsx11(AttentionScreen, { client });
+      body = /* @__PURE__ */ jsx12(AttentionScreen, { client });
       break;
     case "modules":
-      body = /* @__PURE__ */ jsx11(ModulesScreen, { client });
+      body = /* @__PURE__ */ jsx12(ModulesScreen, { client });
       break;
     case "doctor":
-      body = /* @__PURE__ */ jsx11(DoctorScreen, { client });
+      body = /* @__PURE__ */ jsx12(DoctorScreen, { client });
       break;
     case "config":
-      body = /* @__PURE__ */ jsx11(ConfigScreen, { client });
+      body = /* @__PURE__ */ jsx12(ConfigScreen, { client });
       break;
     case "routes":
-      body = /* @__PURE__ */ jsx11(RoutesScreen, { client });
+      body = /* @__PURE__ */ jsx12(RoutesScreen, { client });
       break;
     case "tokens":
-      body = /* @__PURE__ */ jsx11(TokensScreen, { client });
+      body = /* @__PURE__ */ jsx12(TokensScreen, { client });
       break;
     case "log":
-      body = /* @__PURE__ */ jsx11(AdminLogScreen, { client });
+      body = /* @__PURE__ */ jsx12(AdminLogScreen, { client });
       break;
     case "catalog":
-      body = billingClient ? /* @__PURE__ */ jsx11(CatalogScreen, { client: billingClient }) : /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Pass a BillingAdminClient to see the catalog here." });
+      body = billingClient ? /* @__PURE__ */ jsx12(CatalogScreen, { client: billingClient }) : /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Pass a BillingAdminClient to see the catalog here." });
       break;
     case "subscriber":
-      body = billingClient ? /* @__PURE__ */ jsx11(SubscriberScreen, { client: billingClient }) : /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Pass a BillingAdminClient to look up subscribers here." });
+      body = billingClient ? /* @__PURE__ */ jsx12(SubscriberScreen, { client: billingClient }) : /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Pass a BillingAdminClient to look up subscribers here." });
+      break;
+    case "audit":
+      body = auditClient ? /* @__PURE__ */ jsx12(AuditScreen, { client: auditClient }) : /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Pass an AuditAdminClient to see the audit trail here." });
       break;
     case "users":
-      body = authClient ? /* @__PURE__ */ jsx11(UsersScreen, { client: authClient }) : /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Pass an AuthAdminClient to look up users here." });
+      body = authClient ? /* @__PURE__ */ jsx12(UsersScreen, { client: authClient }) : /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Pass an AuthAdminClient to look up users here." });
       break;
     case "settings":
-      body = !configClient ? /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ jsxs11(Fragment8, { children: [
-        /* @__PURE__ */ jsx11("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
-        /* @__PURE__ */ jsx11(
+      body = !configClient ? /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ jsxs12(Fragment8, { children: [
+        /* @__PURE__ */ jsx12("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
+        /* @__PURE__ */ jsx12(
           ConfigEditorScreen,
           {
             client: configClient,
@@ -817,7 +1020,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ jsx11(
+      ] }) : /* @__PURE__ */ jsx12(
         ConfigListScreen,
         {
           client: configClient,
@@ -828,9 +1031,9 @@ function AdminShell({
       );
       break;
     case "templates":
-      body = !courierClient ? /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ jsxs11(Fragment8, { children: [
-        /* @__PURE__ */ jsx11("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
-        /* @__PURE__ */ jsx11(
+      body = !courierClient ? /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ jsxs12(Fragment8, { children: [
+        /* @__PURE__ */ jsx12("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
+        /* @__PURE__ */ jsx12(
           TemplateEditorScreen,
           {
             client: courierClient,
@@ -838,7 +1041,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ jsx11(
+      ] }) : /* @__PURE__ */ jsx12(
         TemplateListScreen,
         {
           client: courierClient,
@@ -847,13 +1050,13 @@ function AdminShell({
       );
       break;
   }
-  return /* @__PURE__ */ jsxs11("div", { style: styles.shell, children: [
-    /* @__PURE__ */ jsx11("nav", { style: styles.nav, "aria-label": "Admin", children: NAV.map((g) => {
+  return /* @__PURE__ */ jsxs12("div", { style: styles.shell, children: [
+    /* @__PURE__ */ jsx12("nav", { style: styles.nav, "aria-label": "Admin", children: NAV.map((g) => {
       const items = g.items.filter((i) => !i.needs || has[i.needs]);
       if (items.length === 0) return null;
-      return /* @__PURE__ */ jsxs11("div", { children: [
-        /* @__PURE__ */ jsx11("div", { style: styles.navGroup, children: g.group }),
-        items.map((i) => /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsxs12("div", { children: [
+        /* @__PURE__ */ jsx12("div", { style: styles.navGroup, children: g.group }),
+        items.map((i) => /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -869,13 +1072,14 @@ function AdminShell({
         ))
       ] }, g.group);
     }) }),
-    /* @__PURE__ */ jsx11("main", { style: styles.main, children: body })
+    /* @__PURE__ */ jsx12("main", { style: styles.main, children: body })
   ] });
 }
 export {
   AdminLogScreen,
   AdminShell,
   AttentionScreen,
+  AuditScreen,
   CatalogScreen,
   ConfigScreen,
   DoctorScreen,