@bygghammar/cms-platform 0.17.0 → 0.18.0

package/src/backoffice/FormEditorView.tsx

@@ -0,0 +1,839 @@
+import type React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { ArrowLeft, Copy, ExternalLink, Inbox, RefreshCw, Save } from "lucide-react";
+import {
+  isInherited,
+  type FormDefaults,
+  type FormFieldDef,
+  type FormPrivateSettings,
+  type FormPublicSettings,
+  type NotificationRule,
+} from "../forms/field-sets";
+import { InspectorSection, LocalizedField, TextField } from "./inspectors/fields";
+import { RuleSimulator } from "./forms/RuleSimulator";
+import { ConditionBuilder } from "./forms/ConditionBuilder";
+import { SmartTagTextField, SmartTagLocalizedField } from "./forms/SmartTags";
+
+/** One managed form row as the host's list server function returns it. */
+export type FormEditorRow = {
+  id: string;
+  key: string;
+  name: string;
+  form_type: string;
+  is_active: boolean;
+  fields: FormFieldDef[];
+  public_settings?: FormPublicSettings | null;
+  private_settings?: FormPrivateSettings | null;
+  submissions: number;
+  lastSubmissionAt?: string | null;
+  usedFieldKeys: string[];
+};
+
+/** Everything site-specific the shared form editor needs injected. */
+export type FormEditorDeps = {
+  form: FormEditorRow | undefined;
+  defaults: FormDefaults | null | undefined;
+  isLoading: boolean;
+  /** Persist the whole form. */
+  saveForm: (input: {
+    data: {
+      id: string;
+      key: string;
+      name: string;
+      form_type: string;
+      is_active: boolean;
+      fields: Record<string, unknown>[];
+      public_settings: Record<string, unknown>;
+      private_settings: Record<string, unknown>;
+    };
+  }) => Promise<unknown>;
+  duplicateForm: (input: {
+    data: { id: string; key: string; name: string };
+  }) => Promise<unknown>;
+  syncSubmissions: (input: { data: { formKey: string } }) => Promise<{ synced: number }>;
+  testWebhook: (input: {
+    data: { formKey: string; url?: string | undefined; secret?: string | undefined };
+  }) => Promise<{ ok: boolean; status?: number | null; error?: string | null }>;
+  /** Host router link. */
+  LinkComponent: (props: {
+    to: string;
+    search?: Record<string, unknown>;
+    className?: string;
+    children: React.ReactNode;
+  }) => React.ReactElement;
+  /** Host-adapted panels (site form UI, server functions). */
+  FieldEditorComponent: (props: {
+    fields: FormFieldDef[];
+    usedKeys: string[];
+    onChange: (next: FormFieldDef[]) => void;
+  }) => React.ReactNode;
+  FormPreviewComponent: (props: {
+    formKey: string;
+    name: string;
+    formType: string;
+    fields: FormFieldDef[];
+    pub: FormPublicSettings;
+    priv: FormPrivateSettings;
+    defaults?: FormDefaults | null;
+  }) => React.ReactNode;
+  TestDeliveryPanelComponent: (props: {
+    formKey: string;
+    fields: FormFieldDef[];
+    priv: FormPrivateSettings;
+  }) => React.ReactNode;
+  VersionHistoryComponent: (props: {
+    formKey: string;
+    defaults?: FormDefaults | null;
+  }) => React.ReactNode;
+  ActivityLogComponent: (props: { formKey?: string }) => React.ReactNode;
+  /** Backoffice route paths, so hosts keep control over their URL scheme. */
+  paths?: {
+    forms?: string;
+    submissions?: string;
+    settings?: string;
+    deliveries?: string;
+  };
+};
+
+function Inherited({ from }: { from: string }) {
+  return (
+    <p className="-mt-2 text-[0.65rem] uppercase tracking-[0.18em] text-sea">
+      Inherited from shared defaults: {from || "—"}
+    </p>
+  );
+}
+
+const TABS = [
+  { id: "fields", label: "Fields" },
+  { id: "presentation", label: "Presentation" },
+  { id: "delivery", label: "Notifications & sync" },
+  { id: "preview", label: "Preview & test" },
+  { id: "history", label: "Version history" },
+  { id: "activity", label: "Activity log" },
+] as const;
+
+type TabId = (typeof TABS)[number]["id"];
+
+/**
+ * Host-agnostic form editor: fields, presentation, notification/sync delivery,
+ * live preview, version history and activity log for one managed form.
+ */
+export function FormEditorView({ deps }: { deps: FormEditorDeps }) {
+  const {
+    form,
+    defaults: d,
+    isLoading,
+    saveForm,
+    duplicateForm,
+    syncSubmissions,
+    testWebhook,
+    LinkComponent: Link,
+    FieldEditorComponent: FieldEditor,
+    FormPreviewComponent: FormPreview,
+    TestDeliveryPanelComponent: TestDeliveryPanel,
+    VersionHistoryComponent: VersionHistory,
+    ActivityLogComponent: ActivityLog,
+  } = deps;
+  const paths = {
+    forms: deps.paths?.forms ?? "/kontoret/forms",
+    submissions: deps.paths?.submissions ?? "/kontoret/forms/submissions",
+    settings: deps.paths?.settings ?? "/kontoret/forms/settings",
+    deliveries: deps.paths?.deliveries ?? "/kontoret/forms/deliveries",
+  };
+  const qc = useQueryClient();
+
+  const [name, setName] = useState("");
+  const [active, setActive] = useState(true);
+  const [fields, setFields] = useState<FormFieldDef[]>([]);
+  const [pub, setPub] = useState<FormPublicSettings>({});
+  const [priv, setPriv] = useState<FormPrivateSettings>({});
+  const [busy, setBusy] = useState(false);
+  const [tab, setTab] = useState<TabId>("fields");
+
+  /** Removed built-in fields stay in state as tombstones but never render. */
+  const activeFields = useMemo(() => fields.filter((f) => !f.removed), [fields]);
+
+  /** Update one conditional notification-routing rule in place. */
+  const patchRule = (index: number, p: Partial<NotificationRule>) =>
+    setPriv((prev) => ({
+      ...prev,
+      notificationRules: (prev.notificationRules ?? []).map((r, i) =>
+        i === index ? { ...r, ...p } : r,
+      ),
+    }));
+
+  useEffect(() => {
+    if (!form) return;
+    setName(form.name);
+    setActive(form.is_active);
+    setFields(form.fields);
+    setPub(form.public_settings ?? {});
+    setPriv(form.private_settings ?? {});
+  }, [form]);
+
+  if (isLoading) return <div className="p-8 text-sm text-ink/50">Loading…</div>;
+  if (!form) return <div className="p-8 text-sm text-ink/50">Form not found.</div>;
+
+  const onSave = async () => {
+    if (
+      (pub.thankyouMode ?? d?.thankyou_mode) === "redirect" &&
+      !(pub.thankyouRedirect ?? d?.thankyou_redirect ?? "").trim()
+    ) {
+      toast.error("Add a redirect URL, or switch back to the thank-you message.");
+      return;
+    }
+    setBusy(true);
+    try {
+      await saveForm({
+        data: {
+          id: form.id,
+          key: form.key,
+          name,
+          form_type: form.form_type,
+          is_active: active,
+          fields: fields as unknown as Record<string, unknown>[],
+          public_settings: pub as Record<string, unknown>,
+          private_settings: priv as Record<string, unknown>,
+        },
+      });
+      await qc.invalidateQueries({ queryKey: ["backoffice-forms"] });
+      toast.success("Form saved");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not save");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <Link
+            to={paths.forms}
+            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
+          </Link>
+          <h1 className="mt-3 font-serif text-2xl text-ink">{form.name}</h1>
+          <p className="mt-1 text-xs text-ink/50">
+            {form.key} · {form.form_type} · {form.submissions} submission
+            {form.submissions === 1 ? "" : "s"}
+            {form.lastSubmissionAt
+              ? ` · last ${new Date(form.lastSubmissionAt).toLocaleString("sv-SE")}`
+              : ""}
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Link
+            to={paths.submissions}
+            search={{ form: form.key }}
+            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"
+          >
+            <Inbox className="size-4" />
+            Submissions ({form.submissions})
+          </Link>
+          <button
+            onClick={async () => {
+              try {
+                const copyKey = `${form.key}-copy`.slice(0, 64);
+                await duplicateForm({
+                  data: { id: form.id, key: copyKey, name: `${form.name} (copy)` },
+                });
+                await qc.invalidateQueries({ queryKey: ["backoffice-forms"] });
+                toast.success(`Copied to “${form.name} (copy)”`);
+              } catch (e) {
+                toast.error(e instanceof Error ? e.message : "Could not duplicate");
+              }
+            }}
+            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"
+          >
+            <Copy className="size-4" />
+            Duplicate
+          </button>
+          <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] hover:border-sea"
+          >
+            <ExternalLink className="size-4" />
+            Shared defaults
+          </Link>
+          <button
+            onClick={onSave}
+            disabled={busy}
+            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"
+          >
+            <Save className="size-4" />
+            Save
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-8 flex gap-1 border-b border-ink/10">
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            onClick={() => setTab(t.id)}
+            className={`-mb-px border-b-2 px-4 py-2.5 text-xs uppercase tracking-[0.2em] ${
+              tab === t.id ? "border-sea text-ink" : "border-transparent text-ink/45 hover:text-ink"
+            }`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {tab === "fields" ? (
+        <div className="mt-6 grid gap-6 lg:grid-cols-[320px_1fr]">
+          <div className="border border-ink/10 bg-white p-6 space-y-4 h-fit">
+            <InspectorSection title="General">
+              <TextField label="Name" value={name} onChange={setName} />
+              <label className="flex items-center gap-3 text-sm text-ink/70">
+                <input
+                  type="checkbox"
+                  checked={active}
+                  onChange={(e) => setActive(e.target.checked)}
+                  className="size-4 accent-sea"
+                />
+                Active (visible on the site)
+              </label>
+              <p className="text-xs text-ink/45">
+                Inactive forms stop accepting submissions but keep everything already received.
+              </p>
+            </InspectorSection>
+          </div>
+          <div className="space-y-6">
+            <div className="border border-ink/10 bg-white p-6">
+              <FieldEditor fields={fields} usedKeys={form.usedFieldKeys} onChange={setFields} />
+            </div>
+            <div className="border border-ink/10 bg-white p-6">
+              <RuleSimulator fields={activeFields} />
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {tab === "preview" ? (
+        <div className="mt-6 grid gap-6 lg:grid-cols-2">
+          <div className="border border-ink/10 bg-white p-6">
+            <FormPreview
+              formKey={form.key}
+              name={name}
+              formType={form.form_type}
+              fields={activeFields}
+              pub={pub}
+              priv={priv}
+              defaults={d}
+            />
+          </div>
+          <div className="border border-ink/10 bg-white p-6">
+            <TestDeliveryPanel formKey={form.key} fields={activeFields} priv={priv} />
+          </div>
+        </div>
+      ) : null}
+
+      {tab === "presentation" ? (
+        <div className="mt-6 grid gap-6 lg:grid-cols-2">
+          <div className="border border-ink/10 bg-white p-6 space-y-4">
+            <InspectorSection title="Copy">
+              <LocalizedField
+                label="Title"
+                value={pub.title}
+                onChange={(v) => setPub({ ...pub, title: v })}
+              />
+              <LocalizedField
+                label="Intro"
+                value={pub.intro}
+                multiline
+                onChange={(v) => setPub({ ...pub, intro: v })}
+              />
+              <LocalizedField
+                label="Submit button"
+                value={pub.submitLabel}
+                onChange={(v) => setPub({ ...pub, submitLabel: v })}
+              />
+            </InspectorSection>
+
+            <InspectorSection title="Consent">
+              <label className="flex items-center gap-3 text-sm text-ink/70">
+                <input
+                  type="checkbox"
+                  checked={pub.requireConsent !== false}
+                  onChange={(e) => setPub({ ...pub, requireConsent: e.target.checked })}
+                  className="size-4 accent-sea"
+                />
+                Require GDPR consent checkbox
+              </label>
+              <LocalizedField
+                label="Consent text"
+                value={pub.consentText}
+                multiline
+                onChange={(v) => setPub({ ...pub, consentText: v })}
+              />
+              <p className="text-xs text-ink/50">
+                Link the policy with <code>[integritetspolicyn](privacy)</code> (uses the shared
+                privacy policy URL) or a path like <code>[privacy policy](/integritetspolicy)</code>
+                .
+              </p>
+              {isInherited(pub.consentText) ? <Inherited from={d?.consent_text?.sv ?? ""} /> : null}
+            </InspectorSection>
+          </div>
+
+          <div className="border border-ink/10 bg-white p-6 space-y-4">
+            <InspectorSection title="After submit">
+              <label className="block">
+                <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Mode</span>
+                <select
+                  value={pub.thankyouMode ?? ""}
+                  onChange={(e) =>
+                    setPub({
+                      ...pub,
+                      thankyouMode: (e.target.value || undefined) as
+                        | "inline"
+                        | "redirect"
+                        | undefined,
+                    })
+                  }
+                  className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                >
+                  <option value="">Use shared default ({d?.thankyou_mode ?? "inline"})</option>
+                  <option value="inline">Show thank-you message</option>
+                  <option value="redirect">Redirect to a page</option>
+                </select>
+              </label>
+              <LocalizedField
+                label="Thank-you message"
+                value={pub.thankyouMessage}
+                multiline
+                onChange={(v) => setPub({ ...pub, thankyouMessage: v })}
+              />
+              {isInherited(pub.thankyouMessage) ? (
+                <Inherited from={d?.thankyou_message?.sv ?? ""} />
+              ) : null}
+              <TextField
+                label="Redirect URL"
+                value={pub.thankyouRedirect ?? ""}
+                onChange={(v) => setPub({ ...pub, thankyouRedirect: v })}
+              />
+              {isInherited(pub.thankyouRedirect) ? (
+                <Inherited from={d?.thankyou_redirect ?? ""} />
+              ) : null}
+              {(pub.thankyouMode ?? d?.thankyou_mode) === "redirect" &&
+              !(pub.thankyouRedirect ?? d?.thankyou_redirect ?? "").trim() ? (
+                <p className="text-xs text-red-600">
+                  Redirect mode needs a URL — without one the thank-you message is shown instead.
+                </p>
+              ) : null}
+            </InspectorSection>
+
+            <InspectorSection title="Spam protection">
+              <TextField
+                label="Minimum seconds before submit (empty = shared default)"
+                value={priv.spamMinSeconds ? String(priv.spamMinSeconds) : ""}
+                onChange={(v) =>
+                  setPriv({ ...priv, spamMinSeconds: v ? Number(v) || undefined : undefined })
+                }
+              />
+              {priv.spamMinSeconds == null ? (
+                <Inherited from={String(d?.spam_min_seconds ?? 3)} />
+              ) : null}
+              <TextField
+                label="Max submissions per IP per hour (empty = shared default)"
+                value={priv.spamMaxPerHour ? String(priv.spamMaxPerHour) : ""}
+                onChange={(v) =>
+                  setPriv({ ...priv, spamMaxPerHour: v ? Number(v) || undefined : undefined })
+                }
+              />
+              {priv.spamMaxPerHour == null ? (
+                <Inherited from={String(d?.spam_max_per_hour ?? 10)} />
+              ) : null}
+            </InspectorSection>
+
+            <InspectorSection title="Incomplete submissions">
+              <label className="block">
+                <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                  Save what visitors type even if they never submit
+                </span>
+                <select
+                  value={priv.savePartials === undefined ? "" : priv.savePartials ? "on" : "off"}
+                  onChange={(e) =>
+                    setPriv({
+                      ...priv,
+                      savePartials: e.target.value === "" ? undefined : e.target.value === "on",
+                    })
+                  }
+                  className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                >
+                  <option value="">
+                    Use shared default ({d?.save_partials === false ? "off" : "on"})
+                  </option>
+                  <option value="on">On</option>
+                  <option value="off">Off</option>
+                </select>
+              </label>
+              <p className="text-xs text-ink/45">
+                Drafts are stored separately from real submissions and are marked as completed when
+                the visitor finally sends the form. See them under Submissions → Incomplete.
+              </p>
+            </InspectorSection>
+          </div>
+        </div>
+      ) : null}
+
+      {tab === "delivery" ? (
+        <div className="mt-6 grid gap-6 lg:grid-cols-2">
+          <div className="border border-ink/10 bg-white p-6 space-y-4">
+            <InspectorSection title="Admin notification">
+              <label className="block">
+                <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                  Send notification
+                </span>
+                <select
+                  value={priv.notifyEnabled === undefined ? "" : priv.notifyEnabled ? "on" : "off"}
+                  onChange={(e) =>
+                    setPriv({
+                      ...priv,
+                      notifyEnabled: e.target.value === "" ? undefined : e.target.value === "on",
+                    })
+                  }
+                  className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                >
+                  <option value="">
+                    Use shared default ({d?.notify_enabled === false ? "off" : "on"})
+                  </option>
+                  <option value="on">On</option>
+                  <option value="off">Off</option>
+                </select>
+              </label>
+              <TextField
+                label="Notify these addresses (comma separated)"
+                value={priv.notifyTo ?? ""}
+                onChange={(v) => setPriv({ ...priv, notifyTo: v })}
+              />
+              {isInherited(priv.notifyTo) ? <Inherited from={d?.notify_to ?? ""} /> : null}
+              <div className="grid gap-3 sm:grid-cols-2">
+                <SmartTagTextField
+                  label="Sender name"
+                  value={priv.notifyFromName ?? ""}
+                  fields={activeFields}
+                  onChange={(v) => setPriv({ ...priv, notifyFromName: v })}
+                />
+                <TextField
+                  label="Sender address"
+                  value={priv.notifyFromEmail ?? ""}
+                  onChange={(v) => setPriv({ ...priv, notifyFromEmail: v })}
+                />
+              </div>
+              <SmartTagTextField
+                label="Reply-to"
+                value={priv.notifyReplyTo ?? ""}
+                fields={activeFields}
+                placeholder="{{email}}"
+                onChange={(v) => setPriv({ ...priv, notifyReplyTo: v })}
+              />
+              <p className="text-xs text-ink/45">
+                Use {"{{"}email{"}}"} to reply straight to the person who submitted the form.
+              </p>
+              {isInherited(priv.notifyReplyTo) ? (
+                <Inherited from={d?.notify_reply_to ?? ""} />
+              ) : null}
+              <SmartTagLocalizedField
+                label="Subject"
+                value={priv.notifySubject}
+                fields={activeFields}
+                onChange={(v) => setPriv({ ...priv, notifySubject: v })}
+              />
+              {isInherited(priv.notifySubject) ? (
+                <Inherited from={d?.notify_subject?.sv ?? ""} />
+              ) : null}
+              <SmartTagLocalizedField
+                label="Body (empty = standard answer table)"
+                value={priv.notifyBody}
+                fields={activeFields}
+                multiline
+                onChange={(v) => setPriv({ ...priv, notifyBody: v })}
+              />
+              {isInherited(priv.notifyBody) ? (
+                <Inherited from={(d?.notify_body?.sv ?? "").slice(0, 60)} />
+              ) : null}
+            </InspectorSection>
+
+            <InspectorSection title="Conditional routing">
+              <p className="text-xs text-ink/50">
+                Send this form to different people depending on the answers. Rules add recipients; a
+                rule marked “only these” replaces the addresses above.
+              </p>
+              {(priv.notificationRules ?? []).map((rule, i) => (
+                <div key={i} className="space-y-2 border border-ink/10 p-3">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <input
+                      value={rule.to}
+                      placeholder="who@example.com"
+                      onChange={(v) => patchRule(i, { to: v.target.value })}
+                      className="min-w-[180px] flex-1 border border-ink/15 px-2 py-1 text-xs"
+                    />
+                    <label className="flex items-center gap-1.5 text-[0.65rem] uppercase tracking-[0.16em] text-ink/55">
+                      <input
+                        type="checkbox"
+                        checked={rule.exclusive ?? false}
+                        onChange={(e) => patchRule(i, { exclusive: e.target.checked })}
+                        className="size-3.5 accent-sea"
+                      />
+                      Only these
+                    </label>
+                    <label className="flex items-center gap-1.5 text-[0.65rem] uppercase tracking-[0.16em] text-ink/55">
+                      <input
+                        type="checkbox"
+                        checked={rule.enabled !== false}
+                        onChange={(e) => patchRule(i, { enabled: e.target.checked })}
+                        className="size-3.5 accent-sea"
+                      />
+                      Active
+                    </label>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setPriv({
+                          ...priv,
+                          notificationRules: (priv.notificationRules ?? []).filter(
+                            (_, idx) => idx !== i,
+                          ),
+                        })
+                      }
+                      className="text-[0.65rem] uppercase tracking-[0.16em] text-ink/45 hover:text-red-500"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                  <ConditionBuilder
+                    title="When"
+                    description="Rule applies while these answers match."
+                    rule={rule.when}
+                    fields={activeFields}
+                    onChange={(r) => patchRule(i, { when: r })}
+                  />
+                </div>
+              ))}
+              <button
+                type="button"
+                onClick={() =>
+                  setPriv({
+                    ...priv,
+                    notificationRules: [
+                      ...(priv.notificationRules ?? []),
+                      {
+                        id:
+                          typeof crypto !== "undefined" && crypto.randomUUID
+                            ? crypto.randomUUID()
+                            : String(Date.now()),
+                        to: "",
+                        enabled: true,
+                        exclusive: false,
+                      },
+                    ],
+                  })
+                }
+                className="border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea"
+              >
+                Add routing rule
+              </button>
+            </InspectorSection>
+
+            <InspectorSection title="Autoreply to the sender">
+              <label className="block">
+                <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                  Autoreply
+                </span>
+                <select
+                  value={
+                    priv.autoreplyEnabled === undefined ? "" : priv.autoreplyEnabled ? "on" : "off"
+                  }
+                  onChange={(e) =>
+                    setPriv({
+                      ...priv,
+                      autoreplyEnabled: e.target.value === "" ? undefined : e.target.value === "on",
+                    })
+                  }
+                  className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                >
+                  <option value="">
+                    Use shared default ({d?.autoreply_enabled ? "on" : "off"})
+                  </option>
+                  <option value="on">On</option>
+                  <option value="off">Off</option>
+                </select>
+              </label>
+              <SmartTagLocalizedField
+                label="Subject"
+                value={priv.autoreplySubject}
+                fields={activeFields}
+                onChange={(v) => setPriv({ ...priv, autoreplySubject: v })}
+              />
+              {isInherited(priv.autoreplySubject) ? (
+                <Inherited from={d?.autoreply_subject?.sv ?? ""} />
+              ) : null}
+              <SmartTagLocalizedField
+                label="Body"
+                value={priv.autoreplyBody}
+                fields={activeFields}
+                multiline
+                onChange={(v) => setPriv({ ...priv, autoreplyBody: v })}
+              />
+
+              {isInherited(priv.autoreplyBody) ? (
+                <Inherited from={(d?.autoreply_body?.sv ?? "").slice(0, 60)} />
+              ) : null}
+              <p className="text-xs text-ink/45">
+                Use {"{{"}field_key{"}}"} to insert an answer, for example {"{{"}name{"}}"} or{" "}
+                {"{{"}email{"}}"}. Available keys:{" "}
+                {fields
+                  .filter((f) => f.enabled)
+                  .map((f) => f.key)
+                  .join(", ")}
+                .
+              </p>
+            </InspectorSection>
+          </div>
+
+          <div className="border border-ink/10 bg-white p-6 space-y-4">
+            <InspectorSection title="Google Sheets">
+              <TextField
+                label="Spreadsheet ID"
+                value={priv.sheetId ?? ""}
+                onChange={(v) => setPriv({ ...priv, sheetId: v })}
+              />
+              {isInherited(priv.sheetId) ? <Inherited from={d?.sheet_id ?? ""} /> : null}
+              <TextField
+                label="Tab name"
+                value={priv.sheetTab ?? ""}
+                onChange={(v) => setPriv({ ...priv, sheetTab: v })}
+              />
+              {isInherited(priv.sheetTab) ? <Inherited from={d?.sheet_tab ?? ""} /> : null}
+              <label className="block">
+                <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                  Append every new submission live
+                </span>
+                <select
+                  value={
+                    priv.sheetLiveAppend === undefined ? "" : priv.sheetLiveAppend ? "on" : "off"
+                  }
+                  onChange={(e) =>
+                    setPriv({
+                      ...priv,
+                      sheetLiveAppend: e.target.value === "" ? undefined : e.target.value === "on",
+                    })
+                  }
+                  className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                >
+                  <option value="">
+                    Use shared default ({d?.sheet_live_append ? "on" : "off"})
+                  </option>
+                  <option value="on">On</option>
+                  <option value="off">Off</option>
+                </select>
+              </label>
+              {(priv.sheetLiveAppend ?? d?.sheet_live_append) &&
+              !(priv.sheetId ?? d?.sheet_id ?? "").trim() ? (
+                <p className="text-xs text-red-600">
+                  Live append does nothing until a spreadsheet ID is set here or in the shared
+                  settings.
+                </p>
+              ) : null}
+              <button
+                onClick={async () => {
+                  try {
+                    const res = await syncSubmissions({ data: { formKey: form.key } });
+                    toast.success(`Synced ${res.synced} submission(s)`);
+                    await qc.invalidateQueries({ queryKey: ["form-submissions"] });
+                  } catch (e) {
+                    toast.error(e instanceof Error ? e.message : "Sync failed");
+                  }
+                }}
+                className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2 text-xs uppercase tracking-[0.2em] hover:border-sea"
+              >
+                <RefreshCw className="size-4" />
+                Sync pending submissions now
+              </button>
+              <p className="text-xs text-ink/45">
+                Submissions are always stored first — a Sheets outage never loses data.
+              </p>
+            </InspectorSection>
+          </div>
+
+          <div className="border border-ink/10 bg-white p-6 space-y-4">
+            <InspectorSection title="Webhook">
+              <label className="flex items-center gap-3 text-sm text-ink/70">
+                <input
+                  type="checkbox"
+                  checked={priv.webhookEnabled ?? false}
+                  onChange={(e) => setPriv({ ...priv, webhookEnabled: e.target.checked })}
+                  className="size-4 accent-sea"
+                />
+                POST every new submission to an external endpoint
+              </label>
+              <TextField
+                label="Endpoint URL"
+                value={priv.webhookUrl ?? ""}
+                onChange={(v) => setPriv({ ...priv, webhookUrl: v })}
+              />
+              <TextField
+                label="Signing secret (optional)"
+                value={priv.webhookSecret ?? ""}
+                onChange={(v) => setPriv({ ...priv, webhookSecret: v })}
+              />
+              <button
+                onClick={async () => {
+                  try {
+                    const res = await testWebhook({
+                      data: {
+                        formKey: form.key,
+                        url: priv.webhookUrl || undefined,
+                        secret: priv.webhookSecret || undefined,
+                      },
+                    });
+                    if (res.ok) toast.success(`Webhook responded ${res.status ?? 200}`);
+                    else
+                      toast.error(res.error ?? `Webhook failed (${res.status ?? "no response"})`);
+                    await qc.invalidateQueries({ queryKey: ["form-deliveries"] });
+                  } catch (e) {
+                    toast.error(e instanceof Error ? e.message : "Webhook test failed");
+                  }
+                }}
+                className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2 text-xs uppercase tracking-[0.2em] hover:border-sea"
+              >
+                <RefreshCw className="size-4" />
+                Send test payload
+              </button>
+              <p className="text-xs text-ink/45">
+                Requests are signed with HMAC-SHA256 in the <code>X-Signature</code> header. Failed
+                calls appear in the delivery monitor and can be retried there.
+              </p>
+              <Link
+                to={paths.deliveries}
+                className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-ink/50 hover:text-ink"
+              >
+                <ExternalLink className="size-4" />
+                Delivery monitor
+              </Link>
+            </InspectorSection>
+          </div>
+        </div>
+      ) : null}
+
+      {tab === "history" ? (
+        <div className="mt-6">
+          <VersionHistory formKey={form.key} defaults={d ?? null} />
+        </div>
+      ) : null}
+
+      {tab === "activity" ? (
+        <div className="mt-6">
+          <ActivityLog formKey={form.key} />
+        </div>
+      ) : null}
+    </div>
+  );
+}