@fonderie/react-admin-screens 0.3.0 → 0.4.0

package/README.md

@@ -14,10 +14,10 @@ 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 | Admin log · Access | who did what · who can be here |
+| Activity | Audit · Admin log · Access | what happened, every workspace (`auditClient`) · who did what through here · who can be here |
 
 ```ts
-import { AdminClient, AuthAdminClient, BillingAdminClient, ConfigAdminClient, CourierAdminClient } from '@fonderie/client';
+import { AdminClient, AuditAdminClient, AuthAdminClient, BillingAdminClient, ConfigAdminClient, CourierAdminClient } from '@fonderie/client';
 import { AdminShell } from '@fonderie/react-admin-screens';
 
 const base = { baseUrl: 'https://api.example.com', adminToken, actor: 'louis' };
@@ -27,10 +27,11 @@ const configClient = new ConfigAdminClient({ ...base, prefix: '/_admin' });
 const courierClient = new CourierAdminClient({ ...base, prefix: '/_admin' });
 const authClient = new AuthAdminClient(base); // @fonderie/auth ≥ 7.8
 const billingClient = new BillingAdminClient(base); // @fonderie/billing ≥ 9.10
+const auditClient = new AuditAdminClient(base); // @fonderie/audit ≥ 5.2
 ```
 
 ```tsx
-<AdminShell client={client} configClient={configClient} courierClient={courierClient} authClient={authClient} billingClient={billingClient} />
+<AdminShell client={client} configClient={configClient} courierClient={courierClient} authClient={authClient} billingClient={billingClient} auditClient={auditClient} />
 ```
 
 Pass `page` and `onNavigate` to own the URL (one route per page); omit both

package/dist/index.cjs

@@ -23,6 +23,7 @@ __export(index_exports, {
   AdminLogScreen: () => AdminLogScreen,
   AdminShell: () => AdminShell,
   AttentionScreen: () => AttentionScreen,
+  AuditScreen: () => AuditScreen,
   CatalogScreen: () => CatalogScreen,
   ConfigScreen: () => ConfigScreen,
   DoctorScreen: () => DoctorScreen,
@@ -37,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_react3 = require("react");
+var import_react4 = require("react");
 
 // src/styles.ts
 var styles = {
@@ -754,8 +755,93 @@ function SubscriberScreen({ client }) {
   ] });
 }
 
-// src/screens/AdminShell.tsx
+// src/screens/AuditScreen.tsx
+var import_react_admin11 = require("@fonderie/react-admin");
+var import_react3 = 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 { events, hasMore, isLoading, error, refresh, loadMore } = (0, import_react_admin11.useAdminAudit)(client, {
+    ...filter,
+    limit: pageSize
+  });
+  const field = (key, placeholder) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "input",
+    {
+      value: draft[key],
+      onChange: (e) => setDraft({ ...draft, [key]: e.target.value }),
+      placeholder,
+      style: { ...styles.button, cursor: "text" },
+      "aria-label": placeholder
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { style: styles.title, children: "Audit" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "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__ */ (0, import_jsx_runtime11.jsx)("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Filter" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => void refresh(),
+              disabled: isLoading,
+              children: "Refresh"
+            }
+          )
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    events.length === 0 && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: styles.muted, children: "Nothing recorded for this filter." }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { style: styles.table, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { style: styles.th, children: "When" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { style: styles.th, children: "Type" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { style: styles.th, children: "Workspace" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { style: styles.th, children: "Actor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { style: styles.th, children: "Request" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: events.map((e) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: new Date(e.createdAt).toLocaleString() }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: { ...styles.td, ...styles.mono }, children: e.type }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: { ...styles.td, ...styles.mono }, children: String(e.payload["workspaceId"] ?? "\u2014") }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: { ...styles.td, ...styles.mono }, children: e.actorId ?? "\u2014" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: e.requestId ?? "" })
+      ] }, e.id)) })
+    ] }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: styles.status, children: "Loading\u2026" }) : null,
+    hasMore && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "button",
+      {
+        type: "button",
+        style: { ...styles.button, marginTop: 8 },
+        onClick: () => void loadMore(),
+        children: "Load more"
+      }
+    ) : null
+  ] });
+}
+
+// src/screens/AdminShell.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var NAV = [
   { group: "Today", items: [{ page: "attention", label: "Attention" }] },
   {
@@ -780,6 +866,7 @@ var NAV = [
   {
     group: "Activity",
     items: [
+      { page: "audit", label: "Audit", needs: "audit" },
       { page: "log", label: "Admin log" },
       { page: "tokens", label: "Access" }
     ]
@@ -791,59 +878,64 @@ function AdminShell({
   courierClient,
   authClient,
   billingClient,
+  auditClient,
   environment,
   page,
   onNavigate
 }) {
-  const [own, setOwn] = (0, import_react3.useState)("attention");
+  const [own, setOwn] = (0, import_react4.useState)("attention");
   const current = page ?? own;
   const go = (p) => {
     if (onNavigate) onNavigate(p);
     if (page === void 0) setOwn(p);
   };
-  const [editing, setEditing] = (0, import_react3.useState)(null);
+  const [editing, setEditing] = (0, import_react4.useState)(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__ */ (0, import_jsx_runtime11.jsx)(AttentionScreen, { client });
+      body = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AttentionScreen, { client });
       break;
     case "modules":
-      body = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModulesScreen, { client });
+      body = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModulesScreen, { client });
       break;
     case "doctor":
-      body = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DoctorScreen, { client });
+      body = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DoctorScreen, { client });
       break;
     case "config":
