@flowselections/floriday-verkoop-module 1.0.16 → 1.0.18

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":"AA6CA,wBAAgB,eAAe,4CAkd9B"}
+{"version":3,"file":"CreateOrderPage.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/CreateOrderPage.tsx"],"names":[],"mappings":"AA6CA,wBAAgB,eAAe,4CA6d9B"}

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

@@ -11,7 +11,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ArrowLeft, Plus, Trash2 } from "lucide-react";
 import { useServerFn } from "@tanstack/react-start";
 import { SearchableSelect } from "./SearchableSelect";
-import { CartAssignmentWizard } from "./CartAssignmentWizard";
 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" }) })] }));
@@ -57,11 +56,11 @@ export function CreateOrderPage() {
     const [pickupLocationId, setPickupLocationId] = useState(null);
     const [carrierId, setCarrierId] = useState(null);
     const [deliveryDate, setDeliveryDate] = useState("");
+    const [isReservation, setIsReservation] = useState(false);
     const [notes, setNotes] = useState("");
     const [lines, setLines] = useState([
         { product_id: null, product_name: "", quantity: null, unit: "stuks", unit_price: null },
     ]);
-    const [cartOrderId, setCartOrderId] = useState(null);
     // Afleverlocaties van gekozen klant
     const deliveryLocQ = useQuery({
         queryKey: ["co-delivery-locations", customerId],
@@ -134,7 +133,7 @@ export function CreateOrderPage() {
                 throw new Error("Selecteer een afhaallocatie (tuin)");
             if (!carrierId)
                 throw new Error("Selecteer een vervoerder");
-            if (!deliveryDate)
+            if (!isReservation && !deliveryDate)
                 throw new Error("Selecteer een leverdatum");
             const validLines = lines.filter((l) => l.product_id && (l.quantity ?? 0) > 0);
             if (validLines.length === 0)
@@ -154,7 +153,8 @@ export function CreateOrderPage() {
                 deliveryLocationId,
                 pickupLocationId,
                 carrierId,
-                deliveryDate,
+                deliveryDate: isReservation ? null : deliveryDate,
+                isReservation,
                 notes: notes.trim() ? notes.trim() : null,
                 lines: validLines.map((l) => {
                     const p = products.find((x) => x.id === l.product_id);
@@ -174,10 +174,13 @@ export function CreateOrderPage() {
             return await fetchCreate({ data: payload });
         },
         onSuccess: (res) => {
-            toast.success("Bestelling aangemaakt — deel nu de karren in");
+            toast.success("Bestelling aangemaakt — karindeling is automatisch berekend");
             qc.invalidateQueries({ queryKey: ["floriday", "salesorders-cache"] });
             if (res?.orderId) {
-                setCartOrderId(res.orderId);
+                navigate({
+                    to: "/floriday-verkoop/verkooporders/$salesOrderId",
+                    params: { salesOrderId: `local:${res.orderId}` },
+                });
             }
             else {
                 navigate({ to: "/floriday-verkoop/verkooporders" });
@@ -202,7 +205,7 @@ export function CreateOrderPage() {
                                                 : "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) => {
+                                        })), 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 ", !isReservation && _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Input, { type: "date", value: !isReservation && canPickDate ? deliveryDate : "", min: canPickDate ? earliestISO : undefined, disabled: isReservation || !canPickDate, onChange: (e) => {
                                             const v = e.target.value || "";
                                             if (v && v < earliestISO) {
                                                 toast.error(`Eerst mogelijke leverdatum is ${earliestLabel}.`);
@@ -210,7 +213,7 @@ export function CreateOrderPage() {
                                                 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) => {
+                                        } }), _jsxs("label", { className: "mt-1 flex items-center gap-2 text-sm text-foreground", children: [_jsx("input", { type: "checkbox", checked: isReservation, onChange: (e) => setIsReservation(e.target.checked), className: "h-4 w-4 rounded border-input" }), "Reservering (nog geen vaste leverdatum)"] }), isReservation ? (_jsx("div", { className: "text-xs text-muted-foreground", children: "De bestelling wordt als reservering aangemaakt zonder leverdatumvalidatie." })) : !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;
@@ -263,8 +266,5 @@ export function CreateOrderPage() {
                                                         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" })] })] })] }), _jsx(CartAssignmentWizard, { orderId: cartOrderId, open: !!cartOrderId, onClose: () => {
-                    setCartOrderId(null);
-                    navigate({ to: "/floriday-verkoop/verkooporders" });
-                } })] }));
+                                    }), _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/EditLocalOrderDialog.d.ts

