@flowselections/floriday-verkoop-module 1.0.11 → 1.0.13

package/dist-lib/components/verkoop/OrderKarindelingCard.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Toont karindeling per order. De belading (planten×fusten×lagen) komt
+// ALTIJD uit de producten in Voorraad (tabel `products`) — nooit uit de
+// Floriday-packingConfiguration — zodat verkoop en voorraad synchroon zijn.
+// Alleen wanneer de order geen `product_id`-koppeling heeft, valt de kaart
+// terug op de Floriday packingConfiguration.
+import { useEffect, useMemo, useState } from "react";
+import { Badge, Card, CardContent, CardHeader, CardTitle, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@flowselections/core";
+import { CheckCircle2, Lock } from "lucide-react";
+import { supabase } from "../../integrations/supabase/client";
+import { planCarts } from "../../lib/cart-planner";
+function deriveCartsFromFloriday(order) {
+    const o = order.raw.order ?? {};
+    const pack = o?.packingConfiguration ?? {};
+    const ppc = Math.max(1, Number(pack.piecesPerPackage ?? order.quantity.count ?? 1));
+    const cpl = Math.max(1, Number(pack.packagesPerLayer ?? 1));
+    const lpc = Math.max(1, Number(pack.layersPerLoadCarrier ?? 1));
+    const totalPieces = Math.max(0, Number(o.numberOfPieces ?? order.totalPieces ?? 0));
+    if (totalPieces <= 0)
+        return [];
+    const totalCrates = Math.ceil(totalPieces / ppc);
+    const cratesPerCart = cpl * lpc;
+    const fullCarts = Math.floor(totalCrates / cratesPerCart);
+    const remainderCrates = totalCrates - fullCarts * cratesPerCart;
+    const carts = [];
+    let n = 1;
+    for (let i = 0; i < fullCarts; i++) {
+        carts.push({
+            cart_number: n++,
+            is_complete: true,
+            occupancy_pct: 100,
+            total_layers_used: lpc,
+            items: [{
+                    product_name: order.productName,
+                    crates: cratesPerCart,
+                    plants: cratesPerCart * ppc,
+                    plants_per_crate: ppc,
+                    crates_per_layer: cpl,
+                    layers_per_cart: lpc,
+                    layer_share_pct: 100,
+                }],
+        });
+    }
+    if (remainderCrates > 0) {
+        const layersUsed = Math.ceil(remainderCrates / cpl);
+        const occ = Math.round(((layersUsed / lpc) * 100) * 100) / 100;
+        carts.push({
+            cart_number: n,
+            is_complete: false,
+            occupancy_pct: occ,
+            total_layers_used: layersUsed,
+            items: [{
+                    product_name: order.productName,
+                    crates: remainderCrates,
+                    plants: remainderCrates * ppc,
+                    plants_per_crate: ppc,
+                    crates_per_layer: cpl,
+                    layers_per_cart: lpc,
+                    layer_share_pct: occ,
+                }],
+        });
+    }
+    return carts;
+}
+function belading(i) {
+    return `${i.plants_per_crate}×${i.crates_per_layer}×${i.layers_per_cart}`;
+}
+export function OrderKarindelingCard({ order }) {
+    // Lokale/mailbox-orders hebben een prefix (`local:`, `mailbox-proposal:`) in
+    // hun DTO-id. De DB-tabellen (`orders`, `order_items`) gebruiken de kale UUID,
+    // dus die prefix moet eraf voor de query — anders faalt de UUID-cast en valt
+    // de kaart terug op de Floriday-modus met slechts één artikel.
+    const rawId = order?.id ?? order.raw?.order?.id ?? null;
+    const orderId = typeof rawId === "string" ? rawId.replace(/^(local:|mailbox-proposal:)/, "") : rawId;
+    const [lockedAt, setLockedAt] = useState(null);
+    const [dbItems, setDbItems] = useState(null);
+    // Laadt order_items + gekoppelde products (voorraad-belading) en
+    // ververst live bij mutaties op order_items, orders of products.
+    useEffect(() => {
+        if (!orderId)
+            return;
+        let active = true;
+        const load = async () => {
+            const [{ data: itemRows }, { data: orderRow }] = await Promise.all([
+                supabase
+                    .from("order_items")
+                    .select("id, product_id, product_name, quantity, products(plants_per_crate, crates_per_layer, layers_per_cart)")
+                    .eq("order_id", orderId),
+                supabase.from("orders").select("plan_locked_at").eq("id", orderId).maybeSingle(),
+            ]);
+            if (!active)
+                return;
+            setDbItems(itemRows ?? []);
+            setLockedAt(orderRow?.plan_locked_at ?? null);
+        };
+        void load();
+        const channel = supabase
+            .channel(`order-karindeling-${orderId}`)
+            .on("postgres_changes", { event: "UPDATE", schema: "public", table: "orders", filter: `id=eq.${orderId}` }, (payload) => setLockedAt(payload.new?.plan_locked_at ?? null))
+            .on("postgres_changes", { event: "*", schema: "public", table: "order_items", filter: `order_id=eq.${orderId}` }, () => void load())
+            .on("postgres_changes", { event: "UPDATE", schema: "public", table: "products" }, () => void load())
+            .subscribe();
+        return () => {
+            active = false;
+            void supabase.removeChannel(channel);
+        };
+    }, [orderId]);
+    // Bouw plannerinput uit voorraad-belading. Alleen items met een gekoppeld
+    // product (product_id + belading in products-tabel) worden meegenomen.
+    const plannerCarts = useMemo(() => {
+        if (!dbItems || dbItems.length === 0)
+            return null;
+        const inputs = [];
+        for (const it of dbItems) {
+            const p = it.products;
+            if (!it.product_id || !p)
+                continue;
+            const ppc = Math.max(1, Number(p.plants_per_crate ?? 0));
+            const cpl = Math.max(1, Number(p.crates_per_layer ?? 0));
+            const lpc = Math.max(1, Number(p.layers_per_cart ?? 0));
+            const plants = Math.max(0, Number(it.quantity ?? 0));
+            if (plants <= 0)
+                continue;
+            inputs.push({
+                order_item_id: it.id,
+                product_id: it.product_id,
+                product_name: it.product_name,
+                plants,
+                plants_per_crate: ppc,
+                crates_per_layer: cpl,
+                layers_per_cart: lpc,
+            });
+        }
+        if (inputs.length === 0)
+            return null;
+        return planCarts(inputs).carts;
+    }, [dbItems]);
+    const floridayCarts = useMemo(() => deriveCartsFromFloriday(order), [order]);
+    const usingVoorraad = plannerCarts !== null;
+    const carts = usingVoorraad
+        ? plannerCarts.map((c) => ({
+            cart_number: c.cart_number,
+            is_complete: c.is_complete,
+            occupancy_pct: c.occupancy_pct,
+            total_layers_used: c.total_layers_used,
+            items: c.items.map((i) => ({
+                product_name: i.product_name,
+                crates: i.crates,
+                plants: i.plants,
+                plants_per_crate: i.plants_per_crate,
+                crates_per_layer: i.crates_per_layer,
+                layers_per_cart: i.layers_per_cart,
+                layer_share_pct: i.layer_share_pct,
+            })),
+        }))
+        : floridayCarts;
+    const source = usingVoorraad ? "voorraad" : "floriday";
+    const lockedDate = lockedAt ? new Date(lockedAt).toLocaleString("nl-NL") : null;
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { className: "text-base", children: "Karindeling" }), _jsxs("div", { className: "flex items-center gap-2", children: [lockedAt && (_jsxs(Badge, { variant: "outline", className: "gap-1", children: [_jsx(Lock, { className: "h-3 w-3" }), "Vergrendeld \u2014 pakbon geprint ", lockedDate] })), _jsxs(Badge, { variant: "secondary", children: [carts.length, " kar(ren) \u00B7 bron: ", source === "voorraad" ? "Voorraad" : "Floriday"] })] })] }), _jsx(CardContent, { children: carts.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen karindeling beschikbaar voor deze order." })) : (_jsx("div", { className: "space-y-4", children: carts.map((c) => (_jsxs("div", { className: "rounded-md border border-border", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border bg-muted/30 px-3 py-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "font-mono font-medium", children: ["Kar ", c.cart_number] }), _jsxs(Badge, { variant: c.is_complete ? "default" : "secondary", className: "gap-1", children: [c.is_complete && _jsx(CheckCircle2, { className: "h-3 w-3" }), c.is_complete ? "Volledig" : "Deels"] })] }), _jsxs("div", { className: "text-muted-foreground", children: [c.total_layers_used, " lagen \u00B7 benutting ", c.occupancy_pct, "%"] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Artikel" }), _jsx(TableHead, { className: "text-right", children: "Planten" }), _jsx(TableHead, { className: "text-right", children: "Fusten" }), _jsx(TableHead, { children: "Belading" }), _jsx(TableHead, { className: "text-right", children: "Laag-aandeel" })] }) }), _jsx(TableBody, { children: c.items.map((i, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: i.product_name }), _jsx(TableCell, { className: "text-right", children: i.plants }), _jsx(TableCell, { className: "text-right", children: i.crates }), _jsx(TableCell, { className: "font-mono text-xs", children: belading(i) }), _jsxs(TableCell, { className: "text-right", children: [Math.round(i.layer_share_pct * 10) / 10, "%"] })] }, idx))) })] })] }, c.cart_number))) })) })] }));
+}

