@bygghammar/cms-platform 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -9,6 +9,13 @@ 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.24.0",
+  "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,
@@ -120,7 +120,12 @@
     "./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/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"
@@ -196,4 +201,4 @@
   "bin": {
     "cms-platform-migrations": "scripts/sync-migrations.mjs"
   }
-}
+}

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>
+  );
+}

package/src/backoffice/NavigationView.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useMemo, useState } from "react";
+import type { ComponentType } from "react";
+import { RotateCcw, Save } from "lucide-react";
+import { toast } from "sonner";
+
+/** The two site-wide content sections this screen edits. */
+export type NavigationSectionKey = "nav" | "footer";
+
+/** Host-provided data and actions for the navigation & footer screen. */
+export type NavigationDeps = {
+  /** Saved overrides keyed by section, as stored in the CMS. */
+  overrides: Record<string, unknown> | undefined;
+  /** Resolved live site content (defaults merged with overrides). */
+  site: Record<string, unknown>;
+  /** Code defaults, used by "reset to default". */
+  defaults: Record<string, unknown>;
+  /** The host's section editor, already wired to its locales and media. */
+  SectionForm: ComponentType<{ value: unknown; onChange: (next: unknown) => void }>;
+  saveSection: (input: { data: { key: string; data: unknown } }) => Promise<unknown>;
+  refresh: () => Promise<unknown> | void;
+};
+
+function Editor({
+  deps,
+  sectionKey,
+  title,
+  description,
+}: {
+  deps: NavigationDeps;
+  sectionKey: NavigationSectionKey;
+  title: string;
+  description: string;
+}) {
+  const { overrides, site, defaults, SectionForm, saveSection, refresh } = deps;
+
+  const current = useMemo(() => {
+    const override = overrides?.[sectionKey];
+    return override ?? site[sectionKey];
+  }, [overrides, site, sectionKey]);
+
+  const [draft, setDraft] = useState<unknown>(current);
+  const [busy, setBusy] = useState(false);
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => {
+    setDraft(current);
+    setDirty(false);
+  }, [current]);
+
+  const onSave = async () => {
+    setBusy(true);
+    try {
+      await saveSection({ data: { key: sectionKey, data: draft } });
+      await refresh();
+      toast.success(`${title} saved`);
+      setDirty(false);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Could not save");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onReset = () => {
+    setDraft(defaults[sectionKey]);
+    setDirty(true);
+    toast.info("Reset to default — remember to save");
+  };
+
+  return (
+    <section className="border border-ink/10 bg-white">
+      <header className="border-b border-ink/10 px-6 py-5">
+        <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+          {sectionKey}
+          {dirty && <span className="ml-3 text-sea">unsaved</span>}
+        </div>
+        <h2 className="mt-2 font-serif text-2xl text-ink">{title}</h2>
+        <p className="mt-2 text-sm text-ink/60">{description}</p>
+      </header>
+
+      <div className="p-6">
+        <SectionForm
+          value={draft}
+          onChange={(next) => {
+            setDraft(next);
+            setDirty(true);
+          }}
+        />
+
+        <div className="mt-6 flex flex-wrap items-center gap-3">
+          <button
+            onClick={onSave}
+            disabled={busy || !dirty}
+            className="inline-flex items-center gap-2 bg-ink text-paper px-6 py-3 text-xs uppercase tracking-[0.22em] hover:bg-ink/85 disabled:opacity-50"
+          >
+            <Save className="size-4" />
+            {busy ? "Saving…" : "Save"}
+          </button>
+          <button
+            onClick={onReset}
+            className="inline-flex items-center gap-2 border border-ink/20 px-6 py-3 text-xs uppercase tracking-[0.22em] hover:border-ink"
+          >
+            <RotateCcw className="size-4" />
+            Reset to default
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/** Host-agnostic navigation & footer editor. */
+export function NavigationView({ deps }: { deps: NavigationDeps }) {
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Admin</div>
+      <h1 className="mt-2 font-serif text-3xl md:text-4xl text-ink">Navigation &amp; footer</h1>
+      <p className="mt-3 text-ink/65 max-w-2xl">
+        Site-wide top menu and footer. Changes apply to every page.
+      </p>
+
+      <div className="mt-8 grid gap-6 xl:grid-cols-2 items-start">
+        <Editor deps={deps} sectionKey="nav" title="Navigation" description="Top menu items." />
+        <Editor
+          deps={deps}
+          sectionKey="footer"
+          title="Footer"
+          description="Footer columns and legal."
+        />
+      </div>
+    </div>
+  );
+}

package/src/backoffice/TrackingView.tsx

@@ -0,0 +1,405 @@
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Plus, Save, Trash2, Copy } from "lucide-react";
+
+export type InjectionScope = "global" | "locale" | "domain";
+
+/** One injection profile row, structurally matching the host's own type. */
+export type InjectionProfileLike = {
+  id: string;
+  name: string;
+  scope_type: InjectionScope;
+  scope_value: string;
+  enabled: boolean;
+  head_html: string;
+  body_start_html: string;
+  body_end_html: string;
+  gtm_id: string;
+  ga4_id: string;
+  meta_pixel_id: string;
+  tiktok_pixel_id: string;
+  extra_meta: { name: string; content: string }[];
+  sort_order: number;
+};
+
+/** Host-provided data and actions for the code & tracking screen. */
+export type TrackingDeps = {
+  profiles: InjectionProfileLike[];
+  domains: { domain: string }[];
+  locales: readonly string[];
+  saveInjection: (input: { data: Omit<InjectionProfileLike, "id"> & { id?: string } }) => Promise<unknown>;
+  deleteInjection: (input: { data: { id: string } }) => Promise<unknown>;
+  refresh: () => Promise<unknown> | void;
+};
+
+const blankProfile = (): InjectionProfileLike => ({
+  id: "",
+  name: "New profile",
+  scope_type: "global",
+  scope_value: "",
+  enabled: false,
+  head_html: "",
+  body_start_html: "",
+  body_end_html: "",
+  gtm_id: "",
+  ga4_id: "",
+  meta_pixel_id: "",
+  tiktok_pixel_id: "",
+  extra_meta: [],
+  sort_order: 100,
+});
+
+function Label({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60 mb-1">
+      {children}
+    </span>
+  );
+}
+
+function Input({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+}) {
+  return (
+    <input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
+    />
+  );
+}
+
+function Code({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+}) {
+  return (
+    <textarea
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      spellCheck={false}
+      className="w-full min-h-[140px] border border-ink/20 bg-white p-3 font-mono text-xs text-ink focus:outline-none focus:border-sea resize-y"
+    />
+  );
+}
+
+/**
+ * Host-agnostic "Code & tracking" screen: manage injection profiles scoped to
+ * all sites, one language or one domain.
+ */
+export function TrackingView({ deps }: { deps: TrackingDeps }) {
+  const { profiles, domains, locales, saveInjection: save, deleteInjection: remove, refresh } = deps;
+
+  const [drafts, setDrafts] = useState<InjectionProfileLike[]>([]);
+  const [busy, setBusy] = useState<string | null>(null);
+
+  useEffect(() => {
+    setDrafts(profiles);
+  }, [profiles]);
+
+  const patch = (i: number, next: Partial<InjectionProfileLike>) =>
+    setDrafts((d) => d.map((p, idx) => (idx === i ? { ...p, ...next } : p)));
+
+  const onSave = async (p: InjectionProfileLike) => {
+    setBusy(p.id || p.name);
+    try {
+      await save({
+        data: {
+          id: p.id || undefined,
+          name: p.name,
+          scope_type: p.scope_type,
+          scope_value: p.scope_value,
+          enabled: p.enabled,
+          head_html: p.head_html,
+          body_start_html: p.body_start_html,
+          body_end_html: p.body_end_html,
+          gtm_id: p.gtm_id,
+          ga4_id: p.ga4_id,
+          meta_pixel_id: p.meta_pixel_id,
+          tiktok_pixel_id: p.tiktok_pixel_id,
+          extra_meta: p.extra_meta,
+          sort_order: p.sort_order,
+        },
+      });
+      toast.success("Saved — live within 30 seconds");
+      void refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not save");
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const onDelete = async (p: InjectionProfileLike, i: number) => {
+    if (!p.id) {
+      setDrafts((d) => d.filter((_, idx) => idx !== i));
+      return;
+    }
+    if (!confirm(`Delete "${p.name}"?`)) return;
+    try {
+      await remove({ data: { id: p.id } });
+      toast.success("Deleted");
+      void refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not delete");
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Admin</div>
+      <h1 className="mt-2 font-serif text-3xl md:text-4xl text-ink">Code &amp; tracking</h1>
+      <p className="mt-4 max-w-3xl text-sm text-ink/65">
+        Inject custom code into the public site and configure tracking pixels. Each profile can
+        target all sites, one language, or one domain — global first, then language, then domain.
+        Nothing is injected inside the backoffice.
+      </p>
+
+      <div className="mt-8 space-y-8">
+        {drafts.map((p, i) => (
+          <section key={p.id || `new-${i}`} className="border border-ink/10 bg-white">
+            <header className="flex flex-wrap items-center justify-between gap-3 border-b border-ink/10 px-5 py-4">
+              <div className="flex min-w-0 flex-wrap items-center gap-3">
+                <input
+                  value={p.name}
+                  onChange={(e) => patch(i, { name: e.target.value })}
+                  className="border border-transparent px-1 py-1 font-serif text-lg text-ink hover:border-ink/15 focus:border-sea focus:outline-none"
+                />
+                <label className="inline-flex items-center gap-2 text-sm text-ink">
+                  <input
+                    type="checkbox"
+                    checked={p.enabled}
+                    onChange={(e) => patch(i, { enabled: e.target.checked })}
+                  />
+                  Enabled
+                </label>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() =>
+                    setDrafts((d) => [
+                      ...d,
+                      { ...p, id: "", name: `${p.name} (copy)`, enabled: false },
+                    ])
+                  }
+                  className="inline-flex items-center gap-1 border border-ink/20 px-3 py-1.5 text-sm text-ink hover:border-sea"
+                >
+                  <Copy className="size-3.5" /> Duplicate
+                </button>
+                <button
+                  onClick={() => onDelete(p, i)}
+                  className="inline-flex items-center gap-1 border border-ink/20 px-3 py-1.5 text-sm text-red-600 hover:border-red-400"
+                >
+                  <Trash2 className="size-3.5" /> Delete
+                </button>
+                <button
+                  onClick={() => onSave(p)}
+                  disabled={busy !== null}
+                  className="inline-flex items-center gap-2 bg-ink px-4 py-1.5 text-sm text-white disabled:opacity-40"
+                >
+                  <Save className="size-3.5" /> Save
+                </button>
+              </div>
+            </header>
+
+            <div className="grid gap-6 p-5 lg:grid-cols-2">
+              <div className="space-y-4">
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <label className="block">
+                    <Label>Applies to</Label>
+                    <select
+                      value={p.scope_type}
+                      onChange={(e) =>
+                        patch(i, {
+                          scope_type: e.target.value as InjectionScope,
+                          scope_value: "",
+                        })
+                      }
+                      className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
+                    >
+                      <option value="global">All sites</option>
+                      <option value="locale">One language</option>
+                      <option value="domain">One domain</option>
+                    </select>
+                  </label>
+                  {p.scope_type === "locale" ? (
+                    <label className="block">
+                      <Label>Language</Label>
+                      <select
+                        value={p.scope_value}
+                        onChange={(e) => patch(i, { scope_value: e.target.value })}
+                        className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
+                      >
+                        <option value="">Select…</option>
+                        {locales.map((l) => (
+                          <option key={l} value={l}>
+                            {l.toUpperCase()}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : null}
+                  {p.scope_type === "domain" ? (
+                    <label className="block">
+                      <Label>Domain</Label>
+                      <input
+                        value={p.scope_value}
+                        onChange={(e) => patch(i, { scope_value: e.target.value })}
+                        list={`domains-${i}`}
+                        placeholder="dev.voyara.se"
+                        className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
+                      />
+                      <datalist id={`domains-${i}`}>
+                        {domains.map((d) => (
+                          <option key={d.domain} value={d.domain} />
+                        ))}
+                      </datalist>
+                    </label>
+                  ) : null}
+                </div>
+
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <label className="block">
+                    <Label>Google Tag Manager ID</Label>
+                    <Input
+                      value={p.gtm_id}
+                      onChange={(v) => patch(i, { gtm_id: v })}
+                      placeholder="GTM-XXXXXXX"
+                    />
+                  </label>
+                  <label className="block">
+                    <Label>Google Analytics 4 ID</Label>
+                    <Input
+                      value={p.ga4_id}
+                      onChange={(v) => patch(i, { ga4_id: v })}
+                      placeholder="G-XXXXXXXXXX"
+                    />
+                  </label>
+                  <label className="block">
+                    <Label>Meta (Facebook / Instagram) Pixel</Label>
+                    <Input
+                      value={p.meta_pixel_id}
+                      onChange={(v) => patch(i, { meta_pixel_id: v })}
+                      placeholder="1234567890"
+                    />
+                  </label>
+                  <label className="block">
+                    <Label>TikTok Pixel</Label>
+                    <Input
+                      value={p.tiktok_pixel_id}
+                      onChange={(v) => patch(i, { tiktok_pixel_id: v })}
+                      placeholder="CXXXXXXXXXXXXXXXX"
+                    />
+                  </label>
+                </div>
+
+                <div>
+                  <Label>Extra meta tags (verification codes)</Label>
+                  <div className="space-y-2">
+                    {p.extra_meta.map((m, mi) => (
+                      <div key={mi} className="flex gap-2">
+                        <input
+                          value={m.name}
+                          onChange={(e) =>
+                            patch(i, {
+                              extra_meta: p.extra_meta.map((x, xi) =>
+                                xi === mi ? { ...x, name: e.target.value } : x,
+                              ),
+                            })
+                          }
+                          placeholder="google-site-verification"
+                          className="w-1/2 border border-ink/20 px-3 py-2 text-sm focus:outline-none focus:border-sea"
+                        />
+                        <input
+                          value={m.content}
+                          onChange={(e) =>
+                            patch(i, {
+                              extra_meta: p.extra_meta.map((x, xi) =>
+                                xi === mi ? { ...x, content: e.target.value } : x,
+                              ),
+                            })
+                          }
+                          placeholder="value"
+                          className="w-1/2 border border-ink/20 px-3 py-2 text-sm focus:outline-none focus:border-sea"
+                        />
+                        <button
+                          onClick={() =>
+                            patch(i, {
+                              extra_meta: p.extra_meta.filter((_, xi) => xi !== mi),
+                            })
+                          }
+                          className="p-2 text-red-500 hover:text-red-700"
+                        >
+                          <Trash2 className="size-3.5" />
+                        </button>
+                      </div>
+                    ))}
+                    <button
+                      onClick={() =>
+                        patch(i, { extra_meta: [...p.extra_meta, { name: "", content: "" }] })
+                      }
+                      className="inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-sm text-ink hover:border-sea"
+                    >
+                      <Plus className="size-4" /> Add meta tag
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <label className="block">
+                  <Label>Inside &lt;head&gt;</Label>
+                  <Code
+                    value={p.head_html}
+                    onChange={(v) => patch(i, { head_html: v })}
+                    placeholder="<!-- scripts, meta tags, verification -->"
+                  />
+                </label>
+                <label className="block">
+                  <Label>After &lt;body&gt; tag</Label>
+                  <Code
+                    value={p.body_start_html}
+                    onChange={(v) => patch(i, { body_start_html: v })}
+                    placeholder="<!-- noscript pixels, chat widgets -->"
+                  />
+                </label>
+                <label className="block">
+                  <Label>Before &lt;/body&gt; tag (footer)</Label>
+                  <Code
+                    value={p.body_end_html}
+                    onChange={(v) => patch(i, { body_end_html: v })}
+                    placeholder="<!-- deferred scripts -->"
+                  />
+                </label>
+                <p className="text-xs text-ink/50">
+                  Tracking IDs above generate their official snippets automatically — you only need
+                  raw code for anything not covered.
+                </p>
+              </div>
+            </div>
+          </section>
+        ))}
+      </div>
+
+      <button
+        onClick={() => setDrafts((d) => [...d, blankProfile()])}
+        className="mt-8 inline-flex items-center gap-2 border border-ink/20 px-5 py-2.5 text-sm text-ink hover:border-sea"
+      >
+        <Plus className="size-4" /> New profile
+      </button>
+    </div>
+  );
+}

package/src/backoffice/VersionView.tsx

@@ -0,0 +1,109 @@
+import { Package } from "lucide-react";
+
+/** Build metadata injected at compile time by the host. */
+export type PlatformBuildInfo = {
+  appVersion?: string | null;
+  buildTime?: string | null;
+  platformVersion?: string | null;
+  platformRange?: string | null;
+};
+
+/** One published platform release. */
+export type PlatformRelease = {
+  version: string;
+  publishedAt: string | null;
+  current?: boolean;
+};
+
+/** Host-provided data for the version screen. */
+export type VersionDeps = {
+  build: PlatformBuildInfo | undefined;
+  releases: PlatformRelease[];
+  loading?: boolean;
+  /** Package name shown in the release history copy. */
+  packageName?: string;
+};
+
+function fmt(value: string | null | undefined) {
+  if (!value) return "—";
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return value;
+  return d.toLocaleString("sv-SE", { timeZone: "UTC", hour12: false }) + " UTC";
+}
+
+/** Host-agnostic CMS & platform version screen. */
+export function VersionView({ deps }: { deps: VersionDeps }) {
+  const { build, releases, loading, packageName = "@bygghammar/cms-platform" } = deps;
+
+  return (
+    <div className="p-8 md:p-12 w-full max-w-4xl">
+      <div className="flex items-center gap-3">
+        <Package className="size-5 text-ink/70" />
+        <h2 className="font-serif text-xl text-ink">CMS &amp; platform version</h2>
+      </div>
+      <p className="mt-2 text-sm text-ink/60">
+        Which build of this site is live and which release of the shared CMS platform package it
+        runs on.
+      </p>
+
+      {loading ? (
+        <p className="mt-8 text-sm text-ink/50">Loading…</p>
+      ) : (
+        <>
+          <dl className="mt-8 grid gap-4 sm:grid-cols-2">
+            {[
+              { label: "CMS build", value: build?.appVersion ?? "—" },
+              { label: "Built at", value: fmt(build?.buildTime) },
+              { label: "Platform package", value: build?.platformVersion ?? "—" },
+              { label: "Declared range", value: build?.platformRange ?? "—" },
+            ].map((row) => (
+              <div key={row.label} className="border border-ink/10 bg-white p-5">
+                <dt className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/50">
+                  {row.label}
+                </dt>
+                <dd className="mt-2 font-mono text-sm text-ink">{row.value}</dd>
+              </div>
+            ))}
+          </dl>
+
+          <h3 className="mt-12 font-serif text-lg text-ink">Latest platform releases</h3>
+          <p className="mt-1 text-sm text-ink/60">
+            The three most recent published versions of {packageName} with their publish dates.
+          </p>
+          <div className="mt-4 border border-ink/10 bg-white">
+            {releases.length === 0 ? (
+              <p className="p-5 text-sm text-ink/50">Release history unavailable right now.</p>
+            ) : (
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-ink/10 text-left text-[0.7rem] uppercase tracking-[0.18em] text-ink/50">
+                    <th className="px-5 py-3">Version</th>
+                    <th className="px-5 py-3">Published</th>
+                    <th className="px-5 py-3">Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {releases.map((r) => (
+                    <tr key={r.version} className="border-b border-ink/5 last:border-0">
+                      <td className="px-5 py-3 font-mono text-ink">{r.version}</td>
+                      <td className="px-5 py-3 text-ink/70">{fmt(r.publishedAt)}</td>
+                      <td className="px-5 py-3">
+                        {r.current ? (
+                          <span className="inline-flex items-center rounded-full bg-sea/10 px-3 py-1 text-[0.7rem] uppercase tracking-[0.16em] text-sea">
+                            In use
+                          </span>
+                        ) : (
+                          <span className="text-ink/40">—</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}