@flowselections/floriday-verkoop-module 1.0.53 → 1.0.54

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

@@ -1 +1 @@
-{"version":3,"file":"OrderKarindelingCard.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/OrderKarindelingCard.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AA6G/D,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,aAAa,CAAA;CAAE,2CA4OvE"}
+{"version":3,"file":"OrderKarindelingCard.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/OrderKarindelingCard.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AA4C/D,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,aAAa,CAAA;CAAE,2CA+KvE"}

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

@@ -1,208 +1,90 @@
 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";
+// Toont de karindeling van de buffer waarin deze order valt.
+//
+// BELANGRIJK: deze kaart LEEST de karren uit `order_carts`/`order_cart_items`
+// via de server-fn `listOrderCarts`. Hij berekent niets zelf — de planner
+// draait server-side (cart-replan v3 / logistics_plan_buffer_sql). Een eigen
+// herberekening in de browser gaf eerder een andere indeling dan de database
+// (één artikel per kar, verkeerde kar-telling) en is daarom verwijderd.
+import { useEffect, useMemo } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
 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 { formatBeladingNotation } from "../../lib/load-carrier-labels";
-import { planCarts } from "../../lib/cart-planner";
-import { expandOrderItemsForPlanner } from "../../lib/expand-group-order-items";
-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;
-}
+import { listOrderCarts } from "../../lib/cart-replan.functions";
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 function belading(i) {
     // Eén notatie in de hele module: lagen × fusten/laag × planten/fust
     // (Floriday-UI-volgorde, bewust anders dan de API-veldvolgorde).
-    return (formatBeladingNotation(i.layers_per_cart, i.crates_per_layer, i.plants_per_crate) ??
-        `${i.layers_per_cart}×${i.crates_per_layer}×${i.plants_per_crate}`);
+    const l = i.layers_per_cart ?? 0;
+    const c = i.crates_per_layer ?? 0;
+    const p = i.plants_per_crate ?? 0;
+    if (!l || !c || !p)
+        return "—";
+    return formatBeladingNotation(l, c, p) ?? `${l}×${c}×${p}`;
 }
 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.
+    // hun DTO-id; de DB gebruikt de kale UUID.
     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);
