@bygghammar/cms-platform 0.39.0 → 0.41.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.41.0
+
+- New `backoffice/routes`: a host registry (`registerBackofficeHost`) plus package-owned
+  route components for audit, email logs, log index, roles, users, version, site
+  settings, redirects, tracking, contact details and form settings. A site route
+  file is now just `createFileRoute(...)({ component: XRoute })`.
+
+## 0.40.0
+
+- New `backoffice/shell`: shared `BackofficeShell` (auth gate, no-access screen,
+  sidebar, sign-in form), a feature-flag driven `backofficeNav(siteConfig)` model
+  and `backofficeRedirectHost` for the admin-domain guard. A site's backoffice
+  layout route is now a thin adapter that supplies its auth client and admin check.
+
 ## 0.39.0
 
 - New `server/backup-core`: superadmin verification, dataset counting, archive build, analysis and restore (database + media) now live in the package. Hosts pass a service-role client factory.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.39.0",
+  "version": "0.41.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,
@@ -154,7 +154,10 @@
     "./server/email-send-core": "./src/server/email-send-core.ts",
     "./server/forms-delivery-core": "./src/server/forms-delivery-core.ts",
     "./server/forms-submissions-core": "./src/server/forms-submissions-core.ts",
-    "./server/backup-core": "./src/server/backup-core.ts"
+    "./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"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/routes/host.ts

@@ -0,0 +1,93 @@
+/**
+ * Backoffice host registry.
+ *
+ * A site registers its server functions and site-level facts once; the package
+ * then owns the backoffice route components themselves, so a site's route file
+ * is a two-line `createFileRoute(...)({ component: XRoute })`.
+ */
+
+import type { SiteConfig } from "../../config/site-config";
+
+/* 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>;
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+/** Everything the package needs from a host to render the backoffice routes. */
+export type BackofficeHost = {
+  /** Site configuration used for defaults on the settings screen. */
+  siteConfig: SiteConfig;
+  /** Locales the site publishes, used by tracking/domain screens. */
+  locales: readonly string[];
+  /** Role identifiers this platform build supports. */
+  allRoles: string[];
+  /** Company details used as code defaults on the contact screen. */
+  company: Record<string, string>;
+  /** Locale used to preview form copy in the backoffice. */
+  previewLocale?: string;
+  /** Server functions, grouped per module. */
+  fns: {
+    // admin
+    listAuditLogs: HostServerFn;
+    listEmailLogs: HostServerFn;
+    listUsers: HostServerFn;
+    getMyRoles: HostServerFn;
+    createUser: HostServerFn;
+    deleteUser: HostServerFn;
+    setUserPassword: HostServerFn;
+    sendPasswordResetEmail: HostServerFn;
+    setUserRoles: HostServerFn;
+    getSystemVersion: HostServerFn;
+    // site settings
+    getSiteSettings: HostServerFn;
+    saveSiteSettings: HostServerFn;
+    clearSiteSetting: HostServerFn;
+    // redirects
+    listRedirects: HostServerFn;
+    saveRedirect: HostServerFn;
+    deleteRedirect: HostServerFn;
+    // tracking + domains
+    listInjections: HostServerFn;
+    saveInjection: HostServerFn;
+    deleteInjection: HostServerFn;
+    getLocaleDomains: HostServerFn;
+    // shared content
+    getContentOverrides: HostServerFn;
+    saveContentSection: HostServerFn;
+    // forms
+    getFormDefaults: HostServerFn;
+    saveFormDefaults: HostServerFn;
+    purgeOldSubmissions: HostServerFn;
+  };
+};
+
+let current: BackofficeHost | null = null;
+
+/** Registers the host adapters. Call once, from a module the routes import. */
+export function registerBackofficeHost(host: BackofficeHost): BackofficeHost {
+  current = host;
+  return host;
+}
+
+/** Reads the registered host, failing loudly when a site forgot to register. */
+export function backofficeHost(): BackofficeHost {
+  if (!current) {
+    throw new Error(
+      "Backoffice host not registered — call registerBackofficeHost() before rendering backoffice routes.",
+    );
+  }
+  return current;
+}
+
+/** Absolute backoffice paths derived from the site's configured base path. */
+export function backofficePaths(host: BackofficeHost = backofficeHost()) {
+  const base = host.siteConfig.backofficePath;
+  return {
+    base,
+    admin: `${base}/admin`,
+    audit: `${base}/admin/audit`,
+    emailLogs: `${base}/admin/email-logs`,
+    users: `${base}/admin/users`,
+    forms: `${base}/forms`,
+  };
+}

