@flowselections/floriday-klanten-module 1.0.15 → 1.0.16

package/dist-lib/components/klanten/NieuweKlant.js

@@ -5,8 +5,9 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
-import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Textarea, toast, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@flowselections/core";
-import { ArrowLeft } from "lucide-react";
+import { Button, Card, CardContent, Input, Label, Textarea, toast, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@flowselections/core";
+import { UserRound, MapPin, Landmark, ReceiptText, ChevronDown, Check, AlertCircle, Users, } from "lucide-react";
+import { BackLink } from "../../components/klanten/BackLink";
 import { createCustomer, listCustomerClasses } from "../../lib/customers.functions";
 import { customerCreateSchema } from "../../lib/customer-schemas";
 export function NieuweKlant() {
@@ -15,12 +16,18 @@ export function NieuweKlant() {
     const classesFn = useServerFn(listCustomerClasses);
     const [dupes, setDupes] = useState([]);
     const [pendingData, setPendingData] = useState(null);
+    const [open, setOpen] = useState({
+        algemeen: true, adres: true, bank: true, facturering: true,
+    });
+    const toggle = (k) => setOpen((s) => ({ ...s, [k]: !s[k] }));
     const { data: classData } = useQuery({
         queryKey: ["customer-classes"],
         queryFn: () => classesFn({ data: undefined }),
     });
     const form = useForm({
         resolver: zodResolver(customerCreateSchema),
+        mode: "onBlur",
+        reValidateMode: "onChange",
         defaultValues: {
             company_name: "", vat_number: "", contact_person: "", email: "", phone: "",
             street: "", house_number: "", postal_code: "", city: "", country: "Nederland",
@@ -50,17 +57,25 @@ export function NieuweKlant() {
     });
     const onSubmit = (values) => {
         setPendingData(values);
-        mut.mutate(values);
+        mut.mutate({ ...values, push_to_twinfield: true });
     };
     const forceCreate = () => {
         if (!pendingData)
             return;
         setDupes([]);
-        mut.mutate({ ...pendingData, force: true });
+        mut.mutate({ ...pendingData, force: true, push_to_twinfield: true });
     };
-    const fieldErr = (k) => form.formState.errors[k]?.message;
-    return (_jsxs("main", { className: "p-6 max-w-5xl mx-auto space-y-4", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate({ to: "/klanten" }), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), " Terug"] }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Algemeen" }) }), _jsxs(CardContent, { className: "grid grid-cols-2 gap-4", children: [_jsx(Field, { label: "Nummer", error: fieldErr("customer_number"), children: _jsx(Input, { ...form.register("customer_number") }) }), _jsx(Field, { label: "Bedrijfsnaam *", error: fieldErr("company_name"), children: _jsx(Input, { ...form.register("company_name") }) }), _jsx(Field, { label: "Taal", error: fieldErr("language"), children: _jsx(Input, { placeholder: "bv. nl, en", ...form.register("language") }) }), _jsx(Field, { label: "Website", error: fieldErr("website"), children: _jsx(Input, { ...form.register("website") }) }), _jsx(Field, { label: "BTW-nummer", error: fieldErr("vat_number"), children: _jsx(Input, { ...form.register("vat_number") }) }), _jsx(Field, { label: "KvK-nummer", error: fieldErr("coc_number"), children: _jsx(Input, { ...form.register("coc_number") }) }), _jsx(Field, { label: "Contactpersoon", error: fieldErr("contact_person"), children: _jsx(Input, { ...form.register("contact_person") }) }), _jsx(Field, { label: "T.a.v.", error: fieldErr("attention_to"), children: _jsx(Input, { ...form.register("attention_to") }) }), _jsx(Field, { label: "E-mail *", error: fieldErr("email"), children: _jsx(Input, { type: "email", ...form.register("email") }) }), _jsx(Field, { label: "E-mail voor facturering", error: fieldErr("billing_email"), children: _jsx(Input, { type: "email", ...form.register("billing_email") }) }), _jsx(Field, { label: "Telefoon", error: fieldErr("phone"), children: _jsx(Input, { ...form.register("phone") }) }), _jsx(Field, { label: "Faxnummer", error: fieldErr("fax"), children: _jsx(Input, { ...form.register("fax") }) }), _jsx(Field, { label: "Klantklasse", children: _jsxs(Select, { onValueChange: (v) => form.setValue("customer_class", v), defaultValue: "", children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies klasse..." }) }), _jsx(SelectContent, { children: (classData?.classes ?? []).map((c) => _jsx(SelectItem, { value: c, children: c }, c)) })] }) })] })] }), _jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Adres" }) }), _jsxs(CardContent, { className: "grid grid-cols-2 gap-4", children: [_jsx(Field, { label: "Adrestype", error: fieldErr("address_type"), children: _jsx(Input, { placeholder: "bv. Bezoek, Post", ...form.register("address_type") }) }), _jsx(Field, { label: "ICP landcode", error: fieldErr("icp_country_code"), children: _jsx(Input, { placeholder: "bv. NL", ...form.register("icp_country_code") }) }), _jsx(Field, { label: "Adresregel 1", error: fieldErr("address_line1"), children: _jsx(Input, { ...form.register("address_line1") }) }), _jsx(Field, { label: "Adresregel 2", error: fieldErr("address_line2"), children: _jsx(Input, { ...form.register("address_line2") }) }), _jsx(Field, { label: "Straat *", error: fieldErr("street"), children: _jsx(Input, { ...form.register("street") }) }), _jsx(Field, { label: "Huisnummer *", error: fieldErr("house_number"), children: _jsx(Input, { ...form.register("house_number") }) }), _jsx(Field, { label: "Postcode", error: fieldErr("postal_code"), children: _jsx(Input, { ...form.register("postal_code") }) }), _jsx(Field, { label: "Plaats", error: fieldErr("city"), children: _jsx(Input, { ...form.register("city") }) }), _jsx(Field, { label: "Land *", error: fieldErr("country"), children: _jsx(Input, { ...form.register("country") }) })] })] }), _jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Bankgegevens" }) }), _jsxs(CardContent, { className: "grid grid-cols-2 gap-4", children: [_jsx(Field, { label: "Bank - Naam", children: _jsx(Input, { ...form.register("bank_name") }) }), _jsx(Field, { label: "Bank - Rekeninghouder", children: _jsx(Input, { ...form.register("bank_account_holder") }) }), _jsx(Field, { label: "Bank - Rekeningnummer", children: _jsx(Input, { ...form.register("bank_account_number") }) }), _jsx(Field, { label: "Bank - IBAN", children: _jsx(Input, { ...form.register("bank_iban") }) }), _jsx(Field, { label: "Bank - BIC", children: _jsx(Input, { ...form.register("bank_bic") }) }), _jsx(Field, { label: "Bank - Nationale bankcode", children: _jsx(Input, { ...form.register("bank_national_code") }) }), _jsx(Field, { label: "Bank - Adresregel 1", children: _jsx(Input, { ...form.register("bank_address_line1") }) }), _jsx(Field, { label: "Bank - Adresregel 2", children: _jsx(Input, { ...form.register("bank_address_line2") }) }), _jsx(Field, { label: "Bank - Huisnummer", children: _jsx(Input, { ...form.register("bank_house_number") }) }), _jsx(Field, { label: "Bank - Postcode", children: _jsx(Input, { ...form.register("bank_postal_code") }) }), _jsx(Field, { label: "Bank - Plaats", children: _jsx(Input, { ...form.register("bank_city") }) }), _jsx(Field, { label: "Bank - Staat", children: _jsx(Input, { ...form.register("bank_state") }) }), _jsx(Field, { label: "Bank - Land", children: _jsx(Input, { ...form.register("bank_country") }) })] })] }), _jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Facturering & betaling" }) }), _jsxs(CardContent, { className: "grid grid-cols-2 gap-4", children: [_jsx(Field, { label: "Kortingspercentage (%)", error: fieldErr("discount_percentage"), children: _jsx(Input, { type: "number", step: "0.01", ...form.register("discount_percentage", { valueAsNumber: true }) }) }), _jsx(Field, { label: "Aantal kortingsdagen", error: fieldErr("discount_days"), children: _jsx(Input, { type: "number", ...form.register("discount_days", { valueAsNumber: true }) }) }), _jsx(Field, { label: "Aantal vervaldagen", error: fieldErr("payment_term_days"), children: _jsx(Input, { type: "number", ...form.register("payment_term_days", { valueAsNumber: true }) }) }), _jsx(Field, { label: "Btw-weergave op factuur", error: fieldErr("vat_display"), children: _jsx(Input, { placeholder: "bv. Inclusief, Exclusief", ...form.register("vat_display") }) }), _jsxs("div", { className: "col-span-2", children: [_jsx(Label, { children: "Notities" }), _jsx(Textarea, { ...form.register("notes") })] })] })] }), _jsxs("div", { className: "flex justify-end gap-2 mt-4", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => navigate({ to: "/klanten" }), children: "Annuleren" }), _jsx(Button, { type: "submit", disabled: mut.isPending, children: mut.isPending ? "Opslaan..." : "Klant aanmaken" })] })] }), _jsx(AlertDialog, { open: dupes.length > 0, onOpenChange: (o) => !o && setDupes([]), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Mogelijke duplicaten gevonden" }), _jsx(AlertDialogDescription, { children: _jsx("ul", { className: "list-disc pl-5 space-y-1 mt-2", children: dupes.map((d) => _jsxs("li", { children: [_jsx("strong", { children: d.company_name }), " \u2014 ", d.reason] }, d.id + d.reason)) }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: forceCreate, children: "Toch aanmaken" })] })] }) })] }));
+    const errors = form.formState.errors;
+    const errorCount = Object.keys(errors).length;
+    const touched = form.formState.touchedFields;
+    const values = form.watch();
+    const fieldErr = (k) => errors[k]?.message;
+    const isValid = (k) => !errors[k] && !!touched[k] && !!values[k];
+    return (_jsxs("main", { className: "min-h-screen bg-muted/30 pb-28", children: [_jsxs("div", { className: "max-w-6xl mx-auto px-6 pt-6", children: [_jsx(BackLink, {}), _jsxs("header", { className: "flex items-start gap-4 mb-6", children: [_jsx("div", { className: "h-12 w-12 shrink-0 rounded-full bg-primary/10 text-primary grid place-items-center", children: _jsx(UserRound, { className: "h-6 w-6" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Nieuwe klant" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Vul de gegevens in om een nieuwe klant aan te maken." })] })] }), errorCount > 0 && form.formState.isSubmitted && (_jsxs("div", { className: "mb-4 flex items-start gap-3 rounded-xl border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm", children: [_jsx(AlertCircle, { className: "h-5 w-5 shrink-0 text-destructive mt-0.5" }), _jsxs("div", { children: [_jsxs("p", { className: "font-medium text-destructive", children: ["Controleer ", errorCount, " ", errorCount === 1 ? "veld" : "velden"] }), _jsx("p", { className: "text-muted-foreground mt-0.5", children: "Er zijn een aantal velden nog niet correct ingevuld." })] })] })), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4", children: [_jsx(Section, { k: "algemeen", title: "Algemeen", icon: _jsx(Users, { className: "h-5 w-5" }), open: open.algemeen, onToggle: toggle, children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsx(Field, { label: "Nummer", error: fieldErr("customer_number"), success: isValid("customer_number"), children: _jsx(Input, { ...form.register("customer_number") }) }), _jsx(Field, { label: "Bedrijfsnaam", required: true, error: fieldErr("company_name"), success: isValid("company_name"), children: _jsx(Input, { "aria-invalid": !!errors.company_name, ...form.register("company_name") }) }), _jsx(Field, { label: "Taal", error: fieldErr("language"), children: _jsxs(Select, { value: form.watch("language") || "nl", onValueChange: (v) => form.setValue("language", v, { shouldValidate: true }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "nl", children: "nl" }), _jsx(SelectItem, { value: "en", children: "en" }), _jsx(SelectItem, { value: "de", children: "de" }), _jsx(SelectItem, { value: "fr", children: "fr" })] })] }) }), _jsx(Field, { label: "Website", error: fieldErr("website"), success: isValid("website"), children: _jsx(Input, { placeholder: "https://", ...form.register("website") }) }), _jsx(Field, { label: "BTW-nummer", error: fieldErr("vat_number"), success: isValid("vat_number"), children: _jsx(Input, { ...form.register("vat_number") }) }), _jsx(Field, { label: "KvK-nummer", error: fieldErr("coc_number"), success: isValid("coc_number"), children: _jsx(Input, { ...form.register("coc_number") }) }), _jsx(Field, { label: "Contactpersoon", error: fieldErr("contact_person"), success: isValid("contact_person"), children: _jsx(Input, { ...form.register("contact_person") }) }), _jsx(Field, { label: "T.a.v.", error: fieldErr("attention_to"), children: _jsx(Input, { ...form.register("attention_to") }) }), _jsx(Field, { label: "E-mail", required: true, error: fieldErr("email"), success: isValid("email"), children: _jsx(Input, { type: "email", "aria-invalid": !!errors.email, placeholder: "naam@bedrijf.nl", ...form.register("email") }) }), _jsx(Field, { label: "E-mail voor facturering", error: fieldErr("billing_email"), success: isValid("billing_email"), children: _jsx(Input, { type: "email", placeholder: "facturen@bedrijf.nl", ...form.register("billing_email") }) }), _jsx(Field, { label: "Telefoon", error: fieldErr("phone"), success: isValid("phone"), children: _jsx(Input, { ...form.register("phone") }) }), _jsx(Field, { label: "Faxnummer", error: fieldErr("fax"), children: _jsx(Input, { ...form.register("fax") }) }), _jsx(Field, { label: "Klantklasse", children: _jsxs(Select, { onValueChange: (v) => form.setValue("customer_class", v), defaultValue: "", children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies klasse..." }) }), _jsx(SelectContent, { children: (classData?.classes ?? []).map((c) => _jsx(SelectItem, { value: c, children: c }, c)) })] }) })] }) }), _jsx(Section, { k: "adres", title: "Adres", icon: _jsx(MapPin, { className: "h-5 w-5" }), open: open.adres, onToggle: toggle, children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(Field, { label: "Adres type", error: fieldErr("address_type"), children: _jsx(Input, { placeholder: "bv. Bezoek, Post", ...form.register("address_type") }) }), _jsx(Field, { label: "ICP landcode", error: fieldErr("icp_country_code"), children: _jsx(Input, { placeholder: "bv. NL", ...form.register("icp_country_code") }) }), _jsx(Field, { label: "Adresregel 1", error: fieldErr("address_line1"), children: _jsx(Input, { ...form.register("address_line1") }) }), _jsx(Field, { label: "Adresregel 2", error: fieldErr("address_line2"), children: _jsx(Input, { ...form.register("address_line2") }) }), _jsx(Field, { label: "Straat", required: true, error: fieldErr("street"), success: isValid("street"), children: _jsx(Input, { "aria-invalid": !!errors.street, ...form.register("street") }) }), _jsx(Field, { label: "Huisnummer", required: true, error: fieldErr("house_number"), success: isValid("house_number"), children: _jsx(Input, { "aria-invalid": !!errors.house_number, ...form.register("house_number") }) }), _jsx(Field, { label: "Postcode", error: fieldErr("postal_code"), success: isValid("postal_code"), children: _jsx(Input, { ...form.register("postal_code") }) }), _jsx(Field, { label: "Plaats", error: fieldErr("city"), success: isValid("city"), children: _jsx(Input, { ...form.register("city") }) }), _jsx(Field, { label: "Land", required: true, error: fieldErr("country"), success: isValid("country"), children: _jsxs(Select, { value: form.watch("country") || "Nederland", onValueChange: (v) => form.setValue("country", v, { shouldValidate: true }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "Nederland", children: "Nederland" }), _jsx(SelectItem, { value: "Belgi\u00EB", children: "Belgi\u00EB" }), _jsx(SelectItem, { value: "Duitsland", children: "Duitsland" }), _jsx(SelectItem, { value: "Frankrijk", children: "Frankrijk" }), _jsx(SelectItem, { value: "Verenigd Koninkrijk", children: "Verenigd Koninkrijk" })] })] }) })] }) }), _jsx(Section, { k: "bank", title: "Bankgegevens", icon: _jsx(Landmark, { className: "h-5 w-5" }), open: open.bank, onToggle: toggle, children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(Field, { label: "Bank - Naam", children: _jsx(Input, { ...form.register("bank_name") }) }), _jsx(Field, { label: "Bank - Rekeninghouder", children: _jsx(Input, { ...form.register("bank_account_holder") }) }), _jsx(Field, { label: "Bank - Rekeningnummer", children: _jsx(Input, { ...form.register("bank_account_number") }) }), _jsx(Field, { label: "Bank - IBAN", children: _jsx(Input, { placeholder: "NL00 BANK 0000 0000 00", ...form.register("bank_iban") }) }), _jsx(Field, { label: "Bank - BIC", children: _jsx(Input, { ...form.register("bank_bic") }) }), _jsx(Field, { label: "Bank - Nationale bankcode", children: _jsx(Input, { ...form.register("bank_national_code") }) }), _jsx(Field, { label: "Bank - Adresregel 1", children: _jsx(Input, { ...form.register("bank_address_line1") }) }), _jsx(Field, { label: "Bank - Adresregel 2", children: _jsx(Input, { ...form.register("bank_address_line2") }) }), _jsx(Field, { label: "Bank - Huisnummer", children: _jsx(Input, { ...form.register("bank_house_number") }) }), _jsx(Field, { label: "Bank - Postcode", children: _jsx(Input, { ...form.register("bank_postal_code") }) }), _jsx(Field, { label: "Bank - Plaats", children: _jsx(Input, { ...form.register("bank_city") }) }), _jsx(Field, { label: "Bank - Staat", children: _jsx(Input, { ...form.register("bank_state") }) }), _jsx("div", { className: "md:col-span-2", children: _jsx(Field, { label: "Bank - Land", children: _jsx(Input, { ...form.register("bank_country") }) }) })] }) }), _jsx(Section, { k: "facturering", title: "Facturering & betaling", icon: _jsx(ReceiptText, { className: "h-5 w-5" }), open: open.facturering, onToggle: toggle, children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(Field, { label: "Kortingspercentage (%)", error: fieldErr("discount_percentage"), children: _jsx(Input, { type: "number", step: "0.01", ...form.register("discount_percentage", { valueAsNumber: true }) }) }), _jsx(Field, { label: "Aantal kortingsdagen", error: fieldErr("discount_days"), children: _jsx(Input, { type: "number", ...form.register("discount_days", { valueAsNumber: true }) }) }), _jsx(Field, { label: "Aantal vervaldagen", error: fieldErr("payment_term_days"), children: _jsx(Input, { type: "number", ...form.register("payment_term_days", { valueAsNumber: true }) }) }), _jsx(Field, { label: "Btw-weergave op factuur", error: fieldErr("vat_display"), children: _jsxs(Select, { value: form.watch("vat_display") || "", onValueChange: (v) => form.setValue("vat_display", v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "bv. Inclusief, Exclusief" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "Inclusief", children: "Inclusief" }), _jsx(SelectItem, { value: "Exclusief", children: "Exclusief" })] })] }) }), _jsxs("div", { className: "md:col-span-2 space-y-1.5", children: [_jsx(Label, { children: "Notities" }), _jsx(Textarea, { rows: 4, ...form.register("notes") })] })] }) })] })] }), _jsx("div", { className: "fixed bottom-0 left-0 right-0 border-t bg-background/90 backdrop-blur z-20", children: _jsxs("div", { className: "max-w-6xl mx-auto px-6 py-3 flex justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => navigate({ to: "/klanten" }), children: "Annuleren" }), _jsxs(Button, { type: "button", onClick: form.handleSubmit(onSubmit), disabled: mut.isPending, children: [_jsx(Check, { className: "h-4 w-4 mr-2" }), mut.isPending ? "Opslaan..." : "Klant aanmaken"] })] }) }), _jsx(AlertDialog, { open: dupes.length > 0, onOpenChange: (o) => !o && setDupes([]), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Mogelijke duplicaten gevonden" }), _jsx(AlertDialogDescription, { children: _jsx("ul", { className: "list-disc pl-5 space-y-1 mt-2", children: dupes.map((d) => _jsxs("li", { children: [_jsx("strong", { children: d.company_name }), " \u2014 ", d.reason] }, d.id + d.reason)) }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: forceCreate, children: "Toch aanmaken" })] })] }) })] }));
+}
+function Section({ k, title, icon, open, onToggle, children, }) {
+    return (_jsxs(Card, { className: "rounded-2xl border shadow-sm overflow-hidden", children: [_jsxs("button", { type: "button", onClick: () => onToggle(k), className: "w-full flex items-center justify-between px-6 py-4 hover:bg-muted/40 transition-colors", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-primary", children: icon }), _jsx("span", { className: "text-base font-semibold", children: title })] }), _jsx(ChevronDown, { className: `h-5 w-5 text-muted-foreground transition-transform ${open ? "" : "-rotate-90"}` })] }), open && (_jsx(CardContent, { className: "px-6 pb-6 pt-0", children: children }))] }));
 }
-function Field({ label, error, children }) {
-    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: label }), children, error && _jsx("p", { className: "text-xs text-destructive", children: error })] }));
+function Field({ label, required, error, success, children, }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "text-sm font-medium", children: [label, required && _jsx("span", { className: "text-destructive ml-0.5", children: "*" })] }), _jsxs("div", { className: `relative ${error ? "[&_input]:border-destructive [&_input]:focus-visible:ring-destructive/30" : ""}`, children: [children, success && !error && (_jsx(Check, { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-emerald-600" }))] }), error && _jsxs("p", { className: "text-xs text-destructive flex items-center gap-1", children: [_jsx(AlertCircle, { className: "h-3 w-3" }), error] })] }));
 }

package/dist-lib/components/klanten/PriceGroupBadges.d.ts

@@ -0,0 +1,7 @@
+import type { PriceGroup } from "../../lib/price-groups.functions";
+export declare function PriceGroupBadges({ groups, max, emptyLabel, }: {
+    groups: PriceGroup[] | null | undefined;
+    max?: number;
+    emptyLabel?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PriceGroupBadges.d.ts.map

package/dist-lib/components/klanten/PriceGroupBadges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceGroupBadges.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/PriceGroupBadges.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE/D,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,GAAO,EACP,UAAgB,GACjB,EAAE;IACD,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,+BAoCA"}

package/dist-lib/components/klanten/PriceGroupBadges.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@flowselections/core";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+export function PriceGroupBadges({ groups, max = 1, emptyLabel = "—", }) {
+    const list = groups ?? [];
+    if (list.length === 0) {
+        return _jsx("span", { className: "text-muted-foreground", children: emptyLabel });
+    }
+    const visible = list.slice(0, max);
+    const extra = list.length - visible.length;
+    const tooltip = list.map((g) => g.name).join(", ");
+    return (_jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: _jsxs("span", { className: "inline-flex items-center gap-1 flex-wrap", children: [visible.map((g) => (_jsx(Badge, { variant: "secondary", className: "max-w-[160px] truncate", children: g.name }, g.id))), extra > 0 && (_jsxs(Badge, { variant: "outline", className: "text-xs", children: ["+", extra] }))] }) }), _jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { side: "top", sideOffset: 6, className: "z-50 max-w-xs rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md", children: [tooltip, _jsx(TooltipPrimitive.Arrow, { className: "fill-popover" })] }) })] }));
+}

package/dist-lib/components/klanten/SyncStatusChip.d.ts

@@ -0,0 +1,4 @@
+export declare function SyncStatusChip({ customerId }: {
+    customerId: string;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=SyncStatusChip.d.ts.map

package/dist-lib/components/klanten/SyncStatusChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SyncStatusChip.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/SyncStatusChip.tsx"],"names":[],"mappings":"AAUA,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,sCAsEpE"}

package/dist-lib/components/klanten/SyncStatusChip.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Badge } from "@flowselections/core";
+import { CheckCircle2, Clock, AlertTriangle, Loader2 } from "lucide-react";
+import { getTwinfieldSyncStatus, retryTwinfieldPush, } from "../../lib/accounting/twinfield/worker.functions";
+export function SyncStatusChip({ customerId }) {
+    const qc = useQueryClient();
+    const [retrying, setRetrying] = useState(false);
+    const fetchStatus = useServerFn(getTwinfieldSyncStatus);
+    const doRetry = useServerFn(retryTwinfieldPush);
+    const { data } = useQuery({
+        queryKey: ["twinfield-sync-status", customerId],
+        queryFn: () => fetchStatus({ data: { customerId } }),
+        refetchInterval: 30000,
+        staleTime: 15000,
+    });
+    const retry = useMutation({
+        mutationFn: async () => {
+            setRetrying(true);
+            return doRetry({ data: { customerId } });
+        },
+        onSettled: () => {
+            setRetrying(false);
+            qc.invalidateQueries({ queryKey: ["twinfield-sync-status", customerId] });
+        },
+    });
+    if (!data)
+        return null;
+    const latest = data.latest;
+    const customer = data.customer;
+    const synced = customer?.twinfield_synced_at;
+    const status = latest?.status;
+    // Toon niets als er nooit een queue-rij is geweest én er ook geen sync bestaat
+    if (!synced && !latest)
+        return null;
+    if (status === "failed" || status === "dead") {
+        return (_jsx("button", { type: "button", onClick: () => !retrying && retry.mutate(), className: "inline-flex items-center gap-1.5 text-xs", title: latest?.last_error ?? "Onbekende fout", children: _jsxs(Badge, { variant: "destructive", className: "gap-1", children: [retrying ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(AlertTriangle, { className: "h-3 w-3" }), "Synchronisatie mislukt \u2014 opnieuw proberen"] }) }));
+    }
+    if (status === "pending" || status === "processing") {
+        return (_jsxs(Badge, { variant: "secondary", className: "gap-1", children: [_jsx(Clock, { className: "h-3 w-3" }), "Wacht op synchronisatie"] }));
+    }
+    if (synced) {
+        const when = new Date(synced).toLocaleString("nl-NL", { dateStyle: "short", timeStyle: "short" });
+        return (_jsxs(Badge, { variant: "outline", className: "gap-1 text-emerald-700 border-emerald-200 bg-emerald-50", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), "Gesynchroniseerd \u00B7 ", when] }));
+    }
+    return null;
+}

package/dist-lib/components/klanten/pricegroups/CustomerPickerDialog.d.ts

@@ -0,0 +1,8 @@
+export declare function CustomerPickerDialog({ priceGroupId, open, onOpenChange, value, onChange, }: {
+    priceGroupId?: string;
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    value?: string[];
+    onChange?: (keys: string[]) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=CustomerPickerDialog.d.ts.map

package/dist-lib/components/klanten/pricegroups/CustomerPickerDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/klanten/pricegroups/CustomerPickerDialog.tsx"],"names":[],"mappings":"AAaA,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,GAClD,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACrC,+BA+HA"}

package/dist-lib/components/klanten/pricegroups/CustomerPickerDialog.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Button, Input, Checkbox, Badge, } from "@flowselections/core";
+import { Search } from "lucide-react";
+import { listExternalCustomers } from "../../../lib/external-customers.functions";
+import { setPriceGroupMembers, getCustomerPriceGroup, } from "../../../lib/price-groups-local.functions";
+export function CustomerPickerDialog({ priceGroupId, open, onOpenChange, value, onChange, }) {
+    const qc = useQueryClient();
+    const listCustomers = useServerFn(listExternalCustomers);
+    const getGroup = useServerFn(getCustomerPriceGroup);
+    const setMembers = useServerFn(setPriceGroupMembers);
+    const [search, setSearch] = useState("");
+    const [selected, setSelected] = useState(new Set());
+    const isControlled = onChange !== undefined;
+    const { data: customersData, isLoading } = useQuery({
+        queryKey: ["external-customers-picker"],
+        queryFn: () => listCustomers({ data: { search: "", status: "all", limit: 2000 } }),
+        enabled: open,
+    });
+    const { data: group } = useQuery({
+        queryKey: ["customer-price-group", priceGroupId],
+        queryFn: () => getGroup({ data: { id: priceGroupId } }),
+        enabled: open && !!priceGroupId && !isControlled,
+    });
+    useEffect(() => {
+        if (!open)
+            return;
+        if (isControlled) {
+            setSelected(new Set(value ?? []));
+        }
+        else if (group?.customerKeys) {
+            setSelected(new Set(group.customerKeys));
+        }
+    }, [group, open, isControlled, value]);
+    const customers = customersData?.customers ?? [];
+    const filtered = useMemo(() => {
+        const q = search.trim().toLowerCase();
+        if (!q)
+            return customers;
+        return customers.filter((c) => [c.display_name, c.commercial_name, c.city, c.email, c.vat_number]
+            .filter(Boolean).some((v) => String(v).toLowerCase().includes(q)));
+    }, [customers, search]);
+    const toggle = (key) => {
+        setSelected((prev) => {
+            const n = new Set(prev);
+            if (n.has(key))
+                n.delete(key);
+            else
+                n.add(key);
+            return n;
+        });
+    };
+    const saveMut = useMutation({
+        mutationFn: () => setMembers({ data: { id: priceGroupId, customerKeys: Array.from(selected) } }),
+        onSuccess: () => {
+            qc.invalidateQueries({ queryKey: ["customer-price-groups"] });
+            qc.invalidateQueries({ queryKey: ["customer-price-group", priceGroupId] });
+            onOpenChange(false);
+        },
+    });
+    const handleSave = () => {
+        if (isControlled) {
+            onChange(Array.from(selected));
+            onOpenChange(false);
+            return;
+        }
+        saveMut.mutate();
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-[720px]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Klanten toewijzen" }) }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoek op naam, plaats of BTW-nummer\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9" })] }), _jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [_jsxs("span", { children: [filtered.length, " klanten"] }), _jsxs("span", { children: [_jsx("strong", { className: "text-foreground", children: selected.size }), " geselecteerd"] })] }), _jsx("div", { className: "max-h-[380px] overflow-y-auto border rounded-md divide-y", children: isLoading ? (_jsx("div", { className: "p-6 text-center text-sm text-muted-foreground", children: "Laden\u2026" })) : filtered.length === 0 ? (_jsx("div", { className: "p-6 text-center text-sm text-muted-foreground", children: "Geen klanten gevonden." })) : filtered.map((c) => {
+                        const checked = selected.has(c.group_key);
+                        return (_jsxs("label", { className: "flex items-center gap-3 p-2.5 hover:bg-muted/50 cursor-pointer", children: [_jsx(Checkbox, { checked: checked, onCheckedChange: () => toggle(c.group_key) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm font-medium truncate", children: c.display_name }), _jsx("div", { className: "text-xs text-muted-foreground truncate", children: [c.city, c.country].filter(Boolean).join(" · ") || "—" })] }), _jsx("div", { className: "flex gap-1", children: c.providers.slice(0, 3).map((p) => (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: p }, p))) })] }, c.group_key));
+                    }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: "Annuleren" }), _jsx(Button, { onClick: handleSave, disabled: !isControlled && saveMut.isPending, children: !isControlled && saveMut.isPending ? "Opslaan…" : "Selectie opslaan" })] })] }) }));
+}