package/dist-lib/components/verkoop/SalesOrderDetailView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SalesOrderDetailView.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrderDetailView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AA4HnE,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,cAAc,GACf,EAAE;IACD,KAAK,EAAE,aAAa,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,2CAoRA"}
+{"version":3,"file":"SalesOrderDetailView.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrderDetailView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AA+HnE,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,cAAc,GACf,EAAE;IACD,KAAK,EAAE,aAAa,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,2CA8RA"}

package/dist-lib/components/verkoop/SalesOrderDetailView.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CheckCircle2, ImageIcon } from "lucide-react";
+import { OrderKarindelingCard } from "./OrderKarindelingCard";
+import { OrderAfleverbrievenCard } from "./OrderAfleverbrievenCard";
+import { AutoFulfillmentStatusCard } from "./AutoFulfillmentStatusCard";
 const eurFlex = new Intl.NumberFormat("nl-NL", {
     style: "currency",
     currency: "EUR",
@@ -123,7 +126,7 @@ export function SalesOrderDetailView({ order, sellerFallback, }) {
     if (vbnCode)
         beladingParts.push(String(vbnCode));
     if (layersPerLoadCarrier && packagesPerLayer && piecesPerPackage) {
-        beladingParts.push(`${layersPerLoadCarrier}×${packagesPerLayer}×${piecesPerPackage}`);
+        beladingParts.push(`${piecesPerPackage}×${packagesPerLayer}×${layersPerLoadCarrier}`);
     }
     if (lcShort)
         beladingParts.push(lcShort);
@@ -209,5 +212,5 @@ export function SalesOrderDetailView({ order, sellerFallback, }) {
     const bestellingLabel = order.status.isCancelled
         ? "Geannuleerd"
         : STATUS_LABELS[statusKey] ?? (order.status.isShipped ? "Verzonden" : order.status.isConfirmed ? "Order bevestigd" : "Open");
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-3 rounded-md border border-border bg-muted/30 p-3", children: [_jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted", children: order.imageUrl ? (_jsx("img", { src: order.imageUrl, alt: "", className: "h-full w-full object-cover" })) : (_jsx(ImageIcon, { className: "h-6 w-6 text-muted-foreground" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "truncate text-base font-semibold text-foreground", children: [order.productName, o.tradeItemVersion ? (_jsxs("span", { className: "ml-2 text-xs font-normal text-muted-foreground", children: ["\u00B7 v", o.tradeItemVersion] })) : null] }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: pickStr(o.customerOrderId) ?? order.sku ?? order.orderNumber })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-[1fr_360px]", children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx(SectionTitle, { children: "Verkooporder" }), _jsx(Row, { label: "Handelsvorm", children: tradingType }), _jsx(Row, { label: "Bestelmoment", children: fmtDateTime(order.orderedAt) }), _jsx(Row, { label: "Aantal", children: _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs("div", { children: [order.fustCount, " fusten"] }), _jsxs("div", { children: [order.karCount, " karren"] })] }) }), _jsx(Row, { label: "Belading", children: belading }), _jsx(Row, { label: "Klant referentie", children: klantReferentie }), _jsx(Row, { label: "Floriday-referentie", children: floridayRef }), _jsx(Row, { label: "Verkoopkanaal", children: verkoopkanaal }), _jsx(Row, { label: "Financi\u00EBle afhandeling", children: financial }), _jsx(Row, { label: "Verkoper", children: sellerName ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { className: "inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground", children: initials(sellerName) }), sellerName] })) : ("—") })] }), _jsxs("div", { children: [_jsx(SectionTitle, { children: "Levering" }), _jsx(Row, { label: "Afleverdatum", children: fmtDateTime(order.deliveryAt) }), _jsx(Row, { label: "Incoterm", children: incoterm }), _jsx(Row, { label: "Levering", children: _jsxs("div", { className: "inline-flex max-w-xs items-start gap-3 rounded-md border border-border bg-card p-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-md bg-primary/10 text-primary", children: _jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 11l9-8 9 8" }), _jsx("path", { d: "M5 10v10h14V10" }), _jsx("path", { d: "M10 20v-6h4v6" })] }) }), _jsxs("div", { className: "text-sm", children: [_jsx("div", { children: addr.line || "—" }), _jsx("div", { children: [addr.postal, addr.city].filter(Boolean).join(" ") || "—" }), _jsx("div", { children: countryLabel ?? "" }), addr.gln && (_jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: addr.gln }))] })] }) })] }), _jsxs("div", { children: [_jsx(SectionTitle, { children: "Klant" }), _jsx(Row, { label: "Naam", children: _jsx("span", { className: "font-medium", children: customerName }) }), _jsx(Row, { label: "GLN", children: customerGln }), _jsx(Row, { label: "Administratienummer", children: customerAdmin }), _jsx(Row, { label: "Telefoonnummer", children: customerPhone })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "rounded-md border border-border p-4", children: [_jsx("div", { className: "mb-3 text-sm font-semibold", children: "Prijs per stuk" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Product" }), _jsxs("span", { children: [oldProductPrice !== null && (_jsx("span", { className: "mr-2 text-destructive line-through", children: eurFlex.format(oldProductPrice) })), eurFlex.format(productUnit)] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Transportkosten" }), _jsx("span", { children: eurFlex.format(transportPerPiece) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Inkoopprijs" }), _jsx("span", { children: eurFlex.format(purchaseUnit) })] }), _jsxs("div", { className: "mt-2 flex justify-between border-t border-border pt-2 font-semibold", children: [_jsx("span", { children: "Totaal" }), _jsxs("span", { children: [_jsxs("span", { className: "mr-2 text-xs font-normal text-muted-foreground", children: ["(", packages, " \u00D7 ", piecesPerPackage, " \u00D7 ", eurFlex.format(productUnit), ")"] }), eurFlex.format(totalAmount)] })] })] })] }), _jsxs("div", { className: "rounded-md border border-border p-4", children: [_jsx("div", { className: "mb-3 text-sm font-semibold", children: "Status" }), _jsxs("div", { className: "space-y-3 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-muted-foreground", children: "Bestelling" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600" }), bestellingLabel] })] }), hasCorrection && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-muted-foreground", children: "Correctie" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600" }), "Correctie is verwerkt"] })] }))] })] })] })] })] }));
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-3 rounded-md border border-border bg-muted/30 p-3", children: [_jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted", children: order.imageUrl ? (_jsx("img", { src: order.imageUrl, alt: "", className: "h-full w-full object-cover" })) : (_jsx(ImageIcon, { className: "h-6 w-6 text-muted-foreground" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "truncate text-base font-semibold text-foreground", children: [order.productName, o.tradeItemVersion ? (_jsxs("span", { className: "ml-2 text-xs font-normal text-muted-foreground", children: ["\u00B7 v", o.tradeItemVersion] })) : null] }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: order.orderNumber || order.sku || "—" })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-[1fr_360px]", children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx(SectionTitle, { children: "Verkooporder" }), _jsx(Row, { label: "Ordernummer", children: order.orderNumber || "—" }), _jsx(Row, { label: "Handelsvorm", children: tradingType }), _jsx(Row, { label: "Bestelmoment", children: fmtDateTime(order.orderedAt) }), _jsx(Row, { label: "Aantal", children: _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs("div", { children: [order.fustCount, " fusten"] }), _jsxs("div", { children: [order.karCount, " karren"] })] }) }), _jsx(Row, { label: "Belading", children: belading }), _jsx(Row, { label: "Klant referentie", children: klantReferentie }), _jsx(Row, { label: "Floriday-referentie", children: floridayRef }), _jsx(Row, { label: "Verkoopkanaal", children: verkoopkanaal }), _jsx(Row, { label: "Financi\u00EBle afhandeling", children: financial }), _jsx(Row, { label: "Verkoper", children: sellerName ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { className: "inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground", children: initials(sellerName) }), sellerName] })) : ("—") })] }), _jsxs("div", { children: [_jsx(SectionTitle, { children: "Levering" }), _jsx(Row, { label: "Afleverdatum", children: fmtDateTime(order.deliveryAt) }), _jsx(Row, { label: "Incoterm", children: incoterm }), _jsx(Row, { label: "Levering", children: _jsxs("div", { className: "inline-flex max-w-xs items-start gap-3 rounded-md border border-border bg-card p-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-md bg-primary/10 text-primary", children: _jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M3 11l9-8 9 8" }), _jsx("path", { d: "M5 10v10h14V10" }), _jsx("path", { d: "M10 20v-6h4v6" })] }) }), _jsxs("div", { className: "text-sm", children: [_jsx("div", { children: addr.line || "—" }), _jsx("div", { children: [addr.postal, addr.city].filter(Boolean).join(" ") || "—" }), _jsx("div", { children: countryLabel ?? "" }), addr.gln && (_jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: addr.gln }))] })] }) })] }), _jsxs("div", { children: [_jsx(SectionTitle, { children: "Klant" }), _jsx(Row, { label: "Naam", children: _jsx("span", { className: "font-medium", children: customerName }) }), _jsx(Row, { label: "GLN", children: customerGln }), _jsx(Row, { label: "Administratienummer", children: customerAdmin }), _jsx(Row, { label: "Telefoonnummer", children: customerPhone })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "rounded-md border border-border p-4", children: [_jsx("div", { className: "mb-3 text-sm font-semibold", children: "Prijs per stuk" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Product" }), _jsxs("span", { children: [oldProductPrice !== null && (_jsx("span", { className: "mr-2 text-destructive line-through", children: eurFlex.format(oldProductPrice) })), eurFlex.format(productUnit)] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Transportkosten" }), _jsx("span", { children: eurFlex.format(transportPerPiece) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Inkoopprijs" }), _jsx("span", { children: eurFlex.format(purchaseUnit) })] }), _jsxs("div", { className: "mt-2 flex justify-between border-t border-border pt-2 font-semibold", children: [_jsx("span", { children: "Totaal" }), _jsxs("span", { children: [_jsxs("span", { className: "mr-2 text-xs font-normal text-muted-foreground", children: ["(", packages, " \u00D7 ", piecesPerPackage, " \u00D7 ", eurFlex.format(productUnit), ")"] }), eurFlex.format(totalAmount)] })] })] })] }), _jsxs("div", { className: "rounded-md border border-border p-4", children: [_jsx("div", { className: "mb-3 text-sm font-semibold", children: "Status" }), _jsxs("div", { className: "space-y-3 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-muted-foreground", children: "Bestelling" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600" }), bestellingLabel] })] }), hasCorrection && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-muted-foreground", children: "Correctie" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600" }), "Correctie is verwerkt"] })] }))] })] })] })] }), _jsx(OrderKarindelingCard, { order: order }), o?.salesOrderId ? (_jsxs(_Fragment, { children: [_jsx(AutoFulfillmentStatusCard, { salesOrderId: String(o.salesOrderId) }), _jsx(OrderAfleverbrievenCard, { salesOrderId: String(o.salesOrderId) })] })) : null] }));
 }

