@xiwebdesign/xicms-core 5.4.0 → 5.5.0

package/dist/admin/panelRegistry.js

@@ -7,6 +7,7 @@ import { StatsPanel } from "./stats/StatsPanel";
 import { SettingsPanel } from "./settings/SettingsPanel";
 import { NewsEditor } from "./NewsEditor";
 import { CustomBlocksPanel } from "./customBlocks/CustomBlocksPanel";
+import { ShopPanel } from "./shop/ShopPanel";
 function NewsPanel(_) {
   return /* @__PURE__ */ jsx(NewsEditor, {});
 }
@@ -16,6 +17,8 @@ const builtinPanels = [
   { moduleId: "media", label: "Media", order: 30, minRole: "editor", Panel: MediaManager },
   { moduleId: "forms", label: "Formulieren", order: 40, minRole: "editor", Panel: FormsPanel },
   { moduleId: "stats", label: "Statistieken", order: 50, minRole: "editor", Panel: StatsPanel },
+  // Webwinkel (5.5): alleen zichtbaar als de shop-module aanstaat.
+  { moduleId: "shop", label: "Webwinkel", order: 45, minRole: "editor", Panel: ShopPanel },
   // Bouwstenen (5.0): custom blocks zonder deploy — hangt aan de altijd-actieve content-module.
   { moduleId: "content", label: "Bouwstenen", order: 60, minRole: "siteadmin", Panel: CustomBlocksPanel },
   { moduleId: "settings", label: "Instellingen", order: 100, minRole: "siteadmin", Panel: SettingsPanel }

package/dist/admin/panelRegistry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/admin/panelRegistry.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Paneel-registry — koppelt een beheer-paneel aan een module-id. `AdminApp` rendert de tabs\n * hieruit (gesorteerd op `order`, gated op rol én actieve-module-set) i.p.v. hardgecodeerd. Een\n * nieuwe module met een eigen paneel hoeft `AdminApp` dus niet meer aan te raken.\n */\nimport type { ComponentType } from \"react\";\nimport { PagesPanel } from \"./pages/PagesPanel\";\nimport { MediaManager } from \"./media/MediaManager\";\nimport { FormsPanel } from \"./forms/FormsPanel\";\nimport { StatsPanel } from \"./stats/StatsPanel\";\nimport { SettingsPanel } from \"./settings/SettingsPanel\";\nimport { NewsEditor } from \"./NewsEditor\";\nimport { CustomBlocksPanel } from \"./customBlocks/CustomBlocksPanel\";\n\nexport type PanelMinRole = \"editor\" | \"siteadmin\";\n\nexport interface PanelDefinition {\n  /** Moet overeenkomen met de module-`id`; bepaalt of het paneel actief is. */\n  moduleId: string;\n  label: string;\n  /** Sorteervolgorde (laag = links). Instellingen staat vast achteraan (100). */\n  order: number;\n  minRole: PanelMinRole;\n  Panel: ComponentType<{ siteId: string }>;\n}\n\n/** Adapter: de NewsEditor leest zelf siteId via context; wrap voor een uniforme prop-signatuur. */\nfunction NewsPanel(_: { siteId: string }) {\n  return <NewsEditor />;\n}\n\n/** De panelen van de ingebouwde modules. */\nexport const builtinPanels: PanelDefinition[] = [\n  { moduleId: \"pages\", label: \"Pagina's\", order: 10, minRole: \"editor\", Panel: PagesPanel },\n  { moduleId: \"news\", label: \"Nieuws\", order: 20, minRole: \"editor\", Panel: NewsPanel },\n  { moduleId: \"media\", label: \"Media\", order: 30, minRole: \"editor\", Panel: MediaManager },\n  { moduleId: \"forms\", label: \"Formulieren\", order: 40, minRole: \"editor\", Panel: FormsPanel },\n  { moduleId: \"stats\", label: \"Statistieken\", order: 50, minRole: \"editor\", Panel: StatsPanel },\n  // Bouwstenen (5.0): custom blocks zonder deploy — hangt aan de altijd-actieve content-module.\n  { moduleId: \"content\", label: \"Bouwstenen\", order: 60, minRole: \"siteadmin\", Panel: CustomBlocksPanel },\n  { moduleId: \"settings\", label: \"Instellingen\", order: 100, minRole: \"siteadmin\", Panel: SettingsPanel },\n];\n"],"mappings":";AA8BS;AAtBT,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAelC,SAAS,UAAU,GAAuB;AACxC,SAAO,oBAAC,cAAW;AACrB;AAGO,MAAM,gBAAmC;AAAA,EAC9C,EAAE,UAAU,SAAS,OAAO,YAAY,OAAO,IAAI,SAAS,UAAU,OAAO,WAAW;AAAA,EACxF,EAAE,UAAU,QAAQ,OAAO,UAAU,OAAO,IAAI,SAAS,UAAU,OAAO,UAAU;AAAA,EACpF,EAAE,UAAU,SAAS,OAAO,SAAS,OAAO,IAAI,SAAS,UAAU,OAAO,aAAa;AAAA,EACvF,EAAE,UAAU,SAAS,OAAO,eAAe,OAAO,IAAI,SAAS,UAAU,OAAO,WAAW;AAAA,EAC3F,EAAE,UAAU,SAAS,OAAO,gBAAgB,OAAO,IAAI,SAAS,UAAU,OAAO,WAAW;AAAA;AAAA,EAE5F,EAAE,UAAU,WAAW,OAAO,cAAc,OAAO,IAAI,SAAS,aAAa,OAAO,kBAAkB;AAAA,EACtG,EAAE,UAAU,YAAY,OAAO,gBAAgB,OAAO,KAAK,SAAS,aAAa,OAAO,cAAc;AACxG;","names":[]}
+{"version":3,"sources":["../../src/admin/panelRegistry.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Paneel-registry — koppelt een beheer-paneel aan een module-id. `AdminApp` rendert de tabs\n * hieruit (gesorteerd op `order`, gated op rol én actieve-module-set) i.p.v. hardgecodeerd. Een\n * nieuwe module met een eigen paneel hoeft `AdminApp` dus niet meer aan te raken.\n */\nimport type { ComponentType } from \"react\";\nimport { PagesPanel } from \"./pages/PagesPanel\";\nimport { MediaManager } from \"./media/MediaManager\";\nimport { FormsPanel } from \"./forms/FormsPanel\";\nimport { StatsPanel } from \"./stats/StatsPanel\";\nimport { SettingsPanel } from \"./settings/SettingsPanel\";\nimport { NewsEditor } from \"./NewsEditor\";\nimport { CustomBlocksPanel } from \"./customBlocks/CustomBlocksPanel\";\nimport { ShopPanel } from \"./shop/ShopPanel\";\n\nexport type PanelMinRole = \"editor\" | \"siteadmin\";\n\nexport interface PanelDefinition {\n  /** Moet overeenkomen met de module-`id`; bepaalt of het paneel actief is. */\n  moduleId: string;\n  label: string;\n  /** Sorteervolgorde (laag = links). Instellingen staat vast achteraan (100). */\n  order: number;\n  minRole: PanelMinRole;\n  Panel: ComponentType<{ siteId: string }>;\n}\n\n/** Adapter: de NewsEditor leest zelf siteId via context; wrap voor een uniforme prop-signatuur. */\nfunction NewsPanel(_: { siteId: string }) {\n  return <NewsEditor />;\n}\n\n/** De panelen van de ingebouwde modules. */\nexport const builtinPanels: PanelDefinition[] = [\n  { moduleId: \"pages\", label: \"Pagina's\", order: 10, minRole: \"editor\", Panel: PagesPanel },\n  { moduleId: \"news\", label: \"Nieuws\", order: 20, minRole: \"editor\", Panel: NewsPanel },\n  { moduleId: \"media\", label: \"Media\", order: 30, minRole: \"editor\", Panel: MediaManager },\n  { moduleId: \"forms\", label: \"Formulieren\", order: 40, minRole: \"editor\", Panel: FormsPanel },\n  { moduleId: \"stats\", label: \"Statistieken\", order: 50, minRole: \"editor\", Panel: StatsPanel },\n  // Webwinkel (5.5): alleen zichtbaar als de shop-module aanstaat.\n  { moduleId: \"shop\", label: \"Webwinkel\", order: 45, minRole: \"editor\", Panel: ShopPanel },\n  // Bouwstenen (5.0): custom blocks zonder deploy — hangt aan de altijd-actieve content-module.\n  { moduleId: \"content\", label: \"Bouwstenen\", order: 60, minRole: \"siteadmin\", Panel: CustomBlocksPanel },\n  { moduleId: \"settings\", label: \"Instellingen\", order: 100, minRole: \"siteadmin\", Panel: SettingsPanel },\n];\n"],"mappings":";AA+BS;AAvBT,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAe1B,SAAS,UAAU,GAAuB;AACxC,SAAO,oBAAC,cAAW;AACrB;AAGO,MAAM,gBAAmC;AAAA,EAC9C,EAAE,UAAU,SAAS,OAAO,YAAY,OAAO,IAAI,SAAS,UAAU,OAAO,WAAW;AAAA,EACxF,EAAE,UAAU,QAAQ,OAAO,UAAU,OAAO,IAAI,SAAS,UAAU,OAAO,UAAU;AAAA,EACpF,EAAE,UAAU,SAAS,OAAO,SAAS,OAAO,IAAI,SAAS,UAAU,OAAO,aAAa;AAAA,EACvF,EAAE,UAAU,SAAS,OAAO,eAAe,OAAO,IAAI,SAAS,UAAU,OAAO,WAAW;AAAA,EAC3F,EAAE,UAAU,SAAS,OAAO,gBAAgB,OAAO,IAAI,SAAS,UAAU,OAAO,WAAW;AAAA;AAAA,EAE5F,EAAE,UAAU,QAAQ,OAAO,aAAa,OAAO,IAAI,SAAS,UAAU,OAAO,UAAU;AAAA;AAAA,EAEvF,EAAE,UAAU,WAAW,OAAO,cAAc,OAAO,IAAI,SAAS,aAAa,OAAO,kBAAkB;AAAA,EACtG,EAAE,UAAU,YAAY,OAAO,gBAAgB,OAAO,KAAK,SAAS,aAAa,OAAO,cAAc;AACxG;","names":[]}

