@flowselections/floriday-verkoop-module 1.0.11 → 1.0.12

package/dist-lib/components/verkoop/CreateOrderPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateOrderPage.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/CreateOrderPage.tsx"],"names":[],"mappings":"AA4IA,wBAAgB,eAAe,4CAoX9B"}
+{"version":3,"file":"CreateOrderPage.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/CreateOrderPage.tsx"],"names":[],"mappings":"AA4CA,wBAAgB,eAAe,4CAib9B"}

package/dist-lib/components/verkoop/CreateOrderPage.js

@@ -1,218 +1,246 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { Badge, Button, Input, Label, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
+// Handmatig aanmaken van een bestelling — gebruikt exact dezelfde workflow,
+// server-fns en validaties als de Mailbox-module. Beide modules leunen op
+// gedeelde queries (klanten, producten met voorraad, afleverlocaties,
+// afhaallocaties, vervoerders, orderpicktijd) en dezelfde eerstmogelijke-
+// leverdatum-berekening. Zie src/lib/create-order.functions.ts.
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Textarea, toast, } from "@flowselections/core";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ArrowLeft, ChevronDown, Plus, Search, Trash2, Truck, MapPin, } from "lucide-react";
-import { supabase } from "../../integrations/supabase/client";
+import { ArrowLeft, Plus, Trash2 } from "lucide-react";
 import { useServerFn } from "@tanstack/react-start";
