@xiwebdesign/xicms-core 7.31.0 → 8.16.0

package/dist/admin/forms/FormsPanel.js

@@ -6,18 +6,24 @@ import {
   collection,
   deleteDoc,
   doc,
+  getDoc,
   onSnapshot,
   orderBy,
   query,
   setDoc
 } from "firebase/firestore";
 import { getDb } from "../../firebase/client.js";
-import { FormSchema } from "../../schema/forms.js";
-import { Button, Card, Field, Input, Badge } from "../ui/primitives.js";
+import { FormMailSchema, FormSchema } from "../../schema/forms.js";
+import { Button, Card, Field, Input, Badge, LegeStaat } from "../ui/primitives.js";
 import { Select } from "../ui/select.js";
 import { Switch } from "../ui/switch.js";
 import { useToast } from "../ui/toast.js";
 import { useConfirm } from "../ui/ConfirmDialog.js";
+import { LaadStaat } from "../ui/LaadStaat.js";
+import { isDemoActive } from "../../demo/demoStore.js";
+import { neemOpenVerzoek } from "../navContext.js";
+import { useScrollNaarDetail } from "../lib/scrollNaarDetail.js";
+import { heeftOnopgeslagen, ONOPGESLAGEN_VRAAG, useOnopgeslagen, vergeetOnopgeslagen } from "../lib/onopgeslagen.js";
 import { MailTemplates } from "../settings/MailTemplates.js";
 import { FORM_TEMPLATE_KEYS } from "../../schema/mail.js";
 import { callable } from "../../firebase/functionsClient.js";
@@ -25,6 +31,8 @@ import { getFirebaseApp } from "../../firebase/client.js";
 import { useAuth } from "../../auth/AuthProvider.js";
 import { canManageSite } from "../../auth/roles.js";
 import { formulierenGezienSinds, markeerFormulierGezien } from "./gezien.js";
+import { zodFoutTekst } from "../lib/zodFout.js";
+import { laadFormulierGebruik } from "../lib/paginaGebruik.js";
 const FIELD_TYPES = [
   { value: "text", label: "Tekst" },
   { value: "email", label: "E-mail" },
@@ -34,21 +42,50 @@ const FIELD_TYPES = [
   { value: "radio", label: "Keuzerondjes" },
   { value: "checkbox", label: "Vinkje" },
   { value: "date", label: "Datum" },
-  { value: "number", label: "Getal" }
+  { value: "number", label: "Getal" },
+  { value: "dateRange", label: "Periode (van \u2013 tot)" },
+  { value: "hidden", label: "Verborgen (vaste waarde of uit de link)" }
 ];
 function FormsPanel({ siteId }) {
   const { toast } = useToast();
   const [forms, setForms] = useState([]);
-  const [selected, setSelected] = useState(null);
+  const [selected, setSelected] = useState(() => neemOpenVerzoek("forms"));
+  const [geladen, setGeladen] = useState(false);
+  const [laadFout, setLaadFout] = useState(null);
+  const [poging, setPoging] = useState(0);
   useEffect(() => {
     const db = getDb();
-    if (!db) return;
+    if (!db) {
+      setGeladen(true);
+      return;
+    }
     return onSnapshot(
       collection(db, "sites", siteId, "forms"),
-      (snap) => setForms(snap.docs.map((d) => ({ id: d.id, ...d.data() })))
+      (snap) => {
+        setForms(snap.docs.map((d) => ({ id: d.id, ...d.data() })));
+        setGeladen(true);
+        setLaadFout(null);
+      },
+      (e) => {
+        if (isDemoActive()) {
+          setGeladen(true);
+          return;
+        }
+        setLaadFout(e.message);
+      }
     );
-  }, [siteId]);
+  }, [siteId, poging]);
   const current = forms.find((f) => f.id === selected) ?? null;
+  const detailRef = useScrollNaarDetail(selected);
+  const confirmLijst = useConfirm();
+  async function kies(id) {
+    if (id === selected) return;
+    if (heeftOnopgeslagen()) {
+      if (!await confirmLijst(ONOPGESLAGEN_VRAAG)) return;
+      vergeetOnopgeslagen();
+    }
+    setSelected(id);
+  }
   async function createForm() {
     const db = getDb();
     if (!db) return;
@@ -67,25 +104,22 @@ function FormsPanel({ siteId }) {
           /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Formulieren" }),
           /* @__PURE__ */ jsx(Button, { size: "sm", onClick: createForm, children: "+ Nieuw" })
         ] }),