-      body = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ConfigScreen, { client });
+      body = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ConfigScreen, { client });
       break;
     case "routes":
-      body = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RoutesScreen, { client });
+      body = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RoutesScreen, { client });
       break;
     case "tokens":
-      body = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TokensScreen, { client });
+      body = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TokensScreen, { client });
       break;
     case "log":
-      body = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AdminLogScreen, { client });
+      body = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AdminLogScreen, { client });
       break;
     case "catalog":
-      body = billingClient ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CatalogScreen, { client: billingClient }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: styles.status, children: "Pass a BillingAdminClient to see the catalog here." });
+      body = billingClient ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CatalogScreen, { client: billingClient }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: styles.status, children: "Pass a BillingAdminClient to see the catalog here." });
       break;
     case "subscriber":
-      body = billingClient ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SubscriberScreen, { client: billingClient }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: styles.status, children: "Pass a BillingAdminClient to look up subscribers here." });
+      body = billingClient ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SubscriberScreen, { client: billingClient }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: styles.status, children: "Pass a BillingAdminClient to look up subscribers here." });
+      break;
+    case "audit":
+      body = auditClient ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AuditScreen, { client: auditClient }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: styles.status, children: "Pass an AuditAdminClient to see the audit trail here." });
       break;
     case "users":
-      body = authClient ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(UsersScreen, { client: authClient }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: styles.status, children: "Pass an AuthAdminClient to look up users here." });
+      body = authClient ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UsersScreen, { client: authClient }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: styles.status, children: "Pass an AuthAdminClient to look up users here." });
       break;
     case "settings":
-      body = !configClient ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: styles.status, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      body = !configClient ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: styles.status, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_react_config_admin_screens.ConfigEditorScreen,
           {
             client: configClient,
@@ -853,7 +945,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_react_config_admin_screens.ConfigListScreen,
         {
           client: configClient,
@@ -864,9 +956,9 @@ function AdminShell({
       );
       break;
     case "templates":
-      body = !courierClient ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: styles.status, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      body = !courierClient ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: styles.status, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_react_courier_admin_screens.TemplateEditorScreen,
           {
             client: courierClient,
@@ -874,7 +966,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_react_courier_admin_screens.TemplateListScreen,
         {
           client: courierClient,
@@ -883,13 +975,13 @@ function AdminShell({
       );
       break;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.shell, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("nav", { style: styles.nav, "aria-label": "Admin", children: NAV.map((g) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: styles.shell, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.navGroup, children: g.group }),
-        items.map((i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: styles.navGroup, children: g.group }),
+        items.map((i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
             type: "button",
@@ -905,7 +997,7 @@ function AdminShell({
         ))
       ] }, g.group);
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("main", { style: styles.main, children: body })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("main", { style: styles.main, children: body })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -913,6 +1005,7 @@ function AdminShell({
   AdminLogScreen,
   AdminShell,
   AttentionScreen,
+  AuditScreen,
   CatalogScreen,
   ConfigScreen,
   DoctorScreen,