@xiwebdesign/xicms-core 7.31.0 → 8.16.0

package/dist/admin/customBlocks/CustomBlocksPanel.js

@@ -6,9 +6,11 @@ import { callable } from "../../firebase/functionsClient.js";
 import { getDb, getFirebaseApp } from "../../firebase/client.js";
 import { CustomBlockSchema } from "../../schema/customBlocks.js";
 import { FieldsSchema } from "../../schema/fields.js";
-import { Button, Field, Input, Textarea } from "../ui/primitives.js";
+import { Button, Field, Input, Textarea, LegeStaat } from "../ui/primitives.js";
 import { useToast } from "../ui/toast.js";
+import { FoutMelding } from "../ui/LaadStaat.js";
 import { useConfirm } from "../ui/ConfirmDialog.js";
+import { zodFoutTekst } from "../lib/zodFout.js";
 const EMPTY = {
   type: "custom-",
   label: "",
@@ -32,19 +34,23 @@ function CustomBlocksPanel({ siteId }) {
   const [editing, setEditing] = useState(null);
   const [fieldsText, setFieldsText] = useState("[]");
   const [busy, setBusy] = useState(false);
+  const [typeVast, setTypeVast] = useState(false);
+  const [laadFout, setLaadFout] = useState(null);
   useEffect(() => {
     const db = getDb();
     if (!db) return;
     return onSnapshot(collection(db, "sites", siteId, "customBlocks"), (snap) => {
+      setLaadFout(null);
       const out = [];
       snap.forEach((d) => {
         const res = CustomBlockSchema.safeParse({ ...d.data(), type: d.id });
         if (res.success) out.push(res.data);
       });
       setBlocks(out.sort((a, b) => a.label.localeCompare(b.label)));
-    });
+    }, (e) => setLaadFout(e.message));
   }, [siteId]);
   function open(def) {
+    setTypeVast(blocks.some((b) => b.type === def.type));
     setEditing(def);
     setFieldsText(JSON.stringify(def.fields, null, 2));
   }
@@ -69,12 +75,16 @@ function CustomBlocksPanel({ siteId }) {
     }
     const parsedFields = FieldsSchema.safeParse(fields);
     if (!parsedFields.success) {
-      toast({ title: "Velden ongeldig", description: parsedFields.error.issues[0]?.message, tone: "error" });
+      toast({ title: "Velden ongeldig", description: zodFoutTekst(parsedFields.error.issues[0]), tone: "error" });
       return;
     }
     const candidate = CustomBlockSchema.safeParse({ ...editing, fields: parsedFields.data });
     if (!candidate.success) {
-      toast({ title: "Bouwsteen ongeldig", description: candidate.error.issues[0]?.message, tone: "error" });
+      toast({ title: "Bouwsteen ongeldig", description: zodFoutTekst(candidate.error.issues[0]), tone: "error" });
+      return;
+    }
+    if (!typeVast && blocks.some((b) => b.type === candidate.data.type)) {
+      toast({ title: "Dit bloktype bestaat al", description: "Kies een ander type, of bewerk de bestaande bouwsteen.", tone: "error" });
       return;
     }
     const app = getFirebaseApp();
@@ -107,7 +117,7 @@ function CustomBlocksPanel({ siteId }) {
     return /* @__PURE__ */ jsxs("div", { className: "grid max-w-3xl gap-3", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: editing.label || editing.type }),
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-        /* @__PURE__ */ jsx(Field, { label: "Bloktype", hint: 'begint met "custom-"; niet meer te wijzigen na aanmaken', children: /* @__PURE__ */ jsx(Input, { value: editing.type, onChange: (e) => setEditing({ ...editing, type: e.target.value }), disabled: blocks.some((b) => b.type === editing.type) }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Bloktype", hint: 'begint met "custom-"; niet meer te wijzigen na aanmaken', children: /* @__PURE__ */ jsx(Input, { value: editing.type, onChange: (e) => setEditing({ ...editing, type: e.target.value }), disabled: typeVast }) }),
         /* @__PURE__ */ jsx(Field, { label: "Naam in het menu", children: /* @__PURE__ */ jsx(Input, { value: editing.label, onChange: (e) => setEditing({ ...editing, label: e.target.value }) }) })
       ] }),
       /* @__PURE__ */ jsx(Field, { label: "Icoon (emoji)", children: /* @__PURE__ */ jsx(Input, { value: editing.icon, maxLength: 16, onChange: (e) => setEditing({ ...editing, icon: e.target.value }), className: "w-24" }) }),
@@ -116,7 +126,7 @@ ${FIELDS_VOORBEELD}`, children: /* @__PURE__ */ jsx(Textarea, { rows: 10, value:
       /* @__PURE__ */ jsx(Field, { label: "Template", hint: "Mustache-subset: {{veld}}, {{{veldHtml}}}, {{#each items}}\u2026{{/each}}, {{#if veld}}\u2026{{else}}\u2026{{/if}}. Geen scripts \u2014 die worden bij opslaan gestript.", children: /* @__PURE__ */ jsx(Textarea, { rows: 10, value: editing.template, onChange: (e) => setEditing({ ...editing, template: e.target.value }), spellCheck: false, className: "font-mono text-xs" }) }),
       /* @__PURE__ */ jsx(Field, { label: "CSS", hint: 'Automatisch gescoped op dit blok ([data-xicms-cb="\u2026"]).', children: /* @__PURE__ */ jsx(Textarea, { rows: 8, value: editing.css, onChange: (e) => setEditing({ ...editing, css: e.target.value }), spellCheck: false, className: "font-mono text-xs" }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", disabled: busy, onClick: () => void save(), children: busy ? "Opslaan\u2026" : "Opslaan" }),
+        /* @__PURE__ */ jsx(Button, { loading: busy, type: "button", variant: "primary", disabled: busy, onClick: () => void save(), children: "Opslaan" }),
         /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => setEditing(null), children: "Annuleren" })
       ] })
     ] });
@@ -126,8 +136,9 @@ ${FIELDS_VOORBEELD}`, children: /* @__PURE__ */ jsx(Textarea, { rows: 10, value:
       /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: "Bouwstenen" }),
       /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => open(EMPTY), children: "+ Nieuwe bouwsteen" })
     ] }),
+    laadFout && /* @__PURE__ */ jsx(FoutMelding, { wat: "de bouwstenen", detail: laadFout }),
     /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Eigen bloktypes voor deze site \u2014 zonder release. Definieer velden, een veilige template en CSS; het blok verschijnt direct in het toevoeg-menu van de pagina-editor." }),