-        /* @__PURE__ */ jsxs("ul", { className: "grid gap-1", children: [
-          forms.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(LaadStaat, { laden: !geladen, fout: laadFout, wat: "formulieren", opnieuw: () => {
+          setLaadFout(null);
+          setPoging((n) => n + 1);
+        }, children: /* @__PURE__ */ jsxs("ul", { className: "grid gap-1", children: [
+          forms.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => setSelected(f.id),
+              onClick: () => void kies(f.id),
               className: `w-full truncate rounded-lg px-3 py-2 text-left text-sm ${f.id === selected ? "bg-brand-50 text-brand-700" : "hover:bg-slate-100"}`,
-              children: [
-                f.name,
-                /* @__PURE__ */ jsxs("span", { className: "ml-1 text-xs text-slate-400", children: [
-                  "#",
-                  f.id.slice(0, 5)
-                ] })
-              ]
+              children: f.name
             }
           ) }, f.id)),
           forms.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-slate-500", children: "Nog geen formulieren." })
-        ] })
+        ] }) })
       ] }),
-      current ? /* @__PURE__ */ jsx(FormDetail, { siteId, form: current, onDeleted: () => setSelected(null), onToast: toast }, current.id) : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Selecteer of maak een formulier." }) })
+      /* @__PURE__ */ jsx("div", { ref: detailRef, className: "scroll-mt-24 min-w-0", children: current ? /* @__PURE__ */ jsx(FormDetail, { siteId, form: current, onDeleted: () => setSelected(null), onToast: toast }, current.id) : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Selecteer of maak een formulier." }) }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "E-mailteksten voor formulieren" }),
@@ -98,6 +132,26 @@ function FormsPanel({ siteId }) {
     ] })
   ] });
 }
