@bygghammar/cms-platform 0.23.1 → 0.25.0

package/CHANGELOG.md

@@ -9,6 +9,23 @@ 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.25.0
+
+- Added shared backoffice views: `TrackingView` (code & tracking profiles),
+  `DomainsView` (languages & domains), `NavigationView` (navigation & footer),
+  `ContactDetailsView` and `VersionView`. Each takes host-supplied data and
+  actions, so site routes become thin adapters.
+
+## 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.1",
+  "version": "0.25.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,17 @@
     "./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",
+    "./backoffice/TrackingView": "./src/backoffice/TrackingView.tsx",
+    "./backoffice/DomainsView": "./src/backoffice/DomainsView.tsx",
+    "./backoffice/NavigationView": "./src/backoffice/NavigationView.tsx",
+    "./backoffice/ContactDetailsView": "./src/backoffice/ContactDetailsView.tsx",
+    "./backoffice/VersionView": "./src/backoffice/VersionView.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"
@@ -191,4 +201,4 @@
   "bin": {
     "cms-platform-migrations": "scripts/sync-migrations.mjs"
   }
-}
+}

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/ContactDetailsView.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+/** One editable company field. */
+export type ContactField = { key: string; label: string; type?: string };
+
+/** The canonical company detail fields every site shares. */
+export const CONTACT_FIELDS: ContactField[] = [
+  { key: "locationName", label: "Name" },
+  { key: "street", label: "Address" },
+  { key: "postCode", label: "Post code" },
+  { key: "city", label: "City" },
+  { key: "country", label: "Country" },
+  { key: "legalName", label: "Company details (legal name)" },
+  { key: "orgNumber", label: "Org. number" },
+  { key: "email", label: "Email", type: "email" },
+  { key: "phone", label: "Phone", type: "tel" },
+];
+
+/** Host-provided data and actions for the contact details screen. */
+export type ContactDetailsDeps = {
+  /** Code defaults for the company block. */
+  defaults: Record<string, string>;
+  /** Saved override for the company block, if any. */
+  stored: Record<string, string> | undefined;
+  loading?: boolean;
+  /** Fields to render; defaults to `CONTACT_FIELDS`. */
+  fields?: ContactField[];
+  saveSection: (input: { data: { key: string; data: unknown } }) => Promise<unknown>;
+  refresh: () => Promise<unknown> | void;
+};
+
+const input =
+  "mt-1 w-full border border-ink/20 bg-white px-3 py-2 text-sm focus:border-sea focus:outline-none";
+const lbl = "text-[0.65rem] uppercase tracking-[0.22em] text-ink/55";
+
+/**
+ * Host-agnostic contact details screen. These company details are the single
+ * source of truth for the contact section, the footer and structured data.
+ */
+export function ContactDetailsView({ deps }: { deps: ContactDetailsDeps }) {
+  const { defaults, stored, loading, fields = CONTACT_FIELDS, saveSection, refresh } = deps;
+
+  const [form, setForm] = useState<Record<string, string>>(defaults);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (stored && typeof stored === "object") setForm({ ...defaults, ...stored });
+  }, [stored, defaults]);
+
+  const set = (key: string, value: string) => setForm((f) => ({ ...f, [key]: value }));
+
+  async function onSave() {
+    setSaving(true);
+    try {
+      await saveSection({ data: { key: "company", data: form } });
+      await refresh();
+      toast.success("Contact details saved");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not save");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Settings</div>
+      <h2 className="mt-2 font-serif text-3xl text-ink">Contact details</h2>
+      <p className="mt-3 text-sm text-ink/65">
+        These company details are the single source of truth. They are used in the website contact
+        section, the footer and the structured data for search engines.
+      </p>
+
+      <div className="mt-10 grid gap-5 sm:grid-cols-2">
+        {fields.map((f) => (
+          <label key={f.key} className="block">
+            <span className={lbl}>{f.label}</span>
+            <input
+              className={input}
+              type={f.type ?? "text"}
+              value={form[f.key] ?? ""}
+              onChange={(e) => set(f.key, e.target.value)}
+            />
+          </label>
+        ))}
+      </div>
+
+      <div className="mt-10 flex items-center gap-4">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={saving || !!loading}
+          className="bg-ink px-6 py-3 text-xs uppercase tracking-[0.22em] text-paper disabled:opacity-50"
+        >
+          {saving ? "Saving..." : "Save details"}
+        </button>
+        <button
+          type="button"
+          onClick={() => setForm(defaults)}
+          className="text-xs uppercase tracking-[0.22em] text-ink/55 hover:text-ink"
+        >
+          Reset to defaults
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/backoffice/DomainsView.tsx

@@ -0,0 +1,264 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { Trash2, Plus, Check, X } from "lucide-react";
+
+/** One language-to-domain mapping. */
+export type LocaleDomainRow = {
+  locale: string;
+  domain: string;
+  isDefault: boolean;
+  isAdminDomain: boolean;
+};
+
+/** Host-provided data, actions and navigation for the domains screen. */
+export type DomainsDeps = {
+  domains: LocaleDomainRow[];
+  locales: readonly string[];
+  defaultLocale: string;
+  /** Path back to the backoffice home, e.g. `/kontoret`. */
+  backPath: string;
+  /** Example domain shown as the input placeholder. */
+  domainPlaceholder?: string;
+  saveDomain: (input: { data: LocaleDomainRow }) => Promise<unknown>;
+  deleteDomain: (input: { data: { locale: string } }) => Promise<unknown>;
+  refresh: () => Promise<unknown> | void;
+};
+
+/** Host-agnostic languages & domains screen. */
+export function DomainsView({ deps }: { deps: DomainsDeps }) {
+  const {
+    domains,
+    locales,
+    defaultLocale: DEFAULT_LOCALE,
+    backPath,
+    domainPlaceholder = "www.example.com",
+    saveDomain: save,
+    deleteDomain: del,
+    refresh,
+  } = deps;
+  const [busy, setBusy] = useState(false);
+  const [editing, setEditing] = useState<LocaleDomainRow | null>(null);
+  const [draft, setDraft] = useState<Partial<LocaleDomainRow>>({
+    locale: DEFAULT_LOCALE,
+    domain: "",
+    isDefault: false,
+    isAdminDomain: false,
+  });
+
+  const reset = () => {
+    setEditing(null);
+    setDraft({
+      locale: DEFAULT_LOCALE,
+      domain: "",
+      isDefault: false,
+      isAdminDomain: false,
+    });
+  };
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!draft.locale || !draft.domain) return;
+    setBusy(true);
+    try {
+      await save({
+        data: {
+          locale: draft.locale,
+          domain: draft.domain,
+          isDefault: !!draft.isDefault,
+          isAdminDomain: !!draft.isAdminDomain,
+        },
+      });
+      await refresh();
+      toast.success("Domain saved");
+      reset();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Could not save");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const remove = async (locale: string) => {
+    if (!confirm("Remove this domain mapping?")) return;
+    setBusy(true);
+    try {
+      await del({ data: { locale } });
+      await refresh();
+      toast.success("Domain removed");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Could not remove");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const startEdit = (d: LocaleDomainRow) => {
+    setEditing(d);
+    setDraft({ ...d });
+  };
+
+  return (
+    <main className="p-6 md:p-10 w-full">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50">Backoffice</div>
+          <h1 className="mt-1 font-serif text-3xl">Languages & domains</h1>
+        </div>
+        <a
+          href={backPath}
+          className="text-xs uppercase tracking-[0.22em] text-ink/60 hover:text-ink"
+        >
+          ← Back
+        </a>
+      </div>
+
+      <p className="mt-4 max-w-2xl text-sm text-ink/70">
+        Map each language to its own domain. Mark one domain as the default (fallback) and one as
+        the admin domain where the backoffice is only available.
+      </p>
+
+      <section className="mt-10">
+        <h2 className="font-serif text-xl">Current domains</h2>
+        <div className="mt-4 overflow-x-auto border border-ink/10">
+          <table className="w-full text-sm">
+            <thead className="bg-ink text-paper text-left">
+              <tr>
+                <th className="px-4 py-3 font-medium">Language</th>
+                <th className="px-4 py-3 font-medium">Domain</th>
+                <th className="px-4 py-3 font-medium">Default</th>
+                <th className="px-4 py-3 font-medium">Admin</th>
+                <th className="px-4 py-3 font-medium"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {domains.length === 0 && (
+                <tr>
+                  <td colSpan={5} className="px-4 py-8 text-center text-ink/50">
+                    No domains configured yet.
+                  </td>
+                </tr>
+              )}
+              {domains.map((d) => (
+                <tr
+                  key={d.locale}
+                  className="border-b border-ink/5 last:border-b-0 hover:bg-ink/[0.02]"
+                >
+                  <td className="px-4 py-3 font-medium uppercase">{d.locale}</td>
+                  <td className="px-4 py-3 font-mono text-ink/80">{d.domain}</td>
+                  <td className="px-4 py-3">
+                    {d.isDefault ? (
+                      <Check className="size-4 text-sea" />
+                    ) : (
+                      <X className="size-4 text-ink/30" />
+                    )}
+                  </td>
+                  <td className="px-4 py-3">
+                    {d.isAdminDomain ? (
+                      <Check className="size-4 text-sea" />
+                    ) : (
+                      <X className="size-4 text-ink/30" />
+                    )}
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <button
+                        onClick={() => startEdit(d)}
+                        className="text-xs uppercase tracking-[0.15em] text-ink/70 hover:text-ink underline underline-offset-2"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => remove(d.locale)}
+                        disabled={busy}
+                        className="p-1.5 text-ink/50 hover:text-red-600 transition-colors"
+                        aria-label="Remove"
+                      >
+                        <Trash2 className="size-4" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section className="mt-12 max-w-xl">
+        <h2 className="font-serif text-xl">{editing ? "Edit domain" : "Add domain"}</h2>
+        <form onSubmit={submit} className="mt-4 space-y-4">
+          <label className="block">
+            <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">Language</span>
+            <select
+              value={draft.locale}
+              onChange={(e) => setDraft((d) => ({ ...d, locale: e.target.value }))}
+              className="mt-2 w-full border border-ink/15 bg-white px-4 py-3 text-ink focus:border-sea focus:outline-none"
+            >
+              {locales.map((l) => (
+                <option key={l} value={l}>
+                  {l.toUpperCase()}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="block">
+            <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">Domain</span>
+            <input
+              type="text"
+              required
+              value={draft.domain}
+              onChange={(e) => setDraft((d) => ({ ...d, domain: e.target.value }))}
+              placeholder={domainPlaceholder}
+              className="mt-2 w-full border border-ink/15 bg-white px-4 py-3 text-ink placeholder:text-ink/40 focus:border-sea focus:outline-none"
+            />
+            <span className="mt-1 block text-xs text-ink/50">
+              Enter the domain without https:// and without trailing slash.
+            </span>
+          </label>
+
+          <div className="flex flex-col gap-3 pt-2">
+            <label className="flex items-center gap-3 text-sm text-ink/80">
+              <input
+                type="checkbox"
+                checked={!!draft.isDefault}
+                onChange={(e) => setDraft((d) => ({ ...d, isDefault: e.target.checked }))}
+                className="size-4 border-ink/30 text-sea focus:ring-sea"
+              />
+              Default domain (fallback when nothing else matches)
+            </label>
+            <label className="flex items-center gap-3 text-sm text-ink/80">
+              <input
+                type="checkbox"
+                checked={!!draft.isAdminDomain}
+                onChange={(e) => setDraft((d) => ({ ...d, isAdminDomain: e.target.checked }))}
+                className="size-4 border-ink/30 text-sea focus:ring-sea"
+              />
+              Admin domain (/kontoret only accessible here)
+            </label>
+          </div>
+
+          <div className="flex items-center gap-3 pt-4">
+            <button
+              type="submit"
+              disabled={busy}
+              className="inline-flex items-center gap-2 border border-ink bg-ink px-6 py-3 text-xs uppercase tracking-[0.22em] text-paper hover:bg-paper hover:text-ink transition-colors disabled:opacity-60"
+            >
+              <Plus className="size-4" />
+              {editing ? "Save changes" : "Add domain"}
+            </button>
+            {editing && (
+              <button
+                type="button"
+                onClick={reset}
+                className="text-xs uppercase tracking-[0.22em] text-ink/60 hover:text-ink underline underline-offset-4"
+              >
+                Cancel
+              </button>
+            )}
+          </div>
+        </form>
+      </section>
+    </main>
+  );
+}