@flowselections/logistiek-engine 1.0.34 → 1.0.89

package/dist-lib/components/FlowOrders.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/FlowOrders.tsx — orders en herberekeningen onder de flowkaart
+// ============================================================================
+// Alle orders die het systeem kent. Klik een order: alle herberekeningen
+// (versies). Klik een versie: de gelopen route wordt blauw op de kaart, en
+// hieronder staat elke gebeurtenis, beslissing, foutcode en document van die
+// versie. Alleen lezen. GEEN <Header /> hier — die levert de shell.
+// ============================================================================
+import { useEffect, useMemo, useState } from "react";
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Skeleton, } from "@flowselections/core";
+import { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Clock, RefreshCw, RotateCcw, Search, X } from "lucide-react";
+import { toast } from "sonner";
+import { supabase } from "../integrations/supabase/moduleClient.js";
+import { useAlleOrders, useOrderVersies, useVersieEvents } from "../hooks/useOrderVersies";
+import { bepaalRoute, redenTekst } from "../lib/flowRoute";
+import { Gebeurtenis } from "./OrderLogboek";
+function tijd(v) {
+    if (!v)
+        return "—";
+    const d = new Date(v);
+    if (Number.isNaN(d.getTime()))
+        return v;
+    return d.toLocaleString("nl-NL", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+function duur(a, b) {
+    if (!a || !b)
+        return null;
+    const ms = new Date(b).getTime() - new Date(a).getTime();
+    if (!Number.isFinite(ms) || ms < 0)
+        return null;
+    if (ms < 1000)
+        return `${ms} ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)} s`;
+    return `${Math.round(ms / 60000)} min`;
+}
+const VERSIE_STATUS = {
+    done: { label: "Ingedeeld", kleur: "default" },
+    running: { label: "Bezig", kleur: "secondary" },
+    pending: { label: "Wachtend", kleur: "secondary" },
+    failed: { label: "Mislukt", kleur: "destructive" },
+    geblokkeerd: { label: "Geblokkeerd", kleur: "destructive" },
+};
+function orderStand(r) {
+    if (r.cancelledAt)
+        return { label: "Geannuleerd", kleur: "outline" };
+    const q = (r.queueStatus ?? "").toLowerCase();
+    if (q === "failed" || q === "geblokkeerd")
+        return { label: q === "failed" ? "Mislukt" : "Geblokkeerd", kleur: "destructive" };
+    if (r.errors > 0 && r.lastStatus === "mislukt")
+        return { label: "Fout", kleur: "destructive" };
+    if (q === "running" || q === "pending")
+        return { label: q === "running" ? "Bezig" : "Wachtend", kleur: "secondary" };
+    if (r.orderStatus)
+        return { label: r.orderStatus, kleur: "default" };
+    return { label: "Onbekend", kleur: "outline" };
+}
+export function FlowOrders({ onRoute }) {
+    const [zoek, setZoek] = useState("");
+    const [zoekActief, setZoekActief] = useState("");
+    const [filter, setFilter] = useState("");
+    const [sortering, setSortering] = useState("nieuw");
+    const [orderRef, setOrderRef] = useState(null);
+    const [versieId, setVersieId] = useState(null);
+    const [herbezig, setHerbezig] = useState(false);
+    useEffect(() => {
+        const t = setTimeout(() => setZoekActief(zoek.trim()), 300);
+        return () => clearTimeout(t);
+    }, [zoek]);
+    const { rows, loading, error, refresh } = useAlleOrders(zoekActief);
+    const veiligeRows = Array.isArray(rows) ? rows : [];
+    const gefilterd = useMemo(() => {
+        const lijst = veiligeRows.filter((r) => {
+            if (!filter)
+                return true;
+            const st = orderStand(r);
+            if (filter === "fout")
+                return st.kleur === "destructive";
+            if (filter === "bezig")
+                return st.kleur === "secondary";
+            return st.kleur === "default" || st.kleur === "outline";
+        });
+        const stempel = (r) => {
+            const t = Date.parse(String(r.createdAt ?? r.lastAt ?? ""));
+            return Number.isFinite(t) ? t : 0;
+        };
+        return [...lijst].sort((a, b) => (sortering === "nieuw" ? stempel(b) - stempel(a) : stempel(a) - stempel(b)));
+    }, [veiligeRows, filter, sortering]);
+    const versies = useOrderVersies(orderRef);
+    const veiligeVersies = Array.isArray(versies.versions) ? versies.versions : [];
+    const gekozen = veiligeVersies.find((v) => v.id === versieId) ?? null;
+    const laatsteId = veiligeVersies[0]?.id ?? null;
+    // Route naar de kaart sturen zodra order/versie verandert.
+    useEffect(() => {
+        if (!orderRef) {
+            onRoute(null, null, null, null);
+            return;
+        }
+        if (versies.loading)
+            return;
+        const v = gekozen ?? (versieId ? null : veiligeVersies[0] ?? null);
+        const route = bepaalRoute(v, versies.order, versies.carts, !v || v.id === laatsteId);
+        const label = v ? `${orderRef} · versie ${v.nr}${v.id === laatsteId ? " (laatste)" : ""}` : orderRef;
+        onRoute(route, label, orderRef, versieId ? v : null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [orderRef, versieId, versies.loading, versies.order, versies.carts, veiligeVersies.length]);
+    const kies = (nr) => {
+        setVersieId(null);
+        setOrderRef((v) => (v === nr ? null : nr));
+    };
+    // Eén order helemaal opnieuw vanaf "Order komt binnen" door de flow laten lopen.
+    const opnieuwDoorFlow = async (nr) => {
+        setHerbezig(true);
+        try {
+            const { data, error: rpcError } = await supabase.rpc("logistics_replan_order_journey", {
+                p_order_ref: nr,
+            });
+            if (rpcError)
+                throw new Error(rpcError.message);
+            const r = (data ?? {});
+            if (r?.gevonden === false) {
+                toast.error(`Order ${nr} is niet gevonden.`);
+                return;
+            }
+            toast.success(`${nr} begint opnieuw vanaf "Order komt binnen"`, {
+                description: `Oude route gewist (${r?.oudeStappenGewist ?? 0} stappen, ${r?.oudeBerekeningenGewist ?? 0} eerdere berekeningen). ${r?.karrenVerwijderd ?? 0} karren opnieuw te berekenen.`,
+            });
+            setVersieId(null);
+            onRoute(null, null, null, null);
+            try {
+                await supabase.rpc("logistics_trace_progress_order", { p_order_ref: nr });
+            }
+            catch {
+                /* meekijken mag nooit blokkeren */
+            }
+            await refresh();
+            await versies.refresh();
+        }
+        catch (e) {
+            toast.error("Opnieuw berekenen is niet gelukt", { description: e?.message ? String(e.message) : undefined });
+        }
+        finally {
+            setHerbezig(false);
+        }
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Orders in het systeem" }), _jsx(CardDescription, { children: "Klik een order voor alle herberekeningen; klik een versie om de gelopen route blauw op de kaart te zien en precies te lezen waar hij is vastgelopen." })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void refresh(), disabled: loading, children: [_jsx(RefreshCw, { className: `mr-1 h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` }), "Vernieuwen"] })] }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative w-full max-w-xs", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }), _jsx(Input, { className: "pl-8", placeholder: "Zoek op ordernummer of klant", value: zoek, onChange: (e) => setZoek(e.target.value) })] }), [
+                                ["", "Alles"],
+                                ["fout", "Vastgelopen"],
+                                ["bezig", "Bezig / wachtend"],
+                                ["klaar", "Overig"],
+                            ].map(([w, l]) => (_jsx(Button, { size: "sm", variant: filter === w ? "default" : "outline", onClick: () => setFilter(w), children: l }, w))), _jsx(Button, { size: "sm", variant: "outline", onClick: () => setSortering((s) => (s === "nieuw" ? "oud" : "nieuw")), children: sortering === "nieuw" ? "Nieuwste eerst" : "Oudste eerst" }), _jsxs("span", { className: "ml-auto text-xs text-muted-foreground", children: [gefilterd.length, " orders"] })] })] }), _jsxs(CardContent, { className: "space-y-3", children: [error && (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2", children: [_jsx("p", { className: "text-sm text-destructive", children: error }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void refresh(), disabled: loading, children: [_jsx(RefreshCw, { className: `mr-1 h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` }), "Opnieuw proberen"] })] })), loading && veiligeRows.length === 0 ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-10 w-full" }), _jsx(Skeleton, { className: "h-10 w-full" }), _jsx(Skeleton, { className: "h-10 w-full" })] })) : gefilterd.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen orders gevonden." })) : (_jsx("div", { className: "max-h-[420px] overflow-y-auto rounded-md border border-border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "sticky top-0 bg-muted/60 text-xs text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Order" }), _jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Klant" }), _jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Bron" }), _jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Levering" }), _jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Stand" }), _jsx("th", { className: "px-2 py-1.5 text-right font-medium", children: "Versies" }), _jsx("th", { className: "px-2 py-1.5 text-right font-medium", children: "Fouten" }), _jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Laatste activiteit" })] }) }), _jsx("tbody", { children: gefilterd.map((r) => {
+                                        const st = orderStand(r);
+                                        const actief = r.orderNumber === orderRef;
+                                        return (_jsxs("tr", { className: `cursor-pointer border-t border-border hover:bg-muted/40 ${actief ? "bg-primary/10" : ""}`, onClick: () => kies(r.orderNumber), children: [_jsx("td", { className: "px-2 py-1.5 font-medium", children: _jsxs("span", { className: "inline-flex items-center gap-1", children: [actief ? _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : _jsx(ChevronRight, { className: "h-3.5 w-3.5" }), r.orderNumber] }) }), _jsx("td", { className: "max-w-[180px] truncate px-2 py-1.5", children: r.customerName ?? "—" }), _jsx("td", { className: "px-2 py-1.5", children: r.orderSource === "floriday" ? "Floriday" : r.orderSource ? "Eigen verkoop" : "—" }), _jsx("td", { className: "px-2 py-1.5", children: r.deliveryDate ?? "—" }), _jsxs("td", { className: "px-2 py-1.5", children: [_jsx(Badge, { variant: st.kleur, children: st.label }), r.reasonCode && st.kleur === "destructive" && (_jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: redenTekst(r.reasonCode) }))] }), _jsx("td", { className: "px-2 py-1.5 text-right tabular-nums", children: r.versions }), _jsx("td", { className: `px-2 py-1.5 text-right tabular-nums ${r.errors > 0 ? "text-destructive" : ""}`, children: r.errors }), _jsx("td", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: tijd(r.lastAt ?? r.createdAt) })] }, r.orderNumber));
+                                    }) })] }) })), orderRef && (_jsxs("div", { className: "space-y-3 rounded-md border border-primary/40 bg-primary/5 p-3", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: orderRef }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [versies.order?.customerName ?? "", versies.order?.status ? ` · status: ${versies.order.status}` : "", versies.carts && versies.carts.total > 0
+                                                        ? ` · karren: ${versies.carts.total} (${versies.carts.printed} geprint, ${versies.carts.controlled} gecontroleerd)`
+                                                        : "", versies.order?.planLockedAt ? " · indeling bevroren" : ""] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { size: "sm", onClick: () => void opnieuwDoorFlow(orderRef), disabled: herbezig, children: [_jsx(RotateCcw, { className: "mr-1 h-4 w-4" }), herbezig ? "Bezig…" : "Opnieuw door de flowchart"] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Order sluiten", onClick: () => kies(orderRef), children: _jsx(X, { className: "h-4 w-4" }) })] })] }), versies.error && _jsx("p", { className: "text-sm text-destructive", children: versies.error }), versies.loading ? (_jsx(Skeleton, { className: "h-16 w-full" })) : veiligeVersies.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen herberekening vastgelegd voor deze order. De kaart toont waar de order nu staat." })) : (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("p", { className: "text-xs font-medium text-muted-foreground", children: [veiligeVersies.length, " herberekening", veiligeVersies.length === 1 ? "" : "en", " \u2014 nieuwste bovenaan"] }), veiligeVersies.map((v) => (_jsx(VersieRij, { versie: v, laatste: v.id === laatsteId, gekozen: (gekozen?.id ?? (versieId ? null : laatsteId)) === v.id, onKies: () => setVersieId((cur) => (cur === v.id ? null : v.id)) }, v.id)))] })), (gekozen ?? (versieId ? null : veiligeVersies[0])) && (_jsx(VersieDetail, { orderRef: orderRef, versie: (gekozen ?? veiligeVersies[0]), route: bepaalRoute(gekozen ?? veiligeVersies[0], versies.order, versies.carts, (gekozen ?? veiligeVersies[0])?.id === laatsteId) }))] }))] })] }));
+}
+function VersieRij({ versie, laatste, gekozen, onKies, }) {
+    const st = VERSIE_STATUS[(versie.status ?? "pending").toLowerCase()] ?? { label: versie.status ?? "—", kleur: "outline" };
+    const d = duur(versie.claimedAt ?? versie.startedAt, versie.finishedAt);
+    return (_jsxs("button", { type: "button", onClick: onKies, className: `flex w-full flex-wrap items-center gap-2 rounded-md border px-2 py-1.5 text-left text-sm hover:bg-muted/40 ${gekozen ? "border-primary bg-background ring-1 ring-primary" : "border-border bg-background/60"}`, children: [_jsxs("span", { className: "w-20 font-medium", children: ["Versie ", versie.nr] }), _jsx(Badge, { variant: st.kleur, children: st.label }), laatste && _jsx(Badge, { variant: "outline", children: "laatste" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [_jsx(Clock, { className: "mr-1 inline h-3 w-3" }), tijd(versie.startedAt), d ? ` · ${d}` : ""] }), versie.reason && !/^(insert|update|delete)$/i.test(versie.reason) && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["aanleiding: ", versie.reason] })), _jsxs("span", { className: "ml-auto flex items-center gap-2 text-xs text-muted-foreground", children: [_jsxs("span", { children: [versie.events, " gebeurtenissen"] }), versie.printJobs > 0 && _jsxs("span", { children: [versie.printJobs, " print"] }), versie.errors > 0 && (_jsxs("span", { className: "text-destructive", children: [_jsx(AlertTriangle, { className: "mr-0.5 inline h-3 w-3" }), versie.errors] })), versie.attempts > 1 && _jsxs("span", { children: [versie.attempts, " pogingen"] })] }), (versie.reasonCode || versie.error) && (_jsx("p", { className: "w-full text-xs text-destructive", children: redenTekst(versie.reasonCode, versie.error) }))] }));
+}
+function VersieDetail({ orderRef, versie, route }) {
+    const { events, loading, error } = useVersieEvents(orderRef, versie);
+    const veilig = Array.isArray(events) ? events : [];
+    const [alles, setAlles] = useState(false);
+    const getoond = alles ? veilig : veilig.filter((e) => e.status !== "info" || e.phase !== "database");
+    return (_jsxs("div", { className: "space-y-2 rounded-md border border-border bg-background p-3", children: [_jsxs("div", { className: `flex items-start gap-2 rounded-md px-2 py-1.5 text-sm ${route.stuck ? "bg-destructive/10 text-destructive" : route.finished ? "bg-primary/10 text-primary" : "bg-muted text-foreground"}`, children: [route.stuck ? _jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }) : route.finished ? _jsx(CheckCircle2, { className: "mt-0.5 h-4 w-4 shrink-0" }) : _jsx(Clock, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: route.summary }), _jsx("p", { className: "text-xs opacity-80", children: "Deze route is blauw op de kaart. De kaart toont de werkwijze van nu; welke keuze binnen een stap destijds gold is niet apart bewaard." })] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "text-xs font-medium text-muted-foreground", children: ["Gebeurtenissen van versie ", versie.nr, " (", getoond.length, getoond.length !== veilig.length ? ` van ${veilig.length}` : "", ")"] }), veilig.length !== getoond.length || alles ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setAlles((v) => !v), children: alles ? "Alleen belangrijk" : "Alles tonen (ook databaseregels)" })) : null] }), error && _jsx("p", { className: "text-sm text-destructive", children: error }), loading ? (_jsx(Skeleton, { className: "h-20 w-full" })) : getoond.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen gebeurtenissen vastgelegd voor deze versie." })) : (_jsx("div", { className: "max-h-[520px] space-y-1 overflow-y-auto pr-1", children: getoond.map((e) => (_jsx(Gebeurtenis, { event: e }, e.id))) }))] }));
+}

