@flowselections/floriday-voorraad 1.0.15 → 1.0.17

package/dist-lib/components/voorraad/ArtikelWizard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button, Card, CardContent, Checkbox, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, toast, } from "@flowselections/core";
 import { ArrowLeft, ArrowRight, Check, ChevronDown, ClipboardList, Info, Loader2, Plus, Search, Trash2, Upload, UploadCloud, Users, X, } from "lucide-react";
@@ -8,14 +8,29 @@ import { useFlorydayCustomers } from "../../hooks/useFlorydayCustomers";
 import { floriday } from "../../lib/floriday-client";
 import { listFloricode } from "../../lib/floricode-client";
 import { supabase } from "../../integrations/supabase/client";
-import { buildAddTradeItemPayload, emptyWizardData, floridayCacheToWizardData, PACKAGING_SUPPLIERS, validateStep, } from "../../lib/floriday-payload";
+import { buildAddTradeItemPayload, buildUpdateTradeItemPayload, buildPrimaryPackingBase, emptyWizardData, floridayCacheToWizardData, PACKAGING_SUPPLIERS, validateStep, } from "../../lib/floriday-payload";
+import { AdditionalPackagingDialog } from "./AdditionalPackagingDialog";
+import { publishCustomerOfferFn } from "../../lib/floriday-customer-offer.functions";
+import { upsertSupplyLineForTradeItem } from "../../lib/floriday-supply-line";
 import { deleteLocalTradeItem, getLocalTradeItem, upsertLocalTradeItem, } from "../../hooks/useLocalTradeItems";
 import { useTradeItemSpec } from "../../hooks/useTradeItemSpec";
 import { useVbnRegulatoryFeatures } from "../../hooks/useVbnRegulatoryFeatures";
 import { useCodeList, useTradeItemFormSchema } from "../../hooks/useFloriday";
-import floridayLogo from "../../assets/floriday-logo.png.asset.json";
+const floridayLogo = "/flowselections-assets/Voorraad/floriday-logo.png";
 import { VoorraadStockCard } from "../../components/voorraad/VoorraadStockCard";
+import { ProductLinkCard } from "../../components/voorraad/ProductLinkCard";
+import { PriceStatusBadge } from "../../components/voorraad/PriceStatusBadge";
+import { OrderHistoryCard } from "../../components/voorraad/OrderHistoryCard";
+import { stockKeyFor } from "../../hooks/useTradeItemStock";
 const empty = emptyWizardData;