-    blocks.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Nog geen bouwstenen." }),
+    blocks.length === 0 && /* @__PURE__ */ jsx(LegeStaat, { titel: "Nog geen bouwstenen", tekst: "Een bouwsteen is een eigen bloktype voor deze site, zonder nieuwe release." }),
     /* @__PURE__ */ jsx("ul", { className: "grid gap-2", children: blocks.map((b) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between rounded-lg border border-slate-200 p-3", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("span", { className: "mr-2", children: b.icon }),

package/dist/admin/customBlocks/CustomBlocksPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/customBlocks/CustomBlocksPanel.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Beheer-paneel \"Bouwstenen\" (5.0): custom blocks — per site gedefinieerde bloktypes zonder\n * deploy (primo-concept, veilige template-variant). Voor de developer-/agent-rol: velden als\n * Field-IR (JSON, gevalideerd vóór opslaan), een veilige mustache-subset-template en scoped CSS.\n * Opslaan loopt via de saveCustomBlock-callable (sanitize + audit); het blok verschijnt direct\n * in het toevoeg-menu van de editor (live registry-sync in XiCMSProvider).\n */\nimport { useEffect, useState } from \"react\";\nimport { collection, onSnapshot } from \"firebase/firestore\";\nimport { callable } from \"../../firebase/functionsClient\";\nimport { getDb, getFirebaseApp } from \"../../firebase/client\";\nimport { CustomBlockSchema, type CustomBlock } from \"../../schema/customBlocks\";\nimport { FieldsSchema } from \"../../schema/fields\";\nimport { Button, Field, Input, Textarea } from \"../ui/primitives\";\nimport { useToast } from \"../ui/toast\";\nimport { useConfirm } from \"../ui/ConfirmDialog\";\n\nconst EMPTY: CustomBlock = {\n  type: \"custom-\",\n  label: \"\",\n  icon: \"🧩\",\n  fields: [],\n  template: \"\",\n  css: \"\",\n  version: 1,\n};\n\nconst FIELDS_VOORBEELD = `[\n  { \"key\": \"heading\", \"label\": \"Kop\", \"type\": \"text\" },\n  { \"key\": \"items\", \"label\": \"Items\", \"type\": \"repeater\", \"fields\": [\n    { \"key\": \"title\", \"label\": \"Titel\", \"type\": \"text\" },\n    { \"key\": \"bodyHtml\", \"label\": \"Tekst\", \"type\": \"richtext\" }\n  ] }\n]`;\n\nexport function CustomBlocksPanel({ siteId }: { siteId: string }) {\n  const { toast } = useToast();\n  const confirm = useConfirm();\n  const [blocks, setBlocks] = useState<CustomBlock[]>([]);\n  const [editing, setEditing] = useState<CustomBlock | null>(null);\n  const [fieldsText, setFieldsText] = useState(\"[]\");\n  const [busy, setBusy] = useState(false);\n\n  useEffect(() => {\n    const db = getDb();\n    if (!db) return;\n    return onSnapshot(collection(db, \"sites\", siteId, \"customBlocks\"), (snap) => {\n      const out: CustomBlock[] = [];\n      snap.forEach((d) => {\n        const res = CustomBlockSchema.safeParse({ ...(d.data() as Record<string, unknown>), type: d.id });\n        if (res.success) out.push(res.data);\n      });\n      setBlocks(out.sort((a, b) => a.label.localeCompare(b.label)));\n    });\n  }, [siteId]);\n\n  function open(def: CustomBlock) {\n    setEditing(def);\n    setFieldsText(JSON.stringify(def.fields, null, 2));\n  }\n\n  async function save() {\n    if (!editing) return;\n    let fields: unknown;\n    try {\n      fields = JSON.parse(fieldsText);\n    } catch (e) {\n      // Regel/kolom uit de parserfout halen: \"position N\" zonder context was ondebugbaar bij\n      // een handgetypte Field-IR — één verkeerde komma blokkeerde het hele bouwsteen-opslaan.\n      const msg = (e as Error).message;\n      const pos = /position (\\d+)/.exec(msg);\n      let where = \"\";\n      if (pos) {\n        const n = Number(pos[1]);\n        const before = fieldsText.slice(0, n);\n        const line = before.split(\"\\n\").length;\n        const col = n - before.lastIndexOf(\"\\n\");\n        where = ` (regel ${line}, kolom ${col})`;\n      }\n      toast({ title: \"Velden zijn geen geldige JSON\", description: `${msg}${where}`, tone: \"error\" });\n      return;\n    }\n    const parsedFields = FieldsSchema.safeParse(fields);\n    if (!parsedFields.success) {\n      toast({ title: \"Velden ongeldig\", description: parsedFields.error.issues[0]?.message, tone: \"error\" });\n      return;\n    }\n    const candidate = CustomBlockSchema.safeParse({ ...editing, fields: parsedFields.data });\n    if (!candidate.success) {\n      toast({ title: \"Bouwsteen ongeldig\", description: candidate.error.issues[0]?.message, tone: \"error\" });\n      return;\n    }\n    const app = getFirebaseApp();\n    if (!app) return;\n    setBusy(true);\n    try {\n      const fn = callable(app, \"saveCustomBlock\");\n      const res = await fn({ siteId, ...candidate.data });\n      toast({ title: \"Opgeslagen\", description: (res.data as { message?: string }).message, tone: \"success\" });\n      setEditing(null);\n    } catch (e) {\n      toast({ title: \"Opslaan mislukt\", description: (e as Error).message, tone: \"error\" });\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  async function remove(type: string) {\n    const ok = await confirm({ title: \"Bouwsteen verwijderen?\", description: \"Pagina's die dit blok gebruiken slaan het daarna over.\", confirmLabel: \"Verwijderen\", tone: \"danger\" });\n    if (!ok) return;\n    const app = getFirebaseApp();\n    if (!app) return;\n    try {\n      await callable(app, \"deleteCustomBlock\")({ siteId, type });\n      toast({ title: \"Verwijderd\", tone: \"success\" });\n    } catch (e) {\n      toast({ title: \"Verwijderen mislukt\", description: (e as Error).message, tone: \"error\" });\n    }\n  }\n\n  if (editing) {\n    return (\n      <div className=\"grid max-w-3xl gap-3\">\n        <h2 className=\"text-lg font-bold\">{editing.label || editing.type}</h2>\n        <div className=\"grid grid-cols-2 gap-2\">\n          <Field label=\"Bloktype\" hint='begint met \"custom-\"; niet meer te wijzigen na aanmaken'>\n            <Input value={editing.type} onChange={(e) => setEditing({ ...editing, type: e.target.value })} disabled={blocks.some((b) => b.type === editing.type)} />\n          </Field>\n          <Field label=\"Naam in het menu\">\n            <Input value={editing.label} onChange={(e) => setEditing({ ...editing, label: e.target.value })} />\n          </Field>\n        </div>\n        <Field label=\"Icoon (emoji)\">\n          <Input value={editing.icon} maxLength={16} onChange={(e) => setEditing({ ...editing, icon: e.target.value })} className=\"w-24\" />\n        </Field>\n        <Field label=\"Velden (Field-IR, JSON)\" hint={`Veldtypes: text, textarea, richtext (sleutel eindigt op Html), number, switch, select, date, image, url, link, group, repeater. Voorbeeld:\\n${FIELDS_VOORBEELD}`}>\n          <Textarea rows={10} value={fieldsText} onChange={(e) => setFieldsText(e.target.value)} spellCheck={false} className=\"font-mono text-xs\" />\n        </Field>\n        <Field label=\"Template\" hint=\"Mustache-subset: {{veld}}, {{{veldHtml}}}, {{#each items}}…{{/each}}, {{#if veld}}…{{else}}…{{/if}}. Geen scripts — die worden bij opslaan gestript.\">\n          <Textarea rows={10} value={editing.template} onChange={(e) => setEditing({ ...editing, template: e.target.value })} spellCheck={false} className=\"font-mono text-xs\" />\n        </Field>\n        <Field label=\"CSS\" hint='Automatisch gescoped op dit blok ([data-xicms-cb=\"…\"]).'>\n          <Textarea rows={8} value={editing.css} onChange={(e) => setEditing({ ...editing, css: e.target.value })} spellCheck={false} className=\"font-mono text-xs\" />\n        </Field>\n        <div className=\"flex gap-2\">\n          <Button type=\"button\" variant=\"primary\" disabled={busy} onClick={() => void save()}>{busy ? \"Opslaan…\" : \"Opslaan\"}</Button>\n          <Button type=\"button\" variant=\"ghost\" onClick={() => setEditing(null)}>Annuleren</Button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"grid gap-3\">\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-lg font-bold\">Bouwstenen</h2>\n        <Button type=\"button\" variant=\"secondary\" size=\"sm\" onClick={() => open(EMPTY)}>+ Nieuwe bouwsteen</Button>\n      </div>\n      <p className=\"text-sm text-slate-500\">\n        Eigen bloktypes voor deze site — zonder release. Definieer velden, een veilige template en CSS;\n        het blok verschijnt direct in het toevoeg-menu van de pagina-editor.\n      </p>\n      {blocks.length === 0 && <p className=\"text-sm text-slate-500\">Nog geen bouwstenen.</p>}\n      <ul className=\"grid gap-2\">\n        {blocks.map((b) => (\n          <li key={b.type} className=\"flex items-center justify-between rounded-lg border border-slate-200 p-3\">\n            <div>\n              <span className=\"mr-2\">{b.icon}</span>\n              <strong>{b.label}</strong> <span className=\"text-xs text-slate-500\">({b.type} · v{b.version})</span>\n            </div>\n            <div className=\"flex gap-2\">\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={() => open(b)}>Bewerken</Button>\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={() => void remove(b.type)}>Verwijderen</Button>\n            </div>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/admin/customBlocks/CustomBlocksPanel.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Beheer-paneel \"Bouwstenen\" (5.0): custom blocks — per site gedefinieerde bloktypes zonder\n * deploy (primo-concept, veilige template-variant). Voor de developer-/agent-rol: velden als\n * Field-IR (JSON, gevalideerd vóór opslaan), een veilige mustache-subset-template en scoped CSS.\n * Opslaan loopt via de saveCustomBlock-callable (sanitize + audit); het blok verschijnt direct\n * in het toevoeg-menu van de editor (live registry-sync in XiCMSProvider).\n */\nimport { useEffect, useState } from \"react\";\nimport { collection, onSnapshot } from \"firebase/firestore\";\nimport { callable } from \"../../firebase/functionsClient\";\nimport { getDb, getFirebaseApp } from \"../../firebase/client\";\nimport { CustomBlockSchema, type CustomBlock } from \"../../schema/customBlocks\";\nimport { FieldsSchema } from \"../../schema/fields\";\nimport { Button, Field, Input, Textarea, LegeStaat } from \"../ui/primitives\";\nimport { useToast } from \"../ui/toast\";\nimport { FoutMelding } from \"../ui/LaadStaat\";\nimport { useConfirm } from \"../ui/ConfirmDialog\";\nimport { zodFoutTekst } from \"../lib/zodFout\";\n\nconst EMPTY: CustomBlock = {\n  type: \"custom-\",\n  label: \"\",\n  icon: \"🧩\",\n  fields: [],\n  template: \"\",\n  css: \"\",\n  version: 1,\n};\n\nconst FIELDS_VOORBEELD = `[\n  { \"key\": \"heading\", \"label\": \"Kop\", \"type\": \"text\" },\n  { \"key\": \"items\", \"label\": \"Items\", \"type\": \"repeater\", \"fields\": [\n    { \"key\": \"title\", \"label\": \"Titel\", \"type\": \"text\" },\n    { \"key\": \"bodyHtml\", \"label\": \"Tekst\", \"type\": \"richtext\" }\n  ] }\n]`;\n\nexport function CustomBlocksPanel({ siteId }: { siteId: string }) {\n  const { toast } = useToast();\n  const confirm = useConfirm();\n  const [blocks, setBlocks] = useState<CustomBlock[]>([]);\n  const [editing, setEditing] = useState<CustomBlock | null>(null);\n  const [fieldsText, setFieldsText] = useState(\"[]\");\n  const [busy, setBusy] = useState(false);\n  // Het type van een bestáánde bouwsteen ligt vast (blokken verwijzen ernaar). Bij een nieuwe niet:\n  // vergelijken met de lijst zou het veld op slot zetten zodra je toevallig een bestaand type typt.\n  const [typeVast, setTypeVast] = useState(false);\n  const [laadFout, setLaadFout] = useState<string | null>(null);\n\n  useEffect(() => {\n    const db = getDb();\n    if (!db) return;\n    return onSnapshot(collection(db, \"sites\", siteId, \"customBlocks\"), (snap) => {\n      setLaadFout(null);\n      const out: CustomBlock[] = [];\n      snap.forEach((d) => {\n        const res = CustomBlockSchema.safeParse({ ...(d.data() as Record<string, unknown>), type: d.id });\n        if (res.success) out.push(res.data);\n      });\n      setBlocks(out.sort((a, b) => a.label.localeCompare(b.label)));\n    }, (e) => setLaadFout(e.message));\n  }, [siteId]);\n\n  function open(def: CustomBlock) {\n    setTypeVast(blocks.some((b) => b.type === def.type));\n    setEditing(def);\n    setFieldsText(JSON.stringify(def.fields, null, 2));\n  }\n\n  async function save() {\n    if (!editing) return;\n    let fields: unknown;\n    try {\n      fields = JSON.parse(fieldsText);\n    } catch (e) {\n      // Regel/kolom uit de parserfout halen: \"position N\" zonder context was ondebugbaar bij\n      // een handgetypte Field-IR — één verkeerde komma blokkeerde het hele bouwsteen-opslaan.\n      const msg = (e as Error).message;\n      const pos = /position (\\d+)/.exec(msg);\n      let where = \"\";\n      if (pos) {\n        const n = Number(pos[1]);\n        const before = fieldsText.slice(0, n);\n        const line = before.split(\"\\n\").length;\n        const col = n - before.lastIndexOf(\"\\n\");\n        where = ` (regel ${line}, kolom ${col})`;\n      }\n      toast({ title: \"Velden zijn geen geldige JSON\", description: `${msg}${where}`, tone: \"error\" });\n      return;\n    }\n    const parsedFields = FieldsSchema.safeParse(fields);\n    if (!parsedFields.success) {\n      toast({ title: \"Velden ongeldig\", description: zodFoutTekst(parsedFields.error.issues[0]), tone: \"error\" });\n      return;\n    }\n    const candidate = CustomBlockSchema.safeParse({ ...editing, fields: parsedFields.data });\n    if (!candidate.success) {\n      toast({ title: \"Bouwsteen ongeldig\", description: zodFoutTekst(candidate.error.issues[0]), tone: \"error\" });\n      return;\n    }\n    if (!typeVast && blocks.some((b) => b.type === candidate.data.type)) {\n      toast({ title: \"Dit bloktype bestaat al\", description: \"Kies een ander type, of bewerk de bestaande bouwsteen.\", tone: \"error\" });\n      return;\n    }\n    const app = getFirebaseApp();\n    if (!app) return;\n    setBusy(true);\n    try {\n      const fn = callable(app, \"saveCustomBlock\");\n      const res = await fn({ siteId, ...candidate.data });\n      toast({ title: \"Opgeslagen\", description: (res.data as { message?: string }).message, tone: \"success\" });\n      setEditing(null);\n    } catch (e) {\n      toast({ title: \"Opslaan mislukt\", description: (e as Error).message, tone: \"error\" });\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  async function remove(type: string) {\n    const ok = await confirm({ title: \"Bouwsteen verwijderen?\", description: \"Pagina's die dit blok gebruiken slaan het daarna over.\", confirmLabel: \"Verwijderen\", tone: \"danger\" });\n    if (!ok) return;\n    const app = getFirebaseApp();\n    if (!app) return;\n    try {\n      await callable(app, \"deleteCustomBlock\")({ siteId, type });\n      toast({ title: \"Verwijderd\", tone: \"success\" });\n    } catch (e) {\n      toast({ title: \"Verwijderen mislukt\", description: (e as Error).message, tone: \"error\" });\n    }\n  }\n\n  if (editing) {\n    return (\n      <div className=\"grid max-w-3xl gap-3\">\n        <h2 className=\"text-lg font-bold\">{editing.label || editing.type}</h2>\n        <div className=\"grid grid-cols-2 gap-2\">\n          <Field label=\"Bloktype\" hint='begint met \"custom-\"; niet meer te wijzigen na aanmaken'>\n            <Input value={editing.type} onChange={(e) => setEditing({ ...editing, type: e.target.value })} disabled={typeVast} />\n          </Field>\n          <Field label=\"Naam in het menu\">\n            <Input value={editing.label} onChange={(e) => setEditing({ ...editing, label: e.target.value })} />\n          </Field>\n        </div>\n        <Field label=\"Icoon (emoji)\">\n          <Input value={editing.icon} maxLength={16} onChange={(e) => setEditing({ ...editing, icon: e.target.value })} className=\"w-24\" />\n        </Field>\n        <Field label=\"Velden (Field-IR, JSON)\" hint={`Veldtypes: text, textarea, richtext (sleutel eindigt op Html), number, switch, select, date, image, url, link, group, repeater. Voorbeeld:\\n${FIELDS_VOORBEELD}`}>\n          <Textarea rows={10} value={fieldsText} onChange={(e) => setFieldsText(e.target.value)} spellCheck={false} className=\"font-mono text-xs\" />\n        </Field>\n        <Field label=\"Template\" hint=\"Mustache-subset: {{veld}}, {{{veldHtml}}}, {{#each items}}…{{/each}}, {{#if veld}}…{{else}}…{{/if}}. Geen scripts — die worden bij opslaan gestript.\">\n          <Textarea rows={10} value={editing.template} onChange={(e) => setEditing({ ...editing, template: e.target.value })} spellCheck={false} className=\"font-mono text-xs\" />\n        </Field>\n        <Field label=\"CSS\" hint='Automatisch gescoped op dit blok ([data-xicms-cb=\"…\"]).'>\n          <Textarea rows={8} value={editing.css} onChange={(e) => setEditing({ ...editing, css: e.target.value })} spellCheck={false} className=\"font-mono text-xs\" />\n        </Field>\n        <div className=\"flex gap-2\">\n          <Button loading={busy} type=\"button\" variant=\"primary\" disabled={busy} onClick={() => void save()}>{\"Opslaan\"}</Button>\n          <Button type=\"button\" variant=\"ghost\" onClick={() => setEditing(null)}>Annuleren</Button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"grid gap-3\">\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-lg font-bold\">Bouwstenen</h2>\n        <Button type=\"button\" variant=\"secondary\" size=\"sm\" onClick={() => open(EMPTY)}>+ Nieuwe bouwsteen</Button>\n      </div>\n      {laadFout && <FoutMelding wat=\"de bouwstenen\" detail={laadFout} />}\n      <p className=\"text-sm text-slate-500\">\n        Eigen bloktypes voor deze site — zonder release. Definieer velden, een veilige template en CSS;\n        het blok verschijnt direct in het toevoeg-menu van de pagina-editor.\n      </p>\n      {blocks.length === 0 && <LegeStaat titel=\"Nog geen bouwstenen\" tekst=\"Een bouwsteen is een eigen bloktype voor deze site, zonder nieuwe release.\" />}\n      <ul className=\"grid gap-2\">\n        {blocks.map((b) => (\n          <li key={b.type} className=\"flex items-center justify-between rounded-lg border border-slate-200 p-3\">\n            <div>\n              <span className=\"mr-2\">{b.icon}</span>\n              <strong>{b.label}</strong> <span className=\"text-xs text-slate-500\">({b.type} · v{b.version})</span>\n            </div>\n            <div className=\"flex gap-2\">\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={() => open(b)}>Bewerken</Button>\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={() => void remove(b.type)}>Verwijderen</Button>\n            </div>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/dashboard/DashboardPanel.js

@@ -20,7 +20,8 @@ import { useModules } from "../../modules/context.js";
 import { formatCents } from "../../schema/shop.js";
 import { Badge, Button, Card, Input } from "../ui/primitives.js";
 import { useToast } from "../ui/toast.js";
-import { useAdminNav } from "../navContext.js";
+import { useAdminNav, vraagOpen } from "../navContext.js";
+import { ORDER_STATUS_LABELS } from "../shop/lib.js";
 import { BalkjesLijst, DagStaven } from "../ui/charts.js";
 import { dagenInMaand, dagReeks, deltaTovVorige, huidigMaandId, maandLabel, topPaden } from "../stats/lib.js";
 import { paginaToestand } from "../lib/pagesClient.js";
@@ -100,7 +101,7 @@ function DashboardPanel({ siteId }) {
       setOrders([]);
     }
     getDocs(collection(db, "sites", siteId, "forms")).then(async (snap) => {
-      const forms = snap.docs.slice(0, 4);
+      const forms = snap.docs.slice(0, 40);
       const uit = await Promise.all(
         forms.map(async (f) => {
           const subs = collection(db, "sites", siteId, "forms", f.id, "submissions");
@@ -157,9 +158,9 @@ function DashboardPanel({ siteId }) {
           /* @__PURE__ */ jsx("em", { children: "Bekijk site" }),
           " en kies ",
           /* @__PURE__ */ jsx("em", { children: "Bewerken" }),
-          " in de zwarte balk. Elk blok krijgt een",
-          " ",
-          "potlood (tekst) en een tandwiel (instellingen) \u2014 je typt gewoon in de pagina."
+          " in de balk onderaan. Het potlood bij een blok bewerkt het op de pagina zelf, het tandwiel opent alle instellingen, en met ",
+          /* @__PURE__ */ jsx("em", { children: "+" }),
+          " voeg je iets toe."
         ] }),
         /* @__PURE__ */ jsxs("p", { children: [
           /* @__PURE__ */ jsx("strong", { className: "text-slate-800", children: "2 \xB7 Publiceer als het goed is." }),
@@ -176,7 +177,7 @@ function DashboardPanel({ siteId }) {
           /* @__PURE__ */ jsx("strong", { className: "text-slate-800", children: "3 \xB7 De rest staat hier." }),
           " Nieuwe pagina's, het menu, foto's, formulieren",
           heeftShop ? ", de webwinkel" : "",
-          " en statistieken vind je in de secties hiernaast. Onderaan de zijbalk staat ook een korte helptekst."
+          " en statistieken vind je in de secties hiernaast. Iets kwijt? Druk Ctrl+K (of Cmd+K) en typ wat je zoekt."
         ] })
       ] })
     ] }),
@@ -252,15 +253,18 @@ function DashboardPanel({ siteId }) {
           "button",
           {
             type: "button",
-            onClick: () => gaNaar("pages"),
+            onClick: () => {
+              vraagOpen("pages", p.id);
+              gaNaar("pages");
+            },
             className: "flex w-full items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-slate-100",
             title: `${p.title ?? p.id} \u2014 ${p.path ?? ""}`,
             children: [
               /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx("span", { className: "block truncate text-slate-800", children: p.title ?? p.id }),
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-slate-400", children: p.path })
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-slate-500", children: p.path })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-slate-400", children: fmtDatum(p.updatedAt) })
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-slate-500", children: fmtDatum(p.updatedAt) })
             ]
           }
         ) }, p.id)) })
