@fonderie/vue-admin-screens 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/screens/AdminShell.ts
 import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/vue-config-admin-screens";
 import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/vue-courier-admin-screens";
-import { computed as computed2, defineComponent as defineComponent11, h as h12, ref as ref3 } from "vue";
+import { computed as computed2, defineComponent as defineComponent12, h as h13, ref as ref4 } from "vue";
 
 // src/styles.ts
 var styles = {
@@ -788,6 +788,85 @@ var SubscriberScreen = defineComponent10({
   }
 });
 
+// src/screens/AuditScreen.ts
+import { useAdminAudit } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent11, h as h12, ref as ref3 } from "vue";
+var AuditScreen = defineComponent11({
+  name: "FonderieAuditScreen",
+  props: {
+    client: { type: Object, required: true },
+    pageSize: { type: Number, default: 50 }
+  },
+  setup(props) {
+    const draft = ref3({ workspaceId: "", type: "", actorId: "" });
+    const query = ref3({ limit: props.pageSize });
+    const { events, hasMore, isLoading, error, refresh, loadMore } = useAdminAudit(
+      props.client,
+      query
+    );
+    const field = (key, placeholder) => h12("input", {
+      value: draft.value[key],
+      onInput: (e) => draft.value = { ...draft.value, [key]: e.target.value },
+      placeholder,
+      style: { ...styles.button, cursor: "text" },
+      "aria-label": placeholder
+    });
+    return () => h12("div", { style: styles.container }, [
+      h12("h1", { style: styles.title }, "Audit"),
+      h12(
+        "form",
+        {
+          style: styles.toolbar,
+          onSubmit: (e) => {
+            e.preventDefault();
+            const d = draft.value;
+            query.value = {
+              limit: props.pageSize,
+              ...d.workspaceId.trim() ? { workspaceId: d.workspaceId.trim() } : {},
+              ...d.type.trim() ? { type: d.type.trim() } : {},
+              ...d.actorId.trim() ? { actorId: d.actorId.trim() } : {}
+            };
+          }
+        },
+        [
+          field("workspaceId", "workspace id (all if empty)"),
+          field("type", "event type"),
+          field("actorId", "actor id"),
+          h12(
+            "button",
+            { type: "submit", style: styles.button, disabled: isLoading.value },
+            "Filter"
+          ),
+          refreshButton("Refresh", isLoading.value, () => void refresh())
+        ]
+      ),
+      error.value ? h12("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+      events.value.length === 0 && !isLoading.value ? h12("p", { style: styles.muted }, "Nothing recorded for this filter.") : table(
+        ["When", "Type", "Workspace", "Actor", "Request"],
+        events.value.map(
+          (e) => h12("tr", { key: e.id }, [
+            td(new Date(e.createdAt).toLocaleString(), styles.muted),
+            td(e.type, styles.mono),
+            td(String(e.payload["workspaceId"] ?? "\u2014"), styles.mono),
+            td(e.actorId ?? "\u2014", styles.mono),
+            td(e.requestId ?? "", styles.muted)
+          ])
+        )
+      ),
+      isLoading.value ? h12("p", { style: styles.status }, "Loading\u2026") : null,
+      hasMore.value && !isLoading.value ? h12(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, marginTop: "8px" },
+          onClick: () => void loadMore()
+        },
+        "Load more"
+      ) : null
+    ]);
+  }
+});
+
 // src/screens/AdminShell.ts
 var NAV = [
   { group: "Today", items: [{ page: "attention", label: "Attention" }] },
@@ -813,12 +892,13 @@ var NAV = [
   {
     group: "Activity",
     items: [
+      { page: "audit", label: "Audit", needs: "audit" },
       { page: "log", label: "Admin log" },
       { page: "tokens", label: "Access" }
     ]
   }
 ];
-var AdminShell = defineComponent11({
+var AdminShell = defineComponent12({
   name: "FonderieAdminShell",
   props: {
     client: { type: Object, required: true },
@@ -830,6 +910,8 @@ var AdminShell = defineComponent11({
     authClient: { type: Object, default: void 0 },
     // Given ⇒ the Money pages (catalog, subscriber) appear; needs @fonderie/billing ≥ 9.10.
     billingClient: { type: Object, default: void 0 },
+    // Given ⇒ the Audit page appears; needs @fonderie/audit ≥ 5.2.
+    auditClient: { type: Object, default: void 0 },
     environment: { type: String, default: void 0 },
     // Controlled navigation: pass `page` and listen to `navigate` to own the
     // URL. Omit `page` and the shell keeps it itself.
@@ -837,15 +919,15 @@ var AdminShell = defineComponent11({
   },
   emits: { navigate: (_page) => true },
   setup(props, { emit }) {
-    const own = ref3("attention");
+    const own = ref4("attention");
     const current = computed2(() => props.page ?? own.value);
-    const editing = ref3(null);
+    const editing = ref4(null);
     const go = (p) => {
       editing.value = null;
       emit("navigate", p);
       if (props.page === void 0) own.value = p;
     };
-    const back = () => h12(
+    const back = () => h13(
       "button",
       { type: "button", style: styles.button, onClick: () => editing.value = null },
       "\u2190 Back"
@@ -854,37 +936,43 @@ var AdminShell = defineComponent11({
       const c = props.client;
       switch (current.value) {
         case "attention":
-          return h12(AttentionScreen, { client: c });
+          return h13(AttentionScreen, { client: c });
         case "modules":
-          return h12(ModulesScreen, { client: c });
+          return h13(ModulesScreen, { client: c });
         case "doctor":
-          return h12(DoctorScreen, { client: c });
+          return h13(DoctorScreen, { client: c });
         case "config":
-          return h12(ConfigScreen, { client: c });
+          return h13(ConfigScreen, { client: c });
         case "routes":
-          return h12(RoutesScreen, { client: c });
+          return h13(RoutesScreen, { client: c });
         case "tokens":
-          return h12(TokensScreen, { client: c });
+          return h13(TokensScreen, { client: c });
         case "log":
-          return h12(AdminLogScreen, { client: c });
+          return h13(AdminLogScreen, { client: c });
         case "catalog":
-          return props.billingClient ? h12(CatalogScreen, { client: props.billingClient }) : h12(
+          return props.billingClient ? h13(CatalogScreen, { client: props.billingClient }) : h13(
             "p",
             { style: styles.status },
             "Pass a BillingAdminClient to see the catalog here."
           );
         case "subscriber":
-          return props.billingClient ? h12(SubscriberScreen, { client: props.billingClient }) : h12(
+          return props.billingClient ? h13(SubscriberScreen, { client: props.billingClient }) : h13(
             "p",
             { style: styles.status },
             "Pass a BillingAdminClient to look up subscribers here."
           );
+        case "audit":
+          return props.auditClient ? h13(AuditScreen, { client: props.auditClient }) : h13(
+            "p",
+            { style: styles.status },
+            "Pass an AuditAdminClient to see the audit trail here."
+          );
         case "users":
-          return props.authClient ? h12(UsersScreen, { client: props.authClient }) : h12("p", { style: styles.status }, "Pass an AuthAdminClient to look up users here.");
+          return props.authClient ? h13(UsersScreen, { client: props.authClient }) : h13("p", { style: styles.status }, "Pass an AuthAdminClient to look up users here.");
         case "settings": {
           const cc = props.configClient;
           if (!cc)
-            return h12(
+            return h13(
               "p",
               { style: styles.status },
               "Pass a ConfigAdminClient to manage config and secrets here."
@@ -893,7 +981,7 @@ var AdminShell = defineComponent11({
           if (e && e.kind !== "template")
             return [
               back(),
-              h12(ConfigEditorScreen, {
+              h13(ConfigEditorScreen, {
                 client: cc,
                 kind: e.kind,
                 configKey: e.key,
@@ -901,7 +989,7 @@ var AdminShell = defineComponent11({
                 onSaved: () => editing.value = null
               })
             ];
-          return h12(ConfigListScreen, {
+          return h13(ConfigListScreen, {
             client: cc,
             ...props.environment !== void 0 ? { environment: props.environment } : {},
             "onSelect-config": (key) => editing.value = { kind: "config", key },
@@ -911,7 +999,7 @@ var AdminShell = defineComponent11({
         case "templates": {
           const kc = props.courierClient;
           if (!kc)
-            return h12(
+            return h13(
               "p",
               { style: styles.status },
               "Pass a CourierAdminClient to manage templates here."
@@ -920,32 +1008,32 @@ var AdminShell = defineComponent11({
           if (e?.kind === "template")
             return [
               back(),
-              h12(TemplateEditorScreen, {
+              h13(TemplateEditorScreen, {
                 client: kc,
                 type: e.type,
                 onSaved: () => editing.value = null
               })
             ];
-          return h12(TemplateListScreen, {
+          return h13(TemplateListScreen, {
             client: kc,
             "onSelect-template": (t) => editing.value = { kind: "template", type: t.type }
           });
         }
       }
     };
-    return () => h12("div", { style: styles.shell }, [
-      h12(
+    return () => h13("div", { style: styles.shell }, [
+      h13(
         "nav",
         { style: styles.nav, "aria-label": "Admin" },
         NAV.map((g) => {
           const items = g.items.filter(
-            (i) => !i.needs || (i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : props.billingClient)
+            (i) => !i.needs || (i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : i.needs === "billing" ? props.billingClient : props.auditClient)
           );
           if (items.length === 0) return null;
-          return h12("div", { key: g.group }, [
-            h12("div", { style: styles.navGroup }, g.group),
+          return h13("div", { key: g.group }, [
+            h13("div", { style: styles.navGroup }, g.group),
             ...items.map(
-              (i) => h12(
+              (i) => h13(
                 "button",
                 {
                   key: i.page,
@@ -963,7 +1051,7 @@ var AdminShell = defineComponent11({
           ]);
         })
       ),
-      h12("main", { style: styles.main }, body())
+      h13("main", { style: styles.main }, body())
     ]);
   }
 });
@@ -971,6 +1059,7 @@ export {
   AdminLogScreen,
   AdminShell,
   AttentionScreen,
+  AuditScreen,
   CatalogScreen,
   ConfigScreen,
   DoctorScreen,