@flowselections/floriday-voorraad 1.0.22 → 1.0.26

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

@@ -0,0 +1,12 @@
+interface Props {
+    floridayTradeItemId: string | null;
+    /** Lokale productwaarden om ‘lokaal wijkt af van Floriday’-hints te tonen. */
+    local?: {
+        name?: string | null;
+        articleNumber?: string | null;
+        gtin?: string | null;
+    };
+}
+export declare function FloridayInfoCard({ floridayTradeItemId, local }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=FloridayInfoCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloridayInfoCard.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/FloridayInfoCard.tsx"],"names":[],"mappings":"AAYA,UAAU,KAAK;IACb,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,8EAA8E;IAC9E,KAAK,CAAC,EAAE;QACN,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACrB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;CACH;AA6DD,wBAAgB,gBAAgB,CAAC,EAAE,mBAAmB,EAAE,KAAK,EAAE,EAAE,KAAK,kDAqRrE"}

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

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Card, CardContent, Badge } from "@flowselections/core";
+import { AlertTriangle, ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
+import { supabase } from "../../integrations/supabase/client";
+import { floridayInfoFromCache, LOAD_CARRIER_LABELS, } from "../../lib/floriday-info";
+const floridayLogo = "/flowselections-assets/Voorraad/floriday-logo.png";
+function formatDate(iso) {
+    if (!iso)
+        return "—";
+    try {
+        return new Date(iso).toLocaleString("nl-NL", {
+            dateStyle: "medium",
+            timeStyle: "short",
+        });
+    }
+    catch {
+        return iso;
+    }
+}
+function DiffField({ label, floridayValue, localValue, }) {
+    const fv = floridayValue == null || floridayValue === "" ? "—" : String(floridayValue);
+    const lv = (localValue ?? "").trim();
+    const differs = lv.length > 0 && fv !== "—" && lv !== fv;
+    return (_jsxs("div", { className: "grid grid-cols-[140px_1fr] gap-2 text-sm py-1", children: [_jsx("div", { className: "text-muted-foreground", children: label }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: fv }), differs && (_jsxs("div", { className: "mt-0.5 inline-flex items-center gap-1 text-xs text-amber-700", title: "De lokale waarde wijkt af van Floriday. Puur informatief \u2014 er wordt niets automatisch overschreven.", children: [_jsx(AlertTriangle, { className: "h-3 w-3" }), "lokaal: ", _jsx("span", { className: "font-mono", children: lv })] }))] })] }));
+}
+function Field({ label, value, }) {
+    const v = value == null || value === "" ? "—" : String(value);
+    return (_jsxs("div", { className: "grid grid-cols-[140px_1fr] gap-2 text-sm py-1", children: [_jsx("div", { className: "text-muted-foreground", children: label }), _jsx("div", { className: "font-medium break-words", children: v })] }));
+}
+export function FloridayInfoCard({ floridayTradeItemId, local }) {
+    const [info, setInfo] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [notFound, setNotFound] = useState(false);
+    const [rawOpen, setRawOpen] = useState(false);
+    const [activePhoto, setActivePhoto] = useState(0);
+    useEffect(() => {
+        if (!floridayTradeItemId) {
+            setInfo(null);
+            setNotFound(false);
+            return;
+        }
+        let cancelled = false;
+        setLoading(true);
+        setNotFound(false);
+        (async () => {
+            try {
+                const { data, error } = await supabase
+                    .from("floriday_trade_items_cache")
+                    .select("data,floriday_id")
+                    .eq("floriday_id", floridayTradeItemId)
+                    .maybeSingle();
+                if (cancelled)
+                    return;
+                if (error || !data) {
+                    setInfo(null);
+                    setNotFound(true);
+                    return;
+                }
+                const mapped = floridayInfoFromCache({
+                    ...data.data,
+                    id: data.floriday_id,
+                });
+                setInfo(mapped);
+                setActivePhoto(0);
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [floridayTradeItemId]);
+    if (!floridayTradeItemId)
+        return null;
+    return (_jsx(Card, { className: "overflow-hidden", children: _jsxs(CardContent, { className: "p-4 space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("img", { src: floridayLogo, alt: "Floriday", className: "h-6 w-6 shrink-0" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-semibold", children: "Floriday-informatie" }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Rechtstreeks uit Floriday geladen \u2014 controle-informatie, wordt niet lokaal overschreven." })] }), info?.tradeItemVersion != null && (_jsxs(Badge, { variant: "secondary", className: "text-xs", children: ["v", info.tradeItemVersion] }))] }), loading && (_jsx("div", { className: "text-sm text-muted-foreground", children: "Floriday-info laden\u2026" })), !loading && notFound && (_jsxs("div", { className: "rounded-md border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900", children: ["Geen Floriday-record gevonden voor id", " ", _jsx("code", { className: "font-mono", children: floridayTradeItemId }), ". Wacht op de volgende sync of controleer de connectie."] })), info && (_jsxs(_Fragment, { children: [info.photos.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "rounded-md border overflow-hidden bg-muted/30", children: _jsx("img", { src: info.photos[activePhoto]?.url ?? info.photos[0].url, alt: info.name, className: "w-full max-h-80 object-contain" }) }), info.photos.length > 1 && (_jsx("div", { className: "flex gap-2 flex-wrap", children: info.photos.map((p, i) => (_jsx("button", { type: "button", onClick: () => setActivePhoto(i), className: `h-14 w-14 rounded border overflow-hidden ${i === activePhoto
+                                            ? "ring-2 ring-primary"
+                                            : "opacity-70 hover:opacity-100"}`, "aria-label": `Foto ${i + 1}`, children: _jsx("img", { src: p.url, alt: "", className: "h-full w-full object-cover" }) }, p.url))) }))] })), _jsxs("div", { className: "grid gap-x-8 gap-y-1 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx(DiffField, { label: "Naam", floridayValue: info.name, localValue: local?.name ?? null }), _jsx(DiffField, { label: "Artikelnr", floridayValue: info.supplierArticleCode, localValue: local?.articleNumber ?? null }), _jsx(DiffField, { label: "GTIN", floridayValue: info.articleGtin, localValue: local?.gtin ?? null }), _jsx(Field, { label: "VBN-code", value: info.vbnProductCode }), _jsx(Field, { label: "Referentie", value: info.supplierReference })] }), _jsxs("div", { children: [_jsx(Field, { label: "Botanische naam", value: info.botanicalNames.join(", ") || null }), _jsx(Field, { label: "Land van herkomst", value: info.countryOfOrigin.join(", ") || null }), _jsx(Field, { label: "Seizoensperiode", value: info.seasonalPeriods.length > 0
+                                                ? info.seasonalPeriods
+                                                    .map((s) => `wk ${s.startWeek}–${s.endWeek}`)
+                                                    .join(", ")
+                                                : null }), _jsx(Field, { label: "Verborgen in catalogus", value: info.isHiddenInCatalog ? "Ja" : "Nee" }), _jsx(Field, { label: "Laatst gewijzigd", value: formatDate(info.lastModifiedDateTime) })] })] }), info.characteristics.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground mb-2", children: "Kenmerken" }), _jsx("div", { className: "rounded-md border overflow-hidden", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50 text-left", children: _jsxs("tr", { children: [_jsx("th", { className: "p-2 font-medium", children: "VBN-code" }), _jsx("th", { className: "p-2 font-medium", children: "Waarde" })] }) }), _jsx("tbody", { children: info.characteristics.map((c) => (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "p-2 font-mono text-xs", children: c.vbnCode }), _jsx("td", { className: "p-2 font-mono text-xs", children: c.vbnValueCode })] }, c.vbnCode))) })] }) })] })), info.packingConfigurations.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground mb-2", children: "Beladingen (Floriday)" }), _jsx("div", { className: "rounded-md border overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50 text-left", children: _jsxs("tr", { children: [_jsx("th", { className: "p-2 font-medium", children: "Ladingdrager" }), _jsx("th", { className: "p-2 font-medium", children: "Verpakking" }), _jsx("th", { className: "p-2 text-right font-medium", children: "Stuks/verp." }), _jsx("th", { className: "p-2 text-right font-medium", children: "Verp./laag" }), _jsx("th", { className: "p-2 text-right font-medium", children: "Lagen" }), _jsx("th", { className: "p-2 font-medium", children: "Primair" })] }) }), _jsx("tbody", { children: info.packingConfigurations.map((p, i) => (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "p-2", children: LOAD_CARRIER_LABELS[p.loadCarrier] ?? p.loadCarrier }), _jsx("td", { className: "p-2 font-mono text-xs", children: p.packagingCode ?? p.customPackageId ?? "—" }), _jsx("td", { className: "p-2 text-right tabular-nums", children: p.piecesPerPackage }), _jsx("td", { className: "p-2 text-right tabular-nums", children: p.packagesPerLayer }), _jsx("td", { className: "p-2 text-right tabular-nums", children: p.layersPerLoadCarrier }), _jsx("td", { className: "p-2", children: p.primary ? (_jsx(Badge, { className: "bg-emerald-500/15 text-emerald-700 border-emerald-500/30", children: "Ja" })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: "nee" })) })] }, i))) })] }) })] })), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setRawOpen((o) => !o), className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground", children: [rawOpen ? (_jsx(ChevronDown, { className: "h-3 w-3" })) : (_jsx(ChevronRight, { className: "h-3 w-3" })), "Alles wat Floriday teruggeeft (raw)"] }), rawOpen && (_jsx("pre", { className: "mt-2 max-h-96 overflow-auto rounded-md border bg-muted/30 p-3 text-[11px] leading-tight font-mono", children: JSON.stringify(info.raw, null, 2) }))] }), _jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [_jsx(ExternalLink, { className: "h-3 w-3" }), "Floriday trade item ID:", " ", _jsx("code", { className: "font-mono", children: info.id })] })] }))] }) }));
+}

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

@@ -0,0 +1,10 @@
+import type { PackingConfigurationInput } from "../../lib/floriday-payload";
+interface Props {
+    productId: string | null;
+    floridayId: string | null;
+    packings: PackingConfigurationInput[];
+    packagingTypeLabel: (code: string) => string;
+}
+export declare function StepSamenstelling({ productId, floridayId, packings, packagingTypeLabel, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StepSamenstelling.d.ts.map

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

@@ -0,0 +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;AAUD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,UAAU,EACV,QAAQ,EACR,kBAAkB,GACnB,EAAE,KAAK,2CA+ZP"}

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

@@ -0,0 +1,333 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button, Input, Popover, PopoverContent, PopoverTrigger, toast, } from "@flowselections/core";
+import { Loader2, Package, Plus, Search, Trash2 } from "lucide-react";
+import { supabase } from "../../integrations/supabase/client";
+function newRowId() {
+    return `new:${typeof crypto !== "undefined" && "randomUUID" in crypto
+        ? crypto.randomUUID()
+        : Date.now().toString(36) + Math.random().toString(36).slice(2)}`;
+}
+export function StepSamenstelling({ productId, floridayId, packings, packagingTypeLabel, }) {
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [rows, setRows] = useState([]);
+    const [names, setNames] = useState(new Map());
+    const [activeTab, setActiveTab] = useState("__base__");
+    const hasParent = Boolean(productId || floridayId);
+    const load = useCallback(async () => {
+        if (!hasParent) {
+            setRows([]);
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        let q = supabase
+            .from("product_bom_items")
+            .select("id,packing_configuration_id,component_product_id,component_trade_item_floriday_id,quantity,sort_order")
+            .order("sort_order", { ascending: true });
+        if (productId && floridayId) {
+            q = q.or(`parent_product_id.eq.${productId},parent_trade_item_floriday_id.eq.${floridayId}`);
+        }
+        else if (productId) {
+            q = q.eq("parent_product_id", productId);
+        }
+        else if (floridayId) {
+            q = q.eq("parent_trade_item_floriday_id", floridayId);
+        }
+        const { data, error } = await q;
+        if (error) {
+            toast.error("Kon samenstelling niet laden");
+            setRows([]);
+            setLoading(false);
+            return;
+        }
+        const list = (data ?? []).map((r) => ({
+            id: r.id,
+            packing_configuration_id: r.packing_configuration_id ?? null,
+            component_product_id: r.component_product_id ?? null,
+            component_trade_item_floriday_id: r.component_trade_item_floriday_id ?? null,
+            quantity: Number(r.quantity ?? 1),
+            sort_order: Number(r.sort_order ?? 0),
+        }));
+        setRows(list);
+        await resolveNames(list);
+        setLoading(false);
+    }, [productId, floridayId, hasParent]);
+    const resolveNames = useCallback(async (list) => {
+        const prodIds = Array.from(new Set(list.map((r) => r.component_product_id).filter((v) => !!v)));
+        const flIds = Array.from(new Set(list
+            .map((r) => r.component_trade_item_floriday_id)
+            .filter((v) => !!v)));
+        const map = new Map();
+        if (prodIds.length) {
+            const { data } = await supabase
+                .from("products")
+                .select("id,product,barcode,article_number")
+                .in("id", prodIds);
+            (data ?? []).forEach((p) => {
+                map.set(`product:${p.id}`, {
+                    kind: "product",
+                    id: p.id,
+                    name: String(p.product ?? p.id),
+                    code: p.barcode ? String(p.barcode) : p.article_number ? String(p.article_number) : undefined,
+                });
+            });
+        }
+        if (flIds.length) {
+            const { data } = await supabase
+                .from("floriday_trade_items_cache")
+                .select("floriday_id,data")
+                .in("floriday_id", flIds);
+            (data ?? []).forEach((n) => {
+                const nm = n.data?.tradeItemName?.nl ??
+                    n.data?.tradeItemName?.en ??
+                    Object.values(n.data?.tradeItemName ?? {})[0] ??
+                    n.floriday_id;
+                const code = n.data?.supplierArticleCode ??
+                    n.data?.articleGtin ??
+                    undefined;
+                map.set(`floriday:${n.floriday_id}`, {
+                    kind: "floriday",
+                    id: n.floriday_id,
+                    name: String(nm),
+                    code: code ? String(code) : undefined,
+                });
+            });
+        }
+        setNames((prev) => {
+            const merged = new Map(prev);
+            map.forEach((v, k) => merged.set(k, v));
+            return merged;
+        });
+    }, []);
+    useEffect(() => {
+        load();
+    }, [load]);
+    // Tabs = base + one per current packing.
+    const tabs = useMemo(() => [
+        { key: "__base__", label: "Basissamenstelling" },
+        ...packings.map((p, i) => ({
+            key: p.id,
+            label: `Belading ${i + 1}${p.isPrimary ? " (primair)" : ""}${p.packagingType ? " · " + packagingTypeLabel(p.packagingType) : ""}`,
+        })),
+    ], [packings, packagingTypeLabel]);
+    // If the active tab no longer exists (packing removed), fall back to base.
+    useEffect(() => {
+        if (!tabs.some((t) => t.key === activeTab))
+            setActiveTab("__base__");
+    }, [tabs, activeTab]);
+    const currentPackingId = activeTab === "__base__" ? null : activeTab;
+    const currentRows = rows.filter((r) => r.packing_configuration_id === currentPackingId);
+    const baseRows = rows.filter((r) => r.packing_configuration_id === null);
+    const addRow = (opt) => {
+        const sortOrder = currentRows.length;
+        setRows((prev) => [
+            ...prev,
+            {
+                id: newRowId(),
+                packing_configuration_id: currentPackingId,
+                component_product_id: opt.kind === "product" ? opt.id : null,
+                component_trade_item_floriday_id: opt.kind === "floriday" ? opt.id : null,
+                quantity: 1,
+                sort_order: sortOrder,
+                _new: true,
+                _dirty: true,
+            },
+        ]);
+        setNames((prev) => {
+            const m = new Map(prev);
+            m.set(`${opt.kind}:${opt.id}`, opt);
+            return m;
+        });
+    };
+    const updateRow = (id, patch) => {
+        setRows((prev) => prev.map((r) => (r.id === id ? { ...r, ...patch, _dirty: true } : r)));
+    };
+    const removeRow = async (id) => {
+        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;
+            }
+        }
+        setRows((prev) => prev.filter((r) => r.id !== id));
+    };
+    const saveAll = async () => {
+        if (!hasParent) {
+            toast.error("Sla het artikel eerst op voordat je een samenstelling toevoegt.");
+            return;
+        }
+        const dirty = rows.filter((r) => r._dirty);
+        if (dirty.length === 0)
+            return;
+        setSaving(true);
+        try {
+            const inserts = dirty
+                .filter((r) => r._new)
+                .map((r) => ({
+                parent_product_id: productId,
+                parent_trade_item_floriday_id: floridayId,
+                packing_configuration_id: r.packing_configuration_id,
+                component_product_id: r.component_product_id,
+                component_trade_item_floriday_id: r.component_trade_item_floriday_id,
+                quantity: r.quantity,
+                unit: "PIECE",
+                sort_order: r.sort_order,
+            }));
+            const updates = dirty.filter((r) => !r._new);
+            if (inserts.length) {
+                const { data, error } = await supabase
+                    .from("product_bom_items")
+                    .insert(inserts)
+                    .select("id");
+                if (error)
+                    throw error;
+                // Map new ids back onto local rows (align by index of the "new" rows we sent)
+                const newIds = (data ?? []).map((d) => d.id);
+                const newLocal = dirty.filter((r) => r._new);
+                setRows((prev) => {
+                    const map = new Map();
+                    newLocal.forEach((r, i) => {
+                        if (newIds[i])
+                            map.set(r.id, newIds[i]);
+                    });
+                    return prev.map((r) => map.has(r.id)
+                        ? { ...r, id: map.get(r.id), _new: false, _dirty: false }
+                        : r);
+                });
+            }
+            for (const r of updates) {
+                const { error } = await supabase
+                    .from("product_bom_items")
+                    .update({
+                    quantity: r.quantity,
+                    sort_order: r.sort_order,
+                })
+                    .eq("id", r.id);
+                if (error)
+                    throw error;
+            }
+            setRows((prev) => prev.map((r) => ({ ...r, _dirty: false })));
+            toast.success("Samenstelling opgeslagen");
+        }
+        catch (e) {
+            toast.error("Opslaan mislukt: " + e.message);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const hasUnsaved = rows.some((r) => r._dirty);
+    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." }));
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "rounded-md border bg-muted/30 p-3 text-xs text-muted-foreground", children: "Configureer een basissamenstelling en optioneel afwijkende onderdelen per belading. Rijen op de belading-tabbladen gelden bovenop of in plaats van de basissamenstelling." }), _jsx("div", { className: "flex flex-wrap gap-1 border-b", children: tabs.map((t) => {
+                    const active = t.key === activeTab;
+                    const count = rows.filter((r) => r.packing_configuration_id === (t.key === "__base__" ? null : t.key)).length;
+                    return (_jsxs("button", { type: "button", onClick: () => setActiveTab(t.key), className: `-mb-px border-b-2 px-3 py-2 text-sm ${active
+                            ? "border-primary text-foreground font-medium"
+                            : "border-transparent text-muted-foreground hover:text-foreground"}`, children: [t.label, _jsx("span", { className: "ml-2 rounded bg-muted px-1.5 py-0.5 text-xs", children: count })] }, t.key));
+                }) }), currentPackingId && baseRows.length > 0 && (_jsxs("div", { className: "rounded-md border bg-muted/20 p-3", children: [_jsx("div", { className: "mb-2 text-xs font-medium text-muted-foreground", children: "Basissamenstelling (referentie)" }), _jsx("ul", { className: "divide-y", children: baseRows.map((r) => {
+                            const key = r.component_product_id
+                                ? `product:${r.component_product_id}`
+                                : `floriday:${r.component_trade_item_floriday_id}`;
+                            const info = names.get(key);
+                            return (_jsxs("li", { className: "flex items-center gap-3 py-1.5 text-sm", children: [_jsx(Package, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0 truncate", children: [info?.name ?? key, info?.code && (_jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: info.code }))] }), _jsxs("div", { className: "text-xs tabular-nums text-muted-foreground", children: [r.quantity, "\u00D7"] })] }, r.id));
+                        }) })] })), loading ? (_jsxs("div", { className: "flex items-center gap-2 py-6 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Samenstelling laden\u2026"] })) : currentRows.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-6 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: currentPackingId
+                        ? "Nog geen afwijkende onderdelen voor deze belading."
+                        : "Nog geen onderdelen in de basissamenstelling." }) })) : (_jsx("div", { className: "overflow-hidden rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50 text-left text-xs uppercase text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 font-medium", children: "Onderdeel" }), _jsx("th", { className: "px-3 py-2 font-medium w-32", children: "Aantal per verpakking" }), _jsx("th", { className: "px-3 py-2" })] }) }), _jsx("tbody", { className: "divide-y", children: currentRows.map((r) => {
+                                const key = r.component_product_id
+                                    ? `product:${r.component_product_id}`
+                                    : `floriday:${r.component_trade_item_floriday_id}`;
+                                const info = names.get(key);
+                                return (_jsxs("tr", { children: [_jsx("td", { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("div", { className: "h-8 w-8 rounded bg-muted flex items-center justify-center shrink-0", children: _jsx(Package, { className: "h-4 w-4 text-muted-foreground" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium truncate", children: info?.name ?? key }), info?.code && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: info.code }))] })] }) }), _jsx("td", { className: "px-3 py-2", children: _jsx(Input, { type: "number", inputMode: "decimal", min: 0, step: "0.01", value: r.quantity, onChange: (e) => updateRow(r.id, { quantity: Number(e.target.value) }), className: "h-8 w-24" }) }), _jsx("td", { className: "px-3 py-2 text-right", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeRow(r.id), children: _jsx(Trash2, { className: "h-4 w-4" }) }) })] }, r.id));
+                            }) })] }) })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(ComponentPicker, { excludeKeys: new Set(currentRows.map((r) => r.component_product_id
+                            ? `product:${r.component_product_id}`
+                            : `floriday:${r.component_trade_item_floriday_id}`)), onPick: addRow }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [hasUnsaved && (_jsx("span", { className: "text-xs text-amber-700", children: "Niet-opgeslagen wijzigingen" })), _jsxs(Button, { type: "button", size: "sm", onClick: saveAll, disabled: !hasUnsaved || saving, children: [saving && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Opslaan"] })] })] })] }));
+}
+// ============================================================
+// Component picker
+// ============================================================
+function ComponentPicker({ onPick, excludeKeys, }) {
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [results, setResults] = useState([]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const q = query.trim();
+        let cancelled = false;
+        setLoading(true);
+        const timer = setTimeout(async () => {
+            try {
+                const [prodRes, flRes] = await Promise.all([
+                    q.length > 0
+                        ? supabase
+                            .from("products")
+                            .select("id,product,barcode,article_number")
+                            .or(`product.ilike.%${q}%,barcode.ilike.%${q}%,article_number.ilike.%${q}%`)
+                            .limit(25)
+                        : supabase
+                            .from("products")
+                            .select("id,product,barcode,article_number")
+                            .order("updated_at", { ascending: false })
+                            .limit(15),
+                    supabase
+                        .from("floriday_trade_items_cache")
+                        .select("floriday_id,data")
+                        .eq("is_deleted", false)
+                        .limit(200),
+                ]);
+                if (cancelled)
+                    return;
+                const prodOpts = (prodRes.data ?? []).map((p) => ({
+                    kind: "product",
+                    id: p.id,
+                    name: String(p.product ?? p.id),
+                    code: p.barcode
+                        ? String(p.barcode)
+                        : p.article_number
+                            ? String(p.article_number)
+                            : undefined,
+                }));
+                const flOptsAll = (flRes.data ?? []).map((n) => {
+                    const nm = n.data?.tradeItemName?.nl ??
+                        n.data?.tradeItemName?.en ??
+                        Object.values(n.data?.tradeItemName ?? {})[0] ??
+                        n.floriday_id;
+                    const code = n.data?.supplierArticleCode ?? n.data?.articleGtin ?? undefined;
+                    return {
+                        kind: "floriday",
+                        id: n.floriday_id,
+                        name: String(nm),
+                        code: code ? String(code) : undefined,
+                    };
+                });
+                const flOpts = q.length
+                    ? flOptsAll.filter((o) => o.name.toLowerCase().includes(q.toLowerCase()) ||
+                        (o.code ?? "").toLowerCase().includes(q.toLowerCase()))
+                    : flOptsAll.slice(0, 15);
+                setResults([...prodOpts, ...flOpts].filter((o) => !excludeKeys.has(`${o.kind}:${o.id}`)));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        }, 200);
+        return () => {
+            cancelled = true;
+            clearTimeout(timer);
+        };
+    }, [open, query, excludeKeys]);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Onderdeel toevoegen"] }) }), _jsxs(PopoverContent, { className: "w-96 p-0", align: "start", children: [_jsx("div", { className: "border-b p-2", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { autoFocus: true, placeholder: "Zoek artikel of Floriday-item\u2026", value: query, onChange: (e) => setQuery(e.target.value), className: "h-8 pl-8" })] }) }), _jsx("div", { className: "max-h-80 overflow-y-auto", children: loading ? (_jsxs("div", { className: "flex items-center gap-2 p-3 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Zoeken\u2026"] })) : results.length === 0 ? (_jsx("div", { className: "p-3 text-sm text-muted-foreground", children: "Geen resultaten." })) : (_jsx("ul", { className: "divide-y", children: results.map((r) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-muted", onClick: () => {
+                                        onPick(r);
+                                        setOpen(false);
+                                        setQuery("");
+                                    }, children: [_jsx(Package, { className: "h-4 w-4 text-muted-foreground shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: r.name }), _jsxs("div", { className: "truncate text-xs text-muted-foreground", children: [r.kind === "product" ? "Lokaal artikel" : "Floriday", " \u00B7", " ", r.code ?? r.id] })] })] }) }, `${r.kind}:${r.id}`))) })) })] })] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"VoorraadPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/VoorraadPage.tsx"],"names":[],"mappings":"AA6EA,wBAAgB,YAAY,4CAiM3B"}
+{"version":3,"file":"VoorraadPage.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/VoorraadPage.tsx"],"names":[],"mappings":"AA4FA,wBAAgB,YAAY,4CAkO3B"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Link } from "@tanstack/react-router";
-import { Button, Card, Input } from "@flowselections/core";
+import { Button, Card, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
 import { AlertTriangle, CheckCircle2, FileText, PackageX, Plus, Search, } from "lucide-react";
 import { useFloridayConnection } from "../../hooks/useFloridayConnection";
 import { useVoorraadData } from "../../hooks/useVoorraadData";
@@ -9,6 +9,9 @@ import { ExcelExportButton } from "./ExcelExportButton";
 import { StockBulkButtons } from "./StockBulkButtons";
 import { VoorraadTable } from "./VoorraadTable";
 import { VoorraadPagination } from "./VoorraadPagination";
+function isLinkedToFloriday(i) {
+    return Boolean(i.floridayId) || i.source === "published";
+}
 function toneClasses(tone) {
     switch (tone) {
         case "emerald":
@@ -34,6 +37,8 @@ export function VoorraadPage() {
     const { items, loading, error, reload } = useVoorraadData(activeId);
     const [search, setSearch] = useState("");
     const [stockFilter, setStockFilter] = useState("all");
+    const [floridayFilter, setFloridayFilter] = useState("all");
+    const [typeFilter, setTypeFilter] = useState("all");
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(25);
     const counts = useMemo(() => {
@@ -62,12 +67,18 @@ export function VoorraadPage() {
             if (stockFilter === "below_min" &&
                 !((i.minQuantity ?? 0) > 0 && avail < i.minQuantity))
                 return false;
+            if (floridayFilter === "linked" && !isLinkedToFloriday(i))
+                return false;
+            if (floridayFilter === "unlinked" && isLinkedToFloriday(i))
+                return false;
+            if (typeFilter !== "all" && (i.itemType ?? "artikel") !== typeFilter)
+                return false;
             if (!q)
                 return true;
             return (i.name.toLowerCase().includes(q) ||
                 (i.articleNumber ?? "").toLowerCase().includes(q));
         });
-    }, [items, search, stockFilter]);
+    }, [items, search, stockFilter, floridayFilter, typeFilter]);
     const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
     useEffect(() => {
         if (page > totalPages)
@@ -86,5 +97,5 @@ export function VoorraadPage() {
                             return (_jsxs("button", { type: "button", onClick: () => setStockFilter(t.id), className: `relative py-3 px-3 text-sm font-medium whitespace-nowrap transition-colors ${active
                                     ? "text-foreground"
                                     : "text-muted-foreground hover:text-foreground"}`, children: [t.label, _jsx("span", { className: `ml-2 text-xs ${active ? "text-primary" : "text-muted-foreground/70"}`, children: t.count }), active && (_jsx("span", { className: "absolute left-2 right-2 -bottom-px h-0.5 bg-primary rounded-full" }))] }, t.id));
-                        }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 p-4 border-b", children: [_jsxs("div", { className: "relative flex-1 min-w-[220px] max-w-md", children: [_jsx(Search, { className: "w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoek op product of artikelnummer...", className: "pl-9", value: search, onChange: (e) => setSearch(e.target.value) })] }), _jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [_jsx(ExcelExportButton, { items: filtered }), _jsx(StockBulkButtons, { items: items, activeConnectionId: activeId, onImported: reload })] })] }), _jsx("div", { className: "overflow-x-auto", children: _jsx(VoorraadTable, { items: paged, loading: loading }) }), _jsx(VoorraadPagination, { total: filtered.length, page: page, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize })] })] }));
+                        }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 p-4 border-b", children: [_jsxs("div", { className: "relative flex-1 min-w-[220px] max-w-md", children: [_jsx(Search, { className: "w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoek op product of artikelnummer...", className: "pl-9", value: search, onChange: (e) => setSearch(e.target.value) })] }), _jsxs(Select, { value: floridayFilter, onValueChange: (v) => setFloridayFilter(v), children: [_jsx(SelectTrigger, { className: "h-9 w-[190px]", children: _jsx(SelectValue, { placeholder: "Floriday" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle (Floriday)" }), _jsx(SelectItem, { value: "linked", children: "Gekoppeld aan Floriday" }), _jsx(SelectItem, { value: "unlinked", children: "Niet gekoppeld" })] })] }), _jsxs(Select, { value: typeFilter, onValueChange: (v) => setTypeFilter(v), children: [_jsx(SelectTrigger, { className: "h-9 w-[170px]", children: _jsx(SelectValue, { placeholder: "Type" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle types" }), _jsx(SelectItem, { value: "artikel", children: "Artikel" }), _jsx(SelectItem, { value: "productgroep", children: "Productgroep" }), _jsx(SelectItem, { value: "samenstelling", children: "Samenstelling" })] })] }), _jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [_jsx(ExcelExportButton, { items: filtered }), _jsx(StockBulkButtons, { items: items, activeConnectionId: activeId, onImported: reload })] })] }), _jsx("div", { className: "overflow-x-auto", children: _jsx(VoorraadTable, { items: paged, loading: loading }) }), _jsx(VoorraadPagination, { total: filtered.length, page: page, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"VoorraadTable.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/VoorraadTable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAY3D,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,2CAmHA"}
+{"version":3,"file":"VoorraadTable.d.ts","sourceRoot":"","sources":["../../../src/components/voorraad/VoorraadTable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAY3D,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,2CA6IA"}

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

@@ -27,6 +27,8 @@ export function VoorraadTable({ items, loading, }) {
                             if (linkId)
                                 navigate({ to: "/voorraad/$id", params: { id: linkId } });
                         };
+                        const floriday = item.floriday ?? null;
+                        const thumbUrl = floriday?.photoUrl || item.imageUrl;
                         return (_jsxs("tr", { className: `border-t hover:bg-muted/30 ${clickable ? "cursor-pointer" : ""}`, onClick: clickable ? open : undefined, role: clickable ? "button" : undefined, tabIndex: clickable ? 0 : undefined, onKeyDown: clickable
                                 ? (e) => {
                                     if (e.key === "Enter" || e.key === " ") {
@@ -34,6 +36,11 @@ export function VoorraadTable({ items, loading, }) {
                                         open();
                                     }
                                 }
-                                : undefined, "aria-label": clickable ? `Bewerk ${item.name}` : undefined, children: [_jsx("td", { className: "p-2", children: item.imageUrl ? (_jsx("img", { src: item.imageUrl, alt: item.name, className: "h-10 w-10 rounded object-cover", loading: "lazy" })) : (_jsx("div", { className: "h-10 w-10 rounded bg-muted flex items-center justify-center", children: _jsx(Package, { className: "h-4 w-4 text-muted-foreground" }) })) }), _jsxs("td", { className: "p-3", children: [_jsx("div", { className: "flex items-center gap-2 flex-wrap", children: _jsx("span", { className: "font-medium text-foreground", children: item.name }) }), low && (_jsx("div", { className: "text-xs text-destructive", children: "onder minimumvoorraad" }))] }), _jsx("td", { className: "p-3", children: item.itemType === "productgroep" ? (_jsx(Badge, { className: "bg-indigo-500/15 text-indigo-700 border-indigo-500/30", children: "Productgroep" })) : item.itemType === "samenstelling" ? (_jsx(Badge, { className: "bg-emerald-500/15 text-emerald-700 border-emerald-500/30", children: "Samenstelling" })) : (_jsx(Badge, { variant: "secondary", children: "Artikel" })) }), _jsx("td", { className: "p-3 font-mono text-xs", children: item.articleNumber || "—" }), columns.map((c) => (_jsx("td", { className: "p-3 text-right tabular-nums text-muted-foreground", children: Number(item[c.key] ?? 0) }, c.key)))] }, item.id));
+                                : undefined, "aria-label": clickable ? `Bewerk ${item.name}` : undefined, children: [_jsx("td", { className: "p-2", children: thumbUrl ? (_jsx("img", { src: thumbUrl, alt: item.name, className: "h-10 w-10 rounded object-cover", loading: "lazy" })) : (_jsx("div", { className: "h-10 w-10 rounded bg-muted flex items-center justify-center", children: _jsx(Package, { className: "h-4 w-4 text-muted-foreground" }) })) }), _jsxs("td", { className: "p-3", children: [_jsxs("div", { className: "flex flex-col items-start gap-1", children: [_jsx("span", { className: "font-medium text-foreground", children: item.name }), _jsxs("div", { role: "status", "aria-label": floriday
+                                                        ? "Online in Floriday"
+                                                        : "Niet online in Floriday", title: floriday
+                                                        ? "Online in Floriday"
+                                                        : "Niet online in Floriday", className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-[11px] font-medium leading-none text-muted-foreground", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full " +
+                                                                (floriday ? "bg-emerald-500" : "bg-red-500"), "aria-hidden": true }), _jsx("span", { children: "Floriday" })] })] }), low && (_jsx("div", { className: "text-xs text-destructive", children: "onder minimumvoorraad" }))] }), _jsx("td", { className: "p-3", children: item.itemType === "productgroep" ? (_jsx(Badge, { className: "bg-indigo-500/15 text-indigo-700 border-indigo-500/30", children: "Productgroep" })) : item.itemType === "samenstelling" ? (_jsx(Badge, { className: "bg-emerald-500/15 text-emerald-700 border-emerald-500/30", children: "Samenstelling" })) : (_jsx(Badge, { variant: "secondary", children: "Artikel" })) }), _jsx("td", { className: "p-3 font-mono text-xs", children: item.articleNumber || "—" }), columns.map((c) => (_jsx("td", { className: "p-3 text-right tabular-nums text-muted-foreground", children: Number(item[c.key] ?? 0) }, c.key)))] }, item.id));
                     }) })] }) }));
 }

package/dist-lib/hooks/useFloridayPriceGroups.d.ts

@@ -0,0 +1,20 @@
+export interface FloridayPriceGroup {
+    /** Floriday priceGroupId (UUID). */
+    id: string;
+    name: string;
+    currency: string;
+    salesUnit: string;
+    /** Floriday buyer-organization ids die tot deze prijsgroep behoren. */
+    customerOrganizationIds: string[];
+}
+/**
+ * Leest alle actieve (niet verwijderde) Floriday-prijsgroepen voor de opgegeven
+ * connectie uit `floriday_price_groups_cache`. De sync wordt door de
+ * Authenticatie-module beheerd; dit is puur een read-side hook.
+ */
+export declare function useFloridayPriceGroups(activeId: string | null): {
+    priceGroups: FloridayPriceGroup[];
+    loading: boolean;
+    error: string | null;
+};
+//# sourceMappingURL=useFloridayPriceGroups.d.ts.map

package/dist-lib/hooks/useFloridayPriceGroups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloridayPriceGroups.d.ts","sourceRoot":"","sources":["../../src/hooks/useFloridayPriceGroups.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,uBAAuB,EAAE,MAAM,EAAE,CAAC;CACnC;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;;;;EA+C7D"}