package/src/backoffice/routes/index.tsx

@@ -0,0 +1,231 @@
+/**
+ * Package-owned backoffice route components.
+ *
+ * Each component is a complete screen: it reads the host adapters from the
+ * registry, wires queries/mutations and renders the shared view. A site route
+ * file only maps a URL to one of these.
+ */
+
+import { Link, useNavigate } from "@tanstack/react-router";
+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 { ContactDetailsView } from "../ContactDetailsView";
+import { EmailLogsView } from "../EmailLogsView";
+import { FormSettingsView } from "../FormSettingsView";
+import { LogsView } from "../LogsView";
+import { RedirectsView } from "../RedirectsView";
+import { RolesView } from "../RolesView";
+import { SiteSettingsView } from "../SiteSettingsView";
+import { TrackingView } from "../TrackingView";
+import { UsersView } from "../UsersView";
+import { VersionView } from "../VersionView";
+import { backofficeHost, backofficePaths } from "./host";
+
+export * from "./host";
+
+/** Audit trail screen. */
+export function AuditRoute() {
+  const { fns } = backofficeHost();
+  const fetchLogs = useServerFn(fns.listAuditLogs);
+  const q = useQuery({
+    queryKey: ["admin", "audit"],
+    queryFn: () => fetchLogs({ data: { limit: 300 } }),
+  });
+  return <AuditView rows={(q.data ?? []) as never} />;
+}
+
+/** Outbound email log screen. */
+export function EmailLogsRoute() {
+  const { fns } = backofficeHost();
+  const fetchLogs = useServerFn(fns.listEmailLogs);
+  const q = useQuery({
+    queryKey: ["admin", "email-logs"],
+    queryFn: () => fetchLogs({ data: { limit: 300 } }),
+  });
+  return <EmailLogsView rows={(q.data ?? []) as never} />;
+}
+
+/** Log index linking the audit trail and email log. */
+export function LogsRoute() {
+  const paths = backofficePaths();
+  return <LogsView auditPath={paths.audit} emailLogsPath={paths.emailLogs} />;
+}
+
+/** Role reference screen. */
+export function RolesRoute() {
+  const host = backofficeHost();
+  return <RolesView allRoles={host.allRoles} usersPath={backofficePaths(host).users} />;
+}
+
+/** User administration screen. */
+export function UsersRoute() {
+  const { fns, allRoles } = backofficeHost();
+  const qc = useQueryClient();
+  const fetchUsers = useServerFn(fns.listUsers);
+  const fetchMyRoles = useServerFn(fns.getMyRoles);
+  const runCreate = useServerFn(fns.createUser);
+  const runDelete = useServerFn(fns.deleteUser);
+  const runSetPw = useServerFn(fns.setUserPassword);
+  const runReset = useServerFn(fns.sendPasswordResetEmail);
+  const runSetRoles = useServerFn(fns.setUserRoles);
+
+  const usersQ = useQuery({ queryKey: ["admin", "users"], queryFn: () => fetchUsers() });
+  const myRolesQ = useQuery({ queryKey: ["admin", "my-roles"], queryFn: () => fetchMyRoles() });
+
+  return (
+    <UsersView
+      deps={{
+        users: (usersQ.data ?? []) as never,
+        myRoles: myRolesQ.data ?? [],
+        allRoles,
+        createUser: (input) => runCreate(input as never),
+        deleteUser: (input) => runDelete(input),
+        setUserPassword: (input) => runSetPw(input),
+        sendPasswordResetEmail: (input) => runReset(input),
+        setUserRoles: (input) => runSetRoles(input as never),
+        refresh: () => qc.invalidateQueries({ queryKey: ["admin", "users"] }),
+      }}
+    />
+  );
+}
+
+/** CMS build and platform version screen. */
+export function VersionRoute() {
+  const { fns } = backofficeHost();
+  const fetchVersion = useServerFn(fns.getSystemVersion);
+  const q = useQuery({ queryKey: ["admin", "system-version"], queryFn: () => fetchVersion() });
+  return (
+    <VersionView
+      deps={{ build: q.data?.build, releases: q.data?.releases ?? [], loading: q.isLoading }}
+    />
+  );
+}
+
+/** Site settings screen (code defaults plus database overrides). */
+export function SiteSettingsRoute() {
+  const { fns, siteConfig } = backofficeHost();
+  const load = useServerFn(fns.getSiteSettings);
+  const save = useServerFn(fns.saveSiteSettings);
+  const clear = useServerFn(fns.clearSiteSetting);
+  const q = useQuery({ queryKey: ["admin", "site-settings"], queryFn: () => load() });
+
+  return (
+    <SiteSettingsView
+      deps={{
+        config: q.data?.config ?? siteConfig,
+        overrides: (q.data?.overrides ?? {}) as SiteSettingOverrides,
+        saveSettings: (input) => save(input as never),
+        clearSetting: (input) => clear(input as never),
+        refresh: () => q.refetch(),
+        originSource: q.data?.originSource ?? "code",
+      }}
+    />
+  );
+}
+
+/** URL redirect administration. */
+export function RedirectsRoute() {
+  const { fns } = backofficeHost();
+  const list = useServerFn(fns.listRedirects);
+  const save = useServerFn(fns.saveRedirect);
+  const remove = useServerFn(fns.deleteRedirect);
+  const q = useQuery({ queryKey: ["cms", "redirects"], queryFn: () => list() });
+
+  return (
+    <RedirectsView
+      deps={{
+        rows: q.data ?? [],
+        saveRedirect: (input) => save(input),
+        deleteRedirect: (input) => remove(input),
+        refresh: () => q.refetch(),
+      }}
+    />
+  );
+}
+
+/** Code & tracking injection screen. */
+export function TrackingRoute() {
+  const { fns, locales } = backofficeHost();
+  const list = useServerFn(fns.listInjections);
+  const save = useServerFn(fns.saveInjection);
+  const remove = useServerFn(fns.deleteInjection);
+  const domains = useServerFn(fns.getLocaleDomains);
+
+  const q = useQuery({ queryKey: ["admin", "injections"], queryFn: () => list() });
+  const domainsQ = useQuery({ queryKey: ["admin", "locale-domains"], queryFn: () => domains() });
+
+  return (
+    <TrackingView
+      deps={{
+        profiles: q.data ?? [],
+        domains: domainsQ.data ?? [],
+        locales: locales as never,
+        saveInjection: (input) => save(input as never),
+        deleteInjection: (input) => remove(input),
+        refresh: () => q.refetch(),
+      }}
+    />
+  );
+}
+
+/** Company contact details screen. */
+export function ContactDetailsRoute() {
+  const { fns, company } = backofficeHost();
+  const fetchOverrides = useServerFn(fns.getContentOverrides);
+  const save = useServerFn(fns.saveContentSection);
+  const qc = useQueryClient();
+  const overridesQ = useQuery({
+    queryKey: ["cms", "content-overrides"],
+    queryFn: () => fetchOverrides(),
+  });
+
+  return (
+    <ContactDetailsView
+      deps={{
+        defaults: company,
+        stored: overridesQ.data?.company as Record<string, string> | undefined,
+        loading: overridesQ.isLoading,
+        saveSection: (input) => save(input as never),
+        refresh: () => qc.invalidateQueries({ queryKey: ["cms", "content-overrides"] }),
+      }}
+    />
+  );
+}
+
+/** Form defaults and retention screen. */
+export function FormSettingsRoute() {
+  const host = backofficeHost();
+  const { fns } = host;
+  const load = useServerFn(fns.getFormDefaults);
+  const save = useServerFn(fns.saveFormDefaults);
+  const purge = useServerFn(fns.purgeOldSubmissions);
+  const formsPath = backofficePaths(host).forms;
+  const { data, isLoading } = useQuery({ queryKey: ["form-defaults"], queryFn: () => load() });
+
+  return (
+    <FormSettingsView
+      deps={{
+        defaults: data,
+        isLoading,
+        saveDefaults: (input) => save(input as never),
+        purgeOldSubmissions: (input) => purge(input),
+        previewLocale: host.previewLocale ?? host.siteConfig.defaultLocale,
+        BackLink: ({ className, children }) => (
+          <Link to={formsPath} className={className}>
+            {children}
+          </Link>
+        ),
+      }}
+    />
+  );
+}
+
+/** Shared-content SEO detail helper: back navigation to the SEO list. */
+export function useSeoListNavigate() {
+  const navigate = useNavigate();
+  const paths = backofficePaths();
+  return () => navigate({ to: `${paths.base}/seo` });
+}