@@ -271,16 +275,19 @@ function DashboardPanel({ siteId }) {
           "button",
           {
             type: "button",
-            onClick: () => gaNaar("shop"),
+            onClick: () => {
+              vraagOpen("shop", o.id);
+              gaNaar("shop");
+            },
             className: "flex w-full items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-slate-100",
             children: [
               /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx("span", { className: "block truncate text-slate-800", children: o.customer?.name ?? "Onbekend" }),
-                /* @__PURE__ */ jsx("span", { className: "block text-xs text-slate-400", children: fmtDatum(o.createdAt) })
+                /* @__PURE__ */ jsx("span", { className: "block text-xs text-slate-500", children: fmtDatum(o.createdAt) })
               ] }),
               /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [
                 typeof o.amount?.totalCents === "number" && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-slate-700", children: formatCents(o.amount.totalCents) }),
-                /* @__PURE__ */ jsx(Badge, { tone: o.status === "paid" || o.status === "shipped" ? "green" : "amber", children: o.status ?? "?" })
+                /* @__PURE__ */ jsx(Badge, { tone: ORDER_STATUS_LABELS[o.status ?? ""]?.tone ?? "amber", children: ORDER_STATUS_LABELS[o.status ?? ""]?.label ?? o.status ?? "Onbekend" })
               ] })
             ]
           }
@@ -288,11 +295,14 @@ function DashboardPanel({ siteId }) {
       ] }),
       /* @__PURE__ */ jsxs(Card, { children: [
         /* @__PURE__ */ jsx(WidgetKop, { titel: "Formulieren", tab: "forms", tabLabel: "Formulieren" }),
-        formulieren === null ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Laden\u2026" }) : formulieren.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Nog geen formulieren." }) : /* @__PURE__ */ jsx("ul", { className: "grid gap-1", children: formulieren.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        formulieren === null ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Laden\u2026" }) : formulieren.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Nog geen formulieren." }) : /* @__PURE__ */ jsx("ul", { className: "grid gap-1", children: [...formulieren].sort((a, b) => b.nieuw - a.nieuw).slice(0, 4).map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            onClick: () => gaNaar("forms"),
+            onClick: () => {
+              vraagOpen("forms", f.id);
+              gaNaar("forms");
+            },
             className: "flex w-full items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-slate-100",
             children: [
               /* @__PURE__ */ jsx("span", { className: "truncate text-slate-800", title: f.name, children: f.name }),
@@ -360,7 +370,7 @@ function DashboardPanel({ siteId }) {
             ),
             /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
               /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: () => setLinksBewerken(null), children: "Annuleren" }),
-              /* @__PURE__ */ jsx(Button, { size: "sm", disabled: linksOpslaan, onClick: () => void slaLinksOp(), children: linksOpslaan ? "Bezig\u2026" : "Opslaan" })
+              /* @__PURE__ */ jsx(Button, { loading: linksOpslaan, size: "sm", disabled: linksOpslaan, onClick: () => void slaLinksOp(), children: "Opslaan" })
             ] })
           ] })
         ] }) : links.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: magInstellen ? "Nog geen snelkoppelingen. Zet hier de plekken waar je vaak moet zijn \u2014 je webwinkel, een pagina, een extern systeem." : "Nog geen snelkoppelingen ingesteld." }) : /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-2", children: links.map((l, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
@@ -373,7 +383,7 @@ function DashboardPanel({ siteId }) {
             children: [
               l.label,
               " ",
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-slate-400", children: "\u2197" })
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-slate-500", children: "\u2197" })
             ]
           }
         ) }, i)) })

