@fonderie/vue-admin-screens 0.2.0 → 0.3.0

package/README.md

@@ -11,12 +11,13 @@ Status: **experimental** (0.x).
 | Today | Attention | what needs me today — empty is green |
 | System | Modules · Configuration · Doctor · Routes | what did I deploy · is it configured · is it working · what is exposed |
 | People | Users | why can't this person log in — lookup, sessions, sign-ins, suspend, sign out everywhere (`authClient`) |
+| 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 |
 
 ```ts
-import { AdminClient, AuthAdminClient, ConfigAdminClient, CourierAdminClient } from '@fonderie/client';
+import { AdminClient, AuthAdminClient, BillingAdminClient, ConfigAdminClient, CourierAdminClient } from '@fonderie/client';
 import { AdminShell } from '@fonderie/vue-admin-screens';
 
 const base = { baseUrl: 'https://api.example.com', adminToken, actor: 'louis' };
@@ -25,10 +26,11 @@ const client = new AdminClient(base);
 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
 ```
 
 ```ts
-h(AdminShell, { client, configClient, courierClient, authClient })
+h(AdminShell, { client, configClient, courierClient, authClient, billingClient })
 ```
 
 Pass `page` and listen to `navigate` to own the URL (one route per page);

package/dist/index.cjs

@@ -23,10 +23,12 @@ __export(index_exports, {
   AdminLogScreen: () => AdminLogScreen,
   AdminShell: () => AdminShell,
   AttentionScreen: () => AttentionScreen,
+  CatalogScreen: () => CatalogScreen,
   ConfigScreen: () => ConfigScreen,
   DoctorScreen: () => DoctorScreen,
   ModulesScreen: () => ModulesScreen,
   RoutesScreen: () => RoutesScreen,
+  SubscriberScreen: () => SubscriberScreen,
   TokensScreen: () => TokensScreen,
   UsersScreen: () => UsersScreen
 });
@@ -35,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 // src/screens/AdminShell.ts
 var import_vue_config_admin_screens = require("@fonderie/vue-config-admin-screens");
 var import_vue_courier_admin_screens = require("@fonderie/vue-courier-admin-screens");
-var import_vue10 = require("vue");
+var import_vue12 = require("vue");
 
 // src/styles.ts
 var styles = {
@@ -595,6 +597,233 @@ var UsersScreen = (0, import_vue9.defineComponent)({
   }
 });
 
