@fonderie/vue-admin-screens 1.3.1 → 1.5.0

package/dist/index.d.cts

@@ -52,6 +52,10 @@ declare const AdminShell: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: undefined;
     };
+    publicConfigUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -105,6 +109,10 @@ declare const AdminShell: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: undefined;
     };
+    publicConfigUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{
     onNavigate?: (_page: AdminPage) => any;
 }>, {
@@ -119,6 +127,7 @@ declare const AdminShell: vue.DefineComponent<vue.ExtractPropTypes<{
     appName: string;
     envLabel: string;
     currentOperator: string;
+    publicConfigUrl: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const AttentionScreen: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.d.ts

@@ -52,6 +52,10 @@ declare const AdminShell: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: undefined;
     };
+    publicConfigUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -105,6 +109,10 @@ declare const AdminShell: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: undefined;
     };
+    publicConfigUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{
     onNavigate?: (_page: AdminPage) => any;
 }>, {
@@ -119,6 +127,7 @@ declare const AdminShell: vue.DefineComponent<vue.ExtractPropTypes<{
     appName: string;
     envLabel: string;
     currentOperator: string;
+    publicConfigUrl: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const AttentionScreen: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.js

@@ -1,6 +1,10 @@
 // src/screens/AdminShell.ts
 import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/vue-config-admin-screens";
-import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/vue-courier-admin-screens";
+import {
+  TemplateCreateScreen,
+  TemplateEditorScreen,
+  TemplateListScreen
+} from "@fonderie/vue-courier-admin-screens";
 import { computed as computed3, defineComponent as defineComponent15, h as h17, onBeforeUnmount, onMounted, ref as ref9 } from "vue";
 
 // src/styles.ts
@@ -1720,16 +1724,22 @@ function useSubscriptionIndex(client) {
 // src/screens/SubscriberBilling.ts
 import { useAdminSubscriber } from "@fonderie/vue-admin";
 import { computed, defineComponent as defineComponent10, h as h12, ref as ref5 } from "vue";
-var SubscriberBilling = defineComponent10({
-  name: "FonderieSubscriberBilling",
+var SubscriberBillingInner = defineComponent10({
+  name: "FonderieSubscriberBillingInner",
   props: {
     client: { type: Object, required: true },
     subscriberType: { type: String, required: true },
-    subscriberId: { type: String, required: true }
+    subscriberId: { type: String, required: true },
+    currency: { type: String, default: "" }
   },
-  setup(props) {
+  emits: { "change-currency": (_currency) => true },
+  setup(props, { emit }) {
     const subscriber = computed(() => ({ type: props.subscriberType, id: props.subscriberId }));
-    const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(props.client, subscriber, { limit: 20 });
+    const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(props.client, subscriber, {
+      limit: 20,
+      ...props.currency ? { currency: props.currency } : {}
+    });
+    const currencyDraft = ref5(props.currency);
     const amount = ref5("");
     const note = ref5("");
     const granted = ref5(null);
@@ -1770,7 +1780,43 @@ var SubscriberBilling = defineComponent10({
             ) : null
           ]),
           h12("div", { style: styles.card }, [
-            h12("div", { style: styles.statLabel }, "Credits"),
+            h12(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  gap: "8px"
+                }
+              },
+              [
+                h12("div", { style: styles.statLabel }, "Credits"),
+                h12(
+                  "form",
+                  {
+                    style: { display: "flex", gap: "4px" },
+                    onSubmit: (e) => {
+                      e.preventDefault();
+                      emit("change-currency", currencyDraft.value.trim().toUpperCase());
+                    }
+                  },
+                  [
+                    h12("input", {
+                      value: currencyDraft.value,
+                      onInput: (e) => {
+                        currencyDraft.value = e.target.value;
+                      },
+                      placeholder: w?.currency ?? "currency",
+                      maxlength: 8,
+                      style: { ...styles.input, height: "26px", width: "84px", fontSize: "12px" },
+                      "aria-label": "Wallet currency",
+                      title: "Show the wallet in another currency"
+                    })
+                  ]
+                )
+              ]
+            ),
             ...w ? [
               h12("div", { style: styles.statValue }, [
                 `${w.balance} `,
@@ -1867,6 +1913,27 @@ var SubscriberBilling = defineComponent10({
     };
   }
 });
+var SubscriberBilling = defineComponent10({
+  name: "FonderieSubscriberBilling",
+  props: {
+    client: { type: Object, required: true },
+    subscriberType: { type: String, required: true },
+    subscriberId: { type: String, required: true }
+  },
+  setup(props) {
+    const currency = ref5("");
+    return () => h12(SubscriberBillingInner, {
+      key: `${props.subscriberType}:${props.subscriberId}:${currency.value}`,
+      client: props.client,
+      subscriberType: props.subscriberType,
+      subscriberId: props.subscriberId,
+      currency: currency.value,
+      "onChange-currency": (c) => {
+        currency.value = c;
+      }
+    });
+  }
+});
 
 // src/screens/UsersScreen.ts
 var UsersScreen = defineComponent11({
@@ -1885,7 +1952,9 @@ var UsersScreen = defineComponent11({
     const email = ref6("");
     const selectedId = ref6(props.openUserId ?? "");
     const plans = useSubscriptionIndex(props.billingClient);
-    const list = useAdminUsers(props.client, { limit: props.pageSize });
+    const showDeleted = ref6(false);
+    const activeList = useAdminUsers(props.client, { limit: props.pageSize });
+    const deletedList = useAdminUsers(props.client, { limit: props.pageSize, deleted: true });
     const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
       props.client,
       { email, id: selectedId }
@@ -1913,6 +1982,7 @@ var UsersScreen = defineComponent11({
     };
     return () => {
       const u = user.value;
+      const list = showDeleted.value ? deletedList : activeList;
       return h13("div", { style: styles.container }, [
         pageHeader(
           "Users",
@@ -1942,7 +2012,37 @@ var UsersScreen = defineComponent11({
               { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
               [icon("search", 14), "Look up"]
             ),
-            showList.value ? refreshButton2("Refresh", list.isLoading.value, () => void list.refresh()) : actionButton([icon("back", 14), "All users"], false, clear, styles.buttonGhost)
+            showList.value ? refreshButton2("Refresh", list.isLoading.value, () => void list.refresh()) : actionButton([icon("back", 14), "All users"], false, clear, styles.buttonGhost),
+            showList.value ? h13(
+              "fieldset",
+              {
+                style: {
+                  display: "flex",
+                  gap: "6px",
+                  border: "none",
+                  margin: "0 0 0 auto",
+                  padding: "0",
+                  minWidth: "0"
+                },
+                "aria-label": "Which accounts"
+              },
+              [false, true].map(
+                (d) => h13(
+                  "button",
+                  {
+                    key: String(d),
+                    type: "button",
+                    "aria-pressed": showDeleted.value === d,
+                    onClick: () => showDeleted.value = d,
+                    style: {
+                      ...showDeleted.value === d ? styles.buttonPrimary : styles.button,
+                      height: "28px"
+                    }
+                  },
+                  d ? "Deleted" : "Active"
+                )
+              )
+            ) : null
           ]
         ),
         showList.value ? h13("div", [
@@ -2022,7 +2122,10 @@ var UsersScreen = defineComponent11({
               row("created", new Date(u.createdAt).toLocaleString())
             ])
           ]),
-          h13("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
+          u.deletedAt ? h13("div", { style: { ...styles.notice, marginTop: "12px" }, role: "status" }, [
+            h13("strong", `Deleted on ${new Date(u.deletedAt).toLocaleString()}.`),
+            " The account cannot sign in, and it is erased when the retention purge runs. Its billing records stay."
+          ]) : h13("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
             u.suspended ? actionButton("Unsuspend", isLoading.value, () => void unsuspend()) : actionButton(
               "Suspend",
               isLoading.value,
@@ -2042,46 +2145,60 @@ var UsersScreen = defineComponent11({
             subscriberType: "user",
             subscriberId: u.id
           }) : null,
-          h13("h2", { style: styles.subtitle }, "Live sessions"),
-          sessions.sessions.value.length === 0 ? h13("p", { style: styles.muted }, "None.") : h13(
-            "ul",
-            { style: styles.list },
-            sessions.sessions.value.map(
-              (s) => h13("li", { key: s.id, style: styles.row }, [
-                h13("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
-                " ",
-                h13("span", { style: styles.muted }, describeLocation(s.location) ?? ""),
-                " ",
-                h13("span", { style: styles.muted }, s.userAgent ?? ""),
-                " ",
-                h13(
-                  "span",
-                  { style: styles.muted },
-                  `since ${new Date(s.createdAt).toLocaleString()}`
-                )
-              ])
-            )
-          ),
-          h13("h2", { style: styles.subtitle }, "Recent sign-ins"),
-          history.events.value.length === 0 && !history.isLoading.value ? h13("p", { style: styles.muted }, "None recorded.") : h13(
-            "ul",
-            { style: styles.list },
-            history.events.value.map(
-              (e) => h13("li", { key: e.id, style: styles.row }, [
-                pill(e.outcome === "success" ? "ok" : "bad", e.outcome),
-                " ",
-                h13("span", { style: styles.muted }, e.method),
-                " ",
-                h13("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
-                " ",
-                h13("span", { style: styles.muted }, describeLocation(e.location) ?? ""),
-                e.location?.proxy || e.location?.hosting ? [" ", pill("warn", e.location.proxy ? "proxy/VPN" : "hosting")] : "",
-                " ",
-                h13("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
-              ])
-            )
-          ),
-          history.hasMore.value && !history.isLoading.value ? loadMoreButton(() => void history.loadMore()) : null
+          u.deletedAt ? null : [
+            h13("h2", { style: styles.subtitle }, "Live sessions"),
+            sessions.sessions.value.length === 0 ? h13("p", { style: styles.muted }, "None.") : h13(
+              "ul",
+              { style: styles.list },
+              sessions.sessions.value.map(
+                (s) => h13("li", { key: s.id, style: styles.row }, [
+                  h13("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
+                  " ",
+                  h13(
+                    "span",
+                    { style: styles.muted },
+                    describeLocation(s.location) ?? ""
+                  ),
+                  " ",
+                  h13("span", { style: styles.muted }, s.userAgent ?? ""),
+                  " ",
+                  h13(
+                    "span",
+                    { style: styles.muted },
+                    `since ${new Date(s.createdAt).toLocaleString()}`
+                  )
+                ])
+              )
+            ),
+            h13("h2", { style: styles.subtitle }, "Recent sign-ins"),
+            history.events.value.length === 0 && !history.isLoading.value ? h13("p", { style: styles.muted }, "None recorded.") : h13(
+              "ul",
+              { style: styles.list },
+              history.events.value.map(
+                (e) => h13("li", { key: e.id, style: styles.row }, [
+                  pill(e.outcome === "success" ? "ok" : "bad", e.outcome),
+                  " ",
+                  h13("span", { style: styles.muted }, e.method),
+                  " ",
+                  h13("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
+                  " ",
+                  h13(
+                    "span",
+                    { style: styles.muted },
+                    describeLocation(e.location) ?? ""
+                  ),
+                  e.location?.proxy || e.location?.hosting ? [" ", pill("warn", e.location.proxy ? "proxy/VPN" : "hosting")] : "",
+                  " ",
+                  h13(
+                    "span",
+                    { style: styles.muted },
+                    new Date(e.createdAt).toLocaleString()
+                  )
+                ])
+              )
+            ),
+            history.hasMore.value && !history.isLoading.value ? loadMoreButton(() => void history.loadMore()) : null
+          ]
         ] : null
       ]);
     };
@@ -2346,7 +2463,7 @@ var AuditScreen = defineComponent14({
     pageSize: { type: Number, default: 50 }
   },
   setup(props) {
-    const draft = ref8({ workspaceId: "", type: "", actorId: "" });
+    const draft = ref8({ workspaceId: "", type: "", actorId: "", from: "", to: "" });
     const query = ref8({ limit: props.pageSize });
     const { events, hasMore, isLoading, error, refresh, loadMore } = useAdminAudit(
       props.client,
@@ -2375,7 +2492,10 @@ var AuditScreen = defineComponent14({
               limit: props.pageSize,
               ...d.workspaceId.trim() ? { workspaceId: d.workspaceId.trim() } : {},
               ...d.type.trim() ? { type: d.type.trim() } : {},
-              ...d.actorId.trim() ? { actorId: d.actorId.trim() } : {}
+              ...d.actorId.trim() ? { actorId: d.actorId.trim() } : {},
+              // Dates are whole days in the operator's time zone: "to" includes that day.
+              ...d.from ? { from: /* @__PURE__ */ new Date(`${d.from}T00:00:00`) } : {},
+              ...d.to ? { to: /* @__PURE__ */ new Date(`${d.to}T23:59:59.999`) } : {}
             };
           }
         },
@@ -2383,6 +2503,16 @@ var AuditScreen = defineComponent14({
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
+          ...["from", "to"].map(
+            (k) => h16("input", {
+              type: "date",
+              value: draft.value[k],
+              onInput: (e) => draft.value = { ...draft.value, [k]: e.target.value },
+              style: styles.input,
+              "aria-label": k === "from" ? "From date" : "To date",
+              title: k === "from" ? "From (inclusive)" : "To (inclusive)"
+            })
+          ),
           h16(
             "button",
             { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
@@ -2488,7 +2618,10 @@ var AdminShell = defineComponent15({
     // shows the Operators page.
     operators: { type: Boolean, default: false },
     // The signed-in operator's email, when a person (not a token) is signed in.
-    currentOperator: { type: String, default: void 0 }
+    currentOperator: { type: String, default: void 0 },
+    // Where the app serves GET /config/public — marks public keys on the
+    // Config page and previews exactly what frontends receive.
+    publicConfigUrl: { type: String, default: void 0 }
   },
   // `footer` slot: pinned to the bottom of the sidebar — session controls
   // (theme, sign out). The React shell takes the same thing as a `footer` prop.
@@ -2567,43 +2700,83 @@ var AdminShell = defineComponent15({
           const cc = props.configClient;
           if (!cc) return missing("Pass a ConfigAdminClient to manage config and secrets here.");
           const e = editing.value;
-          if (e && e.kind !== "template")
+          if (e && (e.kind === "config" || e.kind === "secret")) {
+            const env = e.environment ?? props.environment;
             return [
               back("Config & secrets"),
               h17(ConfigEditorScreen, {
+                key: `${e.kind}:${e.key}:${e.environment ?? ""}`,
                 client: cc,
                 kind: e.kind,
                 configKey: e.key,
-                ...props.environment !== void 0 ? { environment: props.environment } : {},
-                onSaved: () => editing.value = null
+                ...env !== void 0 ? { environment: env } : {},
+                ...e.environments ? { environments: e.environments } : {},
+                onSaved: () => editing.value = null,
+                onDeleted: () => editing.value = null
               })
             ];
+          }
+          const create = (kind) => (c2) => editing.value = {
+            kind,
+            key: "",
+            environments: c2.environments,
+            ...c2.environment ? { environment: c2.environment } : {}
+          };
           return h17(ConfigListScreen, {
             client: cc,
             ...props.environment !== void 0 ? { environment: props.environment } : {},
-            "onSelect-config": (key) => editing.value = { kind: "config", key },
-            "onSelect-secret": (key) => editing.value = { kind: "secret", key },
+            ...props.publicConfigUrl ? { publicConfigUrl: props.publicConfigUrl } : {},
+            "onSelect-config": (key, environment) => editing.value = { kind: "config", key, environment },
+            "onSelect-secret": (key, environment) => editing.value = { kind: "secret", key, environment },
             allowCreate: true,
-            "onCreate-config": () => editing.value = { kind: "config", key: "" },
-            "onCreate-secret": () => editing.value = { kind: "secret", key: "" }
+            "onCreate-config": create("config"),
+            "onCreate-secret": create("secret")
           });
         }
         case "templates": {
           const kc = props.courierClient;
           if (!kc) return missing("Pass a CourierAdminClient to manage templates here.");
           const e = editing.value;
+          if (e?.kind === "template-new")
+            return [
+              back("Templates"),
+              h17(TemplateCreateScreen, {
+                client: kc,
+                ...e.type ? { type: e.type } : {},
+                ...e.locales ? { locales: e.locales } : {},
+                onCreated: (c2) => editing.value = {
+                  kind: "template",
+                  type: c2.type,
+                  locale: c2.locale,
+                  system: false
+                }
+              })
+            ];
           if (e?.kind === "template")
             return [
               back("Templates"),
               h17(TemplateEditorScreen, {
+                key: `${e.type}:${e.locale ?? ""}`,
                 client: kc,
                 type: e.type,
-                onSaved: () => editing.value = null
+                locale: e.locale,
+                system: e.system,
+                allowAddLocale: true,
+                onSaved: () => editing.value = null,
+                onDeleted: () => editing.value = null,
+                "onAdd-locale": (type) => editing.value = { kind: "template-new", type }
               })
             ];
           return h17(TemplateListScreen, {
             client: kc,
-            "onSelect-template": (t2) => editing.value = { kind: "template", type: t2.type }
+            allowCreate: true,
+            "onSelect-template": (t2) => editing.value = {
+              kind: "template",
+              type: t2.type,
+              locale: t2.locale ?? null,
+              system: t2.system === true
+            },
+            "onCreate-template": (c2) => editing.value = { kind: "template-new", locales: c2.locales }
           });
         }
       }