package/dist-lib/components/FlowPage.d.ts

@@ -0,0 +1,2 @@
+export declare function FlowPage(): import("react").JSX.Element;
+//# sourceMappingURL=FlowPage.d.ts.map

package/dist-lib/components/FlowPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowPage.d.ts","sourceRoot":"","sources":["../../src/components/FlowPage.tsx"],"names":[],"mappings":"AAoEA,wBAAgB,QAAQ,gCAitBvB"}

package/dist-lib/components/FlowPage.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/FlowPage.tsx — visuele flow van de Logistiek Engine
+// ============================================================================
+// Het schema wordt opgebouwd uit dezelfde werkwijze die de engine gebruikt
+// (WIZARD_STEPS + de opgeslagen instellingen). Klik je een stap aan, dan pas
+// je diezelfde instellingen aan; opslaan werkt door in de engine én in dit
+// schema. GEEN <Header /> hier — die levert de shell.
+// ============================================================================
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Skeleton, toast, } from "@flowselections/core";
+import { CheckCircle2, RefreshCw, Save, X } from "lucide-react";
+import { fieldVisible, } from "../lib/ruleEngineSchema";
+import { WIZARD_STEPS, groupSummary, isAdvancedField } from "../lib/ruleEngineWizard";
+import { buildFlowTree, pasMergeOverridesToe, verbergEindnodeLijnen, verduidelijkVerzendbrief, mergeVoorwaarde, MERGE_MAX_WACHT_MINUTEN, } from "../lib/flowTree";
+import { applyRoute } from "../lib/flowRoute";
+import { ontbrekendeJourneyEvents } from "../lib/flowJourney";
+import { FlowCanvas } from "./FlowCanvas";
+import { FlowOrders } from "./FlowOrders";
+import { OrderJourneyBar } from "./OrderJourneyBar";
+import { OrderStopBanner } from "./OrderStopBanner";
+import { useOrderNodeTrace } from "../hooks/useOrderNodeTrace";
+import { useShippingNoteDiagnose } from "../hooks/useShippingNoteDiagnose";
+import { stopReden, verzendbriefStop } from "../lib/stopReden";
+import { useOrderTraceStand } from "../hooks/useOrderTrace";
+import { useRuleEngine } from "../hooks/useRuleEngine";
+import { useLogistiekStrategieen } from "../hooks/useLogistiekStrategieen";
+import { useRecalcJob, phaseLabel } from "../hooks/useRecalcJob";
+import { RuleFieldInput } from "./rule-engine/RuleFieldInput";
+import { CollapsibleGroup } from "./rule-engine/CollapsibleGroup";
+import { ConditionsEditor } from "./rule-engine/ConditionsEditor";
+const WIDE_TYPES = ["priority", "toggle", "days", "radio", "textarea", "guidance"];
+function fieldClass(field) {
+    return WIDE_TYPES.includes(field.type) ? "md:col-span-2" : "";
+}
+export function FlowPage() {
+    const { configs, activeConfig, activeId, setActiveId, loading, saving, error, patchSettings, saveConfig, activateConfig, } = useRuleEngine();
+    const { items: strategieen } = useLogistiekStrategieen();
+    const [openStep, setOpenStep] = useState(null);
+    // Naam van de werkwijze = de naam uit het Werkwijzen-overzicht (strategie),
+    // zodat beide schermen exact hetzelfde zeggen.
+    const werkwijzeNaam = (config) => {
+        if (!config)
+            return "";
+        const lijst = Array.isArray(strategieen) ? strategieen : [];
+        const match = config.strategy_id
+            ? lijst.find((s) => s.id === config.strategy_id)
+            : undefined;
+        return match?.name ?? config.name.replace(/^Werkwijze\s+/i, "");
+    };
+    const settings = activeConfig?.settings ?? {};
+    // Handmatige keuzes op de samenkomstpunten (de ruitjes) horen bij de
+    // werkwijze, zodat de kaart voor iedereen hetzelfde blijft.
+    const mergeOverrides = useMemo(() => {
+        const raw = (settings?.["flow_weergave"]?.fields ?? {})["merges"];
+        return raw && typeof raw === "object" ? raw : {};
+    }, [settings]);
+    const ruweTree = useMemo(() => buildFlowTree(settings, mergeOverrides), [settings, mergeOverrides]);
+    const basisTree = useMemo(() => pasMergeOverridesToe(ruweTree, mergeOverrides), [ruweTree, mergeOverrides]);
+    const [mergeId, setMergeId] = useState(null);
+    const zetMergeOverride = (id, patch) => {
+        if (!activeConfig)
+            return;
+        const huidig = settings["flow_weergave"] ?? { fields: {}, conditions: [] };
+        const merges = { ...mergeOverrides, [id]: { ...(mergeOverrides[id] ?? {}), ...patch } };
+        patchSettings(activeConfig.id, {
+            ...settings,
+            flow_weergave: { ...huidig, fields: { ...(huidig.fields ?? {}), merges } },
+        });
+    };
+    // Gekozen order/versie: de echte reis wordt als laag over de kaart gelegd.
+    const [orderRoute, setOrderRoute] = useState(null);
+    const [routeLabel, setRouteLabel] = useState(null);
+    const [orderRef, setOrderRef] = useState(null);
+    const [versie, setVersie] = useState(null);
+    const [traceNodeId, setTraceNodeId] = useState(null);
+    const kaartRef = useRef(null);
+    const onRoute = useCallback((route, label, ref, v) => {
+        setOrderRoute(route);
+        setRouteLabel(label);
+        setOrderRef(ref);
+        setVersie(v);
+        setTraceNodeId(null);
+        if (route && label) {
+            // De kaart staat boven de orderlijst: breng hem meteen in beeld.
+            setTimeout(() => kaartRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 50);
+        }
+    }, []);
+    const { groepen, reis, loading: traceLoading } = useOrderNodeTrace(orderRef, versie);
+    const { stand: orderStand } = useOrderTraceStand(orderRef);
+    // Auditpunt 5: het openen van een order verandert nooit iets aan die order.
+    // De keuzevakjes die de Engine zelf niet vastlegt worden hier alléén afgeleid
+    // en getoond (herkenbaar als "automatisch afgeleid"). Het echte logboek wordt
+    // bijgewerkt door de Engine zelf: bij een herberekening en in elke planronde.
+    // Samenkomstpunten waar deze order wacht; daar loopt de route niet voorbij.
+    const wachtpuntenRef = useRef(new Set());
+    const [wachtpunten, setWachtpunten] = useState(() => new Set());
+    const alleGroepen = useMemo(() => {
+        if (!orderRef || traceLoading || groepen.size === 0)
+            return groepen;
+        const vastgelegd = new Set(groepen.keys());
+        const events = ontbrekendeJourneyEvents({
+            tree: basisTree,
+            orderRef,
+            orderSource: orderRoute?.source ?? null,
+            vastgelegd,
+            wachtpunten,
+        });
+        if (events.length === 0)
+            return groepen;
+        const samen = new Map(groepen);
+        for (const e of events) {
+            if (!e.nodeId || samen.has(e.nodeId))
+                continue;
+            samen.set(e.nodeId, {
+                nodeId: e.nodeId,
+                events: [],
+                aantal: 0,
+                eerste: null,
+                laatste: null,
+                duurMs: null,
+                status: "geslaagd",
+                pogingen: 0,
+                reden: e.reason ?? null,
+                errorClass: null,
+                volgendeStap: e.nextStep ?? null,
+                afgeleid: true,
+            });
+        }
+        return samen;
+    }, [groepen, traceLoading, orderRef, basisTree, orderRoute?.source, wachtpunten]);
+    const overlay = useMemo(() => applyRoute(basisTree, orderRoute, orderRef ? alleGroepen : null, orderStand), [basisTree, orderRoute, alleGroepen, orderRef, orderStand]);
+    useEffect(() => {
+        // Wachtpunten komen uit de kaart en sturen de volgende afleiding aan.
+        const nieuw = overlay.wachtpunten;
+        const oud = wachtpuntenRef.current;
+        const gelijk = nieuw.size === oud.size && [...nieuw].every((id) => oud.has(id));
+        if (gelijk)
+            return;
+        wachtpuntenRef.current = nieuw;
+        setWachtpunten(new Set(nieuw));
+    }, [overlay]);
+    /** Het laatste vakje van de route, met de reden waarom het daar ophoudt. */
+    const eindpunt = useMemo(() => {
+        for (const [nodeId, m] of overlay.markers) {
+            if (m.eindpunt && m.stop)
+                return { nodeId, stop: m.stop };
+        }
+        return null;
+    }, [overlay]);
+    // Zonder geselecteerde order: geen doorlopende lijnen onder een eindstation.
+    // Met een order: het verzendbriefvakje toont de tekst die bij die herkomst hoort.
+    const tree = useMemo(() => orderRoute
+        ? verduidelijkVerzendbrief(overlay.tree, orderRoute.source)
+        : verbergEindnodeLijnen(overlay.tree), [overlay.tree, orderRoute]);
+    // Alleen-lezen: waarom wacht deze order nog op zijn verzendbrief?
+    const { diagnose: verzendbrief } = useShippingNoteDiagnose(orderRef);
+    const verzendbriefReden = useMemo(() => verzendbriefStop(verzendbrief), [verzendbrief]);
+    // Vakjes die vastlopen, met de reden erbij: die krijgen een foutmelding op de
+    // kaart en in het zijpaneel. Alleen weergave; er verandert niets aan de order.
+    const problemen = useMemo(() => {
+        const map = new Map();
+        if (!orderRef)
+            return map;
+        for (const [nodeId, groep] of alleGroepen) {
+            if (groep.status === "mislukt") {
+                map.set(nodeId, stopReden({ nodeId, groep, stand: orderStand }));
+            }
+        }
+        if (verzendbriefReden) {
+            for (const n of tree.nodes) {
+                if (n.id.includes(":verzendbrief:") || n.id.endsWith(":verzendbrief")) {
+                    map.set(n.id, verzendbriefReden);
+                }
+            }
+        }
+        return map;
+    }, [orderRef, alleGroepen, orderStand, verzendbriefReden, tree]);
+    // Gegevens voor het ruitje-paneel komen uit de kaart zonder overrides, zodat
+    // een weggehaald ruitje ook weer terug te zetten is.
+    const mergeNode = mergeId ? (ruweTree.nodes.find((n) => n.id === mergeId) ?? null) : null;
+    const mergeVast = !!mergeId && (mergeId.startsWith("samen:stap:") || mergeId === "__bron_merge");
+    const mergeWeg = !!mergeId && mergeOverrides[mergeId]?.verwijderd === true;
+    const naamVan = (id) => {
+        const n = ruweTree.nodes.find((x) => x.id === id);
+        if (!n)
+            return id;
+        if (n.label)
+            return n.label;
+        return n.kind === "merge" ? "samenkomst" : id;
+    };
+    const mergeLijnen = mergeId
+        ? ruweTree.edges
+            .filter((e) => e.kind === "flow" && e.to === mergeId)
+            .map((e) => ({ id: e.id, naam: e.label ? `${naamVan(e.from)} — ${e.label}` : naamVan(e.from) }))
+        : [];
+    const mergeKeuze = mergeId ? mergeVoorwaarde(ruweTree, mergeId, mergeOverrides[mergeId]) : null;
+    // Altijd de opgeloste voorwaarde tonen: een opgeslagen "alle" die hier
+    // onmogelijk is, valt terug op "één" en wordt ook zo weergegeven.
+    const mergeWanneer = mergeKeuze?.wanneer ?? "een";
+    const mergeUitsluitend = mergeKeuze?.uitsluitend === true;
+    const alleOnmogelijkOpgeslagen = mergeUitsluitend && mergeOverrides[mergeId ?? ""]?.wanneer === "alle";
+    const weggehaaldeRuitjes = Object.entries(mergeOverrides)
+        .filter(([, k]) => k?.verwijderd)
+        .map(([id]) => id);
+    const step = WIZARD_STEPS.find((s) => s.id === openStep) ?? null;
+    const stepValues = step ? (settings?.[step.storeId]?.fields ?? {}) : {};
+    const stepConditions = step
+        ? (settings?.[step.storeId]?.conditions ?? [])
+        : [];
+    const setFieldValue = (key, value) => {
+        if (!activeConfig || !step)
+            return;
+        patchSettings(activeConfig.id, {
+            ...settings,
+            [step.storeId]: {
+                ...(settings[step.storeId] ?? { fields: {}, conditions: [] }),
+                fields: { ...stepValues, [key]: value },
+            },
+        });
+    };
+    // Keuze veranderen vanuit een ruit in het schema (elke stap, niet alleen de
+    // geopende): schrijft naar dezelfde werkwijze die de engine gebruikt.
+    const setFieldByStore = (storeId, key, value) => {
+        if (!activeConfig)
+            return;
+        const huidig = settings[storeId] ?? { fields: {}, conditions: [] };
+        patchSettings(activeConfig.id, {
+            ...settings,
+            [storeId]: { ...huidig, fields: { ...(huidig.fields ?? {}), [key]: value } },
+        });
+    };
+    const setConditions = (conditions) => {
+        if (!activeConfig || !step)
+            return;
+        patchSettings(activeConfig.id, {
+            ...settings,
+            [step.storeId]: {
+                ...(settings[step.storeId] ?? { fields: {}, conditions: [] }),
+                conditions,
+            },
+        });
+    };
+    const { job, starting, startRecalculation } = useRecalcJob();
+    const running = job?.status === "running";
+    const [busy, setBusy] = useState(false);
+    const opslaan = async (opnieuwBerekenen) => {
+        if (!activeConfig)
+            return;
+        setBusy(true);
+        try {
+            await saveConfig(activeConfig);
+            if (opnieuwBerekenen) {
+                if (!activeConfig.is_active)
+                    await activateConfig(activeConfig.id);
+                await startRecalculation(null);
+                toast.success("Opgeslagen — de herberekening loopt op de achtergrond");
+            }
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Opslaan is niet gelukt. Probeer het nog een keer.");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const veiligeConfigs = Array.isArray(configs) ? configs : [];
+    return (_jsxs("div", { className: "space-y-4 p-6", children: [_jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold tracking-tight", children: "Flow van de Logistiek Engine" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Alle mogelijke routes door de engine in \u00E9\u00E9n kaart. De gekleurde route geldt nu; kies in een beslistegel iets anders en de actieve tak springt direct mee." })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [veiligeConfigs.length > 1 && (_jsxs(Select, { value: activeId ?? "", onValueChange: (v) => setActiveId(v), children: [_jsx(SelectTrigger, { className: "w-56", children: _jsx(SelectValue, { placeholder: "Kies een werkwijze" }) }), _jsx(SelectContent, { children: veiligeConfigs.map((c) => (_jsxs(SelectItem, { value: c.id, children: [werkwijzeNaam(c), c.is_active ? " (actief)" : ""] }, c.id))) })] })), _jsxs(Button, { variant: "outline", size: "sm", disabled: !activeConfig || saving || busy, onClick: () => void opslaan(false), children: [_jsx(Save, { className: "h-4 w-4" }), " Opslaan"] }), _jsxs(Button, { size: "sm", disabled: !activeConfig || saving || busy || starting || running, onClick: () => void opslaan(true), children: [busy || starting || running ? (_jsx(RefreshCw, { className: "h-4 w-4 animate-spin" })) : (_jsx(CheckCircle2, { className: "h-4 w-4" })), running ? `${phaseLabel(job?.phase)}…` : "Opslaan & opnieuw berekenen"] })] })] }), error && (_jsx("p", { className: "rounded-md border border-destructive/50 bg-destructive/5 px-3 py-2 text-sm text-destructive", children: "De werkwijze kon niet worden geladen. Probeer het opnieuw." })), loading ? (_jsxs("div", { className: "space-y-3", children: [_jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" })] })) : !activeConfig ? (_jsx(Card, { children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Nog geen werkwijze" }), _jsx(CardDescription, { children: "Maak eerst een werkwijze aan bij Werkwijze instellen; daarna verschijnt de flow hier vanzelf." })] }) })) : (_jsxs("div", { className: `grid gap-6 ${openStep || mergeId ? "lg:grid-cols-[minmax(0,1fr)_420px]" : "lg:grid-cols-1"}`, children: [_jsxs("div", { className: "space-y-2", ref: kaartRef, children: [_jsxs("p", { className: "text-xs text-muted-foreground", children: ["werkwijze: ", werkwijzeNaam(activeConfig), activeConfig.is_active ? " (actief)" : " (concept)"] }), orderRef && (_jsx(OrderStopBanner, { orderRef: orderRef, stop: eindpunt?.stop ?? null, stopNode: eindpunt?.nodeId ?? null, onNode: setTraceNodeId })), verzendbriefReden && (_jsxs("div", { className: `rounded-md border px-3 py-2 text-sm ${verzendbriefReden.soort === "mislukt"
+                                    ? "border-destructive/50 bg-destructive/5"
+                                    : "border-amber-500/40 bg-amber-500/5"}`, children: [_jsxs("p", { className: "font-medium", children: [verzendbriefReden.titel, ": ", verzendbriefReden.reden] }), verzendbriefReden.feiten.length > 0 && (_jsx("p", { className: "text-muted-foreground", children: verzendbriefReden.feiten.join(" · ") })), verzendbriefReden.volgendeStap && (_jsxs("p", { className: "text-muted-foreground", children: ["Wat moet er gebeuren: ", verzendbriefReden.volgendeStap] }))] })), _jsx(FlowCanvas, { tree: tree, selectedStepId: openStep, settings: settings, markers: overlay.markers, problemen: problemen, nodeTrace: orderRef ? alleGroepen : null, routeLabel: routeLabel, routeSummary: orderRoute?.summary ?? null, traceNodeId: traceNodeId, onTraceNode: setTraceNodeId, onClearRoute: () => onRoute(null, null, null, null), mergeId: mergeId, onSelectMerge: (id) => setMergeId((v) => (v === id ? null : id)), onSelectStep: (stepId) => setOpenStep((v) => (v === stepId ? null : stepId)), onChangeChoice: setFieldByStore }), orderRef && (_jsx(OrderJourneyBar, { reis: reis, actiefNodeId: traceNodeId, onKies: setTraceNodeId })), weggehaaldeRuitjes.length > 0 && (_jsxs("p", { className: "text-xs text-muted-foreground", children: [weggehaaldeRuitjes.length, " samenkomstpunt", weggehaaldeRuitjes.length === 1 ? "" : "en", " weggehaald.", " ", _jsx("button", { type: "button", className: "underline underline-offset-2", onClick: () => {
+                                            if (!activeConfig)
+                                                return;
+                                            const huidig = settings["flow_weergave"] ?? { fields: {}, conditions: [] };
+                                            const merges = {};
+                                            for (const [id, keuze] of Object.entries(mergeOverrides)) {
+                                                merges[id] = { ...keuze, verwijderd: false };
+                                            }
+                                            patchSettings(activeConfig.id, {
+                                                ...settings,
+                                                flow_weergave: { ...huidig, fields: { ...(huidig.fields ?? {}), merges } },
+                                            });
+                                        }, children: "Allemaal terugzetten" })] })), orderRef && !traceLoading && reis.length === 0 && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Voor deze order zijn nog geen stappen per vakje vastgelegd; de kaart toont dan de afgeleide route." }))] }), mergeNode && (_jsx("aside", { className: "space-y-3 lg:sticky lg:top-4", children: _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Samenkomstpunt" }), _jsx(CardDescription, { children: "Hier komen lijnen weer samen tot \u00E9\u00E9n route. Het punt zelf doet niets met een order." })] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Paneel sluiten", onClick: () => setMergeId(null), children: _jsx(X, { className: "h-4 w-4" }) })] }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "space-y-2 rounded-md border border-border p-2", children: [_jsx("p", { className: "text-sm font-medium", children: "Wanneer mag de flow verder?" }), _jsxs(Select, { value: mergeWanneer, onValueChange: (v) => {
+                                                        if (v === "alle" && mergeUitsluitend)
+                                                            return;
+                                                        zetMergeOverride(mergeNode.id, {
+                                                            wanneer: v,
+                                                            ...(v === "specifiek" && !mergeOverrides[mergeNode.id]?.verplichteLijn
+                                                                ? { verplichteLijn: mergeLijnen[0]?.id }
+                                                                : {}),
+                                                        });
+                                                    }, children: [_jsx(SelectTrigger, { className: "h-9 w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "een", children: "Zodra \u00E9\u00E9n flow klaar is" }), _jsx(SelectItem, { value: "alle", disabled: mergeUitsluitend, children: "Pas als alle flows klaar zijn" }), _jsx(SelectItem, { value: "specifiek", children: "Als een specifieke flow klaar is" })] })] }), mergeUitsluitend && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Deze lijnen sluiten elkaar uit: een order komt maar via \u00E9\u00E9n van ze binnen. Wachten op alle flows kan hier dus nooit \u2014 die keuze is niet beschikbaar." })), alleOnmogelijkOpgeslagen && (_jsx("p", { className: "text-xs text-amber-700", children: "\u201CPas als alle flows klaar zijn\u201D was hier opgeslagen, maar is onmogelijk. Er is terugezet op: zodra \u00E9\u00E9n flow klaar is." })), mergeWanneer === "specifiek" && (_jsxs(Select, { value: mergeOverrides[mergeNode.id]?.verplichteLijn ?? "", onValueChange: (v) => zetMergeOverride(mergeNode.id, { verplichteLijn: v }), children: [_jsx(SelectTrigger, { className: "h-9 w-full", children: _jsx(SelectValue, { placeholder: "Kies de verplichte flow" }) }), _jsx(SelectContent, { children: mergeLijnen.map((l) => (_jsx(SelectItem, { value: l.id, children: l.naam }, l.id))) })] })), mergeWanneer !== "een" && (_jsxs("label", { className: "flex items-center justify-between gap-2 text-xs text-muted-foreground", children: [_jsx("span", { children: "Ga na zoveel minuten toch verder" }), _jsx("input", { type: "number", min: 1, className: "h-8 w-20 rounded-md border border-border bg-background px-2 text-right text-xs", value: mergeOverrides[mergeNode.id]?.maxWachtMinuten ?? MERGE_MAX_WACHT_MINUTEN, onChange: (e) => zetMergeOverride(mergeNode.id, {
+                                                                maxWachtMinuten: Math.max(1, Number(e.target.value) || MERGE_MAX_WACHT_MINUTEN),
+                                                            }) })] })), mergeKeuze?.terugval && (_jsx("p", { className: "text-xs text-amber-700", children: "De gekozen flow bestaat niet meer of is uitgeschakeld; zolang dat zo is, gaat de flow verder zodra \u00E9\u00E9n flow klaar is." })), _jsx("p", { className: "text-xs text-muted-foreground", children: "Lijnen die nu uitgeschakeld zijn of op \u201CStopt hier\u201D staan, tellen niet mee. Zo blijft de flow nooit wachten op een tak die toch nooit loopt." })] }), _jsx(Button, { variant: "outline", size: "sm", disabled: mergeVast, onClick: () => zetMergeOverride(mergeNode.id, { verwijderd: !mergeWeg }), children: mergeWeg ? "Ruitje terugzetten" : "Ruitje weghalen" }), mergeVast && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Dit punt houdt de doorgaande route tussen de stappen heel en kan niet worden weggehaald." })), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", children: "Binnenkomende lijnen" }), mergeLijnen.length === 0 && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Er komt hier niets binnen." })), mergeLijnen.map((lijn) => {
+                                                    const stand = mergeOverrides[mergeNode.id]?.lijnen?.[lijn.id] ?? "door";
+                                                    return (_jsxs("div", { className: "flex items-center justify-between gap-2 rounded-md border border-border px-2 py-1.5", children: [_jsx("span", { className: "truncate text-xs", children: lijn.naam }), _jsxs(Select, { value: stand, onValueChange: (v) => zetMergeOverride(mergeNode.id, {
+                                                                    lijnen: {
+                                                                        ...(mergeOverrides[mergeNode.id]?.lijnen ?? {}),
+                                                                        [lijn.id]: v,
+                                                                    },
+                                                                }), children: [_jsx(SelectTrigger, { className: "h-8 w-36", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "door", children: "Gaat door" }), _jsx(SelectItem, { value: "stop", children: "Stopt hier" })] })] })] }, lijn.id));
+                                                }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Staat een lijn op \u201CStopt hier\u201D, dan gaat een order die via die lijn binnenkomt niet verder; de route eindigt op dat punt." })] }), _jsx("div", { className: "flex flex-wrap gap-2 pt-1", children: _jsxs(Button, { variant: "outline", size: "sm", disabled: saving || busy, onClick: () => void opslaan(false), children: [_jsx(Save, { className: "h-4 w-4" }), " Opslaan"] }) })] })] }) })), step && (_jsx("aside", { className: "space-y-3 lg:sticky lg:top-4 lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto", children: _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: step.label }), _jsx(CardDescription, { children: step.description })] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Paneel sluiten", onClick: () => setOpenStep(null), children: _jsx(X, { className: "h-4 w-4" }) })] }) }), _jsxs(CardContent, { className: "space-y-3", children: [step.groups.map((group, groupIndex) => {
+                                            const visibleFields = group.fields.filter((field) => fieldVisible(field, stepValues, settings));
+                                            if (visibleFields.length === 0)
+                                                return null;
+                                            const basicFields = visibleFields.filter((f) => !isAdvancedField(f));
+                                            const advancedFields = visibleFields.filter((f) => isAdvancedField(f));
+                                            const isLastGroup = groupIndex === step.groups.length - 1;
+                                            return (_jsxs(CollapsibleGroup, { title: group.label, help: group.description, summary: groupSummary(group, stepValues), defaultOpen: groupIndex === 0, children: [basicFields.length > 0 && (_jsx("div", { className: "grid gap-4 md:grid-cols-2", children: basicFields.map((field) => (_jsx("div", { className: fieldClass(field), children: _jsx(RuleFieldInput, { field: field, value: stepValues[field.key], stepValues: stepValues, onChange: (value) => setFieldValue(field.key, value) }) }, field.key))) })), (advancedFields.length > 0 || (step.showConditions && isLastGroup)) && (_jsxs("details", { className: "rounded-lg border border-dashed border-border", children: [_jsx("summary", { className: "cursor-pointer px-3 py-2 text-sm font-medium text-muted-foreground", children: "Geavanceerd" }), _jsxs("div", { className: "space-y-4 border-t border-border px-3 py-4", children: [advancedFields.length > 0 && (_jsx("div", { className: "grid gap-4 md:grid-cols-2", children: advancedFields.map((field) => (_jsx("div", { className: fieldClass(field), children: _jsx(RuleFieldInput, { field: field, value: stepValues[field.key], stepValues: stepValues, onChange: (value) => setFieldValue(field.key, value) }) }, field.key))) })), step.showConditions && isLastGroup && (_jsx(ConditionsEditor, { conditions: stepConditions, onChange: setConditions }))] })] }))] }, group.id));
+                                        }), _jsxs("div", { className: "flex flex-wrap gap-2 pt-1", children: [_jsxs(Button, { variant: "outline", size: "sm", disabled: saving || busy, onClick: () => void opslaan(false), children: [_jsx(Save, { className: "h-4 w-4" }), " Opslaan"] }), _jsxs(Button, { size: "sm", disabled: saving || busy, onClick: () => void opslaan(true), children: [_jsx(CheckCircle2, { className: "h-4 w-4" }), " Opslaan & opnieuw berekenen"] })] })] })] }) }))] })), !loading && activeConfig && _jsx(FlowOrders, { onRoute: onRoute })] }));
+}