package/dist-lib/components/verkoop/SalesOrdersTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SalesOrdersTable.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersTable.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAuEnE,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE;IACD,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAChD,2CA6IA"}
+{"version":3,"file":"SalesOrdersTable.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersTable.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAsEnE,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE;IACD,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAChD,2CAyIA"}

package/dist-lib/components/verkoop/SalesOrdersTable.js

@@ -3,7 +3,6 @@ import { useState } from "react";
 import { Badge, Checkbox, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@flowselections/core";
 import { MoreVertical, Package, ArrowDown } from "lucide-react";
-const eur = new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR" });
 function formatDateShort(iso) {
     if (!iso)
         return { date: "—", time: "" };
@@ -44,7 +43,7 @@ function StatusTag({ status, rawOrder, }) {
     if (rawStatus === "COMMITTED" || status.isConfirmed) {
         return (_jsx(Badge, { variant: "outline", className: "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400", children: "Verzend klaar" }));
     }
-    return (_jsx(Badge, { variant: "outline", className: "border-muted-foreground/30 bg-muted text-muted-foreground", children: "Nog piken" }));
+    return (_jsx(Badge, { variant: "outline", className: "border-muted-foreground/30 bg-muted text-muted-foreground", children: "Nog picken" }));
 }
 export function SalesOrdersTable({ orders, loading, onSelectOrder, }) {
     const [selected, setSelected] = useState(new Set());
@@ -54,10 +53,10 @@ export function SalesOrdersTable({ orders, loading, onSelectOrder, }) {
         n.has(id) ? n.delete(id) : n.add(id);
         return n;
     });
-    return (_jsx("div", { className: "rounded-lg border border-border bg-card", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { checked: allChecked, onCheckedChange: (v) => setSelected(v === true ? new Set(orders.map((o) => o.id)) : new Set()) }) }), _jsx(TableHead, { children: "Order" }), _jsx(TableHead, { children: _jsxs("span", { className: "inline-flex items-center gap-1", children: ["Bestelmoment ", _jsx(ArrowDown, { className: "h-3 w-3" })] }) }), _jsx(TableHead, { children: "Karren" }), _jsx(TableHead, { children: "Fusten" }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Levering" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "w-10" })] }) }), _jsxs(TableBody, { children: [loading &&
+    return (_jsx("div", { className: "rounded-lg border border-border bg-card", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { checked: allChecked, onCheckedChange: (v) => setSelected(v === true ? new Set(orders.map((o) => o.id)) : new Set()) }) }), _jsx(TableHead, { children: "Omzet" }), _jsx(TableHead, { children: _jsxs("span", { className: "inline-flex items-center gap-1", children: ["Bestelmoment ", _jsx(ArrowDown, { className: "h-3 w-3" })] }) }), _jsx(TableHead, { children: "Karren" }), _jsx(TableHead, { children: "Fusten" }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Levering" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "w-10" })] }) }), _jsxs(TableBody, { children: [loading &&
                             Array.from({ length: 6 }).map((_, i) => (_jsx(TableRow, { children: Array.from({ length: 9 }).map((__, j) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-6 w-full" }) }, j))) }, `s-${i}`))), !loading && orders.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 9, className: "py-12 text-center text-muted-foreground", children: "Geen verkooporders gevonden." }) })), !loading &&
                             orders.map((o) => {
                                 const ordered = formatDateShort(o.orderedAt);
-                                return (_jsxs(TableRow, { className: "align-top cursor-pointer", onClick: () => onSelectOrder?.(o), children: [_jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selected.has(o.id), onCheckedChange: () => toggle(o.id) }) }), _jsx(TableCell, { children: _jsx("div", { className: "font-medium text-foreground", children: o.orderNumber || "—" }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "h-4 w-4 text-primary" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-foreground", children: ordered.date }), _jsx("div", { className: "text-xs text-muted-foreground", children: ordered.time })] })] }) }), _jsxs(TableCell, { children: [_jsx("div", { className: "font-medium text-foreground", children: o.karCount }), _jsx("div", { className: "text-xs text-muted-foreground", children: eur.format(o.revenue) })] }), _jsx(TableCell, { children: _jsx("div", { className: "font-medium text-foreground", children: o.fustCount }) }), _jsxs(TableCell, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-foreground", children: o.customer.name }), o.isLocal && (_jsx(Badge, { variant: "outline", className: "border-primary/30 text-primary", children: "Lokaal" }))] }), _jsx("div", { className: "text-xs text-muted-foreground", children: [o.customer.postalCode, o.customer.city].filter(Boolean).join(" ") })] }), _jsx(TableCell, { className: "text-sm text-foreground", children: formatDateLong(o.deliveryAt) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StatusTag, { status: o.status, rawOrder: o.raw?.order }), o.orderNumber && (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: o.orderNumber }))] }) }), _jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(MoreVertical, { className: "h-4 w-4" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { children: "Bewerken" }), _jsx(DropdownMenuItem, { children: "Details bekijken" }), _jsx(DropdownMenuItem, { children: "Bevestigen" }), _jsx(DropdownMenuItem, { className: "text-destructive focus:text-destructive", children: "Annuleren" })] })] }) })] }, o.id));
+                                return (_jsxs(TableRow, { className: "align-top cursor-pointer", onClick: () => onSelectOrder?.(o), children: [_jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selected.has(o.id), onCheckedChange: () => toggle(o.id) }) }), _jsxs(TableCell, { children: [_jsxs("div", { className: "font-medium text-foreground", children: ["\u20AC ", o.revenue.toFixed(2)] }), o.orderNumber && (_jsx("div", { className: "text-xs text-muted-foreground", children: o.orderNumber }))] }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "h-4 w-4 text-primary" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-foreground", children: ordered.date }), _jsx("div", { className: "text-xs text-muted-foreground", children: ordered.time })] })] }) }), _jsx(TableCell, { children: _jsx("div", { className: "font-medium text-foreground", children: o.karCount }) }), _jsx(TableCell, { children: _jsx("div", { className: "font-medium text-foreground", children: o.fustCount }) }), _jsxs(TableCell, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-foreground", children: o.customer.name }), o.isLocal && (_jsx(Badge, { variant: "outline", className: "border-primary/30 text-primary", children: "Lokaal" }))] }), _jsx("div", { className: "text-xs text-muted-foreground", children: [o.customer.postalCode, o.customer.city].filter(Boolean).join(" ") })] }), _jsx(TableCell, { className: "text-sm text-foreground", children: formatDateLong(o.deliveryAt) }), _jsx(TableCell, { children: _jsx(StatusTag, { status: o.status, rawOrder: o.raw?.order }) }), _jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(MoreVertical, { className: "h-4 w-4" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { children: "Bewerken" }), _jsx(DropdownMenuItem, { children: "Details bekijken" }), _jsx(DropdownMenuItem, { children: "Bevestigen" }), _jsx(DropdownMenuItem, { className: "text-destructive focus:text-destructive", children: "Annuleren" })] })] }) })] }, o.id));
                             })] })] }) }));
 }

