@xiwebdesign/xicms-core 5.3.0 → 5.5.0

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;

package/dist/admin/shop/OrdersTab.js

@@ -0,0 +1,236 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { collection, doc, limit, onSnapshot, orderBy, query, serverTimestamp, updateDoc } from "firebase/firestore";
+import { getDb } from "../../firebase/client";
+import { formatCents } from "../../schema/shop";
+import { Badge, Button, Card } from "../ui/primitives";
+import { Select } from "../ui/select";
+import { useToast } from "../ui/toast";
+import { useConfirm } from "../ui/ConfirmDialog";
+import { ORDER_STATUS_LABELS, shopCallable } from "./lib";
+const FILTERS = [
+  { value: "all", label: "Alles" },
+  { value: "pending", label: "Wacht op betaling" },
+  { value: "paid", label: "Betaald" },
+  { value: "shipped", label: "Verzonden" },
+  { value: "cancelled", label: "Geannuleerd" },
+  { value: "refunded", label: "Terugbetaald" },
+  { value: "donation", label: "Donaties" }
+];
+function fmtDate(t) {
+  if (!t?.toDate) return "\u2014";
+  return t.toDate().toLocaleString("nl-NL", { dateStyle: "short", timeStyle: "short" });
+}
+function OrdersTab({ siteId }) {
+  const { toast } = useToast();
+  const confirm = useConfirm();
+  const [orders, setOrders] = useState([]);
+  const [selected, setSelected] = useState(null);
+  const [filter, setFilter] = useState("all");
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    const db = getDb();
+    if (!db) return;
+    return onSnapshot(
+      query(collection(db, "sites", siteId, "orders"), orderBy("createdAt", "desc"), limit(200)),
+      (snap) => setOrders(snap.docs.map((d) => ({ id: d.id, ...d.data() })))
+    );
+  }, [siteId]);
+  const visible = useMemo(() => {
+    if (filter === "all") return orders;
+    if (filter === "donation") return orders.filter((o) => o.items.some((i) => i.kind === "donation"));
+    return orders.filter((o) => o.status === filter);
+  }, [orders, filter]);
+  const current = orders.find((o) => o.id === selected) ?? null;
+  async function setStatus(order, status) {
+    const db = getDb();
+    if (!db) return;
+    const patch = { status };
+    if (status === "shipped") patch.shippedAt = serverTimestamp();
+    await updateDoc(doc(db, "sites", siteId, "orders", order.id), patch);
+    toast({ title: status === "shipped" ? "Gemarkeerd als verzonden" : "Bestelling geannuleerd", tone: "success" });
+  }
+  async function refund(order) {
+    const ok = await confirm({
+      title: `Bestelling ${order.number} terugbetalen?`,
+      description: `Het volledige bedrag (${formatCents(order.amount.totalCents)}) wordt via Stripe teruggestort.`,
+      tone: "danger",
+      confirmLabel: "Terugbetalen"
+    });
+    if (!ok) return;
+    setBusy(true);
+    try {
+      await shopCallable("refundOrder")({ siteId, orderId: order.id });
+      toast({ title: "Terugbetaling gestart", tone: "success" });
+    } catch (e) {
+      toast({ title: "Terugbetalen mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function resendMail(order) {
+    setBusy(true);
+    try {
+      await shopCallable("resendOrderMail")({ siteId, orderId: order.id });
+      toast({ title: "Bevestigingsmail opnieuw verstuurd", tone: "success" });
+    } catch (e) {
+      toast({ title: "Mail versturen mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+  function exportCsv() {
+    const rows = [
+      ["nummer", "datum", "status", "naam", "email", "items", "subtotaal", "verzendkosten", "totaal"],
+      ...orders.map((o) => [
+        o.number,
+        fmtDate(o.createdAt),
+        o.status,
+        o.customer.name,
+        o.customer.email,
+        o.items.map((i) => `${i.qty}x ${i.name}${i.variantKey ? ` (${i.variantKey})` : ""}`).join(" | "),
+        (o.amount.itemsCents / 100).toFixed(2),
+        (o.amount.shippingCents / 100).toFixed(2),
+        (o.amount.totalCents / 100).toFixed(2)
+      ])
+    ];
+    const csv = rows.map((r) => r.map((c) => `"${String(c).replaceAll('"', '""')}"`).join(";")).join("\n");
+    const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = `bestellingen-${siteId}.csv`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-[340px_1fr]", children: [
+    /* @__PURE__ */ jsxs(Card, { className: "h-fit", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Bestellingen" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: exportCsv, disabled: orders.length === 0, children: "CSV" })
+      ] }),
+      /* @__PURE__ */ jsx(Select, { value: filter, onValueChange: setFilter, options: FILTERS, className: "mb-2" }),
+      /* @__PURE__ */ jsxs("ul", { className: "grid max-h-[65vh] gap-1 overflow-y-auto", children: [
+        visible.map((o) => {
+          const st = ORDER_STATUS_LABELS[o.status] ?? { label: o.status, tone: "slate" };
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setSelected(o.id),
+              className: `grid w-full gap-0.5 rounded-lg px-3 py-2 text-left text-sm ${o.id === selected ? "bg-brand-50 text-brand-700" : "hover:bg-slate-100"}`,
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: o.number }),
+                  /* @__PURE__ */ jsx(Badge, { tone: st.tone, children: st.label })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-2 text-xs text-slate-500", children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: o.customer.name }),
+                  /* @__PURE__ */ jsx("span", { children: formatCents(o.amount.totalCents) })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-400", children: fmtDate(o.createdAt) })
+              ]
+            }
+          ) }, o.id);
+        }),
+        visible.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-slate-500", children: "Geen bestellingen." })
+      ] })
+    ] }),
+    current ? /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("h3", { className: "text-base font-semibold", children: [
+          current.number,
+          " ",
+          /* @__PURE__ */ jsx(Badge, { tone: (ORDER_STATUS_LABELS[current.status] ?? { tone: "slate" }).tone, children: (ORDER_STATUS_LABELS[current.status] ?? { label: current.status }).label })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "text-sm text-slate-500", children: [
+          "Geplaatst: ",
+          fmtDate(current.createdAt)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "mb-1 text-sm font-semibold", children: "Klant" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+            current.customer.name,
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx("a", { className: "text-brand-700 underline", href: `mailto:${current.customer.email}`, children: current.customer.email }),
+            current.customer.phone && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("br", {}),
+              current.customer.phone
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "mb-1 text-sm font-semibold", children: "Verzendadres" }),
+          current.shipping ? /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+            current.shipping.address,
+            /* @__PURE__ */ jsx("br", {}),
+            current.shipping.zip,
+            " ",
+            current.shipping.city,
+            " (",
+            current.shipping.country,
+            ")"
+          ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Geen verzending (donatie)." })
+        ] })
+      ] }),
+      current.note && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h4", { className: "mb-1 text-sm font-semibold", children: "Opmerking van de klant" }),
+        /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm", children: current.note })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h4", { className: "mb-1 text-sm font-semibold", children: "Regels" }),
+        /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxs("tbody", { children: [
+          current.items.map((i, idx) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-slate-100", children: [
+            /* @__PURE__ */ jsxs("td", { className: "py-1 pr-2", children: [
+              i.qty,
+              "\xD7 ",
+              i.name,
+              i.variantKey && /* @__PURE__ */ jsxs("span", { className: "text-slate-500", children: [
+                " (",
+                i.variantKey.split("|").join(" \xB7 "),
+                ")"
+              ] }),
+              i.kind === "donation" && /* @__PURE__ */ jsx(Badge, { tone: "amber", children: "donatie" })
+            ] }),
+            /* @__PURE__ */ jsx("td", { className: "py-1 text-right", children: formatCents(i.unitPriceCents * i.qty) })
+          ] }, idx)),
+          /* @__PURE__ */ jsxs("tr", { className: "border-t border-slate-100 text-slate-500", children: [
+            /* @__PURE__ */ jsx("td", { className: "py-1 pr-2", children: "Verzendkosten" }),
+            /* @__PURE__ */ jsx("td", { className: "py-1 text-right", children: current.amount.shippingCents === 0 ? "gratis" : formatCents(current.amount.shippingCents) })
+          ] }),
+          /* @__PURE__ */ jsxs("tr", { className: "border-t border-slate-200 font-semibold", children: [
+            /* @__PURE__ */ jsx("td", { className: "py-1 pr-2", children: "Totaal" }),
+            /* @__PURE__ */ jsx("td", { className: "py-1 text-right", children: formatCents(current.amount.totalCents) })
+          ] })
+        ] }) })
+      ] }),
+      current.mail?.error && /* @__PURE__ */ jsxs("p", { className: "rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-700", children: [
+        "Bevestigingsmail mislukt: ",
+        current.mail.error
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-t border-slate-100 pt-4", children: [
+        current.status === "paid" && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => setStatus(current, "shipped"), children: "Markeer als verzonden" }),
+        current.status === "pending" && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => setStatus(current, "cancelled"), children: "Annuleer" }),
+        (current.status === "paid" || current.status === "shipped") && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", disabled: busy, onClick: () => resendMail(current), children: "Mail opnieuw versturen" }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "danger", disabled: busy, onClick: () => refund(current), children: "Terugbetalen" })
+        ] }),
+        current.stripe?.paymentIntentId && /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: "ml-auto text-sm text-brand-700 underline",
+            href: `https://dashboard.stripe.com/payments/${current.stripe.paymentIntentId}`,
+            target: "_blank",
+            rel: "noreferrer",
+            children: "Bekijk in Stripe \u2197"
+          }
+        )
+      ] })
+    ] }) }) : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Selecteer een bestelling." }) })
+  ] });
+}
+export {
+  OrdersTab
+};
+//# sourceMappingURL=OrdersTab.js.map