package/dist-lib/components/klanten/pricegroups/PriceGroupFormPage.d.ts

@@ -0,0 +1,4 @@
+export declare function PriceGroupFormPage({ editingId }: {
+    editingId?: string | null;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PriceGroupFormPage.d.ts.map

package/dist-lib/components/klanten/pricegroups/PriceGroupFormPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceGroupFormPage.d.ts","sourceRoot":"","sources":["../../../../src/components/klanten/pricegroups/PriceGroupFormPage.tsx"],"names":[],"mappings":"AAkLA,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,+BA0rB9E"}

package/dist-lib/components/klanten/pricegroups/PriceGroupFormPage.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { useNavigate } from "@tanstack/react-router";
+import { Button, Input, Label, Separator, Card, CardContent, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Checkbox, } from "@flowselections/core";
+import { ArrowRight, Check, ChevronDown, PencilLine, Calculator, Users, Globe2, Circle, CheckCircle2, Info, ChevronLeft, ChevronRight, ImageIcon } from "lucide-react";
+import { BackLink } from "../BackLink";
+import { createCustomerPriceGroup, updateCustomerPriceGroup, getCustomerPriceGroup, setPriceGroupMembers, } from "../../../lib/price-groups-local.functions";
+import { computePrice } from "../../../lib/pricing";
+import { listTradeItemsForPreview } from "../../../lib/floriday-trade-items.functions";
+import { ProductPickerDialog } from "./ProductPickerDialog";
+import { CustomerPickerDialog } from "./CustomerPickerDialog";
+import { UserPlus, Users2 } from "lucide-react";
+import { listExternalCustomers } from "../../../lib/external-customers.functions";
+import { Badge } from "@flowselections/core";
+import { toast } from "sonner";
+const emptyInput = {
+    name: "",
+    currency: "EUR",
+    pricing_mode: "manual",
+    group_type: "customer_specific",
+    price_scope: "incl_delivery",
+    include_stickers: false,
+    unit: "per_fust",
+    calc_type: "discount",
+    calc_value_type: "fixed",
+    calc_value: 0,
+    handling_fee: 0,
+    distribute_over: "ladingdrager",
+    rounding: "none",
+    rounding_step: 0.05,
+    is_active: true,
+};
+const STEP_TITLES = [
+    "Prijsgroep",
+    "Levering, diensten en afname hoeveelheid",
+    "Prijsberekening",
+    "Doelgroep",
+];
+function OptionCard({ selected, onClick, icon, title, description, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: "text-left rounded-lg border p-4 transition flex gap-3 items-start " +
+            (selected
+                ? "border-primary ring-2 ring-primary/30 bg-primary/5"
+                : "hover:border-primary/50 hover:bg-muted/40"), children: [_jsx("div", { className: "mt-0.5 " + (selected ? "text-primary" : "text-muted-foreground"), children: icon }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium text-sm", children: title }), _jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: description })] })] }));
+}
+function RadioBanner({ selected, onClick, title, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: "w-full text-left rounded-lg border px-4 py-3 flex items-center gap-3 transition " +
+            (selected
+                ? "bg-primary text-primary-foreground border-primary"
+                : "bg-background hover:border-primary/50 hover:bg-muted/40"), children: [selected
+                ? _jsx(CheckCircle2, { className: "h-5 w-5 shrink-0" })
+                : _jsx(Circle, { className: "h-5 w-5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "font-medium text-sm", children: title })] }));
+}
+function BulletList({ items }) {
+    return (_jsx("ul", { className: "space-y-1.5 pl-1", children: items.map((t, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm", children: [_jsx(Check, { className: "h-4 w-4 mt-0.5 text-primary shrink-0" }), _jsx("span", { children: t })] }, i))) }));
+}
+function StepSection({ index, title, subtitle, open, completed, disabled, onToggle, children, }) {
+    return (_jsxs(Card, { className: open ? "ring-1 ring-primary/40" : "", children: [_jsxs("button", { type: "button", onClick: disabled ? undefined : onToggle, disabled: disabled, className: "w-full flex items-center gap-3 px-6 py-4 text-left " +
+                    (disabled ? "cursor-not-allowed opacity-60" : "hover:bg-muted/40"), children: [_jsx("div", { className: "h-8 w-8 rounded-full flex items-center justify-center text-sm font-medium shrink-0 " +
+                            (completed
+                                ? "bg-primary/15 text-primary border border-primary/30"
+                                : open
+                                    ? "bg-primary text-primary-foreground"
+                                    : "bg-muted text-muted-foreground border"), children: completed && !open ? _jsx(Check, { className: "h-4 w-4" }) : index + 1 }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-base " + (open ? "font-semibold" : "font-medium"), children: title }), !open && subtitle && (_jsx("div", { className: "text-xs text-muted-foreground truncate mt-0.5", children: subtitle }))] }), !disabled && (_jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground transition-transform " + (open ? "rotate-180" : "") }))] }), open && (_jsx(CardContent, { className: "pt-0 pb-6 px-6 space-y-4 border-t", children: _jsx("div", { className: "pt-6", children: children }) }))] }));
+}
+export function PriceGroupFormPage({ editingId }) {
+    const qc = useQueryClient();
+    const navigate = useNavigate();
+    const createFn = useServerFn(createCustomerPriceGroup);
+    const updateFn = useServerFn(updateCustomerPriceGroup);
+    const getFn = useServerFn(getCustomerPriceGroup);
+    const setMembersFn = useServerFn(setPriceGroupMembers);
+    const listCustomersFn = useServerFn(listExternalCustomers);
+    const [openStep, setOpenStep] = useState(0);
+    const [maxReached, setMaxReached] = useState(0);
+    const [form, setForm] = useState(emptyInput);
+    const [error, setError] = useState(null);
+    const [basePrice, setBasePrice] = useState(10);
+    const [selectedItemId, setSelectedItemId] = useState(null);
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [customerPickerOpen, setCustomerPickerOpen] = useState(false);
+    const [selectedCustomerKeys, setSelectedCustomerKeys] = useState([]);
+    const listTradeItemsFn = useServerFn(listTradeItemsForPreview);
+    const { data: tradeItemsData } = useQuery({
+        queryKey: ["trade-items-preview"],
+        queryFn: () => listTradeItemsFn(),
+        enabled: form.pricing_mode === "calculated",
+        staleTime: 5 * 60000,
+    });
+    const items = tradeItemsData?.items ?? [];
+    const selectedItem = useMemo(() => {
+        if (items.length === 0)
+            return null;
+        return items.find((i) => i.id === selectedItemId) ?? items[0];
+    }, [items, selectedItemId]);
+    useEffect(() => {
+        if (!selectedItemId && items[0])
+            setSelectedItemId(items[0].id);
+    }, [items, selectedItemId]);
+    const cycleItem = (dir) => {
+        if (items.length === 0 || !selectedItem)
+            return;
+        const idx = items.findIndex((i) => i.id === selectedItem.id);
+        const next = (idx + dir + items.length) % items.length;
+        setSelectedItemId(items[next].id);
+    };
+    const { data: existing, isLoading: loadingExisting } = useQuery({
+        queryKey: ["customer-price-group", editingId],
+        queryFn: () => getFn({ data: { id: editingId } }),
+        enabled: !!editingId,
+    });
+    useEffect(() => {
+        if (editingId && existing) {
+            const g = existing.group;
+            setForm({
+                name: g.name, currency: g.currency, pricing_mode: g.pricing_mode,
+                group_type: g.group_type ?? "customer_specific",
+                price_scope: g.price_scope, include_stickers: g.include_stickers,
+                unit: g.unit, calc_type: g.calc_type, calc_value_type: g.calc_value_type,
+                calc_value: g.calc_value, handling_fee: g.handling_fee,
+                distribute_over: g.distribute_over ?? "ladingdrager",
+                rounding: g.rounding ?? "none",
+                rounding_step: g.rounding_step != null ? Number(g.rounding_step) : 0.05,
+                is_active: g.is_active,
+            });
+            setSelectedCustomerKeys(existing.customerKeys ?? []);
+            setMaxReached(STEP_TITLES.length - 1);
+        }
+    }, [editingId, existing]);
+    const { data: allCustomersData } = useQuery({
+        queryKey: ["external-customers-picker"],
+        queryFn: () => listCustomersFn({ data: { search: "", status: "all", limit: 2000 } }),
+    });
+    const customersByKey = useMemo(() => {
+        const map = new Map();
+        for (const c of allCustomersData?.customers ?? [])
+            map.set(c.group_key, c);
+        return map;
+    }, [allCustomersData]);
+    const patch = (p) => setForm((f) => ({ ...f, ...p }));
+    const preview = useMemo(() => {
+        const calc = {
+            pricing_mode: form.pricing_mode,
+            calc_type: form.calc_type ?? null,
+            calc_value_type: form.calc_value_type ?? null,
+            calc_value: form.calc_value ?? null,
+            handling_fee: form.handling_fee ?? null,
+            distribute_over: form.distribute_over ?? null,
+            rounding: form.rounding,
+            rounding_step: form.rounding_step ?? 0.05,
+        };
+        return computePrice(basePrice, calc, {
+            unitsPerFust: selectedItem?.units_per_fust ?? 1,
+            packagesPerLayer: selectedItem?.packages_per_layer ?? 1,
+            layersPerCarrier: selectedItem?.layers_per_carrier ?? 1,
+        });
+    }, [form, basePrice, selectedItem]);
+    const handlingSuffix = useMemo(() => {
+        if (!selectedItem)
+            return "";
+        const upf = selectedItem.units_per_fust;
+        const ppl = selectedItem.packages_per_layer;
+        const lpc = selectedItem.layers_per_carrier;
+        switch (form.distribute_over) {
+            case "fust": return `/${upf}`;
+            case "laag": return `/(${upf}×${ppl})`;
+            case "ladingdrager": return `/(${upf}×${ppl}×${lpc})`;
+            default: return "";
+        }
+    }, [selectedItem, form.distribute_over]);
+    const goBack = () => navigate({ to: "/klanten/prijsgroepen" });
+    const saveMut = useMutation({
+        mutationFn: async () => {
+            if (form.group_type === "customer_specific" && selectedCustomerKeys.length === 0) {
+                throw new Error("Selecteer minimaal één organisatie in stap 4 voordat je een klantspecifieke prijsgroep opslaat.");
+            }
+            const row = editingId
+                ? await updateFn({ data: { id: editingId, input: form } })
+                : await createFn({ data: form });
+            const id = row?.id ?? editingId;
+            if (id) {
+                const keys = form.group_type === "customer_specific" ? selectedCustomerKeys : [];
+                await setMembersFn({ data: { id, customerKeys: keys } });
+            }
+            return row;
+        },
+        onSuccess: () => {
+            qc.invalidateQueries({ queryKey: ["customer-price-groups"] });
+            qc.invalidateQueries({ queryKey: ["customer-price-group", editingId] });
+            goBack();
+        },
+        onError: (e) => {
+            const msg = e?.message ?? "Opslaan mislukt";
+            setError(msg);
+            toast.error(msg);
+        },
+    });
+    const canProceed = (s) => (s === 0 ? form.name.trim().length > 0 : true);
+    const goToStep = (i) => {
+        if (i > maxReached)
+            return;
+        setOpenStep((cur) => (cur === i ? -1 : i));
+    };
+    const nextStep = (i) => {
+        if (!canProceed(i))
+            return;
+        // Van stap 2 naar stap 4 wanneer prijzen handmatig zijn (skip prijsberekening).
+        let target = i + 1;
+        if (i === 1 && form.pricing_mode === "manual")
+            target = 3;
+        // Skip stap 4 (Doelgroep) voor algemene prijsgroepen.
+        if (target === 3 && form.group_type !== "customer_specific") {
+            setMaxReached((m) => Math.max(m, 3));
+            setOpenStep(-1);
+            return;
+        }
+        const next = Math.min(target, STEP_TITLES.length - 1);
+        setMaxReached((m) => Math.max(m, next));
+        setOpenStep(next);
+    };
+    const summaries = [
+        form.name
+            ? `${form.name} · ${form.pricing_mode === "manual" ? "Handmatig" : "Berekend"} · ${form.group_type === "general" ? "Algemeen" : "Klantspecifiek"} · ${form.currency}`
+            : undefined,
+        `${form.price_scope === "incl_delivery" ? "Incl. levering" : "Excl. levering"} · ${form.unit === "per_fust" ? "Per fust" : form.unit === "per_laag" ? "Per laag" : "Per ladingdrager"}${form.include_stickers ? " · incl. stickers" : ""}`,
+        form.pricing_mode !== "calculated"
+            ? "Handmatige prijzen — niet van toepassing"
+            : (() => {
+                const typ = form.calc_type === "surcharge" ? "Opslag" : "Korting";
+                const val = form.calc_value_type === "percentage"
+                    ? `${form.calc_value ?? 0}%`
+                    : `€ ${(form.calc_value ?? 0).toFixed(3)}`;
+                const rnd = form.rounding === "none"
+                    ? "niet afronden"
+                    : `${form.rounding === "up" ? "omhoog" : form.rounding === "down" ? "omlaag" : "dichtstbijzijnde"} op € ${(form.rounding_step ?? 0.05).toFixed(2)}`;
+                return `${typ} ${val} · afhandelingskosten € ${(form.handling_fee ?? 0).toFixed(2)} · ${rnd}`;
+            })(),
+        form.group_type !== "customer_specific"
+            ? "Algemene prijsgroep — geen doelgroep"
+            : selectedCustomerKeys.length === 0
+                ? "Nog geen klanten"
+                : `${selectedCustomerKeys.length} klant${selectedCustomerKeys.length === 1 ? "" : "en"}`,
+    ];
+    if (editingId && loadingExisting) {
+        return _jsx("div", { className: "p-6 text-sm text-muted-foreground", children: "Laden\u2026" });
+    }
+    return (_jsxs("main", { className: "min-h-screen bg-muted/30 pb-28", children: [_jsxs("div", { className: "max-w-6xl mx-auto px-6 pt-6 space-y-4", children: [_jsx(BackLink, { to: "/klanten/prijsgroepen", label: "Terug naar prijsgroepen" }), _jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold", children: editingId ? "Prijsgroep bewerken" : "Nieuwe prijsgroep" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Stel prijsafspraken en berekening in. Klanten koppel je op het overzicht." })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-[1fr_340px] items-start", children: [_jsxs("div", { className: "space-y-4 min-w-0", children: [_jsx(StepSection, { index: 0, title: STEP_TITLES[0], subtitle: summaries[0], open: openStep === 0, completed: maxReached > 0, disabled: false, onToggle: () => goToStep(0), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { children: "Naam van de prijsgroep" }), _jsx("div", { className: "text-xs text-muted-foreground mb-1.5", children: "Alleen zichtbaar voor jou." }), _jsx(Input, { value: form.name, onChange: (e) => patch({ name: e.target.value }), placeholder: "Bijvoorbeeld: trouwe klanten" })] }), _jsxs("div", { className: "max-w-sm", children: [_jsx(Label, { children: "Valuta" }), _jsxs(Select, { value: form.currency, onValueChange: (v) => patch({ currency: v }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "EUR", children: "Euro" }), _jsx(SelectItem, { value: "USD", children: "Amerikaanse dollar" })] })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Prijsbepaling" }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-3 mt-2", children: [_jsx(OptionCard, { selected: form.pricing_mode === "manual", onClick: () => patch({ pricing_mode: "manual" }), icon: _jsx(PencilLine, { className: "h-5 w-5" }), title: "Prijzen handmatig invoeren", description: "Geef per prijsgroep handmatig een prijs in bij het aanbieden van artikelen." }), _jsx(OptionCard, { selected: form.pricing_mode === "calculated", onClick: () => patch({ pricing_mode: "calculated" }), icon: _jsx(Calculator, { className: "h-5 w-5" }), title: "Prijzen berekenen", description: "Bereken prijzen automatisch op basis van een basisprijs met een door jou samen te stellen berekening." })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Type prijsgroep" }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-3 mt-2", children: [_jsx(OptionCard, { selected: form.group_type === "general", onClick: () => patch({ group_type: "general" }), icon: _jsx(Globe2, { className: "h-5 w-5" }), title: "Algemene prijsgroep", description: "Zichtbaar voor alle klanten (alleen voor partijprijzen)." }), _jsx(OptionCard, { selected: form.group_type === "customer_specific", onClick: () => patch({ group_type: "customer_specific" }), icon: _jsx(Users, { className: "h-5 w-5" }), title: "Klantspecifieke prijsgroep", description: "Zichtbaar voor klanten die zijn ingedeeld in deze prijsgroep." })] })] }), _jsx("div", { className: "pt-2 flex justify-end", children: _jsxs(Button, { onClick: () => nextStep(0), disabled: !canProceed(0), children: ["Volgende stap ", _jsx(ArrowRight, { className: "h-4 w-4 ml-1" })] }) })] }) }), _jsx(StepSection, { index: 1, title: STEP_TITLES[1], subtitle: summaries[1], open: openStep === 1, completed: maxReached > 1, disabled: maxReached < 1, onToggle: () => goToStep(1), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(RadioBanner, { selected: form.price_scope === "incl_delivery", onClick: () => patch({ price_scope: "incl_delivery" }), title: "Prijzen inclusief levering en transport" }), form.price_scope === "incl_delivery" && (_jsx(BulletList, { items: [
+                                                                "Prijzen zichtbaar voor klanten die direct inkopen op Floriday",
+                                                                "Prijzen zijn inclusief levering en transport, ongeacht het bestelvolume",
+                                                            ] })), _jsx(RadioBanner, { selected: form.price_scope === "excl_delivery", onClick: () => patch({ price_scope: "excl_delivery" }), title: "Prijzen exclusief levering en transport" }), form.price_scope === "excl_delivery" && (_jsx(BulletList, { items: [
+                                                                "Prijzen zichtbaar voor klanten die direct inkopen op Floriday",
+                                                                "De ingestelde transport- en afleverkosten in de levervoorwaarden worden in rekening gebracht",
+                                                            ] }))] }), _jsxs("div", { className: "pt-2", children: [_jsx("div", { className: "text-sm text-muted-foreground mb-2", children: "Diensten" }), _jsx(Separator, { className: "mb-3" }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [_jsx(Checkbox, { checked: form.include_stickers, onCheckedChange: (v) => patch({ include_stickers: v === true }) }), _jsx("span", { className: "text-sm font-medium", children: "Inclusief stickeren" })] })] }), _jsxs("div", { className: "pt-2", children: [_jsx("div", { className: "text-sm text-muted-foreground mb-2", children: "Afname" }), _jsx(Separator, { className: "mb-3" }), _jsxs("div", { className: "max-w-sm", children: [_jsx(Label, { children: "Afname-eenheid" }), _jsxs(Select, { value: form.unit, onValueChange: (v) => patch({ unit: v }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "- Selecteer een eenheid -" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "per_fust", children: "Per fust" }), _jsx(SelectItem, { value: "per_laag", children: "Per laag" }), _jsx(SelectItem, { value: "per_ladingdrager", children: "Per ladingdrager" })] })] })] }), _jsxs("div", { className: "text-xs text-muted-foreground mt-2 leading-relaxed", children: ["Afname-eenheid per aangeboden artikel.", _jsx("br", {}), "Deze instelling geldt voor alle klanten in deze prijsgroep, per aangeboden artikel, niet per bestelling."] })] }), _jsx("div", { className: "pt-2 flex justify-end", children: _jsxs(Button, { onClick: () => nextStep(1), children: ["Volgende stap ", _jsx(ArrowRight, { className: "h-4 w-4 ml-1" })] }) })] }) }), _jsx(StepSection, { index: 2, title: STEP_TITLES[2], subtitle: summaries[2], open: openStep === 2, completed: form.pricing_mode === "calculated" && maxReached >= 2 && openStep !== 2, disabled: maxReached < 2 || form.pricing_mode !== "calculated", onToggle: () => goToStep(2), children: _jsx("div", { className: "space-y-4", children: form.pricing_mode !== "calculated" ? (_jsx("div", { className: "text-sm text-muted-foreground p-4 border rounded-md bg-muted/30", children: "Deze prijsgroep gebruikt handmatige prijzen. Prijsberekening is niet van toepassing." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx(Label, { children: "Korting/opslag per stuk" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-3 mt-1.5", children: [_jsxs(Select, { value: form.calc_type ?? "discount", onValueChange: (v) => patch({ calc_type: v }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "discount", children: "Korting" }), _jsx(SelectItem, { value: "surcharge", children: "Opslag" })] })] }), _jsxs(Select, { value: form.calc_value_type ?? "fixed", onValueChange: (v) => patch({ calc_value_type: v }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "percentage", children: "Percentage" }), _jsx(SelectItem, { value: "fixed", children: "Vast bedrag" })] })] }), _jsxs("div", { className: "relative", children: [form.calc_value_type !== "percentage" && (_jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none", children: "\u20AC" })), _jsx(Input, { type: "number", step: form.calc_value_type === "percentage" ? "1" : "0.001", value: form.calc_value ?? 0, onChange: (e) => patch({ calc_value: Number(e.target.value) }), className: form.calc_value_type === "percentage" ? "pr-8" : "pl-7" }), form.calc_value_type === "percentage" && (_jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none", children: "%" }))] })] })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsxs(Label, { className: "flex items-center gap-1.5", children: ["Afhandelingskosten (optioneel)", _jsx(Info, { className: "h-3.5 w-3.5 text-muted-foreground", "aria-label": "Extra kosten die bovenop de prijs komen. Kies hoe deze verdeeld worden." })] }), _jsxs("div", { className: "relative mt-1.5", children: [_jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none", children: "\u20AC" }), _jsx(Input, { type: "number", step: "0.01", value: form.handling_fee ?? 0, onChange: (e) => patch({ handling_fee: Number(e.target.value) }), className: "pl-7" })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Verdeeld over het aantal planten of bloemen op een" }), _jsxs(Select, { value: form.distribute_over ?? "ladingdrager", onValueChange: (v) => patch({ distribute_over: v }), children: [_jsx(SelectTrigger, { className: "mt-1.5", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "ladingdrager", children: "Ladingdrager" }), _jsx(SelectItem, { value: "laag", children: "Laag" }), _jsx(SelectItem, { value: "fust", children: "Fust" })] })] })] })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx(Label, { children: "Prijs afronden" }), _jsxs(Select, { value: form.rounding, onValueChange: (v) => patch({ rounding: v }), children: [_jsx(SelectTrigger, { className: "mt-1.5", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "none", children: "Niet afronden" }), _jsx(SelectItem, { value: "up", children: "Omhoog" }), _jsx(SelectItem, { value: "down", children: "Omlaag" }), _jsx(SelectItem, { value: "nearest", children: "Dichtstbijzijnde" })] })] })] }), form.rounding !== "none" && (_jsxs("div", { children: [_jsx(Label, { children: "Op" }), _jsxs(Select, { value: String(form.rounding_step ?? 0.05), onValueChange: (v) => patch({ rounding_step: Number(v) }), children: [_jsx(SelectTrigger, { className: "mt-1.5", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "0.01", children: "\u20AC 0,01" }), _jsx(SelectItem, { value: "0.05", children: "\u20AC 0,05" }), _jsx(SelectItem, { value: "0.1", children: "\u20AC 0,10" })] })] })] }))] }), _jsx("div", { className: "pt-2 flex justify-end", children: _jsxs(Button, { onClick: () => nextStep(2), children: ["Volgende stap ", _jsx(ArrowRight, { className: "h-4 w-4 ml-1" })] }) })] })) }) }), _jsxs(StepSection, { index: 3, title: STEP_TITLES[3], subtitle: summaries[3], open: openStep === 3, completed: form.group_type === "customer_specific" && maxReached >= 3 && openStep !== 3 && selectedCustomerKeys.length > 0, disabled: maxReached < 3 || form.group_type !== "customer_specific", onToggle: () => goToStep(3), children: [form.group_type !== "customer_specific" ? (_jsx("div", { className: "text-sm text-muted-foreground p-4 border rounded-md bg-muted/30", children: "Algemene prijsgroepen zijn zichtbaar voor alle klanten \u2014 een doelgroep is niet van toepassing." })) : selectedCustomerKeys.length === 0 ? (_jsxs("div", { className: "rounded-lg border bg-muted/20 p-8", children: [_jsxs("div", { className: "flex flex-col items-center text-center gap-3", children: [_jsxs("div", { className: "relative h-16 w-16 rounded-full bg-muted flex items-center justify-center", children: [_jsx(Users2, { className: "h-8 w-8 text-muted-foreground/60" }), _jsx("span", { className: "absolute -top-1 -right-1 h-6 w-6 rounded-full bg-background border flex items-center justify-center", children: _jsx(UserPlus, { className: "h-3.5 w-3.5 text-muted-foreground" }) })] }), _jsx("div", { children: _jsx("div", { className: "font-medium text-sm", children: "Nog geen klanten toegevoegd" }) })] }), _jsx("div", { className: "flex justify-end mt-4", children: _jsxs(Button, { variant: "outline", onClick: () => setCustomerPickerOpen(true), children: [_jsx(UserPlus, { className: "h-4 w-4 mr-1.5" }), " Organisaties wijzigen"] }) })] })) : (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: [_jsx("strong", { className: "text-foreground", children: selectedCustomerKeys.length }), " ", "klant", selectedCustomerKeys.length === 1 ? "" : "en", " gekoppeld"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setCustomerPickerOpen(true), children: [_jsx(UserPlus, { className: "h-4 w-4 mr-1.5" }), " Organisaties wijzigen"] })] }), _jsx("div", { className: "max-h-[320px] overflow-y-auto border rounded-md divide-y", children: selectedCustomerKeys.map((k) => {
+                                                            const c = customersByKey.get(k);
+                                                            return (_jsxs("div", { className: "flex items-center gap-3 p-2.5", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm font-medium truncate", children: c?.display_name ?? k }), _jsx("div", { className: "text-xs text-muted-foreground truncate", children: c ? [c.city, c.country].filter(Boolean).join(" · ") || "—" : "Niet in cache" })] }), _jsx("div", { className: "flex gap-1", children: (c?.providers ?? []).slice(0, 3).map((p) => (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: p }, p))) })] }, k));
+                                                        }) })] })), _jsx(CustomerPickerDialog, { open: customerPickerOpen, onOpenChange: setCustomerPickerOpen, value: selectedCustomerKeys, onChange: setSelectedCustomerKeys })] }), error && _jsx("div", { className: "text-sm text-destructive", children: error })] }), form.pricing_mode === "calculated" && (_jsxs("aside", { className: "lg:sticky lg:top-4 space-y-3", children: [_jsx(Card, { children: _jsxs(CardContent, { className: "p-4 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-sm font-medium", children: "Voorbeeld prijscalculatie" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "icon", className: "h-7 w-7", onClick: () => cycleItem(-1), disabled: items.length < 2, "aria-label": "Vorige product", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", className: "h-7 w-7", onClick: () => cycleItem(1), disabled: items.length < 2, "aria-label": "Volgend product", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })] }), _jsxs("button", { type: "button", onClick: () => setPickerOpen(true), className: "w-full flex items-center gap-3 text-left hover:bg-muted/30 rounded-md p-2 -m-2", children: [_jsx("div", { className: "h-14 w-14 rounded bg-muted flex items-center justify-center overflow-hidden shrink-0", children: selectedItem?.image_url
+                                                                ? _jsx("img", { src: selectedItem.image_url, alt: "", className: "h-full w-full object-contain" })
+                                                                : _jsx(ImageIcon, { className: "h-6 w-6 text-muted-foreground" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-medium truncate", children: selectedItem?.name ?? "Geen product beschikbaar" }), _jsx("div", { className: "text-xs text-muted-foreground truncate", children: selectedItem
+                                                                        ? [selectedItem.packaging_code,
+                                                                            `${selectedItem.units_per_fust}×${selectedItem.packages_per_layer}×${selectedItem.layers_per_carrier}`,
+                                                                            selectedItem.carrier_code]
+                                                                            .filter(Boolean).join(" - ")
+                                                                        : "Wacht op Floriday-cache" })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: "Basisprijs" }), _jsxs("div", { className: "relative mt-1.5", children: [_jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none", children: "\u20AC" }), _jsx(Input, { type: "number", step: "0.01", value: basePrice, onChange: (e) => setBasePrice(Number(e.target.value)), className: "pl-7" })] })] }), _jsxs("div", { children: [_jsx("div", { className: "flex justify-end text-xs text-muted-foreground mb-1", children: "Prijzen" }), _jsxs("div", { className: "space-y-1.5 text-sm tabular-nums border-t pt-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Basisprijs" }), _jsxs("span", { children: ["\u20AC ", basePrice.toFixed(2)] })] }), Math.abs(preview.discountAmount) > 0 && (_jsxs("div", { className: "flex justify-between", children: [_jsxs("span", { className: "text-muted-foreground", children: [form.calc_type === "surcharge" ? "Opslag" : "Korting", " ", form.calc_value_type === "percentage"
+                                                                                    ? `${(form.calc_value ?? 0).toLocaleString("nl-NL")}%`
+                                                                                    : `€ ${(form.calc_value ?? 0).toFixed(3)}`] }), _jsxs("span", { children: [preview.discountAmount < 0 ? "− " : "", "\u20AC ", Math.abs(preview.discountAmount).toFixed(2)] })] })), preview.handlingPerUnit > 0 && (_jsxs("div", { className: "flex justify-between items-baseline gap-2", children: [_jsxs("span", { className: "text-muted-foreground truncate", children: ["Afhandelingskosten (optioneel)", " ", _jsxs("span", { className: "italic text-muted-foreground/80", children: ["\u20AC ", (form.handling_fee ?? 0).toFixed(2).replace(".", ","), handlingSuffix] })] }), _jsxs("span", { children: ["\u20AC ", preview.handlingPerUnit.toFixed(3)] })] })), _jsxs("div", { className: "flex justify-between border-t pt-1.5", children: [_jsx("span", { className: form.rounding === "none" ? "font-medium" : "text-muted-foreground", children: "Berekende prijs" }), _jsxs("span", { className: form.rounding === "none" ? "font-medium" : "", children: ["\u20AC ", preview.adjusted.toFixed(3)] })] }), form.rounding !== "none" && (_jsxs("div", { className: "flex justify-between font-medium border-t pt-1.5", children: [_jsx("span", { children: "Afgeronde prijs" }), _jsxs("span", { children: ["\u20AC ", preview.rounded.toFixed(2)] })] }))] })] })] }) }), _jsx(ProductPickerDialog, { open: pickerOpen, onOpenChange: setPickerOpen, items: items, onSelect: (i) => setSelectedItemId(i.id) })] }))] })] }), _jsx("div", { className: "fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur border-t z-10", children: _jsxs("div", { className: "max-w-6xl mx-auto px-6 py-3 flex items-center justify-between", children: [_jsx(Button, { variant: "ghost", onClick: goBack, children: "Annuleren" }), _jsx(Button, { onClick: () => saveMut.mutate(), disabled: saveMut.isPending ||
+                                !form.name.trim() ||
+                                (form.group_type === "customer_specific" && selectedCustomerKeys.length === 0), children: saveMut.isPending ? "Opslaan…" : "Opslaan" })] }) })] }));
+}

package/dist-lib/components/klanten/pricegroups/PriceGroupsPage.d.ts

@@ -0,0 +1,2 @@
+export declare function PriceGroupsPage(): import("react").JSX.Element;
+//# sourceMappingURL=PriceGroupsPage.d.ts.map