@@ -0,0 +1,6 @@
+export declare function EditLocalOrderDialog({ orderId, open, onOpenChange, }: {
+    orderId: string;
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=EditLocalOrderDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditLocalOrderDialog.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/EditLocalOrderDialog.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,IAAI,EACJ,YAAY,GACb,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,kDAyMA"}

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

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button, Input, toast } from "@flowselections/core";
+import { useServerFn } from "@tanstack/react-start";
+import { useQueryClient } from "@tanstack/react-query";
+import { getLocalOrderForEdit, updateLocalOrder, } from "../../lib/create-order.functions";
+export function EditLocalOrderDialog({ orderId, open, onOpenChange, }) {
+    const load = useServerFn(getLocalOrderForEdit);
+    const save = useServerFn(updateLocalOrder);
+    const queryClient = useQueryClient();
+    const [loading, setLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [deliveryDate, setDeliveryDate] = useState("");
+    const [isReservation, setIsReservation] = useState(false);
+    const [items, setItems] = useState([]);
+    useEffect(() => {
+        if (!open)
+            return;
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        load({ data: { orderId } })
+            .then((r) => {
+            if (cancelled)
+                return;
+            setDeliveryDate((r.deliveryDate ?? "").slice(0, 10));
+            setIsReservation(!!r.isReservation);
+            setItems(r.items.map((it) => ({
+                id: it.id,
+                productName: it.productName,
+                quantity: it.quantity,
+                unit: it.unit,
+                plantsPerCrate: it.plantsPerCrate ?? 1,
+                minQuantity: Number(it.minQuantity ?? 0),
+                shippedQuantity: Number(it.shippedQuantity ?? 0),
+                plannedQuantity: Number(it.plannedQuantity ?? 0),
+            })));
+        })
+            .catch((e) => !cancelled && setError(e?.message ?? "Laden mislukt"))
+            .finally(() => !cancelled && setLoading(false));
+        return () => {
+            cancelled = true;
+        };
+    }, [open, orderId, load]);
+    if (!open)
+        return null;
+    const setPlants = (idx, plants) => {
+        setItems((prev) => prev.map((p, i) => (i === idx ? { ...p, quantity: Number.isFinite(plants) ? Math.max(0, plants) : 0 } : p)));
+    };
+    const setFusten = (idx, fusten) => {
+        setItems((prev) => prev.map((p, i) => {
+            if (i !== idx)
+                return p;
+            const ppc = Math.max(1, p.plantsPerCrate);
+            const f = Number.isFinite(fusten) ? Math.max(0, fusten) : 0;
+            return { ...p, quantity: f * ppc };
+        }));
+    };
+    const handleSave = async () => {
+        for (const it of items) {
+            const ppc = Math.max(1, it.plantsPerCrate);
+            if (it.quantity < ppc || it.quantity % ppc !== 0) {
+                toast.error(`"${it.productName}" moet per hele fust besteld worden (min. 1 fust = ${ppc} planten).`);
+                return;
+            }
+            if (it.quantity < it.minQuantity) {
+                toast.error(`"${it.productName}" kan niet lager dan ${it.minQuantity} — er is al ${it.shippedQuantity} geleverd en ${it.plannedQuantity} gepland op bezorgmomenten.`);
+                return;
+            }
+        }
+        try {
+            setSaving(true);
+            await save({
+                data: {
+                    orderId,
+                    deliveryDate: !isReservation && deliveryDate ? deliveryDate : undefined,
+                    items: items.map((i) => ({ itemId: i.id, quantity: Math.round(i.quantity) })),
+                },
+            });
+            toast.success("Bestelling bijgewerkt");
+            await Promise.all([
+                queryClient.invalidateQueries({ queryKey: ["floriday", "salesorders-cache"] }),
+                queryClient.invalidateQueries({ queryKey: ["order-shipments", orderId] }),
+                queryClient.invalidateQueries({ queryKey: ["order-carts", orderId] }),
+                queryClient.invalidateQueries({ queryKey: ["salesorder-detail", orderId] }),
+            ]);
+            onOpenChange(false);
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Bijwerken mislukt");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", onClick: () => !saving && onOpenChange(false), children: _jsxs("div", { className: "w-full max-w-xl rounded-lg border border-border bg-card p-6 shadow-lg", onClick: (e) => e.stopPropagation(), children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Bestelling bewerken" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Pas de leverdatum en het aantal planten of fusten per regel aan. Voorraad en karindeling worden automatisch bijgewerkt." }), loading ? (_jsx("div", { className: "mt-6 text-sm text-muted-foreground", children: "Laden\u2026" })) : error ? (_jsx("div", { className: "mt-6 rounded border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive", children: error })) : (_jsxs("div", { className: "mt-5 space-y-4", children: [!isReservation && (_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium text-foreground", children: "Leverdatum" }), _jsx(Input, { type: "date", value: deliveryDate, onChange: (e) => setDeliveryDate(e.target.value) })] })), isReservation && (_jsx("div", { className: "rounded border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground", children: "Dit is een reservering \u2014 er is nog geen leverdatum. Voeg een bezorgmoment toe om (deels) uit te leveren." })), _jsxs("div", { children: [_jsx("div", { className: "mb-2 text-sm font-medium text-foreground", children: "Regels" }), _jsxs("div", { className: "grid grid-cols-12 gap-2 px-1 text-xs text-muted-foreground", children: [_jsx("div", { className: "col-span-6", children: "Product" }), _jsx("div", { className: "col-span-3", children: "Planten" }), _jsx("div", { className: "col-span-3", children: "Fusten" })] }), _jsxs("div", { className: "mt-1 space-y-2", children: [items.map((it, idx) => {
+                                            const ppc = Math.max(1, it.plantsPerCrate);
+                                            const fusten = ppc > 0 ? Math.ceil(it.quantity / ppc) : 0;
+                                            return (_jsxs("div", { className: "grid grid-cols-12 items-start gap-2 rounded border border-border p-2", children: [_jsxs("div", { className: "col-span-6 min-w-0 text-sm", children: [_jsx("div", { className: "truncate font-medium text-foreground", children: it.productName }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [ppc, " planten per fust"] }), it.minQuantity > 0 && (_jsxs("div", { className: "text-xs text-primary", children: ["min. ", it.minQuantity, " (reeds ", it.shippedQuantity, " geleverd, ", it.plannedQuantity, " gepland)"] }))] }), _jsx("div", { className: "col-span-3", children: _jsx(Input, { type: "number", min: 0, step: ppc, value: it.quantity, onChange: (e) => setPlants(idx, Number(e.target.value)) }) }), _jsx("div", { className: "col-span-3", children: _jsx(Input, { type: "number", min: 0, step: 1, value: fusten, onChange: (e) => setFusten(idx, Number(e.target.value)) }) })] }, it.id));
+                                        }), items.length === 0 && (_jsx("div", { className: "text-sm text-muted-foreground", children: "Geen regels op deze bestelling." }))] })] })] })), _jsxs("div", { className: "mt-6 flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => onOpenChange(false), disabled: saving, children: "Annuleren" }), _jsx(Button, { size: "sm", onClick: handleSave, disabled: saving || loading || !!error, children: saving ? "Bezig…" : "Opslaan" })] })] }) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"OrderKarindelingCard.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/OrderKarindelingCard.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AA6F/D,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,aAAa,CAAA;CAAE,2CA+KvE"}
+{"version":3,"file":"OrderKarindelingCard.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/OrderKarindelingCard.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AA8F/D,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,aAAa,CAAA;CAAE,2CAgLvE"}

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

@@ -9,6 +9,7 @@ import { Badge, Card, CardContent, CardHeader, CardTitle, Table, TableBody, Tabl
 import { CheckCircle2, Lock } from "lucide-react";
 import { supabase } from "../../integrations/supabase/client";
 import { planCarts } from "../../lib/cart-planner";
+import { expandOrderItemsForPlanner } from "../../lib/expand-group-order-items";
 function deriveCartsFromFloriday(order) {
     const o = order.raw.order ?? {};
     const pack = o?.packingConfiguration ?? {};
@@ -74,6 +75,7 @@ export function OrderKarindelingCard({ order }) {
     const orderId = typeof rawId === "string" ? rawId.replace(/^(local:|mailbox-proposal:)/, "") : rawId;
     const [lockedAt, setLockedAt] = useState(null);
     const [dbItems, setDbItems] = useState(null);
+    const [plannerInputs, setPlannerInputs] = useState(null);
     // Laadt order_items + gekoppelde products (voorraad-belading) en
     // ververst live bij mutaties op order_items, orders of products.
     useEffect(() => {
@@ -90,8 +92,24 @@ export function OrderKarindelingCard({ order }) {
             ]);
             if (!active)
                 return;
-            setDbItems(itemRows ?? []);
+            const items = itemRows ?? [];
+            setDbItems(items);
             setLockedAt(orderRow?.plan_locked_at ?? null);
+            // Alle order_items doorgeven — expand-helper resolveert zelf groepen
+            // (via product_id óf via naamprefix "[Groep] ...") en losse artikelen.
+            const raws = items.map((it) => ({
+                id: it.id,
+                product_id: it.product_id,
+                product_name: it.product_name,
+                quantity: Number(it.quantity ?? 0),
+                plants_per_crate: Math.max(1, Number(it.products?.plants_per_crate ?? 1)),
+                crates_per_layer: Math.max(1, Number(it.products?.crates_per_layer ?? 1)),
+                layers_per_cart: Math.max(1, Number(it.products?.layers_per_cart ?? 1)),
+            }));
+            const expanded = await expandOrderItemsForPlanner(supabase, raws);
+            if (!active)
+                return;
+            setPlannerInputs(expanded);
         };
         void load();
         const channel = supabase
@@ -105,36 +123,16 @@ export function OrderKarindelingCard({ order }) {
             void supabase.removeChannel(channel);
         };
     }, [orderId]);
-    // Bouw plannerinput uit voorraad-belading. Alleen items met een gekoppeld
-    // product (product_id + belading in products-tabel) worden meegenomen.
+    // Bouw plannerinput. Bij een groep-order_item zijn de sub-items al
+    // opgesplitst met member-belading; anders is er één regel per item.
     const plannerCarts = useMemo(() => {
-        if (!dbItems || dbItems.length === 0)
+        if (!plannerInputs || plannerInputs.length === 0) {
+            if (dbItems && dbItems.length > 0)
+                return null;
             return null;
-        const inputs = [];
-        for (const it of dbItems) {
-            const p = it.products;
-            if (!it.product_id || !p)
-                continue;
-            const ppc = Math.max(1, Number(p.plants_per_crate ?? 0));
-            const cpl = Math.max(1, Number(p.crates_per_layer ?? 0));
-            const lpc = Math.max(1, Number(p.layers_per_cart ?? 0));
-            const plants = Math.max(0, Number(it.quantity ?? 0));
-            if (plants <= 0)
-                continue;
-            inputs.push({
-                order_item_id: it.id,
-                product_id: it.product_id,
-                product_name: it.product_name,
-                plants,
-                plants_per_crate: ppc,
-                crates_per_layer: cpl,
-                layers_per_cart: lpc,
-            });
         }
-        if (inputs.length === 0)
-            return null;
-        return planCarts(inputs).carts;
-    }, [dbItems]);
+        return planCarts(plannerInputs).carts;
+    }, [plannerInputs, dbItems]);
     const floridayCarts = useMemo(() => deriveCartsFromFloriday(order), [order]);
     const usingVoorraad = plannerCarts !== null;
     const carts = usingVoorraad

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

@@ -0,0 +1,5 @@
+import type { SalesOrderDTO } from "../../lib/salesorders-mapping";
+export declare function OrderShipmentsCard({ order }: {
+    order: SalesOrderDTO;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=OrderShipmentsCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrderShipmentsCard.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/OrderShipmentsCard.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AA4C/D,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,aAAa,CAAA;CAAE,kDASrE"}

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

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Bezorgmomenten (deelleveringen) voor een bestelling.
+// Toont totalen (besteld / gepland / geleverd / openstaand), lijst met shipments
+// en knoppen om nieuwe bezorgmomenten aan te maken en te markeren als geleverd.
+import { useMemo, useState } from "react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, } from "@flowselections/core";
+import { CalendarPlus, CheckCircle2, Trash2, Truck } from "lucide-react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { cancelShipment, createShipment, listOrderShipments, markShipmentShipped, } from "../../lib/order-shipments.functions";
+function formatDate(iso) {
+    if (!iso)
+        return "—";
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    return d.toLocaleDateString("nl-NL", { day: "numeric", month: "short", year: "numeric" });
+}
+export function OrderShipmentsCard({ order }) {
+    // Alleen lokale (en dus reserveer-bare) orders ondersteunen deelleveringen.
+    const rawId = order.isLocal && order.id.startsWith("local:")
+        ? order.id.slice("local:".length)
+        : null;
+    if (!rawId)
+        return null;
+    return _jsx(OrderShipmentsInner, { orderId: rawId });
+}
+function OrderShipmentsInner({ orderId }) {
+    const list = useServerFn(listOrderShipments);
+    const create = useServerFn(createShipment);
+    const markShipped = useServerFn(markShipmentShipped);
+    const cancel = useServerFn(cancelShipment);
+    const queryClient = useQueryClient();
+    const [openCreate, setOpenCreate] = useState(false);
+    const { data, isLoading } = useQuery({
+        queryKey: ["order-shipments", orderId],
+        queryFn: () => list({ data: { orderId } }),
+    });
+    const totals = data?.totals ?? [];
+    const shipments = data?.shipments ?? [];
+    const summed = useMemo(() => {
+        return totals.reduce((a, t) => ({
+            ordered: a.ordered + t.ordered,
+            shipped: a.shipped + t.shipped,
+            planned: a.planned + t.planned,
+            outstanding: a.outstanding + t.outstanding,
+        }), { ordered: 0, shipped: 0, planned: 0, outstanding: 0 });
+    }, [totals]);
+    const refresh = () => {
+        queryClient.invalidateQueries({ queryKey: ["order-shipments", orderId] });
+        queryClient.invalidateQueries({ queryKey: ["floriday", "salesorders-cache"] });
+    };
+    const hasOpen = totals.some((t) => t.remaining > 0);
+    const allShipped = totals.length > 0 && summed.outstanding === 0;
+    return (_jsxs(_Fragment, { children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { className: "text-base", children: "Bezorgmomenten & deelleveringen" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Badge, { variant: allShipped ? "default" : "secondary", children: [summed.shipped, " / ", summed.ordered, " geleverd"] }), _jsxs(Button, { size: "sm", onClick: () => setOpenCreate(true), disabled: !hasOpen, title: hasOpen ? "" : "Er zijn geen openstaande aantallen meer.", children: [_jsx(CalendarPlus, { className: "mr-2 h-4 w-4" }), "Nieuw bezorgmoment"] })] })] }), _jsx(CardContent, { className: "space-y-6", children: isLoading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Laden\u2026" })) : (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("div", { className: "mb-2 text-sm font-medium", children: "Voortgang per artikel" }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Artikel" }), _jsx(TableHead, { className: "text-right", children: "Besteld" }), _jsx(TableHead, { className: "text-right", children: "Gepland" }), _jsx(TableHead, { className: "text-right", children: "Geleverd" }), _jsx(TableHead, { className: "text-right", children: "Nog te leveren" })] }) }), _jsx(TableBody, { children: totals.map((t) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: t.product_name }), _jsx(TableCell, { className: "text-right", children: t.ordered }), _jsx(TableCell, { className: "text-right", children: t.planned }), _jsx(TableCell, { className: "text-right", children: t.shipped }), _jsx(TableCell, { className: "text-right", children: _jsx("span", { className: t.outstanding > 0 ? "font-semibold text-primary" : "text-muted-foreground", children: t.outstanding }) })] }, t.order_item_id))) })] })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-2 text-sm font-medium", children: "Bezorgmomenten" }), shipments.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen bezorgmomenten aangemaakt. Maak er \u00E9\u00E9n aan om (deels) uit te leveren." })) : (_jsx("div", { className: "space-y-3", children: shipments.map((s) => (_jsxs("div", { className: "rounded-md border border-border", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b border-border bg-muted/30 px-3 py-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "font-mono font-medium", children: ["Levering #", s.shipment_number] }), _jsx("span", { className: "text-muted-foreground", children: formatDate(s.delivery_date) }), _jsxs(Badge, { variant: s.status === "shipped" ? "default" : "secondary", className: "gap-1", children: [s.status === "shipped" && _jsx(CheckCircle2, { className: "h-3 w-3" }), s.status === "shipped"
+                                                                                ? "Geleverd"
+                                                                                : s.status === "cancelled"
+                                                                                    ? "Geannuleerd"
+                                                                                    : "Gepland"] })] }), _jsx("div", { className: "flex gap-2", children: s.status === "planned" && (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", variant: "default", onClick: async () => {
+                                                                                try {
+                                                                                    await markShipped({ data: { shipmentId: s.id } });
+                                                                                    toast.success("Bezorgmoment geleverd");
+                                                                                    refresh();
+                                                                                }
+                                                                                catch (e) {
+                                                                                    toast.error(e?.message ?? "Markeren mislukt");
+                                                                                }
+                                                                            }, children: [_jsx(Truck, { className: "mr-2 h-4 w-4" }), "Markeer geleverd"] }), _jsx(Button, { size: "sm", variant: "outline", onClick: async () => {
+                                                                                if (!confirm("Bezorgmoment verwijderen?"))
+                                                                                    return;
+                                                                                try {
+                                                                                    await cancel({ data: { shipmentId: s.id } });
+                                                                                    toast.success("Bezorgmoment verwijderd");
+                                                                                    refresh();
+                                                                                }
+                                                                                catch (e) {
+                                                                                    toast.error(e?.message ?? "Verwijderen mislukt");
+                                                                                }
+                                                                            }, children: _jsx(Trash2, { className: "h-4 w-4" }) })] })) })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Artikel" }), _jsx(TableHead, { className: "text-right", children: "Aantal" })] }) }), _jsx(TableBody, { children: s.order_shipment_items.map((i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: i.product_name }), _jsx(TableCell, { className: "text-right", children: i.quantity })] }, i.id))) })] })] }, s.id))) }))] })] })) })] }), openCreate && (_jsx(CreateShipmentDialog, { orderId: orderId, totals: totals.filter((t) => t.remaining > 0), onClose: () => setOpenCreate(false), onCreated: () => {
+                    setOpenCreate(false);
+                    refresh();
+                }, create: create }))] }));
+}
+function CreateShipmentDialog({ orderId, totals, onClose, onCreated, create, }) {
+    const [deliveryDate, setDeliveryDate] = useState(() => {
+        const d = new Date();
+        d.setDate(d.getDate() + 1);
+        return d.toISOString().slice(0, 10);
+    });
+    const [qtyByItem, setQtyByItem] = useState(() => {
+        const init = {};
+        for (const t of totals)
+            init[t.order_item_id] = 0;
+        return init;
+    });
+    const [saving, setSaving] = useState(false);
+    const items = totals.map((t) => ({
+        total: t,
+        qty: qtyByItem[t.order_item_id] ?? 0,
+    }));
+    const canSave = items.some((i) => i.qty > 0) && !!deliveryDate;
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            const selected = items.filter((i) => i.qty > 0);
+            await create({
+                data: {
+                    orderId,
+                    deliveryDate,
+                    items: selected.map((i) => ({
+                        orderItemId: i.total.order_item_id,
+                        productId: i.total.product_id,
+                        productName: i.total.product_name,
+                        quantity: i.qty,
+                    })),
+                },
+            });
+            toast.success("Bezorgmoment aangemaakt");
+            onCreated();
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Aanmaken mislukt");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", onClick: () => !saving && onClose(), children: _jsxs("div", { className: "w-full max-w-xl rounded-lg border border-border bg-card p-6 shadow-lg", onClick: (e) => e.stopPropagation(), children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Nieuw bezorgmoment" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Geef aan wat er op deze datum wordt geleverd. Aantallen mogen niet hoger zijn dan het openstaande aantal." }), _jsxs("div", { className: "mt-5 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Bezorgdatum" }), _jsx(Input, { type: "date", value: deliveryDate, onChange: (e) => setDeliveryDate(e.target.value) })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-2 text-sm font-medium", children: "Regels" }), _jsxs("div", { className: "space-y-2", children: [items.map((i) => {
+                                            const ppc = Math.max(1, i.total.plants_per_crate ?? 1);
+                                            const remainingFusten = Math.floor(i.total.remaining / ppc);
+                                            const qtyFusten = Math.floor(i.qty / ppc);
+                                            return (_jsxs("div", { className: "grid grid-cols-12 items-center gap-2 rounded border border-border p-2", children: [_jsxs("div", { className: "col-span-6 min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium", children: i.total.product_name }), _jsxs("div", { className: "text-xs text-muted-foreground", children: ["openstaand: ", remainingFusten, " fusten (", i.total.remaining, " planten) \u00B7 ", ppc, "/fust"] })] }), _jsx("div", { className: "col-span-3", children: _jsx(Input, { type: "number", min: 0, max: remainingFusten, step: 1, value: qtyFusten, onChange: (e) => {
+                                                                const f = Math.max(0, Math.min(remainingFusten, Number(e.target.value) || 0));
+                                                                setQtyByItem((prev) => ({ ...prev, [i.total.order_item_id]: f * ppc }));
+                                                            } }) }), _jsx("div", { className: "col-span-1 text-xs text-muted-foreground", children: "fusten" }), _jsx("div", { className: "col-span-2 flex gap-1", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setQtyByItem((prev) => ({ ...prev, [i.total.order_item_id]: remainingFusten * ppc })), children: "Alles" }) })] }, i.total.order_item_id));
+                                        }), items.length === 0 && (_jsx("div", { className: "text-sm text-muted-foreground", children: "Geen openstaande aantallen." }))] })] })] }), _jsxs("div", { className: "mt-6 flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: saving, children: "Annuleren" }), _jsx(Button, { size: "sm", onClick: handleSave, disabled: !canSave || saving, children: saving ? "Bezig…" : "Aanmaken" })] })] }) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"SalesOrderDetailPage.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrderDetailPage.tsx"],"names":[],"mappings":"AAMA,wBAAgB,oBAAoB,4CAsCnC"}
+{"version":3,"file":"SalesOrderDetailPage.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrderDetailPage.tsx"],"names":[],"mappings":"AAQA,wBAAgB,oBAAoB,4CA0DnC"}

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { Link, useParams } from "@tanstack/react-router";
 import { Button } from "@flowselections/core";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, Pencil } from "lucide-react";
 import { SalesOrderDetailView } from "../../components/verkoop/SalesOrderDetailView";