package/dist/admin/shop/CategoriesTab.d.ts

@@ -0,0 +1,3 @@
+export declare function CategoriesTab({ siteId }: {
+    siteId: string;
+}): import("react").JSX.Element;

package/dist/admin/shop/CategoriesTab.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { addDoc, collection, deleteDoc, doc, onSnapshot, setDoc } from "firebase/firestore";
+import { getDb } from "../../firebase/client";
+import { ShopCategorySchema } from "../../schema/shop";
+import { Button, Card, Field, Input, Textarea } from "../ui/primitives";
+import { Switch } from "../ui/switch";
+import { useToast } from "../ui/toast";
+import { useConfirm } from "../ui/ConfirmDialog";
+import { MediaPickerButton } from "../media/MediaPicker";
+import { slugify } from "../lib/slugify";
+function CategoriesTab({ siteId }) {
+  const { toast } = useToast();
+  const confirm = useConfirm();
+  const [cats, setCats] = useState([]);
+  const [selected, setSelected] = useState(null);
+  useEffect(() => {
+    const db = getDb();
+    if (!db) return;
+    return onSnapshot(
+      collection(db, "sites", siteId, "shopCategories"),
+      (snap) => setCats(
+        snap.docs.map((d) => ({ id: d.id, ...d.data() })).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+      )
+    );
+  }, [siteId]);
+  async function createCategory() {
+    const db = getDb();
+    if (!db) return;
+    const ref = await addDoc(collection(db, "sites", siteId, "shopCategories"), {
+      name: "Nieuwe categorie",
+      slug: `categorie-${cats.length + 1}`,
+      order: cats.length,
+      visible: true
+    });
+    setSelected(ref.id);
+  }
+  const current = cats.find((c) => c.id === selected) ?? null;
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-[260px_1fr]", children: [
+    /* @__PURE__ */ jsxs(Card, { className: "h-fit", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Categorie\xEBn" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", onClick: createCategory, children: "+ Nieuw" })
+      ] }),
+      /* @__PURE__ */ jsxs("ul", { className: "grid gap-1", children: [
+        cats.map((c) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setSelected(c.id),
+            className: `w-full truncate rounded-lg px-3 py-2 text-left text-sm ${c.id === selected ? "bg-brand-50 text-brand-700" : "hover:bg-slate-100"}`,
+            children: [
+              c.name,
+              c.visible === false && /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs text-slate-400", children: "(verborgen)" })
+            ]
+          }
+        ) }, c.id)),
+        cats.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-slate-500", children: "Nog geen categorie\xEBn." })
+      ] })
+    ] }),
+    current ? /* @__PURE__ */ jsx(
+      CategoryDetail,
+      {
+        siteId,
+        category: current,
+        onDeleted: () => setSelected(null),
+        onToast: toast,
+        confirm
+      },
+      current.id
+    ) : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Selecteer of maak een categorie." }) })
+  ] });
+}
+function CategoryDetail({
+  siteId,
+  category,
+  onDeleted,
+  onToast,
+  confirm
+}) {
+  const [def, setDef] = useState(category);
+  async function save() {
+    const db = getDb();
+    if (!db) return;
+    const parsed = ShopCategorySchema.safeParse(def);
+    if (!parsed.success) {
+      onToast({ title: "Ongeldige categorie", description: parsed.error.issues[0]?.message, tone: "error" });
+      return;
+    }
+    await setDoc(doc(db, "sites", siteId, "shopCategories", category.id), parsed.data);
+    onToast({ title: "Categorie opgeslagen", tone: "success" });
+  }
+  async function remove() {
+    const db = getDb();
+    if (!db) return;
+    const ok = await confirm({
+      title: `"${category.name}" verwijderen?`,
+      description: "Producten in deze categorie blijven bestaan (alleen de koppeling vervalt)."
+    });
+    if (!ok) return;
+    await deleteDoc(doc(db, "sites", siteId, "shopCategories", category.id));
+    onDeleted();
+  }
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+    /* @__PURE__ */ jsx(Field, { label: "Naam", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: def.name,
+        onChange: (e) => setDef((p) => ({ ...p, name: e.target.value, slug: slugify(e.target.value) || p.slug }))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Field, { label: "Slug", hint: "Wordt gebruikt in de winkel-URL (?cat=\u2026)", children: /* @__PURE__ */ jsx(Input, { value: def.slug, onChange: (e) => setDef((p) => ({ ...p, slug: slugify(e.target.value) })) }) }),
+    /* @__PURE__ */ jsx(Field, { label: "Omschrijving (optioneel)", children: /* @__PURE__ */ jsx(Textarea, { rows: 2, value: def.description ?? "", onChange: (e) => setDef((p) => ({ ...p, description: e.target.value })) }) }),
+    /* @__PURE__ */ jsx(Field, { label: "Afbeelding", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      def.imageUrl && /* @__PURE__ */ jsx("img", { src: def.imageUrl, alt: "", className: "h-14 w-14 rounded-lg object-cover" }),
+      /* @__PURE__ */ jsx(MediaPickerButton, { siteId, onSelect: (m) => setDef((p) => ({ ...p, imageUrl: m.url })) }),
+      def.imageUrl && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => setDef((p) => ({ ...p, imageUrl: void 0 })), children: "Verwijder" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx(Field, { label: "Volgorde", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "number",
+          className: "w-24",
+          value: def.order ?? 0,
+          onChange: (e) => setDef((p) => ({ ...p, order: Math.max(0, Number(e.target.value) || 0) }))
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Switch, { checked: def.visible !== false, onCheckedChange: (v) => setDef((p) => ({ ...p, visible: v })), label: "Zichtbaar in de winkel" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Button, { onClick: save, children: "Opslaan" }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: remove, children: "Verwijderen" })
+    ] })
+  ] }) });
+}
+export {
+  CategoriesTab
+};
+//# sourceMappingURL=CategoriesTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/shop/CategoriesTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { addDoc, collection, deleteDoc, doc, onSnapshot, setDoc } from \"firebase/firestore\";\nimport { getDb } from \"../../firebase/client\";\nimport { ShopCategorySchema, type ShopCategory } from \"../../schema/shop\";\nimport { Button, Card, Field, Input, Textarea } from \"../ui/primitives\";\nimport { Switch } from \"../ui/switch\";\nimport { useToast } from \"../ui/toast\";\nimport { useConfirm } from \"../ui/ConfirmDialog\";\nimport { MediaPickerButton } from \"../media/MediaPicker\";\nimport { slugify } from \"../lib/slugify\";\n\ntype StoredCategory = ShopCategory & { id: string };\n\nexport function CategoriesTab({ siteId }: { siteId: string }) {\n  const { toast } = useToast();\n  const confirm = useConfirm();\n  const [cats, setCats] = useState<StoredCategory[]>([]);\n  const [selected, setSelected] = useState<string | null>(null);\n\n  useEffect(() => {\n    const db = getDb();\n    if (!db) return;\n    return onSnapshot(collection(db, \"sites\", siteId, \"shopCategories\"), (snap) =>\n      setCats(\n        snap.docs\n          .map((d) => ({ id: d.id, ...(d.data() as ShopCategory) }))\n          .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),\n      ),\n    );\n  }, [siteId]);\n\n  async function createCategory() {\n    const db = getDb();\n    if (!db) return;\n    const ref = await addDoc(collection(db, \"sites\", siteId, \"shopCategories\"), {\n      name: \"Nieuwe categorie\",\n      slug: `categorie-${cats.length + 1}`,\n      order: cats.length,\n      visible: true,\n    } satisfies ShopCategory);\n    setSelected(ref.id);\n  }\n\n  const current = cats.find((c) => c.id === selected) ?? null;\n\n  return (\n    <div className=\"grid gap-4 md:grid-cols-[260px_1fr]\">\n      <Card className=\"h-fit\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <h3 className=\"text-sm font-semibold\">Categorieën</h3>\n          <Button size=\"sm\" onClick={createCategory}>+ Nieuw</Button>\n        </div>\n        <ul className=\"grid gap-1\">\n          {cats.map((c) => (\n            <li key={c.id}>\n              <button\n                onClick={() => setSelected(c.id)}\n                className={`w-full truncate rounded-lg px-3 py-2 text-left text-sm ${\n                  c.id === selected ? \"bg-brand-50 text-brand-700\" : \"hover:bg-slate-100\"\n                }`}\n              >\n                {c.name}\n                {c.visible === false && <span className=\"ml-1 text-xs text-slate-400\">(verborgen)</span>}\n              </button>\n            </li>\n          ))}\n          {cats.length === 0 && <li className=\"px-3 py-2 text-sm text-slate-500\">Nog geen categorieën.</li>}\n        </ul>\n      </Card>\n      {current ? (\n        <CategoryDetail\n          key={current.id}\n          siteId={siteId}\n          category={current}\n          onDeleted={() => setSelected(null)}\n          onToast={toast}\n          confirm={confirm}\n        />\n      ) : (\n        <Card>\n          <p className=\"text-sm text-slate-500\">Selecteer of maak een categorie.</p>\n        </Card>\n      )}\n    </div>\n  );\n}\n\nfunction CategoryDetail({\n  siteId,\n  category,\n  onDeleted,\n  onToast,\n  confirm,\n}: {\n  siteId: string;\n  category: StoredCategory;\n  onDeleted: () => void;\n  onToast: (t: { title: string; description?: string; tone?: \"default\" | \"success\" | \"error\" }) => void;\n  confirm: (opts: { title: string; description?: string }) => Promise<boolean>;\n}) {\n  const [def, setDef] = useState<ShopCategory>(category);\n\n  async function save() {\n    const db = getDb();\n    if (!db) return;\n    const parsed = ShopCategorySchema.safeParse(def);\n    if (!parsed.success) {\n      onToast({ title: \"Ongeldige categorie\", description: parsed.error.issues[0]?.message, tone: \"error\" });\n      return;\n    }\n    await setDoc(doc(db, \"sites\", siteId, \"shopCategories\", category.id), parsed.data);\n    onToast({ title: \"Categorie opgeslagen\", tone: \"success\" });\n  }\n\n  async function remove() {\n    const db = getDb();\n    if (!db) return;\n    const ok = await confirm({\n      title: `\"${category.name}\" verwijderen?`,\n      description: \"Producten in deze categorie blijven bestaan (alleen de koppeling vervalt).\",\n    });\n    if (!ok) return;\n    await deleteDoc(doc(db, \"sites\", siteId, \"shopCategories\", category.id));\n    onDeleted();\n  }\n\n  return (\n    <Card>\n      <div className=\"grid gap-4\">\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=\"Wordt gebruikt in de winkel-URL (?cat=…)\">\n          <Input value={def.slug} onChange={(e) => setDef((p) => ({ ...p, slug: slugify(e.target.value) }))} />\n        </Field>\n        <Field label=\"Omschrijving (optioneel)\">\n          <Textarea rows={2} value={def.description ?? \"\"} onChange={(e) => setDef((p) => ({ ...p, description: e.target.value }))} />\n        </Field>\n        <Field label=\"Afbeelding\">\n          <div className=\"flex items-center gap-3\">\n            {def.imageUrl && <img src={def.imageUrl} alt=\"\" className=\"h-14 w-14 rounded-lg object-cover\" />}\n            <MediaPickerButton siteId={siteId} onSelect={(m) => setDef((p) => ({ ...p, imageUrl: m.url }))} />\n            {def.imageUrl && (\n              <Button size=\"sm\" variant=\"ghost\" onClick={() => setDef((p) => ({ ...p, imageUrl: undefined }))}>\n                Verwijder\n              </Button>\n            )}\n          </div>\n        </Field>\n        <div className=\"flex items-center gap-6\">\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.visible !== false} onCheckedChange={(v) => setDef((p) => ({ ...p, visible: v }))} label=\"Zichtbaar in de winkel\" />\n        </div>\n        <div className=\"flex items-center justify-between\">\n          <Button onClick={save}>Opslaan</Button>\n          <Button variant=\"ghost\" onClick={remove}>Verwijderen</Button>\n        </div>\n      </div>\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/shop/ConnectionsTab.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Koppelingen — Stripe (eigen account van de klant) en e-mail (eigen SMTP, bv. Gmail of de
+ * mailbox bij de hostingpartij). Geheimen gaan uitsluitend via callables naar
+ * `sites/{siteId}/private/shop` (deny-all rules); dit paneel toont alleen gemaskeerde status.
+ * Alleen een siteadmin kan opslaan (de callables dwingen dat af).
+ */
+export declare function ConnectionsTab({ siteId }: {
+    siteId: string;
+}): import("react").JSX.Element;