package/src/backoffice/shell/BackofficeShell.tsx

@@ -0,0 +1,311 @@
+/**
+ * Shared backoffice shell: auth gate, no-access screen, sidebar and content slot.
+ *
+ * A host route supplies its auth client, an admin check and the nav model; the
+ * layout, states and sign-in form are identical for every site.
+ */
+import { Link, useNavigate, useRouterState } from "@tanstack/react-router";
+import { ExternalLink, LogOut } from "lucide-react";
+import { useEffect, useState, type FormEvent, type ReactNode } from "react";
+import { toast } from "sonner";
+
+import { isBackofficeNavigationActive } from "../../navigation";
+import type { BackofficeNavItem } from "./nav-model";
+
+export type ShellAuthUser = { email?: string | null } | null;
+
+export type ShellAuthAdapter = {
+  /** Current session user, or null when signed out. */
+  getUser: () => Promise<ShellAuthUser>;
+  /** Subscribe to session changes; returns an unsubscribe function. */
+  onUserChange: (handler: (user: ShellAuthUser) => void) => () => void;
+  signIn: (email: string, password: string) => Promise<{ error?: string | null }>;
+  signOut: () => Promise<unknown>;
+  /** True only for a genuine hosted misconfiguration (not "signed out"). */
+  isConfigBroken?: () => boolean;
+};
+
+export type BackofficeShellProps = {
+  /** Site name shown in the sidebar header. */
+  siteName: string;
+  /** Backoffice base path, e.g. `/kontoret`. */
+  backofficePath: string;
+  nav: BackofficeNavItem[];
+  auth: ShellAuthAdapter;
+  /** Resolves whether the signed-in user may use the backoffice. */
+  checkIsAdmin: () => Promise<boolean>;
+  /** localStorage key for the "remember me" email. */
+  rememberKey?: string;
+  /** Route content — normally `<Outlet />`. */
+  children: ReactNode;
+};
+
+type State =
+  | { kind: "loading" }
+  | { kind: "signed-out" }
+  | { kind: "config-error" }
+  | { kind: "not-admin"; email: string }
+  | { kind: "admin"; email: string };
+
+export function BackofficeShell(props: BackofficeShellProps) {
+  const { auth, checkIsAdmin } = props;
+  const [state, setState] = useState<State>({ kind: "loading" });
+
+  useEffect(() => {
+    let alive = true;
+
+    const resolve = async (user: ShellAuthUser) => {
+      if (!alive) return;
+      if (!user) {
+        setState(auth.isConfigBroken?.() ? { kind: "config-error" } : { kind: "signed-out" });
+        return;
+      }
+      try {
+        const ok = await checkIsAdmin();
+        if (!alive) return;
+        setState(
+          ok
+            ? { kind: "admin", email: user.email ?? "" }
+            : { kind: "not-admin", email: user.email ?? "" },
+        );
+      } catch {
+        if (alive) setState({ kind: "signed-out" });
+      }
+    };
+
+    void auth.getUser().then(resolve);
+    const unsubscribe = auth.onUserChange(resolve);
+
+    return () => {
+      alive = false;
+      unsubscribe();
+    };
+  }, [auth, checkIsAdmin]);
+
+  if (state.kind === "loading") {
+    return (
+      <main className="min-h-screen bg-ink text-paper grid place-items-center">
+        <div className="text-sm uppercase tracking-[0.22em] text-paper/60">Loading…</div>
+      </main>
+    );
+  }
+
+  if (state.kind === "config-error") {
+    return (
+      <main className="min-h-screen bg-ink text-paper grid place-items-center px-6">
+        <div className="max-w-md text-center">
+          <h1 className="font-serif text-3xl">Authentication unavailable</h1>
+          <p className="mt-4 text-paper/70">
+            The backend configuration for this environment is missing or invalid, so the backoffice
+            cannot verify your account. The public website is unaffected. Check the deployment
+            configuration and reload this page.
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  if (state.kind === "signed-out") {
+    return <AuthGate auth={auth} rememberKey={props.rememberKey ?? "cms.backoffice.remember"} />;
+  }
+
+  if (state.kind === "not-admin") {
+    return (
+      <main className="min-h-screen bg-ink text-paper grid place-items-center px-6">
+        <div className="max-w-md text-center">
+          <h1 className="font-serif text-3xl">No access</h1>
+          <p className="mt-4 text-paper/70">
+            The account <span className="text-paper">{state.email}</span> does not have
+            administrator access to the backoffice.
+          </p>
+          <button
+            className="mt-8 inline-flex items-center border border-paper px-6 py-3 text-xs uppercase tracking-[0.22em] hover:bg-paper hover:text-ink transition-colors"
+            onClick={() => void auth.signOut()}
+          >
+            Sign out
+          </button>
+        </div>
+      </main>
+    );
+  }
+
+  return <Shell {...props} email={state.email} />;
+}
+
+function Shell({
+  siteName,
+  nav,
+  auth,
+  children,
+}: BackofficeShellProps & { email: string }) {
+  const pathname = useRouterState({ select: (r) => r.location.pathname });
+
+  return (
+    <div className="min-h-screen bg-muted text-ink grid grid-cols-1 md:grid-cols-[240px_1fr]">
+      <aside className="bg-ink text-paper md:min-h-screen flex md:flex-col">
+        <div className="p-6 border-b border-paper/10">
+          <div className="text-[0.7rem] uppercase tracking-[0.22em] text-paper/60">Backoffice</div>
+          <div className="mt-1 font-serif text-lg">{siteName} Backoffice</div>
+        </div>
+        <nav className="flex md:flex-col overflow-x-auto md:overflow-visible p-2 md:p-4 gap-1 flex-1">
+          {nav.map((n) => (
+            <Link
+              key={n.to}
+              to={n.to}
+              className={[
+                "flex items-center gap-3 px-4 py-2.5 text-sm transition-colors whitespace-nowrap",
+                isBackofficeNavigationActive(pathname, { to: n.to, exact: n.exact })
+                  ? "bg-paper text-ink"
+                  : "text-paper/75 hover:text-paper hover:bg-paper/10",
+              ].join(" ")}
+            >
+              <n.icon className="size-4" />
+              {n.label}
+            </Link>
+          ))}
+          <a
+            href="/"
+            target="_blank"
+            rel="noreferrer"
+            className="mt-2 md:mt-3 md:border-t md:border-paper/10 md:pt-3 flex items-center gap-3 px-4 py-2.5 text-sm whitespace-nowrap text-paper/75 transition-colors hover:text-paper hover:bg-paper/10"
+          >
+            <ExternalLink className="size-4" />
+            View website
+          </a>
+        </nav>
+        <SignedInPanel auth={auth} />
+      </aside>
+      <div className="flex-1 min-w-0">{children}</div>
+    </div>
+  );
+}
+
+function SignedInPanel({ auth }: { auth: ShellAuthAdapter }) {
+  const [email, setEmail] = useState("");
+
+  useEffect(() => {
+    let alive = true;
+    void auth.getUser().then((user) => {
+      if (alive) setEmail(user?.email ?? "");
+    });
+    return () => {
+      alive = false;
+    };
+  }, [auth]);
+
+  return (
+    <div className="p-4 border-t border-paper/10 hidden md:block">
+      <div className="text-[0.65rem] uppercase tracking-[0.22em] text-paper/50">Signed in</div>
+      <div className="mt-1 text-sm text-paper truncate" title={email}>
+        {email}
+      </div>
+      <button
+        className="mt-4 inline-flex items-center gap-2 text-xs uppercase tracking-[0.22em] text-paper/70 hover:text-paper"
+        onClick={async () => {
+          await auth.signOut();
+          toast.success("Signed out");
+        }}
+      >
+        <LogOut className="size-3.5" />
+        Sign out
+      </button>
+    </div>
+  );
+}
+
+function AuthGate({ auth, rememberKey }: { auth: ShellAuthAdapter; rememberKey: string }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [remember, setRemember] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const saved = window.localStorage.getItem(rememberKey);
+    if (saved) {
+      setEmail(saved);
+      setRemember(true);
+    }
+  }, [rememberKey]);
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    setBusy(true);
+    try {
+      const { error } = await auth.signIn(email, password);
+      if (error) throw new Error(error);
+      if (remember) window.localStorage.setItem(rememberKey, email);
+      else window.localStorage.removeItem(rememberKey);
+      toast.success("Signed in");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-ink text-paper grid place-items-center px-6 py-16">
+      <div className="w-full max-w-sm">
+        <div className="text-[0.7rem] uppercase tracking-[0.22em] text-paper/60">Backoffice</div>
+        <h1 className="mt-3 font-serif text-3xl">Sign in</h1>
+        <p className="mt-3 text-sm text-paper/60">
+          Only authorized administrators can access the backoffice.
+        </p>
+
+        <form onSubmit={submit} className="mt-8 space-y-4">
+          <label className="block">
+            <span className="text-[0.65rem] uppercase tracking-[0.22em] text-paper/60">Email</span>
+            <input
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="mt-2 w-full bg-transparent border border-paper/25 px-4 py-3 text-paper placeholder:text-paper/40 focus:border-sea focus:outline-none"
+              autoComplete="email"
+            />
+          </label>
+          <label className="block">
+            <span className="text-[0.65rem] uppercase tracking-[0.22em] text-paper/60">
+              Password
+            </span>
+            <input
+              type="password"
+              required
+              minLength={8}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="mt-2 w-full bg-transparent border border-paper/25 px-4 py-3 text-paper placeholder:text-paper/40 focus:border-sea focus:outline-none"
+              autoComplete="current-password"
+            />
+          </label>
+          <label className="flex items-center gap-3 text-xs text-paper/70 select-none cursor-pointer">
+            <input
+              type="checkbox"
+              checked={remember}
+              onChange={(e) => setRemember(e.target.checked)}
+              className="size-4 accent-sea bg-transparent border border-paper/25"
+            />
+            Remember me
+          </label>
+          <button
+            type="submit"
+            disabled={busy}
+            className="mt-2 w-full inline-flex items-center justify-center border border-paper bg-paper text-ink px-6 py-3 text-xs uppercase tracking-[0.22em] hover:bg-transparent hover:text-paper transition-colors disabled:opacity-60"
+          >
+            {busy ? "Working…" : "Sign in"}
+          </button>
+        </form>
+
+        <div className="mt-10 text-center">
+          <button
+            onClick={() => navigate({ to: "/" })}
+            className="text-xs uppercase tracking-[0.22em] text-paper/50 hover:text-paper"
+          >
+            ← Back to website
+          </button>
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/backoffice/shell/domain-guard.ts

@@ -0,0 +1,38 @@
+/**
+ * Admin-domain guard for the backoffice route.
+ *
+ * Returns the host the backoffice should be served from, or null when the
+ * current host is fine (local dev, Lovable preview, or already the admin host).
+ */
+const DEV_HOST_SUFFIXES = [".lovable.app", ".lovableproject.com"];
+
+function normalizeHost(value: string): string {
+  return value
+    .replace(/^https?:\/\//, "")
+    .replace(/\/+$/, "")
+    .replace(/^www\./, "")
+    .toLowerCase();
+}
+
+/** True for hosts where the admin-domain guard must not apply. */
+export function isDevelopmentHost(host: string): boolean {
+  const h = normalizeHost(host);
+  return (
+    DEV_HOST_SUFFIXES.some((suffix) => h.endsWith(suffix)) ||
+    h === "localhost" ||
+    h.startsWith("localhost:") ||
+    h.startsWith("127.0.0.1")
+  );
+}
+
+/** Resolve the admin host to redirect to, or null to stay put. */
+export function backofficeRedirectHost(
+  currentHost: string,
+  adminDomain: string | null | undefined,
+): string | null {
+  if (!currentHost || isDevelopmentHost(currentHost)) return null;
+  const current = normalizeHost(currentHost);
+  const admin = normalizeHost(adminDomain ?? "");
+  if (!admin || current === admin) return null;
+  return admin;
+}

package/src/backoffice/shell/index.ts

@@ -0,0 +1,9 @@
+export { BackofficeShell } from "./BackofficeShell";
+export type {
+  BackofficeShellProps,
+  ShellAuthAdapter,
+  ShellAuthUser,
+} from "./BackofficeShell";
+export { backofficeNav } from "./nav-model";
+export type { BackofficeNavItem, BackofficeNavKey, BackofficeNavOptions } from "./nav-model";
+export { backofficeRedirectHost, isDevelopmentHost } from "./domain-guard";

package/src/backoffice/shell/nav-model.ts

@@ -0,0 +1,102 @@
+/**
+ * Backoffice navigation model.
+ *
+ * The nav is derived from `SiteConfig` (backoffice base path + feature flags)
+ * so every site gets the same sidebar without copying a list of links.
+ * A host may override labels or drop/add items through `options`.
+ */
+import type { LucideProps } from "lucide-react";
+import {
+  Blocks,
+  Calendar,
+  ClipboardList,
+  FileText,
+  Globe,
+  GraduationCap,
+  ImageIcon,
+  Layers,
+  LayoutDashboard,
+  LayoutList,
+  MessageSquareQuote,
+  ShieldCheck,
+} from "lucide-react";
+
+import type { SiteConfig } from "../../config/site-config";
+import type { BackofficeNavigationItem } from "../../navigation";
+
+export type BackofficeNavKey =
+  | "dashboard"
+  | "pages"
+  | "global-sections"
+  | "blocks"
+  | "sections"
+  | "media"
+  | "seo"
+  | "domains"
+  | "trips"
+  | "courses"
+  | "forms"
+  | "reviews"
+  | "admin";
+
+export type BackofficeNavItem = BackofficeNavigationItem<LucideProps>;
+
+type Definition = {
+  key: BackofficeNavKey;
+  path: string;
+  label: string;
+  icon: BackofficeNavItem["icon"];
+  exact?: boolean;
+  /** Feature flag that has to be enabled for the item to appear. */
+  feature?: keyof SiteConfig["features"];
+};
+
+const DEFINITIONS: readonly Definition[] = [
+  { key: "dashboard", path: "", label: "Dashboard", icon: LayoutDashboard, exact: true },
+  { key: "pages", path: "/pages-builder", label: "Page builder", icon: Blocks },
+  { key: "global-sections", path: "/global-sections", label: "Global Sections", icon: Layers },
+  { key: "blocks", path: "/blocks", label: "Block library", icon: Blocks },
+  { key: "sections", path: "/sections", label: "Shared content", icon: LayoutList },
+  { key: "media", path: "/media", label: "Media", icon: ImageIcon },
+  { key: "seo", path: "/seo", label: "SEO", icon: FileText },
+  { key: "domains", path: "/domains", label: "Domains", icon: Globe, feature: "domains" },
+  { key: "trips", path: "/trips", label: "Trips", icon: Calendar, feature: "trips" },
+  { key: "courses", path: "/kurser", label: "Courses", icon: GraduationCap, feature: "courses" },
+  { key: "forms", path: "/forms", label: "Forms", icon: ClipboardList, feature: "forms" },
+  {
+    key: "reviews",
+    path: "/recensioner",
+    label: "Reviews",
+    icon: MessageSquareQuote,
+    feature: "reviews",
+  },
+  { key: "admin", path: "/admin", label: "Admin", icon: ShieldCheck },
+];
+
+export type BackofficeNavOptions = {
+  /** Per-key label overrides, e.g. `{ trips: "Cruises" }`. */
+  labels?: Partial<Record<BackofficeNavKey, string>>;
+  /** Keys to hide regardless of feature flags. */
+  hide?: readonly BackofficeNavKey[];
+};
+
+/** Build the sidebar model for a site. */
+export function backofficeNav(
+  config: SiteConfig,
+  options: BackofficeNavOptions = {},
+): BackofficeNavItem[] {
+  const base = config.backofficePath.replace(/\/+$/, "");
+  const hidden = new Set(options.hide ?? []);
+
+  return DEFINITIONS.filter((d) => {
+    if (hidden.has(d.key)) return false;
+    if (d.feature && config.features[d.feature] !== true) return false;
+    return true;
+  }).map((d) => ({
+    key: d.key,
+    to: `${base}${d.path}` || "/",
+    label: options.labels?.[d.key] ?? d.label,
+    icon: d.icon,
+    exact: d.exact === true,
+  }));
+}