@flowselections/floriday-klanten-module 1.0.14 → 1.0.16

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

@@ -1,23 +1,55 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link } from "@tanstack/react-router";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 import { useState } from "react";
 import { Input, Card, CardContent, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Switch, Label, } from "@flowselections/core";
-import { ArrowLeft, Search } from "lucide-react";
+import { Search, MapPin, Globe } from "lucide-react";
+import { BackLink } from "../../components/klanten/BackLink";
 import { listFloridayNetwork } from "../../lib/customers.functions";
+import { CustomerAvatar } from "../CustomerAvatar";
+import { PriceGroupBadges } from "./PriceGroupBadges";
+import { FloridayDeeplinkButton } from "./FloridayDeeplinkButton";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+const TYPE_OPTIONS = [
+    { value: "CUSTOMER", label: "Klant" },
+    { value: "AGENT", label: "Agent" },
+    { value: "SUPPLIER", label: "Leverancier" },
+    { value: "CARRIER", label: "Vervoerder" },
+    { value: "OTHER", label: "Overig" },
+];
 export function NetwerkPagina() {
     const [search, setSearch] = useState("");
-    const [hideUnknown, setHideUnknown] = useState(true);
+    const [hideUnknown, setHideUnknown] = useState(false);
+    const [types, setTypes] = useState(["CUSTOMER", "AGENT"]);
+    const [includeExpired, setIncludeExpired] = useState(false);
     const list = useServerFn(listFloridayNetwork);
     const { data, isLoading } = useQuery({
-        queryKey: ["floriday-network", search],
-        queryFn: () => list({ data: { search } }),
+        queryKey: ["floriday-network", search, types, includeExpired],
+        queryFn: () => list({ data: { search, types, includeExpired, limit: 1000 } }),
     });
     const all = data?.organizations ?? [];
-    const orgs = hideUnknown
-        ? all.filter((o) => o.organization_name && o.organization_name.trim() !== "")
-        : all;
+    const named = all.filter((o) => o.organization_name && o.organization_name.trim() !== "");
+    const orgs = hideUnknown ? named : all;
     const hiddenCount = all.length - orgs.length;
-    return (_jsxs("main", { className: "p-6 space-y-4", children: [_jsx("div", { className: "flex items-center justify-between gap-4", children: _jsxs("div", { children: [_jsxs(Link, { to: "/klanten", className: "text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1", children: [_jsx(ArrowLeft, { className: "h-3 w-3" }), " Terug naar klanten"] }), _jsx("h1", { className: "text-2xl font-semibold mt-1", children: "Klanten toevoegen uit netwerk" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Doorzoek alle organisaties die via het netwerk beschikbaar zijn." })] }) }), _jsxs("div", { className: "relative max-w-md", 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 organisatienaam of GLN...", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9" })] }), _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Switch, { id: "hide-unknown", checked: hideUnknown, onCheckedChange: setHideUnknown }), _jsx(Label, { htmlFor: "hide-unknown", className: "cursor-pointer", children: "Verberg organisaties zonder naam" }), hideUnknown && hiddenCount > 0 ? (_jsxs("span", { className: "text-muted-foreground", children: ["(", hiddenCount, " verborgen)"] })) : null] }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Organisatie" }), _jsx(TableHead, { children: "GLN" }), _jsx(TableHead, { children: "Plaats" }), _jsx(TableHead, { children: "Land" }), _jsx(TableHead, { children: "Bijgewerkt" })] }) }), _jsx(TableBody, { children: isLoading ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "text-center py-8 text-muted-foreground", children: "Laden..." }) })) : orgs.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "text-center py-8 text-muted-foreground", children: "Geen organisaties gevonden." }) })) : (orgs.map((o) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: o.organization_name && o.organization_name.trim() !== "" ? (o.organization_name) : (_jsx("span", { className: "italic text-muted-foreground", children: "Onbekende organisatie" })) }), _jsx(TableCell, { children: o.gln ? (_jsx(Badge, { variant: "outline", children: o.gln })) : ("—") }), _jsx(TableCell, { children: o.city ?? "—" }), _jsx(TableCell, { children: o.country ?? "—" }), _jsx(TableCell, { className: "text-muted-foreground text-sm", children: new Date(o.fetched_at).toLocaleDateString("nl-NL") })] }, `${o.connection_id}-${o.organization_id}`)))) })] }) }) })] }));
+    const totalMatching = data?.total ?? all.length;
+    const truncated = !!data?.truncated;
+    const toggleType = (value) => {
+        setTypes((prev) => prev.includes(value) ? prev.filter((t) => t !== value) : [...prev, value]);
+    };
+    return (_jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: _jsxs("main", { className: "p-6 space-y-4", children: [_jsx("div", { className: "flex items-center justify-between gap-4", children: _jsxs("div", { children: [_jsx(BackLink, {}), _jsx("h1", { className: "text-2xl font-semibold", children: "Klanten toevoegen uit netwerk" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Doorzoek alle organisaties die via het netwerk beschikbaar zijn." })] }) }), _jsxs("div", { className: "relative max-w-md", 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 organisatienaam of GLN...", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9" })] }), _jsx("div", { className: "flex items-center gap-2 flex-wrap", children: TYPE_OPTIONS.map((opt) => {
+                        const active = types.includes(opt.value);
+                        return (_jsx("button", { type: "button", onClick: () => toggleType(opt.value), className: "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors " +
+                                (active
+                                    ? "bg-primary text-primary-foreground border-primary"
+                                    : "bg-card text-muted-foreground border-border hover:bg-muted"), children: opt.label }, opt.value));
+                    }) }), _jsxs("div", { className: "flex items-center gap-6 flex-wrap text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "include-expired", checked: includeExpired, onCheckedChange: setIncludeExpired }), _jsx(Label, { htmlFor: "include-expired", className: "cursor-pointer", children: "Toon be\u00EBindigde relaties" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "hide-unknown", checked: hideUnknown, onCheckedChange: setHideUnknown }), _jsx(Label, { htmlFor: "hide-unknown", className: "cursor-pointer", children: "Verberg organisaties zonder naam" }), hideUnknown && hiddenCount > 0 ? (_jsxs("span", { className: "text-muted-foreground", children: ["(", hiddenCount, " verborgen)"] })) : null] })] }), _jsx("div", { className: "text-xs text-muted-foreground", children: isLoading ? ("Laden…") : (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium text-foreground", children: orgs.length.toLocaleString("nl-NL") }), " ", "weergegeven van", " ", _jsx("span", { className: "font-medium text-foreground", children: totalMatching.toLocaleString("nl-NL") }), " ", "organisaties \u00B7 bron: Floriday", truncated && (_jsx("span", { className: "ml-1 text-warning", children: "(verfijn de zoekopdracht om alles te zien)" }))] })) }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Organisatie" }), _jsx(TableHead, { children: "GLN" }), _jsx(TableHead, { children: "Adres" }), _jsx(TableHead, { children: "Land" }), _jsx(TableHead, { children: "Type" }), _jsx(TableHead, { children: "Prijscategorie" }), _jsx(TableHead, { children: "Bijgewerkt" })] }) }), _jsx(TableBody, { children: isLoading ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "text-center py-8 text-muted-foreground", children: "Laden..." }) })) : orgs.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "text-center py-8 text-muted-foreground", children: "Geen organisaties gevonden." }) })) : (orgs.map((o) => {
+                                        const displayName = o.organization_name && o.organization_name.trim() !== ""
+                                            ? o.organization_name
+                                            : null;
+                                        const addressBits = [
+                                            o.address_line,
+                                            [o.postal_code, o.city].filter(Boolean).join(" "),
+                                        ].filter((x) => x && String(x).trim() !== "");
+                                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsx(CustomerAvatar, { logoUrl: o.logo_url, name: displayName ?? "?", size: "sm" }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "font-medium truncate flex items-center gap-2", children: [displayName ? (_jsx("span", { className: "truncate", children: displayName })) : (_jsx("span", { className: "italic text-muted-foreground", children: "Onbekende organisatie" })), o.is_expired && (_jsx(Badge, { variant: "outline", className: "text-[10px] uppercase tracking-wide", children: "be\u00EBindigd" }))] }), o.commercial_name && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: o.commercial_name })), o.website && (_jsxs("a", { href: o.website.startsWith("http") ? o.website : `https://${o.website}`, target: "_blank", rel: "noreferrer", className: "text-xs text-muted-foreground inline-flex items-center gap-1 hover:underline", children: [_jsx(Globe, { className: "h-3 w-3" }), " ", o.website] })), _jsx("div", { className: "mt-1", children: _jsx(FloridayDeeplinkButton, { organizationId: o.organization_id }) })] })] }) }), _jsx(TableCell, { children: o.gln ? _jsx(Badge, { variant: "outline", children: o.gln }) : "—" }), _jsx(TableCell, { className: "text-sm", children: addressBits.length ? (_jsx("div", { className: "min-w-0", children: _jsxs("div", { className: "inline-flex items-start gap-1 text-muted-foreground", children: [_jsx(MapPin, { className: "h-3 w-3 mt-0.5 shrink-0" }), _jsx("span", { className: "truncate", children: addressBits.join(", ") })] }) })) : ("—") }), _jsx(TableCell, { children: o.country ?? "—" }), _jsx(TableCell, { className: "text-xs text-muted-foreground uppercase tracking-wide", children: o.organization_type ?? "—" }), _jsx(TableCell, { children: _jsx(PriceGroupBadges, { groups: o.price_groups }) }), _jsx(TableCell, { className: "text-muted-foreground text-sm", children: new Date(o.fetched_at).toLocaleDateString("nl-NL") })] }, `${o.connection_id}-${o.organization_id}`));
+                                    })) })] }) }) })] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"NieuweKlant.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/NieuweKlant.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,WAAW,gCAiN1B"}
+{"version":3,"file":"NieuweKlant.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/NieuweKlant.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,WAAW,gCA2T1B"}

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"}