package/dist-lib/components/GeblokkeerdeOrdersCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GeblokkeerdeOrdersCard.d.ts","sourceRoot":"","sources":["../../src/components/GeblokkeerdeOrdersCard.tsx"],"names":[],"mappings":"AA6BA,wBAAgB,sBAAsB,gCAsIrC"}
+{"version":3,"file":"GeblokkeerdeOrdersCard.d.ts","sourceRoot":"","sources":["../../src/components/GeblokkeerdeOrdersCard.tsx"],"names":[],"mappings":"AA6BA,wBAAgB,sBAAsB,gCA6KrC"}

package/dist-lib/components/GeblokkeerdeOrdersCard.js

@@ -18,7 +18,7 @@ function datum(waarde) {
     return Number.isNaN(d.getTime()) ? "—" : d.toLocaleDateString("nl-NL");
 }
 export function GeblokkeerdeOrdersCard() {
-    const { rows, overzicht, loading, error, busy, refresh, retry } = useGeblokkeerdeOrders();
+    const { rows, overzicht, loading, error, busy, refresh, retry, dubbelenOpruimen } = useGeblokkeerdeOrders();
     const [filter, setFilter] = useState("");
     const [melding, setMelding] = useState(null);
     const safeRows = Array.isArray(rows) ? rows : [];
@@ -40,5 +40,24 @@ export function GeblokkeerdeOrdersCard() {
             setMelding(e?.message ? String(e.message) : "Opnieuw proberen is niet gelukt.");
         }
     };