package/dist/admin/dashboard/DashboardPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/dashboard/DashboardPanel.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Startpagina van /beheer (7.16).\n *\n * /beheer opende recht in het pagina-overzicht: een lijst technische titels als eerste indruk, en\n * nergens een plek die uitlegt hoe het systeem in elkaar zit. Deze startpagina doet drie dingen:\n * uitleggen hoe je de site bewerkt (op de site zelf, niet hier), in één oogopslag tonen wat er\n * gebeurt (bezoek, bestellingen, inzendingen, laatst bewerkt), en snelkoppelingen bieden die de\n * siteadmin zelf kan instellen.\n *\n * Bewust eenmalige reads (geen live listeners): dit is een overzicht bij binnenkomst, geen\n * monitor. Elke widget vangt zijn eigen fouten — een dichtgezette collectie (rules, module uit)\n * mag nooit de hele startpagina blokkeren.\n */\nimport { useEffect, useMemo, useState } from \"react\";\nimport {\n  collection,\n  doc,\n  getCountFromServer,\n  getDoc,\n  getDocs,\n  limit,\n  orderBy,\n  query,\n  where,\n} from \"firebase/firestore\";\nimport type { Timestamp } from \"firebase/firestore\";\nimport { getDb, getFirebaseApp } from \"../../firebase/client\";\nimport { callable } from \"../../firebase/functionsClient\";\nimport { useAuth } from \"../../auth/AuthProvider\";\nimport { canManageSite } from \"../../auth/roles\";\nimport { useModules } from \"../../modules/context\";\nimport { formatCents } from \"../../schema/shop\";\nimport { Badge, Button, Card, Input } from \"../ui/primitives\";\nimport { useToast } from \"../ui/toast\";\nimport { useAdminNav } from \"../navContext\";\nimport { BalkjesLijst, DagStaven } from \"../ui/charts\";\nimport { dagenInMaand, dagReeks, deltaTovVorige, huidigMaandId, maandLabel, topPaden, type MaandStat as StatsMaand } from \"../stats/lib\";\nimport { paginaToestand } from \"../lib/pagesClient\";\nimport { formulierenGezienSinds } from \"../forms/gezien\";\n\ninterface RecentePagina {\n  id: string;\n  title?: string;\n  path?: string;\n  /** Timestamp uit de editor, ISO-string uit import-scripts — zie updatedMs(). */\n  updatedAt?: unknown;\n}\ntype MaandStat = Omit<StatsMaand, \"id\">;\ninterface RecenteOrder {\n  id: string;\n  status?: string;\n  createdAt?: Timestamp;\n  customer?: { name?: string };\n  amount?: { totalCents?: number };\n}\ninterface FormOverzicht {\n  id: string;\n  name: string;\n  aantal: number;\n  laatste?: Timestamp;\n  /** 7.24: inzendingen sinds je het formulier voor het laatst opende. */\n  nieuw: number;\n}\ninterface Snelkoppeling {\n  label: string;\n  href: string;\n}\n\n/**\n * `updatedAt` is in de praktijk een Firestore-Timestamp (editor-saves) ÓF een ISO-string\n * (import-/migratiescripts schrijven via REST) — live aangetroffen op christelijkkraamcadeau,\n * dóór elkaar in dezelfde collectie. Firestore sorteert die in aparte typegroepen, dus een\n * server-side orderBy geeft dan een fout beeld; we normaliseren en sorteren daarom client-side.\n */\nfunction updatedMs(v: unknown): number {\n  if (v && typeof (v as Timestamp).toDate === \"function\") return (v as Timestamp).toDate().getTime();\n  if (typeof v === \"string\") {\n    const t = Date.parse(v);\n    return Number.isNaN(t) ? 0 : t;\n  }\n  return 0;\n}\n\nfunction fmtDatum(v: unknown): string {\n  const ms = updatedMs(v);\n  if (!ms) return \"—\";\n  return new Date(ms).toLocaleString(\"nl-NL\", { dateStyle: \"short\", timeStyle: \"short\" });\n}\n\n/** Kop van een widget met een \"ga ernaartoe\"-pijl die naar het bijbehorende paneel springt. */\nfunction WidgetKop({ titel, tab, tabLabel }: { titel: string; tab?: string; tabLabel?: string }) {\n  const gaNaar = useAdminNav();\n  return (\n    <div className=\"mb-3 flex items-center justify-between gap-2\">\n      <h2 className=\"text-sm font-semibold text-slate-800\">{titel}</h2>\n      {tab && (\n        <button\n          type=\"button\"\n          onClick={() => gaNaar(tab)}\n          className=\"shrink-0 text-xs font-medium text-brand-700 hover:underline focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none\"\n        >\n          {tabLabel ?? \"Bekijk alles\"} →\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function DashboardPanel({ siteId }: { siteId: string }) {\n  const { role } = useAuth();\n  const { activeIds } = useModules();\n  const { toast } = useToast();\n  const gaNaar = useAdminNav();\n  const heeftShop = activeIds.has(\"shop\");\n  const magInstellen = canManageSite(role);\n\n  const [paginas, setPaginas] = useState<RecentePagina[] | null>(null);\n  /** 7.24: pagina's met wijzigingen die nog niet live staan — de \"wacht op jou\"-teller. */\n  const [nietLive, setNietLive] = useState<RecentePagina[]>([]);\n  const [teVerzenden, setTeVerzenden] = useState<number>(0);\n  const [maand, setMaand] = useState<MaandStat | null | undefined>(undefined);\n  const [vorigeMaand, setVorigeMaand] = useState<MaandStat | null>(null);\n  const [orders, setOrders] = useState<RecenteOrder[] | null>(null);\n  const [formulieren, setFormulieren] = useState<FormOverzicht[] | null>(null);\n  const [links, setLinks] = useState<Snelkoppeling[]>([]);\n  const [linksBewerken, setLinksBewerken] = useState<Snelkoppeling[] | null>(null);\n  const [linksOpslaan, setLinksOpslaan] = useState(false);\n\n  useEffect(() => {\n    const db = getDb();\n    if (!db) {\n      setPaginas([]);\n      setMaand(null);\n      setOrders([]);\n      setFormulieren([]);\n      return;\n    }\n\n    // Laatst bewerkte pagina's. Bewust GEEN server-side orderBy op updatedAt: dat veld is een\n    // mengsel van Timestamps en ISO-strings (zie updatedMs) en Firestore sorteert per typegroep.\n    // Drafts-collecties zijn klein; alles ophalen en zelf sorteren is hier de betrouwbare weg.\n    getDocs(collection(db, \"sites\", siteId, \"drafts\"))\n      .then((snap) => {\n        const alle = snap.docs\n          .map((d) => ({ id: d.id, ...(d.data() as Omit<RecentePagina, \"id\"> & { published?: boolean; lastPublishedAt?: unknown; trashed?: boolean; blocks?: unknown[] }) }))\n          .filter((p) => !p.trashed)\n          .sort((a, b) => updatedMs(b.updatedAt) - updatedMs(a.updatedAt));\n        setPaginas(alle.slice(0, 5));\n        // Zelfde regel als de badge in Pagina's: gepubliceerd, en daarna opnieuw opgeslagen.\n        setNietLive(alle.filter((p) => paginaToestand({ ...p, blocks: [] } as never) === \"gewijzigd\"));\n      })\n      .catch(() => setPaginas([]));\n\n    // Bezoek deze maand + vorige maand (voor de eerlijke delta) — zelfde bron als Statistieken.\n    const maandId = huidigMaandId();\n    const [j, m] = maandId.split(\"-\").map(Number);\n    const vd = new Date(Date.UTC(j, (m ?? 1) - 2, 1));\n    const vorigeId = `${vd.getUTCFullYear()}-${String(vd.getUTCMonth() + 1).padStart(2, \"0\")}`;\n    getDoc(doc(db, \"sites\", siteId, \"stats\", maandId))\n      .then((snap) => setMaand(snap.exists() ? (snap.data() as MaandStat) : null))\n      .catch(() => setMaand(null));\n    getDoc(doc(db, \"sites\", siteId, \"stats\", vorigeId))\n      .then((snap) => setVorigeMaand(snap.exists() ? (snap.data() as MaandStat) : null))\n      .catch(() => setVorigeMaand(null));\n\n    // Laatste bestellingen — alleen als de shop-module actief is.\n    if (heeftShop) {\n      getDocs(query(collection(db, \"sites\", siteId, \"orders\"), orderBy(\"createdAt\", \"desc\"), limit(5)))\n        .then((snap) => setOrders(snap.docs.map((d) => ({ id: d.id, ...(d.data() as Omit<RecenteOrder, \"id\">) }))))\n        .catch(() => setOrders([]));\n      // Betaald maar nog niet verzonden: dat is werk dat op de winkelier wacht.\n      getCountFromServer(query(collection(db, \"sites\", siteId, \"orders\"), where(\"status\", \"==\", \"paid\")))\n        .then((c) => setTeVerzenden(c.data().count))\n        .catch(() => setTeVerzenden(0));\n    } else {\n      setOrders([]);\n    }\n\n    // Formulieren: naam + aantal inzendingen + laatste inzending (aggregatie-count, geen\n    // volledige submissions-download). Max vier formulieren — de widget is een signaal, geen lijst.\n    getDocs(collection(db, \"sites\", siteId, \"forms\"))\n      .then(async (snap) => {\n        const forms = snap.docs.slice(0, 4);\n        const uit = await Promise.all(\n          forms.map(async (f) => {\n            const subs = collection(db, \"sites\", siteId, \"forms\", f.id, \"submissions\");\n            const sinds = formulierenGezienSinds(siteId, f.id);\n            const [count, laatste, nieuw] = await Promise.all([\n              getCountFromServer(subs).then((c) => c.data().count).catch(() => 0),\n              getDocs(query(subs, orderBy(\"createdAt\", \"desc\"), limit(1)))\n                .then((s) => (s.docs[0]?.data() as { createdAt?: Timestamp } | undefined)?.createdAt)\n                .catch(() => undefined),\n              // Nieuw sinds je laatste bezoek aan dit formulier (moment staat lokaal, zie forms/gezien.ts).\n              sinds\n                ? getCountFromServer(query(subs, where(\"createdAt\", \">\", sinds))).then((c) => c.data().count).catch(() => 0)\n                : Promise.resolve(0),\n            ]);\n            return { id: f.id, name: (f.data() as { name?: string }).name ?? f.id, aantal: count, laatste, nieuw };\n          }),\n        );\n        setFormulieren(uit);\n      })\n      .catch(() => setFormulieren([]));\n\n    // Snelkoppelingen uit settings/site (editor mag lezen; instellen is siteadmin-werk).\n    getDoc(doc(db, \"sites\", siteId, \"settings\", \"site\"))\n      .then((snap) => {\n        const d = snap.exists() ? (snap.data() as { dashboardLinks?: Snelkoppeling[] }) : {};\n        setLinks(Array.isArray(d.dashboardLinks) ? d.dashboardLinks : []);\n      })\n      .catch(() => setLinks([]));\n  }, [siteId, heeftShop]);\n\n  const vandaagDag = new Date().getUTCDate();\n  const dagen = useMemo(() => dagReeks(maand ? { id: \"\", ...maand } : undefined, dagenInMaand(huidigMaandId())), [maand]);\n  const delta = useMemo(\n    () =>\n      maand && vorigeMaand\n        ? deltaTovVorige({ id: \"\", ...maand }, { id: \"\", ...vorigeMaand }, vandaagDag)\n        : null,\n    [maand, vorigeMaand, vandaagDag],\n  );\n  const paden = useMemo(() => topPaden(maand ? { id: \"\", ...maand } : undefined, 3), [maand]);\n\n  async function slaLinksOp() {\n    if (!linksBewerken) return;\n    const schoon = linksBewerken.filter((l) => l.label.trim() && l.href.trim());\n    const app = getFirebaseApp();\n    if (!app) return;\n    setLinksOpslaan(true);\n    try {\n      // Zelfde route als de rest van de instellingen: de saveSiteSettings-callable (merge).\n      const fn = callable(app, \"saveSiteSettings\");\n      await fn({ siteId, settings: { dashboardLinks: schoon } });\n      setLinks(schoon);\n      setLinksBewerken(null);\n      toast({ title: \"Snelkoppelingen opgeslagen\", tone: \"success\" });\n    } catch (e) {\n      toast({ title: \"Opslaan mislukt\", description: (e as Error).message, tone: \"error\" });\n    } finally {\n      setLinksOpslaan(false);\n    }\n  }\n\n  return (\n    <div className=\"grid gap-4\">\n      {/* ── Zo werkt het ── */}\n      <Card>\n        <h2 className=\"text-sm font-semibold text-slate-800\">Zo werkt je site</h2>\n        <div className=\"mt-2 grid gap-2 text-sm text-slate-600 md:grid-cols-3\">\n          <p>\n            <strong className=\"text-slate-800\">1 · Bewerk op de site zelf.</strong> Klik rechtsboven op{\" \"}\n            <em>Bekijk site</em> en kies <em>Bewerken</em> in de zwarte balk. Elk blok krijgt een{\" \"}\n            potlood (tekst) en een tandwiel (instellingen) — je typt gewoon in de pagina.\n          </p>\n          <p>\n            <strong className=\"text-slate-800\">2 · Publiceer als het goed is.</strong> Alles wat je\n            wijzigt is eerst een <em>werkversie</em>: bezoekers zien er niets van. Pas de knop{\" \"}\n            <em>Publiceren</em> (rechtsonder) zet het live — en <em>Verwerpen</em> gooit het weg.\n          </p>\n          <p>\n            <strong className=\"text-slate-800\">3 · De rest staat hier.</strong> Nieuwe pagina&apos;s, het\n            menu, foto&apos;s, formulieren{heeftShop ? \", de webwinkel\" : \"\"} en statistieken vind je in\n            de secties hiernaast. Onderaan de zijbalk staat ook een korte helptekst.\n          </p>\n        </div>\n      </Card>\n\n      {/* ── Wacht op jou (7.24) ──\n          Eén tegel met wat er van de beheerder verwacht wordt: wijzigingen die nog niet live staan,\n          nieuwe inzendingen, bestellingen die de deur uit moeten. Dát is waarvoor iemand inlogt;\n          de overzichten hieronder zijn context. Verschijnt alleen als er iets ligt. */}\n      {(() => {\n        const nieuweInzendingen = (formulieren ?? []).reduce((som, f) => som + f.nieuw, 0);\n        const items: { tekst: string; tab: string; tabLabel: string }[] = [];\n        if (nietLive.length > 0) {\n          items.push({\n            tekst: nietLive.length === 1\n              ? `1 pagina heeft wijzigingen die nog niet live staan (${nietLive[0].title ?? nietLive[0].path})`\n              : `${nietLive.length} pagina's hebben wijzigingen die nog niet live staan`,\n            tab: \"pages\",\n            tabLabel: \"Naar Pagina's\",\n          });\n        }\n        if (nieuweInzendingen > 0) {\n          items.push({ tekst: nieuweInzendingen === 1 ? \"1 nieuwe inzending\" : `${nieuweInzendingen} nieuwe inzendingen`, tab: \"forms\", tabLabel: \"Naar Formulieren\" });\n        }\n        if (heeftShop && teVerzenden > 0) {\n          items.push({ tekst: teVerzenden === 1 ? \"1 betaalde bestelling wacht op verzending\" : `${teVerzenden} betaalde bestellingen wachten op verzending`, tab: \"shop\", tabLabel: \"Naar Webwinkel\" });\n        }\n        if (items.length === 0) return null;\n        return (\n          <Card>\n            <h2 className=\"mb-2 text-sm font-semibold text-slate-800\">Wacht op jou</h2>\n            <ul className=\"grid gap-1.5\">\n              {items.map((it) => (\n                <li key={it.tab} className=\"flex flex-wrap items-center justify-between gap-2 rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-900\">\n                  <span>{it.tekst}</span>\n                  <button type=\"button\" onClick={() => gaNaar(it.tab)} className=\"text-xs font-medium text-brand-700 hover:underline\">\n                    {it.tabLabel} →\n                  </button>\n                </li>\n              ))}\n            </ul>\n          </Card>\n        );\n      })()}\n\n      <div className=\"grid gap-4 md:grid-cols-2\">\n        {/* ── Statistieken ── */}\n        <Card>\n          <WidgetKop titel=\"Bezoek deze maand\" tab=\"stats\" tabLabel=\"Statistieken\" />\n          {maand === undefined ? (\n            <p className=\"text-sm text-slate-500\">Laden…</p>\n          ) : maand === null ? (\n            <p className=\"text-sm text-slate-500\">Nog geen bezoekersdata deze maand.</p>\n          ) : (\n            <div className=\"grid gap-4\">\n              {/* Hero-cijfer met context: het totaal leidt, vandaag en de delta lopen mee. */}\n              <div className=\"flex flex-wrap items-baseline gap-x-5 gap-y-1\">\n                <p>\n                  <span className=\"text-3xl font-semibold text-slate-900\">{(maand.total ?? 0).toLocaleString(\"nl-NL\")}</span>{\" \"}\n                  <span className=\"text-xs text-slate-500\">weergaven in {maandLabel(huidigMaandId())}</span>\n                </p>\n                <p>\n                  <span className=\"text-lg font-semibold text-slate-700\">{(dagen[vandaagDag - 1] ?? 0).toLocaleString(\"nl-NL\")}</span>{\" \"}\n                  <span className=\"text-xs text-slate-500\">vandaag</span>\n                </p>\n                {delta != null && Number.isFinite(delta) && (\n                  <p className={`text-xs font-medium ${delta >= 0 ? \"text-emerald-700\" : \"text-red-700\"}`}>\n                    <span aria-hidden=\"true\">{delta >= 0 ? \"▲\" : \"▼\"}</span> {Math.abs(Math.round(delta))}%\n                    <span className=\"font-normal text-slate-500\"> t.o.v. vorige maand</span>\n                  </p>\n                )}\n              </div>\n              <DagStaven\n                waarden={dagen}\n                accentIndex={vandaagDag - 1}\n                hoogte={110}\n                titel={`Weergaven per dag in ${maandLabel(huidigMaandId(), true)}`}\n              />\n              {paden.length > 0 && <BalkjesLijst items={paden} />}\n            </div>\n          )}\n        </Card>\n\n        {/* ── Laatst bewerkte pagina's ── */}\n        <Card>\n          <WidgetKop titel=\"Laatst bewerkt\" tab=\"pages\" tabLabel=\"Pagina's\" />\n          {paginas === null ? (\n            <p className=\"text-sm text-slate-500\">Laden…</p>\n          ) : paginas.length === 0 ? (\n            <p className=\"text-sm text-slate-500\">Nog geen bewerkte pagina&apos;s.</p>\n          ) : (\n            <ul className=\"grid gap-1\">\n              {paginas.map((p) => (\n                <li key={p.id}>\n                  <button\n                    type=\"button\"\n                    onClick={() => gaNaar(\"pages\")}\n                    className=\"flex w-full items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-slate-100\"\n                    title={`${p.title ?? p.id} — ${p.path ?? \"\"}`}\n                  >\n                    <span className=\"min-w-0\">\n                      <span className=\"block truncate text-slate-800\">{p.title ?? p.id}</span>\n                      <span className=\"block truncate text-xs text-slate-400\">{p.path}</span>\n                    </span>\n                    <span className=\"shrink-0 text-xs text-slate-400\">{fmtDatum(p.updatedAt)}</span>\n                  </button>\n                </li>\n              ))}\n            </ul>\n          )}\n        </Card>\n\n        {/* ── Bestellingen (alleen met shop) ── */}\n        {heeftShop && (\n          <Card>\n            <WidgetKop titel=\"Laatste bestellingen\" tab=\"shop\" tabLabel=\"Webwinkel\" />\n            {orders === null ? (\n              <p className=\"text-sm text-slate-500\">Laden…</p>\n            ) : orders.length === 0 ? (\n              <p className=\"text-sm text-slate-500\">Nog geen bestellingen.</p>\n            ) : (\n              <ul className=\"grid gap-1\">\n                {orders.map((o) => (\n                  <li key={o.id}>\n                    <button\n                      type=\"button\"\n                      onClick={() => gaNaar(\"shop\")}\n                      className=\"flex w-full items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-slate-100\"\n                    >\n                      <span className=\"min-w-0\">\n                        <span className=\"block truncate text-slate-800\">{o.customer?.name ?? \"Onbekend\"}</span>\n                        <span className=\"block text-xs text-slate-400\">{fmtDatum(o.createdAt)}</span>\n                      </span>\n                      <span className=\"flex shrink-0 items-center gap-2\">\n                        {typeof o.amount?.totalCents === \"number\" && (\n                          <span className=\"text-sm font-medium text-slate-700\">{formatCents(o.amount.totalCents)}</span>\n                        )}\n                        <Badge tone={o.status === \"paid\" || o.status === \"shipped\" ? \"green\" : \"amber\"}>\n                          {o.status ?? \"?\"}\n                        </Badge>\n                      </span>\n                    </button>\n                  </li>\n                ))}\n              </ul>\n            )}\n          </Card>\n        )}\n\n        {/* ── Formulieren ── */}\n        <Card>\n          <WidgetKop titel=\"Formulieren\" tab=\"forms\" tabLabel=\"Formulieren\" />\n          {formulieren === null ? (\n            <p className=\"text-sm text-slate-500\">Laden…</p>\n          ) : formulieren.length === 0 ? (\n            <p className=\"text-sm text-slate-500\">Nog geen formulieren.</p>\n          ) : (\n            <ul className=\"grid gap-1\">\n              {formulieren.map((f) => (\n                <li key={f.id}>\n                  <button\n                    type=\"button\"\n                    onClick={() => gaNaar(\"forms\")}\n                    className=\"flex w-full items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-slate-100\"\n                  >\n                    <span className=\"truncate text-slate-800\" title={f.name}>{f.name}</span>\n                    <span className=\"shrink-0 text-xs text-slate-500\">\n                      {f.aantal} {f.aantal === 1 ? \"inzending\" : \"inzendingen\"}\n                      {f.laatste ? ` · laatste ${fmtDatum(f.laatste)}` : \"\"}\n                    </span>\n                  </button>\n                </li>\n              ))}\n            </ul>\n          )}\n        </Card>\n\n        {/* ── Snelkoppelingen ── */}\n        <Card>\n          <div className=\"mb-3 flex items-center justify-between gap-2\">\n            <h2 className=\"text-sm font-semibold text-slate-800\">Snelkoppelingen</h2>\n            {magInstellen && linksBewerken === null && (\n              <Button variant=\"secondary\" size=\"sm\" onClick={() => setLinksBewerken(links.length ? [...links] : [{ label: \"\", href: \"\" }])}>\n                Instellen\n              </Button>\n            )}\n          </div>\n          {linksBewerken ? (\n            <div className=\"grid gap-2\">\n              <div className=\"grid grid-cols-[1fr_1.4fr_auto] gap-2 text-xs font-medium text-slate-500\">\n                <span>Naam</span>\n                <span>Adres</span>\n                <span aria-hidden=\"true\" />\n              </div>\n              {linksBewerken.map((l, i) => (\n                <div key={i} className=\"grid grid-cols-[1fr_1.4fr_auto] gap-2\">\n                  <Input value={l.label} placeholder=\"bv. Webwinkel\" aria-label=\"Naam van de snelkoppeling\"\n                    onChange={(e) => setLinksBewerken(linksBewerken.map((x, j) => (j === i ? { ...x, label: e.target.value } : x)))} />\n                  <Input value={l.href} placeholder=\"/webwinkel of https://…\" aria-label=\"Adres van de snelkoppeling\"\n                    onChange={(e) => setLinksBewerken(linksBewerken.map((x, j) => (j === i ? { ...x, href: e.target.value } : x)))} />\n                  <Button variant=\"ghost\" size=\"sm\" aria-label=\"Verwijderen\"\n                    onClick={() => setLinksBewerken(linksBewerken.filter((_, j) => j !== i))}>✕</Button>\n                </div>\n              ))}\n              <div className=\"flex items-center justify-between gap-2\">\n                <Button variant=\"secondary\" size=\"sm\" disabled={linksBewerken.length >= 12}\n                  onClick={() => setLinksBewerken([...linksBewerken, { label: \"\", href: \"\" }])}>\n                  + Snelkoppeling\n                </Button>\n                <div className=\"flex gap-2\">\n                  <Button variant=\"secondary\" size=\"sm\" onClick={() => setLinksBewerken(null)}>Annuleren</Button>\n                  <Button size=\"sm\" disabled={linksOpslaan} onClick={() => void slaLinksOp()}>\n                    {linksOpslaan ? \"Bezig…\" : \"Opslaan\"}\n                  </Button>\n                </div>\n              </div>\n            </div>\n          ) : links.length === 0 ? (\n            <p className=\"text-sm text-slate-500\">\n              {magInstellen\n                ? \"Nog geen snelkoppelingen. Zet hier de plekken waar je vaak moet zijn — je webwinkel, een pagina, een extern systeem.\"\n                : \"Nog geen snelkoppelingen ingesteld.\"}\n            </p>\n          ) : (\n            <ul className=\"flex flex-wrap gap-2\">\n              {links.map((l, i) => (\n                <li key={i}>\n                  <a\n                    href={l.href}\n                    target={/^https?:\\/\\//i.test(l.href) ? \"_blank\" : undefined}\n                    rel=\"noreferrer\"\n                    className=\"inline-flex items-center gap-1.5 rounded-lg border border-slate-200 px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-100\"\n                  >\n                    {l.label} <span aria-hidden=\"true\" className=\"text-slate-400\">↗</span>\n                  </a>\n                </li>\n              ))}\n            </ul>\n          )}\n        </Card>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/admin/dashboard/DashboardPanel.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Startpagina van /beheer (7.16).\n *\n * /beheer opende recht in het pagina-overzicht: een lijst technische titels als eerste indruk, en\n * nergens een plek die uitlegt hoe het systeem in elkaar zit. Deze startpagina doet drie dingen:\n * uitleggen hoe je de site bewerkt (op de site zelf, niet hier), in één oogopslag tonen wat er\n * gebeurt (bezoek, bestellingen, inzendingen, laatst bewerkt), en snelkoppelingen bieden die de\n * siteadmin zelf kan instellen.\n *\n * Bewust eenmalige reads (geen live listeners): dit is een overzicht bij binnenkomst, geen\n * monitor. Elke widget vangt zijn eigen fouten — een dichtgezette collectie (rules, module uit)\n * mag nooit de hele startpagina blokkeren.\n */\nimport { useEffect, useMemo, useState } from \"react\";\nimport {\n  collection,\n  doc,\n  getCountFromServer,\n  getDoc,\n  getDocs,\n  limit,\n  orderBy,\n  query,\n  where,\n} from \"firebase/firestore\";\nimport type { Timestamp } from \"firebase/firestore\";\nimport { getDb, getFirebaseApp } from \"../../firebase/client\";\nimport { callable } from \"../../firebase/functionsClient\";\nimport { useAuth } from \"../../auth/AuthProvider\";\nimport { canManageSite } from \"../../auth/roles\";\nimport { useModules } from \"../../modules/context\";\nimport { formatCents } from \"../../schema/shop\";\nimport { Badge, Button, Card, Input } from \"../ui/primitives\";\nimport { useToast } from \"../ui/toast\";\nimport { useAdminNav, vraagOpen } from \"../navContext\";\nimport { ORDER_STATUS_LABELS } from \"../shop/lib\";\nimport { BalkjesLijst, DagStaven } from \"../ui/charts\";\nimport { dagenInMaand, dagReeks, deltaTovVorige, huidigMaandId, maandLabel, topPaden, type MaandStat as StatsMaand } from \"../stats/lib\";\nimport { paginaToestand } from \"../lib/pagesClient\";\nimport { formulierenGezienSinds } from \"../forms/gezien\";\n\ninterface RecentePagina {\n  id: string;\n  title?: string;\n  path?: string;\n  /** Timestamp uit de editor, ISO-string uit import-scripts — zie updatedMs(). */\n  updatedAt?: unknown;\n}\ntype MaandStat = Omit<StatsMaand, \"id\">;\ninterface RecenteOrder {\n  id: string;\n  status?: string;\n  createdAt?: Timestamp;\n  customer?: { name?: string };\n  amount?: { totalCents?: number };\n}\ninterface FormOverzicht {\n  id: string;\n  name: string;\n  aantal: number;\n  laatste?: Timestamp;\n  /** 7.24: inzendingen sinds je het formulier voor het laatst opende. */\n  nieuw: number;\n}\ninterface Snelkoppeling {\n  label: string;\n  href: string;\n}\n\n/**\n * `updatedAt` is in de praktijk een Firestore-Timestamp (editor-saves) ÓF een ISO-string\n * (import-/migratiescripts schrijven via REST) — live aangetroffen op christelijkkraamcadeau,\n * dóór elkaar in dezelfde collectie. Firestore sorteert die in aparte typegroepen, dus een\n * server-side orderBy geeft dan een fout beeld; we normaliseren en sorteren daarom client-side.\n */\nfunction updatedMs(v: unknown): number {\n  if (v && typeof (v as Timestamp).toDate === \"function\") return (v as Timestamp).toDate().getTime();\n  if (typeof v === \"string\") {\n    const t = Date.parse(v);\n    return Number.isNaN(t) ? 0 : t;\n  }\n  return 0;\n}\n\nfunction fmtDatum(v: unknown): string {\n  const ms = updatedMs(v);\n  if (!ms) return \"—\";\n  return new Date(ms).toLocaleString(\"nl-NL\", { dateStyle: \"short\", timeStyle: \"short\" });\n}\n\n/** Kop van een widget met een \"ga ernaartoe\"-pijl die naar het bijbehorende paneel springt. */\nfunction WidgetKop({ titel, tab, tabLabel }: { titel: string; tab?: string; tabLabel?: string }) {\n  const gaNaar = useAdminNav();\n  return (\n    <div className=\"mb-3 flex items-center justify-between gap-2\">\n      <h2 className=\"text-sm font-semibold text-slate-800\">{titel}</h2>\n      {tab && (\n        <button\n          type=\"button\"\n          onClick={() => gaNaar(tab)}\n          className=\"shrink-0 text-xs font-medium text-brand-700 hover:underline focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none\"\n        >\n          {tabLabel ?? \"Bekijk alles\"} →\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function DashboardPanel({ siteId }: { siteId: string }) {\n  const { role } = useAuth();\n  const { activeIds } = useModules();\n  const { toast } = useToast();\n  const gaNaar = useAdminNav();\n  const heeftShop = activeIds.has(\"shop\");\n  const magInstellen = canManageSite(role);\n\n  const [paginas, setPaginas] = useState<RecentePagina[] | null>(null);\n  /** 7.24: pagina's met wijzigingen die nog niet live staan — de \"wacht op jou\"-teller. */\n  const [nietLive, setNietLive] = useState<RecentePagina[]>([]);\n  const [teVerzenden, setTeVerzenden] = useState<number>(0);\n  const [maand, setMaand] = useState<MaandStat | null | undefined>(undefined);\n  const [vorigeMaand, setVorigeMaand] = useState<MaandStat | null>(null);\n  const [orders, setOrders] = useState<RecenteOrder[] | null>(null);\n  const [formulieren, setFormulieren] = useState<FormOverzicht[] | null>(null);\n  const [links, setLinks] = useState<Snelkoppeling[]>([]);\n  const [linksBewerken, setLinksBewerken] = useState<Snelkoppeling[] | null>(null);\n  const [linksOpslaan, setLinksOpslaan] = useState(false);\n\n  useEffect(() => {\n    const db = getDb();\n    if (!db) {\n      setPaginas([]);\n      setMaand(null);\n      setOrders([]);\n      setFormulieren([]);\n      return;\n    }\n\n    // Laatst bewerkte pagina's. Bewust GEEN server-side orderBy op updatedAt: dat veld is een\n    // mengsel van Timestamps en ISO-strings (zie updatedMs) en Firestore sorteert per typegroep.\n    // Drafts-collecties zijn klein; alles ophalen en zelf sorteren is hier de betrouwbare weg.\n    getDocs(collection(db, \"sites\", siteId, \"drafts\"))\n      .then((snap) => {\n        const alle = snap.docs\n          .map((d) => ({ id: d.id, ...(d.data() as Omit<RecentePagina, \"id\"> & { published?: boolean; lastPublishedAt?: unknown; trashed?: boolean; blocks?: unknown[] }) }))\n          .filter((p) => !p.trashed)\n          .sort((a, b) => updatedMs(b.updatedAt) - updatedMs(a.updatedAt));\n        setPaginas(alle.slice(0, 5));\n        // Zelfde regel als de badge in Pagina's: gepubliceerd, en daarna opnieuw opgeslagen.\n        setNietLive(alle.filter((p) => paginaToestand({ ...p, blocks: [] } as never) === \"gewijzigd\"));\n      })\n      .catch(() => setPaginas([]));\n\n    // Bezoek deze maand + vorige maand (voor de eerlijke delta) — zelfde bron als Statistieken.\n    const maandId = huidigMaandId();\n    const [j, m] = maandId.split(\"-\").map(Number);\n    const vd = new Date(Date.UTC(j, (m ?? 1) - 2, 1));\n    const vorigeId = `${vd.getUTCFullYear()}-${String(vd.getUTCMonth() + 1).padStart(2, \"0\")}`;\n    getDoc(doc(db, \"sites\", siteId, \"stats\", maandId))\n      .then((snap) => setMaand(snap.exists() ? (snap.data() as MaandStat) : null))\n      .catch(() => setMaand(null));\n    getDoc(doc(db, \"sites\", siteId, \"stats\", vorigeId))\n      .then((snap) => setVorigeMaand(snap.exists() ? (snap.data() as MaandStat) : null))\n      .catch(() => setVorigeMaand(null));\n\n    // Laatste bestellingen — alleen als de shop-module actief is.\n    if (heeftShop) {\n      getDocs(query(collection(db, \"sites\", siteId, \"orders\"), orderBy(\"createdAt\", \"desc\"), limit(5)))\n        .then((snap) => setOrders(snap.docs.map((d) => ({ id: d.id, ...(d.data() as Omit<RecenteOrder, \"id\">) }))))\n        .catch(() => setOrders([]));\n      // Betaald maar nog niet verzonden: dat is werk dat op de winkelier wacht.\n      getCountFromServer(query(collection(db, \"sites\", siteId, \"orders\"), where(\"status\", \"==\", \"paid\")))\n        .then((c) => setTeVerzenden(c.data().count))\n        .catch(() => setTeVerzenden(0));\n    } else {\n      setOrders([]);\n    }\n\n    // Formulieren: naam + aantal inzendingen + laatste inzending (aggregatie-count, geen\n    // volledige submissions-download). Alle formulieren tellen mee voor \"Wacht op jou\" (8.3: eerst\n    // alleen de eerste vier); de widget toont er vier, die met nieuwe inzendingen eerst.\n    getDocs(collection(db, \"sites\", siteId, \"forms\"))\n      .then(async (snap) => {\n        const forms = snap.docs.slice(0, 40);\n        const uit = await Promise.all(\n          forms.map(async (f) => {\n            const subs = collection(db, \"sites\", siteId, \"forms\", f.id, \"submissions\");\n            const sinds = formulierenGezienSinds(siteId, f.id);\n            const [count, laatste, nieuw] = await Promise.all([\n              getCountFromServer(subs).then((c) => c.data().count).catch(() => 0),\n              getDocs(query(subs, orderBy(\"createdAt\", \"desc\"), limit(1)))\n                .then((s) => (s.docs[0]?.data() as { createdAt?: Timestamp } | undefined)?.createdAt)\n                .catch(() => undefined),\n              // Nieuw sinds je laatste bezoek aan dit formulier (moment staat lokaal, zie forms/gezien.ts).\n              sinds\n                ? getCountFromServer(query(subs, where(\"createdAt\", \">\", sinds))).then((c) => c.data().count).catch(() => 0)\n                : Promise.resolve(0),\n            ]);\n            return { id: f.id, name: (f.data() as { name?: string }).name ?? f.id, aantal: count, laatste, nieuw };\n          }),\n        );\n        setFormulieren(uit);\n      })\n      .catch(() => setFormulieren([]));\n\n    // Snelkoppelingen uit settings/site (editor mag lezen; instellen is siteadmin-werk).\n    getDoc(doc(db, \"sites\", siteId, \"settings\", \"site\"))\n      .then((snap) => {\n        const d = snap.exists() ? (snap.data() as { dashboardLinks?: Snelkoppeling[] }) : {};\n        setLinks(Array.isArray(d.dashboardLinks) ? d.dashboardLinks : []);\n      })\n      .catch(() => setLinks([]));\n  }, [siteId, heeftShop]);\n\n  const vandaagDag = new Date().getUTCDate();\n  const dagen = useMemo(() => dagReeks(maand ? { id: \"\", ...maand } : undefined, dagenInMaand(huidigMaandId())), [maand]);\n  const delta = useMemo(\n    () =>\n      maand && vorigeMaand\n        ? deltaTovVorige({ id: \"\", ...maand }, { id: \"\", ...vorigeMaand }, vandaagDag)\n        : null,\n    [maand, vorigeMaand, vandaagDag],\n  );\n  const paden = useMemo(() => topPaden(maand ? { id: \"\", ...maand } : undefined, 3), [maand]);\n\n  async function slaLinksOp() {\n    if (!linksBewerken) return;\n    const schoon = linksBewerken.filter((l) => l.label.trim() && l.href.trim());\n    const app = getFirebaseApp();\n    if (!app) return;\n    setLinksOpslaan(true);\n    try {\n      // Zelfde route als de rest van de instellingen: de saveSiteSettings-callable (merge).\n      const fn = callable(app, \"saveSiteSettings\");\n      await fn({ siteId, settings: { dashboardLinks: schoon } });\n      setLinks(schoon);\n      setLinksBewerken(null);\n      toast({ title: \"Snelkoppelingen opgeslagen\", tone: \"success\" });\n    } catch (e) {\n      toast({ title: \"Opslaan mislukt\", description: (e as Error).message, tone: \"error\" });\n    } finally {\n      setLinksOpslaan(false);\n    }\n  }\n\n  return (\n    <div className=\"grid gap-4\">\n      {/* ── Zo werkt het ── */}\n      <Card>\n        <h2 className=\"text-sm font-semibold text-slate-800\">Zo werkt je site</h2>\n        <div className=\"mt-2 grid gap-2 text-sm text-slate-600 md:grid-cols-3\">\n          <p>\n            <strong className=\"text-slate-800\">1 · Bewerk op de site zelf.</strong> Klik rechtsboven op{\" \"}\n            <em>Bekijk site</em> en kies <em>Bewerken</em> in de balk onderaan. Het potlood bij een blok\n            bewerkt het op de pagina zelf, het tandwiel opent alle instellingen, en met <em>+</em> voeg je iets toe.\n          </p>\n          <p>\n            <strong className=\"text-slate-800\">2 · Publiceer als het goed is.</strong> Alles wat je\n            wijzigt is eerst een <em>werkversie</em>: bezoekers zien er niets van. Pas de knop{\" \"}\n            <em>Publiceren</em> (rechtsonder) zet het live — en <em>Verwerpen</em> gooit het weg.\n          </p>\n          <p>\n            <strong className=\"text-slate-800\">3 · De rest staat hier.</strong> Nieuwe pagina&apos;s, het\n            menu, foto&apos;s, formulieren{heeftShop ? \", de webwinkel\" : \"\"} en statistieken vind je in\n            de secties hiernaast. Iets kwijt? Druk Ctrl+K (of Cmd+K) en typ wat je zoekt.\n          </p>\n        </div>\n      </Card>\n\n      {/* ── Wacht op jou (7.24) ──\n          Eén tegel met wat er van de beheerder verwacht wordt: wijzigingen die nog niet live staan,\n          nieuwe inzendingen, bestellingen die de deur uit moeten. Dát is waarvoor iemand inlogt;\n          de overzichten hieronder zijn context. Verschijnt alleen als er iets ligt. */}\n      {(() => {\n        const nieuweInzendingen = (formulieren ?? []).reduce((som, f) => som + f.nieuw, 0);\n        const items: { tekst: string; tab: string; tabLabel: string }[] = [];\n        if (nietLive.length > 0) {\n          items.push({\n            tekst: nietLive.length === 1\n              ? `1 pagina heeft wijzigingen die nog niet live staan (${nietLive[0].title ?? nietLive[0].path})`\n              : `${nietLive.length} pagina's hebben wijzigingen die nog niet live staan`,\n            tab: \"pages\",\n            tabLabel: \"Naar Pagina's\",\n          });\n        }\n        if (nieuweInzendingen > 0) {\n          items.push({ tekst: nieuweInzendingen === 1 ? \"1 nieuwe inzending\" : `${nieuweInzendingen} nieuwe inzendingen`, tab: \"forms\", tabLabel: \"Naar Formulieren\" });\n        }\n        if (heeftShop && teVerzenden > 0) {\n          items.push({ tekst: teVerzenden === 1 ? \"1 betaalde bestelling wacht op verzending\" : `${teVerzenden} betaalde bestellingen wachten op verzending`, tab: \"shop\", tabLabel: \"Naar Webwinkel\" });\n        }\n        if (items.length === 0) return null;\n        return (\n          <Card>\n            <h2 className=\"mb-2 text-sm font-semibold text-slate-800\">Wacht op jou</h2>\n            <ul className=\"grid gap-1.5\">\n              {items.map((it) => (\n                <li key={it.tab} className=\"flex flex-wrap items-center justify-between gap-2 rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-900\">\n                  <span>{it.tekst}</span>\n                  <button type=\"button\" onClick={() => gaNaar(it.tab)} className=\"text-xs font-medium text-brand-700 hover:underline\">\n                    {it.tabLabel} →\n                  </button>\n                </li>\n              ))}\n            </ul>\n          </Card>\n        );\n      })()}\n\n      <div className=\"grid gap-4 md:grid-cols-2\">\n        {/* ── Statistieken ── */}\n        <Card>\n          <WidgetKop titel=\"Bezoek deze maand\" tab=\"stats\" tabLabel=\"Statistieken\" />\n          {maand === undefined ? (\n            <p className=\"text-sm text-slate-500\">Laden…</p>\n          ) : maand === null ? (\n            <p className=\"text-sm text-slate-500\">Nog geen bezoekersdata deze maand.</p>\n          ) : (\n            <div className=\"grid gap-4\">\n              {/* Hero-cijfer met context: het totaal leidt, vandaag en de delta lopen mee. */}\n              <div className=\"flex flex-wrap items-baseline gap-x-5 gap-y-1\">\n                <p>\n                  <span className=\"text-3xl font-semibold text-slate-900\">{(maand.total ?? 0).toLocaleString(\"nl-NL\")}</span>{\" \"}\n                  <span className=\"text-xs text-slate-500\">weergaven in {maandLabel(huidigMaandId())}</span>\n                </p>\n                <p>\n                  <span className=\"text-lg font-semibold text-slate-700\">{(dagen[vandaagDag - 1] ?? 0).toLocaleString(\"nl-NL\")}</span>{\" \"}\n                  <span className=\"text-xs text-slate-500\">vandaag</span>\n                </p>\n                {delta != null && Number.isFinite(delta) && (\n                  <p className={`text-xs font-medium ${delta >= 0 ? \"text-emerald-700\" : \"text-red-700\"}`}>\n                    <span aria-hidden=\"true\">{delta >= 0 ? \"▲\" : \"▼\"}</span> {Math.abs(Math.round(delta))}%\n                    <span className=\"font-normal text-slate-500\"> t.o.v. vorige maand</span>\n                  </p>\n                )}\n              </div>\n              <DagStaven\n                waarden={dagen}\n                accentIndex={vandaagDag - 1}\n                hoogte={110}\n                titel={`Weergaven per dag in ${maandLabel(huidigMaandId(), true)}`}\n              />\n              {paden.length > 0 && <BalkjesLijst items={paden} />}\n            </div>\n          )}\n        </Card>\n\n        {/* ── Laatst bewerkte pagina's ── */}\n        <Card>\n          <WidgetKop titel=\"Laatst bewerkt\" tab=\"pages\" tabLabel=\"Pagina's\" />\n          {paginas === null ? (\n            <p className=\"text-sm text-slate-500\">Laden…</p>\n          ) : paginas.length === 0 ? (\n            <p className=\"text-sm text-slate-500\">Nog geen bewerkte pagina&apos;s.</p>\n          ) : (\n            <ul className=\"grid gap-1\">\n              {paginas.map((p) => (\n                <li key={p.id}>\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      vraagOpen(\"pages\", p.id);\n                      gaNaar(\"pages\");\n                    }}\n                    className=\"flex w-full items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-slate-100\"\n                    title={`${p.title ?? p.id} — ${p.path ?? \"\"}`}\n                  >\n                    <span className=\"min-w-0\">\n                      <span className=\"block truncate text-slate-800\">{p.title ?? p.id}</span>\n                      <span className=\"block truncate text-xs text-slate-500\">{p.path}</span>\n                    </span>\n                    <span className=\"shrink-0 text-xs text-slate-500\">{fmtDatum(p.updatedAt)}</span>\n                  </button>\n                </li>\n              ))}\n            </ul>\n          )}\n        </Card>\n\n        {/* ── Bestellingen (alleen met shop) ── */}\n        {heeftShop && (\n          <Card>\n            <WidgetKop titel=\"Laatste bestellingen\" tab=\"shop\" tabLabel=\"Webwinkel\" />\n            {orders === null ? (\n              <p className=\"text-sm text-slate-500\">Laden…</p>\n            ) : orders.length === 0 ? (\n              <p className=\"text-sm text-slate-500\">Nog geen bestellingen.</p>\n            ) : (\n              <ul className=\"grid gap-1\">\n                {orders.map((o) => (\n                  <li key={o.id}>\n                    <button\n                      type=\"button\"\n                      onClick={() => {\n                        vraagOpen(\"shop\", o.id);\n                        gaNaar(\"shop\");\n                      }}\n                      className=\"flex w-full items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-slate-100\"\n                    >\n                      <span className=\"min-w-0\">\n                        <span className=\"block truncate text-slate-800\">{o.customer?.name ?? \"Onbekend\"}</span>\n                        <span className=\"block text-xs text-slate-500\">{fmtDatum(o.createdAt)}</span>\n                      </span>\n                      <span className=\"flex shrink-0 items-center gap-2\">\n                        {typeof o.amount?.totalCents === \"number\" && (\n                          <span className=\"text-sm font-medium text-slate-700\">{formatCents(o.amount.totalCents)}</span>\n                        )}\n                        <Badge tone={ORDER_STATUS_LABELS[o.status ?? \"\"]?.tone ?? \"amber\"}>\n                          {ORDER_STATUS_LABELS[o.status ?? \"\"]?.label ?? o.status ?? \"Onbekend\"}\n                        </Badge>\n                      </span>\n                    </button>\n                  </li>\n                ))}\n              </ul>\n            )}\n          </Card>\n        )}\n\n        {/* ── Formulieren ── */}\n        <Card>\n          <WidgetKop titel=\"Formulieren\" tab=\"forms\" tabLabel=\"Formulieren\" />\n          {formulieren === null ? (\n            <p className=\"text-sm text-slate-500\">Laden…</p>\n          ) : formulieren.length === 0 ? (\n            <p className=\"text-sm text-slate-500\">Nog geen formulieren.</p>\n          ) : (\n            <ul className=\"grid gap-1\">\n              {[...formulieren].sort((a, b) => b.nieuw - a.nieuw).slice(0, 4).map((f) => (\n                <li key={f.id}>\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      vraagOpen(\"forms\", f.id);\n                      gaNaar(\"forms\");\n                    }}\n                    className=\"flex w-full items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-slate-100\"\n                  >\n                    <span className=\"truncate text-slate-800\" title={f.name}>{f.name}</span>\n                    <span className=\"shrink-0 text-xs text-slate-500\">\n                      {f.aantal} {f.aantal === 1 ? \"inzending\" : \"inzendingen\"}\n                      {f.laatste ? ` · laatste ${fmtDatum(f.laatste)}` : \"\"}\n                    </span>\n                  </button>\n                </li>\n              ))}\n            </ul>\n          )}\n        </Card>\n\n        {/* ── Snelkoppelingen ── */}\n        <Card>\n          <div className=\"mb-3 flex items-center justify-between gap-2\">\n            <h2 className=\"text-sm font-semibold text-slate-800\">Snelkoppelingen</h2>\n            {magInstellen && linksBewerken === null && (\n              <Button variant=\"secondary\" size=\"sm\" onClick={() => setLinksBewerken(links.length ? [...links] : [{ label: \"\", href: \"\" }])}>\n                Instellen\n              </Button>\n            )}\n          </div>\n          {linksBewerken ? (\n            <div className=\"grid gap-2\">\n              <div className=\"grid grid-cols-[1fr_1.4fr_auto] gap-2 text-xs font-medium text-slate-500\">\n                <span>Naam</span>\n                <span>Adres</span>\n                <span aria-hidden=\"true\" />\n              </div>\n              {linksBewerken.map((l, i) => (\n                <div key={i} className=\"grid grid-cols-[1fr_1.4fr_auto] gap-2\">\n                  <Input value={l.label} placeholder=\"bv. Webwinkel\" aria-label=\"Naam van de snelkoppeling\"\n                    onChange={(e) => setLinksBewerken(linksBewerken.map((x, j) => (j === i ? { ...x, label: e.target.value } : x)))} />\n                  <Input value={l.href} placeholder=\"/webwinkel of https://…\" aria-label=\"Adres van de snelkoppeling\"\n                    onChange={(e) => setLinksBewerken(linksBewerken.map((x, j) => (j === i ? { ...x, href: e.target.value } : x)))} />\n                  <Button variant=\"ghost\" size=\"sm\" aria-label=\"Verwijderen\"\n                    onClick={() => setLinksBewerken(linksBewerken.filter((_, j) => j !== i))}>✕</Button>\n                </div>\n              ))}\n              <div className=\"flex items-center justify-between gap-2\">\n                <Button variant=\"secondary\" size=\"sm\" disabled={linksBewerken.length >= 12}\n                  onClick={() => setLinksBewerken([...linksBewerken, { label: \"\", href: \"\" }])}>\n                  + Snelkoppeling\n                </Button>\n                <div className=\"flex gap-2\">\n                  <Button variant=\"secondary\" size=\"sm\" onClick={() => setLinksBewerken(null)}>Annuleren</Button>\n                  <Button loading={linksOpslaan} size=\"sm\" disabled={linksOpslaan} onClick={() => void slaLinksOp()}>\n                    {\"Opslaan\"}\n                  </Button>\n                </div>\n              </div>\n            </div>\n          ) : links.length === 0 ? (\n            <p className=\"text-sm text-slate-500\">\n              {magInstellen\n                ? \"Nog geen snelkoppelingen. Zet hier de plekken waar je vaak moet zijn — je webwinkel, een pagina, een extern systeem.\"\n                : \"Nog geen snelkoppelingen ingesteld.\"}\n            </p>\n          ) : (\n            <ul className=\"flex flex-wrap gap-2\">\n              {links.map((l, i) => (\n                <li key={i}>\n                  <a\n                    href={l.href}\n                    target={/^https?:\\/\\//i.test(l.href) ? \"_blank\" : undefined}\n                    rel=\"noreferrer\"\n                    className=\"inline-flex items-center gap-1.5 rounded-lg border border-slate-200 px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-100\"\n                  >\n                    {l.label} <span aria-hidden=\"true\" className=\"text-slate-500\">↗</span>\n                  </a>\n                </li>\n              ))}\n            </ul>\n          )}\n        </Card>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/editors/RichTextEditor.d.ts