+import { EditLocalOrderDialog } from "../../components/verkoop/EditLocalOrderDialog";
 import { useSalesOrdersQuery } from "../../lib/useSalesOrdersQuery";
 export function SalesOrderDetailPage() {
     const { salesOrderId } = useParams({
@@ -10,5 +12,9 @@ export function SalesOrderDetailPage() {
     });
     const { data, isLoading, error } = useSalesOrdersQuery();
     const order = data?.orders.find((o) => o.id === salesOrderId) ?? null;
-    return (_jsxs("main", { className: "space-y-5 p-6", children: [_jsx("div", { className: "flex items-center justify-between gap-3", 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"] }) }) }), isLoading && (_jsx("div", { className: "rounded-lg border border-border bg-card p-8 text-sm text-muted-foreground", children: "Laden\u2026" })), error && (_jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive", children: error.message })), !isLoading && !error && !order && (_jsx("div", { className: "rounded-lg border border-border bg-card p-8 text-sm text-muted-foreground", children: "Order niet gevonden." })), order && (_jsx(SalesOrderDetailView, { order: order, sellerFallback: data?.sellerFallback ?? null }))] }));
+    const [editOpen, setEditOpen] = useState(false);
+    const rawLocalId = order?.isLocal && order.id.startsWith("local:")
+        ? order.id.slice("local:".length)
+        : null;
+    return (_jsxs("main", { className: "space-y-5 p-6", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", 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"] }) }), rawLocalId && (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Bestelling bewerken"] }))] }), isLoading && (_jsx("div", { className: "rounded-lg border border-border bg-card p-8 text-sm text-muted-foreground", children: "Laden\u2026" })), error && (_jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive", children: error.message })), !isLoading && !error && !order && (_jsx("div", { className: "rounded-lg border border-border bg-card p-8 text-sm text-muted-foreground", children: "Order niet gevonden." })), order && (_jsx(SalesOrderDetailView, { order: order, sellerFallback: data?.sellerFallback ?? null })), rawLocalId && (_jsx(EditLocalOrderDialog, { orderId: rawLocalId, open: editOpen, onOpenChange: setEditOpen }))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SalesOrderDetailView.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrderDetailView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AA+HnE,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,cAAc,GACf,EAAE;IACD,KAAK,EAAE,aAAa,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,2CA8RA"}
+{"version":3,"file":"SalesOrderDetailView.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrderDetailView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAiInE,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,cAAc,GACf,EAAE;IACD,KAAK,EAAE,aAAa,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,2CAgSA"}

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

