@xiwebdesign/xicms-core 7.31.0 → 8.16.0

package/dist/admin/shop/ProductsTab.js

@@ -14,10 +14,14 @@ import { Badge, Button, Card, Field, Input, Textarea } from "../ui/primitives.js
 import { Select } from "../ui/select.js";
 import { Switch } from "../ui/switch.js";
 import { useToast } from "../ui/toast.js";
+import { FoutMelding } from "../ui/LaadStaat.js";
+import { useScrollNaarDetail } from "../lib/scrollNaarDetail.js";
+import { heeftOnopgeslagen, ONOPGESLAGEN_VRAAG, useOnopgeslagen, vergeetOnopgeslagen } from "../lib/onopgeslagen.js";
 import { useConfirm } from "../ui/ConfirmDialog.js";
 import { MediaPickerButton } from "../media/MediaPicker.js";
 import { slugify } from "../lib/slugify.js";
 import { allVariantKeys, centsToEuroInput, eurosToCents } from "./lib.js";
+import { zodFoutTekst } from "../lib/zodFout.js";
 const STATUS_OPTIONS = [
   { value: "draft", label: "Concept" },
   { value: "active", label: "Actief" },
@@ -30,24 +34,29 @@ function ProductsTab({ siteId }) {
   const [cats, setCats] = useState([]);
   const [selected, setSelected] = useState(null);
   const [q, setQ] = useState("");
+  const [laadFout, setLaadFout] = useState(null);
+  const [poging, setPoging] = useState(0);
   useEffect(() => {
     const db = getDb();
     if (!db) return;
+    const fout = (e) => setLaadFout(e.message);
     const un1 = onSnapshot(
       collection(db, "sites", siteId, "products"),
       (snap) => setProducts(
         snap.docs.map((d) => ({ id: d.id, ...saneerProductDoc(d.data()) })).sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.name.localeCompare(b.name, "nl"))
-      )
+      ),
+      fout
     );
     const un2 = onSnapshot(
       collection(db, "sites", siteId, "shopCategories"),
-      (snap) => setCats(snap.docs.map((d) => ({ id: d.id, ...d.data() })))
+      (snap) => setCats(snap.docs.map((d) => ({ id: d.id, ...d.data() }))),
+      fout
     );
     return () => {
       un1();
       un2();
     };
-  }, [siteId]);
+  }, [siteId, poging]);
   async function createProduct() {
     const nieuw = {
       name: "Nieuw product",
@@ -78,6 +87,19 @@ function ProductsTab({ siteId }) {
     return products.filter((p) => p.name.toLowerCase().includes(needle) || p.slug.includes(needle));
   }, [products, q]);
   const current = products.find((p) => p.id === selected) ?? null;
+  const detailRef = useScrollNaarDetail(selected);
+  async function kies(id) {
+    if (id === selected) return;
+    if (heeftOnopgeslagen()) {
+      if (!await confirm(ONOPGESLAGEN_VRAAG)) return;
+      vergeetOnopgeslagen();
+    }
+    setSelected(id);
+  }
+  if (laadFout) return /* @__PURE__ */ jsx(FoutMelding, { wat: "de producten", detail: laadFout, opnieuw: () => {
+    setLaadFout(null);
+    setPoging((n) => n + 1);
+  } });
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-[300px_1fr]", children: [
     /* @__PURE__ */ jsxs(Card, { className: "h-fit", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
@@ -89,7 +111,7 @@ function ProductsTab({ siteId }) {
         filtered.map((p) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
           "button",
           {
-            onClick: () => setSelected(p.id),
+            onClick: () => void kies(p.id),
             className: `flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm ${p.id === selected ? "bg-brand-50 text-brand-700" : "hover:bg-slate-100"}`,
             children: [
               p.images?.[0] && /* @__PURE__ */ jsx("img", { src: p.images[0], alt: "", className: "h-8 w-8 rounded object-cover" }),
@@ -97,7 +119,7 @@ function ProductsTab({ siteId }) {
                 /* @__PURE__ */ jsx("span", { className: "block truncate", children: p.name }),
                 (() => {
                   const cat = cats.find((c) => c.id === (p.categoryIds ?? [])[0]);
-                  return cat ? /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-slate-400", children: cat.name }) : null;
+                  return cat ? /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-slate-500", children: cat.name }) : null;
                 })()
               ] }),
               (() => {
@@ -117,7 +139,7 @@ function ProductsTab({ siteId }) {
         filtered.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-slate-500", children: "Geen producten." })
       ] })
     ] }),
-    current ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { ref: detailRef, className: "scroll-mt-24 min-w-0", children: current ? /* @__PURE__ */ jsx(
       ProductForm,
       {
         siteId,
@@ -129,7 +151,7 @@ function ProductsTab({ siteId }) {
         confirm
       },
       current.id
-    ) : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Selecteer of maak een product." }) })
+    ) : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Selecteer of maak een product." }) }) })
   ] });
 }
 function voorraadStand(p) {
@@ -149,12 +171,7 @@ function ProductForm({
 }) {
   const [def, setDef] = useState(product);
   const vuil = JSON.stringify(def) !== JSON.stringify(product);
-  useEffect(() => {
-    if (!vuil) return;
-    const waarschuw = (e) => e.preventDefault();
-    window.addEventListener("beforeunload", waarschuw);
-    return () => window.removeEventListener("beforeunload", waarschuw);
-  }, [vuil]);
+  useOnopgeslagen(vuil);
   const [priceInput, setPriceInput] = useState(centsToEuroInput(product.priceCents));
   const [compareInput, setCompareInput] = useState(centsToEuroInput(product.compareAtCents));
   const variantKeys = useMemo(() => allVariantKeys(def.options ?? []), [def.options]);
@@ -219,7 +236,7 @@ function ProductForm({
       personalization: cleanPersonalization.length > 0 ? cleanPersonalization : void 0
     });
     if (!parsed.success) {
-      onToast({ title: "Ongeldig product", description: parsed.error.issues[0]?.message, tone: "error" });
+      onToast({ title: "Ongeldig product", description: zodFoutTekst(parsed.error.issues[0]), tone: "error" });
       return;
     }
     await saveProductDoc(siteId, product.id, parsed.data);
@@ -244,7 +261,7 @@ function ProductForm({
           onChange: (e) => setDef((p) => ({ ...p, name: e.target.value, slug: slugify(e.target.value) || p.slug }))
         }
       ) }),
-      /* @__PURE__ */ jsx(Field, { label: "Slug", hint: "Product-URL: /product?p=<slug>", children: /* @__PURE__ */ jsx(Input, { value: def.slug, onChange: (e) => setDef((p) => ({ ...p, slug: slugify(e.target.value) })) }) })
+      /* @__PURE__ */ jsx(Field, { label: "Adresnaam", hint: "Het stukje in het webadres van dit product (alleen kleine letters en streepjes).", children: /* @__PURE__ */ jsx(Input, { value: def.slug, onChange: (e) => setDef((p) => ({ ...p, slug: slugify(e.target.value) })) }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-3", children: [
       /* @__PURE__ */ jsx(Field, { label: "Prijs (\u20AC, incl. btw)", children: /* @__PURE__ */ jsx(
@@ -389,7 +406,7 @@ function ProductForm({
                 }
               ),
               "Elke waarde een eigen foto",
-              /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: "\u2014 het hoofdbeeld wisselt mee met deze keuze" })
+              /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: "\u2014 het hoofdbeeld wisselt mee met deze keuze" })
             ] }),
             optieHeeftBeeldPerWaarde(opt) && opt.values.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: opt.values.map((value) => {
               const url = opt.images?.[value];
@@ -409,7 +426,7 @@ function ProductForm({
                   {
                     type: "button",
                     "aria-label": `Verwijder foto van ${value}`,
-                    className: "text-slate-400 hover:text-slate-700",
+                    className: "text-slate-500 hover:text-slate-700",
                     onClick: () => {
                       const images = { ...opt.images ?? {} };
                       delete images[value];
@@ -450,6 +467,8 @@ function ProductForm({
             "input",
             {
               className: "w-24 rounded-lg border border-slate-200 px-2 py-1",
+              "aria-label": `Prijs ${key.split("|").join(" ")}`,
+              inputMode: "decimal",
               placeholder: centsToEuroInput(def.priceCents),
               defaultValue: centsToEuroInput(v?.priceCents),
               onChange: (e) => {
@@ -462,6 +481,7 @@ function ProductForm({
             "input",
             {
               className: "w-20 rounded-lg border border-slate-200 px-2 py-1",
+              "aria-label": `Voorraad ${key.split("|").join(" ")}`,
               type: "number",
               min: 0,
               placeholder: "\u221E",
@@ -476,12 +496,13 @@ function ProductForm({
             "input",
             {
               className: "w-28 rounded-lg border border-slate-200 px-2 py-1",
+              "aria-label": `Artikelnummer ${key.split("|").join(" ")}`,
               placeholder: "\u2014",
               defaultValue: v?.sku ?? "",
               onChange: (e) => patchVariant(key, { sku: e.target.value.trim() || void 0 })
             }
           ) }),
-          /* @__PURE__ */ jsx("td", { className: "py-1 pr-2", children: /* @__PURE__ */ jsx(Switch, { checked: v?.active !== false, onCheckedChange: (on) => patchVariant(key, { active: on }) }) })
+          /* @__PURE__ */ jsx("td", { className: "py-1 pr-2", children: /* @__PURE__ */ jsx(Switch, { checked: v?.active !== false, onCheckedChange: (on) => patchVariant(key, { active: on }), label: `${key.split("|").join(" ")} leverbaar`, labelVerborgen: true }) })
         ] }, key);
       }) })
     ] }) }) }),
