@flowselections/floriday-voorraad 1.0.145 → 1.0.149

package/dist-lib/components/voorraad/artikel/ArtikelPagina.js

@@ -0,0 +1,313 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Link, useBlocker } from "@tanstack/react-router";
+import { Badge, Button, Card, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, Label, Tabs, TabsContent, TabsList, TabsTrigger, toast, } from "@flowselections/core";
+import { AlertTriangle, ArrowLeft, Loader2, MoreHorizontal, Package, Send } from "lucide-react";
+import { supabase } from "../../../integrations/supabase/client.js";
+import { dbFoutTekst } from "../../../lib/db-error-message.js";
+import { ARTIKEL_GEWIJZIGD } from "../../../lib/artikel-gewijzigd.js";
+import { ARTIKEL_VELDEN, VELD_LABEL, VOORRAAD_LABEL, VOORRAAD_VELDEN, aantalUitInvoer, gewijzigdeVoorraad, alsLijstRij, artikelStatus, artikelTabs, floridayActie, gewijzigdeVelden, prijsUitInvoer, } from "../../../lib/artikel-pagina.js";
+import { STATUS_INFO, aantal, geld } from "../../../lib/voorraad-lijst.js";
+import { AanpassenDialog, AfboekenDialog } from "../lijst/SnelActieDialogen.js";
+import { TwijfelKiezen } from "./TwijfelKiezen.js";
+import { OpslaanContext } from "./opslaan-context.js";
+// Tabbladinhoud laadt pas als je het tabblad opent.
+const StockMutationHistoryCard = lazy(() => import("../StockMutationHistoryCard.js").then((m) => ({ default: m.StockMutationHistoryCard })));
+const OrderHistoryCard = lazy(() => import("../OrderHistoryCard.js").then((m) => ({ default: m.OrderHistoryCard })));
+const ProductStructureCard = lazy(() => import("../ProductStructureCard.js").then((m) => ({ default: m.ProductStructureCard })));
+const ArtikelCompositionCard = lazy(() => import("../ArtikelCompositionCard.js").then((m) => ({ default: m.ArtikelCompositionCard })));
+const TrayStickerCard = lazy(() => import("../TrayStickerCard.js").then((m) => ({ default: m.TrayStickerCard })));
+const ProductCustomFieldsCard = lazy(() => import("../ProductCustomFieldsCard.js").then((m) => ({ default: m.ProductCustomFieldsCard })));
+const ProductLinkCard = lazy(() => import("../ProductLinkCard.js").then((m) => ({ default: m.ProductLinkCard })));
+const FloridayInfoCard = lazy(() => import("../FloridayInfoCard.js").then((m) => ({ default: m.FloridayInfoCard })));
+const ArtikelWizard = lazy(() => import("../ArtikelWizard.js").then((m) => ({ default: m.ArtikelWizard })));
+const TAB_LABEL = {
+    voorraad: "Voorraad",
+    verpakking: "Verpakking en samenstelling",
+    koppelingen: "Koppelingen",
+    floriday: "Floriday",
+};
+function Laden() {
+    return (_jsxs("div", { className: "flex items-center gap-2 p-4 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Laden\u2026"] }));
+}
+function toon(v) {
+    if (v === null || v === undefined || v === "")
+        return "(leeg)";
+    return String(v);
+}
+function gelijk(a, b) {
+    const n = (v) => (v === null || v === undefined ? "" : String(v).trim());
+    return n(a) === n(b);
+}
+export function ArtikelPagina({ id, resumeJobId, onNietGevonden }) {
+    const [detail, setDetail] = useState(null);
+    const [fout, setFout] = useState(null);
+    const [bijOpenen, setBijOpenen] = useState(null);
+    const [invoer, setInvoer] = useState({});
+    const [voorraadBij, setVoorraadBij] = useState(null);
+    const [opslaan, setOpslaan] = useState(false);
+    const [conflicten, setConflicten] = useState(null);
+    const [tab, setTab] = useState(resumeJobId ? "floriday" : "voorraad");
+    const [floridayOpen, setFloridayOpen] = useState(Boolean(resumeJobId));
+    const [aanpassen, setAanpassen] = useState(false);
+    const [afboeken, setAfboeken] = useState(false);
+    const [archief, setArchief] = useState(null);
+    const [archiefKeuze, setArchiefKeuze] = useState("hier");
+    const [bezig, setBezig] = useState(false);
+    const geladen = useRef(false);
+    const invoerRef = useRef({});
+    // Onderdelen (eigen velden, traysticker) die meedoen met de ene knop "Opslaan".
+    const [deelnemers, setDeelnemers] = useState({});
+    const register = useMemo(() => ({
+        meld: (k, d) => setDeelnemers((m) => {
+            if (!d) {
+                if (!(k in m))
+                    return m;
+                const { [k]: _weg, ...rest } = m;
+                return rest;
+            }
+            if (m[k]?.vuil === d.vuil && m[k])
+                return { ...m, [k]: d };
+            return { ...m, [k]: d };
+        }),
+    }), []);
+    // Bezochte tabbladen blijven gemonteerd, zodat niet-opgeslagen invoer niet verloren gaat.
+    const [bezocht, setBezocht] = useState(() => new Set([resumeJobId ? "floriday" : "voorraad"]));
+    useEffect(() => { setBezocht((b) => (b.has(tab) ? b : new Set(b).add(tab))); }, [tab]);
+    const laad = useCallback(async () => {
+        const { data, error } = await supabase.rpc("voorraad_artikel_detail", { p_id: id });
+        if (error) {
+            setFout(dbFoutTekst(error));
+            return;
+        }
+        const d = data;
+        if (!d?.gevonden) {
+            if (onNietGevonden)
+                onNietGevonden();
+            else
+                setFout("Dit artikel bestaat niet (meer) in de voorraad.");
+            return;
+        }
+        setDetail(d);
+        // De stand bij openen wordt maar één keer vastgelegd (en opnieuw na opslaan).
+        if (!geladen.current) {
+            geladen.current = true;
+            setBijOpenen(d.velden);
+            const vb = { minimum_stock: d.minimum, incoming_stock: d.inkomend, notes: d.notitie ?? null };
+            setVoorraadBij(vb);
+            setInvoer({
+                ...Object.fromEntries(ARTIKEL_VELDEN.map((k) => [k, d.velden[k] === null ? "" : String(d.velden[k])])),
+                ...Object.fromEntries(VOORRAAD_VELDEN.map((k) => [k, vb[k] === null ? "" : String(vb[k])])),
+            });
+        }
+        else {
+            // Velden die je niet zelf aan het wijzigen bent, volgen de nieuwe stand (ook na opslaan in een ander tabblad).
+            const inv = invoerRef.current;
+            const vb = { minimum_stock: d.minimum, incoming_stock: d.inkomend, notes: d.notitie ?? null };
+            const volg = {};
+            setBijOpenen((b) => {
+                if (!b)
+                    return b;
+                const n = { ...b };
+                for (const k of ARTIKEL_VELDEN)
+                    if (gelijk(inv[k], b[k]) && !gelijk(b[k], d.velden[k])) {
+                        n[k] = d.velden[k];
+                        volg[k] = d.velden[k] === null ? "" : String(d.velden[k]);
+                    }
+                return n;
+            });
+            setVoorraadBij((b) => {
+                if (!b)
+                    return b;
+                const n = { ...b };
+                for (const k of VOORRAAD_VELDEN)
+                    if (gelijk(inv[k], b[k]) && !gelijk(b[k], vb[k])) {
+                        n[k] = vb[k];
+                        volg[k] = vb[k] === null ? "" : String(vb[k]);
+                    }
+                return n;
+            });
+            setInvoer((s) => ({ ...s, ...volg }));
+        }
+    }, [id, onNietGevonden]);
+    useEffect(() => { invoerRef.current = invoer; }, [invoer]);
+    useEffect(() => { geladen.current = false; void laad(); }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Opslag in een ander tabblad van deze pagina (prijs in het Floriday-formulier, samenstelling): kop direct bijwerken.
+    useEffect(() => {
+        const h = (e) => { if (e.detail?.id === id)
+            void laad(); };
+        window.addEventListener(ARTIKEL_GEWIJZIGD, h);
+        return () => window.removeEventListener(ARTIKEL_GEWIJZIGD, h);
+    }, [id, laad]);
+    // Live bijwerken alleen voor dit artikel (voorraadregel en artikelrij), gebundeld.
+    const heeftDetail = Boolean(detail);
+    const voorraadSleutel = detail?.voorraad_sleutel ?? null;
+    useEffect(() => {
+        if (!heeftDetail)
+            return;
+        let t = null;
+        const later = () => { if (t)
+            clearTimeout(t); t = setTimeout(() => void laad(), 1500); };
+        let ch = supabase.channel(`artikel-${id}`)
+            .on("postgres_changes", { event: "*", schema: "public", table: "products", filter: `id=eq.${id}` }, later);
+        if (voorraadSleutel) {
+            ch = ch.on("postgres_changes", { event: "*", schema: "public", table: "trade_item_stock", filter: `trade_item_key=eq.${voorraadSleutel}` }, later);
+        }
+        ch.subscribe();
+        return () => { if (t)
+            clearTimeout(t); supabase.removeChannel(ch); };
+    }, [id, voorraadSleutel, laad, heeftDetail]);
+    const nieuw = useMemo(() => {
+        if (!bijOpenen)
+            return null;
+        const p = prijsUitInvoer(invoer.sale_price ?? "");
+        return {
+            product: invoer.product ?? null,
+            article_number: invoer.article_number ?? null,
+            sale_price: p,
+            unit: invoer.unit ?? null,
+            barcode: invoer.barcode ?? null,
+        };
+    }, [invoer, bijOpenen]);
+    const wijzigingen = bijOpenen && nieuw ? gewijzigdeVelden(bijOpenen, nieuw) : {};
+    const voorraadNieuw = {
+        minimum_stock: aantalUitInvoer(invoer.minimum_stock ?? ""),
+        incoming_stock: aantalUitInvoer(invoer.incoming_stock ?? ""),
+        notes: invoer.notes ?? null,
+    };
+    const voorraadWijz = voorraadBij ? gewijzigdeVoorraad(voorraadBij, voorraadNieuw) : {};
+    const vuileDeelnemers = Object.values(deelnemers).filter((d) => d.vuil);
+    const vuil = Object.keys(wijzigingen).length > 0 || Object.keys(voorraadWijz).length > 0 || vuileDeelnemers.length > 0;
+    const prijsFout = nieuw && Number.isNaN(nieuw.sale_price) ? "Vul een geldige prijs in, bijv. 1,25." : null;
+    const aantalFout = Number.isNaN(voorraadNieuw.minimum_stock) || Number.isNaN(voorraadNieuw.incoming_stock)
+        ? "Minimum en inkomend: vul een heel aantal van 0 of meer in." : null;
+    // Waarschuwing bij verlaten met niet-opgeslagen wijzigingen.
+    useBlocker({ shouldBlockFn: () => vuil && !window.confirm("Je hebt niet-opgeslagen wijzigingen. Pagina toch verlaten?"), enableBeforeUnload: () => vuil });
+    async function doeOpslaan() {
+        if (!bijOpenen || !voorraadBij || !vuil || prijsFout || aantalFout)
+            return;
+        setOpslaan(true);
+        const alleConflicten = [];
+        let fout = null;
+        let opgeslagen = false;
+        if (Object.keys(wijzigingen).length) {
+            const oud = {};
+            for (const k of Object.keys(wijzigingen))
+                oud[k] = bijOpenen[k];
+            const { data, error } = await supabase.rpc("voorraad_artikel_opslaan", { p_id: id, p_oud: oud, p_nieuw: wijzigingen });
+            if (error)
+                fout = dbFoutTekst(error);
+            else {
+                const r = data;
+                if (r.ok) {
+                    opgeslagen = true;
+                    setBijOpenen({ ...bijOpenen, ...wijzigingen });
+                }
+                else
+                    alleConflicten.push(...(r.conflicten ?? []));
+            }
+        }
+        if (!fout && Object.keys(voorraadWijz).length) {
+            const oud = {};
+            for (const k of Object.keys(voorraadWijz))
+                oud[k] = voorraadBij[k];
+            const { data, error } = await supabase.rpc("voorraad_voorraad_instellingen_opslaan", { p_product_id: id, p_oud: oud, p_nieuw: voorraadWijz });
+            if (error)
+                fout = dbFoutTekst(error);
+            else {
+                const r = data;
+                if (r.ok) {
+                    opgeslagen = true;
+                    setVoorraadBij({ ...voorraadBij, ...voorraadWijz });
+                }
+                else
+                    alleConflicten.push(...(r.conflicten ?? []));
+            }
+        }
+        if (!fout) {
+            for (const d of vuileDeelnemers) {
+                const r = await d.opslaan();
+                if (r.ok)
+                    opgeslagen = true;
+                else if (r.melding)
+                    toast.error(r.melding);
+            }
+        }
+        setOpslaan(false);
+        if (fout)
+            toast.error(fout);
+        if (alleConflicten.length)
+            setConflicten(alleConflicten);
+        if (opgeslagen)
+            toast.success(alleConflicten.length ? "Deels opgeslagen; kies bij de conflicten." : "Opgeslagen (alleen lokaal).");
+        await laad();
+    }
+    /** Conflict: neem hun waarde over voor dat veld en leg de nieuwe stand vast. */
+    function neemHunOver(c) {
+        setInvoer((s) => ({ ...s, [c.veld]: c.hun === null ? "" : String(c.hun) }));
+        zetBasis(c);
+    }
+    function zetBasis(c) {
+        if (VOORRAAD_VELDEN.includes(c.veld))
+            setVoorraadBij((b) => (b ? { ...b, [c.veld]: c.hun } : b));
+        else
+            setBijOpenen((b) => (b ? { ...b, [c.veld]: c.hun } : b));
+        setConflicten((l) => (l ?? []).filter((x) => x.veld !== c.veld));
+    }
+    /** Conflict: houd jouw waarde; de stand bij openen wordt hun waarde, zodat opnieuw opslaan bewust overschrijft. */
+    function houdJouw(c) {
+        zetBasis(c);
+    }
+    async function archiveren(bevestigd) {
+        setBezig(true);
+        const { data, error } = await supabase.rpc("voorraad_artikel_archiveren", { p_id: id, p_archiveren: true, p_bevestigd: bevestigd, p_ook_floriday: archiefKeuze === "floriday" });
+        setBezig(false);
+        if (error) {
+            toast.error(dbFoutTekst(error));
+            return;
+        }
+        const r = data;
+        if (!r.ok && r.waarschuwing) {
+            setArchief({ waarschuwing: { gereserveerd: r.gereserveerd, open_orders: r.open_orders } });
+            return;
+        }
+        setArchief(null);
+        toast.success(archiefKeuze === "floriday" ? "Artikel gearchiveerd. De voorraad op Floriday gaat via de gewone wachtrij naar 0." : "Artikel gearchiveerd. Op Floriday is niets veranderd.");
+        await laad();
+    }
+    async function terugzetten() {
+        const { error } = await supabase.rpc("voorraad_artikel_archiveren", { p_id: id, p_archiveren: false });
+        if (error) {
+            toast.error(dbFoutTekst(error));
+            return;
+        }
+        toast.success("Artikel staat weer in de voorraad.");
+        await laad();
+    }
+    if (fout) {
+        return _jsx("main", { className: "p-6", children: _jsx(Card, { className: "p-6 text-sm", children: fout }) });
+    }
+    if (!detail || !nieuw) {
+        return _jsx("main", { className: "p-6", children: _jsx(Card, { className: "p-6", children: _jsx(Laden, {}) }) });
+    }
+    const status = artikelStatus({ ...detail, velden: nieuw });
+    const info = STATUS_INFO[status];
+    const actie = floridayActie(detail);
+    const tabs = artikelTabs(detail);
+    if (floridayOpen && !tabs.includes("floriday") && actie === "op_floriday")
+        tabs.push("floriday");
+    const rij = alsLijstRij(detail);
+    return (_jsxs("main", { className: "p-6 space-y-4", children: [_jsxs(Link, { to: "/voorraad", className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), " Terug naar voorraad"] }), _jsx(Card, { className: "p-4", children: _jsxs("div", { className: "flex flex-wrap items-start gap-4", children: [_jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border bg-muted flex items-center justify-center", children: detail.foto ? _jsx("img", { src: detail.foto, alt: detail.naam, className: "h-full w-full object-cover" }) : _jsx(Package, { className: "h-8 w-8 text-muted-foreground" }) }), _jsxs("div", { className: "min-w-0 flex-1 basis-64", children: [_jsx("h1", { className: "text-xl font-semibold leading-tight break-words", children: detail.naam }), _jsx("div", { className: "mt-1 text-sm text-muted-foreground break-words", children: detail.artikelnummer ?? "Geen artikelnummer" }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-sm", children: [_jsx(Badge, { variant: status === "ok" ? "secondary" : status === "gearchiveerd" ? "outline" : "destructive", children: info.label }), info.actie && info.tab && tabs.includes(info.tab) && (_jsx("button", { type: "button", className: "underline text-muted-foreground", onClick: () => setTab(info.tab), children: info.actie })), vuil && _jsx("span", { className: "text-muted-foreground", children: "\u00B7 Niet-opgeslagen wijzigingen" })] })] }), _jsx("dl", { className: "grid grid-cols-3 gap-4 text-center sm:grid-cols-5", children: [
+                                ["Liggend", aantal(detail.liggend)],
+                                ["Gereserveerd", aantal(detail.gereserveerd)],
+                                ["Inkomend", aantal(detail.inkomend)],
+                                ["Vrij", aantal(detail.vrij)],
+                                ["Prijs per stuk", geld(detail.velden.sale_price === null ? null : Number(detail.velden.sale_price))],
+                            ].map(([l, v], i) => (_jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: l }), _jsx("dd", { className: `text-lg font-semibold tabular-nums ${i === 3 && rij.onder_minimum ? "text-destructive" : ""}`, children: v })] }, l))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { onClick: doeOpslaan, disabled: !vuil || opslaan || Boolean(prijsFout) || Boolean(aantalFout), children: [opslaan && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Opslaan"] }), actie && (_jsxs(Button, { variant: "outline", onClick: () => { setFloridayOpen(true); setTab("floriday"); }, children: [_jsx(Send, { className: "mr-2 h-4 w-4" }), actie === "sturen" ? "Naar Floriday sturen" : "Op Floriday zetten"] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Meer acties", children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: detail.gearchiveerd_at
+                                                ? _jsx(DropdownMenuItem, { onClick: terugzetten, children: "Terugzetten in voorraad" })
+                                                : _jsx(DropdownMenuItem, { onClick: () => { setArchiefKeuze("hier"); setArchief({}); }, children: "Archiveren\u2026" }) })] })] })] }) }), detail.gearchiveerd_at && (detail.orders_gearchiveerd ?? 0) > 0 && (_jsxs("div", { role: "alert", className: "flex flex-wrap items-center gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-destructive" }), _jsxs("span", { children: ["Dit artikel is gearchiveerd, maar er ", detail.orders_gearchiveerd === 1 ? "is 1 open orderregel" : `zijn ${detail.orders_gearchiveerd} open orderregels`, " binnengekomen. De orders zijn gewoon gekoppeld."] }), _jsx(Button, { size: "sm", variant: "outline", onClick: terugzetten, children: "Terugzetten in voorraad" })] })), _jsx(OpslaanContext.Provider, { value: register, children: _jsxs(Tabs, { value: tab, onValueChange: setTab, children: [_jsx(TabsList, { children: tabs.map((t) => _jsx(TabsTrigger, { value: t, children: TAB_LABEL[t] }, t)) }), _jsxs(TabsContent, { value: "voorraad", forceMount: bezocht.has("voorraad") ? true : undefined, className: "space-y-4 data-[state=inactive]:hidden", children: [_jsxs(Card, { className: "p-4 space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("h2", { className: "font-medium", children: "Artikelgegevens" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Opslaan is alleen lokaal; er gaat niets automatisch naar Floriday." })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-5", children: ARTIKEL_VELDEN.map((k) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `veld-${k}`, children: VELD_LABEL[k] }), _jsx(Input, { id: `veld-${k}`, value: invoer[k] ?? "", inputMode: k === "sale_price" ? "decimal" : undefined, onChange: (e) => setInvoer((s) => ({ ...s, [k]: e.target.value })) }), k === "sale_price" && prijsFout && _jsx("p", { className: "text-xs text-destructive", children: prijsFout })] }, k))) })] }), _jsxs(Card, { className: "p-4 flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "grid w-full gap-3 sm:grid-cols-3", children: [VOORRAAD_VELDEN.map((k) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `voorraad-${k}`, children: VOORRAAD_LABEL[k] }), _jsx(Input, { id: `voorraad-${k}`, value: invoer[k] ?? "", inputMode: k === "notes" ? undefined : "numeric", onChange: (e) => setInvoer((s) => ({ ...s, [k]: e.target.value })) })] }, k))), aantalFout && _jsx("p", { className: "text-xs text-destructive sm:col-span-3", children: aantalFout })] }), _jsxs("div", { className: "text-sm", children: [_jsx("div", { className: "font-medium", children: "Voorraad" }), _jsxs("div", { className: "text-muted-foreground", children: ["Liggend wijzig je met Aanpassen of Afboeken \u00B7 Telmoment ", detail.telmoment ? new Date(detail.telmoment).toLocaleString("nl-NL") : _jsx("span", { className: "text-destructive", children: "ontbreekt" })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setAanpassen(true), disabled: Boolean(detail.gearchiveerd_at), children: "Aanpassen" }), _jsx(Button, { variant: "outline", onClick: () => setAfboeken(true), disabled: Boolean(detail.gearchiveerd_at), children: "Afboeken" })] })] }), _jsxs(Suspense, { fallback: _jsx(Laden, {}), children: [_jsx(StockMutationHistoryCard, { tradeItemKey: detail.voorraad_sleutel, productId: detail.id, sleutels: detail.controle?.mutatie_sleutels ?? undefined }), _jsx(OrderHistoryCard, { tradeItemKey: detail.voorraad_sleutel, productName: detail.naam, productId: detail.id, productIds: detail.controle?.zelfde_sleutel_ids }), _jsx(ProductCustomFieldsCard, { productId: detail.id, beginVelden: detail.eigen_velden?.definities, beginWaarden: detail.eigen_velden?.waarden })] })] }), _jsx(TabsContent, { value: "verpakking", forceMount: bezocht.has("verpakking") ? true : undefined, className: "space-y-4 data-[state=inactive]:hidden", children: _jsxs(Suspense, { fallback: _jsx(Laden, {}), children: [_jsx(ProductStructureCard, { productId: detail.id }), _jsx(ArtikelCompositionCard, { productId: detail.id, floridayId: detail.floriday_id }), _jsx(TrayStickerCard, { productId: detail.id })] }) }), _jsxs(TabsContent, { value: "koppelingen", className: "space-y-4", children: [_jsx(TwijfelKiezen, { productId: detail.id, onGekozen: () => void laad() }), _jsxs(Suspense, { fallback: _jsx(Laden, {}), children: [detail.floriday_id && detail.heeft_koppeling ? (_jsx(FloridayInfoCard, { floridayTradeItemId: detail.floriday_id, local: { name: detail.naam, articleNumber: detail.artikelnummer, gtin: detail.velden.barcode ?? null } })) : (_jsx(Card, { className: "p-4 text-sm text-muted-foreground", children: detail.heeft_koppeling ? (detail.floriday_verwijderd_at ? "Dit artikel is in Floriday verwijderd." : "Dit artikel is niet aan Floriday gekoppeld.") : "Er is geen Floriday-koppeling in deze omgeving; het artikel werkt volledig lokaal." })), _jsx(ProductLinkCard, { tradeItemKey: detail.voorraad_sleutel, productName: detail.naam })] })] }), tabs.includes("floriday") && (_jsx(TabsContent, { value: "floriday", children: _jsx(Suspense, { fallback: _jsx(Laden, {}), children: _jsx(ArtikelWizard, { productId: detail.id, resumeJobId: resumeJobId, embedded: true }) }) }))] }) }), _jsx(AanpassenDialog, { rij: aanpassen ? rij : null, onClose: () => setAanpassen(false), onDone: () => { setAanpassen(false); void laad(); } }), _jsx(AfboekenDialog, { rij: afboeken ? rij : null, connectionId: null, onClose: () => setAfboeken(false), onDone: () => { setAfboeken(false); void laad(); } }), _jsx(Dialog, { open: Boolean(conflicten && conflicten.length), onOpenChange: (o) => !o && setConflicten(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Iemand anders heeft dit ook gewijzigd" }), _jsx(DialogDescription, { children: "Er is niets opgeslagen. Kies per veld welke waarde blijft." })] }), _jsx("div", { className: "space-y-3", children: (conflicten ?? []).map((c) => (_jsxs("div", { className: "rounded-md border p-3 text-sm space-y-2", children: [_jsx("div", { className: "font-medium", children: VELD_LABEL[c.veld] ?? VOORRAAD_LABEL[c.veld] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Jouw wijziging" }), toon(c.jouw)] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Hun wijziging" }), toon(c.hun)] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", onClick: () => houdJouw(c), children: "Mijn waarde houden" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => neemHunOver(c), children: "Hun waarde overnemen" })] })] }, c.veld))) })] }) }), _jsx(Dialog, { open: archief !== null, onOpenChange: (o) => !o && setArchief(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Artikel archiveren" }), _jsx(DialogDescription, { children: "Het artikel wordt nooit verwijderd. Je kunt het later terugzetten." })] }), archief?.waarschuwing && (_jsxs("div", { className: "flex gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm", children: [_jsx(AlertTriangle, { className: "h-4 w-4 shrink-0 text-destructive" }), _jsxs("span", { children: ["Let op: er ", archief.waarschuwing.open_orders === 1 ? "is 1 open order" : `zijn ${archief.waarschuwing.open_orders} open orders`, " en ", aantal(archief.waarschuwing.gereserveerd), " gereserveerd. Die blijven bestaan."] })] })), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("label", { className: "flex gap-2 items-start", children: [_jsx("input", { type: "radio", checked: archiefKeuze === "hier", onChange: () => setArchiefKeuze("hier") }), _jsxs("span", { children: [_jsx("strong", { children: detail.floriday_id && detail.heeft_koppeling ? "Alleen hier." : "Archiveren." }), " ", detail.floriday_id && detail.heeft_koppeling && !detail.floriday_verwijderd_at
+                                                    ? "Floriday blijft ongewijzigd: het artikel blijft op Floriday te koop."
+                                                    : "Het artikel verdwijnt uit de voorraadlijst en de tellers."] })] }), detail.floriday_id && detail.heeft_koppeling && !detail.floriday_verwijderd_at && (_jsxs("label", { className: "flex gap-2 items-start", children: [_jsx("input", { type: "radio", checked: archiefKeuze === "floriday", onChange: () => setArchiefKeuze("floriday") }), _jsxs("span", { children: [_jsx("strong", { children: "Ook in Floriday." }), " De voorraad op Floriday wordt 0."] })] })), archiefKeuze === "floriday" && (_jsxs("div", { className: "rounded-md border p-3 space-y-1", children: [_jsx("div", { className: "font-medium", children: "Overzicht vooraf" }), _jsx("div", { children: "Voorraad op Floriday: wordt 0 (niet meer te koop)." }), _jsxs("div", { children: ["Je eigen voorraad blijft ", aantal(detail.liggend), " liggend."] }), _jsx("div", { className: "text-muted-foreground", children: detail.floriday_stuurt
+                                                ? "Gaat via de gewone Floriday-wachtrij, met de bestaande schrijfstop."
+                                                : "Floriday is voor dit artikel leidend: er wordt niets verstuurd tot het systeem de voorraad stuurt." })] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => setArchief(null), children: "Annuleren" }), _jsx(Button, { variant: "destructive", disabled: bezig, onClick: () => archiveren(Boolean(archief?.waarschuwing)), children: archief?.waarschuwing ? "Toch archiveren" : "Archiveren" })] })] }) })] }));
+}