package/dist-lib/components/verkoop/SearchableSelect.d.ts

@@ -0,0 +1,19 @@
+export interface SearchableOption {
+    value: string;
+    label: string;
+    hint?: string | null;
+}
+interface SearchableSelectProps {
+    value: string | null;
+    options: SearchableOption[];
+    placeholder?: string;
+    emptyLabel?: string;
+    allowClear?: boolean;
+    clearLabel?: string;
+    onChange: (value: string | null) => void;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function SearchableSelect({ value, options, placeholder, emptyLabel, allowClear, clearLabel, onChange, className, disabled, }: SearchableSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SearchableSelect.d.ts.map

package/dist-lib/components/verkoop/SearchableSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SearchableSelect.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EAAE,OAAO,EAAE,WAAuB,EAAE,UAA6B,EACtE,UAAiB,EAAE,UAAiC,EACpD,QAAQ,EAAE,SAAS,EAAE,QAAgB,GACtC,EAAE,qBAAqB,2CAuFvB"}

package/dist-lib/components/verkoop/SearchableSelect.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button, Input, Popover, PopoverContent, PopoverTrigger, } from "@flowselections/core";
+import { Check, ChevronsUpDown, Search } from "lucide-react";
+export function SearchableSelect({ value, options, placeholder = "Kies...", emptyLabel = "Geen resultaat", allowClear = true, clearLabel = "— Geen koppeling —", onChange, className, disabled = false, }) {
+    const [open, setOpen] = useState(false);
+    const [q, setQ] = useState("");
+    const selected = useMemo(() => options.find((o) => o.value === value) ?? null, [options, value]);
+    const filtered = useMemo(() => {
+        const needle = q.trim().toLowerCase();
+        if (!needle)
+            return options.slice(0, 200);
+        return options
+            .filter((o) => o.label.toLowerCase().includes(needle) ||
+            (o.hint ?? "").toLowerCase().includes(needle))
+            .slice(0, 200);
+    }, [options, q]);
+    return (_jsxs(Popover, { open: open, onOpenChange: (o) => { if (disabled)
+            return; setOpen(o); if (!o)
+            setQ(""); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, disabled: disabled, className: `w-full justify-between font-normal ${className ?? ""}`, children: [_jsx("span", { className: `truncate ${selected ? "" : "text-muted-foreground"}`, children: selected?.label ?? placeholder }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", align: "start", children: [_jsx("div", { className: "p-2 border-b", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { autoFocus: true, value: q, onChange: (e) => setQ(e.target.value), placeholder: `Zoek in ${options.length} items...`, className: "pl-8 h-9" })] }) }), _jsxs("div", { className: "max-h-64 overflow-y-auto py-1", children: [allowClear && (_jsxs("button", { type: "button", className: "w-full text-left text-sm px-3 py-2 hover:bg-accent flex items-center gap-2", onClick: () => { onChange(null); setOpen(false); }, children: [value === null && _jsx(Check, { className: "h-3 w-3" }), _jsx("span", { className: "text-muted-foreground italic", children: clearLabel })] })), filtered.length === 0 ? (_jsx("div", { className: "px-3 py-6 text-sm text-muted-foreground text-center", children: emptyLabel })) : (filtered.map((o) => (_jsxs("button", { type: "button", className: "w-full text-left text-sm px-3 py-2 hover:bg-accent flex items-start gap-2", onClick: () => { onChange(o.value); setOpen(false); }, children: [_jsx(Check, { className: `h-3 w-3 mt-1 shrink-0 ${value === o.value ? "" : "invisible"}` }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "truncate", children: o.label }), o.hint && _jsx("div", { className: "text-xs text-muted-foreground truncate", children: o.hint })] })] }, o.value)))), filtered.length === 200 && (_jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground text-center border-t", children: "Toon eerste 200 resultaten \u2014 verfijn je zoekopdracht" }))] })] })] }));
+}

