@fonderie/react-admin-screens 1.3.1 → 1.5.0

package/dist/index.cjs

@@ -1589,7 +1589,9 @@ var import_react_admin10 = require("@fonderie/react-admin");
 var import_react5 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function SubscriberBilling({ client, subscriber }) {
-  const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = (0, import_react_admin10.useAdminSubscriber)(client, subscriber, { limit: 20 });
+  const [currency, setCurrency] = (0, import_react5.useState)("");
+  const [currencyDraft, setCurrencyDraft] = (0, import_react5.useState)("");
+  const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = (0, import_react_admin10.useAdminSubscriber)(client, subscriber, { limit: 20, ...currency ? { currency } : {} });
   const [amount, setAmount] = (0, import_react5.useState)("");
   const [note, setNote] = (0, import_react5.useState)("");
   const [granted, setGranted] = (0, import_react5.useState)(null);
@@ -1630,7 +1632,42 @@ function SubscriberBilling({ client, subscriber }) {
         subscription?.providerSubscriptionId ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { ...styles.statHint, fontFamily: "var(--fonderie-mono,monospace)" }, children: subscription.providerSubscriptionId }) : null
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.card, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.statLabel, children: "Credits" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: styles.statLabel, children: "Credits" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "form",
+                {
+                  style: { display: "flex", gap: 4 },
+                  onSubmit: (e) => {
+                    e.preventDefault();
+                    setCurrency(currencyDraft.trim().toUpperCase());
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    "input",
+                    {
+                      value: currencyDraft,
+                      onChange: (e) => setCurrencyDraft(e.target.value),
+                      placeholder: wallet?.currency ?? "currency",
+                      maxLength: 8,
+                      style: { ...styles.input, height: 26, width: 84, fontSize: 12 },
+                      "aria-label": "Wallet currency",
+                      title: "Show the wallet in another currency"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
         wallet ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.statValue, children: [
             wallet.balance,
@@ -1752,7 +1789,11 @@ function UsersScreen({
     openUserId ? { id: openUserId } : null
   );
   const plans = useSubscriptionIndex(billingClient);
-  const list = (0, import_react_admin11.useAdminUsers)(client, { limit: pageSize });
+  const [showDeleted, setShowDeleted] = (0, import_react6.useState)(false);
+  const list = (0, import_react_admin11.useAdminUsers)(client, {
+    limit: pageSize,
+    ...showDeleted ? { deleted: true } : {}
+  });
   const { user, isLoading, error, suspend, unsuspend, revokeSessions } = (0, import_react_admin11.useAdminUser)(
     client,
     selected ?? {}
@@ -1810,7 +1851,35 @@ function UsersScreen({
               disabled: list.isLoading,
               children: "Refresh"
             }
-          )
+          ),
+          !selected ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "fieldset",
+            {
+              style: {
+                display: "flex",
+                gap: 6,
+                border: "none",
+                margin: "0 0 0 auto",
+                padding: 0,
+                minWidth: 0
+              },
+              "aria-label": "Which accounts",
+              children: [false, true].map((d) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": showDeleted === d,
+                  onClick: () => setShowDeleted(d),
+                  style: {
+                    ...showDeleted === d ? styles.buttonPrimary : styles.button,
+                    height: 28
+                  },
+                  children: d ? "Deleted" : "Active"
+                },
+                String(d)
+              ))
+            }
+          ) : null
         ]
       }
     ),