@@ -554,7 +575,7 @@ function ProductForm({
                     value: f.maxLength ?? 40,
                     onChange: (e) => setPers({ maxLength: Math.max(1, Math.min(200, Number(e.target.value) || 40)) })
                   }
-                ) : /* @__PURE__ */ jsx("span", { className: "self-center text-xs text-slate-400", children: "jpg/png/webp" }),
+                ) : /* @__PURE__ */ jsx("span", { className: "self-center text-xs text-slate-500", children: "jpg/png/webp" }),
                 /* @__PURE__ */ jsx(
                   "input",
                   {

package/dist/admin/shop/ProductsTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/shop/ProductsTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport { collection, doc, onSnapshot } from \"firebase/firestore\";\nimport { removeProduct, saveProductDoc } from \"./productClient\";\nimport { getDb } from \"../../firebase/client\";\nimport {\n  ProductSchema,\n  formatCents,\n  optieHeeftBeeldPerWaarde,\n  saneerProductDoc,\n  type PersonalizationField,\n  type Product,\n  type ProductOption,\n  type ProductVariant,\n  type ShopCategory,\n} from \"../../schema/shop\";\nimport { Badge, Button, Card, Field, Input, Textarea } from \"../ui/primitives\";\nimport { Select } from \"../ui/select\";\nimport { Switch } from \"../ui/switch\";\nimport { useToast } from \"../ui/toast\";\nimport { useConfirm, type ConfirmOptions } from \"../ui/ConfirmDialog\";\nimport { MediaPickerButton } from \"../media/MediaPicker\";\nimport { slugify } from \"../lib/slugify\";\nimport { allVariantKeys, centsToEuroInput, eurosToCents } from \"./lib\";\n\ntype StoredProduct = Product & { id: string };\ntype StoredCategory = ShopCategory & { id: string };\n\nconst STATUS_OPTIONS = [\n  { value: \"draft\", label: \"Concept\" },\n  { value: \"active\", label: \"Actief\" },\n  { value: \"archived\", label: \"Gearchiveerd\" },\n];\n\nexport function ProductsTab({ siteId }: { siteId: string }) {\n  const { toast } = useToast();\n  const confirm = useConfirm();\n  const [products, setProducts] = useState<StoredProduct[]>([]);\n  const [cats, setCats] = useState<StoredCategory[]>([]);\n  const [selected, setSelected] = useState<string | null>(null);\n  const [q, setQ] = useState(\"\");\n\n  useEffect(() => {\n    const db = getDb();\n    if (!db) return;\n    const un1 = onSnapshot(collection(db, \"sites\", siteId, \"products\"), (snap) =>\n      setProducts(\n        snap.docs\n          // saneerProductDoc: historische docs dragen null-velden (zie schema/shop.ts) — schoon\n          // ze bij het lezen, zodat de form-state ze niet via {...def} opnieuw naar de server lekt.\n          .map((d) => ({ id: d.id, ...saneerProductDoc(d.data() as Product) }))\n          .sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.name.localeCompare(b.name, \"nl\")),\n      ),\n    );\n    const un2 = onSnapshot(collection(db, \"sites\", siteId, \"shopCategories\"), (snap) =>\n      setCats(snap.docs.map((d) => ({ id: d.id, ...(d.data() as ShopCategory) }))),\n    );\n    return () => {\n      un1();\n      un2();\n    };\n  }, [siteId]);\n\n  async function createProduct() {\n    // Ook aanmaken loopt via de callable: een vers product is een draft (onzichtbaar voor de\n    // cache), maar zo staat élke productmutatie in de audit-log en is er één pad i.p.v. twee.\n    const nieuw = {\n      name: \"Nieuw product\",\n      slug: `product-${products.length + 1}`,\n      description: \"\",\n      categoryIds: [],\n      images: [],\n      priceCents: 0,\n      vatRate: 21,\n      options: [],\n      variants: [],\n      trackStock: false,\n      status: \"draft\",\n      order: products.length,\n      featured: false,\n      personalizationEnabled: true,\n    } satisfies Product;\n    try {\n      const id = await saveProductDoc(siteId, undefined, nieuw);\n      setSelected(id);\n    } catch (e) {\n      // Zichtbaar falen: dit gooide een tijdlang stil (unhandled) terwijl de knop gewoon niets\n      // leek te doen — precies de melding \"bij aanmaken product krijg ik iets met permissions\".\n      toast({ title: \"Product aanmaken mislukt\", description: e instanceof Error ? e.message : undefined, tone: \"error\" });\n    }\n  }\n\n  const filtered = useMemo(() => {\n    const needle = q.trim().toLowerCase();\n    if (!needle) return products;\n    return products.filter((p) => p.name.toLowerCase().includes(needle) || p.slug.includes(needle));\n  }, [products, q]);\n\n  const current = products.find((p) => p.id === selected) ?? null;\n\n  return (\n    <div className=\"grid gap-4 md:grid-cols-[300px_1fr]\">\n      <Card className=\"h-fit\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <h3 className=\"text-sm font-semibold\">Producten</h3>\n          <Button size=\"sm\" onClick={createProduct}>+ Nieuw</Button>\n        </div>\n        <Input placeholder=\"Zoeken…\" value={q} onChange={(e) => setQ(e.target.value)} className=\"mb-2\" />\n        <ul className=\"grid max-h-[60vh] gap-1 overflow-y-auto\">\n          {filtered.map((p) => (\n            <li key={p.id}>\n              <button\n                onClick={() => setSelected(p.id)}\n                className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm ${\n                  p.id === selected ? \"bg-brand-50 text-brand-700\" : \"hover:bg-slate-100\"\n                }`}\n              >\n                {p.images?.[0] && <img src={p.images[0]} alt=\"\" className=\"h-8 w-8 rounded object-cover\" />}\n                {/* Categorie erbij: hetzelfde ontwerp bestaat vaak als rompertje, slabbetje én\n                    t-shirt, en dan staat dezelfde naam vijf keer onder elkaar in deze lijst.\n                    Op een eigen regel eronder, want achter de naam is de kolom te smal — dan werd\n                    juist het onderscheidende deel afgekapt (\"Geschapen! — Korte mouw t-s…\"). */}\n                <span className=\"min-w-0 flex-1\">\n                  <span className=\"block truncate\">{p.name}</span>\n                  {(() => {\n                    const cat = cats.find((c) => c.id === (p.categoryIds ?? [])[0]);\n                    return cat ? <span className=\"block truncate text-xs text-slate-400\">{cat.name}</span> : null;\n                  })()}\n                </span>\n                {/* Voorraadsignaal: uitverkocht of bijna op moet je zien zónder elk product te\n                    openen — anders merk je pas bij een bestelling dat er niets meer is. */}\n                {(() => {\n                  const n = voorraadStand(p);\n                  if (n === null) return null;\n                  if (n <= 0) return <Badge tone=\"slate\">uitverkocht</Badge>;\n                  if (n <= 3) return <Badge tone=\"amber\">{n} over</Badge>;\n                  return null;\n                })()}\n                <Badge tone={p.status === \"active\" ? \"green\" : p.status === \"draft\" ? \"amber\" : \"slate\"}>\n                  {STATUS_OPTIONS.find((s) => s.value === p.status)?.label ?? p.status}\n                </Badge>\n              </button>\n            </li>\n          ))}\n          {filtered.length === 0 && <li className=\"px-3 py-2 text-sm text-slate-500\">Geen producten.</li>}\n        </ul>\n      </Card>\n      {current ? (\n        <ProductForm\n          key={current.id}\n          siteId={siteId}\n          product={current}\n          categories={cats}\n          onDeleted={() => setSelected(null)}\n          onDuplicated={(id) => setSelected(id)}\n          onToast={toast}\n          confirm={confirm}\n        />\n      ) : (\n        <Card>\n          <p className=\"text-sm text-slate-500\">Selecteer of maak een product.</p>\n        </Card>\n      )}\n    </div>\n  );\n}\n\n/**\n * Het volledige productformulier. Sinds 7.8 ook buiten dit tabblad in gebruik: het tandwiel bij een\n * product op de pagina opent hetzelfde formulier in een zijpaneel. Bewust hergebruik en geen tweede,\n * uitgeklede versie — twee formulieren voor één product lopen gegarandeerd uit elkaar, en dan hangt\n * het van je route af welke velden je kunt bereiken.\n */\n/**\n * Voorraadstand van een product voor de beheerlijst: het laagste getal dat er te melden valt.\n * `null` = niet bijgehouden of onbeperkt. Zonder opties telt `stock`, met opties de varianten.\n */\nfunction voorraadStand(p: Product): number | null {\n  if (p.trackStock !== true) return null;\n  if ((p.options ?? []).length === 0) return p.stock ?? null;\n  const getallen = (p.variants ?? []).filter((v) => v.stock !== undefined && v.active !== false).map((v) => v.stock as number);\n  return getallen.length > 0 ? Math.min(...getallen) : null;\n}\n\nexport function ProductForm({\n  siteId,\n  product,\n  categories,\n  onDeleted,\n  onDuplicated,\n  onToast,\n  confirm,\n}: {\n  siteId: string;\n  product: StoredProduct;\n  categories: StoredCategory[];\n  onDeleted: () => void;\n  /** Optioneel: na dupliceren de kopie selecteren (het zijpaneel doet dit niet). */\n  onDuplicated?: (id: string) => void;\n  onToast: (t: { title: string; description?: string; tone?: \"default\" | \"success\" | \"error\" }) => void;\n  confirm: (opts: ConfirmOptions) => Promise<boolean>;\n}) {\n  const [def, setDef] = useState<Product>(product);\n  /**\n   * Waarschuwen bij niet-opgeslagen werk (7.18). Het formulier heeft geen autosave (een product\n   * gaat meteen live), dus wie naar een ander product klikte of het tabblad sloot, was zijn\n   * wijzigingen kwijt zonder enige melding.\n   */\n  const vuil = JSON.stringify(def) !== JSON.stringify(product);\n  useEffect(() => {\n    if (!vuil) return;\n    const waarschuw = (e: BeforeUnloadEvent) => e.preventDefault();\n    window.addEventListener(\"beforeunload\", waarschuw);\n    return () => window.removeEventListener(\"beforeunload\", waarschuw);\n  }, [vuil]);\n  const [priceInput, setPriceInput] = useState(centsToEuroInput(product.priceCents));\n  const [compareInput, setCompareInput] = useState(centsToEuroInput(product.compareAtCents));\n\n  const variantKeys = useMemo(() => allVariantKeys(def.options ?? []), [def.options]);\n\n  function setOption(i: number, patch: Partial<ProductOption>) {\n    setDef((p) => {\n      const options = [...(p.options ?? [])];\n      options[i] = { ...options[i], ...patch };\n      return { ...p, options };\n    });\n  }\n\n  /**\n   * Zet \"eigen foto per waarde\" op één as. Bewust exclusief: het hoofdbeeld op de detailpagina kan\n   * maar één keuze volgen, dus aanzetten op de ene as zet hem uit op de andere. Zonder die regel\n   * krijg je een product waarbij niemand kan uitleggen welke foto er verschijnt.\n   *\n   * De vlag wordt op ALLE assen expliciet gezet (ook de uitgezette), zodat de oude naamregel niet\n   * alsnog een tweede as aan het beeld hangt.\n   */\n  function zetBeeldAs(index: number, aan: boolean) {\n    setDef((p) => ({\n      ...p,\n      options: (p.options ?? []).map((o, j) => ({ ...o, imagePerValue: j === index ? aan : false })),\n    }));\n  }\n\n  function variantFor(key: string): ProductVariant | undefined {\n    return (def.variants ?? []).find((v) => v.key === key);\n  }\n\n  function patchVariant(key: string, patch: Partial<ProductVariant>) {\n    setDef((p) => {\n      const variants = [...(p.variants ?? [])];\n      const idx = variants.findIndex((v) => v.key === key);\n      if (idx >= 0) variants[idx] = { ...variants[idx], ...patch };\n      else variants.push({ key, active: true, ...patch });\n      return { ...p, variants };\n    });\n  }\n\n  /** Kopie van dit product maken (nieuwe slug + \"(kopie)\"), als concept zodat je rustig aanpast. */\n  async function dupliceer() {\n    try {\n      const kopie: Product = {\n        ...def,\n        name: `${def.name} (kopie)`,\n        slug: `${def.slug}-kopie`.slice(0, 120),\n        status: \"draft\",\n        order: (def.order ?? 0) + 1,\n      };\n      const id = await saveProductDoc(siteId, undefined, kopie);\n      onToast({ title: \"Product gedupliceerd\", description: \"De kopie staat als concept klaar.\", tone: \"success\" });\n      onDuplicated?.(id);\n    } catch (e) {\n      onToast({ title: \"Dupliceren mislukt\", description: e instanceof Error ? e.message : undefined, tone: \"error\" });\n    }\n  }\n\n  async function save() {\n    const db = getDb();\n    if (!db) return;\n    // Alleen varianten bewaren die iets toevoegen (afwijkende prijs/voorraad/sku of inactief),\n    // en geen wees-varianten van verwijderde optiewaarden.\n    const validKeys = new Set(variantKeys);\n    const cleanVariants = (def.variants ?? []).filter(\n      (v) =>\n        validKeys.has(v.key) &&\n        (v.priceCents !== undefined || v.stock !== undefined || v.sku !== undefined || v.active === false),\n    );\n    // Onvolledige personalisatie-regels (zonder label) niet opslaan.\n    const cleanPersonalization = (def.personalization ?? []).filter((f) => f.label.trim().length > 0);\n    /**\n     * Wees-foto's opruimen, net als bij de varianten hierboven: hernoem of verwijder je een\n     * optiewaarde, dan bleef de foto onder de oude naam in het document staan. Onzichtbaar, nooit\n     * meer getoond, en hij dook weer op zodra iemand toevallig dezelfde waarde opnieuw typte.\n     * Alleen de foto's van waarden die nog bestaan blijven over; staat het vinkje uit, dan laten\n     * we ze met rust, zodat weer aanzetten je werk teruggeeft.\n     */\n    const cleanOptions = (def.options ?? []).map((o) => {\n      if (!o.images || !optieHeeftBeeldPerWaarde(o)) return o;\n      const images = Object.fromEntries(Object.entries(o.images).filter(([waarde]) => o.values.includes(waarde)));\n      return { ...o, images: Object.keys(images).length > 0 ? images : undefined };\n    });\n    const parsed = ProductSchema.safeParse({\n      ...def,\n      options: cleanOptions,\n      variants: cleanVariants,\n      personalization: cleanPersonalization.length > 0 ? cleanPersonalization : undefined,\n    });\n    if (!parsed.success) {\n      onToast({ title: \"Ongeldig product\", description: parsed.error.issues[0]?.message, tone: \"error\" });\n      return;\n    }\n    // Via de callable (7.9): de server valideert, auditeert en — belangrijker — pingt de\n    // products-cachetag, zodat de wijziging ook op de LIVE shoppagina's staat en niet alleen in\n    // Firestore. Zie productClient.ts, ook voor de terugval op een oudere backend.\n    await saveProductDoc(siteId, product.id, parsed.data);\n    onToast({ title: \"Product opgeslagen\", tone: \"success\" });\n  }\n\n  async function remove() {\n    const ok = await confirm({\n      title: `\"${product.name}\" verwijderen?`,\n      description: \"Bestaande bestellingen behouden hun eigen kopie van naam en prijs.\",\n      tone: \"danger\",\n    });\n    if (!ok) return;\n    await removeProduct(siteId, product.id);\n    onDeleted();\n  }\n\n  return (\n    <Card>\n      <div className=\"grid gap-4\">\n        <div className=\"grid gap-4 md:grid-cols-2\">\n          <Field label=\"Naam\">\n            <Input\n              value={def.name}\n              onChange={(e) => setDef((p) => ({ ...p, name: e.target.value, slug: slugify(e.target.value) || p.slug }))}\n            />\n          </Field>\n          <Field label=\"Slug\" hint=\"Product-URL: /product?p=<slug>\">\n            <Input value={def.slug} onChange={(e) => setDef((p) => ({ ...p, slug: slugify(e.target.value) }))} />\n          </Field>\n        </div>\n\n        <div className=\"grid gap-4 md:grid-cols-3\">\n          <Field label=\"Prijs (€, incl. btw)\">\n            <Input\n              value={priceInput}\n              onChange={(e) => {\n                setPriceInput(e.target.value);\n                const c = eurosToCents(e.target.value);\n                if (c !== null) setDef((p) => ({ ...p, priceCents: c }));\n              }}\n            />\n          </Field>\n          <Field label=\"Van-prijs (€, optioneel)\" hint=\"Doorgestreept naast de prijs\">\n            <Input\n              value={compareInput}\n              onChange={(e) => {\n                setCompareInput(e.target.value);\n                const c = eurosToCents(e.target.value);\n                setDef((p) => ({ ...p, compareAtCents: c ?? undefined }));\n              }}\n            />\n          </Field>\n          <Field label=\"Btw-tarief\">\n            <Select\n              value={String(def.vatRate ?? 21)}\n              onValueChange={(v) => setDef((p) => ({ ...p, vatRate: Number(v) as 21 | 9 | 0 }))}\n              options={[\n                { value: \"21\", label: \"21%\" },\n                { value: \"9\", label: \"9%\" },\n                { value: \"0\", label: \"0%\" },\n              ]}\n            />\n          </Field>\n        </div>\n\n        <Field label=\"Omschrijving\">\n          <Textarea rows={4} value={def.description ?? \"\"} onChange={(e) => setDef((p) => ({ ...p, description: e.target.value }))} />\n        </Field>\n\n        <Field label=\"Afbeeldingen\" hint=\"Eerste afbeelding is het hoofdbeeld\">\n          <div className=\"flex flex-wrap items-center gap-3\">\n            {(def.images ?? []).map((url, i) => (\n              <div key={url + i} className=\"relative\">\n                <img src={url} alt=\"\" className={`h-16 w-16 rounded-lg object-cover ${i === 0 ? \"ring-2 ring-brand-500\" : \"\"}`} />\n                {i === 0 && (\n                  <span className=\"absolute -bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-brand-500 px-1.5 text-[10px] text-white\">hoofd</span>\n                )}\n                <button\n                  type=\"button\"\n                  aria-label=\"Verwijder afbeelding\"\n                  className=\"absolute -right-2 -top-2 grid h-5 w-5 place-items-center rounded-full bg-slate-700 text-xs text-white\"\n                  onClick={() => setDef((p) => ({ ...p, images: (p.images ?? []).filter((_, j) => j !== i) }))}\n                >\n                  ✕\n                </button>\n                {/* Herschikken: de eerste afbeelding is het hoofdbeeld, en dat was alleen te\n                    veranderen door alles te wissen en opnieuw te kiezen. */}\n                {i > 0 && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Naar voren verplaatsen\"\n                    title={i === 1 ? \"Maak hoofdbeeld\" : \"Naar voren\"}\n                    className=\"absolute -left-2 -top-2 grid h-5 w-5 place-items-center rounded-full bg-slate-700 text-xs text-white\"\n                    onClick={() =>\n                      setDef((p) => {\n                        const imgs = [...(p.images ?? [])];\n                        [imgs[i - 1], imgs[i]] = [imgs[i], imgs[i - 1]];\n                        return { ...p, images: imgs };\n                      })\n                    }\n                  >\n                    ←\n                  </button>\n                )}\n              </div>\n            ))}\n            <MediaPickerButton\n              siteId={siteId}\n              label=\"+ Afbeelding\"\n              onSelect={(m) => setDef((p) => ({ ...p, images: [...(p.images ?? []), m.url] }))}\n            />\n          </div>\n        </Field>\n\n        <Field label=\"Categorieën\">\n          <div className=\"flex flex-wrap gap-2\">\n            {categories.map((c) => {\n              const on = (def.categoryIds ?? []).includes(c.id);\n              return (\n                <button\n                  key={c.id}\n                  type=\"button\"\n                  onClick={() =>\n                    setDef((p) => ({\n                      ...p,\n                      categoryIds: on ? (p.categoryIds ?? []).filter((x) => x !== c.id) : [...(p.categoryIds ?? []), c.id],\n                    }))\n                  }\n                  className={`rounded-full border px-3 py-1 text-sm ${\n                    on ? \"border-brand-500 bg-brand-50 text-brand-700\" : \"border-slate-200 hover:bg-slate-50\"\n                  }`}\n                >\n                  {on ? \"✓ \" : \"\"}\n                  {c.name}\n                </button>\n              );\n            })}\n            {categories.length === 0 && <span className=\"text-sm text-slate-500\">Maak eerst een categorie aan.</span>}\n          </div>\n        </Field>\n\n        {/* Opties & varianten */}\n        <Field\n          label=\"Opties (bv. Maat, Kleur)\"\n          hint=\"Max. 3. Waarden gescheiden door komma's. Combinaties kun je hieronder per stuk aanpassen.\"\n        >\n          <div className=\"grid gap-2\">\n            {(def.options ?? []).map((opt, i) => (\n              <div key={i} className=\"grid gap-2 rounded-lg border border-slate-100 p-2\">\n                <div className=\"flex items-center gap-2\">\n                  <Input\n                    className=\"w-36\"\n                    placeholder=\"Naam (bv. Maat)\"\n                    value={opt.name}\n                    onChange={(e) => setOption(i, { name: e.target.value })}\n                  />\n                  <Input\n                    placeholder=\"Waarden, bv: 56, 62, 68, 74\"\n                    value={opt.values.join(\", \")}\n                    onChange={(e) =>\n                      setOption(i, { values: e.target.value.split(\",\").map((s) => s.trim()).filter(Boolean) })\n                    }\n                  />\n                  <Button\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    onClick={() => setDef((p) => ({ ...p, options: (p.options ?? []).filter((_, j) => j !== i) }))}\n                  >\n                    ✕\n                  </Button>\n                </div>\n                {/*\n                  Foto per waarde (5.6, instelbaar sinds 7.23). Tot 7.23 hing dit aan de naam van\n                  de as: alleen \"Kleur\" kreeg fotoknoppen. Dat brak zodra iemand zijn as \"Print\" of\n                  \"Dessin\" noemde, en hernoemen liet de foto's onzichtbaar achter. Nu is het een\n                  vinkje, en het staat op élke as — met de oude naamregel als beginstand, zodat\n                  bestaande producten er hetzelfde bijstaan.\n                */}\n                <label className=\"flex w-fit items-center gap-2 text-xs text-slate-600\">\n                  <input\n                    type=\"checkbox\"\n                    checked={optieHeeftBeeldPerWaarde(opt)}\n                    onChange={(e) => zetBeeldAs(i, e.target.checked)}\n                  />\n                  Elke waarde een eigen foto\n                  <span className=\"text-slate-400\">— het hoofdbeeld wisselt mee met deze keuze</span>\n                </label>\n                {optieHeeftBeeldPerWaarde(opt) && opt.values.length > 0 && (\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    {opt.values.map((value) => {\n                      const url = opt.images?.[value];\n                      return (\n                        <span key={value} className=\"flex items-center gap-1 rounded-full border border-slate-200 px-2 py-1 text-xs\">\n                          {url && <img src={url} alt=\"\" className=\"h-6 w-6 rounded object-cover\" />}\n                          {value}\n                          <MediaPickerButton\n                            siteId={siteId}\n                            label={url ? \"↻\" : \"+ foto\"}\n                            onSelect={(m) =>\n                              setOption(i, { images: { ...(opt.images ?? {}), [value]: m.url } })\n                            }\n                          />\n                          {url && (\n                            <button\n                              type=\"button\"\n                              aria-label={`Verwijder foto van ${value}`}\n                              className=\"text-slate-400 hover:text-slate-700\"\n                              onClick={() => {\n                                const images = { ...(opt.images ?? {}) };\n                                delete images[value];\n                                setOption(i, { images });\n                              }}\n                            >\n                              ✕\n                            </button>\n                          )}\n                        </span>\n                      );\n                    })}\n                  </div>\n                )}\n              </div>\n            ))}\n            {(def.options ?? []).length < 3 && (\n              <Button\n                size=\"sm\"\n                variant=\"secondary\"\n                className=\"w-fit\"\n                onClick={() => setDef((p) => ({ ...p, options: [...(p.options ?? []), { name: \"\", values: [] }] }))}\n              >\n                + Optie\n              </Button>\n            )}\n          </div>\n        </Field>\n\n        {variantKeys.length > 0 && variantKeys.length <= 60 && (\n          <Field label=\"Varianten\" hint=\"Leeg = standaardprijs / onbeperkte voorraad\">\n            <div className=\"overflow-x-auto\">\n              <table className=\"w-full text-sm\">\n                <thead>\n                  <tr className=\"text-left text-xs text-slate-500\">\n                    <th className=\"py-1 pr-2\">Combinatie</th>\n                    <th className=\"py-1 pr-2\">Prijs (€)</th>\n                    {def.trackStock && <th className=\"py-1 pr-2\">Voorraad</th>}\n                    <th className=\"py-1 pr-2\">Artikelnr.</th>\n                    <th className=\"py-1 pr-2\">Leverbaar</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  {variantKeys.map((key) => {\n                    const v = variantFor(key);\n                    return (\n                      <tr key={key} className=\"border-t border-slate-100\">\n                        <td className=\"py-1 pr-2\">{key.split(\"|\").join(\" · \")}</td>\n                        <td className=\"py-1 pr-2\">\n                          {/* Native uncontrolled inputs: geen cursor-gedoe bij \"13,\" tijdens typen. */}\n                          <input\n                            className=\"w-24 rounded-lg border border-slate-200 px-2 py-1\"\n                            placeholder={centsToEuroInput(def.priceCents)}\n                            defaultValue={centsToEuroInput(v?.priceCents)}\n                            onChange={(e) => {\n                              const c = eurosToCents(e.target.value);\n                              patchVariant(key, { priceCents: c ?? undefined });\n                            }}\n                          />\n                        </td>\n                        {def.trackStock && (\n                          <td className=\"py-1 pr-2\">\n                            <input\n                              className=\"w-20 rounded-lg border border-slate-200 px-2 py-1\"\n                              type=\"number\"\n                              min={0}\n                              placeholder=\"∞\"\n                              defaultValue={v?.stock ?? \"\"}\n                              onChange={(e) => {\n                                const n = e.target.value === \"\" ? undefined : Math.max(0, Number(e.target.value) || 0);\n                                patchVariant(key, { stock: n });\n                              }}\n                            />\n                          </td>\n                        )}\n                        <td className=\"py-1 pr-2\">\n                          {/* SKU stond al in het schema maar was nergens in te vullen — terwijl\n                              het juist per variant nodig is (voor je eigen administratie/pakbon). */}\n                          <input\n                            className=\"w-28 rounded-lg border border-slate-200 px-2 py-1\"\n                            placeholder=\"—\"\n                            defaultValue={v?.sku ?? \"\"}\n                            onChange={(e) => patchVariant(key, { sku: e.target.value.trim() || undefined })}\n                          />\n                        </td>\n                        <td className=\"py-1 pr-2\">\n                          <Switch checked={v?.active !== false} onCheckedChange={(on) => patchVariant(key, { active: on })} />\n                        </td>\n                      </tr>\n                    );\n                  })}\n                </tbody>\n              </table>\n            </div>\n          </Field>\n        )}\n        {variantKeys.length > 60 && (\n          <p className=\"text-sm text-amber-600\">\n            {variantKeys.length} combinaties — te veel om per stuk te tonen. Beperk het aantal optie-waarden.\n          </p>\n        )}\n\n        {/* Personalisatie (5.6): eigen naam/logo van de klant, met optionele meerprijs.\n            Sinds 7.19 met een eigen aan/uit-schakelaar: uitzetten bewaart de velden. */}\n        <div className=\"rounded-xl border border-slate-200 p-3\">\n          <Switch\n            checked={def.personalizationEnabled !== false}\n            onCheckedChange={(v) =>\n              setDef((p) => ({\n                ...p,\n                personalizationEnabled: v,\n                // Bij het aanzetten meteen één leeg veld klaarzetten, anders staat de klant voor\n                // een lege sectie en lijkt de schakelaar niets te doen.\n                personalization:\n                  v && (p.personalization ?? []).length === 0\n                    ? [{ key: \"naam\", label: \"Naam\", type: \"text\", required: false, maxLength: 20, priceCents: 0 }]\n                    : p.personalization,\n              }))\n            }\n            label=\"Persoonlijk maken aanzetten voor dit product\"\n          />\n          {def.personalizationEnabled === false && (def.personalization?.length ?? 0) > 0 && (\n            <p className=\"mt-1 text-xs text-slate-500\">\n              Staat uit — de klant ziet geen invulveld. Je {def.personalization!.length === 1 ? \"instelling blijft\" : \"instellingen blijven\"} bewaard\n              voor als je het weer aanzet.\n            </p>\n          )}\n\n        {def.personalizationEnabled !== false && (\n        <Field\n          label=\"Personalisatie (eigen tekst of afbeelding)\"\n          hint=\"Max. 3 velden. De klant vult dit in op de productpagina; de meerprijs telt automatisch mee.\"\n        >\n          <div className=\"grid gap-2\">\n            {(def.personalization ?? []).map((f, i) => {\n              const setPers = (patch: Partial<PersonalizationField>) =>\n                setDef((p) => {\n                  const personalization = [...(p.personalization ?? [])];\n                  personalization[i] = { ...personalization[i], ...patch };\n                  return { ...p, personalization };\n                });\n              return (\n                <div key={f.key || `nieuw-${i}`} className=\"grid gap-2 rounded-lg border border-slate-100 p-2 md:grid-cols-[1fr_130px_90px_110px_auto]\">\n                  <Input\n                    placeholder='Label (bv. \"Naam van het kindje\")'\n                    value={f.label}\n                    onChange={(e) =>\n                      setPers({\n                        label: e.target.value,\n                        key: f.key || e.target.value.toLowerCase().replace(/[^a-z0-9]+/g, \"_\").replace(/^_+|_+$/g, \"\").slice(0, 40) || `veld${i + 1}`,\n                      })\n                    }\n                  />\n                  <Select\n                    value={f.type}\n                    onValueChange={(v) => setPers({ type: v as \"text\" | \"image\" })}\n                    options={[\n                      { value: \"text\", label: \"Tekst\" },\n                      { value: \"image\", label: \"Afbeelding\" },\n                    ]}\n                  />\n                  {f.type === \"text\" ? (\n                    <Input\n                      type=\"number\"\n                      title=\"Max. tekens\"\n                      min={1}\n                      max={200}\n                      value={f.maxLength ?? 40}\n                      onChange={(e) => setPers({ maxLength: Math.max(1, Math.min(200, Number(e.target.value) || 40)) })}\n                    />\n                  ) : (\n                    <span className=\"self-center text-xs text-slate-400\">jpg/png/webp</span>\n                  )}\n                  <input\n                    className=\"rounded-lg border border-slate-200 px-2 py-1\"\n                    placeholder=\"Meerprijs €\"\n                    defaultValue={f.priceCents ? centsToEuroInput(f.priceCents) : \"\"}\n                    onChange={(e) => setPers({ priceCents: eurosToCents(e.target.value) ?? 0 })}\n                  />\n                  <div className=\"flex items-center gap-2\">\n                    <Switch checked={f.required === true} onCheckedChange={(v) => setPers({ required: v })} label=\"Verplicht\" />\n                    <Button\n                      size=\"sm\"\n                      variant=\"ghost\"\n                      onClick={() => setDef((p) => ({ ...p, personalization: (p.personalization ?? []).filter((_, j) => j !== i) }))}\n                    >\n                      ✕\n                    </Button>\n                  </div>\n                  {/* Uitleg onder het veld in de winkel. Bestond al in het schema en werd al\n                      gerenderd op de productpagina, maar was hier nooit in te vullen. */}\n                  <input\n                    className=\"col-span-full rounded-lg border border-slate-200 px-2 py-1 text-sm\"\n                    placeholder=\"Uitleg voor de klant (optioneel), bv. 'Max. 12 tekens — komt op de voorkant'\"\n                    value={f.helpText ?? \"\"}\n                    onChange={(e) => setPers({ helpText: e.target.value })}\n                  />\n                </div>\n              );\n            })}\n            {(def.personalization ?? []).length < 3 && (\n              <Button\n                size=\"sm\"\n                variant=\"secondary\"\n                className=\"w-fit\"\n                onClick={() =>\n                  setDef((p) => ({\n                    ...p,\n                    personalization: [\n                      ...(p.personalization ?? []),\n                      { key: `veld${(p.personalization ?? []).length + 1}`, label: \"\", type: \"text\", required: false, maxLength: 40, priceCents: 0 },\n                    ],\n                  }))\n                }\n              >\n                + Personalisatie-veld\n              </Button>\n            )}\n          </div>\n        </Field>\n        )}\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-6\">\n          <Field label=\"Status\">\n            <Select\n              value={def.status ?? \"draft\"}\n              onValueChange={(v) => setDef((p) => ({ ...p, status: v as Product[\"status\"] }))}\n              options={STATUS_OPTIONS}\n            />\n          </Field>\n          <Field label=\"Volgorde\">\n            <Input\n              type=\"number\"\n              className=\"w-24\"\n              value={def.order ?? 0}\n              onChange={(e) => setDef((p) => ({ ...p, order: Math.max(0, Number(e.target.value) || 0) }))}\n            />\n          </Field>\n          <Switch checked={def.featured === true} onCheckedChange={(v) => setDef((p) => ({ ...p, featured: v }))} label=\"Uitgelicht\" />\n          <Switch checked={def.trackStock === true} onCheckedChange={(v) => setDef((p) => ({ ...p, trackStock: v }))} label=\"Voorraad bijhouden\" />\n          {def.trackStock && (def.options ?? []).length === 0 && (\n            <Field label=\"Voorraad\">\n              <Input\n                type=\"number\"\n                className=\"w-24\"\n                placeholder=\"∞\"\n                value={def.stock ?? \"\"}\n                onChange={(e) =>\n                  setDef((p) => ({ ...p, stock: e.target.value === \"\" ? undefined : Math.max(0, Number(e.target.value) || 0) }))\n                }\n              />\n            </Field>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between border-t border-slate-100 pt-4\">\n          <div className=\"flex items-center gap-3\">\n            <Button onClick={save}>Opslaan</Button>\n            <span className=\"text-sm text-slate-500\">{formatCents(def.priceCents)}</span>\n            {vuil && <span className=\"text-sm font-medium text-amber-700\">• niet opgeslagen</span>}\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {/* Dupliceren: een variant van een bestaand product maken was overtypen. */}\n            <Button variant=\"secondary\" onClick={dupliceer}>Dupliceren</Button>\n            <Button variant=\"danger\" onClick={remove}>Verwijderen</Button>\n          </div>\n        </div>\n      </div>\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/admin/shop/ProductsTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport { collection, doc, onSnapshot } from \"firebase/firestore\";\nimport { removeProduct, saveProductDoc } from \"./productClient\";\nimport { getDb } from \"../../firebase/client\";\nimport {\n  ProductSchema,\n  formatCents,\n  optieHeeftBeeldPerWaarde,\n  saneerProductDoc,\n  type PersonalizationField,\n  type Product,\n  type ProductOption,\n  type ProductVariant,\n  type ShopCategory,\n} from \"../../schema/shop\";\nimport { Badge, Button, Card, Field, Input, Textarea } from \"../ui/primitives\";\nimport { Select } from \"../ui/select\";\nimport { Switch } from \"../ui/switch\";\nimport { useToast } from \"../ui/toast\";\nimport { FoutMelding } from \"../ui/LaadStaat\";\nimport { useScrollNaarDetail } from \"../lib/scrollNaarDetail\";\nimport { heeftOnopgeslagen, ONOPGESLAGEN_VRAAG, useOnopgeslagen, vergeetOnopgeslagen } from \"../lib/onopgeslagen\";\nimport { useConfirm, type ConfirmOptions } from \"../ui/ConfirmDialog\";\nimport { MediaPickerButton } from \"../media/MediaPicker\";\nimport { slugify } from \"../lib/slugify\";\nimport { allVariantKeys, centsToEuroInput, eurosToCents } from \"./lib\";\nimport { zodFoutTekst } from \"../lib/zodFout\";\n\ntype StoredProduct = Product & { id: string };\ntype StoredCategory = ShopCategory & { id: string };\n\nconst STATUS_OPTIONS = [\n  { value: \"draft\", label: \"Concept\" },\n  { value: \"active\", label: \"Actief\" },\n  { value: \"archived\", label: \"Gearchiveerd\" },\n];\n\nexport function ProductsTab({ siteId }: { siteId: string }) {\n  const { toast } = useToast();\n  const confirm = useConfirm();\n  const [products, setProducts] = useState<StoredProduct[]>([]);\n  const [cats, setCats] = useState<StoredCategory[]>([]);\n  const [selected, setSelected] = useState<string | null>(null);\n  const [q, setQ] = useState(\"\");\n\n  const [laadFout, setLaadFout] = useState<string | null>(null);\n  const [poging, setPoging] = useState(0);\n  useEffect(() => {\n    const db = getDb();\n    if (!db) return;\n    const fout = (e: Error) => setLaadFout(e.message);\n    const un1 = onSnapshot(collection(db, \"sites\", siteId, \"products\"), (snap) =>\n      setProducts(\n        snap.docs\n          // saneerProductDoc: historische docs dragen null-velden (zie schema/shop.ts) — schoon\n          // ze bij het lezen, zodat de form-state ze niet via {...def} opnieuw naar de server lekt.\n          .map((d) => ({ id: d.id, ...saneerProductDoc(d.data() as Product) }))\n          .sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.name.localeCompare(b.name, \"nl\")),\n      ),\n      fout,\n    );\n    const un2 = onSnapshot(collection(db, \"sites\", siteId, \"shopCategories\"), (snap) =>\n      setCats(snap.docs.map((d) => ({ id: d.id, ...(d.data() as ShopCategory) }))),\n      fout,\n    );\n    return () => {\n      un1();\n      un2();\n    };\n  }, [siteId, poging]);\n\n  async function createProduct() {\n    // Ook aanmaken loopt via de callable: een vers product is een draft (onzichtbaar voor de\n    // cache), maar zo staat élke productmutatie in de audit-log en is er één pad i.p.v. twee.\n    const nieuw = {\n      name: \"Nieuw product\",\n      slug: `product-${products.length + 1}`,\n      description: \"\",\n      categoryIds: [],\n      images: [],\n      priceCents: 0,\n      vatRate: 21,\n      options: [],\n      variants: [],\n      trackStock: false,\n      status: \"draft\",\n      order: products.length,\n      featured: false,\n      personalizationEnabled: true,\n    } satisfies Product;\n    try {\n      const id = await saveProductDoc(siteId, undefined, nieuw);\n      setSelected(id);\n    } catch (e) {\n      // Zichtbaar falen: dit gooide een tijdlang stil (unhandled) terwijl de knop gewoon niets\n      // leek te doen — precies de melding \"bij aanmaken product krijg ik iets met permissions\".\n      toast({ title: \"Product aanmaken mislukt\", description: e instanceof Error ? e.message : undefined, tone: \"error\" });\n    }\n  }\n\n  const filtered = useMemo(() => {\n    const needle = q.trim().toLowerCase();\n    if (!needle) return products;\n    return products.filter((p) => p.name.toLowerCase().includes(needle) || p.slug.includes(needle));\n  }, [products, q]);\n\n  const current = products.find((p) => p.id === selected) ?? null;\n  const detailRef = useScrollNaarDetail(selected);\n\n  /** Ander product kiezen — eerst vragen als het huidige onopgeslagen wijzigingen heeft. */\n  async function kies(id: string) {\n    if (id === selected) return;\n    if (heeftOnopgeslagen()) {\n      if (!(await confirm(ONOPGESLAGEN_VRAAG))) return;\n      vergeetOnopgeslagen();\n    }\n    setSelected(id);\n  }\n\n  if (laadFout) return <FoutMelding wat=\"de producten\" detail={laadFout} opnieuw={() => { setLaadFout(null); setPoging((n) => n + 1); }} />;\n\n  return (\n    <div className=\"grid gap-4 md:grid-cols-[300px_1fr]\">\n      <Card className=\"h-fit\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <h3 className=\"text-sm font-semibold\">Producten</h3>\n          <Button size=\"sm\" onClick={createProduct}>+ Nieuw</Button>\n        </div>\n        <Input placeholder=\"Zoeken…\" value={q} onChange={(e) => setQ(e.target.value)} className=\"mb-2\" />\n        <ul className=\"grid max-h-[60vh] gap-1 overflow-y-auto\">\n          {filtered.map((p) => (\n            <li key={p.id}>\n              <button\n                onClick={() => void kies(p.id)}\n                className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm ${\n                  p.id === selected ? \"bg-brand-50 text-brand-700\" : \"hover:bg-slate-100\"\n                }`}\n              >\n                {p.images?.[0] && <img src={p.images[0]} alt=\"\" className=\"h-8 w-8 rounded object-cover\" />}\n                {/* Categorie erbij: hetzelfde ontwerp bestaat vaak als rompertje, slabbetje én\n                    t-shirt, en dan staat dezelfde naam vijf keer onder elkaar in deze lijst.\n                    Op een eigen regel eronder, want achter de naam is de kolom te smal — dan werd\n                    juist het onderscheidende deel afgekapt (\"Geschapen! — Korte mouw t-s…\"). */}\n                <span className=\"min-w-0 flex-1\">\n                  <span className=\"block truncate\">{p.name}</span>\n                  {(() => {\n                    const cat = cats.find((c) => c.id === (p.categoryIds ?? [])[0]);\n                    return cat ? <span className=\"block truncate text-xs text-slate-500\">{cat.name}</span> : null;\n                  })()}\n                </span>\n                {/* Voorraadsignaal: uitverkocht of bijna op moet je zien zónder elk product te\n                    openen — anders merk je pas bij een bestelling dat er niets meer is. */}\n                {(() => {\n                  const n = voorraadStand(p);\n                  if (n === null) return null;\n                  if (n <= 0) return <Badge tone=\"slate\">uitverkocht</Badge>;\n                  if (n <= 3) return <Badge tone=\"amber\">{n} over</Badge>;\n                  return null;\n                })()}\n                <Badge tone={p.status === \"active\" ? \"green\" : p.status === \"draft\" ? \"amber\" : \"slate\"}>\n                  {STATUS_OPTIONS.find((s) => s.value === p.status)?.label ?? p.status}\n                </Badge>\n              </button>\n            </li>\n          ))}\n          {filtered.length === 0 && <li className=\"px-3 py-2 text-sm text-slate-500\">Geen producten.</li>}\n        </ul>\n      </Card>\n      <div ref={detailRef} className=\"scroll-mt-24 min-w-0\">\n      {current ? (\n        <ProductForm\n          key={current.id}\n          siteId={siteId}\n          product={current}\n          categories={cats}\n          onDeleted={() => setSelected(null)}\n          onDuplicated={(id) => setSelected(id)}\n          onToast={toast}\n          confirm={confirm}\n        />\n      ) : (\n        <Card>\n          <p className=\"text-sm text-slate-500\">Selecteer of maak een product.</p>\n        </Card>\n      )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Het volledige productformulier. Sinds 7.8 ook buiten dit tabblad in gebruik: het tandwiel bij een\n * product op de pagina opent hetzelfde formulier in een zijpaneel. Bewust hergebruik en geen tweede,\n * uitgeklede versie — twee formulieren voor één product lopen gegarandeerd uit elkaar, en dan hangt\n * het van je route af welke velden je kunt bereiken.\n */\n/**\n * Voorraadstand van een product voor de beheerlijst: het laagste getal dat er te melden valt.\n * `null` = niet bijgehouden of onbeperkt. Zonder opties telt `stock`, met opties de varianten.\n */\nfunction voorraadStand(p: Product): number | null {\n  if (p.trackStock !== true) return null;\n  if ((p.options ?? []).length === 0) return p.stock ?? null;\n  const getallen = (p.variants ?? []).filter((v) => v.stock !== undefined && v.active !== false).map((v) => v.stock as number);\n  return getallen.length > 0 ? Math.min(...getallen) : null;\n}\n\nexport function ProductForm({\n  siteId,\n  product,\n  categories,\n  onDeleted,\n  onDuplicated,\n  onToast,\n  confirm,\n}: {\n  siteId: string;\n  product: StoredProduct;\n  categories: StoredCategory[];\n  onDeleted: () => void;\n  /** Optioneel: na dupliceren de kopie selecteren (het zijpaneel doet dit niet). */\n  onDuplicated?: (id: string) => void;\n  onToast: (t: { title: string; description?: string; tone?: \"default\" | \"success\" | \"error\" }) => void;\n  confirm: (opts: ConfirmOptions) => Promise<boolean>;\n}) {\n  const [def, setDef] = useState<Product>(product);\n  /**\n   * Waarschuwen bij niet-opgeslagen werk (7.18). Het formulier heeft geen autosave (een product\n   * gaat meteen live), dus wie naar een ander product klikte of het tabblad sloot, was zijn\n   * wijzigingen kwijt zonder enige melding.\n   */\n  const vuil = JSON.stringify(def) !== JSON.stringify(product);\n  // 8.2: ook bij een ander product, een ander tabblad of de browser (beforeunload) vragen.\n  useOnopgeslagen(vuil);\n  const [priceInput, setPriceInput] = useState(centsToEuroInput(product.priceCents));\n  const [compareInput, setCompareInput] = useState(centsToEuroInput(product.compareAtCents));\n\n  const variantKeys = useMemo(() => allVariantKeys(def.options ?? []), [def.options]);\n\n  function setOption(i: number, patch: Partial<ProductOption>) {\n    setDef((p) => {\n      const options = [...(p.options ?? [])];\n      options[i] = { ...options[i], ...patch };\n      return { ...p, options };\n    });\n  }\n\n  /**\n   * Zet \"eigen foto per waarde\" op één as. Bewust exclusief: het hoofdbeeld op de detailpagina kan\n   * maar één keuze volgen, dus aanzetten op de ene as zet hem uit op de andere. Zonder die regel\n   * krijg je een product waarbij niemand kan uitleggen welke foto er verschijnt.\n   *\n   * De vlag wordt op ALLE assen expliciet gezet (ook de uitgezette), zodat de oude naamregel niet\n   * alsnog een tweede as aan het beeld hangt.\n   */\n  function zetBeeldAs(index: number, aan: boolean) {\n    setDef((p) => ({\n      ...p,\n      options: (p.options ?? []).map((o, j) => ({ ...o, imagePerValue: j === index ? aan : false })),\n    }));\n  }\n\n  function variantFor(key: string): ProductVariant | undefined {\n    return (def.variants ?? []).find((v) => v.key === key);\n  }\n\n  function patchVariant(key: string, patch: Partial<ProductVariant>) {\n    setDef((p) => {\n      const variants = [...(p.variants ?? [])];\n      const idx = variants.findIndex((v) => v.key === key);\n      if (idx >= 0) variants[idx] = { ...variants[idx], ...patch };\n      else variants.push({ key, active: true, ...patch });\n      return { ...p, variants };\n    });\n  }\n\n  /** Kopie van dit product maken (nieuwe slug + \"(kopie)\"), als concept zodat je rustig aanpast. */\n  async function dupliceer() {\n    try {\n      const kopie: Product = {\n        ...def,\n        name: `${def.name} (kopie)`,\n        slug: `${def.slug}-kopie`.slice(0, 120),\n        status: \"draft\",\n        order: (def.order ?? 0) + 1,\n      };\n      const id = await saveProductDoc(siteId, undefined, kopie);\n      onToast({ title: \"Product gedupliceerd\", description: \"De kopie staat als concept klaar.\", tone: \"success\" });\n      onDuplicated?.(id);\n    } catch (e) {\n      onToast({ title: \"Dupliceren mislukt\", description: e instanceof Error ? e.message : undefined, tone: \"error\" });\n    }\n  }\n\n  async function save() {\n    const db = getDb();\n    if (!db) return;\n    // Alleen varianten bewaren die iets toevoegen (afwijkende prijs/voorraad/sku of inactief),\n    // en geen wees-varianten van verwijderde optiewaarden.\n    const validKeys = new Set(variantKeys);\n    const cleanVariants = (def.variants ?? []).filter(\n      (v) =>\n        validKeys.has(v.key) &&\n        (v.priceCents !== undefined || v.stock !== undefined || v.sku !== undefined || v.active === false),\n    );\n    // Onvolledige personalisatie-regels (zonder label) niet opslaan.\n    const cleanPersonalization = (def.personalization ?? []).filter((f) => f.label.trim().length > 0);\n    /**\n     * Wees-foto's opruimen, net als bij de varianten hierboven: hernoem of verwijder je een\n     * optiewaarde, dan bleef de foto onder de oude naam in het document staan. Onzichtbaar, nooit\n     * meer getoond, en hij dook weer op zodra iemand toevallig dezelfde waarde opnieuw typte.\n     * Alleen de foto's van waarden die nog bestaan blijven over; staat het vinkje uit, dan laten\n     * we ze met rust, zodat weer aanzetten je werk teruggeeft.\n     */\n    const cleanOptions = (def.options ?? []).map((o) => {\n      if (!o.images || !optieHeeftBeeldPerWaarde(o)) return o;\n      const images = Object.fromEntries(Object.entries(o.images).filter(([waarde]) => o.values.includes(waarde)));\n      return { ...o, images: Object.keys(images).length > 0 ? images : undefined };\n    });\n    const parsed = ProductSchema.safeParse({\n      ...def,\n      options: cleanOptions,\n      variants: cleanVariants,\n      personalization: cleanPersonalization.length > 0 ? cleanPersonalization : undefined,\n    });\n    if (!parsed.success) {\n      onToast({ title: \"Ongeldig product\", description: zodFoutTekst(parsed.error.issues[0]), tone: \"error\" });\n      return;\n    }\n    // Via de callable (7.9): de server valideert, auditeert en — belangrijker — pingt de\n    // products-cachetag, zodat de wijziging ook op de LIVE shoppagina's staat en niet alleen in\n    // Firestore. Zie productClient.ts, ook voor de terugval op een oudere backend.\n    await saveProductDoc(siteId, product.id, parsed.data);\n    onToast({ title: \"Product opgeslagen\", tone: \"success\" });\n  }\n\n  async function remove() {\n    const ok = await confirm({\n      title: `\"${product.name}\" verwijderen?`,\n      description: \"Bestaande bestellingen behouden hun eigen kopie van naam en prijs.\",\n      tone: \"danger\",\n    });\n    if (!ok) return;\n    await removeProduct(siteId, product.id);\n    onDeleted();\n  }\n\n  return (\n    <Card>\n      <div className=\"grid gap-4\">\n        <div className=\"grid gap-4 md:grid-cols-2\">\n          <Field label=\"Naam\">\n            <Input\n              value={def.name}\n              onChange={(e) => setDef((p) => ({ ...p, name: e.target.value, slug: slugify(e.target.value) || p.slug }))}\n            />\n          </Field>\n          <Field label=\"Adresnaam\" hint=\"Het stukje in het webadres van dit product (alleen kleine letters en streepjes).\">\n            <Input value={def.slug} onChange={(e) => setDef((p) => ({ ...p, slug: slugify(e.target.value) }))} />\n          </Field>\n        </div>\n\n        <div className=\"grid gap-4 md:grid-cols-3\">\n          <Field label=\"Prijs (€, incl. btw)\">\n            <Input\n              value={priceInput}\n              onChange={(e) => {\n                setPriceInput(e.target.value);\n                const c = eurosToCents(e.target.value);\n                if (c !== null) setDef((p) => ({ ...p, priceCents: c }));\n              }}\n            />\n          </Field>\n          <Field label=\"Van-prijs (€, optioneel)\" hint=\"Doorgestreept naast de prijs\">\n            <Input\n              value={compareInput}\n              onChange={(e) => {\n                setCompareInput(e.target.value);\n                const c = eurosToCents(e.target.value);\n                setDef((p) => ({ ...p, compareAtCents: c ?? undefined }));\n              }}\n            />\n          </Field>\n          <Field label=\"Btw-tarief\">\n            <Select\n              value={String(def.vatRate ?? 21)}\n              onValueChange={(v) => setDef((p) => ({ ...p, vatRate: Number(v) as 21 | 9 | 0 }))}\n              options={[\n                { value: \"21\", label: \"21%\" },\n                { value: \"9\", label: \"9%\" },\n                { value: \"0\", label: \"0%\" },\n              ]}\n            />\n          </Field>\n        </div>\n\n        <Field label=\"Omschrijving\">\n          <Textarea rows={4} value={def.description ?? \"\"} onChange={(e) => setDef((p) => ({ ...p, description: e.target.value }))} />\n        </Field>\n\n        <Field label=\"Afbeeldingen\" hint=\"Eerste afbeelding is het hoofdbeeld\">\n          <div className=\"flex flex-wrap items-center gap-3\">\n            {(def.images ?? []).map((url, i) => (\n              <div key={url + i} className=\"relative\">\n                <img src={url} alt=\"\" className={`h-16 w-16 rounded-lg object-cover ${i === 0 ? \"ring-2 ring-brand-500\" : \"\"}`} />\n                {i === 0 && (\n                  <span className=\"absolute -bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-brand-500 px-1.5 text-[10px] text-white\">hoofd</span>\n                )}\n                <button\n                  type=\"button\"\n                  aria-label=\"Verwijder afbeelding\"\n                  className=\"absolute -right-2 -top-2 grid h-5 w-5 place-items-center rounded-full bg-slate-700 text-xs text-white\"\n                  onClick={() => setDef((p) => ({ ...p, images: (p.images ?? []).filter((_, j) => j !== i) }))}\n                >\n                  ✕\n                </button>\n                {/* Herschikken: de eerste afbeelding is het hoofdbeeld, en dat was alleen te\n                    veranderen door alles te wissen en opnieuw te kiezen. */}\n                {i > 0 && (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Naar voren verplaatsen\"\n                    title={i === 1 ? \"Maak hoofdbeeld\" : \"Naar voren\"}\n                    className=\"absolute -left-2 -top-2 grid h-5 w-5 place-items-center rounded-full bg-slate-700 text-xs text-white\"\n                    onClick={() =>\n                      setDef((p) => {\n                        const imgs = [...(p.images ?? [])];\n                        [imgs[i - 1], imgs[i]] = [imgs[i], imgs[i - 1]];\n                        return { ...p, images: imgs };\n                      })\n                    }\n                  >\n                    ←\n                  </button>\n                )}\n              </div>\n            ))}\n            <MediaPickerButton\n              siteId={siteId}\n              label=\"+ Afbeelding\"\n              onSelect={(m) => setDef((p) => ({ ...p, images: [...(p.images ?? []), m.url] }))}\n            />\n          </div>\n        </Field>\n\n        <Field label=\"Categorieën\">\n          <div className=\"flex flex-wrap gap-2\">\n            {categories.map((c) => {\n              const on = (def.categoryIds ?? []).includes(c.id);\n              return (\n                <button\n                  key={c.id}\n                  type=\"button\"\n                  onClick={() =>\n                    setDef((p) => ({\n                      ...p,\n                      categoryIds: on ? (p.categoryIds ?? []).filter((x) => x !== c.id) : [...(p.categoryIds ?? []), c.id],\n                    }))\n                  }\n                  className={`rounded-full border px-3 py-1 text-sm ${\n                    on ? \"border-brand-500 bg-brand-50 text-brand-700\" : \"border-slate-200 hover:bg-slate-50\"\n                  }`}\n                >\n                  {on ? \"✓ \" : \"\"}\n                  {c.name}\n                </button>\n              );\n            })}\n            {categories.length === 0 && <span className=\"text-sm text-slate-500\">Maak eerst een categorie aan.</span>}\n          </div>\n        </Field>\n\n        {/* Opties & varianten */}\n        <Field\n          label=\"Opties (bv. Maat, Kleur)\"\n          hint=\"Max. 3. Waarden gescheiden door komma's. Combinaties kun je hieronder per stuk aanpassen.\"\n        >\n          <div className=\"grid gap-2\">\n            {(def.options ?? []).map((opt, i) => (\n              <div key={i} className=\"grid gap-2 rounded-lg border border-slate-100 p-2\">\n                <div className=\"flex items-center gap-2\">\n                  <Input\n                    className=\"w-36\"\n                    placeholder=\"Naam (bv. Maat)\"\n                    value={opt.name}\n                    onChange={(e) => setOption(i, { name: e.target.value })}\n                  />\n                  <Input\n                    placeholder=\"Waarden, bv: 56, 62, 68, 74\"\n                    value={opt.values.join(\", \")}\n                    onChange={(e) =>\n                      setOption(i, { values: e.target.value.split(\",\").map((s) => s.trim()).filter(Boolean) })\n                    }\n                  />\n                  <Button\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    onClick={() => setDef((p) => ({ ...p, options: (p.options ?? []).filter((_, j) => j !== i) }))}\n                  >\n                    ✕\n                  </Button>\n                </div>\n                {/*\n                  Foto per waarde (5.6, instelbaar sinds 7.23). Tot 7.23 hing dit aan de naam van\n                  de as: alleen \"Kleur\" kreeg fotoknoppen. Dat brak zodra iemand zijn as \"Print\" of\n                  \"Dessin\" noemde, en hernoemen liet de foto's onzichtbaar achter. Nu is het een\n                  vinkje, en het staat op élke as — met de oude naamregel als beginstand, zodat\n                  bestaande producten er hetzelfde bijstaan.\n                */}\n                <label className=\"flex w-fit items-center gap-2 text-xs text-slate-600\">\n                  <input\n                    type=\"checkbox\"\n                    checked={optieHeeftBeeldPerWaarde(opt)}\n                    onChange={(e) => zetBeeldAs(i, e.target.checked)}\n                  />\n                  Elke waarde een eigen foto\n                  <span className=\"text-slate-500\">— het hoofdbeeld wisselt mee met deze keuze</span>\n                </label>\n                {optieHeeftBeeldPerWaarde(opt) && opt.values.length > 0 && (\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    {opt.values.map((value) => {\n                      const url = opt.images?.[value];\n                      return (\n                        <span key={value} className=\"flex items-center gap-1 rounded-full border border-slate-200 px-2 py-1 text-xs\">\n                          {url && <img src={url} alt=\"\" className=\"h-6 w-6 rounded object-cover\" />}\n                          {value}\n                          <MediaPickerButton\n                            siteId={siteId}\n                            label={url ? \"↻\" : \"+ foto\"}\n                            onSelect={(m) =>\n                              setOption(i, { images: { ...(opt.images ?? {}), [value]: m.url } })\n                            }\n                          />\n                          {url && (\n                            <button\n                              type=\"button\"\n                              aria-label={`Verwijder foto van ${value}`}\n                              className=\"text-slate-500 hover:text-slate-700\"\n                              onClick={() => {\n                                const images = { ...(opt.images ?? {}) };\n                                delete images[value];\n                                setOption(i, { images });\n                              }}\n                            >\n                              ✕\n                            </button>\n                          )}\n                        </span>\n                      );\n                    })}\n                  </div>\n                )}\n              </div>\n            ))}\n            {(def.options ?? []).length < 3 && (\n              <Button\n                size=\"sm\"\n                variant=\"secondary\"\n                className=\"w-fit\"\n                onClick={() => setDef((p) => ({ ...p, options: [...(p.options ?? []), { name: \"\", values: [] }] }))}\n              >\n                + Optie\n              </Button>\n            )}\n          </div>\n        </Field>\n\n        {variantKeys.length > 0 && variantKeys.length <= 60 && (\n          <Field label=\"Varianten\" hint=\"Leeg = standaardprijs / onbeperkte voorraad\">\n            <div className=\"overflow-x-auto\">\n              <table className=\"w-full text-sm\">\n                <thead>\n                  <tr className=\"text-left text-xs text-slate-500\">\n                    <th className=\"py-1 pr-2\">Combinatie</th>\n                    <th className=\"py-1 pr-2\">Prijs (€)</th>\n                    {def.trackStock && <th className=\"py-1 pr-2\">Voorraad</th>}\n                    <th className=\"py-1 pr-2\">Artikelnr.</th>\n                    <th className=\"py-1 pr-2\">Leverbaar</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  {variantKeys.map((key) => {\n                    const v = variantFor(key);\n                    return (\n                      <tr key={key} className=\"border-t border-slate-100\">\n                        <td className=\"py-1 pr-2\">{key.split(\"|\").join(\" · \")}</td>\n                        <td className=\"py-1 pr-2\">\n                          {/* Native uncontrolled inputs: geen cursor-gedoe bij \"13,\" tijdens typen. */}\n                          <input\n                            className=\"w-24 rounded-lg border border-slate-200 px-2 py-1\"\n                            aria-label={`Prijs ${key.split(\"|\").join(\" \")}`}\n                            inputMode=\"decimal\"\n                            placeholder={centsToEuroInput(def.priceCents)}\n                            defaultValue={centsToEuroInput(v?.priceCents)}\n                            onChange={(e) => {\n                              const c = eurosToCents(e.target.value);\n                              patchVariant(key, { priceCents: c ?? undefined });\n                            }}\n                          />\n                        </td>\n                        {def.trackStock && (\n                          <td className=\"py-1 pr-2\">\n                            <input\n                              className=\"w-20 rounded-lg border border-slate-200 px-2 py-1\"\n                              aria-label={`Voorraad ${key.split(\"|\").join(\" \")}`}\n                              type=\"number\"\n                              min={0}\n                              placeholder=\"∞\"\n                              defaultValue={v?.stock ?? \"\"}\n                              onChange={(e) => {\n                                const n = e.target.value === \"\" ? undefined : Math.max(0, Number(e.target.value) || 0);\n                                patchVariant(key, { stock: n });\n                              }}\n                            />\n                          </td>\n                        )}\n                        <td className=\"py-1 pr-2\">\n                          {/* SKU stond al in het schema maar was nergens in te vullen — terwijl\n                              het juist per variant nodig is (voor je eigen administratie/pakbon). */}\n                          <input\n                            className=\"w-28 rounded-lg border border-slate-200 px-2 py-1\"\n                            aria-label={`Artikelnummer ${key.split(\"|\").join(\" \")}`}\n                            placeholder=\"—\"\n                            defaultValue={v?.sku ?? \"\"}\n                            onChange={(e) => patchVariant(key, { sku: e.target.value.trim() || undefined })}\n                          />\n                        </td>\n                        <td className=\"py-1 pr-2\">\n                          <Switch checked={v?.active !== false} onCheckedChange={(on) => patchVariant(key, { active: on })} label={`${key.split(\"|\").join(\" \")} leverbaar`} labelVerborgen />\n                        </td>\n                      </tr>\n                    );\n                  })}\n                </tbody>\n              </table>\n            </div>\n          </Field>\n        )}\n        {variantKeys.length > 60 && (\n          <p className=\"text-sm text-amber-600\">\n            {variantKeys.length} combinaties — te veel om per stuk te tonen. Beperk het aantal optie-waarden.\n          </p>\n        )}\n\n        {/* Personalisatie (5.6): eigen naam/logo van de klant, met optionele meerprijs.\n            Sinds 7.19 met een eigen aan/uit-schakelaar: uitzetten bewaart de velden. */}\n        <div className=\"rounded-xl border border-slate-200 p-3\">\n          <Switch\n            checked={def.personalizationEnabled !== false}\n            onCheckedChange={(v) =>\n              setDef((p) => ({\n                ...p,\n                personalizationEnabled: v,\n                // Bij het aanzetten meteen één leeg veld klaarzetten, anders staat de klant voor\n                // een lege sectie en lijkt de schakelaar niets te doen.\n                personalization:\n                  v && (p.personalization ?? []).length === 0\n                    ? [{ key: \"naam\", label: \"Naam\", type: \"text\", required: false, maxLength: 20, priceCents: 0 }]\n                    : p.personalization,\n              }))\n            }\n            label=\"Persoonlijk maken aanzetten voor dit product\"\n          />\n          {def.personalizationEnabled === false && (def.personalization?.length ?? 0) > 0 && (\n            <p className=\"mt-1 text-xs text-slate-500\">\n              Staat uit — de klant ziet geen invulveld. Je {def.personalization!.length === 1 ? \"instelling blijft\" : \"instellingen blijven\"} bewaard\n              voor als je het weer aanzet.\n            </p>\n          )}\n\n        {def.personalizationEnabled !== false && (\n        <Field\n          label=\"Personalisatie (eigen tekst of afbeelding)\"\n          hint=\"Max. 3 velden. De klant vult dit in op de productpagina; de meerprijs telt automatisch mee.\"\n        >\n          <div className=\"grid gap-2\">\n            {(def.personalization ?? []).map((f, i) => {\n              const setPers = (patch: Partial<PersonalizationField>) =>\n                setDef((p) => {\n                  const personalization = [...(p.personalization ?? [])];\n                  personalization[i] = { ...personalization[i], ...patch };\n                  return { ...p, personalization };\n                });\n              return (\n                <div key={f.key || `nieuw-${i}`} className=\"grid gap-2 rounded-lg border border-slate-100 p-2 md:grid-cols-[1fr_130px_90px_110px_auto]\">\n                  <Input\n                    placeholder='Label (bv. \"Naam van het kindje\")'\n                    value={f.label}\n                    onChange={(e) =>\n                      setPers({\n                        label: e.target.value,\n                        key: f.key || e.target.value.toLowerCase().replace(/[^a-z0-9]+/g, \"_\").replace(/^_+|_+$/g, \"\").slice(0, 40) || `veld${i + 1}`,\n                      })\n                    }\n                  />\n                  <Select\n                    value={f.type}\n                    onValueChange={(v) => setPers({ type: v as \"text\" | \"image\" })}\n                    options={[\n                      { value: \"text\", label: \"Tekst\" },\n                      { value: \"image\", label: \"Afbeelding\" },\n                    ]}\n                  />\n                  {f.type === \"text\" ? (\n                    <Input\n                      type=\"number\"\n                      title=\"Max. tekens\"\n                      min={1}\n                      max={200}\n                      value={f.maxLength ?? 40}\n                      onChange={(e) => setPers({ maxLength: Math.max(1, Math.min(200, Number(e.target.value) || 40)) })}\n                    />\n                  ) : (\n                    <span className=\"self-center text-xs text-slate-500\">jpg/png/webp</span>\n                  )}\n                  <input\n                    className=\"rounded-lg border border-slate-200 px-2 py-1\"\n                    placeholder=\"Meerprijs €\"\n                    defaultValue={f.priceCents ? centsToEuroInput(f.priceCents) : \"\"}\n                    onChange={(e) => setPers({ priceCents: eurosToCents(e.target.value) ?? 0 })}\n                  />\n                  <div className=\"flex items-center gap-2\">\n                    <Switch checked={f.required === true} onCheckedChange={(v) => setPers({ required: v })} label=\"Verplicht\" />\n                    <Button\n                      size=\"sm\"\n                      variant=\"ghost\"\n                      onClick={() => setDef((p) => ({ ...p, personalization: (p.personalization ?? []).filter((_, j) => j !== i) }))}\n                    >\n                      ✕\n                    </Button>\n                  </div>\n                  {/* Uitleg onder het veld in de winkel. Bestond al in het schema en werd al\n                      gerenderd op de productpagina, maar was hier nooit in te vullen. */}\n                  <input\n                    className=\"col-span-full rounded-lg border border-slate-200 px-2 py-1 text-sm\"\n                    placeholder=\"Uitleg voor de klant (optioneel), bv. 'Max. 12 tekens — komt op de voorkant'\"\n                    value={f.helpText ?? \"\"}\n                    onChange={(e) => setPers({ helpText: e.target.value })}\n                  />\n                </div>\n              );\n            })}\n            {(def.personalization ?? []).length < 3 && (\n              <Button\n                size=\"sm\"\n                variant=\"secondary\"\n                className=\"w-fit\"\n                onClick={() =>\n                  setDef((p) => ({\n                    ...p,\n                    personalization: [\n                      ...(p.personalization ?? []),\n                      { key: `veld${(p.personalization ?? []).length + 1}`, label: \"\", type: \"text\", required: false, maxLength: 40, priceCents: 0 },\n                    ],\n                  }))\n                }\n              >\n                + Personalisatie-veld\n              </Button>\n            )}\n          </div>\n        </Field>\n        )}\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-6\">\n          <Field label=\"Status\">\n            <Select\n              value={def.status ?? \"draft\"}\n              onValueChange={(v) => setDef((p) => ({ ...p, status: v as Product[\"status\"] }))}\n              options={STATUS_OPTIONS}\n            />\n          </Field>\n          <Field label=\"Volgorde\">\n            <Input\n              type=\"number\"\n              className=\"w-24\"\n              value={def.order ?? 0}\n              onChange={(e) => setDef((p) => ({ ...p, order: Math.max(0, Number(e.target.value) || 0) }))}\n            />\n          </Field>\n          <Switch checked={def.featured === true} onCheckedChange={(v) => setDef((p) => ({ ...p, featured: v }))} label=\"Uitgelicht\" />\n          <Switch checked={def.trackStock === true} onCheckedChange={(v) => setDef((p) => ({ ...p, trackStock: v }))} label=\"Voorraad bijhouden\" />\n          {def.trackStock && (def.options ?? []).length === 0 && (\n            <Field label=\"Voorraad\">\n              <Input\n                type=\"number\"\n                className=\"w-24\"\n                placeholder=\"∞\"\n                value={def.stock ?? \"\"}\n                onChange={(e) =>\n                  setDef((p) => ({ ...p, stock: e.target.value === \"\" ? undefined : Math.max(0, Number(e.target.value) || 0) }))\n                }\n              />\n            </Field>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between border-t border-slate-100 pt-4\">\n          <div className=\"flex items-center gap-3\">\n            <Button onClick={save}>Opslaan</Button>\n            <span className=\"text-sm text-slate-500\">{formatCents(def.priceCents)}</span>\n            {vuil && <span className=\"text-sm font-medium text-amber-700\">• niet opgeslagen</span>}\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {/* Dupliceren: een variant van een bestaand product maken was overtypen. */}\n            <Button variant=\"secondary\" onClick={dupliceer}>Dupliceren</Button>\n            <Button variant=\"danger\" onClick={remove}>Verwijderen</Button>\n          </div>\n        </div>\n      </div>\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/shop/ShopPanel.js

@@ -1,5 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useConfirm } from "../ui/ConfirmDialog.js";
+import { heeftOnopgeslagen, ONOPGESLAGEN_VRAAG, vergeetOnopgeslagen } from "../lib/onopgeslagen.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
 import { ProductsTab } from "./ProductsTab.js";
 import { CategoriesTab } from "./CategoriesTab.js";
@@ -13,7 +16,16 @@ import { useAuth } from "../../auth/AuthProvider.js";
 function ShopPanel({ siteId }) {
   const { role } = useAuth();
   const technisch = role === "superadmin";
-  return /* @__PURE__ */ jsxs(Tabs, { defaultValue: "orders", children: [
+  const [tab, setTab] = useState("orders");
+  const confirm = useConfirm();
+  async function wissel(volgende) {
+    if (heeftOnopgeslagen()) {
+      if (!await confirm(ONOPGESLAGEN_VRAAG)) return;
+      vergeetOnopgeslagen();
+    }
+    setTab(volgende);
+  }
+  return /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (v) => void wissel(v), children: [
     /* @__PURE__ */ jsxs(TabsList, { children: [
       /* @__PURE__ */ jsx(TabsTrigger, { value: "orders", children: "Bestellingen" }),
       /* @__PURE__ */ jsx(TabsTrigger, { value: "products", children: "Producten" }),

package/dist/admin/shop/ShopPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/shop/ShopPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../ui/tabs\";\nimport { ProductsTab } from \"./ProductsTab\";\nimport { CategoriesTab } from \"./CategoriesTab\";\nimport { OrdersTab } from \"./OrdersTab\";\nimport { DiscountsTab } from \"./DiscountsTab\";\nimport { ShopSettingsTab } from \"./ShopSettingsTab\";\nimport { ConnectionsTab } from \"./ConnectionsTab\";\nimport { MailTemplates } from \"../settings/MailTemplates\";\nimport { SHOP_TEMPLATE_KEYS } from \"../../schema/mail\";\nimport { useAuth } from \"../../auth/AuthProvider\";\n\n/**\n * Webwinkel-beheer: bestellingen, producten, categorieën, kortingscodes, de webwinkel-e-mails,\n * winkel-instellingen en koppelingen (betaalprovider Stripe/Mollie). De mailprovider én de opmaak\n * (huisstijl) zijn site-breed en staan onder Instellingen → E-mail (zie docs/SHARED-SETTINGS.md).\n */\nexport function ShopPanel({ siteId }: { siteId: string }) {\n  // 7.24: Koppelingen (betaalprovider-sleutels, webhooks) is bureauwerk — technisch, met\n  // productiegevolgen bij een tikfout. De klant beheert content en weergave; dit tabblad ziet\n  // alleen de superadmin. De winkel-instellingen (verzendkosten, bedrijfsgegevens) blijven van\n  // de klant: dat is zijn bedrijf.\n  const { role } = useAuth();\n  const technisch = role === \"superadmin\";\n  return (\n    <Tabs defaultValue=\"orders\">\n      <TabsList>\n        <TabsTrigger value=\"orders\">Bestellingen</TabsTrigger>\n        <TabsTrigger value=\"products\">Producten</TabsTrigger>\n        <TabsTrigger value=\"categories\">Categorieën</TabsTrigger>\n        <TabsTrigger value=\"discounts\">Kortingen</TabsTrigger>\n        <TabsTrigger value=\"emails\">E-mails</TabsTrigger>\n        <TabsTrigger value=\"settings\">Instellingen</TabsTrigger>\n        {technisch && <TabsTrigger value=\"connections\">Koppelingen</TabsTrigger>}\n      </TabsList>\n      <TabsContent value=\"orders\">\n        <OrdersTab siteId={siteId} />\n      </TabsContent>\n      <TabsContent value=\"products\">\n        <ProductsTab siteId={siteId} />\n      </TabsContent>\n      <TabsContent value=\"categories\">\n        <CategoriesTab siteId={siteId} />\n      </TabsContent>\n      <TabsContent value=\"discounts\">\n        <DiscountsTab siteId={siteId} />\n      </TabsContent>\n      <TabsContent value=\"emails\">\n        <MailTemplates siteId={siteId} keys={SHOP_TEMPLATE_KEYS} />\n      </TabsContent>\n      <TabsContent value=\"settings\">\n        <ShopSettingsTab siteId={siteId} />\n      </TabsContent>\n      {technisch && (\n        <TabsContent value=\"connections\">\n          <ConnectionsTab siteId={siteId} />\n        </TabsContent>\n      )}\n    </Tabs>\n  );\n}\n"],"mappings":";AA2BM,SACE,KADF;AAzBN,SAAS,MAAM,aAAa,UAAU,mBAAmB;AACzD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,eAAe;AAOjB,SAAS,UAAU,EAAE,OAAO,GAAuB;AAKxD,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,QAAM,YAAY,SAAS;AAC3B,SACE,qBAAC,QAAK,cAAa,UACjB;AAAA,yBAAC,YACC;AAAA,0BAAC,eAAY,OAAM,UAAS,0BAAY;AAAA,MACxC,oBAAC,eAAY,OAAM,YAAW,uBAAS;AAAA,MACvC,oBAAC,eAAY,OAAM,cAAa,4BAAW;AAAA,MAC3C,oBAAC,eAAY,OAAM,aAAY,uBAAS;AAAA,MACxC,oBAAC,eAAY,OAAM,UAAS,qBAAO;AAAA,MACnC,oBAAC,eAAY,OAAM,YAAW,0BAAY;AAAA,MACzC,aAAa,oBAAC,eAAY,OAAM,eAAc,yBAAW;AAAA,OAC5D;AAAA,IACA,oBAAC,eAAY,OAAM,UACjB,8BAAC,aAAU,QAAgB,GAC7B;AAAA,IACA,oBAAC,eAAY,OAAM,YACjB,8BAAC,eAAY,QAAgB,GAC/B;AAAA,IACA,oBAAC,eAAY,OAAM,cACjB,8BAAC,iBAAc,QAAgB,GACjC;AAAA,IACA,oBAAC,eAAY,OAAM,aACjB,8BAAC,gBAAa,QAAgB,GAChC;AAAA,IACA,oBAAC,eAAY,OAAM,UACjB,8BAAC,iBAAc,QAAgB,MAAM,oBAAoB,GAC3D;AAAA,IACA,oBAAC,eAAY,OAAM,YACjB,8BAAC,mBAAgB,QAAgB,GACnC;AAAA,IACC,aACC,oBAAC,eAAY,OAAM,eACjB,8BAAC,kBAAe,QAAgB,GAClC;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/admin/shop/ShopPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { useConfirm } from \"../ui/ConfirmDialog\";\nimport { heeftOnopgeslagen, ONOPGESLAGEN_VRAAG, vergeetOnopgeslagen } from \"../lib/onopgeslagen\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../ui/tabs\";\nimport { ProductsTab } from \"./ProductsTab\";\nimport { CategoriesTab } from \"./CategoriesTab\";\nimport { OrdersTab } from \"./OrdersTab\";\nimport { DiscountsTab } from \"./DiscountsTab\";\nimport { ShopSettingsTab } from \"./ShopSettingsTab\";\nimport { ConnectionsTab } from \"./ConnectionsTab\";\nimport { MailTemplates } from \"../settings/MailTemplates\";\nimport { SHOP_TEMPLATE_KEYS } from \"../../schema/mail\";\nimport { useAuth } from \"../../auth/AuthProvider\";\n\n/**\n * Webwinkel-beheer: bestellingen, producten, categorieën, kortingscodes, de webwinkel-e-mails,\n * winkel-instellingen en koppelingen (betaalprovider Stripe/Mollie). De mailprovider én de opmaak\n * (huisstijl) zijn site-breed en staan onder Instellingen → E-mail (zie docs/SHARED-SETTINGS.md).\n */\nexport function ShopPanel({ siteId }: { siteId: string }) {\n  // 7.24: Koppelingen (betaalprovider-sleutels, webhooks) is bureauwerk — technisch, met\n  // productiegevolgen bij een tikfout. De klant beheert content en weergave; dit tabblad ziet\n  // alleen de superadmin. De winkel-instellingen (verzendkosten, bedrijfsgegevens) blijven van\n  // de klant: dat is zijn bedrijf.\n  const { role } = useAuth();\n  const technisch = role === \"superadmin\";\n  // 8.2: van sub-tabblad wisselen ontkoppelt het product dat je aan het bewerken was — vraag eerst.\n  const [tab, setTab] = useState(\"orders\");\n  const confirm = useConfirm();\n  async function wissel(volgende: string) {\n    if (heeftOnopgeslagen()) {\n      if (!(await confirm(ONOPGESLAGEN_VRAAG))) return;\n      vergeetOnopgeslagen();\n    }\n    setTab(volgende);\n  }\n  return (\n    <Tabs value={tab} onValueChange={(v) => void wissel(v)}>\n      <TabsList>\n        <TabsTrigger value=\"orders\">Bestellingen</TabsTrigger>\n        <TabsTrigger value=\"products\">Producten</TabsTrigger>\n        <TabsTrigger value=\"categories\">Categorieën</TabsTrigger>\n        <TabsTrigger value=\"discounts\">Kortingen</TabsTrigger>\n        <TabsTrigger value=\"emails\">E-mails</TabsTrigger>\n        <TabsTrigger value=\"settings\">Instellingen</TabsTrigger>\n        {technisch && <TabsTrigger value=\"connections\">Koppelingen</TabsTrigger>}\n      </TabsList>\n      <TabsContent value=\"orders\">\n        <OrdersTab siteId={siteId} />\n      </TabsContent>\n      <TabsContent value=\"products\">\n        <ProductsTab siteId={siteId} />\n      </TabsContent>\n      <TabsContent value=\"categories\">\n        <CategoriesTab siteId={siteId} />\n      </TabsContent>\n      <TabsContent value=\"discounts\">\n        <DiscountsTab siteId={siteId} />\n      </TabsContent>\n      <TabsContent value=\"emails\">\n        <MailTemplates siteId={siteId} keys={SHOP_TEMPLATE_KEYS} />\n      </TabsContent>\n      <TabsContent value=\"settings\">\n        <ShopSettingsTab siteId={siteId} />\n      </TabsContent>\n      {technisch && (\n        <TabsContent value=\"connections\">\n          <ConnectionsTab siteId={siteId} />\n        </TabsContent>\n      )}\n    </Tabs>\n  );\n}\n"],"mappings":";AAwCM,SACE,KADF;AAtCN,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB,oBAAoB,2BAA2B;AAC3E,SAAS,MAAM,aAAa,UAAU,mBAAmB;AACzD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,eAAe;AAOjB,SAAS,UAAU,EAAE,OAAO,GAAuB;AAKxD,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,QAAM,YAAY,SAAS;AAE3B,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,QAAQ;AACvC,QAAM,UAAU,WAAW;AAC3B,iBAAe,OAAO,UAAkB;AACtC,QAAI,kBAAkB,GAAG;AACvB,UAAI,CAAE,MAAM,QAAQ,kBAAkB,EAAI;AAC1C,0BAAoB;AAAA,IACtB;AACA,WAAO,QAAQ;AAAA,EACjB;AACA,SACE,qBAAC,QAAK,OAAO,KAAK,eAAe,CAAC,MAAM,KAAK,OAAO,CAAC,GACnD;AAAA,yBAAC,YACC;AAAA,0BAAC,eAAY,OAAM,UAAS,0BAAY;AAAA,MACxC,oBAAC,eAAY,OAAM,YAAW,uBAAS;AAAA,MACvC,oBAAC,eAAY,OAAM,cAAa,4BAAW;AAAA,MAC3C,oBAAC,eAAY,OAAM,aAAY,uBAAS;AAAA,MACxC,oBAAC,eAAY,OAAM,UAAS,qBAAO;AAAA,MACnC,oBAAC,eAAY,OAAM,YAAW,0BAAY;AAAA,MACzC,aAAa,oBAAC,eAAY,OAAM,eAAc,yBAAW;AAAA,OAC5D;AAAA,IACA,oBAAC,eAAY,OAAM,UACjB,8BAAC,aAAU,QAAgB,GAC7B;AAAA,IACA,oBAAC,eAAY,OAAM,YACjB,8BAAC,eAAY,QAAgB,GAC/B;AAAA,IACA,oBAAC,eAAY,OAAM,cACjB,8BAAC,iBAAc,QAAgB,GACjC;AAAA,IACA,oBAAC,eAAY,OAAM,aACjB,8BAAC,gBAAa,QAAgB,GAChC;AAAA,IACA,oBAAC,eAAY,OAAM,UACjB,8BAAC,iBAAc,QAAgB,MAAM,oBAAoB,GAC3D;AAAA,IACA,oBAAC,eAAY,OAAM,YACjB,8BAAC,mBAAgB,QAAgB,GACnC;AAAA,IACC,aACC,oBAAC,eAAY,OAAM,eACjB,8BAAC,kBAAe,QAAgB,GAClC;AAAA,KAEJ;AAEJ;","names":[]}