+function sleutelUitLabel(label, bezet) {
+  const basis = label.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").slice(0, 40);
+  const start = /^[a-z]/.test(basis) ? basis : `veld_${basis}`.replace(/_+$/, "") || "veld";
+  if (!bezet.has(start)) return start;
+  for (let n = 2; ; n++) if (!bezet.has(`${start}_${n}`)) return `${start}_${n}`;
+}
+function OptiesEditor({ opties, onChange }) {
+  return /* @__PURE__ */ jsx(Field, { label: "Keuzes", hint: "Elke keuze op een eigen regel; volgorde = volgorde op de site.", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    opties.map((o, j) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(Input, { "aria-label": `Keuze ${j + 1}`, value: o, onChange: (e) => onChange(opties.map((x, k) => k === j ? e.target.value : x)) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Keuze omhoog", disabled: j === 0, onClick: () => {
+        const n = [...opties];
+        [n[j - 1], n[j]] = [n[j], n[j - 1]];
+        onChange(n);
+      }, children: "\u2191" }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "dangerGhost", size: "sm", "aria-label": `Keuze "${o}" verwijderen`, onClick: () => onChange(opties.filter((_, k) => k !== j)), children: "\u{1F5D1}" })
+    ] }, j)),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => onChange([...opties, `Keuze ${opties.length + 1}`]), children: "+ Keuze" }) })
+  ] }) });
+}
 let veldTeller = 0;
 const nieuweVeldId = () => `v${Date.now().toString(36)}${(veldTeller++).toString(36)}`;
 function FormDetail({
@@ -107,7 +161,27 @@ function FormDetail({
   onToast
 }) {
   const [def, setDef] = useState(form);
+  const [basis, setBasis] = useState(form);
+  const [busy, setBusy] = useState(false);
+  const vuil = JSON.stringify(def) !== JSON.stringify(basis);
+  useOnopgeslagen(vuil);
   const confirm = useConfirm();
+  useEffect(() => {
+    const db = getDb();
+    if (!db) return;
+    let actief = true;
+    void getDoc(doc(db, "sites", siteId, "forms", form.id, "private", "mail")).then((snap) => {
+      if (!actief || !snap.exists()) return;
+      const mail = FormMailSchema.safeParse(snap.data());
+      if (!mail.success) return;
+      const metMail = (d) => ({ ...d, notifyTo: mail.data.notifyTo, confirmSubmitter: mail.data.confirmSubmitter });
+      setDef(metMail);
+      setBasis(metMail);
+    }).catch((e) => console.warn("[xicms] mailinstellingen formulier niet geladen:", e));
+    return () => {
+      actief = false;
+    };
+  }, [siteId, form.id]);
   const [veldIds, setVeldIds] = useState(() => form.fields.map(() => nieuweVeldId()));
   function zetVelden(fields, ids) {
     setDef((d) => ({ ...d, fields }));
@@ -127,19 +201,68 @@ function FormDetail({
     if (!db) return;
     const parsed = FormSchema.safeParse(def);
     if (!parsed.success) {
-      onToast({ title: "Ongeldig formulier", description: parsed.error.issues[0]?.message, tone: "error" });
+      onToast({ title: "Ongeldig formulier", description: zodFoutTekst(parsed.error.issues[0]), tone: "error" });
       return;
     }
-    await setDoc(doc(db, "sites", siteId, "forms", form.id), parsed.data, { merge: true });
-    onToast({ title: "Opgeslagen", tone: "success" });
+    const { notifyTo, confirmSubmitter, ...publiek } = parsed.data;
+    const mail = Object.fromEntries(
+      Object.entries({ notifyTo: notifyTo?.trim() || void 0, confirmSubmitter: confirmSubmitter || void 0 }).filter(([, v]) => v !== void 0)
+    );
+    setBusy(true);
+    try {
+      await setDoc(doc(db, "sites", siteId, "forms", form.id), publiek);
+      await setDoc(doc(db, "sites", siteId, "forms", form.id, "private", "mail"), mail);
+      setBasis(def);
+      onToast({ title: "Opgeslagen", tone: "success" });
+    } catch (e) {
+      onToast({ title: "Opslaan mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
   }
   async function remove() {
     const db = getDb();
     if (!db) return;
-    const ok = await confirm({ title: "Formulier verwijderen?", description: "Het formulier wordt verwijderd. Inzendingen blijven bewaard.", confirmLabel: "Verwijderen", tone: "danger" });
+    const gebruik = await laadFormulierGebruik(siteId, form.id);
+    const opPaginas = gebruik && gebruik.length > 0 ? ` Let op: het staat op ${gebruik.length === 1 ? `de pagina \u201C${gebruik[0]}\u201D` : `${gebruik.length} pagina's (${gebruik.slice(0, 3).map((t) => `\u201C${t}\u201D`).join(", ")})`}. Daar verschijnt dan \u201Cformulier niet beschikbaar\u201D \u2014 haal het blok eerst weg of kies er een ander formulier.` : "";
+    const ok = await confirm({
+      title: "Formulier verwijderen?",
+      description: `Het formulier wordt verwijderd. Inzendingen blijven bewaard.${opPaginas}`,
+      confirmLabel: gebruik && gebruik.length > 0 ? "Toch verwijderen" : "Verwijderen",
+      tone: "danger"
+    });
     if (!ok) return;
-    await deleteDoc(doc(db, "sites", siteId, "forms", form.id));
-    onDeleted();
+    setBusy(true);
+    try {
+      await deleteDoc(doc(db, "sites", siteId, "forms", form.id));
+      await deleteDoc(doc(db, "sites", siteId, "forms", form.id, "private", "mail")).catch(() => void 0);
+      onToast({ title: "Formulier verwijderd", tone: "success" });
+      onDeleted();
+    } catch (e) {
+      onToast({ title: "Verwijderen mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+  const [bestaandeSleutels] = useState(() => new Set(form.fields.map((f) => f.name)));
+  function zetLabel(i, label) {
+    const veld = def.fields[i];
+    if (bestaandeSleutels.has(veld.name)) return setField(i, { label });
+    const anderen = new Set(def.fields.filter((_, j) => j !== i).map((f) => f.name));
+    setField(i, { label, name: sleutelUitLabel(label, anderen) });
+  }
+  async function verwijderVeld(i) {
+    const veld = def.fields[i];
+    if (bestaandeSleutels.has(veld.name)) {
+      const ok = await confirm({
+        title: `Veld "${veld.label}" verwijderen?`,
+        description: "Oude inzendingen behouden hun antwoord, maar nieuwe bezoekers zien dit veld niet meer.",
+        confirmLabel: "Verwijderen",
+        tone: "danger"
+      });
+      if (!ok) return;
+    }
+    zetVelden(def.fields.filter((_, idx) => idx !== i), veldIds.filter((_, idx) => idx !== i));
   }
   function setField(i, part) {
     const fields = [...def.fields];
@@ -151,8 +274,9 @@ function FormDetail({
       /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold", children: "Formulier bewerken" }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "danger", size: "sm", onClick: remove, children: "Verwijderen" }),
-          /* @__PURE__ */ jsx(Button, { size: "sm", onClick: save, children: "Opslaan" })
+          /* @__PURE__ */ jsx(Button, { variant: "danger", size: "sm", onClick: remove, disabled: busy, children: "Verwijderen" }),
+          vuil && /* @__PURE__ */ jsx("span", { className: "self-center text-sm text-amber-700", role: "status", children: "\u2022 Niet opgeslagen" }),
+          /* @__PURE__ */ jsx(Button, { loading: busy, size: "sm", onClick: save, disabled: busy, children: "Opslaan \u2014 direct live" })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [
@@ -171,74 +295,88 @@ function FormDetail({
           "."
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [
-          /* @__PURE__ */ jsx(Field, { label: "Kopie van inzending naar", hint: "Leeg = het notificatie-adres uit Instellingen \u2192 E-mail.", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Field, { label: "Kopie van inzending naar", hint: "Meerdere adressen mag, met een komma ertussen. Leeg = het notificatie-adres uit Instellingen \u2192 E-mail.", children: /* @__PURE__ */ jsx(
             Input,
             {
-              type: "email",
               value: def.notifyTo ?? "",
               onChange: (e) => setDef({ ...def, notifyTo: e.target.value || void 0 }),
               placeholder: "jij@voorbeeld.nl"
             }
           ) }),
-          /* @__PURE__ */ jsxs("label", { className: "mt-6 flex h-9 items-center gap-2 text-sm", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked: Boolean(def.confirmSubmitter),
-                onChange: (e) => setDef({ ...def, confirmSubmitter: e.target.checked })
-              }
-            ),
-            "Stuur de invuller ook een bevestiging (naar het eerste e-mailveld)"
-          ] })
+          /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: Boolean(def.confirmSubmitter),
+              onCheckedChange: (v) => setDef({ ...def, confirmSubmitter: v }),
+              label: "Stuur de invuller een bevestiging (naar het eerste e-mailveld)"
+            }
+          ) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs text-slate-500", children: [
-        "Formulier-id (voor het Formulier-blok): ",
-        /* @__PURE__ */ jsx("code", { children: form.id })
+        "Op een pagina zet je dit formulier met het blok ",
+        /* @__PURE__ */ jsx("strong", { children: "Formulier" }),
+        '; kies daar "',
+        def.name,
+        '".'
       ] })
     ] }),
     /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsx("h4", { className: "mb-3 text-sm font-semibold", children: "Velden" }),
-      /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: def.fields.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "grid items-end gap-2 rounded-lg border border-slate-200 p-3 md:grid-cols-[1fr_1fr_140px_auto_auto]", children: [
-        /* @__PURE__ */ jsx(Field, { label: "Naam (sleutel)", children: /* @__PURE__ */ jsx(Input, { value: f.name, onChange: (e) => setField(i, { name: e.target.value }) }) }),
-        /* @__PURE__ */ jsx(Field, { label: "Label", children: /* @__PURE__ */ jsx(Input, { value: f.label, onChange: (e) => setField(i, { label: e.target.value }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: def.fields.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "grid items-end gap-2 rounded-lg border border-slate-200 p-3 md:grid-cols-[1fr_160px_auto_auto]", children: [
+        /* @__PURE__ */ jsx(Field, { label: "Vraag / label", children: /* @__PURE__ */ jsx(Input, { value: f.label, onChange: (e) => zetLabel(i, e.target.value) }) }),
         /* @__PURE__ */ jsx(Field, { label: "Type", children: /* @__PURE__ */ jsx(Select, { value: f.type, onValueChange: (v) => setField(i, { type: v }), options: FIELD_TYPES }) }),
         /* @__PURE__ */ jsx(Switch, { checked: f.required, onCheckedChange: (v) => setField(i, { required: v }), label: "Verplicht" }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Veld omhoog", disabled: i === 0, onClick: () => verplaatsVeld(i, -1), children: "\u2191" }),
           /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Veld omlaag", disabled: i === def.fields.length - 1, onClick: () => verplaatsVeld(i, 1), children: "\u2193" }),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Veld verwijderen", onClick: () => zetVelden(def.fields.filter((_, idx) => idx !== i), veldIds.filter((_, idx) => idx !== i)), children: "\u{1F5D1}" })
+          /* @__PURE__ */ jsx(Button, { variant: "dangerGhost", size: "sm", "aria-label": `Veld "${f.label}" verwijderen`, onClick: () => verwijderVeld(i), children: "\u{1F5D1}" })
         ] }),
-        (f.type === "select" || f.type === "radio") && /* @__PURE__ */ jsx("div", { className: "md:col-span-5", children: /* @__PURE__ */ jsx(Field, { label: "Opties (komma-gescheiden)", children: /* @__PURE__ */ jsx(
-          Input,
+        (f.type === "select" || f.type === "radio") && /* @__PURE__ */ jsx("div", { className: "md:col-span-4", children: /* @__PURE__ */ jsx(OptiesEditor, { opties: f.options ?? [], onChange: (options) => setField(i, { options }) }) }),
+        f.type === "hidden" && /* @__PURE__ */ jsx("div", { className: "md:col-span-4", children: /* @__PURE__ */ jsx(
+          Field,
           {
-            value: (f.options ?? []).join(", "),
-            onChange: (e) => setField(i, { options: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) })
+            label: "Vaste waarde (optioneel)",
+            hint: `Wordt meegestuurd zonder dat de bezoeker het ziet. Een link als /contact?${f.name}=Huisje%20A vult dit veld met \u2018Huisje A\u2019.`,
+            children: /* @__PURE__ */ jsx(Input, { value: f.placeholder ?? "", onChange: (e) => setField(i, { placeholder: e.target.value || void 0 }) })
           }
-        ) }) })
+        ) }),
+        /* @__PURE__ */ jsxs("details", { className: "text-xs text-slate-500 md:col-span-4", children: [
+          /* @__PURE__ */ jsxs("summary", { className: "cursor-pointer select-none", children: [
+            "Technische naam: ",
+            f.name
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2 max-w-xs", children: /* @__PURE__ */ jsx(Input, { "aria-label": "Technische naam van het veld", value: f.name, onChange: (e) => setField(i, { name: e.target.value }) }) })
+        ] })
       ] }, veldIds[i] ?? i)) }),
       /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
         Button,
         {
           variant: "secondary",
           size: "sm",
-          onClick: () => zetVelden([...def.fields, { name: `veld${def.fields.length + 1}`, label: "Nieuw veld", type: "text", required: false }], [...veldIds, nieuweVeldId()]),
+          onClick: () => zetVelden([...def.fields, { name: sleutelUitLabel("Nieuw veld", new Set(def.fields.map((f) => f.name))), label: "Nieuw veld", type: "text", required: false }], [...veldIds, nieuweVeldId()]),
           children: "+ Veld toevoegen"
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx(Submissions, { siteId, formId: form.id, velden: def.fields.map((f) => f.name) })
+    /* @__PURE__ */ jsx(Submissions, { siteId, formId: form.id, velden: def.fields.map((f) => ({ name: f.name, label: f.label })) })
   ] });
 }
 function datumVan(s) {
   const d = s.createdAt && typeof s.createdAt.toDate === "function" ? s.createdAt.toDate() : null;
   return d ? d.toLocaleString("nl-NL", { dateStyle: "short", timeStyle: "short" }) : "";
 }
+const kolomNaam = (k) => typeof k === "string" ? k : k.name;
+const kolomLabel = (k) => typeof k === "string" ? k : k.label || k.name;
+function waardeTekst(v) {
+  if (v === true) return "ja";
+  if (v === false) return "nee";
+  return String(v ?? "");
+}
 function inzendingenCsv(velden, subs) {
   const cel = (v) => `"${String(v ?? "").replace(/"/g, '""')}"`;
-  const kop = ["datum", ...velden].map(cel).join(";");
-  const rijen = subs.map((s) => [datumVan(s), ...velden.map((k) => s.values?.[k])].map(cel).join(";"));
+  const kop = ["Datum", ...velden.map(kolomLabel)].map(cel).join(";");
+  const rijen = subs.map((s) => [datumVan(s), ...velden.map((k) => waardeTekst(s.values?.[kolomNaam(k)]))].map(cel).join(";"));
   return "\uFEFF" + [kop, ...rijen].join("\r\n");
 }
 function Submissions({ siteId, formId, velden }) {
@@ -248,13 +386,24 @@ function Submissions({ siteId, formId, velden }) {
   const { role } = useAuth();
   const magVerwijderen = canManageSite(role);
   const [sinds] = useState(() => formulierenGezienSinds(siteId, formId));
+  const [subsGeladen, setSubsGeladen] = useState(false);
+  const [subsFout, setSubsFout] = useState(null);
+  const [subsPoging, setSubsPoging] = useState(0);
   useEffect(() => () => markeerFormulierGezien(siteId, formId), [siteId, formId]);
   useEffect(() => {
     const db = getDb();
     if (!db) return;
     const q = query(collection(db, "sites", siteId, "forms", formId, "submissions"), orderBy("createdAt", "desc"));
-    return onSnapshot(q, (snap) => setSubs(snap.docs.map((d) => ({ id: d.id, ...d.data() }))));
-  }, [siteId, formId]);
+    return onSnapshot(
+      q,
+      (snap) => {
+        setSubs(snap.docs.map((d) => ({ id: d.id, ...d.data() })));
+        setSubsGeladen(true);
+        setSubsFout(null);
+      },
+      (e) => setSubsFout(e.message)
+    );
+  }, [siteId, formId, subsPoging]);
   const isNieuw = (s) => Boolean(sinds && s.createdAt && s.createdAt.toMillis() > sinds.toMillis());
   const nieuw = subs.filter(isNieuw).length;
   function exporteer() {
@@ -295,27 +444,31 @@ function Submissions({ siteId, formId, velden }) {
       ] }),
       subs.length > 0 && /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: exporteer, children: "Exporteer CSV" })
     ] }),
