@flowselections/floriday-voorraad 1.0.20 → 1.0.21

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

@@ -8,7 +8,7 @@ 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, buildPrimaryPackingBase, emptyWizardData, floridayCacheToWizardData, PACKAGING_SUPPLIERS, validateStep, } from "../../lib/floriday-payload";
+import { buildAddTradeItemPayload, buildUpdateTradeItemPayload, buildPrimaryPackingBase, emptyWizardData, floridayCacheToWizardData, isValidGtin13, 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";
@@ -21,6 +21,7 @@ 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 { ArtikelCompositionCard } from "../../components/voorraad/ArtikelCompositionCard";
 import { stockKeyFor } from "../../hooks/useTradeItemStock";
 const empty = emptyWizardData;
 const LOAD_CARRIER_LABELS = {
@@ -36,12 +37,12 @@ const STEPS = [
     { key: "artikel", label: "Artikel" },
     { key: "paspoort", label: "Plantenpaspoort", onlyForPlants: true },
     { key: "eigenschappen", label: "Eigenschappen" },
-    { key: "klanten", label: "Klanten" },
+    { key: "klanten", label: "Klanten", onlyForCustomerSpecific: true },
     { 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: "samenstelling", label: "Samenstelling" },
     { key: "beschikbaarheid", label: "Verwachte beschikbaarheid" },
     { key: "aanbieden", label: "Aanbieden & voorraad" },
 ];
@@ -50,6 +51,8 @@ function visibleSteps(d) {
         const meta = s;
         if (meta.onlyForPlants && d.productGroup === "CUT_FLOWER")
             return false;
+        if (meta.onlyForCustomerSpecific && d.articleType !== "CUSTOMER_SPECIFIC")
+            return false;
         return true;
     });
 }
@@ -67,7 +70,7 @@ function warehouseSubLabel(raw) {
     const city = addr.city ?? "";
     return [line, city].filter(Boolean).join(", ") || undefined;
 }
-export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
+export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId, } = {}) {
     const navigate = useNavigate();
     const { activeId, activeConnection, loading: connLoading } = useFloridayConnection();
     const { customers: floridayCustomers } = useFlorydayCustomers(activeId);
@@ -79,11 +82,13 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
     const [draftFloridayId, setDraftFloridayId] = useState(null);
     const [draftLoading, setDraftLoading] = useState(Boolean(initialDraftId));
     const [publishedLoading, setPublishedLoading] = useState(Boolean(tradeItemId));
+    const [productLoading, setProductLoading] = useState(Boolean(productId));
     const [syncState, setSyncState] = useState("idle");
     const [syncError, setSyncError] = useState(null);
     const isEditingDraft = Boolean(initialDraftId);
     const isEditingPublished = Boolean(tradeItemId);
-    const isEditing = isEditingDraft || isEditingPublished;
+    const isEditingProduct = Boolean(productId);
+    const isEditing = isEditingDraft || isEditingPublished || isEditingProduct;
     const saveWarehousePreference = useCallback(async (targetTradeItemId, warehouseId) => {
         if (!activeId || !targetTradeItemId || !warehouseId)
             return;
@@ -147,6 +152,87 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
             cancelled = true;
         };
     }, [initialDraftId, activeId]);
