@flowselections/floriday-voorraad 1.0.16 → 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,7 +8,10 @@ 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, buildUpdateTradeItemPayload, 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";
@@ -16,8 +19,18 @@ import { useCodeList, useTradeItemFormSchema } from "../../hooks/useFloriday";
 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" },
@@ -30,6 +43,7 @@ const STEPS = [
     { 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) => {
@@ -39,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();
@@ -48,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)
@@ -60,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(() => {
@@ -73,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)
@@ -88,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) {
@@ -98,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) {
@@ -123,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")
@@ -167,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(() => {
@@ -302,6 +399,7 @@ 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
                 // PUT /trade-items/{id} — body volgens TradeItemUpdate (zonder tradeItemId + supplierArticleCode)
                 const payload = buildUpdateTradeItemPayload(data);
@@ -311,9 +409,16 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
                 }
                 // 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, tradeItemId }, updated_at: new Date().toISOString() })
+                        .update({
+                        data: cachePayload,
+                        fetched_at: new Date().toISOString(),
+                    })
                         .eq("connection_id", activeId)
                         .eq("floriday_id", tradeItemId);
                 }
@@ -321,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);
@@ -328,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 {
@@ -337,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({
@@ -383,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;
@@ -395,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" });
@@ -406,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..."
@@ -416,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, 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 }), _jsx(ProductLinkCard, { tradeItemKey: stockKeyFor({ tradeItemId: tradeItemId ?? null, draftId: draftId ?? null }), productName: data.vbnName || 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;
@@ -493,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 "";
     }
@@ -524,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 });
     }
 }
 // ============================================================
@@ -579,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:
@@ -897,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." }))] }));
@@ -1056,10 +1369,20 @@ function StepWarehouse({ data, update, activeId }) {
             .then(({ data: rows }) => {
             if (cancelled)
                 return;
-            const items = (rows ?? []).map((r) => ({
-                id: String(r.floriday_id),
-                name: String(r.data?.name ?? r.floriday_id),
-            }));
+            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);
         });
@@ -1067,7 +1390,7 @@ function StepWarehouse({ data, update, activeId }) {
             cancelled = true;
         };
     }, [activeId]);
-    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { children: "Warehouse (verplicht)" }), _jsxs(Select, { value: data.warehouseId || undefined, onValueChange: (v) => update("warehouseId", v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: loading ? "Laden…" : "Kies een warehouse" }) }), _jsx(SelectContent, { children: warehouses.map((w) => (_jsx(SelectItem, { value: w.id, children: w.name }, w.id))) })] })] }), warehouses.length === 0 && !loading && (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Nog geen warehouses gesynchroniseerd. Ga naar", " ", _jsx(Link, { to: "/instellingen/warehouses", className: "underline", children: "Instellingen \u2192 Warehouses" }), " ", "om er \u00E9\u00E9n aan te maken."] }))] }));
+    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
@@ -1126,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)
@@ -1140,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,
@@ -1163,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);
@@ -1225,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) => ({
@@ -1236,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: [_jsx("p", { className: "text-xs text-muted-foreground bg-muted/40 rounded-md p-2 border", children: "Bestaat je artikel uit een hoes, steker of andere toegevoegde waarde? Voeg deze items lokaal toe voor exportdocumentatie. Floriday Suppliers API 2026v1 kent hiervoor g\u00E9\u00E9n veld op TradeItem \u2014 deze data blijft binnen deze module." }), 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);
@@ -1258,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
 // ============================================================
@@ -1266,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))) })] })] }));
 }