@bygghammar/cms-platform 0.6.0 → 0.8.0

package/src/backoffice/forms/FormPreview.tsx

@@ -0,0 +1,108 @@
+import type React from "react";
+import { useState } from "react";
+import { LocaleProvider, SUPPORTED_LOCALES, type Locale } from "../../i18n";
+import type {
+  FormDefaults,
+  FormFieldDef,
+  FormPrivateSettings,
+  FormPublicSettings,
+  PublicForm,
+} from "../../forms/field-sets";
+
+/**
+ * Renders the unsaved editor state with the exact public form component,
+ * including conditional show/hide and live validation errors.
+ * Submitting only runs the rules — nothing is stored or sent.
+ */
+export function FormPreview({
+  formKey,
+  name,
+  formType,
+  fields,
+  pub,
+  priv,
+  defaults,
+  dark = false,
+  renderForm,
+}: {
+  formKey: string;
+  name: string;
+  formType: string;
+  fields: FormFieldDef[];
+  pub: FormPublicSettings;
+  priv: FormPrivateSettings;
+  defaults?: FormDefaults | null;
+  dark?: boolean;
+  /** Host site's public form renderer (kept out of the platform on purpose). */
+  renderForm: (args: { form: PublicForm; dark: boolean; preview: boolean }) => React.ReactNode;
+}) {
+  const [locale, setLocale] = useState<Locale>("sv");
+  const [tone, setTone] = useState<"light" | "dark">(dark ? "dark" : "light");
+
+  const form: PublicForm = {
+    id: "preview",
+    key: formKey,
+    name,
+    form_type: formType,
+    fields,
+    title: pub.title,
+    intro: pub.intro,
+    submitLabel: pub.submitLabel ?? { sv: "Skicka", en: "Send" },
+    consentText: pub.consentText ?? defaults?.consent_text ?? {},
+    privacyPolicyUrl: defaults?.privacy_policy_url ?? "",
+    requireConsent: pub.requireConsent !== false,
+    thankyouMode:
+      (pub.thankyouMode ?? (defaults?.thankyou_mode as "inline" | "redirect") ?? "inline") ===
+      "redirect"
+        ? "redirect"
+        : "inline",
+    thankyouMessage: pub.thankyouMessage ??
+      defaults?.thankyou_message ?? { sv: "Tack! Vi hör av oss snart.", en: "Thank you!" },
+    thankyouRedirect: pub.thankyouRedirect ?? defaults?.thankyou_redirect ?? "",
+    honeypot: false,
+    minSeconds: 0,
+    savePartials: priv.savePartials ?? defaults?.save_partials ?? true,
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h3 className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Live preview</h3>
+          <p className="mt-1 text-xs text-ink/45">
+            Exactly what visitors see. Submitting here only checks the rules.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <select
+            value={locale}
+            onChange={(e) => setLocale(e.target.value as Locale)}
+            className="border border-ink/15 px-2 py-1.5 text-xs"
+          >
+            {SUPPORTED_LOCALES.map((l: Locale) => (
+              <option key={l} value={l}>
+                {l.toUpperCase()}
+              </option>
+            ))}
+          </select>
+          <button
+            type="button"
+            onClick={() => setTone(tone === "dark" ? "light" : "dark")}
+            className="border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea"
+          >
+            {tone === "dark" ? "Light background" : "Dark background"}
+          </button>
+        </div>
+      </div>
+
+      <div className={tone === "dark" ? "bg-ink p-6" : "bg-paper p-6"}>
+        <LocaleProvider locale={locale}>
+          {/* Remount on locale/tone change so state starts clean. */}
+          <div key={`${locale}-${tone}`}>
+            {renderForm({ form, dark: tone === "dark", preview: true })}
+          </div>
+        </LocaleProvider>
+      </div>
+    </div>
+  );
+}

package/src/backoffice/forms/TestDeliveryPanel.tsx