+const LOAD_CARRIER_LABELS = {
+    AUCTION_TROLLEY: "Stapelwagen",
+    DANISH_TROLLEY: "Deense container",
+    EURO_TROLLEY: "Euro-rolcontainer",
+    PALLET: "Pallet",
+    EURO_PALLET: "Euro-pallet",
+    NONE: "Geen ladingdrager",
+};
 const STEPS = [
     { key: "vbn", label: "VBN-code" },
     { key: "artikel", label: "Artikel" },
@@ -23,10 +38,12 @@ const STEPS = [
     { key: "eigenschappen", label: "Eigenschappen" },
     { key: "klanten", label: "Klanten" },
     { key: "fotos", label: "Foto's" },
+    { key: "warehouse", label: "Warehouse" },
     { key: "beladingen", label: "Beladingen" },
     { key: "verpakking", label: "Aanvullende verpakkingsmaterialen" },
     { key: "samenstelling", label: "Samenstelling", disabled: true },
     { key: "beschikbaarheid", label: "Verwachte beschikbaarheid" },
+    { key: "aanbieden", label: "Aanbieden & voorraad" },
 ];
 function visibleSteps(d) {
     return STEPS.filter((s) => {
@@ -36,6 +53,20 @@ function visibleSteps(d) {
         return true;
     });
 }
+function warehouseDisplayLabel(raw, fallback) {
+    const addr = raw?.location?.address ?? raw?.address ?? {};
+    const line = addr.addressLine ?? [addr.street, addr.houseNumber].filter(Boolean).join(" ");
+    const city = addr.city ?? "";
+    return ((raw?.name && String(raw.name).trim()) ||
+        [line, city].filter(Boolean).join(", ") ||
+        fallback);
+}
+function warehouseSubLabel(raw) {
+    const addr = raw?.location?.address ?? raw?.address ?? {};
+    const line = addr.addressLine ?? [addr.street, addr.houseNumber].filter(Boolean).join(" ");
+    const city = addr.city ?? "";
+    return [line, city].filter(Boolean).join(", ") || undefined;
+}
 export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
     const navigate = useNavigate();
     const { activeId, activeConnection, loading: connLoading } = useFloridayConnection();
@@ -45,11 +76,43 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
     const [submitting, setSubmitting] = useState(false);
     const [publishToFloriday, setPublishToFloriday] = useState(true);
     const [draftId, setDraftId] = useState(initialDraftId);
+    const [draftFloridayId, setDraftFloridayId] = useState(null);
     const [draftLoading, setDraftLoading] = useState(Boolean(initialDraftId));
     const [publishedLoading, setPublishedLoading] = useState(Boolean(tradeItemId));
+    const [syncState, setSyncState] = useState("idle");
+    const [syncError, setSyncError] = useState(null);
     const isEditingDraft = Boolean(initialDraftId);
     const isEditingPublished = Boolean(tradeItemId);
     const isEditing = isEditingDraft || isEditingPublished;
+    const saveWarehousePreference = useCallback(async (targetTradeItemId, warehouseId) => {
+        if (!activeId || !targetTradeItemId || !warehouseId)
+            return;
+        let warehouseName = null;
+        try {
+            const { data: warehouseRow } = await supabase
+                .from("floriday_warehouses_cache")
+                .select("data")
+                .eq("connection_id", activeId)
+                .eq("floriday_id", warehouseId)
+                .maybeSingle();
+            if (warehouseRow?.data) {
+                warehouseName = warehouseDisplayLabel(warehouseRow.data, warehouseId);
+            }
+        }
+        catch {
+            // Naam is alleen voor herkenbaarheid; de id is leidend.
+        }
+        const { error } = await supabase
+            .from("trade_item_warehouse_preferences")
+            .upsert({
+            connection_id: activeId,
+            trade_item_id: targetTradeItemId,
+            warehouse_id: warehouseId,
+            warehouse_name: warehouseName,
+        }, { onConflict: "connection_id,trade_item_id" });
+        if (error)
+            throw new Error(`Voorraadlocatie opslaan mislukt: ${error.message}`);
+    }, [activeId]);
     // Load existing draft when editing
     useEffect(() => {
         if (!initialDraftId)
@@ -57,10 +120,23 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
         let cancelled = false;
         setDraftLoading(true);
         getLocalTradeItem(initialDraftId)
-            .then((row) => {
+            .then(async (row) => {
             if (cancelled || !row)
                 return;
-            setData({ ...empty, ...row.data });
+            let warehouseId = row.data.warehouseId;
+            if (activeId && row.floriday_id) {
+                const { data: pref } = await supabase
+                    .from("trade_item_warehouse_preferences")
+                    .select("warehouse_id")
+                    .eq("connection_id", activeId)
+                    .eq("trade_item_id", row.floriday_id)
+                    .maybeSingle();
+                warehouseId = pref?.warehouse_id ?? warehouseId;
+            }
+            if (cancelled)
+                return;
+            setData({ ...empty, ...row.data, warehouseId });
+            setDraftFloridayId(row.floriday_id ?? null);
         })
             .catch((e) => toast.error(`Lokaal artikel laden mislukt: ${e.message}`))
             .finally(() => {
@@ -70,7 +146,7 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
         return () => {
             cancelled = true;
         };
-    }, [initialDraftId]);
+    }, [initialDraftId, activeId]);
     // Load existing published trade item from the shared cache
     useEffect(() => {
         if (!tradeItemId || !activeId)
@@ -85,6 +161,12 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
                     .eq("connection_id", activeId)
                     .eq("floriday_id", tradeItemId)
                     .maybeSingle();
+                const { data: pref } = await supabase
+                    .from("trade_item_warehouse_preferences")
+                    .select("warehouse_id")
+                    .eq("connection_id", activeId)
+                    .eq("trade_item_id", tradeItemId)
+                    .maybeSingle();
                 if (cancelled)
                     return;
                 if (error) {
@@ -95,7 +177,11 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
                     toast.error("Artikel niet gevonden in de cache");
                     return;
                 }
-                setData(floridayCacheToWizardData(row.data));
+                const wizardData = floridayCacheToWizardData(row.data);
+                setData({
+                    ...wizardData,
+                    warehouseId: pref?.warehouse_id ?? wizardData.warehouseId,
+                });
                 setPublishToFloriday(true);
             }
             catch (e) {
@@ -120,8 +206,16 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
     useEffect(() => {
         // Kleine resources volledig laden
         listFloricode("FeatureType", undefined, 300).then(setFeatureTypes).catch(() => { });
-        listFloricode("PackagingType", undefined, 100).then(setPackagingTypes).catch(() => { });
-        listFloricode("LoadCarrier", undefined, 600).then(setLoadCarriers).catch(() => { });
+        // Fust/VBN-package: Floricode-resource `LoadCarrier` (=/v2/VBN/Packaging, ~560 rijen).
+        // `PackagingType` (33 rijen) zijn slechts categorieën (Kraag/Deksel/…) en NIET wat
+        // Floriday in `package.vbnPackageCode` valideert — dat leverde 400 "Package type code X
+        // not found in floricode data" op. Zelfde lijst voor fust-picker en label-lookup.
+        listFloricode("LoadCarrier", undefined, 1000)
+            .then((rows) => {
+            setLoadCarriers(rows);
+            setPackagingTypes(rows);
+        })
+            .catch(() => { });
         // VbnProduct (51k records) wordt server-side per productgroep geladen in StepVbn.
         supabase
             .from("collections")
@@ -164,6 +258,12 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
         }
         return set.size ? set : null;
     }, [schemaQuery.data]);
+    const linkedProductId = typeof data.linkedProductId === "string" ? data.linkedProductId : null;
+    const localTradeItemKey = stockKeyFor({
+        tradeItemId: tradeItemId ?? null,
+        productId: !tradeItemId ? linkedProductId : null,
+        draftId: !tradeItemId && !linkedProductId ? (draftId ?? null) : null,
+    });
     // Bij wissel van VBN: gooi features weg die niet meer bij het schema horen.
     const lastPrunedVbnRef = useRef("");
     useEffect(() => {
@@ -299,17 +399,26 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
         setSubmitting(true);
         try {
             if (isEditingPublished && tradeItemId) {
+                await saveWarehousePreference(tradeItemId, data.warehouseId);
                 // PUT vervangt het bestaande trade item in Floriday
-                const payload = { ...buildAddTradeItemPayload(data), tradeItemId };
+                // PUT /trade-items/{id} — body volgens TradeItemUpdate (zonder tradeItemId + supplierArticleCode)
+                const payload = buildUpdateTradeItemPayload(data);
                 const res = await floriday.updateTradeItem(activeId, tradeItemId, payload);
                 if (!res?.attemptId) {
                     throw new Error("Gateway gaf geen attemptId terug — wijziging niet bevestigd");
                 }
                 // Optimistisch: cache-rij meteen bijwerken zodat de tabel niet 5 min wacht
                 try {
+                    const cachePayload = {
+                        ...buildAddTradeItemPayload(data),
+                        tradeItemId,
+                    };
                     await supabase
                         .from("floriday_trade_items_cache")
-                        .update({ data: payload, updated_at: new Date().toISOString() })
+                        .update({
+                        data: cachePayload,
+                        fetched_at: new Date().toISOString(),
+                    })
                         .eq("connection_id", activeId)
                         .eq("floriday_id", tradeItemId);
                 }
@@ -317,6 +426,30 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
                     /* niet kritiek, sync corrigeert binnen 5 min */
                 }
                 toast.success("Artikel bijgewerkt in Floriday");
+                // Herprijzen: als er een prijs is ingevuld, supply-line (opnieuw) pushen.
+                if (data.offerForSale && data.salePricePerPiece > 0) {
+                    try {
+                        const primary = data.packingConfigurations.find((p) => p.isPrimary) ??
+                            data.packingConfigurations[0];
+                        if (primary?.id) {
+                            await upsertSupplyLineForTradeItem({
+                                connectionId: activeId,
+                                tradeItemId,
+                                pricePerPiece: data.salePricePerPiece,
+                                packingConfigurationId: primary.id,
+                                availableQuantity: data.saleStockPieces,
+                                customerOrganizationIds: data.customerOrganizationIds,
+                                periodStart: data.offerStartDate
+                                    ? new Date(`${data.offerStartDate}T00:00:00Z`).toISOString()
+                                    : undefined,
+                            });
+                            toast.success("Prijs bijgewerkt in Floriday-catalogus");
+                        }
+                    }
+                    catch (e) {
+                        toast.error(`Prijs bijwerken mislukt: ${e.message}`);
+                    }
+                }
             }
             else if (publishToFloriday) {
                 const payload = buildAddTradeItemPayload(data);
@@ -324,6 +457,8 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
                 if (!res?.attemptId) {
                     throw new Error("Gateway gaf geen attemptId terug — aanmaken niet bevestigd");
                 }
+                const createdTradeItemId = res.tradeItemId ?? payload.tradeItemId;
+                await saveWarehousePreference(createdTradeItemId, data.warehouseId);
                 // Als dit een lokaal artikel was, ruim de draft-rij op
                 if (draftId) {
                     try {
@@ -333,7 +468,91 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
                         // Niet kritiek; rij verdwijnt na volgende reload
                     }
                 }
-                toast.success("Artikel aangemaakt in Floriday");
+                // ---- Direct-sale flow -----------------------------------------
+                // Alleen doorzetten als de gebruiker de "Aanbieden"-stap geactiveerd
+                // heeft. Falen mag de TradeItem-succes NIET terugdraaien — daarom
+                // in een aparte try/catch en apart toast bericht.
+                if (data.offerForSale) {
+                    const tradeItemId = createdTradeItemId;
+                    // 1) Seed lokale voorraad (physical_stock) — de continuous-stock
+                    //    trigger pusht dit naar Floriday zodra de trade item in de
+                    //    cache verschijnt.
+                    try {
+                        const key = stockKeyFor({ tradeItemId });
+                        if (key && data.saleStockPieces > 0) {
+                            const userRes = await supabase.auth.getUser();
+                            const userId = userRes.data.user?.id;
+                            if (userId) {
+                                await supabase
+                                    .from("trade_item_stock")
+                                    .upsert({
+                                    user_id: userId,
+                                    connection_id: activeId,
+                                    trade_item_key: key,
+                                    physical_stock: data.saleStockPieces,
+                                    minimum_stock: 0,
+                                    reserved_stock: 0,
+                                    incoming_stock: 0,
+                                }, { onConflict: "connection_id,trade_item_key" });
+                            }
+                        }
+                    }
+                    catch (e) {
+                        toast.error(`Voorraad opslaan mislukt: ${e.message}`);
+                    }
+                    // 2) CustomerOffer publiceren (POST /customer-offers)
+                    try {
+                        const packingBase = buildPrimaryPackingBase(data);
+                        await publishCustomerOfferFn({
+                            data: {
+                                customerOfferId: crypto.randomUUID(),
+                                tradeItemId,
+                                title: data.name || data.vbnName || "Aanbod",
+                                description: "",
+                                pricePerPiece: data.salePricePerPiece,
+                                currency: "EUR",
+                                despatchWarehouseId: data.warehouseId,
+                                numberOfPieces: data.saleStockPieces,
+                                allowedCustomerOrganizationIds: data.customerOrganizationIds,
+                                packingConfiguration: packingBase,
+                                orderStart: new Date(`${data.offerStartDate}T00:00:00Z`).toISOString(),
+                            },
+                        });
+                        toast.success("Artikel aangemaakt en aangeboden in Floriday");
+                    }
+                    catch (e) {
+                        toast.error(`Aanbod publiceren mislukt: ${e.message}`);
+                    }
+                    // 3) Supply-line pushen naar de Authenticatie-module gateway
+                    //    zodat het product met prijs online komt in de Floriday-catalogus.
+                    //    Idempotent op supplyLineId — herprijzen hergebruikt dezelfde regel.
+                    try {
+                        const primary = data.packingConfigurations.find((p) => p.isPrimary) ??
+                            data.packingConfigurations[0];
+                        if (primary?.id && data.salePricePerPiece > 0) {
+                            const sl = await upsertSupplyLineForTradeItem({
+                                connectionId: activeId,
+                                tradeItemId,
+                                pricePerPiece: data.salePricePerPiece,
+                                packingConfigurationId: primary.id,
+                                availableQuantity: data.saleStockPieces,
+                                customerOrganizationIds: data.customerOrganizationIds,
+                                periodStart: data.offerStartDate
+                                    ? new Date(`${data.offerStartDate}T00:00:00Z`).toISOString()
+                                    : undefined,
+                            });
+                            if (sl.supplyLineId) {
+                                toast.success("Prijs online gezet in Floriday-catalogus");
+                            }
+                        }
+                    }
+                    catch (e) {
+                        toast.error(`Prijs online zetten mislukt: ${e.message}`);
+                    }
+                }
+                else {
+                    toast.success("Artikel aangemaakt in Floriday");
+                }
             }
             else {
                 const newId = await upsertLocalTradeItem({
@@ -379,7 +598,11 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
             toast.error("Geen actieve Floriday-connectie geselecteerd");
             return;
         }
-        if (!vbnValid) {
+        // Voor een nieuw concept blijft een VBN-code de minimale poort. Voor
+        // bestaande concepten (draftId aanwezig) mag ALLES wat de gebruiker
+        // wijzigt (o.a. beladingen) opgeslagen worden — anders raken tussentijdse
+        // bewerkingen verloren zodra ze terug navigeren.
+        if (!draftId && !vbnValid) {
             toast.error("Kies eerst een VBN-code voordat je een concept opslaat");
             setStep(0);
             return;
@@ -391,6 +614,9 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
                 connectionId: activeId,
                 data,
             });
+            if (draftFloridayId && data.warehouseId) {
+                await saveWarehousePreference(draftFloridayId, data.warehouseId);
+            }
             setDraftId(newId);
             toast.success(draftId ? "Concept bijgewerkt" : "Concept opgeslagen");
             navigate({ to: "/voorraad" });
@@ -402,6 +628,87 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
             setSubmitting(false);
         }
     };
+    // Auto-save: zodra er een bestaand concept OF een gepubliceerd artikel in
+    // bewerking is, persisteren we wijzigingen debounced. Voor concepten gaan de
+    // wijzigingen naar `trade_item_drafts`; voor gepubliceerde artikelen wordt
+    // een PUT /trade-items/{id} naar Floriday gestuurd en de lokale cache
+    // meteen bijgewerkt, zodat aanpassingen (o.a. beladingen) direct overal in
+    // het systeem beschikbaar zijn en niet verloren raken bij navigatie.
+    const lastSavedRef = useRef(null);
+    useEffect(() => {
+        if (!activeId)
+            return;
+        if (draftLoading || publishedLoading)
+            return;
+        const pushTargetId = (isEditingPublished && tradeItemId) ? tradeItemId : (draftFloridayId || null);
+        if (!draftId && !pushTargetId)
+            return;
+        const serialized = JSON.stringify(data);
+        if (lastSavedRef.current === null) {
+            lastSavedRef.current = serialized;
+            return;
+        }
+        if (lastSavedRef.current === serialized)
+            return;
+        const t = window.setTimeout(async () => {
+            setSyncState("saving");
+            setSyncError(null);
+            try {
+                // Altijd lokaal opslaan als we een draft-rij hebben
+                if (draftId) {
+                    await upsertLocalTradeItem({ id: draftId, connectionId: activeId, data });
+                }
+                // Push naar Floriday als er een gekoppeld/gepubliceerd trade-item is
+                if (pushTargetId) {
+                    await saveWarehousePreference(pushTargetId, data.warehouseId);
+                    const payload = buildUpdateTradeItemPayload(data);
+                    const res = await floriday.updateTradeItem(activeId, pushTargetId, payload);
+                    if (!res?.attemptId) {
+                        throw new Error("Gateway gaf geen attemptId terug");
+                    }
+                    try {
+                        const cachePayload = {
+                            ...buildAddTradeItemPayload(data),
+                            tradeItemId: pushTargetId,
+                        };
+                        await supabase
+                            .from("floriday_trade_items_cache")
+                            .update({
+                            data: cachePayload,
+                            fetched_at: new Date().toISOString(),
+                        })
+                            .eq("connection_id", activeId)
+                            .eq("floriday_id", pushTargetId);
+                    }
+                    catch {
+                        /* niet kritiek; sync corrigeert */
+                    }
+                    setSyncState("saved");
+                }
+                else {
+                    setSyncState("local");
+                }
+                lastSavedRef.current = serialized;
+            }
+            catch (e) {
+                const msg = e.message || "Onbekende fout";
+                setSyncError(msg);
+                setSyncState("error");
+                toast.error(`Sync naar Floriday mislukt: ${msg}`);
+            }
+        }, 800);
+        return () => window.clearTimeout(t);
+    }, [
+        data,
+        draftId,
+        draftFloridayId,
+        activeId,
+        draftLoading,
+        publishedLoading,
+        isEditingPublished,
+        saveWarehousePreference,
+        tradeItemId,
+    ]);
     if (connLoading || draftLoading || publishedLoading) {
         return (_jsx("main", { className: "p-6", children: _jsxs(Card, { className: "p-6 flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), publishedLoading
                         ? "Artikel laden..."
@@ -412,7 +719,7 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
     if (!activeConnection) {
         return (_jsx("main", { className: "p-6", children: _jsx(Card, { className: "p-6", children: "Geen actieve Floriday-connectie gevonden. Voeg er eerst een toe in Instellingen." }) }));
     }
-    return (_jsxs("main", { className: "mx-auto w-full max-w-3xl space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: "/voorraad", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Terug naar voorraad"] }) }), !isEditingPublished && (_jsxs(Button, { variant: "outline", size: "sm", className: "ml-auto", onClick: saveDraft, disabled: submitting || !vbnValid, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(ClipboardList, { className: "mr-2 h-4 w-4" })), isEditingDraft ? "Concept bijwerken" : "Opslaan als concept"] })), isEditingDraft && (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "text-destructive hover:text-destructive", children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), "Verwijderen"] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Lokaal artikel verwijderen?" }), _jsx(AlertDialogDescription, { children: "Dit artikel is nog niet gepubliceerd naar Floriday. Verwijderen is definitief." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: handleDeleteDraft, children: "Verwijderen" })] })] })] }))] }), isEditing && (_jsx(Card, { className: "p-4 bg-muted/30 flex items-center gap-3 text-sm", children: isEditingPublished ? (_jsxs(_Fragment, { children: [_jsx("img", { src: floridayLogo.url, alt: "Floriday", className: "h-6 w-6 shrink-0" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium", children: "Gepubliceerd artikel bewerken" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Wijzigingen worden direct naar Floriday verstuurd. Je kunt vrij tussen alle secties navigeren." })] }), _jsxs(Button, { onClick: submit, disabled: submitting || invalidStepCount > 0, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Check, { className: "mr-2 h-4 w-4" })), "Wijzigingen opslaan"] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium", children: "Lokaal artikel bewerken" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Niet gepubliceerd. Je kunt vrij tussen alle secties navigeren." })] }), _jsxs(Button, { onClick: submit, disabled: submitting || invalidStepCount > 0, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Check, { className: "mr-2 h-4 w-4" })), publishToFloriday ? "Publiceren naar Floriday" : "Wijzigingen opslaan"] })] })) })), isEditing && (_jsx(VoorraadStockCard, { connectionId: activeId, tradeItemId: tradeItemId ?? null, draftId: draftId ?? null })), _jsx("ol", { className: "space-y-3", children: steps.map((s, i) => {
+    return (_jsxs("main", { className: "mx-auto w-full max-w-3xl space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: "/voorraad", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Terug naar voorraad"] }) }), !isEditingPublished && (_jsxs(Button, { variant: "outline", size: "sm", className: "ml-auto", onClick: saveDraft, disabled: submitting || (!draftId && !vbnValid), children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(ClipboardList, { className: "mr-2 h-4 w-4" })), isEditingDraft ? "Concept bijwerken" : "Opslaan als concept"] })), isEditingDraft && (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "text-destructive hover:text-destructive", children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), "Verwijderen"] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Lokaal artikel verwijderen?" }), _jsx(AlertDialogDescription, { children: "Dit artikel is nog niet gepubliceerd naar Floriday. Verwijderen is definitief." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: handleDeleteDraft, children: "Verwijderen" })] })] })] }))] }), isEditing && (data.name || data.vbnName) && (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Artikel" }), _jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsx("h1", { className: "text-2xl font-semibold leading-tight", children: data.name || data.vbnName }), (isEditingPublished || draftFloridayId) ? (syncState === "saving" ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), " Synchroniseren\u2026"] })) : syncState === "saved" ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700", children: [_jsx(Check, { className: "h-3 w-3" }), " Gesynchroniseerd"] })) : syncState === "error" ? (_jsx("span", { className: "inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700", title: syncError ?? undefined, children: "Sync mislukt \u2014 klik Opslaan om opnieuw te proberen" })) : null) : (_jsx("span", { className: "inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-amber-100 text-amber-800", children: "Concept \u2014 nog niet gepubliceerd naar Floriday" })), _jsx(PriceStatusBadge, { tradeItemId: tradeItemId ?? draftFloridayId ?? null, offerForSale: data.offerForSale })] }), data.name && data.vbnName && data.name !== data.vbnName && (_jsx("div", { className: "text-sm text-muted-foreground", children: data.vbnName }))] })), isEditing && (_jsx(Card, { className: "p-4 bg-muted/30 flex items-center gap-3 text-sm", children: isEditingPublished ? (_jsxs(_Fragment, { children: [_jsx("img", { src: floridayLogo, alt: "Floriday", className: "h-6 w-6 shrink-0" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium", children: "Gepubliceerd artikel bewerken" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Wijzigingen worden direct naar Floriday verstuurd. Je kunt vrij tussen alle secties navigeren." })] }), _jsxs(Button, { onClick: submit, disabled: submitting || invalidStepCount > 0, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Check, { className: "mr-2 h-4 w-4" })), "Wijzigingen opslaan"] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium", children: "Lokaal artikel bewerken" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Niet gepubliceerd. Je kunt vrij tussen alle secties navigeren." })] }), _jsxs(Button, { onClick: submit, disabled: submitting || invalidStepCount > 0, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Check, { className: "mr-2 h-4 w-4" })), publishToFloriday ? "Publiceren naar Floriday" : "Wijzigingen opslaan"] })] })) })), isEditing && (_jsxs(_Fragment, { children: [_jsx(VoorraadStockCard, { connectionId: activeId, tradeItemId: tradeItemId ?? null, draftId: draftId ?? null, productId: linkedProductId }), _jsx(OrderHistoryCard, { tradeItemKey: localTradeItemKey, productName: data.name || data.vbnName || null, productId: linkedProductId ?? null }), _jsx(ProductLinkCard, { tradeItemKey: localTradeItemKey, productName: data.vbnName || null })] })), _jsx("ol", { className: "space-y-3", children: steps.map((s, i) => {
                     const isOpen = i === step;
                     const isValid = stepValidity[i];
                     const isVisited = i < step || isEditing;
