@bygghammar/cms-platform 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -9,6 +9,16 @@ always compatible. In addition, `PLATFORM_CONTRACT_VERSION` in
 or adapter capabilities an older site does not have. Sites assert that constant
 in a test and upgrade deliberately.
 
+## 0.24.0
+
+- Added `backoffice/UsersView`: shared account administration (create users,
+  toggle roles, set or reset passwords, delete), superadmin-gated.
+- Added `backoffice/RolesView`: shared role reference list with default
+  descriptions that hosts can override.
+- Added `backoffice/AuditView` and `backoffice/EmailLogsView`: shared log
+  browsers with search, status filtering and per-row detail.
+- Added `backoffice/LogsView`: shared index over the two log surfaces.
+
 ## 0.23.0
 
 - Added `config/site-config`: the typed `SiteConfig` contract, `defineSiteConfig`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -115,7 +115,12 @@
     "./server/forms-core": "./src/server/forms-core.ts",
     "./config/site-config": "./src/config/site-config.ts",
     "./server/site-settings-core": "./src/server/site-settings-core.ts",
-    "./backoffice/SiteSettingsView": "./src/backoffice/SiteSettingsView.tsx"
+    "./backoffice/SiteSettingsView": "./src/backoffice/SiteSettingsView.tsx",
+    "./backoffice/UsersView": "./src/backoffice/UsersView.tsx",
+    "./backoffice/RolesView": "./src/backoffice/RolesView.tsx",
+    "./backoffice/AuditView": "./src/backoffice/AuditView.tsx",
+    "./backoffice/EmailLogsView": "./src/backoffice/EmailLogsView.tsx",
+    "./backoffice/LogsView": "./src/backoffice/LogsView.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/AuditView.tsx

