@bygghammar/cms-platform 0.41.0 → 0.43.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.42.0
+
+- Backoffice host registry gains email-settings, locale-domain, shared-content,
+  editor-component and backup adapters plus site placeholders.
+- New package-owned routes: `AdminLayoutRoute`, `AdminOverviewRoute` (cards
+  driven by `SiteConfig.features` and superadmin role), `EmailSettingsRoute`,
+  `NavigationRoute`, `DomainsRoute`, `ReviewsRoute` and `BackupRoute`.
+- `backofficePaths()` now derives every admin path from `backofficePath`.
+
 ## 0.41.0
 
 - New `backoffice/routes`: a host registry (`registerBackofficeHost`) plus package-owned

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.41.0",
+  "version": "0.43.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,
@@ -157,7 +157,8 @@
     "./server/backup-core": "./src/server/backup-core.ts",
     "./backoffice/shell": "./src/backoffice/shell/index.ts",
     "./backoffice/routes": "./src/backoffice/routes/index.tsx",
-    "./backoffice/routes/host": "./src/backoffice/routes/host.ts"
+    "./backoffice/routes/host": "./src/backoffice/routes/host.ts",
+    "./backoffice/inspectors": "./src/backoffice/inspectors/index.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/inspectors/index.tsx

@@ -0,0 +1,784 @@
+/**
+ * Site-agnostic block inspector router.
+ *
+ * The per-block inspectors live in ./blocks. This module owns the inspectors
+ * that need host plumbing (shared content sections, trips/cruises, forms) plus
+ * the router that maps a block type to its inspector. Everything site-specific
+ * — server functions, section defaults, editor components, wording — comes from
+ * the backoffice host registry.
+ */
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import { Plus, Trash2, ArrowUp, ArrowDown, Save, RotateCcw, Crosshair } from "lucide-react";
+
+import type { BlockInstance, BlockProps, TripListProps, TripItem } from "../../blocks/types";
+import { tripNumber } from "../../trips";
+import { FocalImage, FocusPicker } from "../../host";
+import {
+  getSharedDrafts,
+  setSharedDraft,
+  clearSharedDraft,
+  subscribeSharedDrafts,
+} from "../../cms/shared-draft-store";
+import { backofficeHost, backofficePaths } from "../routes/host";
+import { InspectorSection, LocalizedField, TextField } from "./fields";
+import {
+  HeroInspector,
+  IntroInspector,
+  FaqInspector,
+  InstagramInspector,
+  ProseInspector,
+  RichTextInspector,
+  HeroFullInspector,
+  ImageMarqueeInspector,
+  LinkTilesInspector,
+  CabinTabsInspector,
+  PriceTableInspector,
+  IconGridInspector,
+  ChecklistInspector,
+  CtaBannerInspector,
+  MediaSplitInspector,
+  type BlockPatchProps,
+} from "./blocks";
+
+/** Localized string map as the form block stores its copy. */
+type FormBlockCopy = {
+  formKey?: string;
+  eyebrow?: Record<string, string>;
+  title?: Record<string, string>;
+  lead?: Record<string, string>;
+  tone?: string;
+  anchor?: string;
+};
+
+function uid(prefix = "f") {
+  return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+}
+
+/* ---------------- GlobalRef ---------------- */
+function GlobalRefInspector({
+  block,
+  patch,
+  globalSections,
+}: BlockPatchProps & {
+  globalSections: { key: string; name: string }[];
+}) {
+  const p = (block.props ?? {}) as { sectionKey?: string };
+  return (
+    <InspectorSection title="Global block">
+      <label className="block space-y-1.5">
+        <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Section</span>
+        <select
+          value={p.sectionKey ?? ""}
+          onChange={(e) => patch({ sectionKey: e.target.value } as unknown as BlockProps)}
+          className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+        >
+          <option value="">— pick one —</option>
+          {globalSections.map((g) => (
+            <option key={g.key} value={g.key}>
+              {g.name} ({g.key})
+            </option>
+          ))}
+        </select>
+      </label>
+    </InspectorSection>
+  );
+}
+
+/* ---------------- Shared section editor (inline) ---------------- */
+function SharedSectionEditor({ sectionKey }: { sectionKey: string }) {
+  const host = backofficeHost();
+  const overrides = host.content.useOverrides();
+  const site = host.content.useSite();
+  const qc = useQueryClient();
+  const save = useServerFn(host.fns.saveContentSection);
+
+  const saved = useMemo(() => {
+    const o = overrides?.[sectionKey];
+    const base = (site as unknown as Record<string, unknown>)[sectionKey];
+    const def = host.content.defaultForSection(sectionKey) ?? base;
+    // Older overrides predate newer fields (e.g. contact.formTitle/formKey) —
+    // merge the defaults in so those inputs still render.
+    return o ? host.content.withSectionDefaults(o, def) : base;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sectionKey, JSON.stringify(overrides?.[sectionKey] ?? null)]);
+
+  const current = saved;
+
+  const [draft, setDraft] = useState<unknown>(() => getSharedDrafts()[sectionKey] ?? current);
+  const [dirty, setDirty] = useState(() => getSharedDrafts()[sectionKey] !== undefined);
+  const [busy, setBusy] = useState(false);
+
+  // Re-seed only when the persisted value actually changes (identity-stable).
+  useEffect(() => {
+    const pending = getSharedDrafts()[sectionKey];
+    setDraft(pending ?? current);
+    setDirty(pending !== undefined);
+  }, [current, sectionKey]);
+
+  if (current === undefined) {
+    const known = host.content.editableSectionKeys.includes(sectionKey);
+    return (
+      <InspectorSection title="Shared content">
+        {known ? (
+          <Link
+            to={`${backofficePaths().sections}/${sectionKey}`}
+            className="inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-sm hover:border-sea"
+          >
+            Open “{sectionKey}” section
+          </Link>
+        ) : (
+          <p className="text-[0.7rem] text-ink/50">
+            This block has no shared content section. Use the overrides above.
+          </p>
+        )}
+      </InspectorSection>
+    );
+  }
+
+  const onSave = async () => {
+    setBusy(true);
+    try {
+      await save({ data: { key: sectionKey, data: draft } });
+      clearSharedDraft(sectionKey);
+      await qc.invalidateQueries({ queryKey: host.content.overridesQueryKey });
+      toast.success("Shared content saved");
+      setDirty(false);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Save failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onReset = () => {
+    const def = host.content.defaultForSection(sectionKey);
+    setDraft(def);
+    setSharedDraft(sectionKey, def);
+    setDirty(true);
+  };
+
+  return (
+    <InspectorSection title={`Shared content — "${sectionKey}" (all pages)`}>
+      <p className="text-[0.7rem] text-ink/50">
+        Edits here affect every page that uses this block and show live in the canvas. They are
+        stored when you press Save shared, Save draft or Publish.
+      </p>
+      <host.components.SectionForm
+        value={draft}
+        onChange={(next) => {
+          setDraft(next);
+          setSharedDraft(sectionKey, next);
+          setDirty(true);
+        }}
+      />
+
+      <div className="flex flex-wrap items-center gap-2 pt-1">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={!dirty || busy}
+          className="inline-flex items-center gap-1.5 bg-ink text-paper px-3 py-1.5 text-[0.7rem] uppercase tracking-widest hover:bg-ink/85 disabled:opacity-40"
+        >
+          <Save className="size-3.5" /> {busy ? "Saving…" : "Save shared"}
+        </button>
+        <button
+          type="button"
+          onClick={onReset}
+          className="inline-flex items-center gap-1.5 border border-ink/20 px-3 py-1.5 text-[0.7rem] uppercase tracking-widest hover:border-ink"
+        >
+          <RotateCcw className="size-3.5" /> Reset to default
+        </button>
+        <Link
+          to={`${backofficePaths().sections}/${sectionKey}`}
+          className="ml-auto text-[0.7rem] underline text-ink/60 hover:text-ink"
+        >
+          Open full editor
+        </Link>
+      </div>
+    </InspectorSection>
+  );
+}
+
+/* ---------------- Gallery responsive preview ---------------- */
+function GalleryResponsivePreview() {
+  const host = backofficeHost();
+  const overrides = host.content.useOverrides();
+  const site = host.content.useSite();
+  const qc = useQueryClient();
+  const save = useServerFn(host.fns.saveContentSection);
+  const [pending, setPending] = useState<Record<string, unknown>>(() => getSharedDrafts());
+
+  useEffect(() => subscribeSharedDrafts(setPending), []);
+
+  const shared = useMemo(() => {
+    const p = pending["gallery"] as
+      { images?: Array<{ src: string; alt: Record<string, string> }> } | undefined;
+    if (p) return p;
+    const o =
+      (overrides?.gallery as { images?: Array<{ src: string; alt: Record<string, string> }> }) ??
+      undefined;
+    return (
+      o ??
+      (
+        site as unknown as {
+          gallery: { images: Array<{ src: string; alt: Record<string, string> }> };
+        }
+      ).gallery
+    );
+  }, [pending, overrides, site]);
+
+  const images = (shared?.images ?? []) as Array<{ src: string; alt: Record<string, string> }>;
+  const [device, setDevice] = useState<"desktop" | "tablet" | "mobile">("desktop");
+  const [busy, setBusy] = useState(false);
+  const [focusSrc, setFocusSrc] = useState<string | null>(null);
+
+  const persist = async (nextImages: typeof images) => {
+    const next = { ...(shared as object), images: nextImages };
+    setBusy(true);
+    try {
+      await save({ data: { key: "gallery", data: next } });
+      clearSharedDraft("gallery");
+      await qc.invalidateQueries({ queryKey: host.content.overridesQueryKey });
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Save failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= images.length) return;
+    const next = images.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    void persist(next);
+  };
+
+  // Bento visual: desktop = 3 cols, first spans 2 rows; tablet = 2 cols; mobile = 1 col.
+  const gridClass =
+    device === "desktop"
+      ? "grid-cols-3 grid-rows-2 h-56"
+      : device === "tablet"
+        ? "grid-cols-2 auto-rows-[80px]"
+        : "grid-cols-1 auto-rows-[80px]";
+  const frameWidth = device === "desktop" ? "100%" : device === "tablet" ? 320 : 200;
+
+  return (
+    <InspectorSection title="Responsive preview & order">
+      <p className="text-[0.7rem] text-ink/50">
+        One ordering drives all breakpoints. Reorder here to update every device.
+      </p>
+      <div className="flex items-center gap-1 pb-2">
+        {(["desktop", "tablet", "mobile"] as const).map((d) => (
+          <button
+            key={d}
+            type="button"
+            onClick={() => setDevice(d)}
+            className={`px-2 py-1 text-[0.65rem] uppercase tracking-widest border ${
+              device === d
+                ? "border-sea bg-ice/50 text-ink"
+                : "border-ink/15 text-ink/55 hover:text-ink"
+            }`}
+          >
+            {d}
+          </button>
+        ))}
+        {busy ? <span className="text-[0.65rem] text-ink/50 ml-auto">Saving…</span> : null}
+      </div>
+      <div className="bg-ink/5 p-3 flex justify-center">
+        <div style={{ width: frameWidth }} className="max-w-full">
+          <div className={`grid gap-1.5 ${gridClass}`}>
+            {images.map((img, i) => (
+              <div
+                key={i}
+                className={`relative overflow-hidden border border-ink/10 bg-white ${
+                  device === "desktop" && i === 0 ? "row-span-2" : ""
+                }`}
+              >
+                {img.src ? (
+                  <button
+                    type="button"
+                    onClick={() => setFocusSrc(img.src)}
+                    className="block h-full w-full"
+                    title="Set focus point"
+                  >
+                    <FocalImage
+                      src={img.src}
+                      responsive={false}
+                      alt=""
+                      className="h-full w-full object-cover"
+                    />
+                  </button>
+                ) : (
+                  <div className="h-full w-full grid place-items-center text-[0.6rem] text-ink/40">
+                    empty
+                  </div>
+                )}
+                <span className="absolute top-1 left-1 bg-ink/70 text-paper text-[0.6rem] px-1">
+                  {i + 1}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="pt-2 space-y-1">
+        {images.map((img, i) => (
+          <div key={i} className="flex items-center gap-2 border border-ink/10 px-2 py-1">
+            <span className="text-[0.65rem] uppercase tracking-widest text-ink/55 w-6">
+              {i + 1}
+            </span>
+            <div className="h-8 w-10 shrink-0 bg-ink/5 overflow-hidden">
+              {img.src ? (
+                <FocalImage
+                  src={img.src}
+                  responsive={false}
+                  alt=""
+                  className="h-full w-full object-cover"
+                />
+              ) : null}
+            </div>
+            <span className="flex-1 truncate text-[0.7rem] text-ink/70">
+              {img.alt?.sv || img.alt?.en || img.src.split("/").pop()}
+            </span>
+            <button
+              type="button"
+              onClick={() => setFocusSrc(img.src)}
+              disabled={!img.src}
+              className="p-1 text-ink/50 hover:text-ink disabled:opacity-30"
+              title="Set focus point"
+            >
+              <Crosshair className="size-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={() => move(i, -1)}
+              disabled={i === 0 || busy}
+              className="p-1 text-ink/50 hover:text-ink disabled:opacity-30"
+              title="Move up"
+            >
+              <ArrowUp className="size-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={() => move(i, 1)}
+              disabled={i === images.length - 1 || busy}
+              className="p-1 text-ink/50 hover:text-ink disabled:opacity-30"
+              title="Move down"
+            >
+              <ArrowDown className="size-3.5" />
+            </button>
+          </div>
+        ))}
+      </div>
+      {focusSrc ? (
+        <FocusPicker
+          src={focusSrc}
+          modal
+          title={focusSrc.split("/").pop()}
+          onClose={() => setFocusSrc(null)}
+        />
+      ) : null}
+    </InspectorSection>
+  );
+}
+
+function GlobalContentNotice({ blockType }: { blockType: string }) {
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-ink/70">
+        This block renders shared site content. Edit its text, images and links in the Sections
+        editor for consistent styling across every page.
+      </p>
+      <Link
+        to={`${backofficePaths().sections}/${blockType}`}
+        className="inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-sm hover:border-sea"
+      >
+        Open “{blockType}” section
+      </Link>
+    </div>
+  );
+}
+
+/* ---------------- Trips list ---------------- */
+function TripListInspector({ block, patch }: BlockPatchProps) {
+  const labels = backofficeHost().labels?.trips;
+  const one = labels?.singular ?? "Trip";
+  const many = labels?.plural ?? "Trips";
+  const p = (block.props ?? {}) as TripListProps;
+  const items = p.items ?? [];
+  const update = (next: TripListProps) => patch(next as unknown as BlockProps);
+  const setItem = (i: number, item: TripItem) => {
+    const next = items.slice();
+    next[i] = item;
+    update({ ...p, items: next });
+  };
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    const next = items.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    update({ ...p, items: next });
+  };
+
+  return (
+    <>
+      <InspectorSection title="Heading">
+        <LocalizedField
+          label="Eyebrow"
+          value={p.eyebrow}
+          onChange={(v) => update({ ...p, eyebrow: v })}
+        />
+        <LocalizedField
+          label="Title"
+          value={p.title}
+          onChange={(v) => update({ ...p, title: v })}
+        />
+        <LocalizedField
+          label="Lead"
+          multiline
+          value={p.lead}
+          onChange={(v) => update({ ...p, lead: v })}
+        />
+        <LocalizedField
+          label="Note"
+          multiline
+          value={p.note}
+          onChange={(v) => update({ ...p, note: v })}
+        />
+        <TextField
+          label="Anchor id (optional)"
+          value={p.anchor ?? ""}
+          onChange={(v) => update({ ...p, anchor: v })}
+        />
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+            Background
+          </span>
+          <select
+            value={p.tone ?? "white"}
+            onChange={(e) => update({ ...p, tone: e.target.value as TripListProps["tone"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="white">White</option>
+            <option value="paper">Paper</option>
+          </select>
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+            Columns
+          </span>
+          <select
+            value={String(p.columns ?? 3)}
+            onChange={(e) =>
+              update({ ...p, columns: Number(e.target.value) as TripListProps["columns"] })
+            }
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+          </select>
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+            {`${one} source`}
+          </span>
+          <select
+            value={p.source ?? "global"}
+            onChange={(e) => update({ ...p, source: e.target.value as TripListProps["source"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="global">{`${many} (single source of truth)`}</option>
+            <option value="custom">Custom list (this block only)</option>
+          </select>
+        </label>
+        {(p.source ?? "global") === "global" ? (
+          <>
+            <TextField
+              label="Filter by year (empty = all)"
+              value={p.year ?? ""}
+              onChange={(v) => update({ ...p, year: v })}
+            />
+            <p className="text-xs text-ink/55">
+              {`${many} are managed centrally in Backoffice → ${many}. Edit them there and every page updates.`}
+            </p>
+          </>
+        ) : null}
+      </InspectorSection>
+      {(p.source ?? "global") === "global" ? null : (
+        <InspectorSection title={`${many} (${items.length})`}>
+          <div className="space-y-4">
+            {items.map((item, i) => (
+              <div key={item.id ?? i} className="border border-ink/10 p-3 space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">
+                    #{i + 1}
+                  </span>
+                  <div className="flex items-center gap-1">
+                    <button
+                      onClick={() => move(i, -1)}
+                      className="p-1 text-ink/50 hover:text-ink"
+                      title="Move up"
+                    >
+                      <ArrowUp className="size-3.5" />
+                    </button>
+                    <button
+                      onClick={() => move(i, 1)}
+                      className="p-1 text-ink/50 hover:text-ink"
+                      title="Move down"
+                    >
+                      <ArrowDown className="size-3.5" />
+                    </button>
+                    <button
+                      onClick={() => {
+                        const next = items.slice();
+                        next.splice(i, 1);
+                        update({ ...p, items: next });
+                      }}
+                      className="p-1 text-red-500 hover:text-red-700"
+                      title="Delete"
+                    >
+                      <Trash2 className="size-3.5" />
+                    </button>
+                  </div>
+                </div>
+                <LocalizedField
+                  label={`${one} no`}
+                  value={tripNumber(item)}
+                  onChange={(v) => setItem(i, { ...item, tripNo: v })}
+                />
+                <LocalizedField
+                  label="Location"
+                  value={item.location}
+                  onChange={(v) => setItem(i, { ...item, location: v })}
+                />
+                <LocalizedField
+                  label="Dates"
+                  value={item.dates}
+                  onChange={(v) => setItem(i, { ...item, dates: v })}
+                />
+                <LocalizedField
+                  label="Accommodation"
+                  value={item.accommodation}
+                  onChange={(v) => setItem(i, { ...item, accommodation: v })}
+                />
+                <LocalizedField
+                  label="Price"
+                  value={item.price}
+                  onChange={(v) => setItem(i, { ...item, price: v })}
+                />
+                <LocalizedField
+                  label="Original price"
+                  value={item.oldPrice}
+                  onChange={(v) => setItem(i, { ...item, oldPrice: v })}
+                />
+                <LocalizedField
+                  label="Badge"
+                  value={item.badge}
+                  onChange={(v) => setItem(i, { ...item, badge: v })}
+                />
+                <LocalizedField
+                  label="Button label"
+                  value={item.bookLabel}
+                  onChange={(v) => setItem(i, { ...item, bookLabel: v })}
+                />
+                <TextField
+                  label="Booking URL"
+                  value={item.bookUrl ?? ""}
+                  onChange={(v) => setItem(i, { ...item, bookUrl: v })}
+                />
+                <label className="flex items-center gap-2 text-sm text-ink">
+                  <input
+                    type="checkbox"
+                    checked={!!item.featured}
+                    onChange={(e) => setItem(i, { ...item, featured: e.target.checked })}
+                  />
+                  {`Highlight this ${one.toLowerCase()}`}
+                </label>
+              </div>
+            ))}
+          </div>
+          <button
+            onClick={() =>
+              update({
+                ...p,
+                items: [
+                  ...items,
+                  {
+                    id: uid("t"),
+                    tripNo: {},
+                    location: {},
+                    dates: {},
+                    accommodation: {},
+                    price: {},
+                  },
+                ],
+              })
+            }
+            className="mt-1 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 ${one.toLowerCase()}`}
+          </button>
+        </InspectorSection>
+      )}
+    </>
+  );
+}
+
+/* ---------------- Form ---------------- */
+function FormInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as FormBlockCopy;
+  const listAll = useServerFn(backofficeHost().fns.listForms);
+  const { data: forms } = useQuery<Array<{ key: string; name: string; is_active: boolean }>>({
+    queryKey: ["backoffice-forms"],
+    queryFn: () => listAll() as Promise<Array<{ key: string; name: string; is_active: boolean }>>,
+    staleTime: 30_000,
+  });
+
+  return (
+    <>
+      <InspectorSection title="Form">
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Which form</span>
+          <select
+            value={p.formKey ?? ""}
+            onChange={(e) => patch({ ...p, formKey: e.target.value } as unknown as BlockProps)}
+            className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            <option value="">Select a form…</option>
+            {(forms ?? []).map((f) => (
+              <option key={f.key} value={f.key}>
+                {f.name} ({f.key}){f.is_active ? "" : " — inactive"}
+              </option>
+            ))}
+          </select>
+        </label>
+        <p className="text-xs text-ink/50">
+          Fields, notifications, spam protection and the submissions inbox are managed in{" "}
+          <Link to={backofficePaths().forms} className="underline">
+            Forms
+          </Link>
+          .
+        </p>
+      </InspectorSection>
+      <InspectorSection title="Content">
+        <LocalizedField
+          label="Eyebrow"
+          value={p.eyebrow}
+          onChange={(v) => patch({ ...p, eyebrow: v } as unknown as BlockProps)}
+        />
+        <LocalizedField
+          label="Title"
+          value={p.title}
+          onChange={(v) => patch({ ...p, title: v } as unknown as BlockProps)}
+        />
+        <LocalizedField
+          label="Lead"
+          value={p.lead}
+          multiline
+          onChange={(v) => patch({ ...p, lead: v } as unknown as BlockProps)}
+        />
+      </InspectorSection>
+      <InspectorSection title="Layout">
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Tone</span>
+          <select
+            value={p.tone ?? "paper"}
+            onChange={(e) => patch({ ...p, tone: e.target.value } as unknown as BlockProps)}
+            className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            <option value="white">White</option>
+            <option value="paper">Paper</option>
+            <option value="ink">Ink (dark)</option>
+          </select>
+        </label>
+        <TextField
+          label="Anchor id"
+          value={p.anchor ?? ""}
+          onChange={(v) => patch({ ...p, anchor: v } as unknown as BlockProps)}
+        />
+      </InspectorSection>
+    </>
+  );
+}
+
+/* ---------------- Router ---------------- */
+export function BlockInspector({
+  block,
+  patch,
+  globalSections,
+}: BlockPatchProps & {
+  globalSections: { key: string; name: string }[];
+}) {
+  switch (block.type) {
+    case "hero":
+      return <HeroInspector block={block} patch={patch} />;
+    case "intro":
+      return <IntroInspector block={block} patch={patch} />;
+    case "faq":
+      return <FaqInspector block={block} patch={patch} />;
+    case "instagram":
+      return <InstagramInspector block={block} patch={patch} />;
+    case "prose":
+      return <ProseInspector block={block} patch={patch} />;
+    case "richText":
+      return <RichTextInspector block={block} patch={patch} />;
+    case "checklist":
+      return <ChecklistInspector block={block} patch={patch} />;
+    case "iconGrid":
+      return <IconGridInspector block={block} patch={patch} />;
+    case "imageMarquee":
+      return <ImageMarqueeInspector block={block} patch={patch} />;
+    case "linkTiles":
+      return <LinkTilesInspector block={block} patch={patch} />;
+    case "cabinTabs":
+      return <CabinTabsInspector block={block} patch={patch} />;
+    case "priceTable":
+      return <PriceTableInspector block={block} patch={patch} />;
+    case "tripList":
+    case "courseList":
+      return <TripListInspector block={block} patch={patch} />;
+    case "ctaBanner":
+      return <CtaBannerInspector block={block} patch={patch} />;
+    case "mediaSplit":
+      return <MediaSplitInspector block={block} patch={patch} />;
+    case "heroFull":
+      return <HeroFullInspector block={block} patch={patch} />;
+    case "form":
+      return <FormInspector block={block} patch={patch} />;
+    case "globalRef":
+      return <GlobalRefInspector block={block} patch={patch} globalSections={globalSections} />;
+    case "gallery":
+      return (
+        <>
+          <SharedSectionEditor sectionKey="gallery" />
+          <GalleryResponsivePreview />
+        </>
+      );
+    case "contactCta":
+      // The contact CTA block renders content from BOTH shared sections:
+      // "cta" (title, body, CTA, form) and "contact" (eyebrow/form title,
+      // labels, contact copy) — expose both so every string is editable.
+      return (
+        <>
+          <SharedSectionEditor sectionKey="cta" />
+          <SharedSectionEditor sectionKey="contact" />
+        </>
+      );
+    case "stats":
+    case "features":
+    case "destinations":
+    case "testimonials":
+      return <SharedSectionEditor sectionKey={block.type} />;
+    case "trips":
+    case "packages":
+      return <SharedSectionEditor sectionKey="trips" />;
+    default:
+      return <GlobalContentNotice blockType={block.type} />;
+  }
+}

package/src/backoffice/routes/host.ts

@@ -6,8 +6,17 @@
  * is a two-line `createFileRoute(...)({ component: XRoute })`.
  */
 
+import type { ReactNode } from "react";
+
 import type { SiteConfig } from "../../config/site-config";
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/** Media field component as the reviews editor consumes it. */
+export type MediaFieldComponent = (props: any) => ReactNode;
+/** Review image uploader component as the reviews editor consumes it. */
+export type ReviewImageUploadComponent = (props: any) => ReactNode;
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /** A TanStack server function as seen from the host (called via `useServerFn`). */
 export type HostServerFn = (...args: any[]) => Promise<any>;
@@ -55,9 +64,63 @@ export type BackofficeHost = {
     getContentOverrides: HostServerFn;
     saveContentSection: HostServerFn;
     // forms
+    listForms: HostServerFn;
     getFormDefaults: HostServerFn;
     saveFormDefaults: HostServerFn;
     purgeOldSubmissions: HostServerFn;
+    // email settings
+    getEmailSettings: HostServerFn;
+    saveEmailSettings: HostServerFn;
+    listEmailProviders: HostServerFn;
+    upsertEmailProvider: HostServerFn;
+    deleteEmailProvider: HostServerFn;
+    sendTestEmail: HostServerFn;
+    // locale domains
+    saveLocaleDomain: HostServerFn;
+    deleteLocaleDomain: HostServerFn;
+  };
+  /** Site-specific example values shown as input placeholders. */
+  placeholders?: {
+    fromEmail?: string;
+    notifyTo?: string;
+    domain?: string;
+  };
+  /** Shared-content adapters: resolved site content plus its cache key. */
+  content: {
+    /** React hook returning the resolved (defaults + overrides) site content. */
+    useSite: () => Record<string, unknown>;
+    /** React hook returning the stored overrides, or undefined while loading. */
+    useOverrides: () => Record<string, unknown> | undefined;
+    /** Query key of the overrides query, so routes can invalidate it. */
+    overridesQueryKey: readonly unknown[];
+    /** Code defaults for the whole site content tree. */
+    defaults: Record<string, unknown>;
+    /** Code default for a single shared section. */
+    defaultForSection: (key: string) => unknown;
+    /** Merges code defaults into a stored override so newer fields still render. */
+    withSectionDefaults: (stored: unknown, defaults: unknown) => unknown;
+    /** Keys of the shared sections a site exposes in its sections editor. */
+    editableSectionKeys: string[];
+  };
+  /** Editor components a site wires with its own locales, media and forms. */
+  components: {
+    /** Recursive shared-content editor. */
+    SectionForm: (props: { value: unknown; onChange: (next: unknown) => void }) => ReactNode;
+    /** Single media field used by the reviews editor. */
+    MediaField: MediaFieldComponent;
+    /** Review portrait uploader. */
+    ReviewImageUpload: ReviewImageUploadComponent;
+  };
+  /** Site wording for domain concepts the shared UI names. */
+  labels?: {
+    /** Singular/plural noun for the trips module (e.g. Cruise/Cruises). */
+    trips?: { singular: string; plural: string };
+  };
+  /** Backup screen adapters — auth headers plus browser media archiving. */
+  backup?: {
+    authHeaders: () => Promise<Record<string, string>>;
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    buildBrowserMediaArchive: (args: any) => Promise<any>;
   };
 };
 
@@ -89,5 +152,17 @@ export function backofficePaths(host: BackofficeHost = backofficeHost()) {
     emailLogs: `${base}/admin/email-logs`,
     users: `${base}/admin/users`,
     forms: `${base}/forms`,
+    settings: `${base}/admin/settings`,
+    roles: `${base}/admin/roles`,
+    logs: `${base}/admin/logs`,
+    email: `${base}/admin/email`,
+    contact: `${base}/admin/contact`,
+    tracking: `${base}/admin/tracking`,
+    redirects: `${base}/admin/redirects`,
+    navigation: `${base}/admin/navigation`,
+    version: `${base}/admin/version`,
+    backup: `${base}/admin/backup`,
+    sections: `${base}/sections`,
+    globalSections: `${base}/global-sections`,
   };
 }

package/src/backoffice/routes/index.tsx

@@ -6,12 +6,33 @@
  * file only maps a URL to one of these.
  */
 
-import { Link, useNavigate } from "@tanstack/react-router";
+import { Link, Outlet, useNavigate, useRouterState } from "@tanstack/react-router";
+import {
+  AlertCircle,
+  ArrowLeft,
+  Building2,
+  Code2,
+  DatabaseBackup,
+  FileText,
+  Mail,
+  Menu,
+  Package,
+  ScrollText,
+  Shield,
+  Signpost,
+  SlidersHorizontal,
+  Users,
+} from "lucide-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 
 import type { SiteSettingOverrides } from "../../config/site-config";
 import { AuditView } from "../AuditView";
+import { BackupView } from "../BackupView";
+import { DomainsView } from "../DomainsView";
+import { EmailSettingsView } from "../EmailSettingsView";
+import { NavigationView } from "../NavigationView";
+import { ReviewsView, type ReviewsSection } from "../ReviewsView";
 import { ContactDetailsView } from "../ContactDetailsView";
 import { EmailLogsView } from "../EmailLogsView";
 import { FormSettingsView } from "../FormSettingsView";
@@ -229,3 +250,307 @@ export function useSeoListNavigate() {
   const paths = backofficePaths();
   return () => navigate({ to: `${paths.base}/seo` });
 }
+
+/* ------------------------------------------------------------------ *
+ * Admin section: layout, overview and the remaining admin screens.
+ * ------------------------------------------------------------------ */
+
+/** Chrome around every `/admin/*` screen: a back link plus the section title. */
+export function AdminLayoutRoute() {
+  const paths = backofficePaths();
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const isOverview = pathname.replace(/\/$/, "") === paths.admin;
+  const backTo = isOverview ? paths.base : paths.admin;
+  const backLabel = isOverview ? "Back to backoffice" : "Back to admin";
+
+  return (
+    <div className="min-h-screen">
+      <div className="border-b border-ink/10 bg-white">
+        <div className="px-8 md:px-12 py-6">
+          <Link
+            to={backTo}
+            className="inline-flex items-center gap-2 text-[0.7rem] uppercase tracking-[0.22em] text-ink/55 hover:text-sea transition-colors"
+          >
+            <ArrowLeft className="size-3.5" />
+            {backLabel}
+          </Link>
+          <h1 className="mt-3 font-serif text-2xl text-ink">System administration</h1>
+        </div>
+      </div>
+      <Outlet />
+    </div>
+  );
+}
+
+/** Card grid linking to every admin screen the signed-in user may open. */
+export function AdminOverviewRoute() {
+  const host = backofficeHost();
+  const paths = backofficePaths(host);
+  const fetchRoles = useServerFn(host.fns.getMyRoles);
+  const rolesQ = useQuery({ queryKey: ["admin", "my-roles"], queryFn: () => fetchRoles() });
+  const isSuper = ((rolesQ.data ?? []) as string[]).includes("superadmin");
+
+  const cards = [
+    {
+      to: paths.settings,
+      title: "Site settings",
+      body: "Site name, company details, active modules and brand tokens — with reset to code defaults.",
+      icon: SlidersHorizontal,
+    },
+    {
+      to: paths.users,
+      title: "Users",
+      body: "Create, edit, delete users and reset passwords.",
+      icon: Users,
+    },
+    {
+      to: paths.roles,
+      title: "User roles",
+      body: "Assign superadmin, admin, seo or user roles.",
+      icon: Shield,
+    },
+    { to: paths.logs, title: "Logs", body: "System logs (admin+).", icon: ScrollText },
+    {
+      to: paths.emailLogs,
+      title: "Email logs",
+      body: "Outgoing email history.",
+      icon: FileText,
+    },
+    {
+      to: paths.audit,
+      title: "Audit logs",
+      body: "Every backoffice action.",
+      icon: AlertCircle,
+    },
+    ...(host.siteConfig.features.email
+      ? [
+          {
+            to: paths.email,
+            title: "Email settings",
+            body: "SMTP / Amazon SES, from/reply-to.",
+            icon: Mail,
+          },
+        ]
+      : []),
+    {
+      to: paths.contact,
+      title: "Contact details",
+      body: "Company address, org. number, email and phone.",
+      icon: Building2,
+    },
+    ...(host.siteConfig.features.tracking
+      ? [
+          {
+            to: paths.tracking,
+            title: "Code & tracking",
+            body: "Head/body code injection, GTM, GA4, Meta and TikTok pixels.",
+            icon: Code2,
+          },
+        ]
+      : []),
+    {
+      to: paths.redirects,
+      title: "Redirects",
+      body: "Old URLs pointing to new ones, created automatically on slug changes.",
+      icon: Signpost,
+    },
+    {
+      to: paths.navigation,
+      title: "Navigation & footer",
+      body: "Site-wide top menu and footer content.",
+      icon: Menu,
+    },
+    {
+      to: paths.version,
+      title: "CMS & platform version",
+      body: "Current CMS build, shared platform package version and release history with dates.",
+      icon: Package,
+    },
+    ...(isSuper && host.siteConfig.features.backup
+      ? [
+          {
+            to: paths.backup,
+            title: "Backup & restore",
+            body: "Export everything — content, forms, submissions, media and roles — and restore it again.",
+            icon: DatabaseBackup,
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="grid gap-4 md:grid-cols-3">
+        {cards.map((c) => (
+          <Link
+            key={c.to}
+            to={c.to}
+            className="group border border-ink/10 bg-white p-6 hover:border-sea transition-colors"
+          >
+            <c.icon className="size-6 text-ink/70 group-hover:text-sea" />
+            <div className="mt-4 font-serif text-lg text-ink">{c.title}</div>
+            <p className="mt-2 text-sm text-ink/60">{c.body}</p>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Email sending settings plus provider credentials. */
+export function EmailSettingsRoute() {
+  const host = backofficeHost();
+  const { fns } = host;
+  const fetchSettings = useServerFn(fns.getEmailSettings);
+  const fetchRoles = useServerFn(fns.getMyRoles);
+  const fetchProviders = useServerFn(fns.listEmailProviders);
+  const save = useServerFn(fns.saveEmailSettings);
+  const saveProvider = useServerFn(fns.upsertEmailProvider);
+  const removeProvider = useServerFn(fns.deleteEmailProvider);
+  const sendTest = useServerFn(fns.sendTestEmail);
+
+  const settingsQ = useQuery({
+    queryKey: ["admin", "email-settings"],
+    queryFn: () => fetchSettings(),
+  });
+  const providersQ = useQuery({
+    queryKey: ["admin", "email-providers"],
+    queryFn: () => fetchProviders(),
+  });
+  const rolesQ = useQuery({ queryKey: ["admin", "my-roles"], queryFn: () => fetchRoles() });
+
+  return (
+    <EmailSettingsView
+      deps={{
+        settings: (settingsQ.data ?? null) as never,
+        providers: (providersQ.data ?? []) as never,
+        isSuper: ((rolesQ.data ?? []) as string[]).includes("superadmin"),
+        loadingProviders: providersQ.isLoading,
+        saveSettings: (input) => save(input as never),
+        saveProvider: (input) => saveProvider(input as never),
+        deleteProvider: (input) => removeProvider(input),
+        sendTestEmail: (input) => sendTest(input),
+        refreshSettings: () => settingsQ.refetch(),
+        refreshProviders: () => providersQ.refetch(),
+        placeholders: {
+          fromEmail: host.placeholders?.fromEmail ?? "",
+          notifyTo: host.placeholders?.notifyTo ?? "",
+        },
+      }}
+    />
+  );
+}
+
+/** Site-wide navigation and footer editor. */
+export function NavigationRoute() {
+  const host = backofficeHost();
+  const qc = useQueryClient();
+  const site = host.content.useSite();
+  const overrides = host.content.useOverrides();
+  const save = useServerFn(host.fns.saveContentSection);
+
+  return (
+    <NavigationView
+      deps={{
+        overrides,
+        site,
+        defaults: host.content.defaults,
+        SectionForm: host.components.SectionForm,
+        saveSection: (input) => save(input as never),
+        refresh: () => qc.invalidateQueries({ queryKey: host.content.overridesQueryKey }),
+      }}
+    />
+  );
+}
+
+/** Per-locale domain mapping. */
+export function DomainsRoute() {
+  const host = backofficeHost();
+  const paths = backofficePaths(host);
+  const qc = useQueryClient();
+  const list = useServerFn(host.fns.getLocaleDomains);
+  const save = useServerFn(host.fns.saveLocaleDomain);
+  const del = useServerFn(host.fns.deleteLocaleDomain);
+  const q = useQuery({ queryKey: ["locale-domains"], queryFn: () => list() });
+
+  return (
+    <DomainsView
+      deps={{
+        domains: q.data ?? [],
+        locales: host.siteConfig.locales,
+        defaultLocale: host.siteConfig.defaultLocale,
+        backPath: paths.base,
+        domainPlaceholder: host.placeholders?.domain ?? "",
+        saveDomain: (input) => save(input as never),
+        deleteDomain: (input) => del(input as never),
+        refresh: () => qc.invalidateQueries({ queryKey: ["locale-domains"] }),
+      }}
+    />
+  );
+}
+
+/** Testimonials / reviews editor backed by the shared content section. */
+export function ReviewsRoute() {
+  const host = backofficeHost();
+  const paths = backofficePaths(host);
+  const qc = useQueryClient();
+  const site = host.content.useSite();
+  const overrides = host.content.useOverrides();
+  const save = useServerFn(host.fns.saveContentSection);
+
+  const source = (overrides?.["testimonials"] ??
+    site["testimonials"] ??
+    host.content.defaultForSection("testimonials")) as ReviewsSection;
+
+  return (
+    <ReviewsView
+      deps={{
+        source,
+        locale: host.previewLocale ?? host.siteConfig.defaultLocale,
+        save: async (section) => {
+          await save({
+            data: { key: "testimonials", data: section as unknown as Record<string, unknown> },
+          });
+          await qc.invalidateQueries({ queryKey: host.content.overridesQueryKey });
+        },
+        MediaField: host.components.MediaField as never,
+        ReviewImageUpload: host.components.ReviewImageUpload as never,
+        BackLink: ({ className, children }) => (
+          <Link to={paths.base} className={className}>
+            {children}
+          </Link>
+        ),
+      }}
+    />
+  );
+}
+
+/** Backup and restore, superadmin only. */
+export function BackupRoute() {
+  const host = backofficeHost();
+  const backup = host.backup;
+  if (!backup) {
+    throw new Error("Backup host adapters missing — register `backup` to use BackupRoute.");
+  }
+  const fetchRoles = useServerFn(host.fns.getMyRoles);
+  const rolesQ = useQuery({
+    queryKey: ["admin", "my-roles"],
+    queryFn: async () => (await fetchRoles()) as string[],
+    retry: 3,
+    retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 4000),
+    staleTime: 60_000,
+  });
+
+  return (
+    <BackupView
+      deps={{
+        isSuper: ((rolesQ.data ?? []) as string[]).includes("superadmin"),
+        loading: rolesQ.isLoading,
+        error: rolesQ.isError,
+        retry: () => void rolesQ.refetch(),
+        authHeaders: backup.authHeaders,
+        buildBrowserMediaArchive: backup.buildBrowserMediaArchive as never,
+      }}
+    />
+  );
+}