@@ -1924,7 +1993,14 @@ function UsersScreen({
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { style: styles.td, children: new Date(user.createdAt).toLocaleString() })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { ...styles.toolbar, marginTop: 12 }, children: [
+      user.deletedAt ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { ...styles.notice, marginTop: 12 }, role: "status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("strong", { children: [
+          "Deleted on ",
+          new Date(user.deletedAt).toLocaleString(),
+          "."
+        ] }),
+        " The account cannot sign in, and it is erased when the retention purge runs. Its billing records stay."
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { ...styles.toolbar, marginTop: 12 }, children: [
         user.suspended ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
@@ -1965,46 +2041,48 @@ function UsersScreen({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { style: styles.subtitle, children: "Live sessions" }),
-      sessions.sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: styles.muted, children: "None." }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { style: styles.list, children: sessions.sessions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { style: styles.row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.mono, children: s.ipAddress ?? "\u2014" }),
-        " ",
-        (0, import_client.describeLocation)(s.location) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { style: styles.muted, children: [
-          (0, import_client.describeLocation)(s.location),
-          " "
-        ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.muted, children: s.userAgent ?? "" }),
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { style: styles.muted, children: [
-          "since ",
-          new Date(s.createdAt).toLocaleString()
-        ] })
-      ] }, s.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { style: styles.subtitle, children: "Recent sign-ins" }),
-      history.events.length === 0 && !history.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: styles.muted, children: "None recorded." }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { style: styles.list, children: history.events.map((e) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { style: styles.row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Pill, { tone: e.outcome === "success" ? "ok" : "bad", children: e.outcome }),
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.muted, children: e.method }),
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.mono, children: e.ipAddress ?? "\u2014" }),
-        " ",
-        (0, import_client.describeLocation)(e.location) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.muted, children: (0, import_client.describeLocation)(e.location) }) : null,
-        e.location?.proxy || e.location?.hosting ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      !user.deletedAt ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { style: styles.subtitle, children: "Live sessions" }),
+        sessions.sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: styles.muted, children: "None." }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { style: styles.list, children: sessions.sessions.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { style: styles.row, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.mono, children: s.ipAddress ?? "\u2014" }),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Pill, { tone: "warn", children: e.location.proxy ? "proxy/VPN" : "hosting" })
-        ] }) : null,
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.muted, children: new Date(e.createdAt).toLocaleString() })
-      ] }, e.id)) }),
-      history.hasMore && !history.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "button",
-        {
-          type: "button",
-          style: { ...styles.button, marginTop: 8 },
-          onClick: () => void history.loadMore(),
-          children: "Load more"
-        }
-      ) : null
+          (0, import_client.describeLocation)(s.location) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { style: styles.muted, children: [
+            (0, import_client.describeLocation)(s.location),
+            " "
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.muted, children: s.userAgent ?? "" }),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { style: styles.muted, children: [
+            "since ",
+            new Date(s.createdAt).toLocaleString()
+          ] })
+        ] }, s.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { style: styles.subtitle, children: "Recent sign-ins" }),
+        history.events.length === 0 && !history.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { style: styles.muted, children: "None recorded." }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { style: styles.list, children: history.events.map((e) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { style: styles.row, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Pill, { tone: e.outcome === "success" ? "ok" : "bad", children: e.outcome }),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.muted, children: e.method }),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.mono, children: e.ipAddress ?? "\u2014" }),
+          " ",
+          (0, import_client.describeLocation)(e.location) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.muted, children: (0, import_client.describeLocation)(e.location) }) : null,
+          e.location?.proxy || e.location?.hosting ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Pill, { tone: "warn", children: e.location.proxy ? "proxy/VPN" : "hosting" })
+          ] }) : null,
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: styles.muted, children: new Date(e.createdAt).toLocaleString() })
+        ] }, e.id)) }),
+        history.hasMore && !history.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            type: "button",
+            style: { ...styles.button, marginTop: 8 },
+            onClick: () => void history.loadMore(),
+            children: "Load more"
+          }
+        ) : null
+      ] }) : null
     ] }) : null
   ] });
 }