@@ -0,0 +1,171 @@
+import { Fragment, useMemo, useState } from "react";
+
+import {
+  formatAbsoluteTime,
+  formatEntityRef,
+  formatRelativeTime,
+  humanizeAction,
+  summarizeMeta,
+} from "../admin/format-log";
+
+/** One audit trail row. */
+export type AuditLogRow = {
+  id: string;
+  created_at: string;
+  actor_id?: string | null;
+  actor_email?: string | null;
+  action: string;
+  entity?: string | null;
+  entity_id?: string | null;
+  ip?: string | null;
+  user_agent?: string | null;
+  meta?: Record<string, unknown> | null;
+};
+
+/** Host-agnostic audit log browser with search and per-row detail. */
+export function AuditView({ rows }: { rows: AuditLogRow[] }) {
+  const [search, setSearch] = useState("");
+  const [expanded, setExpanded] = useState<string | null>(null);
+
+  const filtered = useMemo(() => {
+    const s = search.trim().toLowerCase();
+    if (!s) return rows;
+    return rows.filter((r) => {
+      const hay = [
+        r.actor_email,
+        r.action,
+        humanizeAction(r.action),
+        r.entity,
+        r.entity_id,
+        JSON.stringify(r.meta ?? {}),
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+      return hay.includes(s);
+    });
+  }, [rows, search]);
+
+  return (
+    <div className="p-8 md:p-12">
+      <div className="flex items-start justify-between gap-6 flex-wrap">
+        <div>
+          <h2 className="font-serif text-xl">Audit log</h2>
+          <p className="mt-2 text-sm text-ink/60 max-w-2xl">
+            A human-readable trail of every sensitive action performed in the backoffice: who did
+            what, when, and to which record.
+          </p>
+        </div>
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search actor, action, entity…"
+          className="border border-ink/15 bg-white px-3 py-2 text-sm w-72 focus:outline-none focus:border-sea"
+        />
+      </div>
+
+      <div className="mt-6 border border-ink/10 bg-white overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-ink/5 text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">
+            <tr>
+              <th className="text-left p-3 w-40">When</th>
+              <th className="text-left p-3 w-56">Who</th>
+              <th className="text-left p-3">What happened</th>
+              <th className="text-left p-3 w-56">Target</th>
+              <th className="w-10 p-3" />
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.map((r) => {
+              const summary = summarizeMeta(r.meta as never);
+              const isOpen = expanded === r.id;
+              return (
+                <Fragment key={r.id}>
+                  <tr
+                    className="border-t border-ink/10 align-top hover:bg-ink/[0.02] cursor-pointer"
+                    onClick={() => setExpanded(isOpen ? null : r.id)}
+                  >
+                    <td className="p-3 whitespace-nowrap">
+                      <div className="text-ink">{formatRelativeTime(r.created_at)}</div>
+                      <div className="text-[0.65rem] text-ink/50">
+                        {formatAbsoluteTime(r.created_at)}
+                      </div>
+                    </td>
+                    <td className="p-3">
+                      <div className="text-ink">{r.actor_email ?? "System"}</div>
+                      {r.actor_id && (
+                        <div className="text-[0.65rem] text-ink/40 font-mono">
+                          {r.actor_id.slice(0, 8)}…
+                        </div>
+                      )}
+                    </td>
+                    <td className="p-3">
+                      <div className="text-ink">{humanizeAction(r.action)}</div>
+                      {summary && (
+                        <div className="text-[0.7rem] text-ink/60 mt-1 line-clamp-2">{summary}</div>
+                      )}
+                    </td>
+                    <td className="p-3 text-ink/70">{formatEntityRef(r.entity, r.entity_id)}</td>
+                    <td className="p-3 text-ink/40 text-xs">{isOpen ? "▾" : "▸"}</td>
+                  </tr>
+                  {isOpen && (
+                    <tr className="bg-ink/[0.02] border-t border-ink/10">
+                      <td colSpan={5} className="p-4">
+                        <dl className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-2 text-xs">
+                          <DetailRow label="Action code" value={r.action} mono />
+                          <DetailRow label="Entity" value={r.entity ?? "—"} />
+                          <DetailRow label="Entity ID" value={r.entity_id ?? "—"} mono />
+                          <DetailRow label="Actor ID" value={r.actor_id ?? "—"} mono />
+                          <DetailRow label="IP" value={r.ip ?? "—"} mono />
+                          <DetailRow label="User agent" value={r.user_agent ?? "—"} />
+                        </dl>
+                        {r.meta && Object.keys(r.meta).length > 0 && (
+                          <div className="mt-4">
+                            <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50 mb-1">
+                              Details
+                            </div>
+                            <pre className="text-[0.7rem] whitespace-pre-wrap break-all text-ink/70 bg-white border border-ink/10 p-3">
+                              {JSON.stringify(r.meta, null, 2)}
+                            </pre>
+                          </div>
+                        )}
+                      </td>
+                    </tr>
+                  )}
+                </Fragment>
+              );
+            })}
+            {filtered.length === 0 && (
+              <tr>
+                <td colSpan={5} className="p-6 text-center text-ink/50">
+                  {rows.length === 0 ? "No audit events yet." : "No events match your search."}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function DetailRow({
+  label,
+  value,
+  mono,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+}) {
+  return (
+    <div className="flex gap-3">
+      <dt className="text-ink/50 uppercase tracking-[0.18em] text-[0.6rem] w-28 shrink-0 pt-0.5">
+        {label}
+      </dt>
+      <dd className={mono ? "font-mono text-ink/80 break-all" : "text-ink/80 break-all"}>
+        {value}
+      </dd>
+    </div>
+  );
+}

package/src/backoffice/EmailLogsView.tsx

@@ -0,0 +1,203 @@
+import { Fragment, useMemo, useState } from "react";
+
+import { emailStatusTone, formatAbsoluteTime, formatRelativeTime } from "../admin/format-log";
+
+/** One outgoing email attempt. */
+export type EmailLogRow = {
+  id: string;
+  created_at: string;
+  to_address: string;
+  from_address?: string | null;
+  reply_to?: string | null;
+  subject?: string | null;
+  body_preview?: string | null;
+  provider?: string | null;
+  status: string;
+  error?: string | null;
+  meta?: Record<string, unknown> | null;
+};
+
+/** Host-agnostic email delivery log with status filter, search and detail. */
+export function EmailLogsView({ rows }: { rows: EmailLogRow[] }) {
+  const [search, setSearch] = useState("");
+  const [status, setStatus] = useState("all");
+  const [expanded, setExpanded] = useState<string | null>(null);
+
+  const statuses = useMemo(
+    () => Array.from(new Set(rows.map((r) => r.status).filter(Boolean))),
+    [rows],
+  );
+
+  const filtered = useMemo(() => {
+    const s = search.trim().toLowerCase();
+    return rows.filter((r) => {
+      if (status !== "all" && r.status !== status) return false;
+      if (!s) return true;
+      const hay = [r.to_address, r.from_address, r.subject, r.provider, r.error]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+      return hay.includes(s);
+    });
+  }, [rows, search, status]);
+
+  return (
+    <div className="p-8 md:p-12">
+      <div className="flex items-start justify-between gap-6 flex-wrap">
+        <div>
+          <h2 className="font-serif text-xl">Email log</h2>
+          <p className="mt-2 text-sm text-ink/60 max-w-2xl">
+            Every outgoing email — contact form replies, password resets and system notifications —
+            with delivery status and any error returned by the provider.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <select
+            value={status}
+            onChange={(e) => setStatus(e.target.value)}
+            className="border border-ink/15 bg-white px-3 py-2 text-sm"
+          >
+            <option value="all">All statuses</option>
+            {statuses.map((s) => (
+              <option key={s} value={s}>
+                {s}
+              </option>
+            ))}
+          </select>
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search recipient, subject…"
+            className="border border-ink/15 bg-white px-3 py-2 text-sm w-72 focus:outline-none focus:border-sea"
+          />
+        </div>
+      </div>
+
+      <div className="mt-6 border border-ink/10 bg-white overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-ink/5 text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">
+            <tr>
+              <th className="text-left p-3 w-40">When</th>
+              <th className="text-left p-3">Recipient</th>
+              <th className="text-left p-3">Subject</th>
+              <th className="text-left p-3 w-32">Provider</th>
+              <th className="text-left p-3 w-32">Status</th>
+              <th className="w-10 p-3" />
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.map((r) => {
+              const tone = emailStatusTone(r.status);
+              const isOpen = expanded === r.id;
+              return (
+                <Fragment key={r.id}>
+                  <tr
+                    className="border-t border-ink/10 align-top hover:bg-ink/[0.02] cursor-pointer"
+                    onClick={() => setExpanded(isOpen ? null : r.id)}
+                  >
+                    <td className="p-3 whitespace-nowrap">
+                      <div className="text-ink">{formatRelativeTime(r.created_at)}</div>
+                      <div className="text-[0.65rem] text-ink/50">
+                        {formatAbsoluteTime(r.created_at)}
+                      </div>
+                    </td>
+                    <td className="p-3">
+                      <div className="text-ink">{r.to_address}</div>
+                      {r.from_address && (
+                        <div className="text-[0.65rem] text-ink/50">from {r.from_address}</div>
+                      )}
+                    </td>
+                    <td className="p-3">
+                      <div className="text-ink">{r.subject ?? "(no subject)"}</div>
+                      {r.body_preview && (
+                        <div className="text-[0.7rem] text-ink/50 mt-1 line-clamp-1">
+                          {r.body_preview}
+                        </div>
+                      )}
+                    </td>
+                    <td className="p-3 text-ink/70">{r.provider ?? "—"}</td>
+                    <td className="p-3">
+                      <span
+                        className={`inline-block px-2 py-0.5 text-[0.65rem] uppercase tracking-[0.15em] border ${tone.className}`}
+                      >
+                        {tone.label}
+                      </span>
+                      {r.error && (
+                        <div className="mt-1 text-[0.65rem] text-red-600 line-clamp-1">
+                          {r.error}
+                        </div>
+                      )}
+                    </td>
+                    <td className="p-3 text-ink/40 text-xs">{isOpen ? "▾" : "▸"}</td>
+                  </tr>
+                  {isOpen && (
+                    <tr className="bg-ink/[0.02] border-t border-ink/10">
+                      <td colSpan={6} className="p-4 space-y-3 text-xs">
+                        <dl className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-2">
+                          <DetailRow label="To" value={r.to_address} />
+                          <DetailRow label="From" value={r.from_address ?? "—"} />
+                          <DetailRow label="Reply-to" value={r.reply_to ?? "—"} />
+                          <DetailRow label="Provider" value={r.provider ?? "—"} />
+                          <DetailRow label="Status" value={r.status} />
+                          <DetailRow label="Sent" value={formatAbsoluteTime(r.created_at)} />
+                        </dl>
+                        {r.body_preview && (
+                          <div>
+                            <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50 mb-1">
+                              Body preview
+                            </div>
+                            <div className="text-ink/80 bg-white border border-ink/10 p-3 whitespace-pre-wrap">
+                              {r.body_preview}
+                            </div>
+                          </div>
+                        )}
+                        {r.error && (
+                          <div>
+                            <div className="text-[0.65rem] uppercase tracking-[0.22em] text-red-600 mb-1">
+                              Error
+                            </div>
+                            <div className="text-red-700 bg-red-50 border border-red-200 p-3 whitespace-pre-wrap">
+                              {r.error}
+                            </div>
+                          </div>
+                        )}
+                        {r.meta && Object.keys(r.meta).length > 0 && (
+                          <div>
+                            <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50 mb-1">
+                              Metadata
+                            </div>
+                            <pre className="text-[0.7rem] whitespace-pre-wrap break-all text-ink/70 bg-white border border-ink/10 p-3">
+                              {JSON.stringify(r.meta, null, 2)}
+                            </pre>
+                          </div>
+                        )}
+                      </td>
+                    </tr>
+                  )}
+                </Fragment>
+              );
+            })}
+            {filtered.length === 0 && (
+              <tr>
+                <td colSpan={6} className="p-6 text-center text-ink/50">
+                  {rows.length === 0 ? "No email activity yet." : "No emails match your filters."}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function DetailRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex gap-3">
+      <dt className="text-ink/50 uppercase tracking-[0.18em] text-[0.6rem] w-24 shrink-0 pt-0.5">
+        {label}
+      </dt>
+      <dd className="text-ink/80 break-all">{value}</dd>
+    </div>
+  );
+}

package/src/backoffice/LogsView.tsx

@@ -0,0 +1,43 @@
+export type LogsViewProps = {
+  /** Path to the audit log screen, e.g. `/kontoret/admin/audit`. */
+  auditPath: string;
+  /** Path to the email log screen, e.g. `/kontoret/admin/email-logs`. */
+  emailLogsPath: string;
+};
+
+/** Host-agnostic index over the two log surfaces. */
+export function LogsView({ auditPath, emailLogsPath }: LogsViewProps) {
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <h2 className="font-serif text-xl">Logs</h2>
+      <p className="mt-2 text-sm text-ink/60">Application logs live in two places:</p>
+      <ul className="mt-6 space-y-4">
+        <li className="border border-ink/10 bg-white p-5">
+          <div className="font-serif text-lg">Audit logs</div>
+          <p className="mt-1 text-sm text-ink/60">
+            Actions performed in the backoffice (user changes, role changes, email settings updates,
+            content saves).
+          </p>
+          <a
+            href={auditPath}
+            className="mt-3 inline-block text-xs uppercase tracking-[0.22em] text-sea"
+          >
+            Open audit logs →
+          </a>
+        </li>
+        <li className="border border-ink/10 bg-white p-5">
+          <div className="font-serif text-lg">Email logs</div>
+          <p className="mt-1 text-sm text-ink/60">
+            Every outgoing email attempt (recipient, subject, provider, status).
+          </p>
+          <a
+            href={emailLogsPath}
+            className="mt-3 inline-block text-xs uppercase tracking-[0.22em] text-sea"
+          >
+            Open email logs →
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}

package/src/backoffice/RolesView.tsx

@@ -0,0 +1,50 @@
+/** Default descriptions for the canonical platform roles. */
+export const DEFAULT_ROLE_DESCRIPTIONS: Record<string, string> = {
+  superadmin: "Full control. Manage users, roles, email and everything else. Reserved.",
+  admin: "Manage content, pages, media, view logs and audit.",
+  editor: "Legacy editor role — behaves like admin for CMS. Prefer admin.",
+  seo: "Access SEO tools and page metadata.",
+  user: "Signed-in but no backoffice access beyond their own account.",
+};
+
+export type RolesViewProps = {
+  allRoles: readonly string[];
+  /** Overrides merged over `DEFAULT_ROLE_DESCRIPTIONS`. */
+  descriptions?: Record<string, string>;
+  /** Path to the users screen, e.g. `/kontoret/admin/users`. */
+  usersPath: string;
+};
+
+/** Host-agnostic reference list of the roles that exist in the system. */
+export function RolesView({ allRoles, descriptions, usersPath }: RolesViewProps) {
+  const text = { ...DEFAULT_ROLE_DESCRIPTIONS, ...(descriptions ?? {}) };
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <h2 className="font-serif text-xl">User roles</h2>
+      <p className="mt-2 text-sm text-ink/60">
+        These are the roles that exist in the system. Assign them to users on the{" "}
+        <a href={usersPath} className="underline underline-offset-2">
+          Users
+        </a>{" "}
+        page.
+      </p>
+      <div className="mt-8 border border-ink/10 bg-white divide-y divide-ink/10">
+        {allRoles.map((r) => (
+          <div key={r} className="p-5">
+            <div className="flex items-center gap-3">
+              <div className="text-[0.65rem] uppercase tracking-[0.22em] bg-ink text-white px-2 py-1">
+                {r}
+              </div>
+              {r === "superadmin" && (
+                <div className="text-[0.65rem] uppercase tracking-[0.22em] text-sea">
+                  Highest privilege
+                </div>
+              )}
+            </div>
+            <p className="mt-2 text-sm text-ink/70">{text[r] ?? ""}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/backoffice/UsersView.tsx

@@ -0,0 +1,348 @@
+import { useState } from "react";
+import { toast } from "sonner";
+
+/** One account row as shown in the users table. */
+export type PlatformUserRow = {
+  id: string;
+  email: string;
+  roles: string[];
+  email_confirmed_at?: string | null;
+  last_sign_in_at?: string | null;
+};
+
+/** Host-provided account administration. */
+export type UsersDeps = {
+  users: PlatformUserRow[];
+  myRoles: string[];
+  allRoles: readonly string[];
+  createUser: (input: {
+    data: { email: string; password?: string; roles: string[] };
+  }) => Promise<unknown>;
+  deleteUser: (input: { data: { userId: string } }) => Promise<unknown>;
+  setUserPassword: (input: { data: { userId: string; password: string } }) => Promise<unknown>;
+  sendPasswordResetEmail: (input: { data: { email: string } }) => Promise<unknown>;
+  setUserRoles: (input: { data: { userId: string; roles: string[] } }) => Promise<unknown>;
+  refresh: () => Promise<unknown> | void;
+};
+
+/**
+ * Host-agnostic user administration screen: create accounts, assign roles,
+ * set or reset passwords and delete accounts. Only superadmins get write
+ * controls; everyone else sees a read-only table.
+ */
+export function UsersView({ deps }: { deps: UsersDeps }) {
+  const {
+    users,
+    myRoles,
+    allRoles,
+    createUser,
+    deleteUser,
+    setUserPassword,
+    sendPasswordResetEmail,
+    setUserRoles,
+    refresh,
+  } = deps;
+  const isSuper = myRoles.includes("superadmin");
+
+  const [showNew, setShowNew] = useState(false);
+  const [newEmail, setNewEmail] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [newRoles, setNewRoles] = useState<string[]>(["user"]);
+  const [busy, setBusy] = useState(false);
+
+  // `prompt()` is unavailable in sandboxed preview iframes, so the password
+  // flow lives in the page itself.
+  const [pwTarget, setPwTarget] = useState<{ id: string; email: string } | null>(null);
+  const [pwValue, setPwValue] = useState("");
+  const [pwConfirm, setPwConfirm] = useState("");
+  const [pwBusy, setPwBusy] = useState(false);
+
+  const onCreate = async () => {
+    setBusy(true);
+    try {
+      await createUser({
+        data: { email: newEmail, password: newPassword || undefined, roles: newRoles },
+      });
+      toast.success("User created");
+      setShowNew(false);
+      setNewEmail("");
+      setNewPassword("");
+      setNewRoles(["user"]);
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onDelete = async (id: string, email: string) => {
+    if (!confirm(`Delete ${email}? This cannot be undone.`)) return;
+    try {
+      await deleteUser({ data: { userId: id } });
+      toast.success("User deleted");
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  const submitPassword = async () => {
+    if (!pwTarget) return;
+    if (pwValue.length < 8) {
+      toast.error("Password must be at least 8 characters");
+      return;
+    }
+    if (pwValue !== pwConfirm) {
+      toast.error("Passwords do not match");
+      return;
+    }
+    setPwBusy(true);
+    try {
+      await setUserPassword({ data: { userId: pwTarget.id, password: pwValue } });
+      toast.success(`Password updated for ${pwTarget.email}`);
+      setPwTarget(null);
+      setPwValue("");
+      setPwConfirm("");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setPwBusy(false);
+    }
+  };
+
+  const onSendReset = async (email: string) => {
+    try {
+      await sendPasswordResetEmail({ data: { email } });
+      toast.success("Reset link generated");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  const onToggleRole = async (userId: string, current: string[], role: string, on: boolean) => {
+    const next = on ? Array.from(new Set([...current, role])) : current.filter((r) => r !== role);
+    try {
+      await setUserRoles({ data: { userId, roles: next } });
+      toast.success("Roles updated");
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12">
+      <div className="flex items-center justify-between">
+        <h2 className="font-serif text-xl">Users</h2>
+        {isSuper && (
+          <button
+            onClick={() => setShowNew((v) => !v)}
+            className="border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea"
+          >
+            {showNew ? "Cancel" : "New user"}
+          </button>
+        )}
+      </div>
+
+      {showNew && isSuper && (
+        <div className="mt-6 border border-ink/10 bg-white p-6 max-w-2xl">
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="block">
+              <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">Email</span>
+              <input
+                type="email"
+                value={newEmail}
+                onChange={(e) => setNewEmail(e.target.value)}
+                className="mt-1 w-full border border-ink/20 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="block">
+              <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                Password (optional; leave blank to send reset)
+              </span>
+              <input
+                type="text"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                className="mt-1 w-full border border-ink/20 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+          <div className="mt-4">
+            <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">Roles</div>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {allRoles.map((r) => (
+                <label
+                  key={r}
+                  className="inline-flex items-center gap-2 border border-ink/15 px-3 py-1.5 text-xs"
+                >
+                  <input
+                    type="checkbox"
+                    checked={newRoles.includes(r)}
+                    onChange={(e) =>
+                      setNewRoles((prev) =>
+                        e.target.checked ? [...prev, r] : prev.filter((x) => x !== r),
+                      )
+                    }
+                  />
+                  {r}
+                </label>
+              ))}
+            </div>
+          </div>
+          <button
+            disabled={busy || !newEmail}
+            onClick={() => void onCreate()}
+            className="mt-6 border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea disabled:opacity-50"
+          >
+            {busy ? "Creating…" : "Create user"}
+          </button>
+        </div>
+      )}
+
+      <div className="mt-8 border border-ink/10 bg-white overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead className="bg-ink/5 text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">
+            <tr>
+              <th className="text-left p-3">Email</th>
+              <th className="text-left p-3">Roles</th>
+              <th className="text-left p-3">Last sign-in</th>
+              <th className="text-right p-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((u) => (
+              <tr key={u.id} className="border-t border-ink/10">
+                <td className="p-3">
+                  <div className="text-ink">{u.email}</div>
+                  {!u.email_confirmed_at && (
+                    <div className="text-[0.65rem] uppercase tracking-[0.22em] text-amber-600">
+                      Unverified
+                    </div>
+                  )}
+                </td>
+                <td className="p-3">
+                  <div className="flex flex-wrap gap-1">
+                    {allRoles.map((r) => {
+                      const has = u.roles.includes(r);
+                      return (
+                        <button
+                          key={r}
+                          disabled={!isSuper}
+                          onClick={() => void onToggleRole(u.id, u.roles, r, !has)}
+                          className={[
+                            "px-2 py-1 text-[0.65rem] uppercase tracking-[0.15em] border",
+                            has
+                              ? "bg-ink text-white border-ink"
+                              : "border-ink/20 text-ink/50 hover:text-ink",
+                            !isSuper ? "opacity-50 cursor-not-allowed" : "",
+                          ].join(" ")}
+                        >
+                          {r}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </td>
+                <td className="p-3 text-ink/60">
+                  {u.last_sign_in_at ? new Date(u.last_sign_in_at).toLocaleString() : "—"}
+                </td>
+                <td className="p-3 text-right space-x-2">
+                  {isSuper && (
+                    <>
+                      <button
+                        onClick={() => {
+                          setPwTarget({ id: u.id, email: u.email });
+                          setPwValue("");
+                          setPwConfirm("");
+                        }}
+                        className="text-xs uppercase tracking-[0.18em] text-ink/70 hover:text-ink"
+                      >
+                        Set password
+                      </button>
+                      <button
+                        onClick={() => void onSendReset(u.email)}
+                        className="text-xs uppercase tracking-[0.18em] text-ink/70 hover:text-ink"
+                      >
+                        Send reset
+                      </button>
+                      <button
+                        onClick={() => void onDelete(u.id, u.email)}
+                        className="text-xs uppercase tracking-[0.18em] text-red-600 hover:text-red-800"
+                      >
+                        Delete
+                      </button>
+                    </>
+                  )}
+                </td>
+              </tr>
+            ))}
+            {users.length === 0 && (
+              <tr>
+                <td colSpan={4} className="p-6 text-center text-ink/50">
+                  No users
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      {!isSuper && (
+        <p className="mt-4 text-xs text-ink/55">
+          Read-only view. Only superadministrators can create, delete or change roles.
+        </p>
+      )}
+
+      {pwTarget && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/50 p-4">
+          <div className="w-full max-w-md border border-ink/10 bg-white p-6">
+            <h3 className="font-serif text-lg">Change password</h3>
+            <p className="mt-1 text-xs text-ink/60">{pwTarget.email}</p>
+            <label className="mt-5 block">
+              <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                New password (min 8 characters)
+              </span>
+              <input
+                type="text"
+                autoFocus
+                value={pwValue}
+                onChange={(e) => setPwValue(e.target.value)}
+                className="mt-1 w-full border border-ink/20 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="mt-4 block">
+              <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                Repeat password
+              </span>
+              <input
+                type="text"
+                value={pwConfirm}
+                onChange={(e) => setPwConfirm(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") void submitPassword();
+                }}
+                className="mt-1 w-full border border-ink/20 px-3 py-2 text-sm"
+              />
+            </label>
+            <div className="mt-6 flex justify-end gap-3">
+              <button
+                onClick={() => setPwTarget(null)}
+                className="border border-ink/20 px-4 py-2 text-xs uppercase tracking-[0.22em] text-ink/70 hover:text-ink"
+              >
+                Cancel
+              </button>
+              <button
+                disabled={pwBusy || pwValue.length < 8 || pwValue !== pwConfirm}
+                onClick={() => void submitPassword()}
+                className="border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea disabled:opacity-50"
+              >
+                {pwBusy ? "Saving…" : "Save password"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/config/site-config.ts

@@ -67,6 +67,9 @@ export const EMPTY_COMPANY: SiteCompany = {
 /** Brand design tokens. Values are CSS colors written into the theme contract. */
 export type SiteBrandTokens = Record<string, string>;
 
+/** Serializable per-site extras. Kept primitive so the config can cross RPC. */
+export type SiteExtra = Record<string, string | number | boolean | null>;
+
 export type SiteConfigInput = {
   /** Machine key, e.g. "voyara". Lowercase, no spaces. */
   key: string;
@@ -86,7 +89,7 @@ export type SiteConfigInput = {
   brand?: SiteBrandTokens;
   features?: Partial<SiteFeatureFlags>;
   /** Optional free-form per-site extras shared code never reads. */
-  extra?: Record<string, unknown>;
+  extra?: SiteExtra;
 };
 
 export type SiteConfig = {
@@ -100,7 +103,7 @@ export type SiteConfig = {
   company: SiteCompany;
   brand: SiteBrandTokens;
   features: SiteFeatureFlags;
-  extra: Record<string, unknown>;
+  extra: SiteExtra;
 };
 
 function fail(message: string): never {