@bygghammar/cms-platform 0.27.0 → 0.29.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 0.29.0
+
+- Added `backoffice/GlobalSectionsListView` — the global-sections library with
+  previews, block chips, create and delete.
+- Added `backoffice/GlobalSectionBuilderView` — editor for one global section or
+  global block: rename, convert kind, usage note, save; the block editor and
+  data access are host-injected.
+- Added `backoffice/ReviewsView` — the reviews/testimonials slider editor with
+  host-supplied media picker and uploader.
+
+## 0.28.0
+
+- Added `backoffice/FormSubmissionsView` — the submissions inbox (filters, bulk
+  status changes, CSV export, resend/sheet retry and the drafts panel), with
+  host-supplied filter state, server functions and back link.
+- Added `backoffice/FormDeliveriesView` — the delivery monitor for failed
+  notifications, autoreplies, Sheets appends and webhooks, with retry and
+  mark-handled.
+- Added `backoffice/FormSettingsView` — shared form defaults: notifications,
+  spam protection, autoreply, retention/purge, GDPR consent, after-submit and
+  Google Sheets.
+
 ## 0.27.0
 
 - `config/site-config`: added `resolveSiteOrigin()` and `originIsFromEnvironment()`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.27.0",
+  "version": "0.29.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,
@@ -127,7 +127,13 @@
     "./backoffice/ContactDetailsView": "./src/backoffice/ContactDetailsView.tsx",
     "./backoffice/VersionView": "./src/backoffice/VersionView.tsx",
     "./backoffice/EmailSettingsView": "./src/backoffice/EmailSettingsView.tsx",
-    "./backoffice/BackupView": "./src/backoffice/BackupView.tsx"
+    "./backoffice/BackupView": "./src/backoffice/BackupView.tsx",
+    "./backoffice/FormSubmissionsView": "./src/backoffice/FormSubmissionsView.tsx",
+    "./backoffice/FormDeliveriesView": "./src/backoffice/FormDeliveriesView.tsx",
+    "./backoffice/FormSettingsView": "./src/backoffice/FormSettingsView.tsx",
+    "./backoffice/GlobalSectionsListView": "./src/backoffice/GlobalSectionsListView.tsx",
+    "./backoffice/GlobalSectionBuilderView": "./src/backoffice/GlobalSectionBuilderView.tsx",
+    "./backoffice/ReviewsView": "./src/backoffice/ReviewsView.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"
@@ -203,4 +209,4 @@
   "bin": {
     "cms-platform-migrations": "scripts/sync-migrations.mjs"
   }
-}
+}

package/src/backoffice/FormDeliveriesView.tsx

