@fonderie/vue-admin-screens 1.4.0 → 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({
@@ -2396,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,
@@ -2425,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`) } : {}
             };
           }
         },
@@ -2433,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 },
@@ -2538,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.
@@ -2617,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 }
           });
         }
       }