-import { getFlorydayCachedList } from "../../lib/floriday-public.functions";
-const eur = new Intl.NumberFormat("nl-NL", {
-    style: "currency",
-    currency: "EUR",
-});
-function pickStr(v) {
-    if (v == null)
-        return null;
-    if (typeof v === "string")
-        return v;
-    if (typeof v === "number")
-        return String(v);
-    if (Array.isArray(v)) {
-        for (const x of v) {
-            const s = pickStr(x?.text ?? x?.value ?? x);
-            if (s)
-                return s;
-        }
-        return null;
-    }
-    if (typeof v === "object") {
-        return (v.nl ?? v.NL ?? v.en ?? v.EN ?? v.text ?? v.value ??
-            Object.values(v).find((x) => typeof x === "string") ??
-            null);
-    }
-    return null;
+import { SearchableSelect } from "./SearchableSelect";
+import { listCustomersForCreateOrder, listProductsForCreateOrder, listDeliveryLocationsForCustomerCO, listPickupLocationsCO, listCarriersForCreateOrder, getOrderPickDaysCO, createManualOrder, } from "../../lib/create-order.functions";
+function ReadOnlyField({ label, value }) {
+    return (_jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted-foreground", children: label }), _jsx("div", { className: "text-sm", children: value && String(value).trim() !== "" ? value : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) })] }));
 }
-function useCustomersForOrder() {
-    return useQuery({
-        queryKey: ["create-order", "customers"],
-        queryFn: async () => {
-            const { data, error } = await supabase
-                .from("customers")
-                .select("id, company_name, city, is_active")
-                .or("is_active.is.null,is_active.eq.true")
-                .order("company_name", { ascending: true })
-                .limit(2000);
-            if (error)
-                throw error;
-            return (data ?? []);
-        },
-        staleTime: 60000,
+export function CreateOrderPage() {
+    const navigate = useNavigate();
+    const qc = useQueryClient();
+    const fetchCustomers = useServerFn(listCustomersForCreateOrder);
+    const fetchProducts = useServerFn(listProductsForCreateOrder);
+    const fetchDeliveryLocations = useServerFn(listDeliveryLocationsForCustomerCO);
+    const fetchPickupLocations = useServerFn(listPickupLocationsCO);
+    const fetchCarriers = useServerFn(listCarriersForCreateOrder);
+    const fetchPickDays = useServerFn(getOrderPickDaysCO);
+    const fetchCreate = useServerFn(createManualOrder);
+    const safe = async (fn) => {
+        try {
+            return await fn();
+        }
+        catch {
+            return { items: [] };
+        }
+    };
+    const customersQ = useQuery({ queryKey: ["co-customers"], queryFn: () => safe(() => fetchCustomers()) });
+    const productsQ = useQuery({ queryKey: ["co-products"], queryFn: () => safe(() => fetchProducts()) });
+    const pickupQ = useQuery({ queryKey: ["co-pickup"], queryFn: () => safe(() => fetchPickupLocations()) });
+    const carriersQ = useQuery({ queryKey: ["co-carriers"], queryFn: () => safe(() => fetchCarriers()) });
+    const pickDaysQ = useQuery({
+        queryKey: ["co-pickdays"],
+        queryFn: async () => { try {
+            return await fetchPickDays();
+        }
+        catch {
+            return { pickDays: 0 };
+        } },
     });
-}
-function useProductsForOrder() {
-    const fetchCachedList = useServerFn(getFlorydayCachedList);
-    return useQuery({
-        queryKey: ["create-order", "products"],
+    const customers = customersQ.data?.items ?? [];
+    const products = productsQ.data?.items ?? [];
+    const pickupLocations = pickupQ.data?.items ?? [];
+    const carriers = carriersQ.data?.items ?? [];
+    const pickDays = Math.max(0, Number(pickDaysQ.data?.pickDays ?? 0));
+    const [customerId, setCustomerId] = useState(null);
+    const [deliveryLocationId, setDeliveryLocationId] = useState(null);
+    const [pickupLocationId, setPickupLocationId] = useState(null);
+    const [carrierId, setCarrierId] = useState(null);
+    const [deliveryDate, setDeliveryDate] = useState("");
+    const [notes, setNotes] = useState("");
+    const [lines, setLines] = useState([
+        { product_id: null, product_name: "", quantity: null, unit: "stuks", unit_price: null },
+    ]);
+    // Afleverlocaties van gekozen klant
+    const deliveryLocQ = useQuery({
+        queryKey: ["co-delivery-locations", customerId],
+        enabled: !!customerId,
         queryFn: async () => {
-            const [localRes, floridayList] = await Promise.all([
-                supabase
-                    .from("products")
-                    .select("id, product, sale_price, unit")
-                    .order("product", { ascending: true })
-                    .limit(2000),
-                fetchCachedList({ data: { environment: "staging", entity: "trade-items", limit: 5000 } }),
-            ]);
-            if (localRes.error)
-                throw localRes.error;
-            const out = [];
-            for (const r of localRes.data ?? []) {
-                out.push({
-                    id: `local:${r.id}`,
-                    name: r.product ?? "Onbekend product",
-                    source: "local",
-                    price: r.sale_price != null ? Number(r.sale_price) : null,
-                    unit: r.unit ?? null,
-                });
+            try {
+                return await fetchDeliveryLocations({ data: { customerId: customerId } });
             }
-            for (const r of floridayList.rows ?? []) {
-                const d = r.data ?? {};
-                const name = pickStr(d.name) ??
-                    pickStr(d.productName) ??
-                    pickStr(d.tradeItemName) ??
-                    pickStr(d.tradeItemTexts) ??
-                    "Onbekend artikel";
-                out.push({
-                    id: `floriday:${r.floriday_id}`,
-                    name,
-                    source: "floriday",
-                    price: null,
-                });
+            catch {
+                return { items: [] };
             }
-            return out;
         },
-        staleTime: 60000,
     });
-}
-export function CreateOrderPage() {
-    const navigate = useNavigate();
-    const queryClient = useQueryClient();
-    const customersQ = useCustomersForOrder();
-    const productsQ = useProductsForOrder();
-    const [customerId, setCustomerId] = useState("");
-    const [deliveryDate, setDeliveryDate] = useState("");
-    const [carrier, setCarrier] = useState("");
-    const [country, setCountry] = useState("");
-    const [productPickerOpen, setProductPickerOpen] = useState(false);
-    const [productQuery, setProductQuery] = useState("");
-    const [selectedProduct, setSelectedProduct] = useState(null);
-    const [quantity, setQuantity] = useState("");
-    const [unitPrice, setUnitPrice] = useState("");
-    const [lines, setLines] = useState([]);
-    const filteredProducts = useMemo(() => {
-        const list = productsQ.data ?? [];
-        const q = productQuery.trim().toLowerCase();
-        const base = q
-            ? list.filter((p) => p.name.toLowerCase().includes(q))
-            : list;
-        return base.slice(0, 100);
-    }, [productsQ.data, productQuery]);
-    const total = lines.reduce((s, l) => s + l.quantity * l.unitPrice, 0);
-    const addLine = () => {
-        if (!selectedProduct)
-            return;
-        const qty = Number(quantity);
-        const price = Number(unitPrice);
-        if (!Number.isFinite(qty) || qty <= 0) {
-            toast.error("Vul een geldig aantal in");
-            return;
+    const deliveryLocations = deliveryLocQ.data?.items ?? [];
+    const selectedLocation = deliveryLocations.find((l) => l.id === deliveryLocationId) ?? null;
+    // Reset delivery_location bij klantwissel
+    useEffect(() => {
+        if (deliveryLocationId && !deliveryLocations.some((l) => l.id === deliveryLocationId)) {
+            setDeliveryLocationId(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [customerId, deliveryLocQ.data]);
+    // Auto-fill vervoerder op basis van gekozen afleverlocatie (één keer per wissel)
+    const lastLocRef = useRef(null);
+    useEffect(() => {
+        if (deliveryLocationId !== lastLocRef.current) {
+            lastLocRef.current = deliveryLocationId;
+            const loc = deliveryLocations.find((l) => l.id === deliveryLocationId);
+            if (loc?.carrier_id)
+                setCarrierId(loc.carrier_id);
+            else if (deliveryLocationId === null)
+                setCarrierId(null);
         }
-        if (!Number.isFinite(price) || price < 0) {
-            toast.error("Vul een geldige prijs in");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [deliveryLocationId, deliveryLocations.length]);
+    // Eerst mogelijke leverdatum
+    const selectedCarrier = carriers.find((c) => c.id === carrierId) ?? null;
+    const carrierDeliveryDays = Math.max(0, Number(selectedCarrier?.delivery_days ?? 0));
+    const canPickDate = !!customerId && !!deliveryLocationId && !!pickupLocationId && !!carrierId;
+    const fmtISO = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+    const earliestDate = useMemo(() => {
+        const base = new Date();
+        base.setHours(0, 0, 0, 0);
+        base.setDate(base.getDate() + pickDays + carrierDeliveryDays);
+        return base;
+    }, [pickDays, carrierDeliveryDays]);
+    const earliestISO = fmtISO(earliestDate);
+    const earliestLabel = earliestDate.toLocaleDateString("nl-NL", {
+        day: "numeric", month: "long", year: "numeric",
+    });
+    useEffect(() => {
+        if (!canPickDate)
             return;
+        if (!deliveryDate || deliveryDate < earliestISO) {
+            setDeliveryDate(earliestISO);
         }
-        setLines((prev) => [
-            ...prev,
-            {
-                key: `${selectedProduct.id}-${Date.now()}`,
-                product: selectedProduct,
-                quantity: qty,
-                unitPrice: price,
-            },
-        ]);
-        setSelectedProduct(null);
-        setQuantity("");
-        setUnitPrice("");
-        setProductQuery("");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [canPickDate, earliestISO]);
+    const blockDecimal = (e) => {
+        if ([".", ",", "e", "E", "+", "-"].includes(e.key))
+            e.preventDefault();
     };
-    const removeLine = (key) => setLines((prev) => prev.filter((l) => l.key !== key));
-    const createMutation = useMutation({
+    const createMut = useMutation({
         mutationFn: async () => {
             if (!customerId)
                 throw new Error("Selecteer een klant");
+            if (!deliveryLocationId)
+                throw new Error("Selecteer een afleverlocatie");
+            if (!pickupLocationId)
+                throw new Error("Selecteer een afhaallocatie (tuin)");
+            if (!carrierId)
+                throw new Error("Selecteer een vervoerder");
             if (!deliveryDate)
                 throw new Error("Selecteer een leverdatum");
-            if (lines.length === 0)
+            const validLines = lines.filter((l) => l.product_id && (l.quantity ?? 0) > 0);
+            if (validLines.length === 0)
                 throw new Error("Voeg minimaal één product toe");
-            const customer = customersQ.data?.find((c) => c.id === customerId);
-            const orderNumber = `LOC-${new Date()
-                .toISOString()
-                .slice(0, 10)
-                .replace(/-/g, "")}-${Math.floor(Math.random() * 9000 + 1000)}`;
-            const { data: orderRow, error: orderErr } = await supabase
-                .from("orders")
-                .insert({
-                order_number: orderNumber,
-                customer_id: customerId,
-                customer_name: customer?.company_name ?? "Onbekende klant",
-                order_date: new Date().toISOString(),
-                delivery_date: deliveryDate,
-                status: "open",
-                total: String(total.toFixed(2)),
-                custom_fields: {
-                    source: "local",
-                    transporteur: carrier || null,
-                    land: country || null,
-                },
-            })
-                .select("id")
-                .single();
-            if (orderErr)
-                throw orderErr;
-            const itemsPayload = lines.map((l) => ({
-                order_id: orderRow.id,
-                product_id: l.product.source === "local"
-                    ? l.product.id.replace(/^local:/, "")
-                    : undefined,
-                product_name: l.product.name,
-                quantity: Math.round(l.quantity),
-                unit: l.product.unit ?? undefined,
-                unit_price: l.unitPrice,
-            }));
-            const { error: itemsErr } = await supabase
-                .from("order_items")
-                .insert(itemsPayload);
-            if (itemsErr)
-                throw itemsErr;
+            for (const l of validLines) {
+                const p = products.find((x) => x.id === l.product_id);
+                const ppc = Math.max(1, Number(p?.plants_per_crate ?? 1));
+                const q = l.quantity ?? 0;
+                if (q < ppc || q % ppc !== 0) {
+                    throw new Error(`"${p?.product ?? l.product_name}" moet per hele fust besteld worden (min. 1 fust = ${ppc} planten).`);
+                }
+            }
+            const customer = customers.find((c) => c.id === customerId);
+            const payload = {
+                customerId,
+                customerName: customer?.company_name ?? "Onbekende klant",
+                deliveryLocationId,
+                pickupLocationId,
+                carrierId,
+                deliveryDate,
+                notes: notes.trim() ? notes.trim() : null,
+                lines: validLines.map((l) => {
+                    const p = products.find((x) => x.id === l.product_id);
+                    return {
+                        product_id: l.product_id,
+                        product_name: p?.product ?? l.product_name ?? "Onbekend product",
+                        quantity: l.quantity,
+                        unit: l.unit ?? p?.unit ?? "stuks",
+                        unit_price: l.unit_price ?? undefined,
+                    };
+                }),
+            };
+            return await fetchCreate({ data: payload });
         },
         onSuccess: () => {
             toast.success("Bestelling aangemaakt");
-            queryClient.invalidateQueries({ queryKey: ["floriday", "salesorders-cache"] });
+            qc.invalidateQueries({ queryKey: ["floriday", "salesorders-cache"] });
             navigate({ to: "/floriday-verkoop/verkooporders" });
         },
         onError: (e) => toast.error(e?.message ?? "Aanmaken mislukt"),
     });
-    return (_jsxs("main", { className: "space-y-5 p-6", children: [_jsx("div", { children: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", children: _jsxs(Link, { to: "/floriday-verkoop/verkooporders", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Terug naar verkooporders"] }) }) }), _jsxs("div", { className: "rounded-lg border border-border bg-card p-6", children: [_jsx("h1", { className: "text-xl font-semibold text-foreground", children: "Nieuwe Bestelling" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Maak een nieuwe bestelling aan door producten te zoeken en toe te voegen." }), _jsxs("div", { className: "mt-6 grid gap-5 md:grid-cols-2", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsxs(Label, { children: ["Klant ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs(Select, { value: customerId, onValueChange: setCustomerId, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Selecteer klant" }) }), _jsxs(SelectContent, { children: [(customersQ.data ?? []).map((c) => (_jsxs(SelectItem, { value: c.id, children: [c.company_name ?? "Onbekend", c.city ? ` — ${c.city}` : ""] }, c.id))), customersQ.data?.length === 0 && (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Geen klanten gevonden" }))] })] })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsxs(Label, { htmlFor: "delivery", children: ["Leverdatum ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Input, { id: "delivery", type: "date", value: deliveryDate, onChange: (e) => setDeliveryDate(e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "carrier", children: "Transporteur" }), _jsxs("div", { className: "relative", children: [_jsx(Truck, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { id: "carrier", className: "pl-9", placeholder: "Bv. DHL, PostNL", value: carrier, onChange: (e) => setCarrier(e.target.value) })] })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: "country", children: "Land" }), _jsxs("div", { className: "relative", children: [_jsx(MapPin, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { id: "country", className: "pl-9", placeholder: "Bv. Nederland", value: country, onChange: (e) => setCountry(e.target.value) })] })] })] }), _jsxs("div", { className: "mt-8", children: [_jsx(Label, { children: "Producten toevoegen" }), _jsxs("div", { className: "mt-2 flex flex-wrap items-stretch gap-2", children: [_jsx("div", { className: "min-w-[260px] flex-1", children: _jsxs(Popover, { open: productPickerOpen, onOpenChange: setProductPickerOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", className: "w-full justify-between font-normal", children: [_jsx("span", { className: selectedProduct ? "" : "text-muted-foreground", children: selectedProduct ? selectedProduct.name : "Zoek product..." }), _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" })] }) }), _jsxs(PopoverContent, { align: "start", className: "w-[--radix-popover-trigger-width] p-0", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [_jsx(Search, { className: "h-4 w-4 text-muted-foreground" }), _jsx("input", { autoFocus: true, placeholder: "Zoek product...", value: productQuery, onChange: (e) => setProductQuery(e.target.value), className: "h-8 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground" })] }), _jsxs("div", { className: "max-h-72 overflow-y-auto py-1", children: [productsQ.isLoading && (_jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "Laden\u2026" })), !productsQ.isLoading && filteredProducts.length === 0 && (_jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "Geen producten gevonden." })), filteredProducts.map((p) => (_jsxs("button", { type: "button", onClick: () => {
-                                                                        setSelectedProduct(p);
-                                                                        if (p.price != null && unitPrice === "")
-                                                                            setUnitPrice(p.price);
-                                                                        if (quantity === "")
-                                                                            setQuantity(1);
-                                                                        setProductPickerOpen(false);
-                                                                    }, className: "flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm hover:bg-accent", children: [_jsx("span", { className: "truncate", children: p.name }), _jsx(Badge, { variant: "outline", className: p.source === "local"
-                                                                                ? "border-primary/30 text-primary"
-                                                                                : "border-emerald-500/30 text-emerald-600", children: p.source === "local" ? "Lokaal" : "Floriday" })] }, p.id)))] })] })] }) }), _jsx(Input, { type: "number", min: 1, placeholder: "Aantal", className: "w-28", value: quantity, onChange: (e) => setQuantity(e.target.value === "" ? "" : Number(e.target.value)) }), _jsx(Input, { type: "number", min: 0, step: "0.01", placeholder: "\u20AC Prijs", className: "w-32", value: unitPrice, onChange: (e) => setUnitPrice(e.target.value === "" ? "" : Number(e.target.value)) }), _jsx(Button, { type: "button", onClick: addLine, disabled: !selectedProduct, "aria-label": "Toevoegen", children: _jsx(Plus, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "mt-3 rounded-lg border border-dashed border-border bg-muted/30", children: lines.length === 0 ? (_jsx("div", { className: "px-4 py-10 text-center text-sm text-muted-foreground", children: "Voeg producten toe aan de bestelling" })) : (_jsxs("div", { className: "divide-y divide-border", children: [lines.map((l) => (_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 text-sm", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "truncate font-medium text-foreground", children: l.product.name }), _jsx("div", { className: "text-xs text-muted-foreground", children: l.product.source === "local" ? "Lokaal" : "Floriday" })] }), _jsxs("div", { className: "w-20 text-right", children: [l.quantity, " st."] }), _jsx("div", { className: "w-24 text-right", children: eur.format(l.unitPrice) }), _jsx("div", { className: "w-28 text-right font-medium", children: eur.format(l.quantity * l.unitPrice) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeLine(l.key), "aria-label": "Regel verwijderen", children: _jsx(Trash2, { className: "h-4 w-4 text-muted-foreground" }) })] }, l.key))), _jsxs("div", { className: "flex items-center justify-end gap-3 px-4 py-3 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Totaal" }), _jsx("span", { className: "text-base font-semibold text-foreground", children: eur.format(total) })] })] })) })] }), _jsxs("div", { className: "mt-8 flex items-center justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => navigate({ to: "/floriday-verkoop/verkooporders" }), disabled: createMutation.isPending, children: "Annuleren" }), _jsx(Button, { onClick: () => createMutation.mutate(), disabled: createMutation.isPending ||
-                                    !customerId ||
-                                    !deliveryDate ||
-                                    lines.length === 0, children: createMutation.isPending ? "Aanmaken…" : "Bestelling Aanmaken" })] })] })] }));
+    return (_jsxs("main", { className: "space-y-5 p-6", children: [_jsx("div", { children: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", children: _jsxs(Link, { to: "/floriday-verkoop/verkooporders", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Terug naar verkooporders"] }) }) }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Nieuwe Bestelling" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Doorloop de stappen: klant \u2192 afleverlocatie \u2192 afhaallocatie \u2192 vervoerder \u2192 leverdatum \u2192 producten." })] }), _jsxs(CardContent, { className: "space-y-5", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "flex items-center gap-2", children: ["Klant ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(SearchableSelect, { value: customerId, placeholder: customersQ.isLoading ? "Laden..." : "Kies klant...", options: customers.map((c) => ({ value: c.id, label: c.company_name ?? "Onbekend", hint: c.email ?? undefined })), onChange: (v) => { setCustomerId(v); setDeliveryLocationId(null); }, allowClear: false })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "flex items-center gap-2", children: ["Afleverlocatie ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(SearchableSelect, { value: deliveryLocationId, placeholder: !customerId ? "Selecteer eerst een klant"
+                                            : deliveryLocations.length ? "Kies locatie..."
+                                                : "Geen locaties bekend voor deze klant", disabled: !customerId || deliveryLocations.length === 0, allowClear: false, options: deliveryLocations.map((l) => {
+                                            const addr = [
+                                                l.address_line || [l.street, l.house_number].filter(Boolean).join(" "),
+                                                l.postal_code, l.city,
+                                            ].filter(Boolean).join(", ");
+                                            return {
+                                                value: l.id,
+                                                label: (l.name || addr || "Locatie") + (l.is_primary ? " ★" : ""),
+                                                hint: l.name && addr ? addr : undefined,
+                                            };
+                                        }), onChange: setDeliveryLocationId })] }), selectedLocation && (_jsxs("div", { className: "rounded-md border bg-muted/30 p-3 space-y-2", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Adresgegevens" }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(ReadOnlyField, { label: "Straat", value: selectedLocation.street }), _jsx(ReadOnlyField, { label: "Huisnummer", value: selectedLocation.house_number }), _jsx(ReadOnlyField, { label: "Postcode", value: selectedLocation.postal_code }), _jsx(ReadOnlyField, { label: "Plaats", value: selectedLocation.city }), _jsx(ReadOnlyField, { label: "Provincie", value: selectedLocation.province }), _jsx(ReadOnlyField, { label: "Land", value: selectedLocation.country })] })] })), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "flex items-center gap-2", children: ["Afhaallocatie / Tuin ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(SearchableSelect, { value: pickupLocationId, placeholder: pickupLocations.length ? "Kies eigen locatie..." : "Geen eigen locaties bekend", disabled: pickupLocations.length === 0, allowClear: false, options: pickupLocations.map((l) => ({ value: l.id, label: l.name })), onChange: setPickupLocationId }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Eigen locatie (tuin) van waaruit de bestelling wordt geleverd of opgehaald." })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { children: ["Vervoerder ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(SearchableSelect, { value: carrierId, placeholder: !customerId ? "Selecteer eerst een klant"
+                                            : !deliveryLocationId ? "Selecteer eerst een afleverlocatie"
+                                                : "Kies vervoerder...", disabled: !deliveryLocationId, allowClear: false, options: carriers.map((c) => ({
+                                            value: c.id,
+                                            label: c.name + (c.is_default ? " (standaard)" : ""),
+                                        })), onChange: setCarrierId }), selectedLocation?.carrier_id && carrierId && carrierId !== selectedLocation.carrier_id && (_jsx("div", { className: "text-xs text-muted-foreground", children: "Wijkt af van standaard vervoerder van deze locatie \u2014 geldt alleen voor deze bestelling." }))] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "flex items-center gap-2", children: ["Leverdatum ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Input, { type: "date", value: canPickDate ? deliveryDate : "", min: canPickDate ? earliestISO : undefined, disabled: !canPickDate, onChange: (e) => {
+                                            const v = e.target.value || "";
+                                            if (v && v < earliestISO) {
+                                                toast.error(`Eerst mogelijke leverdatum is ${earliestLabel}.`);
+                                                setDeliveryDate(earliestISO);
+                                                return;
+                                            }
+                                            setDeliveryDate(v);
+                                        } }), !canPickDate ? (_jsx("div", { className: "text-xs text-muted-foreground", children: "Selecteer eerst klant, afleverlocatie, afhaallocatie en vervoerder." })) : (_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Eerst beschikbare leverdatum is ", earliestLabel, ", o.b.v. orderpicktijd (", pickDays, "d) en levertijd vervoerder (", carrierDeliveryDays, "d)."] }))] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Bestelregels" }), _jsxs("div", { className: "grid grid-cols-12 gap-2 text-xs text-muted-foreground px-1", children: [_jsx("div", { className: "col-span-5", children: "Product" }), _jsx("div", { className: "col-span-2", children: "Planten" }), _jsx("div", { className: "col-span-2", children: "Fusten" }), _jsx("div", { className: "col-span-2", children: "Prijs" }), _jsx("div", { className: "col-span-1" })] }), lines.map((line, idx) => {
+                                        const product = line.product_id ? products.find((p) => p.id === line.product_id) : null;
+                                        const ppc = Math.max(1, Number(product?.plants_per_crate ?? 1));
+                                        const plants = line.quantity ?? null;
+                                        const cratesDisplay = plants === null ? "" : String(Math.ceil(plants / ppc));
+                                        return (_jsxs("div", { className: "grid grid-cols-12 gap-2 items-start", children: [_jsx("div", { className: "col-span-5", children: _jsx(SearchableSelect, { value: line.product_id, placeholder: "Kies product...", clearLabel: "\u2014 Handmatig \u2014", options: products.map((p) => ({ value: p.id, label: p.product, hint: p.unit })), onChange: (v) => {
+                                                            const next = [...lines];
+                                                            if (v === null)
+                                                                next[idx] = { ...next[idx], product_id: null };
+                                                            else {
+                                                                const p = products.find((x) => x.id === v);
+                                                                const newPpc = Math.max(1, Number(p?.plants_per_crate ?? 1));
+                                                                const currentQ = Number(next[idx].quantity ?? 0);
+                                                                const normalizedQ = currentQ > 0 ? Math.ceil(currentQ / newPpc) * newPpc : newPpc;
+                                                                next[idx] = {
+                                                                    ...next[idx],
+                                                                    product_id: v,
+                                                                    product_name: p?.product ?? "",
+                                                                    unit: next[idx].unit ?? p?.unit ?? "stuks",
+                                                                    quantity: normalizedQ,
+                                                                    unit_price: next[idx].unit_price ?? (p?.sale_price != null ? Number(p.sale_price) : null),
+                                                                };
+                                                            }
+                                                            setLines(next);
+                                                        } }) }), _jsx(Input, { className: "col-span-2", type: "number", min: ppc, step: ppc, inputMode: "numeric", onKeyDown: blockDecimal, value: plants ?? "", onChange: (e) => {
+                                                        const next = [...lines];
+                                                        const raw = e.target.value.replace(/[.,]/g, "");
+                                                        const v = raw ? Number(raw) : null;
+                                                        const rounded = v === null ? null : Math.max(1, Math.ceil(v / ppc)) * ppc;
+                                                        next[idx] = { ...next[idx], quantity: rounded };
+                                                        setLines(next);
+                                                    }, placeholder: "Planten", title: `Verkoop per hele fust van ${ppc} planten` }), _jsx(Input, { className: "col-span-2", type: "number", min: 1, step: 1, inputMode: "numeric", onKeyDown: blockDecimal, value: cratesDisplay, onChange: (e) => {
+                                                        const next = [...lines];
+                                                        const raw = e.target.value.replace(/[.,]/g, "");
+                                                        const cr = raw ? Math.max(1, Math.floor(Number(raw))) : null;
+                                                        next[idx] = { ...next[idx], quantity: cr === null ? null : cr * ppc };
+                                                        setLines(next);
+                                                    }, placeholder: "Fusten", title: `${ppc} planten per fust` }), _jsx(Input, { className: "col-span-2", type: "number", min: 0, step: "0.01", value: line.unit_price ?? "", onChange: (e) => {
+                                                        const next = [...lines];
+                                                        const v = e.target.value === "" ? null : Number(e.target.value);
+                                                        next[idx] = { ...next[idx], unit_price: v };
+                                                        setLines(next);
+                                                    }, placeholder: "\u20AC prijs" }), _jsx(Button, { variant: "ghost", size: "icon", className: "col-span-1", onClick: () => setLines(lines.filter((_, i) => i !== idx)), "aria-label": "Regel verwijderen", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, idx));
+                                    }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setLines([...lines, { product_id: null, product_name: "", quantity: null, unit: "stuks", unit_price: null }]), children: [_jsx(Plus, { className: "h-3 w-3 mr-1" }), " Regel toevoegen"] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Opmerkingen" }), _jsx(Textarea, { value: notes, onChange: (e) => setNotes(e.target.value), placeholder: "Optionele notities bij deze bestelling", rows: 3 })] }), _jsxs("div", { className: "flex items-center justify-end gap-2 pt-2", children: [_jsx(Button, { variant: "outline", onClick: () => navigate({ to: "/floriday-verkoop/verkooporders" }), disabled: createMut.isPending, children: "Annuleren" }), _jsx(Button, { onClick: () => createMut.mutate(), disabled: createMut.isPending, children: createMut.isPending ? "Bezig..." : "Bestelling Aanmaken" })] })] })] })] }));
 }

package/dist-lib/components/verkoop/SalesOrdersTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SalesOrdersTable.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersTable.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAuEnE,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE;IACD,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAChD,2CA6IA"}
+{"version":3,"file":"SalesOrdersTable.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersTable.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAsEnE,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE;IACD,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAChD,2CAyIA"}

package/dist-lib/components/verkoop/SalesOrdersTable.js

@@ -3,7 +3,6 @@ import { useState } from "react";
 import { Badge, Checkbox, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@flowselections/core";
 import { MoreVertical, Package, ArrowDown } from "lucide-react";
-const eur = new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR" });
 function formatDateShort(iso) {
     if (!iso)
         return { date: "—", time: "" };
@@ -44,7 +43,7 @@ function StatusTag({ status, rawOrder, }) {
     if (rawStatus === "COMMITTED" || status.isConfirmed) {
         return (_jsx(Badge, { variant: "outline", className: "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400", children: "Verzend klaar" }));
     }
-    return (_jsx(Badge, { variant: "outline", className: "border-muted-foreground/30 bg-muted text-muted-foreground", children: "Nog piken" }));
+    return (_jsx(Badge, { variant: "outline", className: "border-muted-foreground/30 bg-muted text-muted-foreground", children: "Nog picken" }));
 }
 export function SalesOrdersTable({ orders, loading, onSelectOrder, }) {
     const [selected, setSelected] = useState(new Set());
@@ -54,10 +53,10 @@ export function SalesOrdersTable({ orders, loading, onSelectOrder, }) {
         n.has(id) ? n.delete(id) : n.add(id);
         return n;
     });
-    return (_jsx("div", { className: "rounded-lg border border-border bg-card", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { checked: allChecked, onCheckedChange: (v) => setSelected(v === true ? new Set(orders.map((o) => o.id)) : new Set()) }) }), _jsx(TableHead, { children: "Order" }), _jsx(TableHead, { children: _jsxs("span", { className: "inline-flex items-center gap-1", children: ["Bestelmoment ", _jsx(ArrowDown, { className: "h-3 w-3" })] }) }), _jsx(TableHead, { children: "Karren" }), _jsx(TableHead, { children: "Fusten" }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Levering" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "w-10" })] }) }), _jsxs(TableBody, { children: [loading &&
+    return (_jsx("div", { className: "rounded-lg border border-border bg-card", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { checked: allChecked, onCheckedChange: (v) => setSelected(v === true ? new Set(orders.map((o) => o.id)) : new Set()) }) }), _jsx(TableHead, { children: "Omzet" }), _jsx(TableHead, { children: _jsxs("span", { className: "inline-flex items-center gap-1", children: ["Bestelmoment ", _jsx(ArrowDown, { className: "h-3 w-3" })] }) }), _jsx(TableHead, { children: "Karren" }), _jsx(TableHead, { children: "Fusten" }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Levering" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "w-10" })] }) }), _jsxs(TableBody, { children: [loading &&
                             Array.from({ length: 6 }).map((_, i) => (_jsx(TableRow, { children: Array.from({ length: 9 }).map((__, j) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-6 w-full" }) }, j))) }, `s-${i}`))), !loading && orders.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 9, className: "py-12 text-center text-muted-foreground", children: "Geen verkooporders gevonden." }) })), !loading &&
                             orders.map((o) => {
                                 const ordered = formatDateShort(o.orderedAt);
-                                return (_jsxs(TableRow, { className: "align-top cursor-pointer", onClick: () => onSelectOrder?.(o), children: [_jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selected.has(o.id), onCheckedChange: () => toggle(o.id) }) }), _jsx(TableCell, { children: _jsx("div", { className: "font-medium text-foreground", children: o.orderNumber || "—" }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "h-4 w-4 text-primary" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-foreground", children: ordered.date }), _jsx("div", { className: "text-xs text-muted-foreground", children: ordered.time })] })] }) }), _jsxs(TableCell, { children: [_jsx("div", { className: "font-medium text-foreground", children: o.karCount }), _jsx("div", { className: "text-xs text-muted-foreground", children: eur.format(o.revenue) })] }), _jsx(TableCell, { children: _jsx("div", { className: "font-medium text-foreground", children: o.fustCount }) }), _jsxs(TableCell, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-foreground", children: o.customer.name }), o.isLocal && (_jsx(Badge, { variant: "outline", className: "border-primary/30 text-primary", children: "Lokaal" }))] }), _jsx("div", { className: "text-xs text-muted-foreground", children: [o.customer.postalCode, o.customer.city].filter(Boolean).join(" ") })] }), _jsx(TableCell, { className: "text-sm text-foreground", children: formatDateLong(o.deliveryAt) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StatusTag, { status: o.status, rawOrder: o.raw?.order }), o.orderNumber && (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: o.orderNumber }))] }) }), _jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(MoreVertical, { className: "h-4 w-4" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { children: "Bewerken" }), _jsx(DropdownMenuItem, { children: "Details bekijken" }), _jsx(DropdownMenuItem, { children: "Bevestigen" }), _jsx(DropdownMenuItem, { className: "text-destructive focus:text-destructive", children: "Annuleren" })] })] }) })] }, o.id));
+                                return (_jsxs(TableRow, { className: "align-top cursor-pointer", onClick: () => onSelectOrder?.(o), children: [_jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selected.has(o.id), onCheckedChange: () => toggle(o.id) }) }), _jsxs(TableCell, { children: [_jsxs("div", { className: "font-medium text-foreground", children: ["\u20AC ", o.revenue.toFixed(2)] }), o.orderNumber && (_jsx("div", { className: "text-xs text-muted-foreground", children: o.orderNumber }))] }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "h-4 w-4 text-primary" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-foreground", children: ordered.date }), _jsx("div", { className: "text-xs text-muted-foreground", children: ordered.time })] })] }) }), _jsx(TableCell, { children: _jsx("div", { className: "font-medium text-foreground", children: o.karCount }) }), _jsx(TableCell, { children: _jsx("div", { className: "font-medium text-foreground", children: o.fustCount }) }), _jsxs(TableCell, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-foreground", children: o.customer.name }), o.isLocal && (_jsx(Badge, { variant: "outline", className: "border-primary/30 text-primary", children: "Lokaal" }))] }), _jsx("div", { className: "text-xs text-muted-foreground", children: [o.customer.postalCode, o.customer.city].filter(Boolean).join(" ") })] }), _jsx(TableCell, { className: "text-sm text-foreground", children: formatDateLong(o.deliveryAt) }), _jsx(TableCell, { children: _jsx(StatusTag, { status: o.status, rawOrder: o.raw?.order }) }), _jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(MoreVertical, { className: "h-4 w-4" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { children: "Bewerken" }), _jsx(DropdownMenuItem, { children: "Details bekijken" }), _jsx(DropdownMenuItem, { children: "Bevestigen" }), _jsx(DropdownMenuItem, { className: "text-destructive focus:text-destructive", children: "Annuleren" })] })] }) })] }, o.id));
                             })] })] }) }));
 }