+// src/screens/CatalogScreen.ts
+var import_vue_admin9 = require("@fonderie/vue-admin");
+var import_vue10 = require("vue");
+var CatalogScreen = (0, import_vue10.defineComponent)({
+  name: "FonderieCatalogScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { catalog, isLoading, error, refresh, deletePlan } = (0, import_vue_admin9.useAdminCatalog)(props.client);
+    const money = (v) => v == null ? "\u2014" : (v / 100).toFixed(2);
+    return () => {
+      const c = catalog.value;
+      return (0, import_vue10.h)("div", { style: styles.container }, [
+        (0, import_vue10.h)("div", { style: styles.toolbar }, [
+          (0, import_vue10.h)("h1", { style: { ...styles.title, marginBottom: 0 } }, "Catalog"),
+          refreshButton("Refresh", isLoading.value, () => void refresh())
+        ]),
+        error.value ? (0, import_vue10.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        isLoading.value && !c ? (0, import_vue10.h)("p", { style: styles.status }, "Loading\u2026") : null,
+        c ? [
+          (0, import_vue10.h)("h2", { style: styles.subtitle }, "Configured (code)"),
+          (0, import_vue10.h)(
+            "pre",
+            {
+              style: {
+                ...styles.mono,
+                background: "#f9fafb",
+                padding: "12px",
+                overflowX: "auto"
+              }
+            },
+            JSON.stringify(c.configured, null, 2)
+          ),
+          (0, import_vue10.h)("h2", { style: styles.subtitle }, "Stored (database)"),
+          c.stored.length === 0 ? (0, import_vue10.h)("p", { style: styles.muted }, "No stored plans.") : table(
+            ["Plan", "Tier", "Seats", "Monthly", "Yearly", "Trial", ""],
+            c.stored.map(
+              (p) => (0, import_vue10.h)("tr", { key: p.id }, [
+                td([
+                  (0, import_vue10.h)("strong", p.name),
+                  p.description ? (0, import_vue10.h)("div", { style: styles.muted }, p.description) : ""
+                ]),
+                td(String(p.tier)),
+                td(p.seats == null ? "\u221E" : String(p.seats)),
+                td(`${money(p.pricing?.monthly)} ${p.pricing?.currency ?? ""}`),
+                td(money(p.pricing?.yearly)),
+                td(p.trialDays ? `${p.trialDays} d` : "\u2014"),
+                td(
+                  (0, import_vue10.h)(
+                    "button",
+                    {
+                      type: "button",
+                      style: styles.button,
+                      onClick: () => {
+                        if (window.confirm(`Delete stored plan "${p.name}"?`))
+                          void deletePlan(p.id).catch(() => {
+                          });
+                      }
+                    },
+                    "Delete"
+                  )
+                )
+              ])
+            )
+          )
+        ] : null
+      ]);
+    };
+  }
+});
+
+// src/screens/SubscriberScreen.ts
+var import_vue_admin10 = require("@fonderie/vue-admin");
+var import_vue11 = require("vue");
+var SubscriberScreen = (0, import_vue11.defineComponent)({
+  name: "FonderieSubscriberScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const type = (0, import_vue11.ref)("user");
+    const idInput = (0, import_vue11.ref)("");
+    const subscriber = (0, import_vue11.ref)(null);
+    const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = (0, import_vue_admin10.useAdminSubscriber)(props.client, subscriber, { limit: 20 });
+    const amount = (0, import_vue11.ref)("");
+    const note = (0, import_vue11.ref)("");
+    const granted = (0, import_vue11.ref)(null);
+    const input = (model, placeholder, extra = {}) => (0, import_vue11.h)("input", {
+      value: model.value,
+      onInput: (e) => model.value = e.target.value,
+      placeholder,
+      style: { ...styles.button, cursor: "text", ...extra },
+      "aria-label": placeholder
+    });
+    return () => {
+      const s = subscription.value;
+      const w = wallet.value;
+      return (0, import_vue11.h)("div", { style: styles.container }, [
+        (0, import_vue11.h)("h1", { style: styles.title }, "Subscriber"),
+        (0, import_vue11.h)(
+          "form",
+          {
+            style: styles.toolbar,
+            onSubmit: (e) => {
+              e.preventDefault();
+              granted.value = null;
+              subscriber.value = idInput.value.trim() ? { type: type.value, id: idInput.value.trim() } : null;
+            }
+          },
+          [
+            (0, import_vue11.h)(
+              "select",
+              {
+                value: type.value,
+                onChange: (e) => type.value = e.target.value,
+                style: styles.button,
+                "aria-label": "Type"
+              },
+              [
+                (0, import_vue11.h)("option", { value: "user" }, "user"),
+                (0, import_vue11.h)("option", { value: "workspace" }, "workspace")
+              ]
+            ),
+            input(idInput, "subscriber id", { minWidth: "280px" }),
+            (0, import_vue11.h)(
+              "button",
+              { type: "submit", style: styles.button, disabled: isLoading.value },
+              "Look up"
+            )
+          ]
+        ),
+        error.value ? (0, import_vue11.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        subscriber.value && !isLoading.value ? [
+          (0, import_vue11.h)("h2", { style: styles.subtitle }, "Subscription"),
+          s ? (0, import_vue11.h)("table", { style: styles.table }, [
+            (0, import_vue11.h)("tbody", [
+              (0, import_vue11.h)("tr", [td("plan"), td([(0, import_vue11.h)("strong", s.plan), ` \xB7 ${s.interval}`])]),
+              (0, import_vue11.h)("tr", [
+                td("status"),
+                td(`${s.status}${s.cancelAtPeriodEnd ? " \xB7 cancels at period end" : ""}`)
+              ]),
+              (0, import_vue11.h)("tr", [
+                td("period"),
+                td(
+                  `${s.currentPeriodStart ? new Date(s.currentPeriodStart).toLocaleDateString() : "\u2014"} \u2192 ${s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : "\u2014"}`
+                )
+              ]),
+              (0, import_vue11.h)("tr", [td("provider"), td(s.providerSubscriptionId ?? "\u2014", styles.mono)])
+            ])
+          ]) : (0, import_vue11.h)("p", { style: styles.muted }, "No subscription."),
+          (0, import_vue11.h)("h2", { style: styles.subtitle }, "Wallet"),
+          w ? [
+            (0, import_vue11.h)("p", [
+              (0, import_vue11.h)("strong", w.balance),
+              ` ${w.currency} `,
+              (0, import_vue11.h)(
+                "span",
+                { style: styles.muted },
+                `(granted ${w.granted ?? "0"} \xB7 purchased ${w.purchased ?? "0"}) \xB7 minor units, precision ${w.precision}`
+              )
+            ]),
+            (0, import_vue11.h)(
+              "form",
+              {
+                style: styles.toolbar,
+                onSubmit: (e) => {
+                  e.preventDefault();
+                  const sub = subscriber.value;
+                  if (!sub) return;
+                  const key = `admin-grant-${sub.type}-${sub.id}-${Date.now()}`;
+                  const amt = amount.value.trim();
+                  void grant({
+                    amount: amt,
+                    ...note.value ? { description: note.value } : {},
+                    idempotencyKey: key
+                  }).then(() => {
+                    granted.value = `Granted ${amt} ${w.currency}.`;
+                    amount.value = "";
+                    note.value = "";
+                  }).catch(() => {
+                  });
+                }
+              },
+              [
+                input(amount, "amount (minor units)"),
+                input(note, "reason (optional)", { minWidth: "220px" }),
+                (0, import_vue11.h)(
+                  "button",
+                  {
+                    type: "submit",
+                    style: styles.button,
+                    disabled: !/^\d+$/.test(amount.value.trim())
+                  },
+                  "Grant"
+                ),
+                granted.value ? (0, import_vue11.h)("span", { style: styles.ok }, granted.value) : null
+              ]
+            ),
+            (0, import_vue11.h)("h2", { style: styles.subtitle }, "Ledger"),
+            ledger.value.length === 0 ? (0, import_vue11.h)("p", { style: styles.muted }, "Nothing moved yet.") : table(
+              ["When", "Kind", "Amount", "Note"],
+              ledger.value.map(
+                (t) => (0, import_vue11.h)("tr", { key: t.id }, [
+                  td(new Date(t.createdAt).toLocaleString(), styles.muted),
+                  td(t.type),
+                  td(t.amount, styles.mono),
+                  td(t.description ?? "", styles.muted)
+                ])
+              )
+            ),
+            hasMoreLedger.value ? (0, import_vue11.h)(
+              "button",
+              {
+                type: "button",
+                style: { ...styles.button, marginTop: "8px" },
+                onClick: () => void loadMoreLedger()
+              },
+              "Load more"
+            ) : null
+          ] : (0, import_vue11.h)(
+            "p",
+            { style: styles.muted },
+            "No wallet \u2014 billing has no wallet configuration."
+          )
+        ] : null
+      ]);
+    };
+  }
+});
+
 // src/screens/AdminShell.ts
 var NAV = [
   { group: "Today", items: [{ page: "attention", label: "Attention" }] },
@@ -608,6 +837,13 @@ var NAV = [
     ]
   },
   { group: "People", items: [{ page: "users", label: "Users", needs: "auth" }] },
