@bygghammar/cms-platform 0.23.1 → 0.25.0

package/src/backoffice/EmailLogsView.tsx

@@ -0,0 +1,203 @@
+import { Fragment, useMemo, useState } from "react";
+
+import { emailStatusTone, formatAbsoluteTime, formatRelativeTime } from "../admin/format-log";
+
+/** One outgoing email attempt. */
+export type EmailLogRow = {
+  id: string;
+  created_at: string;
+  to_address: string;
+  from_address?: string | null;
+  reply_to?: string | null;
+  subject?: string | null;
+  body_preview?: string | null;
+  provider?: string | null;
+  status: string;
+  error?: string | null;
+  meta?: Record<string, unknown> | null;
+};
+
+/** Host-agnostic email delivery log with status filter, search and detail. */
+export function EmailLogsView({ rows }: { rows: EmailLogRow[] }) {
+  const [search, setSearch] = useState("");
+  const [status, setStatus] = useState("all");
+  const [expanded, setExpanded] = useState<string | null>(null);
+
+  const statuses = useMemo(
+    () => Array.from(new Set(rows.map((r) => r.status).filter(Boolean))),
+    [rows],
+  );
+
+  const filtered = useMemo(() => {
+    const s = search.trim().toLowerCase();
+    return rows.filter((r) => {
+      if (status !== "all" && r.status !== status) return false;
+      if (!s) return true;
+      const hay = [r.to_address, r.from_address, r.subject, r.provider, r.error]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+      return hay.includes(s);
+    });
+  }, [rows, search, status]);
+
+  return (
+    <div className="p-8 md:p-12">
+      <div className="flex items-start justify-between gap-6 flex-wrap">
+        <div>
+          <h2 className="font-serif text-xl">Email log</h2>
+          <p className="mt-2 text-sm text-ink/60 max-w-2xl">
+            Every outgoing email — contact form replies, password resets and system notifications —
+            with delivery status and any error returned by the provider.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <select
+            value={status}
+            onChange={(e) => setStatus(e.target.value)}
+            className="border border-ink/15 bg-white px-3 py-2 text-sm"
+          >
+            <option value="all">All statuses</option>
+            {statuses.map((s) => (
+              <option key={s} value={s}>
+                {s}
+              </option>
+            ))}
+          </select>
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search recipient, subject…"
+            className="border border-ink/15 bg-white px-3 py-2 text-sm w-72 focus:outline-none focus:border-sea"
+          />
+        </div>
+      </div>
+
+      <div className="mt-6 border border-ink/10 bg-white overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-ink/5 text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">
+            <tr>
+              <th className="text-left p-3 w-40">When</th>
+              <th className="text-left p-3">Recipient</th>
+              <th className="text-left p-3">Subject</th>
+              <th className="text-left p-3 w-32">Provider</th>
+              <th className="text-left p-3 w-32">Status</th>
+              <th className="w-10 p-3" />
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.map((r) => {
+              const tone = emailStatusTone(r.status);
+              const isOpen = expanded === r.id;
+              return (
+                <Fragment key={r.id}>
+                  <tr
+                    className="border-t border-ink/10 align-top hover:bg-ink/[0.02] cursor-pointer"
+                    onClick={() => setExpanded(isOpen ? null : r.id)}
+                  >
+                    <td className="p-3 whitespace-nowrap">
+                      <div className="text-ink">{formatRelativeTime(r.created_at)}</div>
+                      <div className="text-[0.65rem] text-ink/50">
+                        {formatAbsoluteTime(r.created_at)}
+                      </div>
+                    </td>
+                    <td className="p-3">
+                      <div className="text-ink">{r.to_address}</div>
+                      {r.from_address && (
+                        <div className="text-[0.65rem] text-ink/50">from {r.from_address}</div>
+                      )}
+                    </td>
+                    <td className="p-3">
+                      <div className="text-ink">{r.subject ?? "(no subject)"}</div>
+                      {r.body_preview && (
+                        <div className="text-[0.7rem] text-ink/50 mt-1 line-clamp-1">
+                          {r.body_preview}
+                        </div>
+                      )}
+                    </td>
+                    <td className="p-3 text-ink/70">{r.provider ?? "—"}</td>
+                    <td className="p-3">
+                      <span
+                        className={`inline-block px-2 py-0.5 text-[0.65rem] uppercase tracking-[0.15em] border ${tone.className}`}
+                      >
+                        {tone.label}
+                      </span>
+                      {r.error && (
+                        <div className="mt-1 text-[0.65rem] text-red-600 line-clamp-1">
+                          {r.error}
+                        </div>
+                      )}
+                    </td>
+                    <td className="p-3 text-ink/40 text-xs">{isOpen ? "▾" : "▸"}</td>
+                  </tr>
+                  {isOpen && (
+                    <tr className="bg-ink/[0.02] border-t border-ink/10">
+                      <td colSpan={6} className="p-4 space-y-3 text-xs">
+                        <dl className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-2">
+                          <DetailRow label="To" value={r.to_address} />
+                          <DetailRow label="From" value={r.from_address ?? "—"} />
+                          <DetailRow label="Reply-to" value={r.reply_to ?? "—"} />
+                          <DetailRow label="Provider" value={r.provider ?? "—"} />
+                          <DetailRow label="Status" value={r.status} />
+                          <DetailRow label="Sent" value={formatAbsoluteTime(r.created_at)} />
+                        </dl>
+                        {r.body_preview && (
+                          <div>
+                            <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50 mb-1">
+                              Body preview
+                            </div>
+                            <div className="text-ink/80 bg-white border border-ink/10 p-3 whitespace-pre-wrap">
+                              {r.body_preview}
+                            </div>
+                          </div>
+                        )}
+                        {r.error && (
+                          <div>
+                            <div className="text-[0.65rem] uppercase tracking-[0.22em] text-red-600 mb-1">
+                              Error
+                            </div>
+                            <div className="text-red-700 bg-red-50 border border-red-200 p-3 whitespace-pre-wrap">
+                              {r.error}
+                            </div>
+                          </div>
+                        )}
+                        {r.meta && Object.keys(r.meta).length > 0 && (
+                          <div>
+                            <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50 mb-1">
+                              Metadata
+                            </div>
+                            <pre className="text-[0.7rem] whitespace-pre-wrap break-all text-ink/70 bg-white border border-ink/10 p-3">
+                              {JSON.stringify(r.meta, null, 2)}
+                            </pre>
+                          </div>
+                        )}
+                      </td>
+                    </tr>
+                  )}
+                </Fragment>
+              );
+            })}
+            {filtered.length === 0 && (
+              <tr>
+                <td colSpan={6} className="p-6 text-center text-ink/50">
+                  {rows.length === 0 ? "No email activity yet." : "No emails match your filters."}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function DetailRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex gap-3">
+      <dt className="text-ink/50 uppercase tracking-[0.18em] text-[0.6rem] w-24 shrink-0 pt-0.5">
+        {label}
+      </dt>
+      <dd className="text-ink/80 break-all">{value}</dd>
+    </div>
+  );
+}

package/src/backoffice/LogsView.tsx

@@ -0,0 +1,43 @@
+export type LogsViewProps = {
+  /** Path to the audit log screen, e.g. `/kontoret/admin/audit`. */
+  auditPath: string;
+  /** Path to the email log screen, e.g. `/kontoret/admin/email-logs`. */
+  emailLogsPath: string;
+};
+
+/** Host-agnostic index over the two log surfaces. */
+export function LogsView({ auditPath, emailLogsPath }: LogsViewProps) {
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <h2 className="font-serif text-xl">Logs</h2>
+      <p className="mt-2 text-sm text-ink/60">Application logs live in two places:</p>
+      <ul className="mt-6 space-y-4">
+        <li className="border border-ink/10 bg-white p-5">
+          <div className="font-serif text-lg">Audit logs</div>
+          <p className="mt-1 text-sm text-ink/60">
+            Actions performed in the backoffice (user changes, role changes, email settings updates,
+            content saves).
+          </p>
+          <a
+            href={auditPath}
+            className="mt-3 inline-block text-xs uppercase tracking-[0.22em] text-sea"
+          >
+            Open audit logs →
+          </a>
+        </li>
+        <li className="border border-ink/10 bg-white p-5">
+          <div className="font-serif text-lg">Email logs</div>
+          <p className="mt-1 text-sm text-ink/60">
+            Every outgoing email attempt (recipient, subject, provider, status).
+          </p>
+          <a
+            href={emailLogsPath}
+            className="mt-3 inline-block text-xs uppercase tracking-[0.22em] text-sea"
+          >
+            Open email logs →
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}

package/src/backoffice/NavigationView.tsx

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

package/src/backoffice/RolesView.tsx

@@ -0,0 +1,50 @@
+/** Default descriptions for the canonical platform roles. */
+export const DEFAULT_ROLE_DESCRIPTIONS: Record<string, string> = {
+  superadmin: "Full control. Manage users, roles, email and everything else. Reserved.",
+  admin: "Manage content, pages, media, view logs and audit.",
+  editor: "Legacy editor role — behaves like admin for CMS. Prefer admin.",
+  seo: "Access SEO tools and page metadata.",
+  user: "Signed-in but no backoffice access beyond their own account.",
+};
+
+export type RolesViewProps = {
+  allRoles: readonly string[];
+  /** Overrides merged over `DEFAULT_ROLE_DESCRIPTIONS`. */
+  descriptions?: Record<string, string>;
+  /** Path to the users screen, e.g. `/kontoret/admin/users`. */
+  usersPath: string;
+};
+
+/** Host-agnostic reference list of the roles that exist in the system. */
+export function RolesView({ allRoles, descriptions, usersPath }: RolesViewProps) {
+  const text = { ...DEFAULT_ROLE_DESCRIPTIONS, ...(descriptions ?? {}) };
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <h2 className="font-serif text-xl">User roles</h2>
+      <p className="mt-2 text-sm text-ink/60">
+        These are the roles that exist in the system. Assign them to users on the{" "}
+        <a href={usersPath} className="underline underline-offset-2">
+          Users
+        </a>{" "}
+        page.
+      </p>
+      <div className="mt-8 border border-ink/10 bg-white divide-y divide-ink/10">
+        {allRoles.map((r) => (
+          <div key={r} className="p-5">
+            <div className="flex items-center gap-3">
+              <div className="text-[0.65rem] uppercase tracking-[0.22em] bg-ink text-white px-2 py-1">
+                {r}
+              </div>
+              {r === "superadmin" && (
+                <div className="text-[0.65rem] uppercase tracking-[0.22em] text-sea">
+                  Highest privilege
+                </div>
+              )}
+            </div>
+            <p className="mt-2 text-sm text-ink/70">{text[r] ?? ""}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}