@fonderie/react-admin-screens 1.4.0 → 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,
@@ -2283,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
@@ -2318,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"
@@ -2449,7 +2513,8 @@ function AdminShell({
   envLabel,
   footer,
   operators = false,
-  currentOperator
+  currentOperator,
+  publicConfigUrl
 }) {
   const narrow = useNarrow();
   const [drawer, setDrawer] = useState9(false);
@@ -2531,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"
@@ -2542,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"
@@ -2569,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;