-    subs.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Nog geen inzendingen." }) : /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: subs.map((s) => /* @__PURE__ */ jsxs("div", { className: `rounded-lg border p-3 text-sm ${isNieuw(s) ? "border-amber-300 bg-amber-50/40" : "border-slate-200"}`, children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2 text-xs text-slate-400", children: [
+    subsFout || !subsGeladen ? /* @__PURE__ */ jsx(LaadStaat, { laden: !subsGeladen, fout: subsFout, wat: "inzendingen", opnieuw: () => {
+      setSubsFout(null);
+      setSubsPoging((n) => n + 1);
+    }, children: null }) : subs.length === 0 ? /* @__PURE__ */ jsx(LegeStaat, { titel: "Nog geen inzendingen", tekst: "Zodra iemand dit formulier invult, staat het bericht hier \u2014 en krijg je een e-mail." }) : /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: subs.map((s) => /* @__PURE__ */ jsxs("div", { className: `rounded-lg border p-3 text-sm ${isNieuw(s) ? "border-amber-300 bg-amber-50/40" : "border-slate-200"}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2 text-xs text-slate-500", children: [
         /* @__PURE__ */ jsxs("span", { children: [
           datumVan(s),
           isNieuw(s) ? " \xB7 nieuw" : ""
         ] }),
-        magVerwijderen && /* @__PURE__ */ jsx("button", { type: "button", className: "text-red-600 hover:underline", onClick: () => void verwijder(s), children: "Verwijderen" })
+        magVerwijderen && /* @__PURE__ */ jsx(Button, { variant: "dangerGhost", size: "sm", onClick: () => void verwijder(s), children: "Verwijderen" })
       ] }),
-      Object.entries(s.values ?? {}).map(([k, v]) => /* @__PURE__ */ jsxs("div", { children: [
+      [...velden.filter((f) => f.name in (s.values ?? {})), ...Object.keys(s.values ?? {}).filter((k) => !velden.some((f) => f.name === k)).map((k) => ({ name: k, label: k }))].map((f) => /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsxs("span", { className: "font-medium text-slate-600", children: [
-          k,
+          f.label,
           ":"
         ] }),
         " ",
-        String(v)
-      ] }, k))
+        /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap", children: waardeTekst(s.values?.[f.name]) })
+      ] }, f.name))
     ] }, s.id)) })
   ] });
 }
 export {
   FormsPanel,
-  inzendingenCsv
+  inzendingenCsv,
+  sleutelUitLabel
 };
 //# sourceMappingURL=FormsPanel.js.map