@@ -0,0 +1,344 @@
+import type React from "react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { AlertTriangle, ArrowLeft, CheckCircle2, RefreshCw, RotateCcw } from "lucide-react";
+
+/** Outbound channels a submission can be delivered through. */
+export const DELIVERY_CHANNELS = ["notification", "autoreply", "sheet", "webhook"] as const;
+export type DeliveryChannel = (typeof DELIVERY_CHANNELS)[number];
+
+/** One logged delivery attempt. */
+export type DeliveryAttemptRow = {
+  id: string;
+  form_key: string;
+  channel: string;
+  status: string;
+  attempt: number;
+  created_at: string;
+  resolved_at?: string | null;
+  duration_ms?: number | null;
+  target?: string | null;
+  error?: string | null;
+  submission_id?: string | null;
+  submission?: { payload?: Record<string, unknown> | null } | null;
+};
+
+/** Aggregated delivery data as returned by the host. */
+export type DeliveryAttemptsResult = {
+  rows: DeliveryAttemptRow[];
+  totals: { open: number; last24h: number; resolved: number };
+  perForm: {
+    form_key: string;
+    name: string;
+    open: number;
+    byChannel: Record<string, number>;
+  }[];
+};
+
+/** Host-provided data access for the delivery monitor. */
+export type FormDeliveriesDeps = {
+  data: DeliveryAttemptsResult | undefined;
+  isLoading: boolean;
+  forms: { key: string; name: string }[];
+  filters: {
+    formKey: string;
+    channel: "" | DeliveryChannel;
+    state: "open" | "resolved" | "all";
+  };
+  setFilters: (patch: Partial<FormDeliveriesDeps["filters"]>) => void;
+  refetch: () => Promise<unknown> | void;
+  retryAttempts: (input: {
+    data: { ids: string[] };
+  }) => Promise<{ retried: number; succeeded: number; failures: string[] }>;
+  resolveAttempts: (input: { data: { ids: string[] } }) => Promise<unknown>;
+  /** Host router link back to the forms index. */
+  BackLink: (props: { className?: string; children: React.ReactNode }) => React.ReactElement;
+};
+
+/**
+ * Failed outbound deliveries per form, with diagnostics and retry.
+ *
+ * Submissions are always stored before delivery is attempted, so a failure
+ * listed here never means lost data.
+ */
+export function FormDeliveriesView({ deps }: { deps: FormDeliveriesDeps }) {
+  const { data, isLoading, forms, filters, setFilters, refetch } = deps;
+  const [selected, setSelected] = useState<string[]>([]);
+  const [busy, setBusy] = useState(false);
+
+  const rows = data?.rows ?? [];
+  const allSelected = useMemo(
+    () => rows.length > 0 && selected.length === rows.length,
+    [rows, selected],
+  );
+
+  const run = async (fn: () => Promise<void>) => {
+    setBusy(true);
+    try {
+      await fn();
+      setSelected([]);
+      await refetch();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Action failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onRetry = (ids: string[]) =>
+    run(async () => {
+      const res = await deps.retryAttempts({ data: { ids } });
+      if (res.failures.length)
+        toast.warning(`${res.succeeded}/${res.retried} delivered`, {
+          description: res.failures.slice(0, 3).join(" · "),
+        });
+      else toast.success(`${res.succeeded} delivery/deliveries succeeded`);
+    });
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <deps.BackLink className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-ink/45 hover:text-ink">
+            <ArrowLeft className="size-4" />
+            Forms
+          </deps.BackLink>
+          <h1 className="mt-2 text-3xl font-semibold tracking-tight">Delivery monitor</h1>
+          <p className="mt-1 max-w-2xl text-sm text-ink/55">
+            Every notification, autoreply, Sheets append and webhook is logged. Submissions are
+            always stored first, so a failure here never means lost data.
+          </p>
+        </div>
+        <button
+          onClick={() => refetch()}
+          className="inline-flex items-center gap-2 border border-ink/15 bg-white px-4 py-2.5 text-xs uppercase tracking-[0.2em] hover:border-sea"
+        >
+          <RefreshCw className="size-4" />
+          Refresh
+        </button>
+      </div>
+
+      <div className="mt-8 grid gap-4 sm:grid-cols-3">
+        <Stat label="Open failures" value={data?.totals.open ?? 0} tone="bad" />
+        <Stat label="Failures last 24 h" value={data?.totals.last24h ?? 0} />
+        <Stat label="Resolved" value={data?.totals.resolved ?? 0} tone="good" />
+      </div>
+
+      {data?.perForm.length ? (
+        <div className="mt-6 border border-ink/10 bg-white">
+          <h2 className="border-b border-ink/10 px-6 py-3 text-xs uppercase tracking-[0.22em] text-ink/50">
+            Open failures per form
+          </h2>
+          <ul className="divide-y divide-ink/10">
+            {data.perForm.map((f) => (
+              <li key={f.form_key} className="flex flex-wrap items-center gap-4 px-6 py-3">
+                <button
+                  onClick={() => setFilters({ formKey: f.form_key })}
+                  className="text-sm font-medium hover:text-sea"
+                >
+                  {f.name}
+                </button>
+                <span className="text-xs text-ink/45">{f.form_key}</span>
+                <span className="text-xs text-ink/45">
+                  {Object.entries(f.byChannel)
+                    .map(([c, n]) => `${c}: ${n}`)
+                    .join(" · ")}
+                </span>
+                <span className="ml-auto text-xs uppercase tracking-[0.18em] text-red-600">
+                  {f.open} open
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      <div className="mt-6 flex flex-wrap items-center gap-3">
+        <select
+          value={filters.formKey}
+          onChange={(e) => setFilters({ formKey: e.target.value })}
+          className="border border-ink/15 bg-white px-3 py-2 text-sm"
+        >
+          <option value="">All forms</option>
+          {forms.map((f) => (
+            <option key={f.key} value={f.key}>
+              {f.name}
+            </option>
+          ))}
+        </select>
+        <select
+          value={filters.channel}
+          onChange={(e) => setFilters({ channel: e.target.value as "" | DeliveryChannel })}
+          className="border border-ink/15 bg-white px-3 py-2 text-sm"
+        >
+          <option value="">All channels</option>
+          {DELIVERY_CHANNELS.map((c) => (
+            <option key={c} value={c}>
+              {c}
+            </option>
+          ))}
+        </select>
+        <select
+          value={filters.state}
+          onChange={(e) =>
+            setFilters({ state: e.target.value as FormDeliveriesDeps["filters"]["state"] })
+          }
+          className="border border-ink/15 bg-white px-3 py-2 text-sm"
+        >
+          <option value="open">Open failures</option>
+          <option value="resolved">Resolved</option>
+          <option value="all">Everything</option>
+        </select>
+
+        {selected.length ? (
+          <div className="ml-auto flex items-center gap-2">
+            <button
+              onClick={() => onRetry(selected)}
+              disabled={busy}
+              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"
+            >
+              <RotateCcw className="size-4" />
+              Retry {selected.length}
+            </button>
+            <button
+              onClick={() =>
+                run(async () => {
+                  await deps.resolveAttempts({ data: { ids: selected } });
+                  toast.success("Marked as handled");
+                })
+              }
+              disabled={busy}
+              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"
+            >
+              <CheckCircle2 className="size-4" />
+              Mark handled
+            </button>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="mt-4 border border-ink/10 bg-white">
+        {isLoading ? (
+          <p className="px-6 py-8 text-sm text-ink/45">Loading…</p>
+        ) : !rows.length ? (
+          <p className="px-6 py-8 text-sm text-ink/45">
+            Nothing to show — every delivery went through.
+          </p>
+        ) : (
+          <>
+            <label className="flex items-center gap-3 border-b border-ink/10 px-6 py-3 text-xs uppercase tracking-[0.18em] text-ink/45">
+              <input
+                type="checkbox"
+                checked={allSelected}
+                onChange={(e) => setSelected(e.target.checked ? rows.map((r) => r.id) : [])}
+                className="size-4 accent-sea"
+              />
+              Select all ({rows.length})
+            </label>
+            <ul className="divide-y divide-ink/10">
+              {rows.map((r) => (
+                <li key={r.id} className="px-6 py-4">
+                  <div className="flex flex-wrap items-start gap-3">
+                    <input
+                      type="checkbox"
+                      checked={selected.includes(r.id)}
+                      onChange={(e) =>
+                        setSelected((prev) =>
+                          e.target.checked ? [...prev, r.id] : prev.filter((x) => x !== r.id),
+                        )
+                      }
+                      className="mt-1 size-4 accent-sea"
+                    />
+                    <div className="min-w-0 flex-1">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span
+                          className={`inline-flex items-center gap-1 border px-2 py-0.5 text-[0.6rem] uppercase tracking-[0.18em] ${
+                            r.resolved_at
+                              ? "border-emerald-600/30 text-emerald-700"
+                              : r.status === "failed"
+                                ? "border-red-600/30 text-red-600"
+                                : "border-ink/15 text-ink/50"
+                          }`}
+                        >
+                          {r.resolved_at ? (
+                            <CheckCircle2 className="size-3" />
+                          ) : (
+                            <AlertTriangle className="size-3" />
+                          )}
+                          {r.resolved_at ? "resolved" : r.status}
+                        </span>
+                        <span className="text-sm font-medium">{r.channel}</span>
+                        <span className="text-xs text-ink/45">{r.form_key}</span>
+                        <span className="text-xs text-ink/45">
+                          {new Date(r.created_at).toLocaleString("sv-SE")}
+                        </span>
+                        <span className="text-xs text-ink/45">attempt {r.attempt}</span>
+                        {r.duration_ms != null ? (
+                          <span className="text-xs text-ink/45">{r.duration_ms} ms</span>
+                        ) : null}
+                      </div>
+                      {r.target ? (
+                        <p className="mt-1 truncate text-xs text-ink/55">→ {r.target}</p>
+                      ) : null}
+                      {r.error ? (
+                        <p className="mt-1 break-words text-xs text-red-600">{r.error}</p>
+                      ) : null}
+                      {r.submission ? (
+                        <details className="mt-2">
+                          <summary className="cursor-pointer text-[0.65rem] uppercase tracking-[0.18em] text-ink/40">
+                            Submission details
+                          </summary>
+                          <dl className="mt-2 grid gap-1 text-xs text-ink/60 sm:grid-cols-2">
+                            {Object.entries(r.submission.payload ?? {}).map(([k, v]) => (
+                              <div key={k} className="flex gap-2">
+                                <dt className="text-ink/40">{k}</dt>
+                                <dd className="truncate">{String(v)}</dd>
+                              </div>
+                            ))}
+                          </dl>
+                        </details>
+                      ) : (
+                        <p className="mt-1 text-xs text-ink/40">
+                          No stored submission (test send).
+                        </p>
+                      )}
+                    </div>
+                    {r.submission_id && !r.resolved_at ? (
+                      <button
+                        onClick={() => onRetry([r.id])}
+                        disabled={busy}
+                        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" />
+                        Retry
+                      </button>
+                    ) : null}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value, tone }: { label: string; value: number; tone?: "good" | "bad" }) {
+  return (
+    <div className="border border-ink/10 bg-white p-6">
+      <p className="text-xs uppercase tracking-[0.22em] text-ink/45">{label}</p>
+      <p
+        className={`mt-2 text-3xl font-semibold ${
+          tone === "bad" && value > 0
+            ? "text-red-600"
+            : tone === "good"
+              ? "text-emerald-700"
+              : "text-ink"
+        }`}
+      >
+        {value}
+      </p>
+    </div>
+  );
+}