-    const [plannerInputs, setPlannerInputs] = useState(null);
-    const [bufferOrders, setBufferOrders] = useState([]);
-    const [, setBufferId] = useState(null);
+    const stripped = typeof rawId === "string" ? rawId.replace(/^(local:|mailbox-proposal:)/, "") : null;
+    const orderId = stripped && UUID_RE.test(stripped) ? stripped : null;
+    const fetchCarts = useServerFn(listOrderCarts);
+    const queryClient = useQueryClient();
+    const queryKey = ["order-carts", orderId];
+    const { data, isLoading } = useQuery({
+        queryKey,
+        enabled: !!orderId,
+        staleTime: 15000,
+        queryFn: async () => fetchCarts({ data: { orderId: orderId } }),
+    });
+    // Realtime op de karren zelf — niet meer op products/order_items, want die
+    // voedden de verwijderde client-planner.
     useEffect(() => {
         if (!orderId)
             return;
-        let active = true;
-        const load = async () => {
-            // 1) Bepaal de buffer van deze order.
-            const { data: orderRow } = await supabase
-                .from("orders")
-                .select("plan_locked_at, buffer_id")
-                .eq("id", orderId)
-                .maybeSingle();
-            if (!active)
-                return;
-            const bid = orderRow?.buffer_id ?? null;
-            setLockedAt(orderRow?.plan_locked_at ?? null);
-            setBufferId(bid);
-            // 2) Verzamel alle orders in deze buffer (of alleen deze order als er
-            // geen buffer bekend is).
-            let orderIds = [orderId];
-            let siblingOrders = [];
-            if (bid) {
-                const { data: sibs } = await supabase
-                    .from("orders")
-                    .select("id, order_number")
-                    .eq("buffer_id", bid)
-                    .is("deleted_at", null);
-                siblingOrders = (sibs ?? []).map((s) => ({
-                    id: s.id,
-                    order_number: s.order_number,
-                }));
-                if (siblingOrders.length > 0)
-                    orderIds = siblingOrders.map((s) => s.id);
-            }
-            if (!active)
-                return;
-            setBufferOrders(siblingOrders);
-            // 3) Items van alle orders in de buffer.
-            const { data: itemRows } = await supabase
-                .from("order_items")
-                .select("id, order_id, product_id, product_name, quantity, products(plants_per_crate, crates_per_layer, layers_per_cart)")
-                .in("order_id", orderIds);
-            if (!active)
-                return;
-            const items = itemRows ?? [];
-            setDbItems(items);
-            const raws = items.map((it) => ({
-                id: it.id,
-                product_id: it.product_id,
-                product_name: it.product_name,
-                quantity: Number(it.quantity ?? 0),
-                plants_per_crate: Math.max(1, Number(it.products?.plants_per_crate ?? 1)),
-                crates_per_layer: Math.max(1, Number(it.products?.crates_per_layer ?? 1)),
-                layers_per_cart: Math.max(1, Number(it.products?.layers_per_cart ?? 1)),
-            }));
-            const expanded = await expandOrderItemsForPlanner(supabase, raws);
-            if (!active)
-                return;
-            setPlannerInputs(expanded);
-        };
-        void load();
+        const invalidate = () => void queryClient.invalidateQueries({ queryKey: ["order-carts", orderId] });
         const channel = supabase
-            .channel(`order-karindeling-${orderId}`)
-            .on("postgres_changes", { event: "UPDATE", schema: "public", table: "orders" }, () => void load())
-            .on("postgres_changes", { event: "*", schema: "public", table: "order_items" }, () => void load())
-            .on("postgres_changes", { event: "UPDATE", schema: "public", table: "products" }, () => void load())
+            .channel(`order-carts-${orderId}`)
+            .on("postgres_changes", { event: "*", schema: "public", table: "order_carts" }, invalidate)
+            .on("postgres_changes", { event: "*", schema: "public", table: "order_cart_items" }, invalidate)
+            .on("postgres_changes", { event: "UPDATE", schema: "public", table: "orders" }, invalidate)
             .subscribe();
         return () => {
-            active = false;
             void supabase.removeChannel(channel);
         };
-    }, [orderId]);
-    // Map: order_item_id -> order_id, en order_id -> order_number.
-    const itemToOrder = useMemo(() => {
-        const m = new Map();
-        for (const it of dbItems ?? [])
-            m.set(it.id, it.order_id);
-        return m;
-    }, [dbItems]);
-    const orderNumberById = useMemo(() => {
+    }, [orderId, queryClient]);
+    const carts = (data?.carts ?? []);
+    const orders = data?.orders ?? [];
+    const lockedAt = data?.planLockedAt ?? null;
+    const blocked = data?.blocked ?? null;
+    const orderNumberByItem = useMemo(() => {
+        const numberByOrder = new Map();
+        for (const o of orders)
+            numberByOrder.set(o.id, o.order_number);
         const m = new Map();
-        for (const o of bufferOrders)
-            m.set(o.id, o.order_number);
+        for (const it of data?.itemOrders ?? []) {
+            m.set(it.id, { orderId: it.order_id, orderNumber: numberByOrder.get(it.order_id) ?? null });
+        }
         return m;
-    }, [bufferOrders]);
-    const plannerCarts = useMemo(() => {
-        if (!plannerInputs || plannerInputs.length === 0)
+    }, [data, orders]);
+    // Bron-badge uit de data: order_carts.source + algorithm_version.
+    const sourceLabel = useMemo(() => {
+        const srcs = [...new Set(carts.map((c) => c.source ?? "onbekend"))];
+        const vers = [...new Set(carts.map((c) => c.algorithm_version).filter((v) => v != null))];
+        if (srcs.length === 0)
             return null;
-        return planCarts(plannerInputs).carts;
-    }, [plannerInputs]);
-    const floridayCarts = useMemo(() => deriveCartsFromFloriday(order), [order]);
-    const usingVoorraad = plannerCarts !== null;
-    const carts = usingVoorraad
-        ? plannerCarts.map((c) => {
-            const orderIds = new Set();
-            const items = c.items.map((i) => {
-                const oid = itemToOrder.get(i.order_item_id) ?? null;
-                if (oid)
-                    orderIds.add(oid);
-                return {
-                    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,
-                    order_id: oid,
-                    order_number: oid ? orderNumberById.get(oid) ?? null : null,
-                };
-            });
-            return {
-                cart_number: c.cart_number,
-                is_complete: c.is_complete,
-                occupancy_pct: c.occupancy_pct,
-                total_layers_used: c.total_layers_used,
-                items,
-                order_ids: [...orderIds],
-            };
-        })
-        : floridayCarts;
-    const source = usingVoorraad ? "voorraad" : "floriday";
+        return `${srcs.join(", ")}${vers.length > 0 ? ` · v${vers.join("/")}` : ""}`;
+    }, [carts]);
     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] })), bufferOrders.length > 1 && (_jsxs(Badge, { variant: "outline", title: bufferOrders.map((o) => o.order_number).join(", "), children: ["Buffer \u00B7 ", bufferOrders.length, " orders"] })), _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: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: i.product_name }), i.order_number && bufferOrders.length > 1 && (_jsx(Badge, { variant: i.order_id === orderId ? "default" : "outline", className: "text-[10px]", children: i.order_number }))] }) }), _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))) })) })] }));
