@flowselections/floriday-voorraad 1.0.145 → 1.0.147

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

@@ -9,7 +9,9 @@ export interface WizardInitial {
 }
 /** Neemt naam, code, voorraad, prijs en (indien compleet) belading over. */
 export declare function applyWizardInitial(base: WizardData, init?: WizardInitial): WizardData;
-export declare function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId, resumeJobId, initial, }?: {
+export declare function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId, resumeJobId, initial, embedded, }?: {
+    /** Binnen de artikelpagina: voorraad, samenstelling en geschiedenis staan in de eigen tabbladen. */
+    embedded?: boolean;
     draftId?: string;
     tradeItemId?: string;
     productId?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ArtikelWizard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/ArtikelWizard.tsx"],"names":[],"mappings":"AA2DA,OAAO,EAUL,KAAK,UAAU,EAMhB,MAAM,4BAA4B,CAAC;AA4DpC,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMpF,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,4EAA4E;AAC5E,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,aAAa,GAAG,UAAU,CA0BrF;AAiED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EAAE,cAAc,EACvB,WAAW,EACX,SAAS,EACT,WAAW,EACX,OAAO,GACR,GAAE;IACD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,aAAa,CAAC;CACpB,+BAy4EL"}
+{"version":3,"file":"ArtikelWizard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/ArtikelWizard.tsx"],"names":[],"mappings":"AA6DA,OAAO,EAUL,KAAK,UAAU,EAMhB,MAAM,4BAA4B,CAAC;AA4DpC,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMpF,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,4EAA4E;AAC5E,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,aAAa,GAAG,UAAU,CA0BrF;AAgED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EAAE,cAAc,EACvB,WAAW,EACX,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAgB,GACjB,GAAE;IACD,oGAAoG;IACpG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,aAAa,CAAC;CACpB,+BA+6EL"}

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

@@ -3,9 +3,10 @@ import { saveOwnPackings, packingRowsFromWizard } from "../../lib/product-packin
 import { FloridayLoadCarriers } from "./FloridayLoadCarriers.js";
 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 { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button, Card, CardContent, Checkbox, Dialog, DialogDescription, 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, Star, } from "lucide-react";
 import { useFloridayConnection } from "../../hooks/useFloridayConnection.js";
+import { countPendingPhotos, registerPendingPhoto, resolvePendingPhotos, wijzigingenOverzicht } from "../../lib/pending-photos.js";
 import { useFlorydayCustomers } from "../../hooks/useFlorydayCustomers.js";
 import { floriday } from "../../lib/floriday-client.js";
 import { listFloricode, listFloricodeByField } from "../../lib/floricode-client.js";
@@ -91,7 +92,6 @@ const STEPS = [
     { key: "fotos", label: "Foto's" },
     { key: "warehouse", label: "Warehouse" },
     { key: "beladingen", label: "Beladingen" },
-    { key: "verpakking", label: "Aanvullende verpakkingsmaterialen" },
     { key: "samenstelling", label: "Samenstelling" },
     { key: "beschikbaarheid", label: "Verwachte beschikbaarheid" },
     { key: "aanbieden", label: "Aanbieden & voorraad" },
@@ -137,7 +137,7 @@ async function lookupProductGroupForVbn(vbnCode) {
         .maybeSingle();
     return data ? groupOfRecord(data) : null;
 }
-export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId, resumeJobId, initial, } = {}) {
+export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId, resumeJobId, initial, embedded = false, } = {}) {
     const navigate = useNavigate();
     const { activeId, activeConnection, loading: connLoading } = useFloridayConnection();
     const connectionReadiness = useQuery({
@@ -960,7 +960,7 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId,
     const update = (key, value) => setData((d) => ({ ...d, [key]: value }));
     // Stap 1 (VBN) is de poort: zodra die geldig is, mag de gebruiker vrij
     // tussen alle stappen springen door erop te klikken.
-    const firstStepUnlocked = useMemo(() => steps.length > 0 && validateStepLocal(steps[0].key, data).ok, [steps, data]);
+    const firstStepUnlocked = useMemo(() => (!isEditingPublished && !publishToFloriday) || (steps.length > 0 && validateStepLocal(steps[0].key, data).ok), [steps, data, isEditingPublished, publishToFloriday]);
     // Per-stap validatie → bron voor visuele status én publish-gate.
     // "samenstelling" is read-only ("binnenkort beschikbaar") en mag nooit
     // als ongeldig tellen.
@@ -971,7 +971,12 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId,
     }), [steps, data, spec, regulatoryQuery.isLoading, regulatoryQuery.isError, regulatoryQuery.error]);
     // Foto's zijn alleen verplicht om naar Floriday te publiceren
     // (Floriday: "One or more product images"); opslaan als concept kan zonder.
-    const gateValidity = stepValidity.map((v, i) => v || (steps[i]?.key === "fotos" && !publishToFloriday));
+    // 1.0.146: zonder publiceren telt alleen wat lokaal nodig is (een naam).
+    // Floriday-velden en foto's zijn dan nooit "nog nodig".
+    const lokaalAlleen = !isEditingPublished && !publishToFloriday;
+    const gateValidity = lokaalAlleen
+        ? steps.map((st) => st.key !== "artikel" || data.name.trim().length > 0)
+        : stepValidity;
     const invalidStepCount = gateValidity.filter((v) => !v).length;
     const firstInvalidIndex = gateValidity.findIndex((v) => !v);
     const goTo = (i) => {
@@ -1197,6 +1202,16 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId,
             });
         });
     }, []);