@@ -431,7 +738,7 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
                                                     ? "border-primary bg-primary text-primary-foreground"
                                                     : status === "invalid"
                                                         ? "border-destructive bg-destructive text-destructive-foreground"
-                                                        : "border-muted-foreground/30 text-muted-foreground"}`, children: status === "valid" ? (_jsx(Check, { className: "h-4 w-4" })) : status === "invalid" ? ("!") : (i + 1) }), _jsx("span", { className: `min-w-0 truncate font-medium ${status === "untouched" ? "text-muted-foreground" : ""}`, children: s.label }), !isOpen && summary && (_jsx("span", { className: `max-w-xs truncate text-xs ${status === "invalid" ? "text-destructive" : "text-muted-foreground"}`, children: status === "invalid" ? `Onvolledig — ${summary}` : summary }))] }), isOpen && (_jsxs(CardContent, { className: "space-y-4 pt-0", children: [_jsx("div", { "data-wizard-form-content": true, className: "w-full min-w-0", children: _jsx(StepBody, { stepKey: s.key, data: data, update: update, vbnProducts: vbnProducts, featureTypes: featureTypes, packagingTypes: packagingTypes, loadCarriers: loadCarriers, floridayCustomers: floridayCustomers, schemaQuery: schemaQuery, regulatoryQuery: regulatoryQuery, spec: spec, collectionsList: collectionsList, setCollectionsList: setCollectionsList, activeId: activeId, acceptedVbnCodes: acceptedVbnCodes }) }), isLastStep && !isEditingPublished && (_jsxs("div", { className: "rounded-lg border bg-muted/30 p-4 flex items-start gap-3", children: [_jsx("img", { src: floridayLogo.url, alt: "Floriday", className: "h-7 w-7 shrink-0 mt-0.5" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: "publish-to-floriday", className: "font-medium cursor-pointer", children: "Publiceren naar Floriday" }), _jsx("p", { className: "text-xs text-muted-foreground mt-1", children: publishToFloriday
+                                                        : "border-muted-foreground/30 text-muted-foreground"}`, children: status === "valid" ? (_jsx(Check, { className: "h-4 w-4" })) : status === "invalid" ? ("!") : (i + 1) }), _jsx("span", { className: `min-w-0 truncate font-medium ${status === "untouched" ? "text-muted-foreground" : ""}`, children: s.label }), !isOpen && summary && (_jsx("span", { className: `max-w-xs truncate text-xs ${status === "invalid" ? "text-destructive" : "text-muted-foreground"}`, children: status === "invalid" ? `Onvolledig — ${summary}` : summary }))] }), isOpen && (_jsxs(CardContent, { className: "space-y-4 pt-0", children: [_jsx("div", { "data-wizard-form-content": true, className: "w-full min-w-0", children: _jsx(StepBody, { stepKey: s.key, data: data, update: update, vbnProducts: vbnProducts, featureTypes: featureTypes, packagingTypes: packagingTypes, loadCarriers: loadCarriers, floridayCustomers: floridayCustomers, schemaQuery: schemaQuery, regulatoryQuery: regulatoryQuery, spec: spec, collectionsList: collectionsList, setCollectionsList: setCollectionsList, activeId: activeId, acceptedVbnCodes: acceptedVbnCodes }) }), isLastStep && !isEditingPublished && (_jsxs("div", { className: "rounded-lg border bg-muted/30 p-4 flex items-start gap-3", children: [_jsx("img", { src: floridayLogo, alt: "Floriday", className: "h-7 w-7 shrink-0 mt-0.5" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: "publish-to-floriday", className: "font-medium cursor-pointer", children: "Publiceren naar Floriday" }), _jsx("p", { className: "text-xs text-muted-foreground mt-1", children: publishToFloriday
                                                                 ? "Het artikel wordt aangemaakt in Floriday en is binnen enkele minuten zichtbaar voor klanten."
                                                                 : "Het artikel wordt alleen lokaal opgeslagen. Je kunt het later vanuit de voorraadlijst alsnog publiceren naar Floriday." })] }), _jsx(Switch, { id: "publish-to-floriday", checked: publishToFloriday, onCheckedChange: setPublishToFloriday })] })), (isLastStep || isEditing) && invalidStepCount > 0 && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive flex items-center justify-between gap-3", children: [_jsxs("span", { children: ["Nog ", invalidStepCount, " stap", invalidStepCount === 1 ? "" : "pen", " onvolledig"] }), firstInvalidIndex >= 0 && (_jsxs("button", { type: "button", onClick: () => setStep(firstInvalidIndex), className: "underline font-medium", children: ["Ga naar ", steps[firstInvalidIndex].label] }))] })), _jsx("div", { className: "flex justify-end pt-2", children: isLastStep || isEditing ? (_jsxs(Button, { onClick: submit, disabled: submitting || invalidStepCount > 0, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Check, { className: "mr-2 h-4 w-4" })), isEditingPublished
                                                         ? "Wijzigingen opslaan"
@@ -475,6 +782,8 @@ function summaryFor(key, d) {
                 : "Alle klanten";
         case "fotos":
             return `${d.images.length} foto('s)`;
+        case "warehouse":
+            return d.warehouseId ? "Gekozen" : "Niet gekozen";
         case "beladingen":
             return d.packingConfigurations.length
                 ? `${d.packingConfigurations.length} configuratie(s)`
@@ -487,6 +796,10 @@ function summaryFor(key, d) {
             return "Binnenkort beschikbaar";
         case "beschikbaarheid":
             return d.yearRound ? "Jaarrond" : `${d.weeks.length} week/weken`;
+        case "aanbieden":
+            if (!d.offerForSale)
+                return "Niet aanbieden";
+            return `${d.saleStockPieces} st • € ${d.salePricePerPiece.toFixed(2)} p/st`;
         default:
             return "";
     }
@@ -508,6 +821,8 @@ function StepBody(p) {
             return _jsx(StepKlanten, { ...p });
         case "fotos":
             return _jsx(StepFotos, { ...p });
+        case "warehouse":
+            return _jsx(StepWarehouse, { ...p });
         case "beladingen":
             return _jsx(StepBeladingen, { ...p });
         case "verpakking":
@@ -516,6 +831,8 @@ function StepBody(p) {
             return (_jsx("div", { className: "rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground", children: "Binnenkort beschikbaar" }));
         case "beschikbaarheid":
             return _jsx(StepBeschikbaarheid, { ...p });
+        case "aanbieden":
+            return _jsx(StepAanbieden, { ...p });
     }
 }
 // ============================================================
@@ -571,6 +888,9 @@ function codeOf(r) {
     // FeatureType heeft `id`.
     return String(r.data?.code ?? r.data?.id ?? r.record_id);
 }
+function compareByCode(a, b) {
+    return String(a ?? "").localeCompare(String(b ?? ""), "nl", { numeric: true, sensitivity: "base" });
+}
 // Floricode `product_group_id` is een 8-cijferige string. De eerste twee
 // cijfers bepalen het hoofdsegment, maar Floricode gebruikt méér dan één
 // bucket per Floriday-productgroep:
@@ -889,12 +1209,13 @@ function CharacteristicField({ field, value, onChange, onRemove, }) {
     // Fallback: /gateway/code-list voor niet-VBN karakteristieken.
     const hasSpecValues = field.allowedValues.length > 0;
     const codeListQuery = useCodeList(hasSpecValues ? null : field.listName);
-    const values = hasSpecValues
+    const rawValues = hasSpecValues
         ? field.allowedValues
         : (codeListQuery.data?.values ?? []).map((v) => ({
             code: v.code,
             label: v.description ?? v.code,
         }));
+    const values = [...rawValues].sort((a, b) => compareByCode(a.code, b.code));
     const CLEAR = "__clear__";
     const invalidExistingValue = Boolean(value && values.length > 0 && !values.some((v) => v.code === value));
     return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Label, { children: [field.label, field.required && _jsx("span", { className: "ml-1 text-destructive", children: "*" }), " ", _jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: ["(", field.code, ")"] })] }), onRemove && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 p-0 text-muted-foreground hover:text-destructive", onClick: onRemove, "aria-label": `Verwijder ${field.label}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }), !hasSpecValues && codeListQuery.isLoading ? (_jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), "Waardelijst ", field.listName, " wordt geladen\u2026"] })) : values.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Select, { value: value || undefined, onValueChange: (v) => onChange(v === CLEAR ? "" : v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Selecteer een door Floriday toegestane waarde\u2026" }) }), _jsxs(SelectContent, { children: [value && (_jsx(SelectItem, { value: CLEAR, children: _jsx("span", { className: "text-muted-foreground", children: "\u2014 Wissen \u2014" }) })), values.slice(0, 1000).map((v) => (_jsxs(SelectItem, { value: v.code, children: [v.label, " ", _jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: ["(", v.code, ")"] })] }, v.code)))] })] }), invalidExistingValue && (_jsxs("p", { className: "text-xs text-destructive", children: ["Huidige waarde \"", value, "\" komt niet voor in de door Floriday toegestane lijst. Kies een geldige waarde."] }))] })) : (_jsx("p", { className: "rounded-md border border-dashed border-muted-foreground/30 bg-muted/40 p-2 text-xs text-muted-foreground", children: "Geen toegestane waarden bekend voor deze karakteristiek. Laat leeg \u2014 vrije invoer wordt door Floriday niet geaccepteerd." }))] }));
