@fonderie/react-admin-screens 0.2.0 → 0.3.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 useState2 } from "react";
+import { useState as useState3 } from "react";
 
 // src/styles.ts
 var styles = {
@@ -475,8 +475,251 @@ function UsersScreen({ client }) {
   ] });
 }
 
-// src/screens/AdminShell.tsx
+// src/screens/CatalogScreen.tsx
+import { useAdminCatalog } from "@fonderie/react-admin";
 import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function CatalogScreen({ client }) {
+  const { catalog, isLoading, error, refresh, deletePlan } = useAdminCatalog(client);
+  const money = (v) => v == null ? "\u2014" : (v / 100).toFixed(2);
+  return /* @__PURE__ */ jsxs9("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsxs9("div", { style: styles.toolbar, children: [
+      /* @__PURE__ */ jsx9("h1", { style: { ...styles.title, marginBottom: 0 }, children: "Catalog" }),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          style: styles.button,
+          onClick: () => void refresh(),
+          disabled: isLoading,
+          children: "Refresh"
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsx9("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    isLoading && !catalog ? /* @__PURE__ */ jsx9("p", { style: styles.status, children: "Loading\u2026" }) : null,
+    catalog ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
+      /* @__PURE__ */ jsx9("h2", { style: styles.subtitle, children: "Configured (code)" }),
+      /* @__PURE__ */ jsx9("pre", { style: { ...styles.mono, background: "#f9fafb", padding: 12, overflowX: "auto" }, children: JSON.stringify(catalog.configured, null, 2) }),
+      /* @__PURE__ */ jsx9("h2", { style: styles.subtitle, children: "Stored (database)" }),
+      catalog.stored.length === 0 ? /* @__PURE__ */ jsx9("p", { style: styles.muted, children: "No stored plans." }) : /* @__PURE__ */ jsxs9("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsxs9("tr", { children: [
+          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Plan" }),
+          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Tier" }),
+          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Seats" }),
+          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Monthly" }),
+          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Yearly" }),
+          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Trial" }),
+          /* @__PURE__ */ jsx9("th", { style: styles.th })
+        ] }) }),
+        /* @__PURE__ */ jsx9("tbody", { children: catalog.stored.map((p) => /* @__PURE__ */ jsxs9("tr", { children: [
+          /* @__PURE__ */ jsxs9("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx9("strong", { children: p.name }),
+            p.description ? /* @__PURE__ */ jsx9("div", { style: styles.muted, children: p.description }) : null
+          ] }),
+          /* @__PURE__ */ jsx9("td", { style: styles.td, children: p.tier }),
+          /* @__PURE__ */ jsx9("td", { style: styles.td, children: p.seats ?? "\u221E" }),
+          /* @__PURE__ */ jsxs9("td", { style: styles.td, children: [
+            money(p.pricing?.monthly),
+            " ",
+            p.pricing?.currency ?? ""
+          ] }),
+          /* @__PURE__ */ jsx9("td", { style: styles.td, children: money(p.pricing?.yearly) }),
+          /* @__PURE__ */ jsx9("td", { style: styles.td, children: p.trialDays ? `${p.trialDays} d` : "\u2014" }),
+          /* @__PURE__ */ jsx9("td", { style: styles.td, children: /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => {
+                if (window.confirm(`Delete stored plan "${p.name}"?`))
+                  void deletePlan(p.id).catch(() => {
+                  });
+              },
+              children: "Delete"
+            }
+          ) })
+        ] }, p.id)) })
+      ] })
+    ] }) : null
+  ] });
+}
+
+// src/screens/SubscriberScreen.tsx
+import { useAdminSubscriber } from "@fonderie/react-admin";
+import { useState as useState2 } 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 { 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);
+  return /* @__PURE__ */ jsxs10("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx10("h1", { style: styles.title, children: "Subscriber" }),
+    /* @__PURE__ */ jsxs10(
+      "form",
+      {
+        style: styles.toolbar,
+        onSubmit: (e) => {
+          e.preventDefault();
+          setGranted(null);
+          setSubscriber(idInput.trim() ? { type, id: idInput.trim() } : null);
+        },
+        children: [
+          /* @__PURE__ */ jsxs10(
+            "select",
+            {
+              value: type,
+              onChange: (e) => setType(e.target.value),
+              style: styles.button,
+              "aria-label": "Type",
+              children: [
+                /* @__PURE__ */ jsx10("option", { value: "user", children: "user" }),
+                /* @__PURE__ */ jsx10("option", { value: "workspace", children: "workspace" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            "input",
+            {
+              value: idInput,
+              onChange: (e) => setIdInput(e.target.value),
+              placeholder: "subscriber id",
+              style: { ...styles.button, cursor: "text", minWidth: 280 },
+              "aria-label": "Subscriber id"
+            }
+          ),
+          /* @__PURE__ */ jsx10("button", { type: "submit", style: styles.button, disabled: isLoading, children: "Look up" })
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ jsx10("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    subscriber && !isLoading ? /* @__PURE__ */ jsxs10(Fragment7, { children: [
+      /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Subscription" }),
+      subscription ? /* @__PURE__ */ jsx10("table", { style: styles.table, children: /* @__PURE__ */ jsxs10("tbody", { children: [
+        /* @__PURE__ */ jsxs10("tr", { children: [
+          /* @__PURE__ */ jsx10("td", { style: styles.td, children: "plan" }),
+          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx10("strong", { children: subscription.plan }),
+            " \xB7 ",
+            subscription.interval
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10("tr", { children: [
+          /* @__PURE__ */ jsx10("td", { style: styles.td, children: "status" }),
+          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
+            subscription.status,
+            subscription.cancelAtPeriodEnd ? " \xB7 cancels at period end" : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10("tr", { children: [
+          /* @__PURE__ */ jsx10("td", { style: styles.td, children: "period" }),
+          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
+            subscription.currentPeriodStart ? new Date(subscription.currentPeriodStart).toLocaleDateString() : "\u2014",
+            " ",
+            "\u2192",
+            " ",
+            subscription.currentPeriodEnd ? new Date(subscription.currentPeriodEnd).toLocaleDateString() : "\u2014"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10("tr", { children: [
+          /* @__PURE__ */ jsx10("td", { style: styles.td, children: "provider" }),
+          /* @__PURE__ */ jsx10("td", { style: { ...styles.td, ...styles.mono }, children: subscription.providerSubscriptionId ?? "\u2014" })
+        ] })
+      ] }) }) : /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "No subscription." }),
+      /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Wallet" }),
+      wallet ? /* @__PURE__ */ jsxs10(Fragment7, { children: [
+        /* @__PURE__ */ jsxs10("p", { children: [
+          /* @__PURE__ */ jsx10("strong", { children: wallet.balance }),
+          " ",
+          wallet.currency,
+          " ",
+          /* @__PURE__ */ jsxs10("span", { style: styles.muted, children: [
+            "(granted ",
+            wallet.granted ?? "0",
+            " \xB7 purchased ",
+            wallet.purchased ?? "0",
+            ") \xB7 minor units, precision ",
+            wallet.precision
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10(
+          "form",
+          {
+            style: styles.toolbar,
+            onSubmit: (e) => {
+              e.preventDefault();
+              const key = `admin-grant-${subscriber.type}-${subscriber.id}-${Date.now()}`;
+              void grant({
+                amount: amount.trim(),
+                ...note ? { description: note } : {},
+                idempotencyKey: key
+              }).then(() => {
+                setGranted(`Granted ${amount.trim()} ${wallet.currency}.`);
+                setAmount("");
+                setNote("");
+              }).catch(() => {
+              });
+            },
+            children: [
+              /* @__PURE__ */ jsx10(
+                "input",
+                {
+                  value: amount,
+                  onChange: (e) => setAmount(e.target.value),
+                  placeholder: "amount (minor units)",
+                  style: { ...styles.button, cursor: "text" },
+                  "aria-label": "Amount"
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "input",
+                {
+                  value: note,
+                  onChange: (e) => setNote(e.target.value),
+                  placeholder: "reason (optional)",
+                  style: { ...styles.button, cursor: "text", minWidth: 220 },
+                  "aria-label": "Reason"
+                }
+              ),
+              /* @__PURE__ */ jsx10("button", { type: "submit", style: styles.button, disabled: !/^\d+$/.test(amount.trim()), children: "Grant" }),
+              granted ? /* @__PURE__ */ jsx10("span", { style: styles.ok, children: granted }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Ledger" }),
+        ledger.length === 0 ? /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "Nothing moved yet." }) : /* @__PURE__ */ jsxs10("table", { style: styles.table, children: [
+          /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
+            /* @__PURE__ */ jsx10("th", { style: styles.th, children: "When" }),
+            /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Kind" }),
+            /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Amount" }),
+            /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Note" })
+          ] }) }),
+          /* @__PURE__ */ jsx10("tbody", { children: ledger.map((t) => /* @__PURE__ */ jsxs10("tr", { children: [
+            /* @__PURE__ */ jsx10("td", { style: { ...styles.td, ...styles.muted }, children: new Date(t.createdAt).toLocaleString() }),
+            /* @__PURE__ */ jsx10("td", { style: styles.td, children: t.type }),
+            /* @__PURE__ */ jsx10("td", { style: { ...styles.td, ...styles.mono }, children: t.amount }),
+            /* @__PURE__ */ jsx10("td", { style: { ...styles.td, ...styles.muted }, children: t.description ?? "" })
+          ] }, t.id)) })
+        ] }),
+        hasMoreLedger ? /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            style: { ...styles.button, marginTop: 8 },
+            onClick: () => void loadMoreLedger(),
+            children: "Load more"
+          }
+        ) : null
+      ] }) : /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "No wallet \u2014 billing has no wallet configuration." })
+    ] }) : null
+  ] });
+}
+
+// src/screens/AdminShell.tsx
+import { Fragment as Fragment8, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var NAV = [
   { group: "Today", items: [{ page: "attention", label: "Attention" }] },
   {
@@ -489,6 +732,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" }] },
   {
@@ -504,52 +754,60 @@ function AdminShell({
   configClient,
   courierClient,
   authClient,
+  billingClient,
   environment,
   page,
   onNavigate
 }) {
-  const [own, setOwn] = useState2("attention");
+  const [own, setOwn] = useState3("attention");
   const current = page ?? own;
   const go = (p) => {
     if (onNavigate) onNavigate(p);
     if (page === void 0) setOwn(p);
   };
-  const [editing, setEditing] = useState2(null);
+  const [editing, setEditing] = useState3(null);
   const has = {
     config: Boolean(configClient),
     courier: Boolean(courierClient),
-    auth: Boolean(authClient)
+    auth: Boolean(authClient),
+    billing: Boolean(billingClient)
   };
   let body;
   switch (current) {
     case "attention":
-      body = /* @__PURE__ */ jsx9(AttentionScreen, { client });
+      body = /* @__PURE__ */ jsx11(AttentionScreen, { client });
       break;
     case "modules":
-      body = /* @__PURE__ */ jsx9(ModulesScreen, { client });
+      body = /* @__PURE__ */ jsx11(ModulesScreen, { client });
       break;
     case "doctor":
-      body = /* @__PURE__ */ jsx9(DoctorScreen, { client });
+      body = /* @__PURE__ */ jsx11(DoctorScreen, { client });
       break;
     case "config":
-      body = /* @__PURE__ */ jsx9(ConfigScreen, { client });
+      body = /* @__PURE__ */ jsx11(ConfigScreen, { client });
       break;
     case "routes":
-      body = /* @__PURE__ */ jsx9(RoutesScreen, { client });
+      body = /* @__PURE__ */ jsx11(RoutesScreen, { client });
       break;
     case "tokens":
-      body = /* @__PURE__ */ jsx9(TokensScreen, { client });
+      body = /* @__PURE__ */ jsx11(TokensScreen, { client });
       break;
     case "log":
-      body = /* @__PURE__ */ jsx9(AdminLogScreen, { client });
+      body = /* @__PURE__ */ jsx11(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." });
+      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." });
       break;
     case "users":
-      body = authClient ? /* @__PURE__ */ jsx9(UsersScreen, { client: authClient }) : /* @__PURE__ */ jsx9("p", { style: styles.status, children: "Pass an AuthAdminClient to look up users here." });
+      body = authClient ? /* @__PURE__ */ jsx11(UsersScreen, { client: authClient }) : /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Pass an AuthAdminClient to look up users here." });
       break;
     case "settings":
-      body = !configClient ? /* @__PURE__ */ jsx9("p", { style: styles.status, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
-        /* @__PURE__ */ jsx9("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
-        /* @__PURE__ */ jsx9(
+      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(
           ConfigEditorScreen,
           {
             client: configClient,
@@ -559,7 +817,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ jsx9(
+      ] }) : /* @__PURE__ */ jsx11(
         ConfigListScreen,
         {
           client: configClient,
@@ -570,9 +828,9 @@ function AdminShell({
       );
       break;
     case "templates":
-      body = !courierClient ? /* @__PURE__ */ jsx9("p", { style: styles.status, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
-        /* @__PURE__ */ jsx9("button", { type: "button", style: styles.button, onClick: () => setEditing(null), children: "\u2190 Back" }),
-        /* @__PURE__ */ jsx9(
+      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(
           TemplateEditorScreen,
           {
             client: courierClient,
@@ -580,7 +838,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ jsx9(
+      ] }) : /* @__PURE__ */ jsx11(
         TemplateListScreen,
         {
           client: courierClient,
@@ -589,13 +847,13 @@ function AdminShell({
       );
       break;
   }
-  return /* @__PURE__ */ jsxs9("div", { style: styles.shell, children: [
-    /* @__PURE__ */ jsx9("nav", { style: styles.nav, "aria-label": "Admin", children: NAV.map((g) => {
+  return /* @__PURE__ */ jsxs11("div", { style: styles.shell, children: [
+    /* @__PURE__ */ jsx11("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__ */ jsxs9("div", { children: [
-        /* @__PURE__ */ jsx9("div", { style: styles.navGroup, children: g.group }),
-        items.map((i) => /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx11("div", { style: styles.navGroup, children: g.group }),
+        items.map((i) => /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
@@ -611,17 +869,19 @@ function AdminShell({
         ))
       ] }, g.group);
     }) }),
-    /* @__PURE__ */ jsx9("main", { style: styles.main, children: body })
+    /* @__PURE__ */ jsx11("main", { style: styles.main, children: body })
   ] });
 }
 export {
   AdminLogScreen,
   AdminShell,
   AttentionScreen,
+  CatalogScreen,
   ConfigScreen,
   DoctorScreen,
   ModulesScreen,
   RoutesScreen,
+  SubscriberScreen,
   TokensScreen,
   UsersScreen
 };