+    // Load existing ERP product directly into the same Floriday field wizard.
+    useEffect(() => {
+        if (!productId)
+            return;
+        let cancelled = false;
+        setProductLoading(true);
+        (async () => {
+            try {
+                const { data: product, error } = await supabase
+                    .from("products")
+                    .select("id,product,barcode,article_number,quantity,sale_price,image_url,plants_per_crate,crates_per_layer,layers_per_cart,floriday_active,floriday_trade_item_id,floriday_payload")
+                    .eq("id", productId)
+                    .maybeSingle();
+                if (cancelled)
+                    return;
+                if (error)
+                    throw error;
+                if (!product) {
+                    toast.error("Product niet gevonden");
+                    return;
+                }
+                const barcode = String(product.barcode ?? "").trim();
+                const validGtin = isValidGtin13(barcode);
+                const imageUrl = String(product.image_url ?? "").trim();
+                const ppc = Number(product.plants_per_crate) || 0;
+                const cpl = Number(product.crates_per_layer) || 0;
+                const lpc = Number(product.layers_per_cart) || 0;
+                const payload = (product.floriday_payload ?? {});
+                const payloadHasPacking = Array.isArray(payload.packingConfigurations) && payload.packingConfigurations.length > 0;
+                const seededPacking = payloadHasPacking
+                    ? payload.packingConfigurations
+                    : ppc > 0 || cpl > 0 || lpc > 0
+                        ? [
+                            {
+                                id: typeof crypto !== "undefined" && "randomUUID" in crypto
+                                    ? crypto.randomUUID()
+                                    : `pk-${Date.now()}`,
+                                source: "VBN",
+                                loadCarrier: "DANISH_TROLLEY",
+                                packagingType: "",
+                                unitsPerPackage: ppc || 1,
+                                packagesPerLayer: cpl || 1,
+                                layersPerLoadCarrier: lpc || 1,
+                                isPrimary: true,
+                                isCustomerSpecific: false,
+                                customerOrganizationIds: [],
+                            },
+                        ]
+                        : [];
+                setData({
+                    ...empty,
+                    ...payload,
+                    name: product.product ?? payload.name ?? "",
+                    articleCode: String(product.article_number ?? payload.articleCode ?? "").trim(),
+                    gtin: validGtin ? barcode : (payload.gtin ?? ""),
+                    salePricePerPiece: Number(product.sale_price ?? payload.salePricePerPiece) || 0,
+                    saleStockPieces: Number(product.quantity ?? payload.saleStockPieces) || 0,
+                    images: Array.isArray(payload.images) && payload.images.length > 0
+                        ? payload.images
+                        : imageUrl
+                            ? [{ url: imageUrl, name: product.product ?? undefined, primary: true }]
+                            : [],
+                    linkedProductId: product.id,
+                    packingConfigurations: seededPacking,
+                });
+                setDraftId(product.id);
+                setDraftFloridayId((product.floriday_trade_item_id ?? null));
+            }
+            catch (e) {
+                if (!cancelled)
+                    toast.error(`Product laden mislukt: ${e.message}`);
+            }
+            finally {
+                if (!cancelled)
+                    setProductLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [productId]);
     // Load existing published trade item from the shared cache
     useEffect(() => {
         if (!tradeItemId || !activeId)
@@ -603,7 +689,7 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
         // 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");
+            toast.error("Kies eerst een VBN-code voordat je een product opslaat");
             setStep(0);
             return;
         }
@@ -618,7 +704,7 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
                 await saveWarehousePreference(draftFloridayId, data.warehouseId);
             }
             setDraftId(newId);
-            toast.success(draftId ? "Concept bijgewerkt" : "Concept opgeslagen");
+            toast.success(draftId ? "Artikel bijgewerkt" : "Artikel opgeslagen");
             navigate({ to: "/voorraad" });
         }
         catch (e) {
@@ -638,7 +724,7 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
     useEffect(() => {
         if (!activeId)
             return;
-        if (draftLoading || publishedLoading)
+        if (draftLoading || publishedLoading || productLoading)
             return;
         const pushTargetId = (isEditingPublished && tradeItemId) ? tradeItemId : (draftFloridayId || null);
         if (!draftId && !pushTargetId)
@@ -705,30 +791,36 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, } = {}) {
         activeId,
         draftLoading,
         publishedLoading,
+        productLoading,
         isEditingPublished,
         saveWarehousePreference,
         tradeItemId,
     ]);
-    if (connLoading || draftLoading || publishedLoading) {
+    if (connLoading || draftLoading || publishedLoading || productLoading) {
         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..."
                         : draftLoading
                             ? "Lokaal artikel laden..."
-                            : "Floriday-connectie laden..."] }) }));
+                            : productLoading
+                                ? "Product laden..."
+                                : "Floriday-connectie laden..."] }) }));
     }
     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 || (!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) => {
+    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" })), "Product opslaan"] })), (isEditingDraft || isEditingProduct) && (_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: "Product verwijderen?" }), _jsx(AlertDialogDescription, { children: "Dit product wordt permanent uit de voorraad verwijderd. Als het product actief op Floriday staat moet je het daar apart deactiveren." })] }), _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-muted text-muted-foreground", children: "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(ArtikelCompositionCard, { productId: linkedProductId, floridayId: tradeItemId ?? draftFloridayId ?? null }), _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;
-                    // Status: valid → blauwe check; visited+invalid → oranje !; untouched → grijs.
-                    const status = isValid
-                        ? "valid"
-                        : isVisited
-                            ? "invalid"
-                            : "untouched";
+                    // Status: alleen valid tonen als de stap ook bezocht is; anders
+                    // krijgen optioneel-gevalideerde stappen (jaarrond default, geen
+                    // extra verpakking, samenstelling read-only) onterecht een vinkje
+                    // voordat de gebruiker ze überhaupt heeft geopend.
+                    const status = !isVisited
+                        ? "untouched"
+                        : isValid
+                            ? "valid"
+                            : "invalid";
                     const isLastStep = i === steps.length - 1;
                     const navDisabled = !isEditing && i > step && !firstStepUnlocked;
                     const summary = summaryFor(s.key, data);
@@ -1221,18 +1313,51 @@ function CharacteristicField({ field, value, onChange, onRemove, }) {
     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." }))] }));
 }
 function StepKlanten({ data, update, floridayCustomers }) {
+    const [search, setSearch] = useState("");
+    const [onlySelected, setOnlySelected] = useState(false);
+    const selectedSet = useMemo(() => new Set(data.customerOrganizationIds), [data.customerOrganizationIds]);
+    const filtered = useMemo(() => {
+        const q = search.trim().toLowerCase();
+        return floridayCustomers.filter((c) => {
+            if (onlySelected && !selectedSet.has(c.id))
+                return false;
+            if (!q)
+                return true;
+            const hay = [c.name, c.commercialName, c.city, c.country, c.gln, c.id]
+                .filter(Boolean)
+                .join(" ")
+                .toLowerCase();
+            return hay.includes(q);
+        });
+    }, [floridayCustomers, search, onlySelected, selectedSet]);
     if (floridayCustomers.length === 0) {
         return (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen klantorganisaties geladen vanuit Floriday. Controleer de connectie of probeer later opnieuw." }));
     }
     const toggle = (id) => {
-        if (data.customerOrganizationIds.includes(id)) {
+        if (selectedSet.has(id)) {
             update("customerOrganizationIds", data.customerOrganizationIds.filter((c) => c !== id));
         }
         else {
             update("customerOrganizationIds", [...data.customerOrganizationIds, id]);
         }
     };
-    return (_jsx("div", { className: "max-h-72 overflow-y-auto rounded-md border divide-y", children: floridayCustomers.map((c) => (_jsxs("label", { className: "flex items-start gap-3 px-3 py-2.5 text-sm hover:bg-muted cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: data.customerOrganizationIds.includes(c.id), onChange: () => toggle(c.id), className: "h-4 w-4 mt-0.5" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium truncate", children: c.name }), _jsx("div", { className: "text-[11px] font-mono text-muted-foreground truncate select-all", children: c.id })] })] }, c.id))) }));
+    const initials = (name) => name
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((w) => w[0]?.toUpperCase() ?? "")
+        .join("") || "?";
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative min-w-[240px] flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoek op bedrijf, stad of GLN\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9" })] }), _jsxs("button", { type: "button", onClick: () => setOnlySelected((v) => !v), className: `rounded-md border px-3 py-1.5 text-xs ${onlySelected
+                            ? "border-primary bg-primary/5 text-primary"
+                            : "hover:border-primary/40"}`, children: ["Alleen geselecteerd (", selectedSet.size, ")"] }), selectedSet.size > 0 && (_jsx("button", { type: "button", onClick: () => update("customerOrganizationIds", []), className: "rounded-md border px-3 py-1.5 text-xs text-destructive hover:border-destructive/40 hover:bg-destructive/5", children: "Selectie wissen" }))] }), _jsx("div", { className: "max-h-[420px] divide-y overflow-y-auto rounded-md border", children: filtered.length === 0 ? (_jsxs("div", { className: "p-4 text-center text-sm text-muted-foreground", children: ["Geen klanten gevonden voor \"", search, "\"."] })) : (filtered.map((c) => {
+                    const checked = selectedSet.has(c.id);
+                    const subtitle = [c.city, c.country].filter(Boolean).join(" · ");
+                    return (_jsxs("label", { className: `flex cursor-pointer items-center gap-3 px-3 py-2.5 text-sm transition-colors ${checked ? "bg-primary/5" : "hover:bg-muted/60"}`, children: [_jsx("input", { type: "checkbox", checked: checked, onChange: () => toggle(c.id), className: "h-4 w-4 shrink-0" }), c.logoUrl ? (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            _jsx("img", { src: c.logoUrl, alt: "", className: "h-9 w-9 shrink-0 rounded-full border object-cover" })) : (_jsx("div", { className: "grid h-9 w-9 shrink-0 place-items-center rounded-full border bg-muted text-xs font-semibold text-muted-foreground", children: initials(c.name) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate font-medium", children: c.name }), !c.hasRealName && (_jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground", children: "Onbekend" }))] }), (subtitle || c.commercialName) && (_jsx("div", { className: "truncate text-xs text-muted-foreground", children: c.commercialName && c.commercialName !== c.name
+                                            ? `${c.commercialName}${subtitle ? ` · ${subtitle}` : ""}`
+                                            : subtitle }))] }), c.gln && (_jsxs("span", { className: "ml-auto hidden shrink-0 font-mono text-[11px] text-muted-foreground sm:inline", children: ["GLN ", c.gln] }))] }, c.id));
+                })) }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [filtered.length, " van ", floridayCustomers.length, " klanten getoond"] })] }));
 }
 function StepFotos({ data, update, activeId }) {
     const inputRef = useRef(null);
@@ -1569,17 +1694,125 @@ function StepVerpakking({ data, update }) {
 }
 function StepBeschikbaarheid({ data, update }) {
     const weeks = Array.from({ length: 52 }, (_, i) => i + 1);
-    const toggleWeek = (w) => {
-        if (data.weeks.includes(w)) {
-            update("weeks", data.weeks.filter((x) => x !== w));
+    // Drag-selectie: bij mousedown bepalen we of we in "select"- of "deselect"-
+    // modus zitten (op basis van de startcel) en breiden we de selectie uit
+    // terwijl de gebruiker over de weken sleept, zoals in Floriday.
+    const dragStateRef = useRef(null);
+    const [dragHover, setDragHover] = useState(null);
+    const setSelection = (list) => {
+        const unique = Array.from(new Set(list.filter((w) => w >= 1 && w <= 52)))
+            .sort((a, b) => a - b);
+        update("weeks", unique);
+    };
+    const applyDrag = (current) => {
+        const state = dragStateRef.current;
+        if (!state)
+            return;
+        const [a, b] = state.anchor <= current ? [state.anchor, current] : [current, state.anchor];
+        const range = Array.from({ length: b - a + 1 }, (_, i) => a + i);
+        if (state.mode === "select") {
+            setSelection([...state.baseline, ...range]);
         }
         else {
-            update("weeks", [...data.weeks, w].sort((a, b) => a - b));
+            const rm = new Set(range);
+            setSelection(state.baseline.filter((w) => !rm.has(w)));
         }
     };
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", onClick: () => update("yearRound", true), className: `rounded-md border px-3 py-1.5 text-sm ${data.yearRound ? "border-primary bg-primary/5" : "hover:border-primary/40"}`, children: "Jaarrond" }), _jsx("button", { type: "button", onClick: () => update("yearRound", false), className: `rounded-md border px-3 py-1.5 text-sm ${!data.yearRound ? "border-primary bg-primary/5" : "hover:border-primary/40"}`, children: "Specifieke periode" })] }), !data.yearRound && (_jsxs("div", { children: [_jsx(Label, { className: "mb-2 block", children: "Selecteer weken" }), _jsx("div", { className: "grid grid-cols-13 gap-1", style: { gridTemplateColumns: "repeat(13, minmax(0, 1fr))" }, children: weeks.map((w) => (_jsx("button", { type: "button", onClick: () => toggleWeek(w), className: `rounded border px-1 py-1 text-xs ${data.weeks.includes(w)
-                                ? "border-primary bg-primary text-primary-foreground"
-                                : "hover:border-primary/40"}`, children: w }, w))) })] }))] }));
+    const onWeekMouseDown = (w, e) => {
+        if (e.button !== 0)
+            return;
+        e.preventDefault();
+        const mode = data.weeks.includes(w) ? "deselect" : "select";
+        dragStateRef.current = { mode, anchor: w, baseline: data.weeks };
+        setDragHover(w);
+        applyDrag(w);
+    };
+    const onWeekMouseEnter = (w) => {
+        if (!dragStateRef.current)
+            return;
+        setDragHover(w);
+        applyDrag(w);
+    };
+    // Auto-scroll wanneer je tijdens het slepen dicht bij de linker- of
+    // rechterrand van de scroll-container komt.
+    const scrollRef = useRef(null);
+    const autoScrollRafRef = useRef(null);
+    const pointerXRef = useRef(null);
+    useEffect(() => {
+        const end = () => {
+            dragStateRef.current = null;
+            setDragHover(null);
+            pointerXRef.current = null;
+            if (autoScrollRafRef.current != null) {
+                cancelAnimationFrame(autoScrollRafRef.current);
+                autoScrollRafRef.current = null;
+            }
+        };
+        const onMove = (e) => {
+            if (!dragStateRef.current)
+                return;
+            pointerXRef.current = e.clientX;
+        };
+        window.addEventListener("mouseup", end);
+        window.addEventListener("mouseleave", end);
+        window.addEventListener("mousemove", onMove);
+        return () => {
+            window.removeEventListener("mouseup", end);
+            window.removeEventListener("mouseleave", end);
+            window.removeEventListener("mousemove", onMove);
+        };
+    }, []);
+    const startAutoScrollLoop = () => {
+        if (autoScrollRafRef.current != null)
+            return;
+        const EDGE = 60; // px vanaf de rand waar auto-scroll begint
+        const MAX_SPEED = 18; // px per frame
+        const step = () => {
+            const el = scrollRef.current;
+            const state = dragStateRef.current;
+            const x = pointerXRef.current;
+            if (!el || !state || x == null) {
+                autoScrollRafRef.current = null;
+                return;
+            }
+            const rect = el.getBoundingClientRect();
+            let delta = 0;
+            if (x < rect.left + EDGE) {
+                const t = Math.min(1, (rect.left + EDGE - x) / EDGE);
+                delta = -MAX_SPEED * t;
+            }
+            else if (x > rect.right - EDGE) {
+                const t = Math.min(1, (x - (rect.right - EDGE)) / EDGE);
+                delta = MAX_SPEED * t;
+            }
+            if (delta !== 0) {
+                el.scrollLeft += delta;
+                // Bepaal welke week nu onder de cursor ligt en pas de selectie aan
+                // zodat het bereik meegroeit terwijl er wordt gescrolld.
+                const target = document.elementFromPoint(x, rect.top + rect.height / 2);
+                const weekAttr = target?.closest?.("[data-week]");
+                const w = weekAttr ? Number(weekAttr.getAttribute("data-week")) : NaN;
+                if (Number.isFinite(w)) {
+                    setDragHover(w);
+                    applyDrag(w);
+                }
+            }
+            autoScrollRafRef.current = requestAnimationFrame(step);
+        };
+        autoScrollRafRef.current = requestAnimationFrame(step);
+    };
+    const onWeekMouseDownWithScroll = (w, e) => {
+        onWeekMouseDown(w, e);
+        pointerXRef.current = e.clientX;
+        startAutoScrollLoop();
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", onClick: () => update("yearRound", true), className: `rounded-md border px-3 py-1.5 text-sm ${data.yearRound ? "border-primary bg-primary/5" : "hover:border-primary/40"}`, children: "Jaarrond" }), _jsx("button", { type: "button", onClick: () => update("yearRound", false), className: `rounded-md border px-3 py-1.5 text-sm ${!data.yearRound ? "border-primary bg-primary/5" : "hover:border-primary/40"}`, children: "Specifieke periode" })] }), !data.yearRound && (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [_jsx(Label, { className: "shrink-0", children: "Selecteer weken" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: ["Sleep om meerdere weken te selecteren", data.weeks.length > 0 && ` — ${data.weeks.length} week/weken`] }), _jsx("button", { type: "button", onClick: () => setSelection([]), disabled: data.weeks.length === 0, className: "rounded-md border px-2.5 py-1 text-xs text-destructive hover:border-destructive/40 hover:bg-destructive/5 disabled:cursor-not-allowed disabled:opacity-40", children: "Selectie leegmaken" })] })] }), _jsx("div", { ref: scrollRef, className: "overflow-x-auto pb-2", children: _jsx("div", { className: "flex select-none gap-1 min-w-max", children: weeks.map((w) => {
+                                const selected = data.weeks.includes(w);
+                                const isHover = dragHover === w;
+                                return (_jsx("button", { type: "button", "data-week": w, onMouseDown: (e) => onWeekMouseDownWithScroll(w, e), onMouseEnter: () => onWeekMouseEnter(w), className: `h-9 w-11 shrink-0 rounded border text-xs transition-colors ${selected
+                                        ? "border-primary bg-primary text-primary-foreground"
+                                        : "hover:border-primary/40"} ${isHover ? "ring-2 ring-primary/40" : ""}`, children: w }, w));
+                            }) }) })] }))] }));
 }
 // ------------------------------------------------------------
 // Stap "Aanbieden & voorraad" — Direct Sale via CustomerOffer

package/dist-lib/components/voorraad/EditArtikelPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditArtikelPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/EditArtikelPage.tsx"],"names":[],"mappings":"AAeA,wBAAgB,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAyHrD"}
+{"version":3,"file":"EditArtikelPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/EditArtikelPage.tsx"],"names":[],"mappings":"AAWA,wBAAgB,eAAe,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CA4ErD"}

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

@@ -1,33 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { useNavigate } from "@tanstack/react-router";
 import { Card } from "@flowselections/core";
 import { Loader2 } from "lucide-react";
 import { ArtikelWizard } from "./ArtikelWizard";
 import { supabase } from "../../integrations/supabase/client";
-import { useFloridayConnection } from "../../hooks/useFloridayConnection";
-import { upsertLocalTradeItem } from "../../hooks/useLocalTradeItems";
-import { emptyWizardData, isValidGtin13 } from "../../lib/floriday-payload";
 export function EditArtikelPage({ id }) {
     const [resolved, setResolved] = useState(null);
-    const [promoting, setPromoting] = useState(false);
-    const { activeId } = useFloridayConnection();
-    const navigate = useNavigate();
     useEffect(() => {
         let cancelled = false;
         setResolved(null);
         (async () => {
-            const draftRes = await supabase
-                .from("trade_item_drafts")
+            // 1. Volwaardig product (canonieke bron sinds de dedup-migratie).
+            const prodRes = await supabase
+                .from("products")
                 .select("id")
                 .eq("id", id)
                 .maybeSingle();
             if (cancelled)
                 return;
-            if (draftRes.data) {
-                setResolved({ kind: "draft", id });
+            if (prodRes.data) {
+                setResolved({ kind: "product", id });
                 return;
             }
+            // 2. Product met dit Floriday-artikel-ID.
+            const byFloriday = await supabase
+                .from("products")
+                .select("id")
+                .eq("floriday_trade_item_id", id)
+                .maybeSingle();
+            if (cancelled)
+                return;
+            if (byFloriday.data?.id) {
+                setResolved({ kind: "product", id: byFloriday.data.id });
+                return;
+            }
+            // 3. Alleen nog in de Floriday-cache aanwezig (nog niet lokaal gespiegeld).
             const pubRes = await supabase
                 .from("floriday_trade_items_cache")
                 .select("floriday_id")
@@ -39,87 +46,23 @@ export function EditArtikelPage({ id }) {
                 setResolved({ kind: "published", id });
                 return;
             }
-            // Fallback: ERP-only product → promote to editable draft transparently.
-            const prodRes = await supabase
-                .from("products")
-                .select("id,product,barcode,quantity,sale_price")
-                .eq("id", id)
-                .maybeSingle();
-            if (cancelled)
-                return;
-            if (!prodRes.data) {
-                setResolved({ kind: "notfound" });
-                return;
-            }
-            if (!activeId) {
-                // No Floriday connection yet — cannot create a draft (connection_id required).
-                setResolved({ kind: "notfound" });
-                return;
-            }
-            setPromoting(true);
-            try {
-                // Look for an existing draft already linked to this product.
-                const existing = await supabase
-                    .from("trade_item_drafts")
-                    .select("id,data")
-                    .eq("connection_id", activeId)
-                    .contains("data", { linkedProductId: id })
-                    .maybeSingle();
-                if (cancelled)
-                    return;
-                if (existing.data) {
-                    navigate({
-                        to: "/voorraad/$id",
-                        params: { id: existing.data.id },
-                        replace: true,
-                    });
-                    return;
-                }
-                const prod = prodRes.data;
-                const barcode = String(prod.barcode ?? "").trim();
-                const validGtin = isValidGtin13(barcode);
-                const seed = {
-                    ...emptyWizardData,
-                    name: prod.product ?? "",
-                    articleCode: validGtin ? "" : barcode,
-                    gtin: validGtin ? barcode : "",
-                    salePricePerPiece: Number(prod.sale_price) || 0,
-                    saleStockPieces: Number(prod.quantity) || 0,
-                    linkedProductId: id,
-                };
-                const newId = await upsertLocalTradeItem({
-                    connectionId: activeId,
-                    data: seed,
-                });
-                if (cancelled)
-                    return;
-                navigate({
-                    to: "/voorraad/$id",
-                    params: { id: newId },
-                    replace: true,
-                });
-            }
-            catch {
-                if (!cancelled)
-                    setResolved({ kind: "notfound" });
-            }
-            finally {
-                if (!cancelled)
-                    setPromoting(false);
-            }
+            setResolved({
+                kind: "notfound",
+                reason: "Dit artikel bestaat niet (meer) in de voorraad.",
+            });
         })();
         return () => {
             cancelled = true;
         };
-    }, [id, activeId, navigate]);
-    if (!resolved || promoting) {
-        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" }), promoting ? "Artikel voorbereiden voor bewerken..." : "Artikel zoeken..."] }) }));
+    }, [id]);
+    if (!resolved) {
+        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" }), "Artikel laden\u2026"] }) }));
     }
     if (resolved.kind === "notfound") {
-        return (_jsx("main", { className: "p-6", children: _jsx(Card, { className: "p-6 text-sm", children: "Artikel niet gevonden. Het is mogelijk verwijderd of nog niet gesynchroniseerd vanuit Floriday." }) }));
+        return (_jsx("main", { className: "p-6", children: _jsxs(Card, { className: "p-6 text-sm space-y-1", children: [_jsx("div", { children: "Artikel niet gevonden." }), resolved.reason && (_jsx("div", { className: "text-muted-foreground", children: resolved.reason }))] }) }));
     }
-    if (resolved.kind === "draft") {
-        return _jsx(ArtikelWizard, { draftId: resolved.id });
+    if (resolved.kind === "product") {
+        return _jsx(ArtikelWizard, { productId: resolved.id });
     }
     return _jsx(ArtikelWizard, { tradeItemId: resolved.id });
 }

package/dist-lib/components/voorraad/FloridayStatusBadge.d.ts

@@ -0,0 +1,4 @@
+export declare function FloridayStatusBadge({ active }: {
+    active: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FloridayStatusBadge.d.ts.map

package/dist-lib/components/voorraad/FloridayStatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloridayStatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/FloridayStatusBadge.tsx"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,OAAO,GAAG,SAAS,CAAA;CAAE,2CAa9E"}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from "@flowselections/core";
+export function FloridayStatusBadge({ active }) {
+    if (active) {
+        return (_jsx(Badge, { className: "bg-emerald-500/15 text-emerald-700 border-emerald-500/30", children: "Actief op Floriday" }));
+    }
+    return (_jsx(Badge, { className: "bg-slate-500/15 text-slate-700 border-slate-500/30", children: "Niet actief op Floriday" }));
+}