+  {
+    group: "Money",
+    items: [
+      { page: "catalog", label: "Catalog", needs: "billing" },
+      { page: "subscriber", label: "Subscriber", needs: "billing" }
+    ]
+  },
   { group: "Settings", items: [{ page: "settings", label: "Config & secrets", needs: "config" }] },
   { group: "Messaging", items: [{ page: "templates", label: "Templates", needs: "courier" }] },
   {
@@ -618,7 +854,7 @@ var NAV = [
     ]
   }
 ];
-var AdminShell = (0, import_vue10.defineComponent)({
+var AdminShell = (0, import_vue12.defineComponent)({
   name: "FonderieAdminShell",
   props: {
     client: { type: Object, required: true },
@@ -628,6 +864,8 @@ var AdminShell = (0, import_vue10.defineComponent)({
     courierClient: { type: Object, default: void 0 },
     // Given ⇒ the People page (users) appears; needs @fonderie/auth ≥ 7.8.
     authClient: { type: Object, default: void 0 },
+    // Given ⇒ the Money pages (catalog, subscriber) appear; needs @fonderie/billing ≥ 9.10.
+    billingClient: { 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.
@@ -635,15 +873,15 @@ var AdminShell = (0, import_vue10.defineComponent)({
   },
   emits: { navigate: (_page) => true },
   setup(props, { emit }) {
-    const own = (0, import_vue10.ref)("attention");
-    const current = (0, import_vue10.computed)(() => props.page ?? own.value);
-    const editing = (0, import_vue10.ref)(null);
+    const own = (0, import_vue12.ref)("attention");
+    const current = (0, import_vue12.computed)(() => props.page ?? own.value);
+    const editing = (0, import_vue12.ref)(null);
     const go = (p) => {
       editing.value = null;
       emit("navigate", p);
       if (props.page === void 0) own.value = p;
     };
-    const back = () => (0, import_vue10.h)(
+    const back = () => (0, import_vue12.h)(
       "button",
       { type: "button", style: styles.button, onClick: () => editing.value = null },
       "\u2190 Back"
@@ -652,25 +890,37 @@ var AdminShell = (0, import_vue10.defineComponent)({
       const c = props.client;
       switch (current.value) {
         case "attention":
-          return (0, import_vue10.h)(AttentionScreen, { client: c });
+          return (0, import_vue12.h)(AttentionScreen, { client: c });
         case "modules":
-          return (0, import_vue10.h)(ModulesScreen, { client: c });
+          return (0, import_vue12.h)(ModulesScreen, { client: c });
         case "doctor":
-          return (0, import_vue10.h)(DoctorScreen, { client: c });
+          return (0, import_vue12.h)(DoctorScreen, { client: c });
         case "config":
-          return (0, import_vue10.h)(ConfigScreen, { client: c });
+          return (0, import_vue12.h)(ConfigScreen, { client: c });
         case "routes":
-          return (0, import_vue10.h)(RoutesScreen, { client: c });
+          return (0, import_vue12.h)(RoutesScreen, { client: c });
         case "tokens":
-          return (0, import_vue10.h)(TokensScreen, { client: c });
+          return (0, import_vue12.h)(TokensScreen, { client: c });
         case "log":
-          return (0, import_vue10.h)(AdminLogScreen, { client: c });
+          return (0, import_vue12.h)(AdminLogScreen, { client: c });
+        case "catalog":
+          return props.billingClient ? (0, import_vue12.h)(CatalogScreen, { client: props.billingClient }) : (0, import_vue12.h)(
+            "p",
+            { style: styles.status },
+            "Pass a BillingAdminClient to see the catalog here."
+          );
+        case "subscriber":
+          return props.billingClient ? (0, import_vue12.h)(SubscriberScreen, { client: props.billingClient }) : (0, import_vue12.h)(
+            "p",
+            { style: styles.status },
+            "Pass a BillingAdminClient to look up subscribers here."
+          );
         case "users":
-          return props.authClient ? (0, import_vue10.h)(UsersScreen, { client: props.authClient }) : (0, import_vue10.h)("p", { style: styles.status }, "Pass an AuthAdminClient to look up users here.");
+          return props.authClient ? (0, import_vue12.h)(UsersScreen, { client: props.authClient }) : (0, import_vue12.h)("p", { style: styles.status }, "Pass an AuthAdminClient to look up users here.");
         case "settings": {
           const cc = props.configClient;
           if (!cc)
-            return (0, import_vue10.h)(
+            return (0, import_vue12.h)(
               "p",
               { style: styles.status },
               "Pass a ConfigAdminClient to manage config and secrets here."
@@ -679,7 +929,7 @@ var AdminShell = (0, import_vue10.defineComponent)({
           if (e && e.kind !== "template")
             return [
               back(),
-              (0, import_vue10.h)(import_vue_config_admin_screens.ConfigEditorScreen, {
+              (0, import_vue12.h)(import_vue_config_admin_screens.ConfigEditorScreen, {
                 client: cc,
                 kind: e.kind,
                 configKey: e.key,
@@ -687,7 +937,7 @@ var AdminShell = (0, import_vue10.defineComponent)({
                 onSaved: () => editing.value = null
               })
             ];
-          return (0, import_vue10.h)(import_vue_config_admin_screens.ConfigListScreen, {
+          return (0, import_vue12.h)(import_vue_config_admin_screens.ConfigListScreen, {
             client: cc,
             ...props.environment !== void 0 ? { environment: props.environment } : {},
             "onSelect-config": (key) => editing.value = { kind: "config", key },
@@ -697,7 +947,7 @@ var AdminShell = (0, import_vue10.defineComponent)({
         case "templates": {
           const kc = props.courierClient;
           if (!kc)
-            return (0, import_vue10.h)(
+            return (0, import_vue12.h)(
               "p",
               { style: styles.status },
               "Pass a CourierAdminClient to manage templates here."
@@ -706,32 +956,32 @@ var AdminShell = (0, import_vue10.defineComponent)({
           if (e?.kind === "template")
             return [
               back(),
-              (0, import_vue10.h)(import_vue_courier_admin_screens.TemplateEditorScreen, {
+              (0, import_vue12.h)(import_vue_courier_admin_screens.TemplateEditorScreen, {
                 client: kc,
                 type: e.type,
                 onSaved: () => editing.value = null
               })
             ];
-          return (0, import_vue10.h)(import_vue_courier_admin_screens.TemplateListScreen, {
+          return (0, import_vue12.h)(import_vue_courier_admin_screens.TemplateListScreen, {
             client: kc,
             "onSelect-template": (t) => editing.value = { kind: "template", type: t.type }
           });
         }
       }
     };
-    return () => (0, import_vue10.h)("div", { style: styles.shell }, [
-      (0, import_vue10.h)(
+    return () => (0, import_vue12.h)("div", { style: styles.shell }, [
+      (0, import_vue12.h)(
         "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 : props.authClient)
+            (i) => !i.needs || (i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : props.billingClient)
           );
           if (items.length === 0) return null;
-          return (0, import_vue10.h)("div", { key: g.group }, [
-            (0, import_vue10.h)("div", { style: styles.navGroup }, g.group),
+          return (0, import_vue12.h)("div", { key: g.group }, [
+            (0, import_vue12.h)("div", { style: styles.navGroup }, g.group),
             ...items.map(
-              (i) => (0, import_vue10.h)(
+              (i) => (0, import_vue12.h)(
                 "button",
                 {
                   key: i.page,
@@ -749,7 +999,7 @@ var AdminShell = (0, import_vue10.defineComponent)({
           ]);
         })
       ),
-      (0, import_vue10.h)("main", { style: styles.main }, body())
+      (0, import_vue12.h)("main", { style: styles.main }, body())
     ]);
   }
 });
@@ -758,10 +1008,12 @@ var AdminShell = (0, import_vue10.defineComponent)({
   AdminLogScreen,
   AdminShell,
   AttentionScreen,
+  CatalogScreen,
   ConfigScreen,
   DoctorScreen,
   ModulesScreen,
   RoutesScreen,
+  SubscriberScreen,
   TokensScreen,
   UsersScreen
 });