@@ -1028,6 +1349,49 @@ function StepFotos({ data, update, activeId }) {
                             e.target.value = "";
                         } })] }), data.images.length > 0 && (_jsx("div", { className: "grid grid-cols-4 gap-2", children: data.images.map((img, idx) => (_jsxs("div", { className: "relative group rounded-md overflow-hidden border", children: [_jsx("img", { src: img.previewUrl || img.url, alt: img.name, className: "h-24 w-full object-cover" }), _jsx("button", { type: "button", onClick: () => update("images", data.images.filter((_, i) => i !== idx)), className: "absolute top-1 right-1 rounded-full bg-background/80 p-1 opacity-0 group-hover:opacity-100", children: _jsx(X, { className: "h-3 w-3" }) })] }, img.url))) }))] }));
 }
+/**
+ * Warehouse-stap — verplicht in Floriday Suppliers API 2026v1.
+ * Toont een select gevuld uit `floriday_warehouses_cache`. Beheer van
+ * warehouses (aanmaken/bewerken) gebeurt in Instellingen → Warehouses.
+ */
+function StepWarehouse({ data, update, activeId }) {
+    const [warehouses, setWarehouses] = useState([]);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (!activeId)
+            return;
+        let cancelled = false;
+        setLoading(true);
+        supabase
+            .from("floriday_warehouses_cache")
+            .select("floriday_id, data")
+            .eq("connection_id", activeId)
+            .then(({ data: rows }) => {
+            if (cancelled)
+                return;
+            const items = (rows ?? [])
+                // Alleen eigen voorraadlocaties tonen — geen externe FloraHolland-
+                // aflever-/veilinglocaties (isExternal=true).
+                .filter((r) => r.data?.isExternal !== true && r.data?.isDeleted !== true)
+                .map((r) => {
+                const label = warehouseDisplayLabel(r.data, String(r.floriday_id));
+                const sub = warehouseSubLabel(r.data);
+                return {
+                    id: String(r.floriday_id),
+                    name: label,
+                    sub: label === sub ? undefined : sub,
+                };
+            })
+                .sort((a, b) => a.name.localeCompare(b.name));
+            setWarehouses(items);
+            setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [activeId]);
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { children: "Voorraadlocatie (verplicht)" }), _jsxs(Select, { value: data.warehouseId || undefined, onValueChange: (v) => update("warehouseId", v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: loading ? "Laden…" : "Kies een voorraadlocatie" }) }), _jsx(SelectContent, { children: warehouses.map((w) => (_jsx(SelectItem, { value: w.id, children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: w.name }), w.sub && (_jsx("span", { className: "text-xs text-muted-foreground", children: w.sub }))] }) }, w.id))) })] })] }), warehouses.length === 0 && !loading && (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Nog geen eigen voorraadlocaties gevonden. Ga naar", " ", _jsx(Link, { to: "/instellingen/warehouses", className: "underline", children: "Instellingen \u2192 Warehouses" }), " ", "om er \u00E9\u00E9n aan te maken."] }))] }));
+}
 /**
  * Beladingen — Floriday Suppliers API 2026v1
  *
@@ -1085,7 +1449,9 @@ function StepBeladingen({ data, update, packagingTypes, loadCarriers, floridayCu
     return (_jsxs("div", { className: "space-y-4", children: [data.packingConfigurations.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-6 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen beladingsconfiguratie toegevoegd." }) })) : (_jsx("div", { className: "overflow-hidden rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50 text-left text-xs uppercase text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 font-medium", children: "Primair" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Fust" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Ladingdrager" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Stuks / laag / drager" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Type" }), _jsx("th", { className: "px-3 py-2" })] }) }), _jsx("tbody", { className: "divide-y", children: data.packingConfigurations.map((p) => {
                                 const pkgLabel = packagingTypes.find((r) => codeOf(r) === p.packagingType);
                                 const lcLabel = loadCarriers.find((r) => codeOf(r) === p.loadCarrier);
-                                return (_jsxs("tr", { className: "hover:bg-muted/30", children: [_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "radio", name: "primary-packing", checked: Boolean(p.isPrimary), onChange: () => setPrimary(p.id), "aria-label": "Als primaire belading instellen" }) }), _jsxs("td", { className: "px-3 py-2", children: [_jsx("div", { className: "font-medium", children: pkgLabel ? labelOf(pkgLabel) : p.packagingType || "—" }), p.source === "SUPPLIER" && (_jsx("div", { className: "text-xs text-muted-foreground", children: p.packagingSupplierName ?? p.packagingSupplierId }))] }), _jsx("td", { className: "px-3 py-2", children: lcLabel ? labelOf(lcLabel) : p.loadCarrier || "—" }), _jsxs("td", { className: "px-3 py-2 tabular-nums", children: [p.unitsPerPackage, " / ", p.packagesPerLayer, " /", " ", p.layersPerLoadCarrier] }), _jsx("td", { className: "px-3 py-2", children: p.isCustomerSpecific ? (_jsxs("span", { className: "rounded bg-amber-100 px-2 py-0.5 text-xs text-amber-900", children: ["Klantspecifiek (", p.customerOrganizationIds.length, ")"] })) : (_jsx("span", { className: "text-xs text-muted-foreground", children: "Regulier" })) }), _jsx("td", { className: "px-3 py-2 text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => openEdit(p.id), children: "Bewerk" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(p.id), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }) })] }, p.id));
+                                return (_jsxs("tr", { className: "hover:bg-muted/30", children: [_jsx("td", { className: "px-3 py-2", children: _jsx("input", { type: "radio", name: "primary-packing", checked: Boolean(p.isPrimary), onChange: () => setPrimary(p.id), "aria-label": "Als primaire belading instellen" }) }), _jsxs("td", { className: "px-3 py-2", children: [_jsx("div", { className: "font-medium", children: pkgLabel
+                                                        ? `${codeOf(pkgLabel)}: ${labelOf(pkgLabel)}`
+                                                        : p.packagingType || "—" }), p.source === "SUPPLIER" && (_jsx("div", { className: "text-xs text-muted-foreground", children: p.packagingSupplierName ?? p.packagingSupplierId }))] }), _jsx("td", { className: "px-3 py-2", children: LOAD_CARRIER_LABELS[p.loadCarrier] ?? p.loadCarrier ?? "—" }), _jsxs("td", { className: "px-3 py-2 tabular-nums", children: [p.unitsPerPackage, " / ", p.packagesPerLayer, " /", " ", p.layersPerLoadCarrier] }), _jsx("td", { className: "px-3 py-2", children: p.isCustomerSpecific ? (_jsxs("span", { className: "rounded bg-amber-100 px-2 py-0.5 text-xs text-amber-900", children: ["Klantspecifiek (", p.customerOrganizationIds.length, ")"] })) : (_jsx("span", { className: "text-xs text-muted-foreground", children: "Regulier" })) }), _jsx("td", { className: "px-3 py-2 text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => openEdit(p.id), children: "Bewerk" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(p.id), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }) })] }, p.id));
                             }) })] }) })), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: openNew, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Belading toevoegen"] }), _jsx(PackingConfigDialog, { open: dialogOpen, onOpenChange: (o) => {
                     setDialogOpen(o);
                     if (!o)
@@ -1099,7 +1465,7 @@ function PackingConfigDialog({ open, onOpenChange, initial, isFirst, packagingTy
     const emptyItem = () => ({
         id: crypto.randomUUID(),
         source: "VBN",
-        loadCarrier: "",
+        loadCarrier: "AUCTION_TROLLEY",
         packagingType: "",
         unitsPerPackage: 1,
         packagesPerLayer: 1,
@@ -1122,9 +1488,10 @@ function PackingConfigDialog({ open, onOpenChange, initial, isFirst, packagingTy
     const patch = (k, v) => setDraft((d) => ({ ...d, [k]: v }));
     const filteredPkg = useMemo(() => {
         const q = pkgSearch.trim().toLowerCase();
+        const sorted = [...packagingTypes].sort((a, b) => compareByCode(codeOf(a), codeOf(b)));
         if (!q)
-            return packagingTypes.slice(0, 200);
-        return packagingTypes
+            return sorted.slice(0, 200);
+        return sorted
             .filter((r) => labelOf(r).toLowerCase().includes(q) ||
             codeOf(r).toLowerCase().includes(q))
             .slice(0, 200);
@@ -1184,7 +1551,7 @@ function PackingConfigDialog({ open, onOpenChange, initial, isFirst, packagingTy
                                                                     ? (packagingTypes.find((r) => codeOf(r) === draft.packagingType)
                                                                         ? `${labelOf(packagingTypes.find((r) => codeOf(r) === draft.packagingType))} (${draft.packagingType})`
                                                                         : draft.packagingType)
-                                                                    : "Selecteer fust..." }), _jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "w-[380px] p-0", align: "start", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { placeholder: "Zoek op naam of code...", value: pkgSearch, onChange: (e) => setPkgSearch(e.target.value) }) }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: filteredPkg.length === 0 ? (_jsx("div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: "Geen resultaten" })) : (filteredPkg.map((r) => (_jsxs("button", { type: "button", onClick: () => patch("packagingType", codeOf(r)), className: `flex w-full items-start gap-2 px-3 py-2 text-left text-sm hover:bg-muted ${draft.packagingType === codeOf(r) ? "bg-muted" : ""}`, children: [_jsx("span", { className: "font-mono text-xs text-muted-foreground w-14 shrink-0", children: codeOf(r) }), _jsx("span", { className: "truncate", children: labelOf(r) })] }, r.record_id)))) })] })] })] }), _jsx(DropdownOrInput, { label: "Ladingdrager", value: draft.loadCarrier, onChange: (v) => patch("loadCarrier", v), records: loadCarriers, render: (r) => `${labelOf(r)} (${codeOf(r)})`, valueGetter: codeOf, emptyHint: "Geen LoadCarrier-records gesynchroniseerd." })] }), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Stuks per fust" }), _jsx(Input, { type: "number", min: 1, value: draft.unitsPerPackage, onChange: (e) => patch("unitsPerPackage", Number(e.target.value) || 1) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Fusten per laag" }), _jsx(Input, { type: "number", min: 1, value: draft.packagesPerLayer, onChange: (e) => patch("packagesPerLayer", Number(e.target.value) || 1) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Lagen per drager" }), _jsx(Input, { type: "number", min: 1, value: draft.layersPerLoadCarrier, onChange: (e) => patch("layersPerLoadCarrier", Number(e.target.value) || 1) })] })] }), _jsxs("div", { className: "rounded-md border p-3 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "Klantspecifieke belading" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Alleen zichtbaar voor geselecteerde klantorganisaties." })] }), _jsx(Switch, { checked: draft.isCustomerSpecific, onCheckedChange: (v) => patch("isCustomerSpecific", Boolean(v)) })] }), draft.isCustomerSpecific && (_jsx("div", { className: "max-h-40 overflow-y-auto rounded border divide-y", children: floridayCustomers.length === 0 ? (_jsx("div", { className: "p-3 text-xs text-muted-foreground", children: "Geen klantorganisaties geladen." })) : (floridayCustomers.map((c) => (_jsxs("label", { className: "flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: draft.customerOrganizationIds.includes(c.id), onChange: () => toggleCustomer(c.id) }), _jsx("span", { className: "truncate", children: c.name })] }, c.id)))) }))] }), _jsxs("div", { className: "rounded-md border p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "Foto van dit fust (optioneel)" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "JPG of PNG \u00B7 min. 640 \u00D7 640 px \u00B7 max. 5 MB" })] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: uploadingPhoto || !activeId, onClick: () => photoInputRef.current?.click(), children: uploadingPhoto ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), " Uploaden"] })) : (_jsxs(_Fragment, { children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), " Foto kiezen"] })) }), _jsx("input", { ref: photoInputRef, type: "file", accept: "image/png,image/jpeg", className: "hidden", onChange: (e) => {
+                                                                    : "Selecteer fust..." }), _jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "w-[380px] p-0", align: "start", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { placeholder: "Zoek op naam of code...", value: pkgSearch, onChange: (e) => setPkgSearch(e.target.value) }) }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: filteredPkg.length === 0 ? (_jsx("div", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: "Geen resultaten" })) : (filteredPkg.map((r) => (_jsxs("button", { type: "button", onClick: () => patch("packagingType", codeOf(r)), className: `flex w-full items-start gap-2 px-3 py-2 text-left text-sm hover:bg-muted ${draft.packagingType === codeOf(r) ? "bg-muted" : ""}`, children: [_jsx("span", { className: "font-mono text-xs text-muted-foreground w-14 shrink-0", children: codeOf(r) }), _jsx("span", { className: "truncate", children: labelOf(r) })] }, r.record_id)))) })] })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Ladingdrager" }), _jsxs(Select, { value: draft.loadCarrier || "AUCTION_TROLLEY", onValueChange: (v) => patch("loadCarrier", v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies een ladingdrager" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "AUCTION_TROLLEY", children: "Stapelwagen" }), _jsx(SelectItem, { value: "DANISH_TROLLEY", children: "Deense container" }), _jsx(SelectItem, { value: "EURO_TROLLEY", children: "Euro-rolcontainer" }), _jsx(SelectItem, { value: "PALLET", children: "Pallet" }), _jsx(SelectItem, { value: "EURO_PALLET", children: "Euro-pallet" }), _jsx(SelectItem, { value: "NONE", children: "Geen ladingdrager" })] })] })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Stuks per fust" }), _jsx(Input, { type: "number", min: 1, value: draft.unitsPerPackage, onChange: (e) => patch("unitsPerPackage", Number(e.target.value) || 1) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Fusten per laag" }), _jsx(Input, { type: "number", min: 1, value: draft.packagesPerLayer, onChange: (e) => patch("packagesPerLayer", Number(e.target.value) || 1) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Lagen per drager" }), _jsx(Input, { type: "number", min: 1, value: draft.layersPerLoadCarrier, onChange: (e) => patch("layersPerLoadCarrier", Number(e.target.value) || 1) })] })] }), _jsxs("div", { className: "rounded-md border p-3 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "Klantspecifieke belading" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Alleen zichtbaar voor geselecteerde klantorganisaties." })] }), _jsx(Switch, { checked: draft.isCustomerSpecific, onCheckedChange: (v) => patch("isCustomerSpecific", Boolean(v)) })] }), draft.isCustomerSpecific && (_jsx("div", { className: "max-h-40 overflow-y-auto rounded border divide-y", children: floridayCustomers.length === 0 ? (_jsx("div", { className: "p-3 text-xs text-muted-foreground", children: "Geen klantorganisaties geladen." })) : (floridayCustomers.map((c) => (_jsxs("label", { className: "flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: draft.customerOrganizationIds.includes(c.id), onChange: () => toggleCustomer(c.id) }), _jsx("span", { className: "truncate", children: c.name })] }, c.id)))) }))] }), _jsxs("div", { className: "rounded-md border p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "Foto van dit fust (optioneel)" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "JPG of PNG \u00B7 min. 640 \u00D7 640 px \u00B7 max. 5 MB" })] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: uploadingPhoto || !activeId, onClick: () => photoInputRef.current?.click(), children: uploadingPhoto ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), " Uploaden"] })) : (_jsxs(_Fragment, { children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), " Foto kiezen"] })) }), _jsx("input", { ref: photoInputRef, type: "file", accept: "image/png,image/jpeg", className: "hidden", onChange: (e) => {
                                                 onUploadPhoto(e.target.files?.[0]);
                                                 e.target.value = "";
                                             } })] }), (draft.photoPreviewUrl || draft.photoUrl) && (_jsxs("div", { className: "relative inline-block", children: [_jsx("img", { src: draft.photoPreviewUrl || draft.photoUrl, alt: "Belading foto", className: "h-24 rounded-md border object-cover" }), _jsx("button", { type: "button", onClick: () => setDraft((d) => ({
@@ -1195,13 +1562,10 @@ function PackingConfigDialog({ open, onOpenChange, initial, isFirst, packagingTy
                                             })), className: "absolute top-1 right-1 rounded-full bg-background/80 p-1", children: _jsx(X, { className: "h-3 w-3" }) })] }))] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: Boolean(draft.isPrimary), onChange: (e) => patch("isPrimary", e.target.checked) }), "Als primaire belading gebruiken"] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Annuleren" }), _jsx(Button, { type: "button", disabled: !canSave, onClick: () => onSave(draft), children: "Opslaan" })] })] }) }));
 }
 function StepVerpakking({ data, update }) {
-    const add = () => update("additionalPackaging", [
-        ...data.additionalPackaging,
-        { id: crypto.randomUUID(), code: "", description: "", quantity: 1 },
-    ]);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const addItem = (item) => update("additionalPackaging", [...data.additionalPackaging, item]);
     const remove = (id) => update("additionalPackaging", data.additionalPackaging.filter((p) => p.id !== id));
-    const edit = (id, patch) => update("additionalPackaging", data.additionalPackaging.map((p) => (p.id === id ? { ...p, ...patch } : p)));
-    return (_jsxs("div", { className: "space-y-3", children: [data.additionalPackaging.map((p) => (_jsxs("div", { className: "grid grid-cols-[1fr_2fr_100px_auto] gap-2 items-end", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Code" }), _jsx(Input, { value: p.code, onChange: (e) => edit(p.id, { code: e.target.value }), placeholder: "bv. HOES" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Omschrijving" }), _jsx(Input, { value: p.description ?? "", onChange: (e) => edit(p.id, { description: e.target.value }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Aantal" }), _jsx(Input, { type: "number", min: 1, value: p.quantity, onChange: (e) => edit(p.id, { quantity: Number(e.target.value) }) })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(p.id), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, p.id))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: add, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Verpakkingsmateriaal toevoegen"] })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("p", { className: "text-xs text-muted-foreground bg-muted/40 rounded-md p-2 border", children: ["Voeg extra verpakkingsmateriaal (hoes, steker, label, potfolie, \u2026) uit de VRS-catalogus toe. Materialen met een geldige Floriday-UUID worden automatisch meegestuurd naar Floriday als", _jsx("code", { className: "mx-1", children: "additionalPackagingMaterialIds" }), "op het TradeItem."] }), data.additionalPackaging.length > 0 && (_jsx("div", { className: "border rounded-md divide-y", children: data.additionalPackaging.map((p) => (_jsxs("div", { className: "grid grid-cols-[1fr_1fr_1fr_auto] gap-3 items-center px-3 py-2 text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Leverancier" }), _jsx("div", { children: p.packagingSupplierName })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Type" }), _jsx("div", { children: p.materialTypeName })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Materiaal" }), _jsx("div", { children: p.packagingMaterialName })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(p.id), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, p.id))) })), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setDialogOpen(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Verpakkingsmateriaal toevoegen"] }), _jsx(AdditionalPackagingDialog, { open: dialogOpen, onOpenChange: setDialogOpen, onSave: addItem })] }));
 }
 function StepBeschikbaarheid({ data, update }) {
     const weeks = Array.from({ length: 52 }, (_, i) => i + 1);
@@ -1217,6 +1581,22 @@ function StepBeschikbaarheid({ data, update }) {
                                 ? "border-primary bg-primary text-primary-foreground"
                                 : "hover:border-primary/40"}`, children: w }, w))) })] }))] }));
 }
+// ------------------------------------------------------------
+// Stap "Aanbieden & voorraad" — Direct Sale via CustomerOffer
+// ------------------------------------------------------------
+function StepAanbieden({ data, update }) {
+    const priceStr = Number.isFinite(data.salePricePerPiece)
+        ? String(data.salePricePerPiece)
+        : "";
+    const stockStr = Number.isFinite(data.saleStockPieces)
+        ? String(data.saleStockPieces)
+        : "";
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "rounded-md border bg-muted/30 p-3 text-sm text-muted-foreground", children: ["Zet dit product direct in de verkoop bij je gekoppelde Floriday-klanten. We sturen een ", _jsx("code", { children: "TradeItem" }), " + ", _jsx("code", { children: "CustomerOffer" }), " met vaste prijs per stuk en publiceren de opgegeven voorraad via de continuous-stock feed."] }), _jsxs("div", { className: "flex items-center justify-between rounded-md border p-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: "Direct aanbieden voor verkoop" }), _jsx("div", { className: "text-xs text-muted-foreground", children: data.offerForSale
+                                    ? "Aanbod wordt aangemaakt direct na publiceren."
+                                    : "Alleen artikel publiceren, geen aanbod aanmaken." })] }), _jsx(Switch, { checked: data.offerForSale, onCheckedChange: (v) => update("offerForSale", Boolean(v)) })] }), data.offerForSale && (_jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Voorraad (stuks)" }), _jsx(Input, { type: "number", inputMode: "numeric", min: 0, step: 1, value: stockStr, onChange: (e) => update("saleStockPieces", Math.max(0, Math.floor(Number(e.target.value) || 0))) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Wordt als fysieke voorraad geboekt en via continuous-stock naar Floriday gepusht." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Verkoopprijs per stuk (EUR)" }), _jsx(Input, { type: "number", inputMode: "decimal", min: 0, step: "0.01", value: priceStr, onChange: (e) => update("salePricePerPiece", Number(e.target.value) || 0) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Vaste prijs per stuk voor Direct Sale." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Aanbod geldig vanaf" }), _jsx(Input, { type: "date", value: data.offerStartDate, onChange: (e) => update("offerStartDate", e.target.value) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Aanbod loopt automatisch tot 1 jaar na deze datum." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Zichtbaar voor" }), _jsx("div", { className: "rounded-md border bg-muted/20 px-3 py-2 text-sm", children: data.customerOrganizationIds.length
+                                    ? `${data.customerOrganizationIds.length} geselecteerde klant(en)`
+                                    : "Alle gekoppelde Floriday-klanten" }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Klantselectie beheer je in de stap ", _jsx("em", { children: "Klanten" }), "."] })] })] }))] }));
+}
 // ============================================================
 // Shared
 // ============================================================
@@ -1225,5 +1605,8 @@ function DropdownOrInput({ label, value, onChange, records, render, valueGetter,
     if (records.length === 0) {
         return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: label }), _jsx(Input, { value: value, onChange: (e) => onChange(e.target.value) }), emptyHint && _jsx("p", { className: "text-xs text-muted-foreground", children: emptyHint })] }));
     }
-    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: label }), _jsxs(Select, { value: value || undefined, onValueChange: onChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Selecteer..." }) }), _jsx(SelectContent, { children: records.slice(0, 300).map((r) => (_jsx(SelectItem, { value: v(r), children: render(r) }, r.record_id))) })] })] }));
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: label }), _jsxs(Select, { value: value || undefined, onValueChange: onChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Selecteer..." }) }), _jsx(SelectContent, { children: [...records]
+                            .sort((a, b) => compareByCode(v(a), v(b)))
+                            .slice(0, 300)
+                            .map((r) => (_jsx(SelectItem, { value: v(r), children: render(r) }, r.record_id))) })] })] }));
 }