@@ -1,7 +1,8 @@
 /**
- * WYSIWYG-editor (TipTap) met opmaak én afbeeldingen. Output wordt client-side met DOMPurify
- * gesanitized voor preview/opslag; de server sanitized nogmaals bij publiceren (server/sanitize.ts)
- * — nooit op de client vertrouwen. Geef `siteId` mee om afbeeldingen te kunnen uploaden/invoegen.
+ * WYSIWYG-editor (TipTap) met opmaak én afbeeldingen — de jas voor het beheer, met vaste werkbalk.
+ * De kern (extensies, slash-menu, selectie-werkbalk, foto's plakken/slepen, dialogen) zit in
+ * `useRijkeTekst` en is dezelfde als bij bewerken op de site (`InlineRijkeTekst`).
+ * Geef `siteId` mee om afbeeldingen te kunnen uploaden/invoegen.
  */
 export declare function RichTextEditor({ value, onChange, siteId, }: {
     value: string;

package/dist/admin/editors/RichTextEditor.js

@@ -1,61 +1,27 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEditor, EditorContent } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import { TableKit } from "@tiptap/extension-table";
-import Link from "@tiptap/extension-link";
-import Image from "@tiptap/extension-image";
-import DOMPurify from "dompurify";
+import { EditorContent } from "@tiptap/react";
 import { useCallback, useEffect } from "react";
-import { cn } from "../ui/cn.js";
 import { MediaPickerButton } from "../media/MediaPicker.js";
-import { FontSize, FONT_SIZES } from "./fontSizeExtension.js";
+import { FONT_SIZES } from "./fontSizeExtension.js";
+import { RteKnop as Btn, useRijkeTekst, zonderLegeStaart } from "./useRijkeTekst.js";
 function RichTextEditor({
   value,
   onChange,
   siteId
 }) {
-  const editor = useEditor({
-    immediatelyRender: false,
-    extensions: [
-      // Tiptap 3 bundelt Link en Underline IN StarterKit. Los toevoegen geeft dubbele
-      // extensienamen (en stille gedragsfouten), dus: Underline komt uit StarterKit, en zijn Link
-      // zetten we uit omdat we die hieronder zelf configureren (geen open-on-click, eigen rel).
-      StarterKit.configure({ heading: { levels: [2, 3, 4] }, link: false }),
-      FontSize,
-      // Zonder deze extensie gooit TipTap een <table> bij het inladen weg (onbekende node) — een
-      // tabel uit de seed of een import overleefde dan geen enkele bewerking van dat blok.
-      TableKit.configure({ table: { resizable: false } }),
-      Link.configure({ openOnClick: false, autolink: true, HTMLAttributes: { rel: "noopener noreferrer nofollow" } }),
-      Image.configure({ inline: false, allowBase64: false, HTMLAttributes: { loading: "lazy", decoding: "async" } })
-    ],
-    content: value || "<p></p>",
-    onUpdate: ({ editor: editor2 }) => onChange(DOMPurify.sanitize(editor2.getHTML())),
-    editorProps: {
-      attributes: { class: "min-h-[8rem] rounded-b-lg border border-t-0 border-slate-300 bg-white p-3 text-sm" }
-    }
+  const { editor, overlays, openLink: setLink } = useRijkeTekst({
+    value,
+    onChange,
+    siteId,
+    editorClass: "xicms-richtext-editor min-h-[8rem] rounded-b-lg border border-t-0 border-slate-300 bg-white p-3 text-sm"
   });
   useEffect(() => {
     if (!editor || editor.isFocused) return;
-    const current = editor.getHTML();
+    const current = zonderLegeStaart(editor.getHTML()) || "<p></p>";
     const next = value || "<p></p>";
     if (current !== next) editor.commands.setContent(next, { emitUpdate: false });
   }, [value, editor]);
-  const setLink = useCallback(() => {
-    if (!editor) return;
-    const prev = editor.getAttributes("link").href;
-    const url = window.prompt("Link-URL (leeg = verwijderen)", prev ?? "https://");
-    if (url === null) return;
-    if (url === "") editor.chain().focus().extendMarkRange("link").unsetLink().run();
-    else editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-  }, [editor]);
-  const insertImageByUrl = useCallback(() => {
-    if (!editor) return;
-    const url = window.prompt("Afbeeldings-URL (https)");
-    if (!url) return;
-    const alt = window.prompt("Beschrijving (alt-tekst, voor toegankelijkheid)") ?? "";
-    editor.chain().focus().setImage({ src: url, alt }).run();
-  }, [editor]);
   const setFontSize = useCallback(
     (value2) => {
       if (!editor) return;
@@ -64,20 +30,6 @@ function RichTextEditor({
     [editor]
   );
   if (!editor) return null;
-  const Btn = ({ on, active, label, title }) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      title,
-      onMouseDown: (e) => e.preventDefault(),
-      onClick: on,
-      className: cn(
-        "h-8 min-w-8 rounded px-2 text-sm hover:bg-slate-100",
-        active && "bg-slate-200 font-semibold"
-      ),
-      children: label
-    }
-  );
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1 rounded-t-lg border border-slate-300 bg-slate-50 p-1", children: [
       /* @__PURE__ */ jsx(Btn, { on: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), label: "B", title: "Vet" }),
@@ -109,10 +61,17 @@ function RichTextEditor({
           variant: "ghost",
           onSelect: (m) => editor.chain().focus().setImage({ src: m.url, alt: m.alt ?? "" }).run()
         }
-      ),
-      /* @__PURE__ */ jsx(Btn, { on: insertImageByUrl, label: "\u{1F5BC} URL", title: "Externe afbeelding via URL invoegen" })
+      )
+    ] }),
+    /* @__PURE__ */ jsx(EditorContent, { editor }),
+    /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-slate-500", children: [
+      "Tip: typ ",
+      /* @__PURE__ */ jsx("kbd", { className: "rounded border border-slate-300 px-1", children: "/" }),
+      " voor koppen, lijsten, tabellen",
+      siteId ? " en foto's \u2014 of sleep een foto erin" : "",
+      "."
     ] }),
-    /* @__PURE__ */ jsx(EditorContent, { editor })
+    overlays
   ] });
 }
 export {