+    const multiOrder = orders.length > 1;
+    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] })), multiOrder && (_jsxs(Badge, { variant: "outline", title: orders.map((o) => o.order_number ?? o.id).join(", "), children: ["Buffer \u00B7 ", orders.length, " orders"] })), _jsxs(Badge, { variant: "secondary", children: [carts.length, " kar(ren)", sourceLabel ? ` · bron: ${sourceLabel}` : ""] })] })] }), _jsx(CardContent, { children: isLoading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Karindeling laden\u2026" })) : carts.length === 0 ? (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen karindeling beschikbaar voor deze order." }), blocked && (blocked.explanation || blocked.reason) && (_jsxs("p", { className: "text-sm text-destructive", children: [blocked.explanation ?? blocked.reason, blocked.at ? ` (${new Date(blocked.at).toLocaleString("nl-NL")})` : ""] }))] })) : (_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"] }), c.order_id === null && multiOrder && (_jsx(Badge, { variant: "outline", children: "Gedeelde kar" })), c.carrier_type && (_jsxs(Badge, { variant: "outline", className: "font-mono text-[10px]", children: [c.carrier_type, c.max_layers ? ` · ${c.max_layers} lagen` : ""] }))] }), _jsxs("div", { className: "text-muted-foreground", children: [Number(c.total_layers_used ?? 0), " lagen \u00B7 benutting", " ", Math.round(Number(c.occupancy_pct ?? 0) * 10) / 10, "%"] })] }), _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.order_cart_items ?? []).map((i) => {
+                                            const own = i.order_item_id
+                                                ? orderNumberByItem.get(i.order_item_id)
+                                                : undefined;
+                                            const crates = Number(i.crates ?? 0);
+                                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: i.product_name ?? "—" }), multiOrder && own?.orderNumber && (_jsx(Badge, { variant: own.orderId === orderId ? "default" : "outline", className: "text-[10px]", children: own.orderNumber }))] }) }), _jsx(TableCell, { className: "text-right", children: crates * Number(i.plants_per_crate ?? 0) }), _jsx(TableCell, { className: "text-right", children: crates }), _jsx(TableCell, { className: "font-mono text-xs", children: belading(i) }), _jsxs(TableCell, { className: "text-right", children: [Math.round(Number(i.layer_share_pct ?? 0) * 10) / 10, "%"] })] }, i.id));
+                                        }) })] })] }, c.id))) })) })] }));
 }

package/dist-lib/lib/cart-replan.functions.d.ts

@@ -46495,6 +46495,8 @@ export declare const listOrderCarts: import("@tanstack/start-client-core").Optio
         occupancy_pct: number;
         total_layers_used: number;
         algorithm_version: number;
+        carrier_type: string;
+        max_layers: number | null;
         notes: string | null;
         order_cart_items: {
             id: string;
@@ -46510,6 +46512,20 @@ export declare const listOrderCarts: import("@tanstack/start-client-core").Optio
         }[];
     }[];
     bufferId: string | null;
+    planLockedAt: string | null;
+    orders: {
+        id: string;
+        order_number: string | null;
+    }[];
+    itemOrders: {
+        id: string;
+        order_id: string;
+    }[];
+    blocked: {
+        reason: string | null;
+        explanation: string | null;
+        at: string | null;
+    } | null;
 }>>;
 export declare const replanBufferForOrder: import("@tanstack/start-client-core").OptionalFetcher<readonly [import("@tanstack/start-client-core").FunctionMiddlewareAfterServer<{}, unknown, undefined, {
     supabase: import("@supabase/supabase-js").SupabaseClient<import("../integrations/supabase/types").Database, "public", "public", {