@@ -0,0 +1,201 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { Send, TestTube } from "lucide-react";
+
+import type { FormFieldDef, FormPrivateSettings } from "../../forms/field-sets";
+import { fieldLabel } from "../../forms/conditions";
+
+export type TestNotificationResult = {
+  ok: boolean;
+  recipients?: string[];
+  error?: string | null;
+  [key: string]: unknown;
+};
+
+/**
+ * Verifies notification templates, sender/recipient settings and conditional
+ * routing against example answers. Nothing is stored as a submission.
+ */
+export function TestDeliveryPanel({
+  formKey,
+  fields,
+  priv,
+  sendTest,
+}: {
+  formKey: string;
+  fields: FormFieldDef[];
+  priv: FormPrivateSettings;
+  /** Host site's test-delivery server function. */
+  sendTest: (input: { data: Record<string, unknown> }) => Promise<TestNotificationResult>;
+}) {
+  const test = sendTest;
+  const [what, setWhat] = useState<"notification" | "autoreply">("notification");
+  const [locale, setLocale] = useState("sv");
+  const [to, setTo] = useState("");
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState<TestNotificationResult | null>(null);
+
+  const run = async (send: boolean) => {
+    setBusy(true);
+    try {
+      const res = await test({
+        data: {
+          formKey,
+          locale,
+          what,
+          send,
+          to: to.trim() || undefined,
+          fields: fields as unknown as Record<string, unknown>[],
+          private_settings: priv as Record<string, unknown>,
+          values,
+        },
+      });
+      setResult(res);
+      if (res.error) toast.error(res.error);
+      else if (send && res.sent) toast.success("Test email sent");
+      else if (send) toast.error("Nothing was sent — see the report below");
+      else toast.success("Dry run complete");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Test failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const active = fields.filter((f) => f.enabled);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+          Send test notification
+        </h3>
+        <p className="mt-1 text-xs text-ink/45">
+          Uses the settings currently on screen. No submission is created.
+        </p>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-3">
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Email</span>
+          <select
+            value={what}
+            onChange={(e) => setWhat(e.target.value as "notification" | "autoreply")}
+            className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            <option value="notification">Admin notification</option>
+            <option value="autoreply">Autoreply to sender</option>
+          </select>
+        </label>
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Language</span>
+          <select
+            value={locale}
+            onChange={(e) => setLocale(e.target.value)}
+            className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            <option value="sv">SV</option>
+            <option value="en">EN</option>
+          </select>
+        </label>
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+            Send to (optional override)
+          </span>
+          <input
+            value={to}
+            onChange={(e) => setTo(e.target.value)}
+            placeholder="you@example.com"
+            className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          />
+        </label>
+      </div>
+
+      <div className="space-y-2">
+        <div className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+          Example answers (blank = generated sample)
+        </div>
+        <div className="grid gap-2 sm:grid-cols-2">
+          {active.map((f) => (
+            <label key={f.key} className="block">
+              <span className="text-[0.6rem] uppercase tracking-[0.16em] text-ink/45">
+                {fieldLabel(f, "sv")} · {f.key}
+              </span>
+              <input
+                value={values[f.key] ?? ""}
+                onChange={(e) => setValues({ ...values, [f.key]: e.target.value })}
+                className="mt-1 w-full border border-ink/15 px-2 py-1 text-xs"
+              />
+            </label>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          disabled={busy}
+          onClick={() => run(false)}
+          className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2 text-xs uppercase tracking-[0.2em] hover:border-sea disabled:opacity-50"
+        >
+          <TestTube className="size-4" />
+          Dry run (no email)
+        </button>
+        <button
+          type="button"
+          disabled={busy}
+          onClick={() => run(true)}
+          className="inline-flex items-center gap-2 bg-ink px-4 py-2 text-xs uppercase tracking-[0.2em] text-paper hover:bg-sea hover:text-ink disabled:opacity-50"
+        >
+          <Send className="size-4" />
+          Send test
+        </button>
+      </div>
+
+      {result ? (
+        <div className="space-y-2 border border-ink/10 bg-paper/60 p-4 text-xs text-ink/70">
+          <div>
+            <strong>Status:</strong>{" "}
+            {result.error
+              ? `Failed — ${result.error}`
+              : result.sent
+                ? "Sent"
+                : "Not sent (report only)"}
+          </div>
+          <div>
+            <strong>Recipients:</strong> {result.recipients.join(", ") || "—"}
+          </div>
+          <div>
+            <strong>Subject:</strong> {result.subject || "(standard subject)"}
+          </div>
+          <div>
+            <strong>From:</strong> {result.from || "(provider default)"} ·{" "}
+            <strong>Reply-to:</strong> {result.replyTo || "(submitter email)"}
+          </div>
+          <div>
+            <strong>Matched routing rules:</strong>{" "}
+            {result.matchedRules.length
+              ? result.matchedRules
+                  .map((r) => `${r.to}${r.exclusive ? " (only these)" : ""}`)
+                  .join(", ")
+              : "none"}
+          </div>
+          {result.warnings.length ? (
+            <ul className="list-disc pl-5 text-amber-700">
+              {result.warnings.map((w, i) => (
+                <li key={i}>{w}</li>
+              ))}
+            </ul>
+          ) : null}
+          <details>
+            <summary className="cursor-pointer text-ink/50">Example answers used</summary>
+            <pre className="mt-2 overflow-auto whitespace-pre-wrap text-[0.7rem]">
+              {JSON.stringify(result.sampleValues, null, 2)}
+            </pre>
+          </details>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/backoffice/forms/VersionHistory.tsx

@@ -0,0 +1,142 @@
+import type React from "react";
+import { useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { History, RotateCcw } from "lucide-react";
+
+import type {
+  FormFieldDef,
+  FormPrivateSettings,
+  FormPublicSettings,
+} from "../../forms/field-sets";
+
+
+/**
+ * Published history for one form. Every save stores an immutable snapshot of
+ * the definition (never of submissions), so any earlier state can be previewed
+ * and rolled back without touching received data.
+ */
+export type FormVersionRow = {
+  id: string;
+  version_no: number;
+  name: string;
+  form_type: string;
+  created_at: string;
+  created_by_email?: string | null;
+  note?: string | null;
+  fields: FormFieldDef[];
+  public_settings: FormPublicSettings;
+  private_settings: FormPrivateSettings;
+};
+
+export function VersionHistory({
+  formKey,
+  listVersions,
+  restoreVersion,
+  renderPreview,
+}: {
+  formKey: string;
+  listVersions: (input: { data: { formKey: string } }) => Promise<FormVersionRow[]>;
+  restoreVersion: (input: {
+    data: { versionId: string };
+  }) => Promise<{ carriedFields: string[] }>;
+  /** Host renders the preview so the platform stays free of site form UI. */
+  renderPreview: (version: FormVersionRow) => React.ReactNode;
+}) {
+  const qc = useQueryClient();
+  const list = listVersions;
+  const restore = restoreVersion;
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const { data: versions, isLoading } = useQuery({
+    queryKey: ["form-versions", formKey],
+    queryFn: () => list({ data: { formKey } }),
+  });
+
+  const selected = (versions ?? []).find((v) => v.id === openId) ?? null;
+
+  const onRestore = async (id: string, no: number) => {
+    if (!window.confirm(`Roll this form back to version ${no}? Submissions are untouched.`)) return;
+    setBusy(true);
+    try {
+      const res = await restore({ data: { versionId: id } });
+      await qc.invalidateQueries({ queryKey: ["backoffice-forms"] });
+      await qc.invalidateQueries({ queryKey: ["form-versions", formKey] });
+      toast.success(
+        res.carriedFields.length
+          ? `Rolled back. Kept ${res.carriedFields.length} field(s) with existing answers (disabled).`
+          : "Rolled back",
+      );
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Rollback failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-[minmax(0,420px)_1fr]">
+      <div className="border border-ink/10 bg-white p-6">
+        <h2 className="flex items-center gap-2 text-xs uppercase tracking-[0.22em] text-ink/50">
+          <History className="size-4" />
+          Version history
+        </h2>
+        {isLoading ? (
+          <p className="mt-4 text-sm text-ink/45">Loading…</p>
+        ) : !versions?.length ? (
+          <p className="mt-4 text-sm text-ink/45">
+            No snapshots yet. The next save creates version 1.
+          </p>
+        ) : (
+          <ul className="mt-4 divide-y divide-ink/10">
+            {versions.map((v) => (
+              <li key={v.id} className="flex items-start gap-3 py-3">
+                <button
+                  onClick={() => setOpenId(v.id)}
+                  className={`flex-1 text-left ${openId === v.id ? "text-ink" : "text-ink/70"}`}
+                >
+                  <span className="text-sm font-medium">
+                    v{v.version_no} · {v.name}
+                  </span>
+                  <span className="mt-0.5 block text-xs text-ink/45">
+                    {new Date(v.created_at).toLocaleString("sv-SE")}
+                    {v.created_by_email ? ` · ${v.created_by_email}` : ""}
+                  </span>
+                  {v.note ? (
+                    <span className="mt-0.5 block text-xs text-ink/45">{v.note}</span>
+                  ) : null}
+                  <span className="mt-0.5 block text-[0.65rem] uppercase tracking-[0.18em] text-ink/35">
+                    {v.fields.filter((f) => f.enabled !== false).length} active field(s)
+                  </span>
+                </button>
+                <button
+                  onClick={() => onRestore(v.id, v.version_no)}
+                  disabled={busy}
+                  title="Roll back to this version"
+                  className="inline-flex items-center gap-2 border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.18em] hover:border-sea disabled:opacity-50"
+                >
+                  <RotateCcw className="size-3.5" />
+                  Restore
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div className="border border-ink/10 bg-white p-6">
+        <h2 className="text-xs uppercase tracking-[0.22em] text-ink/50">
+          {selected ? `Preview of v${selected.version_no}` : "Preview"}
+        </h2>
+        {selected ? (
+          <div className="mt-4">
+            {renderPreview(selected)}
+          </div>
+        ) : (
+          <p className="mt-4 text-sm text-ink/45">Pick a version on the left to preview it.</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/backoffice/media/MediaCleanup.tsx

@@ -0,0 +1,186 @@
+import { useState } from "react";
+import { Loader2, Wand2 } from "lucide-react";
+import { toast } from "sonner";
+
+/** Plan returned by the host site's duplicate scan. */
+export type MediaCleanupPlan = {
+  scanned: number;
+  duplicateBytes: number;
+  duplicates: { hash: string; keep: string; remove: string[] }[];
+  renames: { from: string; to: string }[];
+};
+
+/** Result of applying a cleanup plan. */
+export type MediaCleanupResult = {
+  merged: number;
+  renamed: number;
+  rewritten: number;
+  freedBytes: number;
+  errors?: string[];
+};
+
+function bytes(n: number) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Superadmin-only library maintenance: merge byte-identical duplicates and
+ * rename legacy timestamp-prefixed files. References on the site are repointed
+ * first; the extra copies go to the bin, never straight to deletion.
+ */
+export function MediaCleanup({
+  onDone,
+  scanDuplicates,
+  runCleanup,
+}: {
+  onDone: () => Promise<void> | void;
+  /** Host-provided duplicate scan. */
+  scanDuplicates: () => Promise<MediaCleanupPlan>;
+  /** Host-provided cleanup runner. */
+  runCleanup: (input: {
+    data: { duplicates: boolean; renames: boolean };
+  }) => Promise<MediaCleanupResult>;
+}) {
+  const scan = scanDuplicates;
+  const apply = runCleanup;
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [plan, setPlan] = useState<MediaCleanupPlan | null>(null);
+
+  const doScan = async () => {
+    setBusy(true);
+    try {
+      const result = (await scan()) as MediaCleanupPlan;
+      setPlan(result);
+      setOpen(true);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Scan failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const doApply = async (opts: { duplicates: boolean; renames: boolean }) => {
+    setBusy(true);
+    try {
+      const res = await apply({ data: opts });
+      toast.success(
+        `Merged ${res.merged} duplicate${res.merged === 1 ? "" : "s"}, renamed ${res.renamed}, updated ${res.rewritten} reference${res.rewritten === 1 ? "" : "s"} (${bytes(res.freedBytes)} freed).`,
+      );
+      if (res.errors?.length) toast.error(res.errors.slice(0, 3).join(" · "));
+      setPlan(null);
+      setOpen(false);
+      await onDone();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Cleanup failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={doScan}
+        disabled={busy}
+        title="Find duplicate files and legacy timestamp filenames"
+        className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2 text-sm hover:border-sea disabled:opacity-50"
+      >
+        {busy && !open ? <Loader2 className="size-4 animate-spin" /> : <Wand2 className="size-4" />}
+        Clean up
+      </button>
+
+      {open && plan ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/50 p-4">
+          <div className="w-full max-w-2xl max-h-[85vh] overflow-auto bg-white border border-ink/10">
+            <header className="px-5 py-4 border-b border-ink/10">
+              <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+                Library cleanup
+              </div>
+              <div className="text-sm text-ink/70 mt-1">
+                {plan.scanned} files scanned ·{" "}
+                {plan.duplicates.reduce((n, g) => n + g.remove.length, 0)} duplicate cop
+                {plan.duplicates.reduce((n, g) => n + g.remove.length, 0) === 1 ? "y" : "ies"} (
+                {bytes(plan.duplicateBytes)}) · {plan.renames.length} timestamp name
+                {plan.renames.length === 1 ? "" : "s"}
+              </div>
+            </header>
+
+            <div className="p-5 space-y-5 text-sm">
+              {plan.duplicates.length > 0 ? (
+                <section className="space-y-2">
+                  <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+                    Duplicates to merge
+                  </div>
+                  {plan.duplicates.map((g) => (
+                    <div key={g.hash} className="border border-ink/10 p-3">
+                      <div className="text-ink">Keep: {g.keep}</div>
+                      <ul className="mt-1 text-ink/60 text-xs list-disc pl-5">
+                        {g.remove.map((p) => (
+                          <li key={p}>{p}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </section>
+              ) : null}
+
+              {plan.renames.length > 0 ? (
+                <section className="space-y-2">
+                  <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+                    Renames
+                  </div>
+                  <ul className="text-xs text-ink/70 space-y-1">
+                    {plan.renames.map((r) => (
+                      <li key={r.from}>
+                        {r.from} <span className="text-ink/40">→</span> {r.to}
+                      </li>
+                    ))}
+                  </ul>
+                </section>
+              ) : null}
+
+              {plan.duplicates.length === 0 && plan.renames.length === 0 ? (
+                <div className="text-ink/60">Nothing to clean up — the library is tidy.</div>
+              ) : null}
+            </div>
+
+            <footer className="px-5 py-4 border-t border-ink/10 flex flex-wrap items-center justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="border border-ink/15 px-4 py-2 text-sm hover:border-sea"
+              >
+                Close
+              </button>
+              {plan.renames.length > 0 ? (
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() => doApply({ duplicates: false, renames: true })}
+                  className="border border-ink/15 px-4 py-2 text-sm hover:border-sea disabled:opacity-50"
+                >
+                  Rename only
+                </button>
+              ) : null}
+              {plan.duplicates.length > 0 || plan.renames.length > 0 ? (
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() => doApply({ duplicates: true, renames: true })}
+                  className="inline-flex items-center gap-2 bg-ink text-paper px-4 py-2 text-sm hover:bg-sea disabled:opacity-50"
+                >
+                  {busy ? <Loader2 className="size-4 animate-spin" /> : null}
+                  Merge duplicates & rename
+                </button>
+              ) : null}
+            </footer>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}