@xiwebdesign/xicms-core 7.17.1 → 7.19.1

package/dist/admin/shop/OrdersTab.js

@@ -1,16 +1,16 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { collection, limit, onSnapshot, orderBy, query } from "firebase/firestore";
+import { collection, getDocs, limit, onSnapshot, orderBy, query, where } from "firebase/firestore";
 import { getDb } from "../../firebase/client.js";
 import { formatCents } from "../../schema/shop.js";
-import { Badge, Button, Card, Input } from "../ui/primitives.js";
+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 { useConfirm } from "../ui/ConfirmDialog.js";
 import { Dialog, DialogContent, DialogClose } from "../ui/dialog.js";
-import { ORDER_STATUS_LABELS, shopCallable } from "./lib.js";
+import { ORDER_STATUS_LABELS, centsToEuroInput, eurosToCents, shopCallable } from "./lib.js";
 const FILTERS = [
   { value: "all", label: "Alles" },
   { value: "pending", label: "Wacht op betaling" },
@@ -37,6 +37,27 @@ function OrdersTab({ siteId }) {
   const [busy, setBusy] = useState(false);
   const [invoice, setInvoice] = useState(null);
   const [shipOpen, setShipOpen] = useState(false);
+  const [mailOpen, setMailOpen] = useState(false);
+  const [mailSubject, setMailSubject] = useState("");
+  const [mailBody, setMailBody] = useState("");
+  const [mailCopy, setMailCopy] = useState(true);
+  const [refundOpen, setRefundOpen] = useState(false);
+  const [refundInput, setRefundInput] = useState("");
+  const [noteInput, setNoteInput] = useState("");
+  const [manualOpen, setManualOpen] = useState(false);
+  const [manual, setManual] = useState({ name: "", email: "", phone: "", address: "", zip: "", city: "", shipping: "", note: "", paid: true, notify: false });
+  const [manualLines, setManualLines] = useState([]);
+  const [producten, setProducten] = useState([]);
+  useEffect(() => {
+    if (!manualOpen || producten.length > 0) return;
+    const db = getDb();
+    if (!db) return;
+    void getDocs(query(collection(db, "sites", siteId, "products"), where("status", "==", "active"))).then(
+      (snap) => setProducten(
+        snap.docs.map((d) => ({ id: d.id, ...d.data() })).sort((a, b) => a.name.localeCompare(b.name, "nl"))
+      )
+    );
+  }, [manualOpen, producten.length, siteId]);
   const [trackingUrl, setTrackingUrl] = useState("");
   const [notify, setNotify] = useState(true);
   useEffect(() => {
@@ -72,6 +93,10 @@ function OrdersTab({ siteId }) {
     return list;
   }, [orders, filter, search]);
   const current = orders.find((o) => o.id === selected) ?? null;
+  useEffect(() => {
+    const o = orders.find((x) => x.id === selected);
+    setNoteInput(o?.adminNote ?? "");
+  }, [selected, orders]);
   async function setStatus(order, status) {
     setBusy(true);
     try {
@@ -95,24 +120,123 @@ function OrdersTab({ siteId }) {
       setBusy(false);
     }
   }
-  async function refund(order) {
+  function openstaand(order) {
+    return Math.max(0, order.amount.totalCents - (order.refundedCents ?? 0));
+  }
+  async function refund(order, bedragCents) {
+    const rest = openstaand(order);
+    const bedrag = bedragCents ?? rest;
+    const providerNaam = (order.provider ?? (order.mollie?.paymentId ? "mollie" : "stripe")) === "mollie" ? "Mollie" : "Stripe";
+    const volledig = bedrag >= rest;
     const ok = await confirm({
-      title: `Bestelling ${order.number} terugbetalen?`,
-      description: `Het volledige bedrag (${formatCents(order.amount.totalCents)}) wordt via Stripe teruggestort; de klant krijgt een e-mail.`,
+      title: volledig ? `Bestelling ${order.number} terugbetalen?` : `${formatCents(bedrag)} terugbetalen?`,
+      description: volledig ? `Het openstaande bedrag (${formatCents(rest)}) wordt via ${providerNaam} teruggestort; de klant krijgt een e-mail.` : `Er wordt ${formatCents(bedrag)} van ${formatCents(order.amount.totalCents)} via ${providerNaam} teruggestort. De bestelling blijft verder gewoon staan.`,
       tone: "danger",
       confirmLabel: "Terugbetalen"
     });
     if (!ok) return;
     setBusy(true);
     try {
-      await shopCallable("refundOrder")({ siteId, orderId: order.id });
-      toast({ title: "Terugbetaling gestart", tone: "success" });
+      await shopCallable("refundOrder")({
+        siteId,
+        orderId: order.id,
+        ...volledig ? {} : { amountCents: bedrag }
+      });
+      toast({ title: volledig ? "Terugbetaling gestart" : `${formatCents(bedrag)} teruggestort`, tone: "success" });
+      setRefundOpen(false);
+      setRefundInput("");
     } catch (e) {
       toast({ title: "Terugbetalen mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
     } finally {
       setBusy(false);
     }
   }
+  async function mailKlant(order) {
+    if (!mailSubject.trim() || !mailBody.trim()) return;
+    setBusy(true);
+    try {
+      await shopCallable("sendCustomerMail")({
+        siteId,
+        orderId: order.id,
+        subject: mailSubject.trim(),
+        body: mailBody.trim(),
+        copyToShop: mailCopy
+      });
+      toast({ title: "Bericht verstuurd", description: order.customer.email, tone: "success" });
+      setMailOpen(false);
+      setMailSubject("");
+      setMailBody("");
+    } catch (e) {
+      toast({ title: "Versturen mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function createManual() {
+    const regels = manualLines.filter((l) => l.productId && l.qty > 0);
+    if (!manual.name.trim() || !manual.email.trim() || regels.length === 0) {
+      toast({ title: "Vul naam, e-mail en minstens \xE9\xE9n product in", tone: "error" });
+      return;
+    }
+    setBusy(true);
+    try {
+      const res = await shopCallable("createManualOrder")({
+        siteId,
+        items: regels.map((l) => ({ productId: l.productId, variantKey: l.variantKey || void 0, qty: l.qty })),
+        customer: { name: manual.name.trim(), email: manual.email.trim(), phone: manual.phone.trim() || void 0 },
+        shipping: manual.address.trim() ? { address: manual.address.trim(), zip: manual.zip.trim(), city: manual.city.trim(), country: "NL" } : void 0,
+        shippingCents: eurosToCents(manual.shipping) ?? 0,
+        note: manual.note.trim() || void 0,
+        alBetaald: manual.paid,
+        notify: manual.notify
+      });
+      toast({ title: "Bestelling aangemaakt", description: manual.paid ? "Geboekt als betaald." : "Staat open.", tone: "success" });
+      setManualOpen(false);
+      setManualLines([]);
+      setManual({ name: "", email: "", phone: "", address: "", zip: "", city: "", shipping: "", note: "", paid: true, notify: false });
+      setSelected(res.id);
+    } catch (e) {
+      toast({ title: "Aanmaken mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function markPaid(order) {
+    const ok = await confirm({
+      title: `Bestelling ${order.number} als betaald boeken?`,
+      description: "Gebruik dit als je het geld buiten de webwinkel om hebt ontvangen (overschrijving, contant, pin). De voorraad wordt afgeboekt en de factuur wordt gemaakt.",
+      confirmLabel: "Als betaald boeken"
+    });
+    if (!ok) return;
+    setBusy(true);
+    try {
+      await shopCallable("markOrderPaidManually")({
+        siteId,
+        orderId: order.id,
+        notify
+      });
+      toast({ title: "Geboekt als betaald", tone: "success" });
+    } catch (e) {
+      toast({ title: "Mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function saveNote(order) {
+    setBusy(true);
+    try {
+      await shopCallable("setOrderNote")({
+        siteId,
+        orderId: order.id,
+        note: noteInput
+      });
+      toast({ title: "Notitie opgeslagen", tone: "success" });
+    } catch (e) {
+      toast({ title: "Opslaan mislukt", description: e instanceof Error ? e.message : void 0, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
   async function resendMail(order) {
     setBusy(true);
     try {
@@ -191,7 +315,10 @@ function OrdersTab({ siteId }) {
       /* @__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__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => setManualOpen(true), children: "+ Handmatig" }),
+            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: exportCsv, disabled: orders.length === 0, children: "CSV" })
+          ] })
         ] }),
         /* @__PURE__ */ jsx(Input, { placeholder: "Zoek op nummer, naam of e-mail\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "mb-2" }),
         /* @__PURE__ */ jsx(Select, { value: filter, onValueChange: setFilter, options: FILTERS, className: "mb-2" }),
@@ -241,7 +368,19 @@ function OrdersTab({ siteId }) {
             /* @__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 }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "text-brand-700 underline",
+                  title: "Mail deze klant vanuit de winkel (in huisstijl, met een kopie bij de bestelling)",
+                  onClick: () => {
+                    setMailSubject(`Over je bestelling ${current.number}`);
+                    setMailOpen(true);
+                  },
+                  children: current.customer.email
+                }
+              ),
               current.customer.phone && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("br", {}),
                 current.customer.phone
@@ -267,6 +406,27 @@ function OrdersTab({ siteId }) {
           /* @__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: "Interne notitie" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              rows: 2,
+              value: noteInput,
+              placeholder: "Alleen zichtbaar in het beheer\u2026",
+              onChange: (e) => setNoteInput(e.target.value)
+            }
+          ),
+          noteInput !== (current.adminNote ?? "") && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", className: "mt-2", disabled: busy, onClick: () => void saveNote(current), children: "Notitie opslaan" })
+        ] }),
+        (current.messages?.length ?? 0) > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "mb-1 text-sm font-semibold", children: "Verstuurde berichten" }),
+          /* @__PURE__ */ jsx("ul", { className: "grid gap-2", children: current.messages.map((m, i) => /* @__PURE__ */ jsxs("li", { className: "rounded-lg border border-slate-200 p-2 text-sm", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-slate-800", children: m.subject }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-400", children: new Date(m.at).toLocaleString("nl-NL", { dateStyle: "short", timeStyle: "short" }) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 whitespace-pre-wrap text-slate-600", children: m.body })
+          ] }, i)) })
+        ] }),
         /* @__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: [
@@ -338,6 +498,7 @@ function OrdersTab({ siteId }) {
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-t border-slate-100 pt-4", children: [
           current.status === "paid" && !shipOpen && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => setShipOpen(true), children: "Markeer als verzonden" }),
+          current.status === "pending" && /* @__PURE__ */ jsx(Button, { size: "sm", disabled: busy, onClick: () => void markPaid(current), children: "Als betaald boeken" }),
           ["pending", "paid"].includes(current.status) && /* @__PURE__ */ jsx(
             Button,
             {
@@ -354,9 +515,16 @@ function OrdersTab({ siteId }) {
               children: "Annuleer"
             }
           ),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", disabled: busy, onClick: () => {
+            setMailSubject(`Over je bestelling ${current.number}`);
+            setMailOpen(true);
+          }, children: "\u2709 Klant mailen" }),
           (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" })
+            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "danger", disabled: busy || openstaand(current) === 0, onClick: () => {
+              setRefundInput(centsToEuroInput(openstaand(current)));
+              setRefundOpen(true);
+            }, children: "Terugbetalen" })
           ] }),
           current.invoicePath && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", disabled: busy, onClick: () => viewInvoice(current, current.invoicePath), children: "Factuur bekijken" }),
           current.stripe?.paymentIntentId && /* @__PURE__ */ jsx(
@@ -372,6 +540,114 @@ function OrdersTab({ siteId }) {
         ] })
       ] }) }) : /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Selecteer een bestelling." }) })
     ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: manualOpen, onOpenChange: setManualOpen, children: /* @__PURE__ */ jsx(DialogContent, { title: "Bestelling handmatig aanmaken", width: "min(92vw, 44rem)", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Voor een bestelling die buiten de webwinkel om binnenkwam. Prijzen en btw komen uit je productenlijst, dus de omzet en de voorraad blijven kloppen." }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [
+        /* @__PURE__ */ jsx(Field, { label: "Naam", children: /* @__PURE__ */ jsx(Input, { value: manual.name, onChange: (e) => setManual((p) => ({ ...p, name: e.target.value })) }) }),
+        /* @__PURE__ */ jsx(Field, { label: "E-mail", children: /* @__PURE__ */ jsx(Input, { value: manual.email, onChange: (e) => setManual((p) => ({ ...p, email: e.target.value })) }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Telefoon (optioneel)", children: /* @__PURE__ */ jsx(Input, { value: manual.phone, onChange: (e) => setManual((p) => ({ ...p, phone: e.target.value })) }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium", children: "Producten" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          manualLines.map((l, i) => {
+            const prod = producten.find((p) => p.id === l.productId);
+            const varianten = (prod?.options?.length ?? 0) > 0 ? prod?.variants ?? [] : [];
+            return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_150px_70px_auto] items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: l.productId,
+                  onValueChange: (v) => setManualLines((p) => p.map((x, j) => j === i ? { ...x, productId: v, variantKey: "" } : x)),
+                  placeholder: "Kies product\u2026",
+                  options: producten.map((p) => ({ value: p.id, label: p.name }))
+                }
+              ),
+              varianten.length > 0 ? /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: l.variantKey,
+                  onValueChange: (v) => setManualLines((p) => p.map((x, j) => j === i ? { ...x, variantKey: v } : x)),
+                  placeholder: "Uitvoering\u2026",
+                  options: varianten.map((v) => ({ value: v.key, label: v.key.split("|").join(", ") }))
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-400", children: "\u2014" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "number",
+                  value: String(l.qty),
+                  onChange: (e) => setManualLines((p) => p.map((x, j) => j === i ? { ...x, qty: Math.max(1, Number(e.target.value) || 1) } : x))
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => setManualLines((p) => p.filter((_, j) => j !== i)), children: "\u2715" })
+            ] }, i);
+          }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => setManualLines((p) => [...p, { productId: "", variantKey: "", qty: 1 }]), children: "+ Regel" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-4", children: [
+        /* @__PURE__ */ jsx(Field, { label: "Adres", children: /* @__PURE__ */ jsx(Input, { value: manual.address, onChange: (e) => setManual((p) => ({ ...p, address: e.target.value })) }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Postcode", children: /* @__PURE__ */ jsx(Input, { value: manual.zip, onChange: (e) => setManual((p) => ({ ...p, zip: e.target.value })) }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Plaats", children: /* @__PURE__ */ jsx(Input, { value: manual.city, onChange: (e) => setManual((p) => ({ ...p, city: e.target.value })) }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Verzendkosten (\u20AC)", children: /* @__PURE__ */ jsx(Input, { value: manual.shipping, onChange: (e) => setManual((p) => ({ ...p, shipping: e.target.value })), placeholder: "0,00" }) })
+      ] }),
+      /* @__PURE__ */ jsx(Field, { label: "Notitie (optioneel)", children: /* @__PURE__ */ jsx(Input, { value: manual.note, onChange: (e) => setManual((p) => ({ ...p, note: e.target.value })), placeholder: "bv. telefonisch besteld, contant betaald" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4", children: [
+        /* @__PURE__ */ jsx(Switch, { checked: manual.paid, onCheckedChange: (v) => setManual((p) => ({ ...p, paid: v })), label: "Al betaald (voorraad afboeken + factuur maken)" }),
+        /* @__PURE__ */ jsx(Switch, { checked: manual.notify, onCheckedChange: (v) => setManual((p) => ({ ...p, notify: v })), label: "Bevestigingsmail naar de klant" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Annuleren" }) }),
+        /* @__PURE__ */ jsx(Button, { disabled: busy, onClick: () => void createManual(), children: busy ? "Bezig\u2026" : "Bestelling aanmaken" })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Dialog, { open: mailOpen, onOpenChange: setMailOpen, children: /* @__PURE__ */ jsx(DialogContent, { title: current ? `Mail ${current.customer.name}` : "Klant mailen", width: "min(92vw, 34rem)", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-slate-500", children: [
+        "Gaat naar ",
+        /* @__PURE__ */ jsx("strong", { children: current?.customer.email }),
+        " in de huisstijl van je site. Antwoorden komen binnen op je notificatie-adres."
+      ] }),
+      /* @__PURE__ */ jsx(Field, { label: "Onderwerp", children: /* @__PURE__ */ jsx(Input, { value: mailSubject, onChange: (e) => setMailSubject(e.target.value) }) }),
+      /* @__PURE__ */ jsx(Field, { label: "Bericht", children: /* @__PURE__ */ jsx(Textarea, { rows: 7, value: mailBody, onChange: (e) => setMailBody(e.target.value), placeholder: "Beste \u2026" }) }),
+      /* @__PURE__ */ jsx(Switch, { checked: mailCopy, onCheckedChange: setMailCopy, label: "Kopie naar mijzelf" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Annuleren" }) }),
+        /* @__PURE__ */ jsx(Button, { disabled: busy || !mailSubject.trim() || !mailBody.trim(), onClick: () => current && void mailKlant(current), children: busy ? "Bezig\u2026" : "Versturen" })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Dialog, { open: refundOpen, onOpenChange: setRefundOpen, children: /* @__PURE__ */ jsx(DialogContent, { title: current ? `Terugbetalen \u2014 ${current.number}` : "Terugbetalen", width: "min(92vw, 26rem)", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-slate-500", children: [
+        "Openstaand: ",
+        /* @__PURE__ */ jsx("strong", { children: current ? formatCents(openstaand(current)) : "\u2014" }),
+        current && (current.refundedCents ?? 0) > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " (er is al ",
+          formatCents(current.refundedCents),
+          " terugbetaald)"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Field, { label: "Bedrag (\u20AC)", hint: "Laat het volledige bedrag staan voor een hele terugbetaling", children: /* @__PURE__ */ jsx(Input, { value: refundInput, onChange: (e) => setRefundInput(e.target.value), className: "w-36" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Annuleren" }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "danger",
+            disabled: busy,
+            onClick: () => {
+              if (!current) return;
+              const cents = eurosToCents(refundInput);
+              if (cents === null || cents <= 0) {
+                toast({ title: "Vul een geldig bedrag in", tone: "error" });
+                return;
+              }
+              void refund(current, Math.min(cents, openstaand(current)));
+            },
+            children: busy ? "Bezig\u2026" : "Terugbetalen"
+          }
+        )
+      ] })
+    ] }) }) }),
     /* @__PURE__ */ jsx(Dialog, { open: !!invoice, onOpenChange: (o) => !o && setInvoice(null), children: invoice && /* @__PURE__ */ jsxs(DialogContent, { title: `Factuur ${invoice.number}`, width: "min(92vw, 48rem)", children: [
       /* @__PURE__ */ jsx(
         "iframe",