package/dist-lib/components/verkoop/VerkoopOrdersPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VerkoopOrdersPage.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/VerkoopOrdersPage.tsx"],"names":[],"mappings":"AA6DA,wBAAgB,iBAAiB,4CA6RhC"}
+{"version":3,"file":"VerkoopOrdersPage.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/VerkoopOrdersPage.tsx"],"names":[],"mappings":"AAgEA,wBAAgB,iBAAiB,4CA2UhC"}

package/dist-lib/components/verkoop/VerkoopOrdersPage.js

@@ -4,6 +4,8 @@ import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 import { Download, Plus, AlertTriangle, RefreshCw, ChevronLeft, ChevronRight, Filter, } from "lucide-react";
 import { useServerFn } from "@tanstack/react-start";
 import { useNavigate } from "@tanstack/react-router";
+import { useQueryClient } from "@tanstack/react-query";
+import { supabase } from "../../integrations/supabase/client";
 import { runSalesOrdersSync } from "../../lib/salesorders.functions";
 import { runTradeItemsSync } from "../../lib/tradeitems.functions";
 import { applyFilters, computeTotals, ordersToCsv, } from "../../lib/salesorders-mapping";
@@ -12,7 +14,6 @@ import { AnalyticsCards } from "./AnalyticsCards";
 import { SalesOrdersFilters } from "./SalesOrdersFilters";
 import { SalesOrdersFilterPanel, countActiveFilters, } from "./SalesOrdersFilterPanel";
 import { SalesOrdersTable } from "./SalesOrdersTable";