-    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-destructive" }), "Vastgelopen orders"] }), _jsx(CardDescription, { children: "Deze orders krijgen geen karrenindeling tot er iets aan de order verandert of je ze hier opnieuw aanbiedt." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [zichtbaar.length > 0 && (_jsxs(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => void opnieuw(zichtbaar.map((r) => r.orderId)), children: [_jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), "Alles opnieuw proberen"] })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => void refresh(), disabled: loading, children: _jsx(RefreshCw, { className: `h-4 w-4 ${loading ? "animate-spin" : ""}` }) })] })] }), _jsxs(CardContent, { className: "space-y-4", children: [overzicht?.tickStale && (_jsx("p", { className: "rounded-md bg-muted p-3 text-sm text-muted-foreground", children: "De verwerking op de achtergrond heeft zich langer dan tien minuten niet gemeld. Opnieuw proberen zet de order wel klaar, maar hij wordt pas opgepakt zodra de verwerking weer draait." })), error && _jsx("p", { className: "text-sm text-destructive", children: error }), melding && _jsx("p", { className: "text-sm text-muted-foreground", children: melding }), loading && safeRows.length === 0 ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-6 w-full" }), _jsx(Skeleton, { className: "h-6 w-full" })] })) : safeRows.length === 0 ? (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Geen vastgelopen orders. Alles is ingedeeld of staat nog in de wachtrij", overzicht ? ` (${overzicht.pending} wachtend)` : "", "."] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Badge, { variant: filter === "" ? "default" : "outline", className: "cursor-pointer", onClick: () => setFilter(""), children: ["Alles (", safeRows.length, ")"] }), codes.map(([code, aantal]) => (_jsxs(Badge, { variant: filter === code ? "default" : "outline", className: "cursor-pointer", onClick: () => setFilter(code), children: [redenLabel(code), " (", aantal, ")"] }, code)))] }), _jsx("div", { className: "divide-y rounded-md border", children: zichtbaar.map((r) => (_jsxs("div", { className: "flex items-start justify-between gap-4 p-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-medium", children: r.orderRef }), _jsx(Badge, { variant: "secondary", children: redenLabel(r.reasonCode) }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["Leverdatum ", datum(r.deliveryDate), " \u00B7 sinds ", datum(r.blockedSince)] })] }), r.reason && (_jsx("p", { className: "mt-1 line-clamp-2 text-sm text-muted-foreground", children: r.reason }))] }), _jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => void opnieuw([r.orderId]), children: "Opnieuw" })] }, r.queueId))) })] }))] })] }));
+    const opruimen = async (orderId, orderRef) => {
+        try {
+            const r = await dubbelenOpruimen(orderId);
+            if (!r.ok) {
+                setMelding(r.reden === "bevroren"
+                    ? `${orderRef} is niet aangeraakt: er is al een pakbon geprint, gescand of gecontroleerd.`
+                    : r.reden === "bezig"
+                        ? `${orderRef} wordt op dit moment al opgeruimd; probeer het zo opnieuw.`
+                        : `Opruimen van ${orderRef} is niet gelukt.`);
+                return;
+            }
+            setMelding(`${orderRef}: ${r.verwijderd} dubbele bestelregel(s) verwijderd, ${r.na} regel(s) over.` +
+                (r.meerTeDoen ? " Er staan er nog meer klaar; klik nogmaals." : "") +
+                " Klik daarna op Opnieuw om de order te laten indelen.");
+        }
+        catch (e) {
+            setMelding(e?.message ? String(e.message) : "Opruimen is niet gelukt.");
+        }
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-destructive" }), "Vastgelopen orders"] }), _jsx(CardDescription, { children: "Deze orders krijgen geen karrenindeling tot er iets aan de order verandert of je ze hier opnieuw aanbiedt." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [zichtbaar.length > 0 && (_jsxs(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => void opnieuw(zichtbaar.map((r) => r.orderId)), children: [_jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), "Alles opnieuw proberen"] })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => void refresh(), disabled: loading, children: _jsx(RefreshCw, { className: `h-4 w-4 ${loading ? "animate-spin" : ""}` }) })] })] }), _jsxs(CardContent, { className: "space-y-4", children: [overzicht?.tickStale && (_jsx("p", { className: "rounded-md bg-muted p-3 text-sm text-muted-foreground", children: "De verwerking op de achtergrond heeft zich langer dan tien minuten niet gemeld. Opnieuw proberen zet de order wel klaar, maar hij wordt pas opgepakt zodra de verwerking weer draait." })), error && _jsx("p", { className: "text-sm text-destructive", children: error }), melding && _jsx("p", { className: "text-sm text-muted-foreground", children: melding }), loading && safeRows.length === 0 ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-6 w-full" }), _jsx(Skeleton, { className: "h-6 w-full" })] })) : safeRows.length === 0 ? (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Geen vastgelopen orders. Alles is ingedeeld of staat nog in de wachtrij", overzicht ? ` (${overzicht.pending} wachtend)` : "", "."] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Badge, { variant: filter === "" ? "default" : "outline", className: "cursor-pointer", onClick: () => setFilter(""), children: ["Alles (", safeRows.length, ")"] }), codes.map(([code, aantal]) => (_jsxs(Badge, { variant: filter === code ? "default" : "outline", className: "cursor-pointer", onClick: () => setFilter(code), children: [redenLabel(code), " (", aantal, ")"] }, code)))] }), _jsx("div", { className: "divide-y rounded-md border", children: zichtbaar.map((r) => (_jsxs("div", { className: "flex items-start justify-between gap-4 p-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-medium", children: r.orderRef }), _jsx(Badge, { variant: "secondary", children: redenLabel(r.reasonCode) }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["Leverdatum ", datum(r.deliveryDate), " \u00B7 sinds ", datum(r.blockedSince)] })] }), r.reason && (_jsx("p", { className: "mt-1 line-clamp-2 text-sm text-muted-foreground", children: r.reason }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [r.reasonCode === "dubbele_regels" && (_jsx(Button, { variant: "secondary", size: "sm", disabled: busy, onClick: () => void opruimen(r.orderId, r.orderRef), children: "Dubbele regels opruimen" })), _jsx(Button, { variant: "outline", size: "sm", disabled: busy, onClick: () => void opnieuw([r.orderId]), children: "Opnieuw" })] })] }, r.queueId))) })] }))] })] }));
 }