package/dist/admin/shop/ConnectionsTab.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Badge, Button, Card, Field, Input } from "../ui/primitives";
+import { Switch } from "../ui/switch";
+import { useToast } from "../ui/toast";
+import { shopCallable } from "./lib";
+function ConnectionsTab({ siteId }) {
+  const { toast } = useToast();
+  const [status, setStatus] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [stripeKey, setStripeKey] = useState("");
+  const [smtp, setSmtp] = useState({ host: "", port: "465", secure: true, user: "", pass: "", fromName: "", fromEmail: "", notifyTo: "" });
+  const refresh = useCallback(async () => {
+    try {
+      const s = await shopCallable("getShopStatus")({ siteId });
+      setStatus(s);
+      setSmtp((p) => ({
+        ...p,
+        host: s.smtp.host ?? p.host,
+        port: String(s.smtp.port ?? 465),
+        user: s.smtp.user ?? p.user,
+        fromName: s.smtp.fromName ?? p.fromName,
+        fromEmail: s.smtp.fromEmail ?? p.fromEmail,
+        notifyTo: s.smtp.notifyTo ?? p.notifyTo
+      }));
+    } catch {
+      setStatus(null);
+    }
+  }, [siteId]);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  async function saveStripe() {
+    if (!stripeKey.trim().startsWith("rk_") && !stripeKey.trim().startsWith("sk_")) {
+      toast({ title: "Ongeldige sleutel", description: "Plak een geheime sleutel (sk_\u2026) of restricted key (rk_\u2026).", tone: "error" });
+      return;
+    }
+    setBusy(true);
+    try {
+      const res = await shopCallable("saveShopSecrets")({
+        siteId,
+        stripe: { secretKey: stripeKey.trim() }
+      });
+      toast({ title: "Stripe gekoppeld", description: res.account ? `Account: ${res.account}` : void 0, tone: "success" });
+      setStripeKey("");
+      await refresh();
+    } catch (e) {
+      toast({ title: "Stripe koppelen mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function saveSmtp() {
+    setBusy(true);
+    try {
+      await shopCallable("saveShopSecrets")({
+        siteId,
+        smtp: {
+          host: smtp.host.trim(),
+          port: Number(smtp.port) || 465,
+          secure: smtp.secure,
+          user: smtp.user.trim(),
+          // Leeg laten = bestaand wachtwoord behouden.
+          ...smtp.pass ? { pass: smtp.pass } : {},
+          fromName: smtp.fromName.trim(),
+          fromEmail: smtp.fromEmail.trim(),
+          notifyTo: smtp.notifyTo.trim()
+        }
+      });
+      toast({ title: "E-mailinstellingen opgeslagen", tone: "success" });
+      setSmtp((p) => ({ ...p, pass: "" }));
+      await refresh();
+    } catch (e) {
+      toast({ title: "Opslaan mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function sendTest() {
+    setBusy(true);
+    try {
+      const res = await shopCallable("sendShopTestMail")({ siteId });
+      toast({ title: "Testmail verstuurd", description: `Naar ${res.to} \u2014 check de inbox (en spam).`, tone: "success" });
+    } catch (e) {
+      toast({ title: "Testmail mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Stripe (betalingen)" }),
+        status && /* @__PURE__ */ jsx(Badge, { tone: status.stripe.configured ? "green" : "amber", children: status.stripe.configured ? `Gekoppeld${status.stripe.account ? ` \u2014 ${status.stripe.account}` : ""}` : "Nog niet gekoppeld" })
+      ] }),
+      /* @__PURE__ */ jsxs("ol", { className: "grid list-decimal gap-1 pl-5 text-sm text-slate-600", children: [
+        /* @__PURE__ */ jsxs("li", { children: [
+          "Maak een gratis account op ",
+          /* @__PURE__ */ jsx("a", { className: "underline", href: "https://dashboard.stripe.com/register", target: "_blank", rel: "noreferrer", children: "stripe.com" }),
+          " en doorloop de activatie (IBAN, KVK)."
+        ] }),
+        /* @__PURE__ */ jsxs("li", { children: [
+          "Zet in Stripe onder ",
+          /* @__PURE__ */ jsx("em", { children: "Settings \u2192 Payment methods" }),
+          " iDEAL aan."
+        ] }),
+        /* @__PURE__ */ jsxs("li", { children: [
+          "Maak onder ",
+          /* @__PURE__ */ jsx("em", { children: "Developers \u2192 API keys" }),
+          " een sleutel aan en plak hem hieronder. De webhook wordt automatisch voor je aangemaakt."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Field, { label: "Geheime sleutel (sk_live_\u2026 of rk_live_\u2026)", hint: "Wordt veilig opgeslagen; nooit zichtbaar in de browser", children: /* @__PURE__ */ jsx(Input, { type: "password", value: stripeKey, onChange: (e) => setStripeKey(e.target.value), placeholder: "sk_live_\u2026" }) }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { onClick: saveStripe, disabled: busy || !stripeKey.trim(), children: "Koppel Stripe" }) }),
+      status?.stripe.configured && !status.stripe.webhookConfigured && /* @__PURE__ */ jsx("p", { className: "rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-700", children: "Webhook nog niet geregistreerd \u2014 koppel opnieuw met een sleutel die webhook-rechten heeft." })
+    ] }) }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "E-mail (bestelbevestigingen)" }),
+        status && /* @__PURE__ */ jsx(Badge, { tone: status.smtp.configured ? "green" : "amber", children: status.smtp.configured ? "Ingesteld" : "Nog niet ingesteld" })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-slate-600", children: [
+        "Mail wordt verstuurd via je eigen mailbox (SMTP): bv. het e-mailadres bij je hostingpartij, of Gmail (smtp.gmail.com, poort 465, met een ",
+        /* @__PURE__ */ jsx("a", { className: "underline", href: "https://myaccount.google.com/apppasswords", target: "_blank", rel: "noreferrer", children: "app-wachtwoord" }),
+        "). Zonder SMTP-instellingen valt de mail terug op de centrale XiWebdesign-afzender."
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-[1fr_110px]", children: [
+        /* @__PURE__ */ jsx(Field, { label: "SMTP-server", children: /* @__PURE__ */ jsx(Input, { value: smtp.host, onChange: (e) => setSmtp((p) => ({ ...p, host: e.target.value })), placeholder: "smtp.gmail.com" }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Poort", children: /* @__PURE__ */ jsx(Input, { value: smtp.port, onChange: (e) => setSmtp((p) => ({ ...p, port: e.target.value })), placeholder: "465" }) })
+      ] }),
+      /* @__PURE__ */ jsx(Switch, { checked: smtp.secure, onCheckedChange: (v) => setSmtp((p) => ({ ...p, secure: v })), label: "SSL (poort 465). Uit = STARTTLS (poort 587)" }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(Field, { label: "Gebruikersnaam", children: /* @__PURE__ */ jsx(Input, { value: smtp.user, onChange: (e) => setSmtp((p) => ({ ...p, user: e.target.value })), placeholder: "info@jouwdomein.nl" }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Wachtwoord", hint: status?.smtp.configured ? "Leeg laten = ongewijzigd" : void 0, children: /* @__PURE__ */ jsx(Input, { type: "password", value: smtp.pass, onChange: (e) => setSmtp((p) => ({ ...p, pass: e.target.value })) }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(Field, { label: "Afzendernaam", children: /* @__PURE__ */ jsx(Input, { value: smtp.fromName, onChange: (e) => setSmtp((p) => ({ ...p, fromName: e.target.value })), placeholder: "Christelijk Kraamcadeau" }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Afzenderadres", children: /* @__PURE__ */ jsx(Input, { value: smtp.fromEmail, onChange: (e) => setSmtp((p) => ({ ...p, fromEmail: e.target.value })), placeholder: "info@jouwdomein.nl" }) })
+      ] }),
+      /* @__PURE__ */ jsx(Field, { label: "Notificatie-adres", hint: "Hier ontvang je zelf een mail bij elke bestelling", children: /* @__PURE__ */ jsx(Input, { value: smtp.notifyTo, onChange: (e) => setSmtp((p) => ({ ...p, notifyTo: e.target.value })), placeholder: "bestellingen@jouwdomein.nl" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { onClick: saveSmtp, disabled: busy || !smtp.host.trim(), children: "Opslaan" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: sendTest, disabled: busy || !status?.smtp.configured, children: "Stuur testmail" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Card, { className: "lg:col-span-2", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-slate-600", children: [
+      "Verzendkosten, valuta, ordernummer-prefix en de winkel-paden stel je in onder",
+      " ",
+      /* @__PURE__ */ jsx("strong", { children: "Instellingen \u2192 Modules \u2192 Webwinkel" }),
+      "."
+    ] }) })
+  ] });
+}
+export {
+  ConnectionsTab
+};
+//# sourceMappingURL=ConnectionsTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/shop/ConnectionsTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\nimport { Badge, Button, Card, Field, Input } from \"../ui/primitives\";\nimport { Switch } from \"../ui/switch\";\nimport { useToast } from \"../ui/toast\";\nimport { shopCallable } from \"./lib\";\n\ninterface ShopStatus {\n  stripe: { configured: boolean; account?: string; webhookConfigured: boolean };\n  smtp: { configured: boolean; host?: string; port?: number; user?: string; fromName?: string; fromEmail?: string; notifyTo?: string };\n}\n\n/**\n * Koppelingen — Stripe (eigen account van de klant) en e-mail (eigen SMTP, bv. Gmail of de\n * mailbox bij de hostingpartij). Geheimen gaan uitsluitend via callables naar\n * `sites/{siteId}/private/shop` (deny-all rules); dit paneel toont alleen gemaskeerde status.\n * Alleen een siteadmin kan opslaan (de callables dwingen dat af).\n */\nexport function ConnectionsTab({ siteId }: { siteId: string }) {\n  const { toast } = useToast();\n  const [status, setStatus] = useState<ShopStatus | null>(null);\n  const [busy, setBusy] = useState(false);\n\n  const [stripeKey, setStripeKey] = useState(\"\");\n  const [smtp, setSmtp] = useState({ host: \"\", port: \"465\", secure: true, user: \"\", pass: \"\", fromName: \"\", fromEmail: \"\", notifyTo: \"\" });\n\n  const refresh = useCallback(async () => {\n    try {\n      const s = await shopCallable<{ siteId: string }, ShopStatus>(\"getShopStatus\")({ siteId });\n      setStatus(s);\n      setSmtp((p) => ({\n        ...p,\n        host: s.smtp.host ?? p.host,\n        port: String(s.smtp.port ?? 465),\n        user: s.smtp.user ?? p.user,\n        fromName: s.smtp.fromName ?? p.fromName,\n        fromEmail: s.smtp.fromEmail ?? p.fromEmail,\n        notifyTo: s.smtp.notifyTo ?? p.notifyTo,\n      }));\n    } catch {\n      setStatus(null);\n    }\n  }, [siteId]);\n\n  useEffect(() => {\n    void refresh();\n  }, [refresh]);\n\n  async function saveStripe() {\n    if (!stripeKey.trim().startsWith(\"rk_\") && !stripeKey.trim().startsWith(\"sk_\")) {\n      toast({ title: \"Ongeldige sleutel\", description: \"Plak een geheime sleutel (sk_…) of restricted key (rk_…).\", tone: \"error\" });\n      return;\n    }\n    setBusy(true);\n    try {\n      const res = await shopCallable<{ siteId: string; stripe: { secretKey: string } }, { account?: string }>(\"saveShopSecrets\")({\n        siteId,\n        stripe: { secretKey: stripeKey.trim() },\n      });\n      toast({ title: \"Stripe gekoppeld\", description: res.account ? `Account: ${res.account}` : undefined, tone: \"success\" });\n      setStripeKey(\"\");\n      await refresh();\n    } catch (e) {\n      toast({ title: \"Stripe koppelen mislukt\", description: e instanceof Error ? e.message : undefined, tone: \"error\" });\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  async function saveSmtp() {\n    setBusy(true);\n    try {\n      await shopCallable<{ siteId: string; smtp: Record<string, unknown> }, { ok: boolean }>(\"saveShopSecrets\")({\n        siteId,\n        smtp: {\n          host: smtp.host.trim(),\n          port: Number(smtp.port) || 465,\n          secure: smtp.secure,\n          user: smtp.user.trim(),\n          // Leeg laten = bestaand wachtwoord behouden.\n          ...(smtp.pass ? { pass: smtp.pass } : {}),\n          fromName: smtp.fromName.trim(),\n          fromEmail: smtp.fromEmail.trim(),\n          notifyTo: smtp.notifyTo.trim(),\n        },\n      });\n      toast({ title: \"E-mailinstellingen opgeslagen\", tone: \"success\" });\n      setSmtp((p) => ({ ...p, pass: \"\" }));\n      await refresh();\n    } catch (e) {\n      toast({ title: \"Opslaan mislukt\", description: e instanceof Error ? e.message : undefined, tone: \"error\" });\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  async function sendTest() {\n    setBusy(true);\n    try {\n      const res = await shopCallable<{ siteId: string }, { to: string }>(\"sendShopTestMail\")({ siteId });\n      toast({ title: \"Testmail verstuurd\", description: `Naar ${res.to} — check de inbox (en spam).`, tone: \"success\" });\n    } catch (e) {\n      toast({ title: \"Testmail mislukt\", description: e instanceof Error ? e.message : undefined, tone: \"error\" });\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  return (\n    <div className=\"grid gap-4 lg:grid-cols-2\">\n      <Card>\n        <div className=\"grid gap-4\">\n          <div className=\"flex items-center justify-between\">\n            <h3 className=\"text-sm font-semibold\">Stripe (betalingen)</h3>\n            {status && (\n              <Badge tone={status.stripe.configured ? \"green\" : \"amber\"}>\n                {status.stripe.configured ? `Gekoppeld${status.stripe.account ? ` — ${status.stripe.account}` : \"\"}` : \"Nog niet gekoppeld\"}\n              </Badge>\n            )}\n          </div>\n          <ol className=\"grid list-decimal gap-1 pl-5 text-sm text-slate-600\">\n            <li>Maak een gratis account op <a className=\"underline\" href=\"https://dashboard.stripe.com/register\" target=\"_blank\" rel=\"noreferrer\">stripe.com</a> en doorloop de activatie (IBAN, KVK).</li>\n            <li>Zet in Stripe onder <em>Settings → Payment methods</em> iDEAL aan.</li>\n            <li>Maak onder <em>Developers → API keys</em> een sleutel aan en plak hem hieronder. De webhook wordt automatisch voor je aangemaakt.</li>\n          </ol>\n          <Field label=\"Geheime sleutel (sk_live_… of rk_live_…)\" hint=\"Wordt veilig opgeslagen; nooit zichtbaar in de browser\">\n            <Input type=\"password\" value={stripeKey} onChange={(e) => setStripeKey(e.target.value)} placeholder=\"sk_live_…\" />\n          </Field>\n          <div>\n            <Button onClick={saveStripe} disabled={busy || !stripeKey.trim()}>Koppel Stripe</Button>\n          </div>\n          {status?.stripe.configured && !status.stripe.webhookConfigured && (\n            <p className=\"rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-700\">\n              Webhook nog niet geregistreerd — koppel opnieuw met een sleutel die webhook-rechten heeft.\n            </p>\n          )}\n        </div>\n      </Card>\n\n      <Card>\n        <div className=\"grid gap-4\">\n          <div className=\"flex items-center justify-between\">\n            <h3 className=\"text-sm font-semibold\">E-mail (bestelbevestigingen)</h3>\n            {status && (\n              <Badge tone={status.smtp.configured ? \"green\" : \"amber\"}>\n                {status.smtp.configured ? \"Ingesteld\" : \"Nog niet ingesteld\"}\n              </Badge>\n            )}\n          </div>\n          <p className=\"text-sm text-slate-600\">\n            Mail wordt verstuurd via je eigen mailbox (SMTP): bv. het e-mailadres bij je hostingpartij, of Gmail\n            (smtp.gmail.com, poort 465, met een <a className=\"underline\" href=\"https://myaccount.google.com/apppasswords\" target=\"_blank\" rel=\"noreferrer\">app-wachtwoord</a>).\n            Zonder SMTP-instellingen valt de mail terug op de centrale XiWebdesign-afzender.\n          </p>\n          <div className=\"grid gap-4 md:grid-cols-[1fr_110px]\">\n            <Field label=\"SMTP-server\">\n              <Input value={smtp.host} onChange={(e) => setSmtp((p) => ({ ...p, host: e.target.value }))} placeholder=\"smtp.gmail.com\" />\n            </Field>\n            <Field label=\"Poort\">\n              <Input value={smtp.port} onChange={(e) => setSmtp((p) => ({ ...p, port: e.target.value }))} placeholder=\"465\" />\n            </Field>\n          </div>\n          <Switch checked={smtp.secure} onCheckedChange={(v) => setSmtp((p) => ({ ...p, secure: v }))} label=\"SSL (poort 465). Uit = STARTTLS (poort 587)\" />\n          <div className=\"grid gap-4 md:grid-cols-2\">\n            <Field label=\"Gebruikersnaam\">\n              <Input value={smtp.user} onChange={(e) => setSmtp((p) => ({ ...p, user: e.target.value }))} placeholder=\"info@jouwdomein.nl\" />\n            </Field>\n            <Field label=\"Wachtwoord\" hint={status?.smtp.configured ? \"Leeg laten = ongewijzigd\" : undefined}>\n              <Input type=\"password\" value={smtp.pass} onChange={(e) => setSmtp((p) => ({ ...p, pass: e.target.value }))} />\n            </Field>\n          </div>\n          <div className=\"grid gap-4 md:grid-cols-2\">\n            <Field label=\"Afzendernaam\">\n              <Input value={smtp.fromName} onChange={(e) => setSmtp((p) => ({ ...p, fromName: e.target.value }))} placeholder=\"Christelijk Kraamcadeau\" />\n            </Field>\n            <Field label=\"Afzenderadres\">\n              <Input value={smtp.fromEmail} onChange={(e) => setSmtp((p) => ({ ...p, fromEmail: e.target.value }))} placeholder=\"info@jouwdomein.nl\" />\n            </Field>\n          </div>\n          <Field label=\"Notificatie-adres\" hint=\"Hier ontvang je zelf een mail bij elke bestelling\">\n            <Input value={smtp.notifyTo} onChange={(e) => setSmtp((p) => ({ ...p, notifyTo: e.target.value }))} placeholder=\"bestellingen@jouwdomein.nl\" />\n          </Field>\n          <div className=\"flex items-center gap-2\">\n            <Button onClick={saveSmtp} disabled={busy || !smtp.host.trim()}>Opslaan</Button>\n            <Button variant=\"secondary\" onClick={sendTest} disabled={busy || !status?.smtp.configured}>Stuur testmail</Button>\n          </div>\n        </div>\n      </Card>\n\n      <Card className=\"lg:col-span-2\">\n        <p className=\"text-sm text-slate-600\">\n          Verzendkosten, valuta, ordernummer-prefix en de winkel-paden stel je in onder{\" \"}\n          <strong>Instellingen → Modules → Webwinkel</strong>.\n        </p>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/shop/OrdersTab.d.ts

@@ -0,0 +1,3 @@
+export declare function OrdersTab({ siteId }: {
+    siteId: string;
+}): import("react").JSX.Element;