@bygghammar/cms-platform 0.27.0 → 0.29.0

package/src/backoffice/FormSubmissionsView.tsx

@@ -0,0 +1,646 @@
+import type React from "react";
+import { Fragment, useMemo, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import {
+  ArrowLeft,
+  Download,
+  Mail,
+  RefreshCw,
+  Search,
+  Send,
+  Sheet as SheetIcon,
+  Trash2,
+} from "lucide-react";
+import type { FormFieldDef } from "../forms/field-sets";
+
+/** Workflow states a submission can be in. */
+export const SUBMISSION_STATUSES = ["new", "read", "handled", "spam"] as const;
+export type SubmissionStatus = (typeof SUBMISSION_STATUSES)[number];
+
+/** Page size used by the inbox; the host must query with the same value. */
+export const SUBMISSIONS_PAGE_SIZE = 50;
+
+/** One stored submission. */
+export type SubmissionsViewRow = {
+  id: string;
+  form_key: string;
+  locale: string;
+  status: string;
+  created_at: string;
+  page_path?: string | null;
+  payload?: Record<string, string> | null;
+  notified_at?: string | null;
+  autoreply_at?: string | null;
+  sheet_synced_at?: string | null;
+  sheet_error?: string | null;
+  delivery_error?: string | null;
+  consent_at?: string | null;
+  ip?: string | null;
+  user_agent?: string | null;
+};
+
+/** One part-filled form that was never submitted. */
+export type PartialsViewRow = {
+  id: string;
+  form_key: string;
+  updated_at: string;
+  payload?: Record<string, string> | null;
+};
+
+/** Filter state the host keeps in the URL. */
+export type SubmissionsFilters = {
+  form?: string;
+  status?: string;
+  locale?: string;
+  q?: string;
+  from?: string;
+  to?: string;
+  page?: number;
+};
+
+/** Host-provided data access and navigation for the submissions inbox. */
+export type FormSubmissionsDeps = {
+  filters: SubmissionsFilters;
+  setFilters: (patch: SubmissionsFilters) => void;
+  clearFilters: () => void;
+  goToPage: (page: number) => void;
+  data:
+    | {
+        rows: SubmissionsViewRow[];
+        total: number;
+        counts?: Record<string, number>;
+      }
+    | undefined;
+  isLoading: boolean;
+  isFetching: boolean;
+  forms: { key: string; name: string; fields: FormFieldDef[] }[];
+  /** Active locales, used for the language filter. */
+  locales?: string[];
+  refresh: () => Promise<unknown> | void;
+  setStatus: (input: { data: { ids: string[]; status: SubmissionStatus } }) => Promise<unknown>;
+  pushToSheet: (input: { data: { ids: string[] } }) => Promise<{ error?: string | null }>;
+  resendDelivery: (input: {
+    data: { id: string; what: "notification" | "autoreply" };
+  }) => Promise<unknown>;
+  listPartials: (input: {
+    data: { formKey?: string; includeCompleted: boolean; limit: number };
+  }) => Promise<PartialsViewRow[]>;
+  deletePartials: (input: { data: { ids: string[] } }) => Promise<unknown>;
+  /** Host router link back to the forms index. */
+  BackLink: (props: { className?: string; children: React.ReactNode }) => React.ReactElement;
+};
+
+function toCsv(rows: Record<string, string>[], columns: { key: string; label: string }[]) {
+  const esc = (v: string) => `"${(v ?? "").replace(/"/g, '""')}"`;
+  return [
+    columns.map((c) => esc(c.label)).join(","),
+    ...rows.map((r) => columns.map((c) => esc(r[c.key] ?? "")).join(",")),
+  ].join("\n");
+}
+
+/** The submissions inbox: filtering, bulk actions, CSV export and drafts. */
+export function FormSubmissionsView({ deps }: { deps: FormSubmissionsDeps }) {
+  const { filters, setFilters, data, isLoading, isFetching, forms } = deps;
+  const page = filters.page ?? 0;
+  const [term, setTerm] = useState(filters.q ?? "");
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [open, setOpen] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const rows = data?.rows ?? [];
+  const total = data?.total ?? 0;
+  const counts = data?.counts ?? {};
+  const locales = deps.locales ?? ["sv", "en"];
+
+  /** Readable labels per field key, from the form definitions. */
+  const labels = useMemo(() => {
+    const m = new Map<string, string>();
+    for (const f of forms) {
+      for (const fl of f.fields ?? []) {
+        m.set(fl.key, fl.label?.sv ?? fl.label?.en ?? fl.key);
+      }
+    }
+    return m;
+  }, [forms]);
+
+  const columns = useMemo(() => {
+    const keys = new Set<string>();
+    for (const r of rows) for (const k of Object.keys(r.payload ?? {})) keys.add(k);
+    return Array.from(keys).map((k) => ({ key: k, label: labels.get(k) ?? k }));
+  }, [rows, labels]);
+
+  const download = () => {
+    const flat = rows.map((r) => ({
+      created_at: new Date(r.created_at).toLocaleString("sv-SE"),
+      form: r.form_key,
+      locale: r.locale,
+      status: r.status,
+      page: r.page_path ?? "",
+      ...(r.payload ?? {}),
+    }));
+    const csv = toCsv(flat, [
+      { key: "created_at", label: "Received" },
+      { key: "form", label: "Form" },
+      { key: "locale", label: "Language" },
+      { key: "status", label: "Status" },
+      { key: "page", label: "Page" },
+      ...columns,
+    ]);
+    const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8" }));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `submissions-${filters.form ?? "all"}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const runBulk = async (fn: () => Promise<unknown>, okMsg: string) => {
+    setBusy(true);
+    try {
+      await fn();
+      await deps.refresh();
+      setSelected(new Set());
+      toast.success(okMsg);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Action failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const ids = Array.from(selected);
+  const allOnPage = rows.length > 0 && rows.every((r) => selected.has(r.id));
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <deps.BackLink className="inline-flex items-center gap-2 text-[0.7rem] uppercase tracking-[0.22em] text-ink/55 hover:text-sea">
+            <ArrowLeft className="size-3.5" />
+            Back to forms
+          </deps.BackLink>
+          <h1 className="mt-3 font-serif text-2xl text-ink">Submissions</h1>
+          <p className="mt-1 text-xs text-ink/50">
+            {total} match{total === 1 ? "" : "es"} · New {counts.new ?? 0} · Read {counts.read ?? 0}{" "}
+            · Handled {counts.handled ?? 0} · Spam {counts.spam ?? 0}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => deps.refresh()}
+            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 ${isFetching ? "animate-spin" : ""}`} />
+            Refresh
+          </button>
+          <button
+            onClick={download}
+            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"
+          >
+            <Download className="size-4" />
+            Export CSV
+          </button>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="mt-6 flex flex-wrap items-end gap-3 border border-ink/10 bg-white p-4">
+        <label className="min-w-[180px]">
+          <span className="text-xs text-ink/55">Form</span>
+          <select
+            value={filters.form ?? ""}
+            onChange={(e) => setFilters({ form: e.target.value || undefined })}
+            className="mt-1 w-full border border-ink/20 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>
+        </label>
+        <label className="min-w-[140px]">
+          <span className="text-xs text-ink/55">Status</span>
+          <select
+            value={filters.status ?? ""}
+            onChange={(e) => setFilters({ status: e.target.value || undefined })}
+            className="mt-1 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            <option value="">Any status</option>
+            {SUBMISSION_STATUSES.map((s) => (
+              <option key={s} value={s}>
+                {s[0].toUpperCase() + s.slice(1)}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="min-w-[120px]">
+          <span className="text-xs text-ink/55">Language</span>
+          <select
+            value={filters.locale ?? ""}
+            onChange={(e) => setFilters({ locale: e.target.value || undefined })}
+            className="mt-1 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            <option value="">Any</option>
+            {locales.map((l) => (
+              <option key={l} value={l}>
+                {l}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label>
+          <span className="text-xs text-ink/55">From</span>
+          <input
+            type="date"
+            value={filters.from ?? ""}
+            onChange={(e) => setFilters({ from: e.target.value || undefined })}
+            className="mt-1 border border-ink/20 px-3 py-2 text-sm"
+          />
+        </label>
+        <label>
+          <span className="text-xs text-ink/55">To</span>
+          <input
+            type="date"
+            value={filters.to ?? ""}
+            onChange={(e) => setFilters({ to: e.target.value || undefined })}
+            className="mt-1 border border-ink/20 px-3 py-2 text-sm"
+          />
+        </label>
+        <label className="flex-1 min-w-[200px]">
+          <span className="text-xs text-ink/55">Search answers</span>
+          <div className="mt-1 flex">
+            <input
+              value={term}
+              onChange={(e) => setTerm(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") setFilters({ q: term.trim() || undefined });
+              }}
+              placeholder="name, email, keyword…"
+              className="w-full border border-ink/20 px-3 py-2 text-sm"
+            />
+            <button
+              onClick={() => setFilters({ q: term.trim() || undefined })}
+              className="border border-l-0 border-ink/20 px-3 hover:border-sea"
+              title="Search"
+            >
+              <Search className="size-4" />
+            </button>
+          </div>
+        </label>
+        <button
+          onClick={() => {
+            setTerm("");
+            deps.clearFilters();
+          }}
+          className="px-3 py-2 text-xs uppercase tracking-[0.2em] text-ink/50 hover:text-sea"
+        >
+          Clear
+        </button>
+      </div>
+
+      {/* Bulk bar */}
+      {ids.length > 0 ? (
+        <div className="mt-4 flex flex-wrap items-center gap-3 border border-sea/40 bg-sea/5 px-4 py-3 text-xs">
+          <span className="uppercase tracking-[0.2em] text-ink/60">{ids.length} selected</span>
+          {SUBMISSION_STATUSES.map((s) => (
+            <button
+              key={s}
+              disabled={busy}
+              onClick={() =>
+                runBulk(() => deps.setStatus({ data: { ids, status: s } }), `Marked as ${s}`)
+              }
+              className="border border-ink/15 bg-white px-3 py-1.5 uppercase tracking-[0.2em] hover:border-sea disabled:opacity-50"
+            >
+              Mark {s}
+            </button>
+          ))}
+          <button
+            disabled={busy}
+            onClick={() =>
+              runBulk(async () => {
+                const res = await deps.pushToSheet({ data: { ids } });
+                if (res.error) toast.warning(res.error);
+              }, "Pushed to Google Sheets")
+            }
+            className="inline-flex items-center gap-1.5 border border-ink/15 bg-white px-3 py-1.5 uppercase tracking-[0.2em] hover:border-sea disabled:opacity-50"
+          >
+            <SheetIcon className="size-3.5" />
+            Push to sheet
+          </button>
+          <button
+            onClick={() => setSelected(new Set())}
+            className="ml-auto text-ink/50 hover:text-sea"
+          >
+            Clear selection
+          </button>
+        </div>
+      ) : null}
+
+      <div className="mt-6 border border-ink/10 bg-white overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-ink/10 text-left text-[0.65rem] uppercase tracking-[0.2em] text-ink/50">
+              <th className="px-4 py-3">
+                <input
+                  type="checkbox"
+                  checked={allOnPage}
+                  onChange={(e) =>
+                    setSelected(e.target.checked ? new Set(rows.map((r) => r.id)) : new Set())
+                  }
+                  className="size-4 accent-sea"
+                />
+              </th>
+              <th className="px-4 py-3">Received</th>
+              <th className="px-4 py-3">Form</th>
+              <th className="px-4 py-3">Summary</th>
+              <th className="px-4 py-3">Status</th>
+              <th className="px-4 py-3">Delivery</th>
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading ? (
+              <tr>
+                <td className="px-6 py-6 text-ink/50" colSpan={6}>
+                  Loading…
+                </td>
+              </tr>
+            ) : rows.length === 0 ? (
+              <tr>
+                <td className="px-6 py-6 text-ink/50" colSpan={6}>
+                  No submissions match these filters.
+                </td>
+              </tr>
+            ) : (
+              rows.map((r) => {
+                const p = r.payload ?? {};
+                const summary =
+                  [p.email, p.name, [p.firstName, p.lastName].filter(Boolean).join(" "), p.phone]
+                    .filter(Boolean)
+                    .join(" · ") || "—";
+                const isOpen = open === r.id;
+                return (
+                  <Fragment key={r.id}>
+                    <tr
+                      className="border-b border-ink/5 last:border-0 cursor-pointer hover:bg-ink/[0.02]"
+                      onClick={() => setOpen(isOpen ? null : r.id)}
+                    >
+                      <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
+                        <input
+                          type="checkbox"
+                          checked={selected.has(r.id)}
+                          onChange={(e) => {
+                            const next = new Set(selected);
+                            if (e.target.checked) next.add(r.id);
+                            else next.delete(r.id);
+                            setSelected(next);
+                          }}
+                          className="size-4 accent-sea"
+                        />
+                      </td>
+                      <td className="px-4 py-3 text-ink/60 whitespace-nowrap">
+                        {new Date(r.created_at).toLocaleString("sv-SE")}
+                      </td>
+                      <td className="px-4 py-3 text-ink/60">{r.form_key}</td>
+                      <td className="px-4 py-3 text-ink">
+                        {r.status === "new" ? (
+                          <span className="mr-2 inline-block size-1.5 rounded-full bg-sea align-middle" />
+                        ) : null}
+                        {summary}
+                      </td>
+                      <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
+                        <select
+                          value={r.status}
+                          onChange={async (e) => {
+                            try {
+                              await deps.setStatus({
+                                data: {
+                                  ids: [r.id],
+                                  status: e.target.value as SubmissionStatus,
+                                },
+                              });
+                              await deps.refresh();
+                            } catch (err) {
+                              toast.error(
+                                err instanceof Error ? err.message : "Could not update status",
+                              );
+                            }
+                          }}
+                          className="border border-ink/15 bg-white px-2 py-1 text-xs"
+                        >
+                          {SUBMISSION_STATUSES.map((s) => (
+                            <option key={s} value={s}>
+                              {s[0].toUpperCase() + s.slice(1)}
+                            </option>
+                          ))}
+                        </select>
+                      </td>
+                      <td className="px-4 py-3 text-[0.7rem] text-ink/50 whitespace-nowrap">
+                        {r.notified_at ? "Notified" : "—"} · {r.autoreply_at ? "Replied" : "—"} ·{" "}
+                        {r.sheet_synced_at ? "Synced" : r.sheet_error ? "Sheet error" : "—"}
+                      </td>
+                    </tr>
+                    {isOpen ? (
+                      <tr className="border-b border-ink/5 bg-ink/[0.02]">
+                        <td colSpan={6} className="px-6 py-4">
+                          <dl className="grid gap-3 sm:grid-cols-2">
+                            {Object.entries(p).map(([k, v]) => (
+                              <div key={k}>
+                                <dt className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/45">
+                                  {labels.get(k) ?? k}
+                                </dt>
+                                <dd className="whitespace-pre-wrap text-ink">{String(v) || "—"}</dd>
+                              </div>
+                            ))}
+                          </dl>
+                          <p className="mt-4 text-xs text-ink/45">
+                            {r.locale} · {r.page_path ?? "—"} ·{" "}
+                            {r.consent_at
+                              ? `consent ${new Date(r.consent_at).toLocaleString("sv-SE")}`
+                              : "no consent"}
+                            {r.ip ? ` · ${r.ip}` : ""}
+                          </p>
+                          {r.user_agent ? (
+                            <p className="mt-1 text-[0.7rem] text-ink/35">{r.user_agent}</p>
+                          ) : null}
+                          {r.delivery_error || r.sheet_error ? (
+                            <p className="mt-2 text-xs text-red-500">
+                              {[r.delivery_error, r.sheet_error].filter(Boolean).join(" · ")}
+                            </p>
+                          ) : null}
+                          <div className="mt-4 flex flex-wrap gap-2">
+                            <button
+                              disabled={busy}
+                              onClick={() =>
+                                runBulk(
+                                  () => deps.resendDelivery({ data: { id: r.id, what: "notification" } }),
+                                  "Notification sent",
+                                )
+                              }
+                              className="inline-flex items-center gap-1.5 border border-ink/15 bg-white px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea disabled:opacity-50"
+                            >
+                              <Send className="size-3.5" />
+                              Resend notification
+                            </button>
+                            <button
+                              disabled={busy}
+                              onClick={() =>
+                                runBulk(
+                                  () => deps.resendDelivery({ data: { id: r.id, what: "autoreply" } }),
+                                  "Autoreply sent",
+                                )
+                              }
+                              className="inline-flex items-center gap-1.5 border border-ink/15 bg-white px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea disabled:opacity-50"
+                            >
+                              <Mail className="size-3.5" />
+                              Send autoreply
+                            </button>
+                            <button
+                              disabled={busy}
+                              onClick={() =>
+                                runBulk(async () => {
+                                  const res = await deps.pushToSheet({ data: { ids: [r.id] } });
+                                  if (res.error) toast.warning(res.error);
+                                }, "Pushed to sheet")
+                              }
+                              className="inline-flex items-center gap-1.5 border border-ink/15 bg-white px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea disabled:opacity-50"
+                            >
+                              <SheetIcon className="size-3.5" />
+                              Retry sheet sync
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ) : null}
+                  </Fragment>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-4 flex items-center justify-between text-xs text-ink/55">
+        <span>
+          Page {page + 1} of {Math.max(1, Math.ceil(total / SUBMISSIONS_PAGE_SIZE))}
+        </span>
+        <div className="flex gap-2">
+          <button
+            disabled={page === 0}
+            onClick={() => deps.goToPage(page - 1)}
+            className="border border-ink/15 bg-white px-3 py-1.5 uppercase tracking-[0.2em] hover:border-sea disabled:opacity-40"
+          >
+            Previous
+          </button>
+          <button
+            disabled={(page + 1) * SUBMISSIONS_PAGE_SIZE >= total}
+            onClick={() => deps.goToPage(page + 1)}
+            className="border border-ink/15 bg-white px-3 py-1.5 uppercase tracking-[0.2em] hover:border-sea disabled:opacity-40"
+          >
+            Next
+          </button>
+        </div>
+      </div>
+
+      <PartialsPanel deps={deps} labels={labels} />
+    </div>
+  );
+}
+
+/** Part-filled forms that were never submitted, kept apart from real entries. */
+function PartialsPanel({
+  deps,
+  labels,
+}: {
+  deps: FormSubmissionsDeps;
+  labels: Map<string, string>;
+}) {
+  const qc = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const formKey = deps.filters.form;
+
+  const { data, isFetching } = useQuery({
+    queryKey: ["form-partials", formKey],
+    queryFn: () => deps.listPartials({ data: { formKey, includeCompleted: false, limit: 100 } }),
+    enabled: open,
+  });
+  const rows = data ?? [];
+
+  const remove = async (id: string) => {
+    try {
+      await deps.deletePartials({ data: { ids: [id] } });
+      await qc.invalidateQueries({ queryKey: ["form-partials"] });
+      toast.success("Draft deleted");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Delete failed");
+    }
+  };
+
+  return (
+    <div className="mt-10 border border-ink/10 bg-white">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-center justify-between px-5 py-4 text-left"
+      >
+        <span>
+          <span className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+            Incomplete forms (drafts)
+          </span>
+          <span className="mt-1 block text-xs text-ink/45">
+            What visitors typed but never sent. Never merged into submissions.
+          </span>
+        </span>
+        <span className="text-xs uppercase tracking-[0.2em] text-ink/45">
+          {open ? "Hide" : "Show"}
+        </span>
+      </button>
+
+      {open ? (
+        <div className="border-t border-ink/10">
+          {isFetching && !rows.length ? (
+            <p className="p-5 text-xs text-ink/45">Loading…</p>
+          ) : !rows.length ? (
+            <p className="p-5 text-xs text-ink/45">No drafts right now.</p>
+          ) : (
+            <table className="w-full text-sm">
+              <thead className="bg-paper/60 text-[0.65rem] uppercase tracking-[0.18em] text-ink/50">
+                <tr>
+                  <th className="px-4 py-2 text-left">Last typed</th>
+                  <th className="px-4 py-2 text-left">Form</th>
+                  <th className="px-4 py-2 text-left">Answers so far</th>
+                  <th className="px-4 py-2" />
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((r) => (
+                  <tr key={r.id} className="border-t border-ink/5 align-top">
+                    <td className="whitespace-nowrap px-4 py-3 text-xs text-ink/60">
+                      {new Date(r.updated_at).toLocaleString("sv-SE")}
+                    </td>
+                    <td className="px-4 py-3 text-xs text-ink/60">{r.form_key}</td>
+                    <td className="px-4 py-3 text-xs text-ink/70">
+                      {Object.entries(r.payload ?? {})
+                        .map(([k, v]) => `${labels.get(k) ?? k}: ${v}`)
+                        .join(" · ")}
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      <button
+                        onClick={() => remove(r.id)}
+                        className="inline-flex items-center gap-1.5 border border-ink/15 px-2.5 py-1.5 text-[0.6rem] uppercase tracking-[0.2em] hover:border-red-500 hover:text-red-600"
+                      >
+                        <Trash2 className="size-3.5" />
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}