package/dist-lib/components/InklapbaarVenster.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+export interface InklapbaarVensterProps {
+    titel: string;
+    omschrijving?: string;
+    standaardOpen?: boolean;
+    children: ReactNode;
+}
+export declare function InklapbaarVenster({ titel, omschrijving, standaardOpen, children, }: InklapbaarVensterProps): import("react").JSX.Element;
+//# sourceMappingURL=InklapbaarVenster.d.ts.map

package/dist-lib/components/InklapbaarVenster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InklapbaarVenster.d.ts","sourceRoot":"","sources":["../../src/components/InklapbaarVenster.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,YAAY,EACZ,aAAqB,EACrB,QAAQ,GACT,EAAE,sBAAsB,+BA0BxB"}

package/dist-lib/components/InklapbaarVenster.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/InklapbaarVenster.tsx — venster dat in- en uitgeklapt kan worden
+// ============================================================================
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+export function InklapbaarVenster({ titel, omschrijving, standaardOpen = false, children, }) {
+    const [open, setOpen] = useState(standaardOpen);
+    return (_jsxs("section", { className: "rounded-lg border border-border", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "flex w-full items-center justify-between gap-3 rounded-lg px-4 py-3 text-left transition-colors hover:bg-muted/60", children: [_jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block text-sm font-semibold", children: titel }), omschrijving && (_jsx("span", { className: "mt-0.5 block truncate text-xs text-muted-foreground", children: omschrijving }))] }), _jsx(ChevronDown, { className: `h-4 w-4 shrink-0 text-muted-foreground transition-transform ${open ? "rotate-180" : ""}` })] }), open && _jsx("div", { className: "border-t border-border p-4", children: children })] }));
+}

package/dist-lib/components/KardekkingCard.d.ts

@@ -0,0 +1,2 @@
+export declare function KardekkingCard(): import("react").JSX.Element;
+//# sourceMappingURL=KardekkingCard.d.ts.map

package/dist-lib/components/KardekkingCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KardekkingCard.d.ts","sourceRoot":"","sources":["../../src/components/KardekkingCard.tsx"],"names":[],"mappings":"AAkCA,wBAAgB,cAAc,gCA6C7B"}