package/dist-lib/components/voorraad/artikel/TwijfelKiezen.d.ts

@@ -0,0 +1,7 @@
+/** Twijfelgevallen van de automatische koppeling, met "Dit artikel kiezen". Geen Floriday-schrijfactie. */
+export declare function TwijfelKiezen({ productId, floridayId, onGekozen }: {
+    productId?: string;
+    floridayId?: string;
+    onGekozen?: () => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=TwijfelKiezen.d.ts.map

package/dist-lib/components/voorraad/artikel/TwijfelKiezen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwijfelKiezen.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/artikel/TwijfelKiezen.tsx"],"names":[],"mappings":"AASA,2GAA2G;AAC3G,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,sCAiEtI"}

package/dist-lib/components/voorraad/artikel/TwijfelKiezen.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Button, Card, toast } from "@flowselections/core";
+import { Loader2 } from "lucide-react";
+import { supabase } from "../../../integrations/supabase/client.js";
+import { dbFoutTekst } from "../../../lib/db-error-message.js";
+/** Twijfelgevallen van de automatische koppeling, met "Dit artikel kiezen". Geen Floriday-schrijfactie. */
+export function TwijfelKiezen({ productId, floridayId, onGekozen }) {
+    const [lijst, setLijst] = useState(null);
+    const [bezig, setBezig] = useState(null);
+    const laad = useCallback(async () => {
+        const { data, error } = await supabase.rpc("voorraad_twijfel_lijst", { p_product_id: productId ?? null, p_floriday_id: floridayId ?? null });
+        if (error) {
+            toast.error(dbFoutTekst(error));
+            setLijst([]);
+            return;
+        }
+        setLijst(data ?? []);
+    }, [productId, floridayId]);
+    useEffect(() => { void laad(); }, [laad]);
+    async function kies(t, k) {
+        if (!window.confirm(`Floriday-product "${t.naam ?? t.floriday_id}" koppelen aan "${k.naam}"? Er gaat niets naar Floriday.`))
+            return;
+        setBezig(k.id);
+        const { error } = await supabase.rpc("voorraad_twijfel_kiezen", { p_floriday_id: t.floriday_id, p_product_id: k.id });
+        setBezig(null);
+        if (error) {
+            toast.error(dbFoutTekst(error));
+            return;
+        }
+        toast.success(`Gekoppeld aan ${k.naam}.`);
+        await laad();
+        onGekozen?.();
+    }
+    async function nieuw(t) {
+        if (!window.confirm(`Een nieuw eigen artikel maken uit Floriday-product "${t.naam ?? t.floriday_id}"? Er gaat niets naar Floriday.`))
+            return;
+        setBezig(`nieuw:${t.floriday_id}`);
+        const { error } = await supabase.rpc("voorraad_twijfel_nieuw_artikel", { p_floriday_id: t.floriday_id });
+        setBezig(null);
+        if (error) {
+            toast.error(dbFoutTekst(error));
+            return;
+        }
+        toast.success("Nieuw artikel aangemaakt.");
+        await laad();
+        onGekozen?.();
+    }
+    if (lijst === null)
+        return _jsxs("div", { className: "flex items-center gap-2 p-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Laden\u2026"] });
+    if (lijst.length === 0)
+        return null;
+    return (_jsxs(Card, { className: "p-4 space-y-3", children: [_jsx("div", { className: "font-medium", children: "Twijfel bij automatisch koppelen" }), lijst.map((t) => (_jsxs("div", { className: "rounded-md border p-3 text-sm space-y-2", children: [_jsxs("div", { children: [_jsx("strong", { children: t.naam ?? "Floriday-product" }), " \u00B7 ", _jsx("span", { className: "text-muted-foreground", children: t.reden })] }), _jsx("ul", { className: "space-y-1", children: t.kandidaten.map((k) => (_jsxs("li", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("span", { children: [k.naam, k.artikelnummer && _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", k.artikelnummer] }), k.floriday_id && _jsx("span", { className: "text-muted-foreground", children: " \u00B7 al gekoppeld" }), k.gearchiveerd && _jsx("span", { className: "text-muted-foreground", children: " \u00B7 gearchiveerd" })] }), _jsxs(Button, { size: "sm", variant: "outline", disabled: bezig !== null || Boolean(k.floriday_id), onClick: () => kies(t, k), children: [bezig === k.id && _jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }), "Dit artikel kiezen"] })] }, k.id))) }), _jsx("div", { className: "flex justify-end border-t pt-2", children: _jsxs(Button, { size: "sm", variant: "secondary", disabled: bezig !== null, onClick: () => nieuw(t), children: [bezig === `nieuw:${t.floriday_id}` && _jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }), "Nieuw artikel aanmaken"] }) })] }, t.floriday_id)))] }));
+}

package/dist-lib/components/voorraad/artikel/opslaan-context.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Onderdelen van de artikelpagina die meedoen met de ene knop "Opslaan".
+ * Een onderdeel meldt of het niet-opgeslagen wijzigingen heeft en levert een
+ * opslagfunctie met eigen conflictcontrole. Er zijn geen eigen opslagknoppen.
+ */
+export interface OpslagUitkomst {
+    ok: boolean;
+    /** Tekst bij een conflict of fout, in gewone taal. */
+    melding?: string;
+}
+export interface OpslagDeelnemer {
+    vuil: boolean;
+    opslaan: () => Promise<OpslagUitkomst>;
+}
+export interface OpslagRegister {
+    meld: (sleutel: string, d: OpslagDeelnemer | null) => void;
+}
+export declare const OpslaanContext: import("react").Context<OpslagRegister | null>;
+/** Registreert een onderdeel bij de opslagknop van de pagina (buiten de pagina: geen effect). */
+export declare function useOpslagDeelnemer(sleutel: string, vuil: boolean, opslaan: () => Promise<OpslagUitkomst>): boolean;
+//# sourceMappingURL=opslaan-context.d.ts.map

package/dist-lib/components/voorraad/artikel/opslaan-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"opslaan-context.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/artikel/opslaan-context.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,OAAO,CAAC;IACZ,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,OAAO,CAAC,cAAc,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,cAAc,gDAA6C,CAAC;AAEzE,iGAAiG;AACjG,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,cAAc,CAAC,WAUxG"}

package/dist-lib/components/voorraad/artikel/opslaan-context.js

@@ -0,0 +1,15 @@
+import { createContext, useContext, useEffect, useRef } from "react";
+export const OpslaanContext = createContext(null);
+/** Registreert een onderdeel bij de opslagknop van de pagina (buiten de pagina: geen effect). */
+export function useOpslagDeelnemer(sleutel, vuil, opslaan) {
+    const reg = useContext(OpslaanContext);
+    const fn = useRef(opslaan);
+    fn.current = opslaan;
+    useEffect(() => {
+        if (!reg)
+            return;
+        reg.meld(sleutel, { vuil, opslaan: () => fn.current() });
+    }, [reg, sleutel, vuil]);
+    useEffect(() => () => reg?.meld(sleutel, null), [reg, sleutel]);
+    return Boolean(reg);
+}

package/dist-lib/components/voorraad/lijst/ImporteerKnop.d.ts

@@ -0,0 +1,5 @@
+export declare function ImporteerKnop({ connectionId, onImported }: {
+    connectionId: string | null;
+    onImported: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ImporteerKnop.d.ts.map

package/dist-lib/components/voorraad/lijst/ImporteerKnop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImporteerKnop.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/lijst/ImporteerKnop.tsx"],"names":[],"mappings":"AAwBA,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE;IAAE,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,+BAmBlH"}

package/dist-lib/components/voorraad/lijst/ImporteerKnop.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@flowselections/core";
+import { Upload } from "lucide-react";
+import { useVoorraadData } from "../../../hooks/useVoorraadData.js";
+import { StockBulkButtons } from "../StockBulkButtons.js";
+/** Artikelgegevens voor importeren worden pas geladen als je op "Importeren" klikt. */
+function ImportInhoud({ connectionId, onImported }) {
+    const { items, loading, reload } = useVoorraadData(connectionId);
+    if (loading && items.length === 0)
+        return _jsx("p", { className: "text-sm text-muted-foreground", children: "Artikelen laden\u2026" });
+    return (_jsx("div", { className: "flex flex-wrap gap-2", children: _jsx(StockBulkButtons, { items: items, activeConnectionId: connectionId, onImported: async () => {
+                await reload();
+                onImported();
+            } }) }));
+}
+export function ImporteerKnop({ connectionId, onImported }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), "Importeren"] }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Importeren" }), _jsx(DialogDescription, { children: "Download het sjabloon of kies een bestand. Je krijgt eerst een proefcontrole." })] }), open && _jsx(ImportInhoud, { connectionId: connectionId, onImported: onImported })] }) })] }));
+}

package/dist-lib/components/voorraad/lijst/LijstExportKnop.d.ts

@@ -0,0 +1,6 @@
+import { type LijstVraag } from "../../../hooks/useVoorraadLijst.js";
+/** Excel-export van het huidige filter en de zoekopdracht, in porties van de server (geen limiet). */
+export declare function LijstExportKnop({ vraag }: {
+    vraag: Omit<LijstVraag, "pagina" | "grootte">;
+}): import("react").JSX.Element;
+//# sourceMappingURL=LijstExportKnop.d.ts.map

package/dist-lib/components/voorraad/lijst/LijstExportKnop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LijstExportKnop.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/lijst/LijstExportKnop.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,KAAK,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAGrF,sGAAsG;AACtG,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAA;CAAE,+BAuC3F"}

package/dist-lib/components/voorraad/lijst/LijstExportKnop.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import * as XLSX from "xlsx";
+import { Button, toast } from "@flowselections/core";
+import { Download } from "lucide-react";
+import { haalVoorraadLijst } from "../../../hooks/useVoorraadLijst.js";
+import { allePorties } from "../../../lib/voorraad-lijst.js";
+/** Excel-export van het huidige filter en de zoekopdracht, in porties van de server (geen limiet). */
+export function LijstExportKnop({ vraag }) {
+    const [bezig, setBezig] = useState(null);
+    const exporteer = async () => {
+        setBezig("Bezig…");
+        try {
+            const rijen = await allePorties(async (pagina, grootte) => {
+                const a = await haalVoorraadLijst({ ...vraag, pagina, grootte });
+                setBezig(`${Math.min(pagina * grootte, a.totaal)} / ${a.totaal}`);
+                return a;
+            });
+            const ws = XLSX.utils.json_to_sheet(rijen.map((r) => ({
+                Artikelnummer: r.artikelnummer ?? "",
+                Artikel: r.naam,
+                Liggend: r.liggend,
+                Minimum: r.minimum,
+                Gereserveerd: r.gereserveerd,
+                "Vrij beschikbaar": r.vrij,
+                Inkomend: r.inkomend,
+                "Verkoopprijs per stuk": r.prijs ?? "",
+                "Gekoppeld aan Floriday": r.floriday_id ? "ja" : "nee",
+            })));
+            const wb = XLSX.utils.book_new();
+            XLSX.utils.book_append_sheet(wb, ws, "Voorraad");
+            XLSX.writeFile(wb, `voorraad-${new Date().toISOString().slice(0, 10)}.xlsx`);
+            toast.success(`${rijen.length} artikelen geëxporteerd`);
+        }
+        catch (e) {
+            toast.error(`Exporteren mislukt: ${e.message}`);
+        }
+        finally {
+            setBezig(null);
+        }
+    };
+    return (_jsxs(Button, { variant: "outline", size: "sm", onClick: exporteer, disabled: !!bezig, children: [_jsx(Download, { className: "mr-2 h-4 w-4" }), bezig ?? "Exporteren"] }));
+}

package/dist-lib/components/voorraad/lijst/SnelActieDialogen.d.ts

@@ -0,0 +1,16 @@
+import { type LijstRij } from "../../../lib/voorraad-lijst.js";
+/** Controle vóór "Voorraad aanpassen": aantal ≠ 0, reden verplicht, niet onder 0. */
+export declare function aanpassenFout(delta: number, reden: string, liggend: number): string | null;
+/** Directe boeking +/− met reden; los van "Opslaan" zodat een orderafboeking nooit wordt overschreven. */
+export declare function AanpassenDialog({ rij, onClose, onDone }: {
+    rij: LijstRij | null;
+    onClose: () => void;
+    onDone: () => void;
+}): import("react").JSX.Element | null;
+export declare function AfboekenDialog({ rij, connectionId, onClose, onDone, }: {
+    rij: LijstRij | null;
+    connectionId: string | null;
+    onClose: () => void;
+    onDone: () => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=SnelActieDialogen.d.ts.map

package/dist-lib/components/voorraad/lijst/SnelActieDialogen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnelActieDialogen.d.ts","sourceRoot":"","sources":["../../../../src/components/voorraad/lijst/SnelActieDialogen.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAU,KAAK,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEpE,qFAAqF;AACrF,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAK1F;AAED,0GAA0G;AAC1G,wBAAgB,eAAe,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE;IAAE,GAAG,EAAE,QAAQ,GAAG,IAAI,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,sCAyD1H;AAED,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,YAAY,EACZ,OAAO,EACP,MAAM,GACP,EAAE;IACD,GAAG,EAAE,QAAQ,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,sCAwEA"}