@fonderie/react-admin-screens 1.3.1 → 1.5.0

package/dist/index.d.cts

@@ -18,8 +18,9 @@ interface IAdminShellProps {
     footer?: ReactNode;
     operators?: boolean;
     currentOperator?: string;
+    publicConfigUrl?: string;
 }
-declare function AdminShell({ client, configClient, courierClient, authClient, billingClient, auditClient, environment, page, onNavigate, appName, envLabel, footer, operators, currentOperator, }: IAdminShellProps): react.JSX.Element;
+declare function AdminShell({ client, configClient, courierClient, authClient, billingClient, auditClient, environment, page, onNavigate, appName, envLabel, footer, operators, currentOperator, publicConfigUrl, }: IAdminShellProps): react.JSX.Element;
 
 interface IAttentionScreenProps {
     client: AdminClient;

package/dist/index.d.ts

@@ -18,8 +18,9 @@ interface IAdminShellProps {
     footer?: ReactNode;
     operators?: boolean;
     currentOperator?: string;
+    publicConfigUrl?: string;
 }
-declare function AdminShell({ client, configClient, courierClient, authClient, billingClient, auditClient, environment, page, onNavigate, appName, envLabel, footer, operators, currentOperator, }: IAdminShellProps): react.JSX.Element;
+declare function AdminShell({ client, configClient, courierClient, authClient, billingClient, auditClient, environment, page, onNavigate, appName, envLabel, footer, operators, currentOperator, publicConfigUrl, }: IAdminShellProps): react.JSX.Element;
 
 interface IAttentionScreenProps {
     client: AdminClient;

package/dist/index.js

@@ -1,6 +1,10 @@
 // src/screens/AdminShell.tsx
 import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/react-config-admin-screens";
-import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/react-courier-admin-screens";
+import {
+  TemplateCreateScreen,
+  TemplateEditorScreen,
+  TemplateListScreen
+} from "@fonderie/react-courier-admin-screens";
 import { useEffect as useEffect2, useState as useState9 } from "react";
 
 // src/styles.ts
@@ -1554,7 +1558,9 @@ import { useAdminSubscriber } from "@fonderie/react-admin";
 import { useState as useState5 } from "react";
 import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function SubscriberBilling({ client, subscriber }) {
-  const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(client, subscriber, { limit: 20 });
+  const [currency, setCurrency] = useState5("");
+  const [currencyDraft, setCurrencyDraft] = useState5("");
+  const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(client, subscriber, { limit: 20, ...currency ? { currency } : {} });
   const [amount, setAmount] = useState5("");
   const [note, setNote] = useState5("");
   const [granted, setGranted] = useState5(null);
@@ -1595,7 +1601,42 @@ function SubscriberBilling({ client, subscriber }) {
         subscription?.providerSubscriptionId ? /* @__PURE__ */ jsx11("div", { style: { ...styles.statHint, fontFamily: "var(--fonderie-mono,monospace)" }, children: subscription.providerSubscriptionId }) : null
       ] }),
       /* @__PURE__ */ jsxs11("div", { style: styles.card, children: [
-        /* @__PURE__ */ jsx11("div", { style: styles.statLabel, children: "Credits" }),
+        /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx11("div", { style: styles.statLabel, children: "Credits" }),
+              /* @__PURE__ */ jsx11(
+                "form",
+                {
+                  style: { display: "flex", gap: 4 },
+                  onSubmit: (e) => {
+                    e.preventDefault();
+                    setCurrency(currencyDraft.trim().toUpperCase());
+                  },
+                  children: /* @__PURE__ */ jsx11(
+                    "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__ */ jsxs11(Fragment6, { children: [
           /* @__PURE__ */ jsxs11("div", { style: styles.statValue, children: [
             wallet.balance,
@@ -1717,7 +1758,11 @@ function UsersScreen({
     openUserId ? { id: openUserId } : null
   );
   const plans = useSubscriptionIndex(billingClient);
-  const list = useAdminUsers(client, { limit: pageSize });
+  const [showDeleted, setShowDeleted] = useState6(false);
+  const list = useAdminUsers(client, {
+    limit: pageSize,
+    ...showDeleted ? { deleted: true } : {}
+  });
   const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
     client,
     selected ?? {}
@@ -1775,7 +1820,35 @@ function UsersScreen({
               disabled: list.isLoading,
               children: "Refresh"
             }
-          )
+          ),
+          !selected ? /* @__PURE__ */ jsx12(
+            "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__ */ jsx12(
+                "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
         ]
       }
     ),
@@ -1889,7 +1962,14 @@ function UsersScreen({
           /* @__PURE__ */ jsx12("td", { style: styles.td, children: new Date(user.createdAt).toLocaleString() })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs12("div", { style: { ...styles.toolbar, marginTop: 12 }, children: [
+      user.deletedAt ? /* @__PURE__ */ jsxs12("div", { style: { ...styles.notice, marginTop: 12 }, role: "status", children: [
+        /* @__PURE__ */ jsxs12("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__ */ jsxs12("div", { style: { ...styles.toolbar, marginTop: 12 }, children: [
         user.suspended ? /* @__PURE__ */ jsx12(
           "button",
           {
@@ -1930,46 +2010,48 @@ function UsersScreen({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Live sessions" }),
-      sessions.sessions.length === 0 ? /* @__PURE__ */ jsx12("p", { style: styles.muted, children: "None." }) : /* @__PURE__ */ jsx12("ul", { style: styles.list, children: sessions.sessions.map((s) => /* @__PURE__ */ jsxs12("li", { style: styles.row, children: [
-        /* @__PURE__ */ jsx12("span", { style: styles.mono, children: s.ipAddress ?? "\u2014" }),
-        " ",
-        describeLocation(s.location) ? /* @__PURE__ */ jsxs12("span", { style: styles.muted, children: [
-          describeLocation(s.location),
-          " "
-        ] }) : null,
-        /* @__PURE__ */ jsx12("span", { style: styles.muted, children: s.userAgent ?? "" }),
-        " ",
-        /* @__PURE__ */ jsxs12("span", { style: styles.muted, children: [
-          "since ",
-          new Date(s.createdAt).toLocaleString()
-        ] })
-      ] }, s.id)) }),
-      /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Recent sign-ins" }),
-      history.events.length === 0 && !history.isLoading ? /* @__PURE__ */ jsx12("p", { style: styles.muted, children: "None recorded." }) : /* @__PURE__ */ jsx12("ul", { style: styles.list, children: history.events.map((e) => /* @__PURE__ */ jsxs12("li", { style: styles.row, children: [
-        /* @__PURE__ */ jsx12(Pill, { tone: e.outcome === "success" ? "ok" : "bad", children: e.outcome }),
-        " ",
-        /* @__PURE__ */ jsx12("span", { style: styles.muted, children: e.method }),
-        " ",
-        /* @__PURE__ */ jsx12("span", { style: styles.mono, children: e.ipAddress ?? "\u2014" }),
-        " ",
-        describeLocation(e.location) ? /* @__PURE__ */ jsx12("span", { style: styles.muted, children: describeLocation(e.location) }) : null,
-        e.location?.proxy || e.location?.hosting ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+      !user.deletedAt ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+        /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Live sessions" }),
+        sessions.sessions.length === 0 ? /* @__PURE__ */ jsx12("p", { style: styles.muted, children: "None." }) : /* @__PURE__ */ jsx12("ul", { style: styles.list, children: sessions.sessions.map((s) => /* @__PURE__ */ jsxs12("li", { style: styles.row, children: [
+          /* @__PURE__ */ jsx12("span", { style: styles.mono, children: s.ipAddress ?? "\u2014" }),
           " ",
-          /* @__PURE__ */ jsx12(Pill, { tone: "warn", children: e.location.proxy ? "proxy/VPN" : "hosting" })
-        ] }) : null,
-        " ",
-        /* @__PURE__ */ jsx12("span", { style: styles.muted, children: new Date(e.createdAt).toLocaleString() })
-      ] }, e.id)) }),
-      history.hasMore && !history.isLoading ? /* @__PURE__ */ jsx12(
-        "button",
-        {
-          type: "button",
-          style: { ...styles.button, marginTop: 8 },
-          onClick: () => void history.loadMore(),
-          children: "Load more"
-        }
-      ) : null
+          describeLocation(s.location) ? /* @__PURE__ */ jsxs12("span", { style: styles.muted, children: [
+            describeLocation(s.location),
+            " "
+          ] }) : null,
+          /* @__PURE__ */ jsx12("span", { style: styles.muted, children: s.userAgent ?? "" }),
+          " ",
+          /* @__PURE__ */ jsxs12("span", { style: styles.muted, children: [
+            "since ",
+            new Date(s.createdAt).toLocaleString()
+          ] })
+        ] }, s.id)) }),
+        /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Recent sign-ins" }),
+        history.events.length === 0 && !history.isLoading ? /* @__PURE__ */ jsx12("p", { style: styles.muted, children: "None recorded." }) : /* @__PURE__ */ jsx12("ul", { style: styles.list, children: history.events.map((e) => /* @__PURE__ */ jsxs12("li", { style: styles.row, children: [
+          /* @__PURE__ */ jsx12(Pill, { tone: e.outcome === "success" ? "ok" : "bad", children: e.outcome }),
+          " ",
+          /* @__PURE__ */ jsx12("span", { style: styles.muted, children: e.method }),
+          " ",
+          /* @__PURE__ */ jsx12("span", { style: styles.mono, children: e.ipAddress ?? "\u2014" }),
+          " ",
+          describeLocation(e.location) ? /* @__PURE__ */ jsx12("span", { style: styles.muted, children: describeLocation(e.location) }) : null,
+          e.location?.proxy || e.location?.hosting ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+            " ",
+            /* @__PURE__ */ jsx12(Pill, { tone: "warn", children: e.location.proxy ? "proxy/VPN" : "hosting" })
+          ] }) : null,
+          " ",
+          /* @__PURE__ */ jsx12("span", { style: styles.muted, children: new Date(e.createdAt).toLocaleString() })
+        ] }, e.id)) }),
+        history.hasMore && !history.isLoading ? /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            style: { ...styles.button, marginTop: 8 },
+            onClick: () => void history.loadMore(),
+            children: "Load more"
+          }
+        ) : null
+      ] }) : null
     ] }) : null
   ] });
 }
@@ -2242,10 +2324,8 @@ import { useAdminAudit } from "@fonderie/react-admin";
 import { useState as useState8 } from "react";
 import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 function AuditScreen({ client, pageSize = 50 }) {
-  const [draft, setDraft] = useState8({ workspaceId: "", type: "", actorId: "" });
-  const [filter, setFilter] = useState8(
-    {}
-  );
+  const [draft, setDraft] = useState8({ workspaceId: "", type: "", actorId: "", from: "", to: "" });
+  const [filter, setFilter] = useState8({});
   const { events, hasMore, isLoading, error, refresh, loadMore } = useAdminAudit(client, {
     ...filter,
     limit: pageSize
@@ -2277,13 +2357,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__ */ jsx15(
+            "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__ */ jsx15(
+            "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__ */ jsxs15("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
             /* @__PURE__ */ jsx15(Icon, { name: "search", size: 14 }),
             "Filter"
@@ -2408,7 +2513,8 @@ function AdminShell({
   envLabel,
   footer,
   operators = false,
-  currentOperator
+  currentOperator,
+  publicConfigUrl
 }) {
   const narrow = useNarrow();
   const [drawer, setDrawer] = useState9(false);
@@ -2490,7 +2596,7 @@ function AdminShell({
       ) : /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuthAdminClient to look up users here." });
       break;
     case "settings":
-      body = !configClient ? /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ jsxs16(Fragment10, { children: [
+      body = !configClient ? /* @__PURE__ */ jsx16("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__ */ jsxs16(Fragment10, { children: [
         /* @__PURE__ */ jsx16("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs16("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
           /* @__PURE__ */ jsx16(Icon, { name: "back", size: 14 }),
           "Config & secrets"
@@ -2501,24 +2607,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__ */ jsx16(
         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__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ jsxs16(Fragment10, { children: [
+      body = !courierClient ? /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template-new" ? /* @__PURE__ */ jsxs16(Fragment10, { children: [
+        /* @__PURE__ */ jsx16("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs16("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
+          /* @__PURE__ */ jsx16(Icon, { name: "back", size: 14 }),
+          "Templates"
+        ] }) }),
+        /* @__PURE__ */ jsx16(
+          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__ */ jsxs16(Fragment10, { children: [
         /* @__PURE__ */ jsx16("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs16("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
           /* @__PURE__ */ jsx16(Icon, { name: "back", size: 14 }),
           "Templates"
@@ -2528,14 +2662,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__ */ jsx16(
         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;