@@ -3,6 +3,7 @@ import { CheckCircle2, ImageIcon } from "lucide-react";
 import { OrderKarindelingCard } from "./OrderKarindelingCard";
 import { OrderAfleverbrievenCard } from "./OrderAfleverbrievenCard";
 import { AutoFulfillmentStatusCard } from "./AutoFulfillmentStatusCard";
+import { OrderShipmentsCard } from "./OrderShipmentsCard";
 const eurFlex = new Intl.NumberFormat("nl-NL", {
     style: "currency",
     currency: "EUR",
@@ -212,5 +213,5 @@ export function SalesOrderDetailView({ order, sellerFallback, }) {
     const bestellingLabel = order.status.isCancelled
         ? "Geannuleerd"
         : STATUS_LABELS[statusKey] ?? (order.status.isShipped ? "Verzonden" : order.status.isConfirmed ? "Order bevestigd" : "Open");
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-3 rounded-md border border-border bg-muted/30 p-3", children: [_jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted", children: order.imageUrl ? (_jsx("img", { src: order.imageUrl, alt: "", className: "h-full w-full object-cover" })) : (_jsx(ImageIcon, { className: "h-6 w-6 text-muted-foreground" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "truncate text-base font-semibold text-foreground", children: [order.productName, o.tradeItemVersion ? (_jsxs("span", { className: "ml-2 text-xs font-normal text-muted-foreground", children: ["\u00B7 v", o.tradeItemVersion] })) : null] }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: order.orderNumber || order.sku || "—" })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-[1fr_360px]", children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx(SectionTitle, { children: "Verkooporder" }), _jsx(Row, { label: "Ordernummer", children: order.orderNumber || "—" }), _jsx(Row, { label: "Handelsvorm", children: tradingType }), _jsx(Row, { label: "Bestelmoment", children: fmtDateTime(order.orderedAt) }), _jsx(Row, { label: "Aantal", children: _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs("div", { children: [order.fustCount, " fusten"] }), _jsxs("div", { children: [order.karCount, " karren"] })] }) }), _jsx(Row, { label: "Belading", children: belading }), _jsx(Row, { label: "Klant referentie", children: klantReferentie }), _jsx(Row, { label: "Floriday-referentie", children: floridayRef }), _jsx(Row, { label: "Verkoopkanaal", children: verkoopkanaal }), _jsx(Row, { label: "Financi\u00EBle afhandeling", children: financial }), _jsx(Row, { label: "Verkoper", children: sellerName ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { className: "inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground", children: initials(sellerName) }), sellerName] })) : ("—") })] }), _jsxs("div", { children: [_jsx(SectionTitle, { children: "Levering" }), _jsx(Row, { label: "Afleverdatum", children: fmtDateTime(order.deliveryAt) }), _jsx(Row, { label: "Incoterm", children: incoterm }), _jsx(Row, { label: "Levering", children: _jsxs("div", { className: "inline-flex max-w-xs items-start gap-3 rounded-md border border-border bg-card p-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-md bg-primary/10 text-primary", children: _jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 11l9-8 9 8" }), _jsx("path", { d: "M5 10v10h14V10" }), _jsx("path", { d: "M10 20v-6h4v6" })] }) }), _jsxs("div", { className: "text-sm", children: [_jsx("div", { children: addr.line || "—" }), _jsx("div", { children: [addr.postal, addr.city].filter(Boolean).join(" ") || "—" }), _jsx("div", { children: countryLabel ?? "" }), addr.gln && (_jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: addr.gln }))] })] }) })] }), _jsxs("div", { children: [_jsx(SectionTitle, { children: "Klant" }), _jsx(Row, { label: "Naam", children: _jsx("span", { className: "font-medium", children: customerName }) }), _jsx(Row, { label: "GLN", children: customerGln }), _jsx(Row, { label: "Administratienummer", children: customerAdmin }), _jsx(Row, { label: "Telefoonnummer", children: customerPhone })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "rounded-md border border-border p-4", children: [_jsx("div", { className: "mb-3 text-sm font-semibold", children: "Prijs per stuk" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Product" }), _jsxs("span", { children: [oldProductPrice !== null && (_jsx("span", { className: "mr-2 text-destructive line-through", children: eurFlex.format(oldProductPrice) })), eurFlex.format(productUnit)] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Transportkosten" }), _jsx("span", { children: eurFlex.format(transportPerPiece) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Inkoopprijs" }), _jsx("span", { children: eurFlex.format(purchaseUnit) })] }), _jsxs("div", { className: "mt-2 flex justify-between border-t border-border pt-2 font-semibold", children: [_jsx("span", { children: "Totaal" }), _jsxs("span", { children: [_jsxs("span", { className: "mr-2 text-xs font-normal text-muted-foreground", children: ["(", packages, " \u00D7 ", piecesPerPackage, " \u00D7 ", eurFlex.format(productUnit), ")"] }), eurFlex.format(totalAmount)] })] })] })] }), _jsxs("div", { className: "rounded-md border border-border p-4", children: [_jsx("div", { className: "mb-3 text-sm font-semibold", children: "Status" }), _jsxs("div", { className: "space-y-3 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-muted-foreground", children: "Bestelling" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600" }), bestellingLabel] })] }), hasCorrection && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-muted-foreground", children: "Correctie" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600" }), "Correctie is verwerkt"] })] }))] })] })] })] }), _jsx(OrderKarindelingCard, { order: order }), o?.salesOrderId ? (_jsxs(_Fragment, { children: [_jsx(AutoFulfillmentStatusCard, { salesOrderId: String(o.salesOrderId) }), _jsx(OrderAfleverbrievenCard, { salesOrderId: String(o.salesOrderId) })] })) : null] }));
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-3 rounded-md border border-border bg-muted/30 p-3", children: [_jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted", children: order.imageUrl ? (_jsx("img", { src: order.imageUrl, alt: "", className: "h-full w-full object-cover" })) : (_jsx(ImageIcon, { className: "h-6 w-6 text-muted-foreground" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "truncate text-base font-semibold text-foreground", children: [order.productName, o.tradeItemVersion ? (_jsxs("span", { className: "ml-2 text-xs font-normal text-muted-foreground", children: ["\u00B7 v", o.tradeItemVersion] })) : null] }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: order.orderNumber || order.sku || "—" })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-[1fr_360px]", children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx(SectionTitle, { children: "Verkooporder" }), _jsx(Row, { label: "Ordernummer", children: order.orderNumber || "—" }), _jsx(Row, { label: "Handelsvorm", children: tradingType }), _jsx(Row, { label: "Bestelmoment", children: fmtDateTime(order.orderedAt) }), _jsx(Row, { label: "Aantal", children: _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs("div", { children: [order.fustCount, " fusten"] }), _jsxs("div", { children: [order.karCount, " karren"] })] }) }), _jsx(Row, { label: "Belading", children: belading }), _jsx(Row, { label: "Klant referentie", children: klantReferentie }), _jsx(Row, { label: "Floriday-referentie", children: floridayRef }), _jsx(Row, { label: "Verkoopkanaal", children: verkoopkanaal }), _jsx(Row, { label: "Financi\u00EBle afhandeling", children: financial }), _jsx(Row, { label: "Verkoper", children: sellerName ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { className: "inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground", children: initials(sellerName) }), sellerName] })) : ("—") })] }), _jsxs("div", { children: [_jsx(SectionTitle, { children: "Levering" }), _jsx(Row, { label: "Afleverdatum", children: fmtDateTime(order.deliveryAt) }), _jsx(Row, { label: "Incoterm", children: incoterm }), _jsx(Row, { label: "Levering", children: _jsxs("div", { className: "inline-flex max-w-xs items-start gap-3 rounded-md border border-border bg-card p-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-md bg-primary/10 text-primary", children: _jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 11l9-8 9 8" }), _jsx("path", { d: "M5 10v10h14V10" }), _jsx("path", { d: "M10 20v-6h4v6" })] }) }), _jsxs("div", { className: "text-sm", children: [_jsx("div", { children: addr.line || "—" }), _jsx("div", { children: [addr.postal, addr.city].filter(Boolean).join(" ") || "—" }), _jsx("div", { children: countryLabel ?? "" }), addr.gln && (_jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: addr.gln }))] })] }) })] }), _jsxs("div", { children: [_jsx(SectionTitle, { children: "Klant" }), _jsx(Row, { label: "Naam", children: _jsx("span", { className: "font-medium", children: customerName }) }), _jsx(Row, { label: "GLN", children: customerGln }), _jsx(Row, { label: "Administratienummer", children: customerAdmin }), _jsx(Row, { label: "Telefoonnummer", children: customerPhone })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "rounded-md border border-border p-4", children: [_jsx("div", { className: "mb-3 text-sm font-semibold", children: "Prijs per stuk" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Product" }), _jsxs("span", { children: [oldProductPrice !== null && (_jsx("span", { className: "mr-2 text-destructive line-through", children: eurFlex.format(oldProductPrice) })), eurFlex.format(productUnit)] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Transportkosten" }), _jsx("span", { children: eurFlex.format(transportPerPiece) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Inkoopprijs" }), _jsx("span", { children: eurFlex.format(purchaseUnit) })] }), _jsxs("div", { className: "mt-2 flex justify-between border-t border-border pt-2 font-semibold", children: [_jsx("span", { children: "Totaal" }), _jsxs("span", { children: [_jsxs("span", { className: "mr-2 text-xs font-normal text-muted-foreground", children: ["(", packages, " \u00D7 ", piecesPerPackage, " \u00D7 ", eurFlex.format(productUnit), ")"] }), eurFlex.format(totalAmount)] })] })] })] }), _jsxs("div", { className: "rounded-md border border-border p-4", children: [_jsx("div", { className: "mb-3 text-sm font-semibold", children: "Status" }), _jsxs("div", { className: "space-y-3 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-muted-foreground", children: "Bestelling" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600" }), bestellingLabel] })] }), hasCorrection && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-muted-foreground", children: "Correctie" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600" }), "Correctie is verwerkt"] })] }))] })] })] })] }), _jsx(OrderShipmentsCard, { order: order }), _jsx(OrderKarindelingCard, { order: order }), o?.salesOrderId ? (_jsxs(_Fragment, { children: [_jsx(AutoFulfillmentStatusCard, { salesOrderId: String(o.salesOrderId) }), _jsx(OrderAfleverbrievenCard, { salesOrderId: String(o.salesOrderId) })] })) : null] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SalesOrdersFilters.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersFilters.tsx"],"names":[],"mappings":"AA8BA,MAAM,WAAW,OAAO;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;CACnE;AAoCD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,2CA4PA"}
+{"version":3,"file":"SalesOrdersFilters.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersFilters.tsx"],"names":[],"mappings":"AA4BA,MAAM,WAAW,OAAO;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;CACnE;AAoCD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,2CA0NA"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
-import { ChevronDown, ChevronLeft, ChevronRight, MoreVertical, ShoppingCart, Truck, Search, } from "lucide-react";
+import { ChevronDown, ChevronLeft, ChevronRight, MoreVertical, Search, } from "lucide-react";
 import { WeekCalendar } from "./WeekCalendar";
 function getCurrentWeek() {
     const now = new Date();
@@ -127,13 +127,7 @@ export function SalesOrdersFilters({ value, onChange, }) {
     return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "flex h-9 items-center gap-1 rounded-md border border-border bg-card px-1", children: [showArrows && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => shiftPeriod(-1), className: "inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Vorige", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => shiftPeriod(1), className: "inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Volgende", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })), period === "month" ? (_jsxs(Select, { value: `${monthYear}-${month}`, onValueChange: (v) => {
                             const [y, m] = v.split("-").map(Number);
                             onChange({ ...value, month: m, monthYear: y });
-                        }, children: [_jsx(SelectTrigger, { className: "h-7 w-36 border-0 bg-transparent px-2 text-sm font-medium text-foreground shadow-none focus:ring-0", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: monthOptions.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })) : period === "day" ? (_jsx(Input, { type: "date", value: day, onChange: (e) => onChange({ ...value, day: e.target.value }), className: "h-7 w-40 border-0 bg-transparent px-2 text-sm font-medium text-foreground shadow-none focus-visible:ring-0" })) : period === "custom" ? (_jsxs("div", { className: "flex items-center gap-1 px-2", children: [_jsx(Input, { type: "date", value: value.customFrom ?? todayYmd, onChange: (e) => onChange({ ...value, customFrom: e.target.value }), className: "h-7 w-36 border-0 bg-transparent px-1 text-sm font-medium text-foreground shadow-none focus-visible:ring-0" }), _jsx("span", { className: "text-muted-foreground", children: "\u2013" }), _jsx(Input, { type: "date", value: value.customTo ?? todayYmd, onChange: (e) => onChange({ ...value, customTo: e.target.value }), className: "h-7 w-36 border-0 bg-transparent px-1 text-sm font-medium text-foreground shadow-none focus-visible:ring-0" })] })) : period === "last7" || period === "last30" ? (_jsx("span", { className: "px-2 text-sm font-medium text-foreground whitespace-nowrap", children: period === "last7" ? "Afgelopen 7 dagen" : "Afgelopen 30 dagen" })) : (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "px-2 text-sm font-medium text-foreground whitespace-nowrap rounded hover:bg-accent h-7", "aria-label": "Kies week", children: ["Week ", week, " - ", year] }) }), _jsx(PopoverContent, { className: "w-auto p-0 pointer-events-auto", align: "start", children: _jsx(WeekCalendar, { week: week, year: year, onSelect: (w, y) => onChange({ ...value, week: w, year: y }) }) })] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Periode-opties", children: _jsx(MoreVertical, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsxs(DropdownMenuRadioGroup, { value: period, onValueChange: (v) => handlePeriodChange(v), children: [_jsx(DropdownMenuRadioItem, { value: "day", children: "Dag" }), _jsx(DropdownMenuRadioItem, { value: "week", children: "Week" }), _jsx(DropdownMenuRadioItem, { value: "month", children: "Maand" }), _jsx(DropdownMenuRadioItem, { value: "last7", children: "Afgelopen 7 dagen" }), _jsx(DropdownMenuRadioItem, { value: "last30", children: "Afgelopen 30 dagen" }), _jsx(DropdownMenuRadioItem, { value: "custom", children: "Aangepast tijdsbestek" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs("div", { className: "px-2 py-1.5 text-sm text-muted-foreground inline-flex items-center gap-1", children: [periodLabel(), _jsx(ChevronDown, { className: "h-3.5 w-3.5" })] })] })] })] }), _jsxs("div", { className: "flex h-9 items-center rounded-md border border-border bg-card", children: [_jsx("button", { type: "button", onClick: () => onChange({ ...value, dateField: "ordered" }), className: "inline-flex h-9 w-9 items-center justify-center rounded-l-md border-r border-border " +
-                            ((value.dateField ?? "ordered") === "ordered"
-                                ? "bg-accent text-foreground"
-                                : "text-muted-foreground hover:bg-accent hover:text-foreground"), "aria-label": "Filter op besteldatum", title: "Filter op besteldatum", "aria-pressed": (value.dateField ?? "ordered") === "ordered", children: _jsx(ShoppingCart, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onChange({ ...value, dateField: "delivery" }), className: "inline-flex h-9 w-9 items-center justify-center rounded-r-md " +
-                            (value.dateField === "delivery"
-                                ? "bg-accent text-foreground"
-                                : "text-muted-foreground hover:bg-accent hover:text-foreground"), "aria-label": "Filter op transportdatum", title: "Filter op transportdatum", "aria-pressed": value.dateField === "delivery", children: _jsx(Truck, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex h-9 items-center overflow-hidden rounded-md border border-border bg-card", children: [_jsx(Input, { placeholder: "Op briefnummer zoeken", value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
+                        }, children: [_jsx(SelectTrigger, { className: "h-7 w-36 border-0 bg-transparent px-2 text-sm font-medium text-foreground shadow-none focus:ring-0", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: monthOptions.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })) : period === "day" ? (_jsx(Input, { type: "date", value: day, onChange: (e) => onChange({ ...value, day: e.target.value }), className: "h-7 w-40 border-0 bg-transparent px-2 text-sm font-medium text-foreground shadow-none focus-visible:ring-0" })) : period === "custom" ? (_jsxs("div", { className: "flex items-center gap-1 px-2", children: [_jsx(Input, { type: "date", value: value.customFrom ?? todayYmd, onChange: (e) => onChange({ ...value, customFrom: e.target.value }), className: "h-7 w-36 border-0 bg-transparent px-1 text-sm font-medium text-foreground shadow-none focus-visible:ring-0" }), _jsx("span", { className: "text-muted-foreground", children: "\u2013" }), _jsx(Input, { type: "date", value: value.customTo ?? todayYmd, onChange: (e) => onChange({ ...value, customTo: e.target.value }), className: "h-7 w-36 border-0 bg-transparent px-1 text-sm font-medium text-foreground shadow-none focus-visible:ring-0" })] })) : period === "last7" || period === "last30" ? (_jsx("span", { className: "px-2 text-sm font-medium text-foreground whitespace-nowrap", children: period === "last7" ? "Afgelopen 7 dagen" : "Afgelopen 30 dagen" })) : (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "px-2 text-sm font-medium text-foreground whitespace-nowrap rounded hover:bg-accent h-7", "aria-label": "Kies week", children: ["Week ", week, " - ", year] }) }), _jsx(PopoverContent, { className: "w-auto p-0 pointer-events-auto", align: "start", children: _jsx(WeekCalendar, { week: week, year: year, onSelect: (w, y) => onChange({ ...value, week: w, year: y }) }) })] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Periode-opties", children: _jsx(MoreVertical, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsxs(DropdownMenuRadioGroup, { value: period, onValueChange: (v) => handlePeriodChange(v), children: [_jsx(DropdownMenuRadioItem, { value: "day", children: "Dag" }), _jsx(DropdownMenuRadioItem, { value: "week", children: "Week" }), _jsx(DropdownMenuRadioItem, { value: "month", children: "Maand" }), _jsx(DropdownMenuRadioItem, { value: "last7", children: "Afgelopen 7 dagen" }), _jsx(DropdownMenuRadioItem, { value: "last30", children: "Afgelopen 30 dagen" }), _jsx(DropdownMenuRadioItem, { value: "custom", children: "Aangepast tijdsbestek" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs("div", { className: "px-2 py-1.5 text-sm text-muted-foreground inline-flex items-center gap-1", children: [periodLabel(), _jsx(ChevronDown, { className: "h-3.5 w-3.5" })] })] })] })] }), _jsxs("div", { className: "flex h-9 items-center overflow-hidden rounded-md border border-border bg-card", children: [_jsx(Input, { placeholder: "Op briefnummer zoeken", value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
                             if (e.key === "Enter")
                                 onChange({ ...value, search });
                         }, onBlur: () => onChange({ ...value, search }), className: "h-9 w-56 border-0 shadow-none focus-visible:ring-0" }), _jsx("button", { type: "button", onClick: () => onChange({ ...value, search }), className: "inline-flex h-9 w-10 items-center justify-center bg-primary text-primary-foreground hover:opacity-90", "aria-label": "Zoeken", children: _jsx(Search, { className: "h-4 w-4" }) })] })] }));