@bygghammar/cms-platform 0.41.0 → 0.42.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.42.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,

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>;
@@ -58,6 +67,50 @@ export type BackofficeHost = {
     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;
+  };
+  /** 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;
+  };
+  /** 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 +142,15 @@ 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`,
   };
 }

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