@fonderie/vue-admin-screens 1.3.1 → 1.5.0

package/dist/index.cjs

@@ -1755,16 +1755,22 @@ function useSubscriptionIndex(client) {
 // src/screens/SubscriberBilling.ts
 var import_vue_admin10 = require("@fonderie/vue-admin");
 var import_vue13 = require("vue");
-var SubscriberBilling = (0, import_vue13.defineComponent)({
-  name: "FonderieSubscriberBilling",
+var SubscriberBillingInner = (0, import_vue13.defineComponent)({
+  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 = (0, import_vue13.computed)(() => ({ type: props.subscriberType, id: props.subscriberId }));
-    const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = (0, import_vue_admin10.useAdminSubscriber)(props.client, subscriber, { limit: 20 });
+    const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = (0, import_vue_admin10.useAdminSubscriber)(props.client, subscriber, {
+      limit: 20,
+      ...props.currency ? { currency: props.currency } : {}
+    });
+    const currencyDraft = (0, import_vue13.ref)(props.currency);
     const amount = (0, import_vue13.ref)("");
     const note = (0, import_vue13.ref)("");
     const granted = (0, import_vue13.ref)(null);
@@ -1805,7 +1811,43 @@ var SubscriberBilling = (0, import_vue13.defineComponent)({
             ) : null
           ]),
           (0, import_vue13.h)("div", { style: styles.card }, [
-            (0, import_vue13.h)("div", { style: styles.statLabel }, "Credits"),
+            (0, import_vue13.h)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  gap: "8px"
+                }
+              },
+              [
+                (0, import_vue13.h)("div", { style: styles.statLabel }, "Credits"),
+                (0, import_vue13.h)(
+                  "form",
+                  {
+                    style: { display: "flex", gap: "4px" },
+                    onSubmit: (e) => {
+                      e.preventDefault();
+                      emit("change-currency", currencyDraft.value.trim().toUpperCase());
+                    }
+                  },
+                  [
+                    (0, import_vue13.h)("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 ? [
               (0, import_vue13.h)("div", { style: styles.statValue }, [
                 `${w.balance} `,
@@ -1902,6 +1944,27 @@ var SubscriberBilling = (0, import_vue13.defineComponent)({
     };
   }
 });
+var SubscriberBilling = (0, import_vue13.defineComponent)({
+  name: "FonderieSubscriberBilling",
+  props: {
+    client: { type: Object, required: true },
+    subscriberType: { type: String, required: true },
+    subscriberId: { type: String, required: true }
+  },
+  setup(props) {
+    const currency = (0, import_vue13.ref)("");
+    return () => (0, import_vue13.h)(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 = (0, import_vue14.defineComponent)({
@@ -1920,7 +1983,9 @@ var UsersScreen = (0, import_vue14.defineComponent)({
     const email = (0, import_vue14.ref)("");
     const selectedId = (0, import_vue14.ref)(props.openUserId ?? "");
     const plans = useSubscriptionIndex(props.billingClient);
-    const list = (0, import_vue_admin11.useAdminUsers)(props.client, { limit: props.pageSize });
+    const showDeleted = (0, import_vue14.ref)(false);
+    const activeList = (0, import_vue_admin11.useAdminUsers)(props.client, { limit: props.pageSize });
+    const deletedList = (0, import_vue_admin11.useAdminUsers)(props.client, { limit: props.pageSize, deleted: true });
     const { user, isLoading, error, suspend, unsuspend, revokeSessions } = (0, import_vue_admin11.useAdminUser)(
       props.client,
       { email, id: selectedId }
@@ -1948,6 +2013,7 @@ var UsersScreen = (0, import_vue14.defineComponent)({
     };
     return () => {
       const u = user.value;
+      const list = showDeleted.value ? deletedList : activeList;
       return (0, import_vue14.h)("div", { style: styles.container }, [
         pageHeader(
           "Users",
@@ -1977,7 +2043,37 @@ var UsersScreen = (0, import_vue14.defineComponent)({
               { 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 ? (0, import_vue14.h)(
+              "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) => (0, import_vue14.h)(
+                  "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 ? (0, import_vue14.h)("div", [
@@ -2057,7 +2153,10 @@ var UsersScreen = (0, import_vue14.defineComponent)({
               row("created", new Date(u.createdAt).toLocaleString())
             ])
           ]),
-          (0, import_vue14.h)("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
+          u.deletedAt ? (0, import_vue14.h)("div", { style: { ...styles.notice, marginTop: "12px" }, role: "status" }, [
+            (0, import_vue14.h)("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."
+          ]) : (0, import_vue14.h)("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
             u.suspended ? actionButton("Unsuspend", isLoading.value, () => void unsuspend()) : actionButton(
               "Suspend",
               isLoading.value,
@@ -2077,46 +2176,60 @@ var UsersScreen = (0, import_vue14.defineComponent)({
             subscriberType: "user",
             subscriberId: u.id
           }) : null,
-          (0, import_vue14.h)("h2", { style: styles.subtitle }, "Live sessions"),
-          sessions.sessions.value.length === 0 ? (0, import_vue14.h)("p", { style: styles.muted }, "None.") : (0, import_vue14.h)(
-            "ul",
-            { style: styles.list },
-            sessions.sessions.value.map(
-              (s) => (0, import_vue14.h)("li", { key: s.id, style: styles.row }, [
-                (0, import_vue14.h)("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
-                " ",
-                (0, import_vue14.h)("span", { style: styles.muted }, (0, import_client.describeLocation)(s.location) ?? ""),
-                " ",
-                (0, import_vue14.h)("span", { style: styles.muted }, s.userAgent ?? ""),
-                " ",
-                (0, import_vue14.h)(
-                  "span",
-                  { style: styles.muted },
-                  `since ${new Date(s.createdAt).toLocaleString()}`
-                )
-              ])
-            )
-          ),
-          (0, import_vue14.h)("h2", { style: styles.subtitle }, "Recent sign-ins"),
-          history.events.value.length === 0 && !history.isLoading.value ? (0, import_vue14.h)("p", { style: styles.muted }, "None recorded.") : (0, import_vue14.h)(
-            "ul",
-            { style: styles.list },
-            history.events.value.map(
-              (e) => (0, import_vue14.h)("li", { key: e.id, style: styles.row }, [
-                pill(e.outcome === "success" ? "ok" : "bad", e.outcome),
-                " ",
-                (0, import_vue14.h)("span", { style: styles.muted }, e.method),
-                " ",
-                (0, import_vue14.h)("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
-                " ",
-                (0, import_vue14.h)("span", { style: styles.muted }, (0, import_client.describeLocation)(e.location) ?? ""),
-                e.location?.proxy || e.location?.hosting ? [" ", pill("warn", e.location.proxy ? "proxy/VPN" : "hosting")] : "",
-                " ",
-                (0, import_vue14.h)("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
-              ])
-            )
-          ),
-          history.hasMore.value && !history.isLoading.value ? loadMoreButton(() => void history.loadMore()) : null
+          u.deletedAt ? null : [
+            (0, import_vue14.h)("h2", { style: styles.subtitle }, "Live sessions"),
+            sessions.sessions.value.length === 0 ? (0, import_vue14.h)("p", { style: styles.muted }, "None.") : (0, import_vue14.h)(
+              "ul",
+              { style: styles.list },
+              sessions.sessions.value.map(
+                (s) => (0, import_vue14.h)("li", { key: s.id, style: styles.row }, [
+                  (0, import_vue14.h)("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
+                  " ",
+                  (0, import_vue14.h)(
+                    "span",
+                    { style: styles.muted },
+                    (0, import_client.describeLocation)(s.location) ?? ""
+                  ),
+                  " ",
+                  (0, import_vue14.h)("span", { style: styles.muted }, s.userAgent ?? ""),
+                  " ",
+                  (0, import_vue14.h)(
+                    "span",
+                    { style: styles.muted },
+                    `since ${new Date(s.createdAt).toLocaleString()}`
+                  )
+                ])
+              )
+            ),
+            (0, import_vue14.h)("h2", { style: styles.subtitle }, "Recent sign-ins"),
+            history.events.value.length === 0 && !history.isLoading.value ? (0, import_vue14.h)("p", { style: styles.muted }, "None recorded.") : (0, import_vue14.h)(
+              "ul",
+              { style: styles.list },
+              history.events.value.map(
+                (e) => (0, import_vue14.h)("li", { key: e.id, style: styles.row }, [
+                  pill(e.outcome === "success" ? "ok" : "bad", e.outcome),
+                  " ",
+                  (0, import_vue14.h)("span", { style: styles.muted }, e.method),
+                  " ",
+                  (0, import_vue14.h)("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
+                  " ",
+                  (0, import_vue14.h)(
+                    "span",
+                    { style: styles.muted },
+                    (0, import_client.describeLocation)(e.location) ?? ""
+                  ),
+                  e.location?.proxy || e.location?.hosting ? [" ", pill("warn", e.location.proxy ? "proxy/VPN" : "hosting")] : "",
+                  " ",
+                  (0, import_vue14.h)(
+                    "span",
+                    { style: styles.muted },
+                    new Date(e.createdAt).toLocaleString()
+                  )
+                ])
+              )
+            ),
+            history.hasMore.value && !history.isLoading.value ? loadMoreButton(() => void history.loadMore()) : null
+          ]
         ] : null
       ]);
     };
@@ -2381,7 +2494,7 @@ var AuditScreen = (0, import_vue17.defineComponent)({
     pageSize: { type: Number, default: 50 }
   },
   setup(props) {
-    const draft = (0, import_vue17.ref)({ workspaceId: "", type: "", actorId: "" });
+    const draft = (0, import_vue17.ref)({ workspaceId: "", type: "", actorId: "", from: "", to: "" });
     const query = (0, import_vue17.ref)({ limit: props.pageSize });
     const { events, hasMore, isLoading, error, refresh, loadMore } = (0, import_vue_admin14.useAdminAudit)(
       props.client,
@@ -2410,7 +2523,10 @@ var AuditScreen = (0, import_vue17.defineComponent)({
               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`) } : {}
             };
           }
         },
@@ -2418,6 +2534,16 @@ var AuditScreen = (0, import_vue17.defineComponent)({
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
+          ...["from", "to"].map(
+            (k) => (0, import_vue17.h)("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)"
+            })
+          ),
           (0, import_vue17.h)(
             "button",
             { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
@@ -2523,7 +2649,10 @@ var AdminShell = (0, import_vue18.defineComponent)({
     // 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.
@@ -2602,43 +2731,83 @@ var AdminShell = (0, import_vue18.defineComponent)({
           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"),
               (0, import_vue18.h)(import_vue_config_admin_screens.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 (0, import_vue18.h)(import_vue_config_admin_screens.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"),
+              (0, import_vue18.h)(import_vue_courier_admin_screens.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"),
               (0, import_vue18.h)(import_vue_courier_admin_screens.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 (0, import_vue18.h)(import_vue_courier_admin_screens.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 }
           });
         }
       }