-import { FlorydaySyncHealthBanner } from "../../components/floriday/FlorydaySyncHealthBanner";
 const STATUS_TABS = [
     { id: "all", label: "Alle" },
     { id: "open", label: "Open" },
@@ -53,10 +54,45 @@ export function VerkoopOrdersPage() {
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(20);
     const navigate = useNavigate();
+    const queryClient = useQueryClient();
     const triggerSync = useServerFn(runSalesOrdersSync);
     const triggerTradeItemsSync = useServerFn(runTradeItemsSync);
     const { data, isLoading, error, refetch, isFetching } = useSalesOrdersQuery();
     const orders = data?.orders ?? [];
+    const activeEnvironment = data?.environment ?? "staging";
+    // Automatisch omschakelen wanneer de Authenticatie-module de omgeving wijzigt.
+    useEffect(() => {
+        const channel = supabase
+            .channel("floriday-settings-env")
+            .on("postgres_changes", { event: "*", schema: "public", table: "floriday_settings" }, () => {
+            queryClient.invalidateQueries({ queryKey: ["floriday", "salesorders-cache"] });
+        })
+            .subscribe();
+        return () => {
+            supabase.removeChannel(channel);
+        };
+    }, [queryClient]);
+    // Realtime — lijst live bijwerken zodra cache-regels binnenkomen/wijzigen.
+    useEffect(() => {
+        let timer = null;
+        const invalidate = () => {
+            if (timer)
+                clearTimeout(timer);
+            timer = setTimeout(() => {
+                queryClient.invalidateQueries({ queryKey: ["floriday", "salesorders-cache"] });
+            }, 500);
+        };
+        const channel = supabase
+            .channel("floriday-salesorders-cache")
+            .on("postgres_changes", { event: "*", schema: "public", table: "floriday_salesorders_cache" }, invalidate)
+            .on("postgres_changes", { event: "*", schema: "public", table: "floriday_fulfillment_orders_cache" }, invalidate)
+            .subscribe();
+        return () => {
+            if (timer)
+                clearTimeout(timer);
+            supabase.removeChannel(channel);
+        };
+    }, [queryClient]);
     const statusFiltered = useMemo(() => orders.filter((o) => matchesStatus(o, tab)), [orders, tab]);
     const filtered = useMemo(() => applyFilters(statusFiltered, filters), [statusFiltered, filters]);
     const totals = useMemo(() => computeTotals(filtered), [filtered]);
@@ -118,7 +154,7 @@ export function VerkoopOrdersPage() {
             ]);
             const syncedOrders = orders.results.reduce((s, x) => s + x.synced, 0);
             const syncedItems = items.results.reduce((s, x) => s + x.synced, 0);
-            toast.success(`Sync klaar — ${syncedOrders} order(s), ${syncedItems} artikel(en) bijgewerkt`);
+            toast.success(`Sync klaar (${activeEnvironment === "live" ? "productie" : "staging"}) — ${syncedOrders} order(s), ${syncedItems} artikel(en) bijgewerkt`);
             await refetch();
         }
         catch (e) {
@@ -128,7 +164,7 @@ export function VerkoopOrdersPage() {
             setSyncing(false);
         }
     };
-    return (_jsxs("main", { className: "space-y-5 p-6", children: [_jsx(FlorydaySyncHealthBanner, { environment: "staging", resources: ["sales-orders", "trade-items", "customer-organizations"] }), _jsx("div", { className: "flex items-center justify-between border-b border-border", children: _jsx("div", { className: "flex items-center gap-6 overflow-x-auto", children: STATUS_TABS.map((t) => {
+    return (_jsxs("main", { className: "space-y-5 p-6", children: [_jsx("div", { className: "flex items-center justify-between border-b border-border", children: _jsx("div", { className: "flex items-center gap-6 overflow-x-auto", children: STATUS_TABS.map((t) => {
                         const active = tab === t.id;
                         const count = statusCounts[t.id];
                         return (_jsxs("button", { type: "button", onClick: () => setTab(t.id), className: "relative -mb-px flex items-center gap-2 whitespace-nowrap border-b-2 px-1 pb-3 pt-1 text-sm transition-colors " +