@@ -2277,10 +2355,8 @@ var import_react_admin14 = require("@fonderie/react-admin");
 var import_react8 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function AuditScreen({ client, pageSize = 50 }) {
-  const [draft, setDraft] = (0, import_react8.useState)({ workspaceId: "", type: "", actorId: "" });
-  const [filter, setFilter] = (0, import_react8.useState)(
-    {}
-  );
+  const [draft, setDraft] = (0, import_react8.useState)({ workspaceId: "", type: "", actorId: "", from: "", to: "" });
+  const [filter, setFilter] = (0, import_react8.useState)({});
   const { events, hasMore, isLoading, error, refresh, loadMore } = (0, import_react_admin14.useAdminAudit)(client, {
     ...filter,
     limit: pageSize
@@ -2312,13 +2388,38 @@ function AuditScreen({ client, pageSize = 50 }) {
           setFilter({
             ...draft.workspaceId.trim() ? { workspaceId: draft.workspaceId.trim() } : {},
             ...draft.type.trim() ? { type: draft.type.trim() } : {},
-            ...draft.actorId.trim() ? { actorId: draft.actorId.trim() } : {}
+            ...draft.actorId.trim() ? { actorId: draft.actorId.trim() } : {},
+            // Dates are whole days in the operator's time zone: "to" includes that day.
+            ...draft.from ? { from: /* @__PURE__ */ new Date(`${draft.from}T00:00:00`) } : {},
+            ...draft.to ? { to: /* @__PURE__ */ new Date(`${draft.to}T23:59:59.999`) } : {}
           });
         },
         children: [
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "input",
+            {
+              type: "date",
+              value: draft.from,
+              onChange: (e) => setDraft({ ...draft, from: e.target.value }),
+              style: styles.input,
+              "aria-label": "From date",
+              title: "From (inclusive)"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "input",
+            {
+              type: "date",
+              value: draft.to,
+              onChange: (e) => setDraft({ ...draft, to: e.target.value }),
+              style: styles.input,
+              "aria-label": "To date",
+              title: "To (inclusive)"
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "search", size: 14 }),
             "Filter"
@@ -2443,7 +2544,8 @@ function AdminShell({
   envLabel,
   footer,
   operators = false,
-  currentOperator
+  currentOperator,
+  publicConfigUrl
 }) {
   const narrow = useNarrow();
   const [drawer, setDrawer] = (0, import_react9.useState)(false);
@@ -2525,7 +2627,7 @@ function AdminShell({
       ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuthAdminClient to look up users here." });
       break;
     case "settings":
-      body = !configClient ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      body = !configClient ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && (editing.kind === "config" || editing.kind === "secret") ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "back", size: 14 }),
           "Config & secrets"
@@ -2536,24 +2638,52 @@ function AdminShell({
             client: configClient,
             kind: editing.kind,
             configKey: editing.key,
-            ...environment !== void 0 ? { environment } : {},
-            onSaved: () => setEditing(null)
-          }
+            ...editing.environment !== void 0 ? { environment: editing.environment } : environment !== void 0 ? { environment } : {},
+            ...editing.environments ? { environments: editing.environments } : {},
+            onSaved: () => setEditing(null),
+            onDeleted: () => setEditing(null)
+          },
+          `${editing.kind}:${editing.key}:${editing.environment ?? ""}`
         )
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_react_config_admin_screens.ConfigListScreen,
         {
           client: configClient,
           ...environment !== void 0 ? { environment } : {},
-          onSelectConfig: (key) => setEditing({ kind: "config", key }),
-          onSelectSecret: (key) => setEditing({ kind: "secret", key }),
-          onCreateConfig: () => setEditing({ kind: "config", key: "" }),
-          onCreateSecret: () => setEditing({ kind: "secret", key: "" })
+          ...publicConfigUrl ? { publicConfigUrl } : {},
+          onSelectConfig: (key, env) => setEditing({ kind: "config", key, environment: env }),
+          onSelectSecret: (key, env) => setEditing({ kind: "secret", key, environment: env }),
+          onCreateConfig: (c) => setEditing({
+            kind: "config",
+            key: "",
+            environments: c.environments,
+            ...c.environment ? { environment: c.environment } : {}
+          }),
+          onCreateSecret: (c) => setEditing({
+            kind: "secret",
+            key: "",
+            environments: c.environments,
+            ...c.environment ? { environment: c.environment } : {}
+          })
         }
       );
       break;
     case "templates":
-      body = !courierClient ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      body = !courierClient ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template-new" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "back", size: 14 }),
+          "Templates"
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_react_courier_admin_screens.TemplateCreateScreen,
+          {
+            client: courierClient,
+            ...editing.type ? { type: editing.type } : {},
+            ...editing.locales ? { locales: editing.locales } : {},
+            onCreated: (c) => setEditing({ kind: "template", type: c.type, locale: c.locale, system: false })
+          }
+        )
+      ] }) : editing?.kind === "template" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "back", size: 14 }),
           "Templates"
@@ -2563,14 +2693,25 @@ function AdminShell({
           {
             client: courierClient,
             type: editing.type,
-            onSaved: () => setEditing(null)
-          }
+            locale: editing.locale,
+            system: editing.system,
+            onSaved: () => setEditing(null),
+            onDeleted: () => setEditing(null),
+            onAddLocale: (type) => setEditing({ kind: "template-new", type })
+          },
+          `${editing.type}:${editing.locale ?? ""}`
         )
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_react_courier_admin_screens.TemplateListScreen,
         {
           client: courierClient,
-          onSelectTemplate: (t2) => setEditing({ kind: "template", type: t2.type })
+          onSelectTemplate: (t2) => setEditing({
+            kind: "template",
+            type: t2.type,
+            locale: t2.locale ?? null,
+            system: t2.system === true
+          }),
+          onCreateTemplate: (c) => setEditing({ kind: "template-new", locales: c.locales })
         }
       );
       break;