package/dist-lib/components/verkoop/SearchableSelect.d.ts

@@ -0,0 +1,19 @@
+export interface SearchableOption {
+    value: string;
+    label: string;
+    hint?: string | null;
+}
+interface SearchableSelectProps {
+    value: string | null;
+    options: SearchableOption[];
+    placeholder?: string;
+    emptyLabel?: string;
+    allowClear?: boolean;
+    clearLabel?: string;
+    onChange: (value: string | null) => void;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function SearchableSelect({ value, options, placeholder, emptyLabel, allowClear, clearLabel, onChange, className, disabled, }: SearchableSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SearchableSelect.d.ts.map

package/dist-lib/components/verkoop/SearchableSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SearchableSelect.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EAAE,OAAO,EAAE,WAAuB,EAAE,UAA6B,EACtE,UAAiB,EAAE,UAAiC,EACpD,QAAQ,EAAE,SAAS,EAAE,QAAgB,GACtC,EAAE,qBAAqB,2CAuFvB"}

package/dist-lib/components/verkoop/SearchableSelect.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button, Input, Popover, PopoverContent, PopoverTrigger, } from "@flowselections/core";
+import { Check, ChevronsUpDown, Search } from "lucide-react";
+export function SearchableSelect({ value, options, placeholder = "Kies...", emptyLabel = "Geen resultaat", allowClear = true, clearLabel = "— Geen koppeling —", onChange, className, disabled = false, }) {
+    const [open, setOpen] = useState(false);
+    const [q, setQ] = useState("");
+    const selected = useMemo(() => options.find((o) => o.value === value) ?? null, [options, value]);
+    const filtered = useMemo(() => {
+        const needle = q.trim().toLowerCase();
+        if (!needle)
+            return options.slice(0, 200);
+        return options
+            .filter((o) => o.label.toLowerCase().includes(needle) ||
+            (o.hint ?? "").toLowerCase().includes(needle))
+            .slice(0, 200);
+    }, [options, q]);
+    return (_jsxs(Popover, { open: open, onOpenChange: (o) => { if (disabled)
+            return; setOpen(o); if (!o)
+            setQ(""); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, disabled: disabled, className: `w-full justify-between font-normal ${className ?? ""}`, children: [_jsx("span", { className: `truncate ${selected ? "" : "text-muted-foreground"}`, children: selected?.label ?? placeholder }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", align: "start", children: [_jsx("div", { className: "p-2 border-b", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { autoFocus: true, value: q, onChange: (e) => setQ(e.target.value), placeholder: `Zoek in ${options.length} items...`, className: "pl-8 h-9" })] }) }), _jsxs("div", { className: "max-h-64 overflow-y-auto py-1", children: [allowClear && (_jsxs("button", { type: "button", className: "w-full text-left text-sm px-3 py-2 hover:bg-accent flex items-center gap-2", onClick: () => { onChange(null); setOpen(false); }, children: [value === null && _jsx(Check, { className: "h-3 w-3" }), _jsx("span", { className: "text-muted-foreground italic", children: clearLabel })] })), filtered.length === 0 ? (_jsx("div", { className: "px-3 py-6 text-sm text-muted-foreground text-center", children: emptyLabel })) : (filtered.map((o) => (_jsxs("button", { type: "button", className: "w-full text-left text-sm px-3 py-2 hover:bg-accent flex items-start gap-2", onClick: () => { onChange(o.value); setOpen(false); }, children: [_jsx(Check, { className: `h-3 w-3 mt-1 shrink-0 ${value === o.value ? "" : "invisible"}` }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "truncate", children: o.label }), o.hint && _jsx("div", { className: "text-xs text-muted-foreground truncate", children: o.hint })] })] }, o.value)))), filtered.length === 200 && (_jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground text-center border-t", children: "Toon eerste 200 resultaten \u2014 verfijn je zoekopdracht" }))] })] })] }));
+}