@fonderie/vue-admin-screens 0.1.0

package/dist/index.js

@@ -0,0 +1,593 @@
+// src/screens/AdminShell.ts
+import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/vue-config-admin-screens";
+import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/vue-courier-admin-screens";
+import { computed, defineComponent as defineComponent8, h as h9, ref } from "vue";
+
+// src/styles.ts
+var styles = {
+  shell: {
+    display: "flex",
+    minHeight: "100vh",
+    fontFamily: "system-ui, sans-serif",
+    color: "#111"
+  },
+  nav: { width: "220px", borderRight: "1px solid #eee", padding: "16px", flexShrink: 0 },
+  navGroup: {
+    fontSize: "11px",
+    textTransform: "uppercase",
+    letterSpacing: "0.6px",
+    color: "#888",
+    margin: "16px 0 6px"
+  },
+  navItem: {
+    display: "block",
+    width: "100%",
+    textAlign: "left",
+    background: "none",
+    border: "none",
+    borderRadius: "6px",
+    padding: "6px 8px",
+    cursor: "pointer",
+    fontSize: "14px",
+    color: "#111"
+  },
+  navItemActive: { background: "#f3f4f6", fontWeight: 600 },
+  main: { flex: 1, padding: "24px", maxWidth: "960px" },
+  container: { padding: "24px", maxWidth: "960px" },
+  title: { fontSize: "20px", fontWeight: 700, marginTop: 0, marginBottom: "12px" },
+  subtitle: { fontSize: "15px", fontWeight: 600, marginTop: "24px", marginBottom: "8px" },
+  status: { padding: "12px", color: "#666" },
+  error: { color: "#e11d48", marginBottom: "12px", fontSize: "14px" },
+  ok: { color: "#15803d", fontWeight: 600 },
+  bad: { color: "#e11d48", fontWeight: 600 },
+  advice: { color: "#b45309" },
+  muted: { color: "#666", fontSize: "13px" },
+  mono: { fontFamily: "ui-monospace, monospace", fontSize: "13px" },
+  table: { width: "100%", borderCollapse: "collapse", fontSize: "14px" },
+  th: {
+    textAlign: "left",
+    borderBottom: "1px solid #ddd",
+    padding: "6px 8px",
+    fontWeight: 600,
+    color: "#444"
+  },
+  td: { borderBottom: "1px solid #eee", padding: "6px 8px", verticalAlign: "top" },
+  list: { listStyle: "none", padding: 0, margin: 0 },
+  row: { borderBottom: "1px solid #eee", padding: "8px 0" },
+  badge: {
+    display: "inline-block",
+    borderRadius: "999px",
+    padding: "1px 8px",
+    fontSize: "12px",
+    background: "#f3f4f6"
+  },
+  button: {
+    background: "none",
+    border: "1px solid #ddd",
+    borderRadius: "8px",
+    padding: "4px 10px",
+    cursor: "pointer",
+    fontSize: "13px"
+  },
+  toolbar: { display: "flex", gap: "8px", alignItems: "center", marginBottom: "12px" }
+};
+
+// src/screens/AdminLogScreen.ts
+import { useAdminLog } from "@fonderie/vue-admin";
+import { defineComponent, h as h2 } from "vue";
+
+// src/screens/common.ts
+import { h } from "vue";
+function page(title, state, content, toolbar = [], options = {}) {
+  const body = state.isLoading.value ? h("p", { style: styles.status }, options.loadingText ?? "Loading\u2026") : state.error.value ? h(
+    "p",
+    { style: styles.error, role: "alert" },
+    (options.errorText ?? ((e) => e.explanation))(state.error.value)
+  ) : content();
+  return h("div", { style: styles.container }, [
+    h("div", { style: styles.toolbar }, [
+      h("h1", { style: { ...styles.title, marginBottom: 0 } }, title),
+      ...toolbar
+    ]),
+    body
+  ]);
+}
+function table(headers, rows) {
+  return h("table", { style: styles.table }, [
+    h("thead", [
+      h(
+        "tr",
+        headers.map((t) => h("th", { style: styles.th }, t))
+      )
+    ]),
+    h("tbody", rows)
+  ]);
+}
+var td = (children, extra = {}) => h("td", { style: { ...styles.td, ...extra } }, children);
+var refreshButton = (label, disabled, onClick) => h("button", { type: "button", style: styles.button, disabled, onClick }, label);
+
+// src/screens/AdminLogScreen.ts
+var AdminLogScreen = defineComponent({
+  name: "FonderieAdminLogScreen",
+  props: {
+    client: { type: Object, required: true },
+    pageSize: { type: Number, default: 50 }
+  },
+  setup(props) {
+    const { entries, hasMore, isLoading, error, refresh, loadMore } = useAdminLog(props.client, {
+      limit: props.pageSize
+    });
+    return () => h2("div", { style: styles.container }, [
+      h2("div", { style: styles.toolbar }, [
+        h2("h1", { style: { ...styles.title, marginBottom: 0 } }, "Admin log"),
+        refreshButton("Refresh", isLoading.value, () => void refresh())
+      ]),
+      error.value ? h2(
+        "p",
+        { style: styles.error, role: "alert" },
+        error.value.status === 404 ? "The admin log is off \u2014 give AdminModule a store." : error.value.explanation
+      ) : [
+        table(
+          ["When", "Actor", "Request", "Status", "Module"],
+          entries.value.map(
+            (e) => h2("tr", { key: e.id }, [
+              td(new Date(e.at).toLocaleString(), styles.muted),
+              td(e.actor),
+              td(`${e.method} ${e.path}`, styles.mono),
+              td([
+                h2(
+                  "span",
+                  { style: e.status >= 400 ? styles.bad : styles.ok },
+                  String(e.status)
+                ),
+                " ",
+                h2("span", { style: styles.muted }, `${e.durationMs} ms`)
+              ]),
+              td(e.module, styles.muted)
+            ])
+          )
+        ),
+        isLoading.value ? h2("p", { style: styles.status }, "Loading\u2026") : null,
+        hasMore.value && !isLoading.value ? h2(
+          "button",
+          {
+            type: "button",
+            style: { ...styles.button, marginTop: "12px" },
+            onClick: () => void loadMore()
+          },
+          "Load more"
+        ) : null
+      ]
+    ]);
+  }
+});
+
+// src/screens/AttentionScreen.ts
+import { useAttention } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent2, h as h3 } from "vue";
+var AttentionScreen = defineComponent2({
+  name: "FonderieAttentionScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { attention, isLoading, error, refresh } = useAttention(props.client);
+    return () => page(
+      "Attention",
+      { isLoading, error },
+      () => {
+        const a = attention.value;
+        if (!a) return null;
+        if (a.items.length === 0)
+          return h3(
+            "p",
+            { style: styles.ok },
+            `Nothing needs you. Checked ${new Date(a.generatedAt).toLocaleString()}.`
+          );
+        return h3(
+          "ul",
+          { style: styles.list },
+          a.items.map(
+            (item) => h3("li", { key: `${item.source}:${item.message}`, style: styles.row }, [
+              h3(
+                "span",
+                { style: item.severity === "error" ? styles.bad : styles.advice },
+                item.severity
+              ),
+              " ",
+              h3("span", { style: styles.mono }, item.source),
+              ` \u2014 ${item.message}`
+            ])
+          )
+        );
+      },
+      [refreshButton("Refresh", isLoading.value, () => void refresh())],
+      { loadingText: "Running the checks\u2026" }
+    );
+  }
+});
+
+// src/screens/ConfigScreen.ts
+import { useAdminConfig } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent3, h as h4 } from "vue";
+var ConfigScreen = defineComponent3({
+  name: "FonderieConfigScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { report, isLoading, error } = useAdminConfig(props.client);
+    return () => page("Configuration", { isLoading, error }, () => {
+      const r = report.value;
+      if (!r) return null;
+      return [
+        h4("h2", { style: styles.subtitle }, "Readiness"),
+        h4(
+          "ul",
+          { style: styles.list },
+          r.modules.map(
+            (m) => h4("li", { key: m.name, style: styles.row }, [
+              h4("span", { style: styles.mono }, m.name),
+              " ",
+              ...m.problems.length === 0 ? [h4("span", { style: styles.ok }, "ok")] : m.problems.map(
+                (p) => h4(
+                  "div",
+                  {
+                    key: p.message,
+                    style: p.severity === "error" ? styles.bad : styles.advice
+                  },
+                  p.message
+                )
+              )
+            ])
+          )
+        ),
+        h4("h2", { style: styles.subtitle }, "Environment"),
+        r.env.length === 0 ? h4("p", { style: styles.muted }, "No variables declared \u2014 pass `env` to AdminModule.") : h4(
+          "ul",
+          { style: styles.list },
+          r.env.map(
+            (e) => h4("li", { key: e.name, style: styles.row }, [
+              h4("span", { style: styles.mono }, e.name),
+              " ",
+              h4("span", { style: e.set ? styles.ok : styles.bad }, e.set ? "set" : "missing")
+            ])
+          )
+        )
+      ];
+    });
+  }
+});
+
+// src/screens/DoctorScreen.ts
+import { useDoctor } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent4, h as h5 } from "vue";
+var DoctorScreen = defineComponent4({
+  name: "FonderieDoctorScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { report, isLoading, error, refresh } = useDoctor(props.client);
+    return () => page(
+      "Doctor",
+      { isLoading, error },
+      () => {
+        const r = report.value;
+        if (!r) return null;
+        return h5(
+          "ul",
+          { style: styles.list },
+          r.checks.map(
+            (c) => h5("li", { key: c.name, style: styles.row }, [
+              h5(
+                "span",
+                { style: c.skipped ? styles.muted : c.ok ? styles.ok : styles.bad },
+                c.skipped ? "skipped" : c.ok ? "ok" : "failed"
+              ),
+              " ",
+              h5("span", { style: styles.mono }, c.name),
+              " ",
+              h5("span", { style: styles.muted }, `${c.module} \xB7 ${c.durationMs} ms`),
+              c.skipped ? h5("div", { style: styles.muted }, c.skipped) : null,
+              ...c.findings.map(
+                (f) => h5("div", { key: f, style: c.ok ? styles.advice : styles.bad }, f)
+              )
+            ])
+          )
+        );
+      },
+      [
+        refreshButton("Run again", isLoading.value, () => void refresh()),
+        report.value && !isLoading.value ? h5(
+          "span",
+          { style: report.value.ok ? styles.ok : styles.bad },
+          report.value.ok ? "all checks pass" : "a check failed"
+        ) : h5("span")
+      ],
+      { loadingText: "Running the checks\u2026" }
+    );
+  }
+});
+
+// src/screens/ModulesScreen.ts
+import { useManifest } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent5, h as h6 } from "vue";
+var ModulesScreen = defineComponent5({
+  name: "FonderieModulesScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { manifest, isLoading, error } = useManifest(props.client);
+    return () => page("Modules", { isLoading, error }, () => {
+      const m = manifest.value;
+      if (!m) return null;
+      return [
+        h6(
+          "p",
+          { style: styles.muted },
+          `${m.env} \xB7 admin ${m.admin.version} \xB7 admin log ${m.admin.log ? "on" : "off"} \xB7 ${m.routes.length} routes`
+        ),
+        table(
+          ["Module", "Version", "Readiness", "Describes admin"],
+          m.modules.map(
+            (mod) => h6("tr", { key: mod.name }, [
+              td(mod.name, styles.mono),
+              td(mod.version ?? h6("span", { style: styles.muted }, "not reported")),
+              td([
+                h6(
+                  "span",
+                  { style: mod.readiness.ok ? styles.ok : styles.bad },
+                  mod.readiness.ok ? "ok" : "error"
+                ),
+                ...mod.readiness.problems.map(
+                  (p) => h6(
+                    "div",
+                    {
+                      key: p.message,
+                      style: p.severity === "error" ? styles.bad : styles.advice
+                    },
+                    p.message
+                  )
+                )
+              ]),
+              td(mod.describesAdmin ? "yes" : h6("span", { style: styles.muted }, "no"))
+            ])
+          )
+        )
+      ];
+    });
+  }
+});
+
+// src/screens/RoutesScreen.ts
+import { useAdminRoutes } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent6, h as h7 } from "vue";
+var RoutesScreen = defineComponent6({
+  name: "FonderieRoutesScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { report, isLoading, error } = useAdminRoutes(props.client);
+    return () => page(
+      "Routes",
+      { isLoading, error },
+      () => table(
+        ["Method", "Path", "Guard", "Module"],
+        (report.value?.routes ?? []).map(
+          (r) => h7("tr", { key: `${r.method} ${r.path}` }, [
+            td(r.method, styles.mono),
+            td(r.path, styles.mono),
+            td(h7("span", { style: styles.badge }, r.guard)),
+            td(r.module ?? "application", styles.muted)
+          ])
+        )
+      )
+    );
+  }
+});
+
+// src/screens/TokensScreen.ts
+import { useAdminTokens } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent7, h as h8 } from "vue";
+var TokensScreen = defineComponent7({
+  name: "FonderieTokensScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { report, isLoading, error } = useAdminTokens(props.client);
+    return () => page("Access", { isLoading, error }, () => {
+      const r = report.value;
+      if (!r) return null;
+      return [
+        h8("h2", { style: styles.subtitle }, "Admin token"),
+        h8("p", [
+          h8(
+            "span",
+            { style: r.admin.ok ? styles.ok : styles.bad },
+            r.admin.ok ? "strong" : "weak"
+          ),
+          ...r.admin.problems.map(
+            (p) => h8("div", { key: p.message, style: styles.bad }, p.message)
+          )
+        ]),
+        h8("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
+        r.legacy.length === 0 ? h8(
+          "p",
+          { style: styles.muted },
+          "None \u2014 every brick's admin surface goes through this token."
+        ) : h8(
+          "ul",
+          { style: styles.list },
+          r.legacy.map(
+            (l) => h8("li", { key: l.module, style: styles.row }, [
+              h8("span", { style: styles.mono }, l.module),
+              " ",
+              h8(
+                "span",
+                { style: styles.muted },
+                "still registers its standalone routes with its own token (deprecated)"
+              )
+            ])
+          )
+        )
+      ];
+    });
+  }
+});
+
+// src/screens/AdminShell.ts
+var NAV = [
+  { group: "Today", items: [{ page: "attention", label: "Attention" }] },
+  {
+    group: "System",
+    items: [
+      { page: "modules", label: "Modules" },
+      { page: "config", label: "Configuration" },
+      { page: "doctor", label: "Doctor" },
+      { page: "routes", label: "Routes" }
+    ]
+  },
+  { group: "Settings", items: [{ page: "settings", label: "Config & secrets", needs: "config" }] },
+  { group: "Messaging", items: [{ page: "templates", label: "Templates", needs: "courier" }] },
+  {
+    group: "Activity",
+    items: [
+      { page: "log", label: "Admin log" },
+      { page: "tokens", label: "Access" }
+    ]
+  }
+];
+var AdminShell = defineComponent8({
+  name: "FonderieAdminShell",
+  props: {
+    client: { type: Object, required: true },
+    // Given ⇒ the Settings and Messaging pages appear. Construct them with
+    // `prefix: '/_admin'` to go through the one token.
+    configClient: { type: Object, default: void 0 },
+    courierClient: { type: Object, default: void 0 },
+    environment: { type: String, default: void 0 },
+    // Controlled navigation: pass `page` and listen to `navigate` to own the
+    // URL. Omit `page` and the shell keeps it itself.
+    page: { type: String, default: void 0 }
+  },
+  emits: { navigate: (_page) => true },
+  setup(props, { emit }) {
+    const own = ref("attention");
+    const current = computed(() => props.page ?? own.value);
+    const editing = ref(null);
+    const go = (p) => {
+      editing.value = null;
+      emit("navigate", p);
+      if (props.page === void 0) own.value = p;
+    };
+    const back = () => h9(
+      "button",
+      { type: "button", style: styles.button, onClick: () => editing.value = null },
+      "\u2190 Back"
+    );
+    const body = () => {
+      const c = props.client;
+      switch (current.value) {
+        case "attention":
+          return h9(AttentionScreen, { client: c });
+        case "modules":
+          return h9(ModulesScreen, { client: c });
+        case "doctor":
+          return h9(DoctorScreen, { client: c });
+        case "config":
+          return h9(ConfigScreen, { client: c });
+        case "routes":
+          return h9(RoutesScreen, { client: c });
+        case "tokens":
+          return h9(TokensScreen, { client: c });
+        case "log":
+          return h9(AdminLogScreen, { client: c });
+        case "settings": {
+          const cc = props.configClient;
+          if (!cc)
+            return h9(
+              "p",
+              { style: styles.status },
+              "Pass a ConfigAdminClient to manage config and secrets here."
+            );
+          const e = editing.value;
+          if (e && e.kind !== "template")
+            return [
+              back(),
+              h9(ConfigEditorScreen, {
+                client: cc,
+                kind: e.kind,
+                configKey: e.key,
+                ...props.environment !== void 0 ? { environment: props.environment } : {},
+                onSaved: () => editing.value = null
+              })
+            ];
+          return h9(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 }
+          });
+        }
+        case "templates": {
+          const kc = props.courierClient;
+          if (!kc)
+            return h9(
+              "p",
+              { style: styles.status },
+              "Pass a CourierAdminClient to manage templates here."
+            );
+          const e = editing.value;
+          if (e?.kind === "template")
+            return [
+              back(),
+              h9(TemplateEditorScreen, {
+                client: kc,
+                type: e.type,
+                onSaved: () => editing.value = null
+              })
+            ];
+          return h9(TemplateListScreen, {
+            client: kc,
+            "onSelect-template": (t) => editing.value = { kind: "template", type: t.type }
+          });
+        }
+      }
+    };
+    return () => h9("div", { style: styles.shell }, [
+      h9(
+        "nav",
+        { style: styles.nav, "aria-label": "Admin" },
+        NAV.map((g) => {
+          const items = g.items.filter(
+            (i) => !i.needs || (i.needs === "config" ? props.configClient : props.courierClient)
+          );
+          if (items.length === 0) return null;
+          return h9("div", { key: g.group }, [
+            h9("div", { style: styles.navGroup }, g.group),
+            ...items.map(
+              (i) => h9(
+                "button",
+                {
+                  key: i.page,
+                  type: "button",
+                  style: {
+                    ...styles.navItem,
+                    ...current.value === i.page ? styles.navItemActive : {}
+                  },
+                  "aria-current": current.value === i.page ? "page" : void 0,
+                  onClick: () => go(i.page)
+                },
+                i.label
+              )
+            )
+          ]);
+        })
+      ),
+      h9("main", { style: styles.main }, body())
+    ]);
+  }
+});
+export {
+  AdminLogScreen,
+  AdminShell,
+  AttentionScreen,
+  ConfigScreen,
+  DoctorScreen,
+  ModulesScreen,
+  RoutesScreen,
+  TokensScreen
+};
+//# sourceMappingURL=index.js.map