@bygghammar/cms-platform 0.16.0 → 0.18.0

package/src/backoffice/FormsIndexView.tsx

@@ -0,0 +1,435 @@
+import type React from "react";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  Activity,
+  Plus,
+  Settings2,
+  Inbox,
+  Trash2,
+  Copy,
+  RotateCcw,
+  ShieldAlert,
+} from "lucide-react";
+import { FORM_TYPES, type FormFieldDef } from "../forms/field-sets";
+
+/** One row in the forms list. */
+export type FormsListRow = {
+  id: string;
+  key: string;
+  name: string;
+  form_type: string;
+  is_active: boolean;
+  fields: FormFieldDef[];
+  submissions: number;
+  newSubmissions: number;
+  lastSubmissionAt?: string | null;
+};
+
+/** One soft-deleted form row. */
+export type DeletedFormRow = {
+  id: string;
+  key: string;
+  name: string;
+  form_type: string;
+  deleted_at: string;
+  deleted_by_email?: string | null;
+};
+
+/** Host-provided data access and links for the forms index. */
+export type FormsIndexDeps = {
+  forms: FormsListRow[];
+  isLoading: boolean;
+  bin: { rows: DeletedFormRow[]; canPurge: boolean } | undefined;
+  createForm: (input: {
+    data: { key: string; name: string; form_type: string };
+  }) => Promise<unknown>;
+  duplicateForm: (input: { data: { id: string; key: string; name: string } }) => Promise<unknown>;
+  deleteForm: (input: { data: { id: string } }) => Promise<unknown>;
+  restoreForm: (input: { data: { id: string } }) => Promise<unknown>;
+  purgeForm: (input: { data: { id: string } }) => Promise<unknown>;
+  getFormUsage: (input: {
+    data: { key: string };
+  }) => Promise<{ pages: string[]; globalSections: string[] }>;
+  refresh: () => Promise<unknown> | void;
+  /** Host router link; `params` carries the form key for the editor route. */
+  LinkComponent: (props: {
+    to: string;
+    params?: Record<string, string>;
+    search?: Record<string, unknown>;
+    className?: string;
+    children: React.ReactNode;
+  }) => React.ReactElement;
+  paths?: {
+    editor?: string;
+    submissions?: string;
+    deliveries?: string;
+    settings?: string;
+  };
+};
+
+function slugify(v: string) {
+  return v
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 64);
+}
+
+/** Host-agnostic forms index: create, list, duplicate, bin and restore forms. */
+export function FormsIndexView({ deps }: { deps: FormsIndexDeps }) {
+  const {
+    forms,
+    isLoading,
+    bin,
+    createForm,
+    duplicateForm,
+    deleteForm,
+    restoreForm,
+    purgeForm,
+    getFormUsage,
+    refresh,
+    LinkComponent: Link,
+  } = deps;
+  const paths = {
+    editor: deps.paths?.editor ?? "/kontoret/forms/$key",
+    submissions: deps.paths?.submissions ?? "/kontoret/forms/submissions",
+    deliveries: deps.paths?.deliveries ?? "/kontoret/forms/deliveries",
+    settings: deps.paths?.settings ?? "/kontoret/forms/settings",
+  };
+
+  const [view, setView] = useState<"list" | "bin">("list");
+  const [name, setName] = useState("");
+  const [type, setType] = useState("contact");
+  const [busy, setBusy] = useState(false);
+
+  const onCreate = async () => {
+    if (!name.trim()) return;
+    setBusy(true);
+    try {
+      await createForm({ data: { key: slugify(name), name: name.trim(), form_type: type } });
+      await refresh();
+      setName("");
+      toast.success("Form created");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not create the form");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onDuplicate = async (f: { id: string; name: string; key: string }) => {
+    const newName = window.prompt("Name for the copy", `${f.name} (copy)`);
+    if (!newName?.trim()) return;
+    let key = slugify(newName);
+    const taken = new Set(forms.map((x) => x.key));
+    if (!key || taken.has(key)) {
+      let i = 2;
+      const base = key || `${f.key}-copy`;
+      key = base;
+      while (taken.has(key)) key = `${base}-${i++}`;
+    }
+    try {
+      await duplicateForm({ data: { id: f.id, key, name: newName.trim() } });
+      await refresh();
+      toast.success(`Copied as "${newName.trim()}" (inactive)`);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not copy the form");
+    }
+  };
+
+  const onDelete = async (f: { id: string; name: string; key: string }) => {
+    let warning = "";
+    try {
+      const u = await getFormUsage({ data: { key: f.key } });
+      const places = [...u.pages, ...u.globalSections];
+      if (places.length) {
+        warning = `\n\nWARNING: this form is still used on: ${places.join(", ")}. Those places will show nothing until you pick another form.`;
+      }
+    } catch {
+      /* usage check is advisory only */
+    }
+    if (
+      !window.confirm(
+        `Move the form "${f.name}" to the bin? Submissions are kept and stay visible in the inbox.${warning}`,
+      )
+    )
+      return;
+    try {
+      await deleteForm({ data: { id: f.id } });
+      await refresh();
+      toast.success("Form moved to the bin");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not delete");
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h1 className="font-serif text-2xl text-ink">Forms</h1>
+          <p className="mt-2 text-sm text-ink/60">
+            Every form on the site in one place — fields, notifications, submissions and Google
+            Sheets sync. All forms inherit the shared defaults.
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Link
+            to={paths.submissions}
+            className="inline-flex items-center gap-2 border border-ink/15 bg-white px-4 py-2.5 text-xs uppercase tracking-[0.2em] text-ink hover:border-sea"
+          >
+            <Inbox className="size-4" />
+            Submissions
+          </Link>
+          <Link
+            to={paths.deliveries}
+            className="inline-flex items-center gap-2 border border-ink/15 bg-white px-4 py-2.5 text-xs uppercase tracking-[0.2em] text-ink hover:border-sea"
+          >
+            <Activity className="size-4" />
+            Delivery monitor
+          </Link>
+          <Link
+            to={paths.settings}
+            className="inline-flex items-center gap-2 border border-ink/15 bg-white px-4 py-2.5 text-xs uppercase tracking-[0.2em] text-ink hover:border-sea"
+          >
+            <Settings2 className="size-4" />
+            Shared settings
+          </Link>
+        </div>
+      </div>
+
+      <div className="mt-8 border border-ink/10 bg-white p-6">
+        <div className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">New form</div>
+        <div className="mt-4 flex flex-wrap items-end gap-3">
+          <label className="flex-1 min-w-[220px]">
+            <span className="text-xs text-ink/55">Name</span>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Contact form"
+              className="mt-1 w-full border border-ink/20 px-3 py-2 text-sm"
+            />
+          </label>
+          <label className="min-w-[220px]">
+            <span className="text-xs text-ink/55">Type</span>
+            <select
+              value={type}
+              onChange={(e) => setType(e.target.value)}
+              className="mt-1 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+            >
+              {FORM_TYPES.map((t) => (
+                <option key={t.value} value={t.value}>
+                  {t.label} — {t.description}
+                </option>
+              ))}
+            </select>
+          </label>
+          <button
+            onClick={onCreate}
+            disabled={busy || !name.trim()}
+            className="inline-flex items-center gap-2 bg-ink px-5 py-2.5 text-xs uppercase tracking-[0.2em] text-paper hover:bg-sea hover:text-ink disabled:opacity-50"
+          >
+            <Plus className="size-4" />
+            Create
+          </button>
+        </div>
+        {name.trim() ? (
+          <p className="mt-3 text-xs text-ink/50">Key: {slugify(name) || "—"}</p>
+        ) : null}
+      </div>
+
+      <div className="mt-8 flex gap-2">
+        {(["list", "bin"] as const).map((v) => (
+          <button
+            key={v}
+            onClick={() => setView(v)}
+            className={
+              view === v
+                ? "border border-ink bg-ink px-4 py-2 text-[0.65rem] uppercase tracking-[0.2em] text-paper"
+                : "border border-ink/15 bg-white px-4 py-2 text-[0.65rem] uppercase tracking-[0.2em] text-ink/60 hover:border-sea"
+            }
+          >
+            {v === "list" ? "Forms" : `Bin${bin?.rows.length ? ` (${bin.rows.length})` : ""}`}
+          </button>
+        ))}
+      </div>
+
+      {view === "list" ? (
+        <div className="mt-8 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-6 py-3">Form</th>
+                <th className="px-6 py-3">Key</th>
+                <th className="px-6 py-3">Type</th>
+                <th className="px-6 py-3">Fields</th>
+                <th className="px-6 py-3">Status</th>
+                <th className="px-6 py-3">Submissions</th>
+                <th className="px-6 py-3">Last</th>
+                <th className="px-6 py-3"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {isLoading ? (
+                <tr>
+                  <td className="px-6 py-6 text-ink/50" colSpan={8}>
+                    Loading…
+                  </td>
+                </tr>
+              ) : forms.length === 0 ? (
+                <tr>
+                  <td className="px-6 py-6 text-ink/50" colSpan={8}>
+                    No forms yet.
+                  </td>
+                </tr>
+              ) : (
+                forms.map((f) => (
+                  <tr key={f.id} className="border-b border-ink/5 last:border-0">
+                    <td className="px-6 py-3">
+                      <Link
+                        to={paths.editor}
+                        params={{ key: f.key }}
+                        className="text-ink hover:text-sea"
+                      >
+                        {f.name}
+                      </Link>
+                    </td>
+                    <td className="px-6 py-3 text-ink/60">{f.key}</td>
+                    <td className="px-6 py-3 text-ink/60">{f.form_type}</td>
+                    <td className="px-6 py-3 text-ink/60">
+                      {f.fields.filter((x) => x.enabled).length}/
+                      {f.fields.filter((x) => !x.removed).length}
+                    </td>
+                    <td className="px-6 py-3">
+                      <span
+                        className={
+                          f.is_active
+                            ? "text-[0.65rem] uppercase tracking-[0.2em] text-sea"
+                            : "text-[0.65rem] uppercase tracking-[0.2em] text-ink/40"
+                        }
+                      >
+                        {f.is_active ? "Active" : "Inactive"}
+                      </span>
+                    </td>
+                    <td className="px-6 py-3 text-ink/60">
+                      <Link to={paths.submissions} search={{ form: f.key }} className="hover:text-sea">
+                        {f.submissions}
+                        {f.newSubmissions > 0 ? (
+                          <span className="ml-2 bg-sea px-1.5 py-0.5 text-[0.6rem] uppercase tracking-[0.18em] text-ink">
+                            {f.newSubmissions} new
+                          </span>
+                        ) : null}
+                      </Link>
+                    </td>
+                    <td className="px-6 py-3 text-ink/50 whitespace-nowrap">
+                      {f.lastSubmissionAt
+                        ? new Date(f.lastSubmissionAt).toLocaleDateString("sv-SE")
+                        : "—"}
+                    </td>
+                    <td className="px-6 py-3 text-right whitespace-nowrap">
+                      <button
+                        onClick={() => onDuplicate(f)}
+                        className="mr-3 text-ink/40 hover:text-sea"
+                        title="Duplicate form"
+                      >
+                        <Copy className="size-4" />
+                      </button>
+                      <button
+                        onClick={() => onDelete(f)}
+                        className="text-ink/40 hover:text-red-500"
+                        title="Move form to bin"
+                      >
+                        <Trash2 className="size-4" />
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className="mt-8 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-6 py-3">Form</th>
+                <th className="px-6 py-3">Key</th>
+                <th className="px-6 py-3">Type</th>
+                <th className="px-6 py-3">Deleted</th>
+                <th className="px-6 py-3">By</th>
+                <th className="px-6 py-3"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {(bin?.rows ?? []).length === 0 ? (
+                <tr>
+                  <td className="px-6 py-6 text-ink/50" colSpan={6}>
+                    The bin is empty.
+                  </td>
+                </tr>
+              ) : (
+                (bin?.rows ?? []).map((f) => (
+                  <tr key={f.id} className="border-b border-ink/5 last:border-0">
+                    <td className="px-6 py-3 text-ink">{f.name}</td>
+                    <td className="px-6 py-3 text-ink/60">{f.key}</td>
+                    <td className="px-6 py-3 text-ink/60">{f.form_type}</td>
+                    <td className="px-6 py-3 text-ink/50 whitespace-nowrap">
+                      {new Date(f.deleted_at).toLocaleString("sv-SE")}
+                    </td>
+                    <td className="px-6 py-3 text-ink/60">{f.deleted_by_email ?? "—"}</td>
+                    <td className="px-6 py-3 text-right whitespace-nowrap">
+                      <button
+                        onClick={async () => {
+                          try {
+                            await restoreForm({ data: { id: f.id } });
+                            await refresh();
+                            toast.success("Form restored (inactive)");
+                          } catch (e) {
+                            toast.error(e instanceof Error ? e.message : "Could not restore");
+                          }
+                        }}
+                        className="mr-3 inline-flex items-center gap-1 text-xs uppercase tracking-[0.18em] text-ink/60 hover:text-sea"
+                      >
+                        <RotateCcw className="size-4" />
+                        Restore
+                      </button>
+                      {bin?.canPurge ? (
+                        <button
+                          onClick={async () => {
+                            if (
+                              !window.confirm(
+                                `Permanently delete "${f.name}"? This cannot be undone. Submissions are kept in the inbox.`,
+                              )
+                            )
+                              return;
+                            try {
+                              await purgeForm({ data: { id: f.id } });
+                              await refresh();
+                              toast.success("Form permanently deleted");
+                            } catch (e) {
+                              toast.error(e instanceof Error ? e.message : "Could not delete");
+                            }
+                          }}
+                          className="inline-flex items-center gap-1 text-xs uppercase tracking-[0.18em] text-ink/50 hover:text-red-500"
+                        >
+                          <ShieldAlert className="size-4" />
+                          Delete permanently
+                        </button>
+                      ) : (
+                        <span className="text-[0.65rem] uppercase tracking-[0.18em] text-ink/35">
+                          Superadmin only
+                        </span>
+                      )}
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}