+    const wizardData = data;
+    const [overzicht, setOverzicht] = useState(null);
+    /** Niets gaat naar Floriday zonder dit overzicht vooraf. */
+    const metOverzicht = (run, naarFloriday) => {
+        if (!naarFloriday) {
+            run();
+            return;
+        }
+        setOverzicht({ wijzigingen: wijzigingenOverzicht(lastSavedRef.current, data), fotos: countPendingPhotos(data), run });
+    };
     const submit = async (options) => {
         if (!activeId) {
             toast.error("Geen actieve verbinding met de handelsomgeving", {
@@ -1204,6 +1219,18 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId,
             });
             return;
         }
+        // Foto's gaan pas nu naar Floriday (na het overzicht vooraf).
+        let data = wizardData;
+        if (wantsPublish && countPendingPhotos(wizardData) > 0) {
+            try {
+                data = await resolvePendingPhotos(wizardData, (f) => floriday.uploadImage(activeId, f, f.type || "image/jpeg", f.name));
+                setData(data);
+            }
+            catch (e) {
+                toast.error(e.message || "Foto's konden niet naar Floriday");
+                return;
+            }
+        }
         // Zijn de productregels (schema) nog niet binnen? Dan publiceren we niet,
         // maar bewaren we de wijziging ALTIJD lokaal en markeren we hem als
         // "nog niet doorgegeven aan Floriday".
@@ -1820,6 +1847,8 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId,
         // 2. Doorgeven aan Floriday.
         try {
             await saveWarehousePreference(pushTargetId, snapshot.warehouseId);
+            snapshot = await resolvePendingPhotos(snapshot, (f) => floriday.uploadImage(activeId, f, f.type || "image/jpeg", f.name));
+            setData(snapshot);
             const payload = buildUpdateTradeItemPayload(snapshot);
             const res = await floriday.updateTradeItem(activeId, pushTargetId, payload);
             if (!res?.attemptId) {
@@ -1872,16 +1901,8 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId,
             lastSavedRef.current = serialized;
             return;
         }
-        if (lastSavedRef.current === serialized)
-            return;
-        const snapshot = data;
-        const t = window.setTimeout(() => {
-            // De lokale opslag slaagt (bijna) altijd; de baseline mag dus mee, ook als
-            // de Floriday-push faalt — de invoer staat dan veilig in de eigen database.
-            lastSavedRef.current = serialized;
-            void persistAndPush(snapshot);
-        }, 800);
-        return () => window.clearTimeout(t);
+        // 1.0.146: geen automatisch opslaan/versturen meer. Alleen bewust via
+        // "Naar Floriday sturen" / "Op Floriday zetten" met het overzicht vooraf.
     }, [
         data,
         draftId,
@@ -1910,7 +1931,7 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId,
     if (connLoading || draftLoading || publishedLoading || productLoading) {
         // Voorraadblok direct bruikbaar; Floriday-gegevens laden op de achtergrond (1.0.138).
         const vroegVoorraad = !connLoading && (tradeItemId || productId || draftId);
-        return (_jsxs("main", { className: "p-6 space-y-4", children: [vroegVoorraad && (_jsx(VoorraadStockCard, { connectionId: activeId, tradeItemId: tradeItemId ?? null, draftId: draftId ?? null, productId: productId ?? null })), _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
+        return (_jsxs("main", { className: "p-6 space-y-4", children: [vroegVoorraad && !embedded && (_jsx(VoorraadStockCard, { connectionId: activeId, tradeItemId: tradeItemId ?? null, draftId: draftId ?? null, productId: productId ?? null })), _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..."
@@ -1925,7 +1946,7 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId,
                             setDeleteOpen(o);
                             if (!o)
                                 setDeleteAck(false);
-                        }, 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, { asChild: true, children: _jsxs("div", { className: "space-y-3 text-sm", children: [_jsxs("div", { children: ["Je staat op het punt om ", _jsx("strong", { children: data.name || "dit artikel" }), data.articleCode ? _jsxs(_Fragment, { children: [" (artikelnummer ", _jsx("code", { children: data.articleCode }), ")"] }) : null, " ", "lokaal uit de voorraad te verwijderen."] }), _jsxs("div", { className: "rounded-md border p-3 bg-muted/40 space-y-1", children: [_jsxs("div", { children: ["Huidige voorraad: ", _jsx("strong", { children: productMeta.physicalStock }), " stuks"] }), _jsxs("div", { children: ["Floriday-koppeling:", " ", productMeta.floridayActive || productMeta.floridayTradeItemId ? (_jsx("span", { className: "text-emerald-700 font-medium", children: "actief" })) : (_jsx("span", { className: "text-muted-foreground", children: "geen" }))] })] }), (productMeta.floridayActive || productMeta.floridayTradeItemId) && (_jsxs("div", { className: "rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900", children: [_jsx("strong", { children: "Let op:" }), " dit artikel is gekoppeld met Floriday. Als je alleen de lokale kant verwijdert, blijft het artikel op Floriday bestaan en verschijnt het bij de volgende sync weer terug in de lijst. Trek het artikel daarna zelf in via het Floriday-portaal als je het echt weg wilt."] })), productMeta.physicalStock > 0 && (_jsxs("div", { className: "rounded-md border border-rose-300 bg-rose-50 p-3 text-rose-900", children: ["Er staat nog voorraad (", productMeta.physicalStock, " stuks) op dit product. Deze voorraad wordt \u00F3\u00F3k verwijderd en kan niet automatisch worden hersteld."] })), _jsxs("label", { className: "flex items-start gap-2 pt-1", children: [_jsx(Checkbox, { checked: deleteAck, onCheckedChange: (v) => setDeleteAck(Boolean(v)) }), _jsx("span", { children: "Ik weet zeker dat ik dit product wil verwijderen en begrijp de gevolgen." })] })] }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { disabled: !deleteAck, onClick: handleDeleteDraft, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: "Definitief 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, productId: productId ?? null, offerForSale: data.offerForSale })] }), data.name && data.vbnName && data.name !== data.vbnName && (_jsx("div", { className: "text-sm text-muted-foreground", children: data.vbnName }))] })), pendingSync && (_jsxs(Card, { className: "p-4 border-amber-300 bg-amber-50 text-amber-900 space-y-2", children: [_jsx("div", { className: "font-medium text-sm", children: "Je wijzigingen zijn opgeslagen, maar nog niet doorgegeven aan Floriday" }), _jsxs("div", { className: "text-xs", children: ["Alles wat je hier hebt ingevuld blijft bewaard in dit systeem. Zodra het doorgeven lukt, verdwijnt deze melding vanzelf.", pendingSync.error ? ` Reden: ${pendingSync.error}` : ""] }), _jsx(FloridayStockReasonLine, { productId: linkedProductId ?? productId ?? null }), _jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: retryingSync, onClick: retrySync, children: retryingSync ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin mr-1" }), " Bezig\u2026"] })) : ("Opnieuw proberen") })] })), 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" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [editTarget.text, " Je kunt vrij tussen alle secties navigeren."] })] }), _jsxs(Button, { onClick: () => void 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: () => void 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(ProductStructureCard, { productId: linkedProductId ?? productId ?? null }), _jsx(ArtikelCompositionCard, { productId: linkedProductId ?? productId ?? null, floridayId: tradeItemId ?? draftFloridayId ?? null }), _jsx(FloridayInfoCard, { floridayTradeItemId: tradeItemId ?? draftFloridayId ?? null, local: {
+                        }, 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, { asChild: true, children: _jsxs("div", { className: "space-y-3 text-sm", children: [_jsxs("div", { children: ["Je staat op het punt om ", _jsx("strong", { children: data.name || "dit artikel" }), data.articleCode ? _jsxs(_Fragment, { children: [" (artikelnummer ", _jsx("code", { children: data.articleCode }), ")"] }) : null, " ", "lokaal uit de voorraad te verwijderen."] }), _jsxs("div", { className: "rounded-md border p-3 bg-muted/40 space-y-1", children: [_jsxs("div", { children: ["Huidige voorraad: ", _jsx("strong", { children: productMeta.physicalStock }), " stuks"] }), _jsxs("div", { children: ["Floriday-koppeling:", " ", productMeta.floridayActive || productMeta.floridayTradeItemId ? (_jsx("span", { className: "text-emerald-700 font-medium", children: "actief" })) : (_jsx("span", { className: "text-muted-foreground", children: "geen" }))] })] }), (productMeta.floridayActive || productMeta.floridayTradeItemId) && (_jsxs("div", { className: "rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900", children: [_jsx("strong", { children: "Let op:" }), " dit artikel is gekoppeld met Floriday. Als je alleen de lokale kant verwijdert, blijft het artikel op Floriday bestaan en verschijnt het bij de volgende sync weer terug in de lijst. Trek het artikel daarna zelf in via het Floriday-portaal als je het echt weg wilt."] })), productMeta.physicalStock > 0 && (_jsxs("div", { className: "rounded-md border border-rose-300 bg-rose-50 p-3 text-rose-900", children: ["Er staat nog voorraad (", productMeta.physicalStock, " stuks) op dit product. Deze voorraad wordt \u00F3\u00F3k verwijderd en kan niet automatisch worden hersteld."] })), _jsxs("label", { className: "flex items-start gap-2 pt-1", children: [_jsx(Checkbox, { checked: deleteAck, onCheckedChange: (v) => setDeleteAck(Boolean(v)) }), _jsx("span", { children: "Ik weet zeker dat ik dit product wil verwijderen en begrijp de gevolgen." })] })] }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { disabled: !deleteAck, onClick: handleDeleteDraft, className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", children: "Definitief 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, productId: productId ?? null, offerForSale: data.offerForSale })] }), data.name && data.vbnName && data.name !== data.vbnName && (_jsx("div", { className: "text-sm text-muted-foreground", children: data.vbnName }))] })), _jsx(Dialog, { open: overzicht !== null, onOpenChange: (o) => !o && setOverzicht(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Naar Floriday sturen" }), _jsx(DialogDescription, { children: "Dit gaat naar Floriday. Er verandert niets tot je bevestigt." })] }), _jsxs("div", { className: "space-y-2 text-sm", children: [overzicht && overzicht.wijzigingen.length > 0 ? (_jsx("ul", { className: "list-disc pl-5", children: overzicht.wijzigingen.map((w) => _jsx("li", { children: w }, w)) })) : (_jsx("p", { className: "text-muted-foreground", children: "Geen gewijzigde onderdelen sinds de laatste keer; de huidige gegevens worden opnieuw verstuurd." })), overzicht && overzicht.fotos > 0 && _jsxs("p", { children: [overzicht.fotos, " nieuwe foto('s) worden ge\u00FCpload."] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => setOverzicht(null), children: "Annuleren" }), _jsx(Button, { onClick: () => { const r = overzicht?.run; setOverzicht(null); r?.(); }, children: "Versturen" })] })] }) }), pendingSync && (_jsxs(Card, { className: "p-4 border-amber-300 bg-amber-50 text-amber-900 space-y-2", children: [_jsx("div", { className: "font-medium text-sm", children: "Je wijzigingen zijn opgeslagen, maar nog niet doorgegeven aan Floriday" }), _jsxs("div", { className: "text-xs", children: ["Alles wat je hier hebt ingevuld blijft bewaard in dit systeem. Zodra het doorgeven lukt, verdwijnt deze melding vanzelf.", pendingSync.error ? ` Reden: ${pendingSync.error}` : ""] }), _jsx(FloridayStockReasonLine, { productId: linkedProductId ?? productId ?? null }), _jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: retryingSync, onClick: () => metOverzicht(() => void retrySync(), true), children: retryingSync ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin mr-1" }), " Bezig\u2026"] })) : ("Opnieuw proberen") })] })), 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" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [editTarget.text, " Je kunt vrij tussen alle secties navigeren."] })] }), _jsxs(Button, { onClick: () => metOverzicht(() => void submit(), wantsPublish), 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: () => metOverzicht(() => void submit(), wantsPublish), 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 && !embedded && (_jsxs(_Fragment, { children: [_jsx(ProductStructureCard, { productId: linkedProductId ?? productId ?? null }), _jsx(ArtikelCompositionCard, { productId: linkedProductId ?? productId ?? null, floridayId: tradeItemId ?? draftFloridayId ?? null }), _jsx(FloridayInfoCard, { floridayTradeItemId: tradeItemId ?? draftFloridayId ?? null, local: {
                             name: data.name || data.vbnName,
                             articleNumber: data.articleCode,
                             gtin: data.gtin,
@@ -1953,7 +1974,7 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId,
                                                         ? "border-destructive bg-destructive text-destructive-foreground"
                                                         : "border-muted-foreground/30 text-muted-foreground"}`, children: status === "valid" ? (_jsx(Check, { className: "h-4 w-4" })) : status === "invalid" ? ("!") : (i + 1) }), _jsx("span", { className: `min-w-0 truncate font-medium ${status === "untouched" ? "text-muted-foreground" : ""}`, children: s.label }), !isOpen && summary && (_jsx("span", { className: `max-w-xs truncate text-xs ${status === "invalid" ? "text-destructive" : "text-muted-foreground"}`, children: status === "invalid" ? `Onvolledig — ${summary}` : summary }))] }), isOpen && (_jsxs(CardContent, { className: "space-y-4 pt-0", children: [_jsx("div", { "data-wizard-form-content": true, className: "w-full min-w-0", children: _jsx(StepBody, { stepKey: s.key, data: data, packingStatus: packingStatus, update: update, vbnProducts: vbnProducts, featureTypes: featureTypes, packagingTypes: packagingTypes, loadCarriers: loadCarriers, floridayCustomers: floridayCustomers, schemaQuery: schemaQuery, regulatoryQuery: regulatoryQuery, spec: spec, collectionsList: collectionsList, setCollectionsList: setCollectionsList, activeId: activeId, acceptedVbnCodes: acceptedVbnCodes, priceGroups: priceGroups, parentProductId: linkedProductId ?? draftId ?? null, parentFloridayId: draftFloridayId ?? tradeItemId ?? null, articleCodeLocked: Boolean(draftFloridayId || tradeItemId), botanicalDraft: botanicalDraft, setBotanicalDraft: setBotanicalDraft }) }), isLastStep && !isEditingPublished && (_jsxs("div", { className: "rounded-lg border bg-muted/30 p-4 flex items-start gap-3", children: [_jsx("img", { src: floridayLogo, alt: "Floriday", className: "h-7 w-7 shrink-0 mt-0.5" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Label, { htmlFor: "publish-to-floriday", className: "font-medium cursor-pointer", children: "Publiceren naar Floriday" }), _jsx("p", { className: "text-xs text-muted-foreground mt-1", children: publishToFloriday
                                                                 ? "Het artikel wordt aangemaakt in Floriday en is binnen enkele minuten zichtbaar voor klanten."
-                                                                : "Het artikel wordt alleen lokaal opgeslagen. Je kunt het later vanuit de voorraadlijst alsnog publiceren naar Floriday." })] }), _jsx(Switch, { id: "publish-to-floriday", checked: publishToFloriday, onCheckedChange: setPublishToFloriday })] })), (isLastStep || isEditing) && (_jsx(PublishReadinessCard, { report: readiness, loading: connLoading || connectionReadiness.isLoading || schemaQuery.isLoading, onGoToStep: goToStepKey })), publishJob && (_jsx(PublishProgressCard, { job: publishJob, steps: publishSteps, retrying: submitting, onRetry: () => void submit({ resumeJobId: publishJob.id }), onFixStep: (key) => goToStepKey(key === "trade-item" ? "eigenschappen" : "aanbod") })), (isLastStep || isEditing) && invalidStepCount > 0 && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive flex items-center justify-between gap-3", children: [_jsxs("span", { children: ["Nog ", invalidStepCount, " stap", invalidStepCount === 1 ? "" : "pen", " onvolledig"] }), firstInvalidIndex >= 0 && (_jsxs("button", { type: "button", onClick: () => setStep(firstInvalidIndex), className: "underline font-medium", children: ["Ga naar ", steps[firstInvalidIndex].label] }))] })), _jsx("div", { className: "flex justify-end pt-2", children: isLastStep || isEditing ? (_jsxs(Button, { onClick: () => void submit(), disabled: submitting || invalidStepCount > 0, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Check, { className: "mr-2 h-4 w-4" })), isEditingPublished
+                                                                : "Het artikel wordt alleen lokaal opgeslagen. Je kunt het later vanuit de voorraadlijst alsnog publiceren naar Floriday." })] }), _jsx(Switch, { id: "publish-to-floriday", checked: publishToFloriday, onCheckedChange: setPublishToFloriday })] })), (isLastStep || isEditing) && (_jsx(PublishReadinessCard, { report: readiness, loading: connLoading || connectionReadiness.isLoading || schemaQuery.isLoading, onGoToStep: goToStepKey })), publishJob && (_jsx(PublishProgressCard, { job: publishJob, steps: publishSteps, retrying: submitting, onRetry: () => metOverzicht(() => void submit({ resumeJobId: publishJob.id }), true), onFixStep: (key) => goToStepKey(key === "trade-item" ? "eigenschappen" : "aanbod") })), (isLastStep || isEditing) && invalidStepCount > 0 && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive flex items-center justify-between gap-3", children: [_jsxs("span", { children: ["Nog ", invalidStepCount, " stap", invalidStepCount === 1 ? "" : "pen", " onvolledig"] }), firstInvalidIndex >= 0 && (_jsxs("button", { type: "button", onClick: () => setStep(firstInvalidIndex), className: "underline font-medium", children: ["Ga naar ", steps[firstInvalidIndex].label] }))] })), _jsx("div", { className: "flex justify-end pt-2", children: isLastStep || isEditing ? (_jsxs(Button, { onClick: () => metOverzicht(() => void submit(), wantsPublish), disabled: submitting || invalidStepCount > 0, children: [submitting ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Check, { className: "mr-2 h-4 w-4" })), isEditingPublished
                                                         ? "Wijzigingen opslaan"
                                                         : publishToFloriday
                                                             ? isEditingDraft
@@ -1963,10 +1984,11 @@ export function ArtikelWizard({ draftId: initialDraftId, tradeItemId, productId,
                                                                 ? "Wijzigingen opslaan"
                                                                 : "Artikel aanmaken"] })) : ((() => {
                                                 const pendingBotanical = s.key === "paspoort" && botanicalDraft.trim() !== "";
-                                                const canGo = isValid || s.key === "fotos" || pendingBotanical;
+                                                const canGo = isValid || gateValidity[i] || pendingBotanical;
                                                 const res = canGo ? null : validateStepLocal(s.key, data);
-                                                const reasons = res && !res.ok ? res.errors : [];
-                                                return (_jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsxs(Button, { onClick: next, disabled: !canGo, children: ["Volgende stap", _jsx(ArrowRight, { className: "ml-2 h-4 w-4" })] }), !canGo && reasons.length > 0 && (_jsxs("p", { className: "text-xs text-muted-foreground text-right", children: ["Nog nodig: ", reasons.join(" · ")] })), s.key === "fotos" && !isValid && (_jsx("p", { className: "text-xs text-muted-foreground text-right", children: "Je kunt verder zonder foto. Voor publiceren naar Floriday is minstens \u00E9\u00E9n foto nodig." }))] }));
+                                                // Alleen wat echt ontbreekt, zonder herhalingen.
+                                                const reasons = res && !res.ok ? Array.from(new Set(res.errors)) : [];
+                                                return (_jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsxs(Button, { onClick: next, disabled: !canGo, children: ["Volgende stap", _jsx(ArrowRight, { className: "ml-2 h-4 w-4" })] }), !canGo && reasons.length > 0 && (_jsxs("p", { className: "text-xs text-muted-foreground text-right", children: ["Nog nodig: ", reasons.join(" · ")] })), s.key === "fotos" && !isValid && !lokaalAlleen && (_jsx("p", { className: "text-xs text-muted-foreground text-right", children: "Je kunt verder zonder foto. Voor publiceren naar Floriday is minstens \u00E9\u00E9n foto nodig." }))] }));
                                             })()) })] }))] }) }, s.key));
                 }) }), _jsx(AlertDialog, { open: Boolean(conflict), onOpenChange: (open) => {
                     if (!open)
@@ -2566,10 +2588,6 @@ function StepFotos({ data, update, activeId }) {
     const onFiles = async (files) => {
         if (!files || files.length === 0)
             return;
-        if (!activeId) {
-            toast.error("Geen actieve Floriday-koppeling – foto's kunnen niet worden geüpload");
-            return;
-        }
         const fileArr = Array.from(files);
         setUploading(true);
         setUploadError(null);
@@ -2617,27 +2635,14 @@ function StepFotos({ data, update, activeId }) {
                     if (storageErr) {
                         console.warn("[upload] Supabase storage mislukt", f.name, storageErr);
                     }
-                    // 3) Upload naar Floriday met retries (in de client).
-                    try {
-                        const res = await floriday.uploadImage(activeId, f, f.type || "image/jpeg", f.name);
-                        if (!res.url)
-                            throw new Error("Floriday upload gaf geen URL terug");
-                        const previewUrl = URL.createObjectURL(f);
-                        additions.push({
-                            name: f.name,
-                            url: res.url,
-                            previewUrl,
-                            imageId: res.imageId ?? null,
-                        });
-                    }
-                    catch (e) {
-                        const msg = e instanceof Error && e.message
-                            ? e.message
-                            : "Foto kon niet worden geüpload.";
-                        console.error("[StepFotos] upload mislukt", { filename: f.name, message: msg, error: e });
-                        setUploadError({ message: `${f.name}: ${msg}`, detail: e?.adminDetail ?? null });
-                        toast.error(`${f.name} — ${msg}`);
-                    }
+                    // 3) Niet naar Floriday bij het kiezen: alleen een tijdelijke verwijzing.
+                    //    Uploaden gebeurt pas bij "Naar Floriday sturen" (na het overzicht).
+                    additions.push({
+                        name: f.name,
+                        url: registerPendingPhoto(f),
+                        previewUrl: URL.createObjectURL(f),
+                        imageId: null,
+                    });
                 }
             };
             await Promise.all(Array.from({ length: CONCURRENCY }, worker));
@@ -2868,19 +2873,18 @@ function PackingConfigDialog({ open, onOpenChange, initial, isFirst, packagingTy
         (draft.source === "VBN" || Boolean(draft.packagingSupplierId)) &&
         (!draft.isCustomerSpecific || draft.customerOrganizationIds.length > 0);
     const onUploadPhoto = async (file) => {
-        if (!file || !activeId)
+        if (!file)
             return;
         setUploadingPhoto(true);
         try {
             const { prepareFloridayImage } = await import("../../lib/image-resize.js");
             const prepared = await prepareFloridayImage(file);
-            const res = await floriday.uploadImage(activeId, prepared, prepared.type || "image/jpeg", prepared.name);
-            if (!res.url)
-                throw new Error("Geen URL ontvangen van Floriday");
+            // Niet naar Floriday bij het kiezen; uploaden gebeurt pas bij versturen.
+            const pendingUrl = registerPendingPhoto(prepared);
             setDraft((d) => ({
                 ...d,
-                photoUrl: res.url,
-                photoImageId: res.imageId ?? undefined,
+                photoUrl: pendingUrl,
+                photoImageId: undefined,
                 photoPreviewUrl: URL.createObjectURL(prepared),
             }));
             toast.success("Foto toegevoegd aan belading");

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":"AAaA,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,WAAW,GACZ,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,+BAoFA"}
+{"version":3,"file":"EditArtikelPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/EditArtikelPage.tsx"],"names":[],"mappings":"AAYA,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,WAAW,GACZ,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,+BA4EA"}

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

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Card } from "@flowselections/core";
 import { Loader2 } from "lucide-react";
 import { ArtikelWizard } from "./ArtikelWizard.js";
-import { ProductCustomFieldsCard } from "./ProductCustomFieldsCard.js";
-import { TrayStickerCard } from "./TrayStickerCard.js";
+import { ArtikelPagina } from "./artikel/ArtikelPagina.js";
 import { supabase } from "../../integrations/supabase/client.js";
 export function EditArtikelPage({ id, resumeJobId, }) {
     const [resolved, setResolved] = useState(null);
@@ -64,7 +63,7 @@ export function EditArtikelPage({ id, resumeJobId, }) {
         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 === "product") {
-        return (_jsxs(_Fragment, { children: [_jsx(ArtikelWizard, { productId: resolved.id, resumeJobId: resumeJobId }), _jsxs("div", { className: "p-6 pt-0 space-y-6", children: [_jsx(TrayStickerCard, { productId: resolved.id }), _jsx(ProductCustomFieldsCard, { productId: resolved.id })] })] }));
+        return _jsx(ArtikelPagina, { id: resolved.id, resumeJobId: resumeJobId });
     }
     return _jsx(ArtikelWizard, { tradeItemId: resolved.id, resumeJobId: resumeJobId });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ProductCustomFieldsCard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/ProductCustomFieldsCard.tsx"],"names":[],"mappings":"AAyBA,wFAAwF;AACxF,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,sCA6H3E"}
+{"version":3,"file":"ProductCustomFieldsCard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/ProductCustomFieldsCard.tsx"],"names":[],"mappings":"AAuBA,wFAAwF;AACxF,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,sCA+I3E"}

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
-import { Loader2, Save } from "lucide-react";
+import { useOpslagDeelnemer } from "./artikel/opslaan-context.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
 import { useVoorraadCustomFields } from "../../hooks/useVoorraadCustomFields.js";
 import { fetchProductCustomValues, saveProductCustomValues, } from "../../lib/voorraad-custom-fields.js";
 /** Eigen voorraadvelden met `show_in_detail`, tonen en bewerken op de productpagina. */
 export function ProductCustomFieldsCard({ productId }) {
     const { fields, loading } = useVoorraadCustomFields();
     const [values, setValues] = useState({});
+    const [opened, setOpened] = useState({});
     const [loadingValues, setLoadingValues] = useState(true);
     const [saving, setSaving] = useState(false);
     useEffect(() => {
@@ -15,12 +16,16 @@ export function ProductCustomFieldsCard({ productId }) {
         setLoadingValues(true);
         fetchProductCustomValues(productId)
             .then((v) => {
-            if (!cancelled)
+            if (!cancelled) {
                 setValues(v);
+                setOpened(v);
+            }
         })
             .catch(() => {
-            if (!cancelled)
+            if (!cancelled) {
                 setValues({});
+                setOpened({});
+            }
         })
             .finally(() => {
             if (!cancelled)
@@ -31,25 +36,36 @@ export function ProductCustomFieldsCard({ productId }) {
         };
     }, [productId]);
     const detailFields = fields.filter((f) => f.show_in_detail);
-    if (loading || loadingValues) {
-        return null;
-    }
-    if (detailFields.length === 0)
-        return null;
     const set = (key, value) => setValues((prev) => ({ ...prev, [key]: value }));
+    const gewijzigd = detailFields.filter((f) => JSON.stringify(values[f.field_key] ?? null) !== JSON.stringify(opened[f.field_key] ?? null));
+    useOpslagDeelnemer("eigen_velden", gewijzigd.length > 0, () => save());
     const save = async () => {
+        if (gewijzigd.length === 0)
+            return { ok: true };
         setSaving(true);
         try {
-            await saveProductCustomValues(productId, Object.fromEntries(detailFields.map((f) => [f.field_key, values[f.field_key] ?? null])));
-            toast.success("Eigen velden opgeslagen");
+            const res = await saveProductCustomValues(productId, Object.fromEntries(gewijzigd.map((f) => [f.field_key, opened[f.field_key] ?? null])), Object.fromEntries(gewijzigd.map((f) => [f.field_key, values[f.field_key] ?? null])));
+            if (!res.ok) {
+                const namen = res.conflicten
+                    .map((c) => detailFields.find((f) => f.field_key === c.veld)?.field_label ?? c.veld)
+                    .join(", ");
+                const fresh = await fetchProductCustomValues(productId);
+                setOpened(fresh);
+                setValues(fresh);
+                return { ok: false, melding: `Eigen velden niet opgeslagen: iemand anders wijzigde intussen ${namen}. De nieuwste waarden zijn geladen; vul je wijziging opnieuw in.` };
+            }
+            setOpened((prev) => ({ ...prev, ...Object.fromEntries(gewijzigd.map((f) => [f.field_key, values[f.field_key] ?? null])) }));
+            return { ok: true };
         }
         catch (e) {
-            toast.error(`Opslaan mislukt: ${e.message}`);
+            return { ok: false, melding: `Eigen velden: opslaan mislukt (${e.message}).` };
         }
         finally {
             setSaving(false);
         }
     };
+    if (loading || loadingValues || detailFields.length === 0)
+        return null;
     return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Eigen velden" }), _jsx(CardDescription, { children: "Extra voorraadvelden zoals ingesteld bij Instellingen \u2192 Voorraadvelden." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: detailFields.map((f) => {
                             const v = values[f.field_key];
                             return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: `cf-${f.field_key}`, children: f.field_label }), f.field_type === "boolean" ? (_jsx("div", { className: "pt-1", children: _jsx(Checkbox, { id: `cf-${f.field_key}`, checked: v === true, onCheckedChange: (c) => set(f.field_key, c === true) }) })) : f.field_type === "select" ? (_jsxs(Select, { value: typeof v === "string" ? v : "", onValueChange: (val) => set(f.field_key, val), children: [_jsx(SelectTrigger, { id: `cf-${f.field_key}`, children: _jsx(SelectValue, { placeholder: "Kies\u2026" }) }), _jsx(SelectContent, { children: f.options.map((o) => (_jsx(SelectItem, { value: o, children: o }, o))) })] })) : (_jsx(Input, { id: `cf-${f.field_key}`, type: f.field_type === "number"
@@ -61,5 +77,5 @@ export function ProductCustomFieldsCard({ productId }) {
                                                 ? null
                                                 : Number(e.target.value)
                                             : e.target.value) }))] }, f.id));
-                        }) }), _jsxs(Button, { onClick: save, disabled: saving, children: [saving ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Save, { className: "mr-2 h-4 w-4" })), "Eigen velden opslaan"] })] })] }));
+                        }) }), gewijzigd.length > 0 && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Niet opgeslagen wijzigingen; bewaar met \"Opslaan\" bovenaan." }))] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ProductSalePriceField.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/ProductSalePriceField.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,OAAO,GACR,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,sCAkGA;AAED,wFAAwF;AACxF,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,sCAqCtE"}
+{"version":3,"file":"ProductSalePriceField.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/ProductSalePriceField.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,OAAO,GACR,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,sCAoGA;AAED,wFAAwF;AACxF,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,sCAqCtE"}

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

@@ -58,18 +58,19 @@ export function ProductSalePriceField({ productId, onSaved, }) {
         setSaving(true);
         setError(null);
         try {
-            const { data, error: err } = await supabase
-                .from("products")
-                .update({ sale_price: parsed })
-                .eq("id", productId)
-                .select("id");
+            // Zelfde opslagroute als "Opslaan" op de artikelpagina: conflictcontrole per veld.
+            const { data, error: err } = await supabase.rpc("voorraad_artikel_opslaan", {
+                p_id: productId, p_oud: { sale_price: saved }, p_nieuw: { sale_price: parsed },
+            });
             if (err)
                 throw new Error(err.message);
-            if (!data || data.length === 0)
-                throw new Error("geen rechten om dit artikel te wijzigen");
+            if (!data?.ok) {
+                const hun = data?.conflicten?.[0]?.hun;
+                throw new Error(`iemand anders heeft de prijs intussen gewijzigd${hun != null ? ` naar € ${hun}` : ""}. Laad het artikel opnieuw`);
+            }
             setSaved(parsed);
             onSaved?.(parsed);
-            toast.success("Prijs opgeslagen. Het artikel gaat opnieuw naar Floriday.");
+            toast.success("Prijs opgeslagen (alleen lokaal).");
         }
         catch (e) {
             const msg = `Prijs niet opgeslagen: ${e?.message ?? e}`;

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

@@ -1 +1 @@
-{"version":3,"file":"StepSamenstelling.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/StepSamenstelling.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAsB5E,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,yBAAyB,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC9C;AA6FD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,UAAU,EACV,QAAQ,EACR,kBAAkB,GACnB,EAAE,KAAK,+BA+aP"}
+{"version":3,"file":"StepSamenstelling.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/StepSamenstelling.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAwB5E,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,yBAAyB,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC9C;AA6FD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,UAAU,EACV,QAAQ,EACR,kBAAkB,GACnB,EAAE,KAAK,+BAqcP"}

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

@@ -94,6 +94,7 @@ export function StepSamenstelling({ productId, floridayId, packings, packagingTy
     const [loading, setLoading] = useState(true);
     const [saving, setSaving] = useState(false);
     const [rows, setRows] = useState([]);
+    const [teVerwijderen, setTeVerwijderen] = useState([]);
     const [names, setNames] = useState(new Map());
     const [activeTab, setActiveTab] = useState("__base__");
     const hasParent = Boolean(productId || floridayId);
@@ -131,8 +132,10 @@ export function StepSamenstelling({ productId, floridayId, packings, packagingTy
             component_trade_item_floriday_id: r.component_trade_item_floriday_id ?? null,
             quantity: Number(r.quantity ?? 1),
             sort_order: Number(r.sort_order ?? 0),
+            _orig: { quantity: Number(r.quantity ?? 1), sort_order: Number(r.sort_order ?? 0) },
         }));
         setRows(list);
+        setTeVerwijderen([]);
         await resolveNames(list);
         setLoading(false);
     }, [productId, floridayId, hasParent]);
@@ -230,13 +233,9 @@ export function StepSamenstelling({ productId, floridayId, packings, packagingTy
         const row = rows.find((r) => r.id === id);
         if (!row)
             return;
-        if (!row._new) {
-            const { error } = await supabase.from("product_bom_items").delete().eq("id", id);
-            if (error) {
-                toast.error("Verwijderen mislukt");
-                return;
-            }
-        }
+        // Verwijderen gebeurt pas bij "Opslaan" (bewuste actie met conflictcontrole).
+        if (!row._new)
+            setTeVerwijderen((l) => [...l, row]);
         setRows((prev) => prev.filter((r) => r.id !== id));
     };
     const saveAll = async () => {
@@ -245,7 +244,7 @@ export function StepSamenstelling({ productId, floridayId, packings, packagingTy
             return;
         }
         const dirty = rows.filter((r) => r._dirty);
-        if (dirty.length === 0)
+        if (dirty.length === 0 && teVerwijderen.length === 0)
             return;
         setSaving(true);
         // Verhoudingscontrole: alle lagen meetellen, nooit blokkeren.
@@ -264,6 +263,32 @@ export function StepSamenstelling({ productId, floridayId, packings, packagingTy
             // Controle mislukt: opslaan gaat gewoon door.
         }
         try {
+            // Conflictcontrole: bestaande regels die je wijzigt of verwijdert moeten nog
+            // dezelfde stand hebben als bij openen.
+            const gecontroleerd = [...dirty.filter((r) => !r._new), ...teVerwijderen].filter((r) => r._orig);
+            if (gecontroleerd.length) {
+                const { data: nu, error: nuErr } = await supabase
+                    .from("product_bom_items")
+                    .select("id,quantity,sort_order")
+                    .in("id", gecontroleerd.map((r) => r.id));
+                if (nuErr)
+                    throw nuErr;
+                const huidig = new Map((nu ?? []).map((r) => [r.id, r]));
+                const afwijkend = gecontroleerd.filter((r) => {
+                    const h = huidig.get(r.id);
+                    return !h || Number(h.quantity) !== r._orig.quantity || Number(h.sort_order) !== r._orig.sort_order;
+                });
+                if (afwijkend.length) {
+                    toast.error("Iemand anders heeft deze samenstelling intussen gewijzigd. Er is niets opgeslagen; laad de samenstelling opnieuw.");
+                    return;
+                }
+            }
+            for (const r of teVerwijderen) {
+                const { error } = await supabase.from("product_bom_items").delete().eq("id", r.id);
+                if (error)
+                    throw error;
+            }
+            setTeVerwijderen([]);
             const inserts = dirty
                 .filter((r) => r._new)
                 .map((r) => ({
@@ -309,7 +334,7 @@ export function StepSamenstelling({ productId, floridayId, packings, packagingTy
                 if (error)
                     throw error;
             }
-            setRows((prev) => prev.map((r) => ({ ...r, _dirty: false })));
+            setRows((prev) => prev.map((r) => ({ ...r, _dirty: false, _orig: { quantity: r.quantity, sort_order: r.sort_order } })));
             toast.success("Samenstelling opgeslagen");
         }
         catch (e) {
@@ -319,7 +344,7 @@ export function StepSamenstelling({ productId, floridayId, packings, packagingTy
             setSaving(false);
         }
     };
-    const hasUnsaved = rows.some((r) => r._dirty);
+    const hasUnsaved = rows.some((r) => r._dirty) || teVerwijderen.length > 0;
     if (!hasParent) {
         return (_jsx("div", { className: "rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground", children: "Sla het artikel eerst op om een samenstelling te configureren." }));
     }

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

@@ -1,4 +1,8 @@
-/** Traysticker-afbeelding per product — los van de Floriday-productfoto (`products.image_url`). */
+/**
+ * Traysticker-afbeelding per artikel — los van de Floriday-productfoto.
+ * Kiezen of verwijderen wordt pas bewaard met de knop "Opslaan" van de pagina,
+ * met controle tegen de stand bij openen.
+ */
 export declare function TrayStickerCard({ productId }: {
     productId: string;
 }): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"TrayStickerCard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/TrayStickerCard.tsx"],"names":[],"mappings":"AAyBA,mGAAmG;AACnG,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,+BA+HnE"}
+{"version":3,"file":"TrayStickerCard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/TrayStickerCard.tsx"],"names":[],"mappings":"AA4BA;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,+BAoInE"}