@flowselections/logistiek-engine 1.0.53 → 1.0.90

package/dist-lib/components/FlowPage.js

@@ -7,18 +7,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // je diezelfde instellingen aan; opslaan werkt door in de engine én in dit
 // schema. GEEN <Header /> hier — die levert de shell.
 // ============================================================================
-import { useCallback, useMemo, useRef, useState } from "react";
+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 } from "../lib/flowTree";
+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";
@@ -45,7 +49,25 @@ export function FlowPage() {
         return match?.name ?? config.name.replace(/^Werkwijze\s+/i, "");
     };
     const settings = activeConfig?.settings ?? {};
-    const basisTree = useMemo(() => buildFlowTree(settings), [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);
@@ -65,8 +87,122 @@ export function FlowPage() {
         }
     }, []);
     const { groepen, reis, loading: traceLoading } = useOrderNodeTrace(orderRef, versie);
-    const overlay = useMemo(() => applyRoute(basisTree, orderRoute, orderRef ? groepen : null), [basisTree, orderRoute, groepen, orderRef]);
-    const tree = overlay.tree;
+    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
@@ -129,7 +265,40 @@ export function FlowPage() {
         }
     };
     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 ? "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, onNode: setTraceNodeId }), _jsx(FlowCanvas, { tree: tree, selectedStepId: openStep, settings: settings, markers: overlay.markers, nodeTrace: orderRef ? groepen : null, routeLabel: routeLabel, routeSummary: orderRoute?.summary ?? null, traceNodeId: traceNodeId, onTraceNode: setTraceNodeId, onClearRoute: () => onRoute(null, null, null, null), onSelectStep: (stepId) => setOpenStep((v) => (v === stepId ? null : stepId)), onChangeChoice: setFieldByStore }), orderRef && (_jsx(OrderJourneyBar, { reis: reis, actiefNodeId: traceNodeId, onKies: setTraceNodeId })), 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." }))] }), 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) => {
+    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;

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/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"}

package/dist-lib/components/KardekkingCard.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Badge, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@flowselections/core";
+import { getCartCoverage } from "../lib/cartCoverage.functions";
+const LABEL = {
+    gelijk: "Gelijk",
+    gelijk_afgerond: "Gelijk (afgerond op fust)",
+    verkeerde_karinhoud: "Op verkeerde kar",
+    geblokkeerd: "Geblokkeerd",
+    geen_kar: "Geen kar",
+    echt_verschil: "Echt verschil",
+};
+function Telling({ titel, data }) {
+    const keys = Object.keys(LABEL).filter((k) => (data[k] ?? 0) > 0);
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: titel }), keys.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "Geen regels." })) : (_jsx("div", { className: "flex flex-wrap gap-2", children: keys.map((k) => (_jsxs(Badge, { variant: k === "gelijk" || k === "gelijk_afgerond" ? "secondary" : "destructive", children: [LABEL[k], ": ", data[k]] }, k))) }))] }));
+}
+export function KardekkingCard() {
+    const fetchCoverage = useServerFn(getCartCoverage);
+    const { data, isLoading, error } = useQuery({ queryKey: ["kardekking"], queryFn: () => fetchCoverage() });
+    if (isLoading)
+        return _jsx(Skeleton, { className: "h-24 w-full" });
+    if (error || !data)
+        return _jsx("p", { className: "text-sm text-destructive", children: "Kon de controle niet ophalen." });
+    const lijst = Array.isArray(data.afwijkingen) ? data.afwijkingen : [];
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Telling, { titel: "Lopende orders", data: data.lopend }), _jsx(Telling, { titel: "Afgehandelde orders", data: data.afgehandeld }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Regels met een dubbel product op dezelfde order: ", data.dubbeleRegels, " (opgelost via de Verkoop-module)."] }), lijst.length > 0 && (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Order" }), _jsx(TableHead, { children: "Uitkomst" }), _jsx(TableHead, { className: "text-right", children: "Besteld" }), _jsx(TableHead, { className: "text-right", children: "Op kar" }), _jsx(TableHead, { children: "Opmerking" })] }) }), _jsx(TableBody, { children: lijst.slice(0, 200).map((r, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: r.order }), _jsx(TableCell, { children: LABEL[r.klasse] ?? r.klasse }), _jsx(TableCell, { className: "text-right", children: r.besteld ?? "—" }), _jsx(TableCell, { className: "text-right", children: r.planten ?? "—" }), _jsx(TableCell, { className: "text-xs text-muted-foreground", children: [r.afgehandeld ? "afgehandeld" : null, r.dubbel ? "dubbele regel" : null, r.blokkade]
+                                        .filter(Boolean)
+                                        .join(" · ") })] }, `${r.order}-${i}`))) })] }))] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"LogistiekEnginePage.d.ts","sourceRoot":"","sources":["../../src/components/LogistiekEnginePage.tsx"],"names":[],"mappings":"AAiFA,wBAAgB,mBAAmB,gCAgPlC"}
+{"version":3,"file":"LogistiekEnginePage.d.ts","sourceRoot":"","sources":["../../src/components/LogistiekEnginePage.tsx"],"names":[],"mappings":"AAuFA,wBAAgB,mBAAmB,gCAgPlC"}

package/dist-lib/components/LogistiekEnginePage.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ============================================================================
 import { useState } from "react";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Skeleton, } from "@flowselections/core";
-import { Container, GitBranch, Pencil, Plus, Puzzle, SlidersHorizontal, Trash2, Workflow } from "lucide-react";
+import { Container, GitBranch, ListChecks, Pencil, Plus, Puzzle, SlidersHorizontal, Trash2, Workflow } from "lucide-react";
 import { Link } from "@tanstack/react-router";
 import { StrategieDialog } from "./StrategieDialog";
 import { WerkwijzeHerindelingCard } from "./WerkwijzeHerindelingCard";
@@ -26,6 +26,12 @@ const SNELKOPPELINGEN = [
         titel: "Flow",
         uitleg: "Volg per order de reis door de flow en pas de werkwijze aan.",
     },
+    {
+        to: "/logistiek-engine/wachtrij",
+        icon: ListChecks,
+        titel: "Wachtrij",
+        uitleg: "Orders die nog een karrenindeling moeten krijgen, opnieuw proberen of resetten.",
+    },
     {
         to: "/logistiek-engine/regie",
         icon: Workflow,

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

@@ -1 +1 @@
-{"version":3,"file":"LogistiekEngineQueuePage.d.ts","sourceRoot":"","sources":["../../src/components/LogistiekEngineQueuePage.tsx"],"names":[],"mappings":"AASA,wBAAgB,wBAAwB,gCASvC"}
+{"version":3,"file":"LogistiekEngineQueuePage.d.ts","sourceRoot":"","sources":["../../src/components/LogistiekEngineQueuePage.tsx"],"names":[],"mappings":"AAWA,wBAAgB,wBAAwB,gCAYvC"}

package/dist-lib/components/LogistiekEngineQueuePage.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ============================================================================
 // src/components/LogistiekEngineQueuePage.tsx — Queue: de volledige orderflow
 // ============================================================================
@@ -6,6 +6,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // GEEN <Header /> hier — die levert de shell.
 // ============================================================================
 import { OrderLogboek } from "./OrderLogboek";
+import { AfrondWachtrijCard } from "./AfrondWachtrijCard";
+import { TaakGezondheidCard } from "./TaakGezondheidCard";
 export function LogistiekEngineQueuePage() {
-    return (_jsx("div", { className: "space-y-4 p-4", children: _jsx(OrderLogboek, { titel: "Queue \u2014 volledige orderflow", omschrijving: "Per order precies wat de Logistiek Engine heeft gedaan, waarom, en wat er is gewijzigd. Alleen echt vastgelegde stappen; er wordt niets aangevuld." }) }));
+    return (_jsxs("div", { className: "space-y-4 p-4", children: [_jsx(AfrondWachtrijCard, {}), _jsx(TaakGezondheidCard, {}), _jsx(OrderLogboek, { titel: "Queue \u2014 volledige orderflow", omschrijving: "Per order precies wat de Logistiek Engine heeft gedaan, waarom, en wat er is gewijzigd. Alleen echt vastgelegde stappen; er wordt niets aangevuld." })] }));
 }

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

@@ -1,11 +1,14 @@
 import { type NodeTraceGroep } from "../lib/nodeTrace";
+import type { StopReden } from "../lib/stopReden";
 interface Props {
     groep: NodeTraceGroep;
+    /** Gevuld als de reis van de order bij dit vakje ophoudt. */
+    stop?: StopReden | null;
     orderLabel: string | null;
     debug: boolean;
     onDebug: (aan: boolean) => void;
     onClose: () => void;
 }
-export declare function NodeTracePanel({ groep, orderLabel, debug, onDebug, onClose }: Props): import("react").JSX.Element;
+export declare function NodeTracePanel({ groep, stop, orderLabel, debug, onDebug, onClose }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=NodeTracePanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NodeTracePanel.d.ts","sourceRoot":"","sources":["../../src/components/NodeTracePanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,kBAAkB,CAAC;AAa1B,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA+CD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,KAAK,+BAyJnF"}
+{"version":3,"file":"NodeTracePanel.d.ts","sourceRoot":"","sources":["../../src/components/NodeTracePanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAYlD,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,CAAC;IACtB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA+CD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,IAAW,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,KAAK,+BA0LhG"}

package/dist-lib/components/NodeTracePanel.js

@@ -21,7 +21,7 @@ function Bundel({ item, debug }) {
     const items = Array.isArray(item.events) ? item.events : [];
     return (_jsxs("div", { className: "rounded-lg border bg-muted/30", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-start gap-3 p-3 text-left", children: [open ? (_jsx(ChevronDown, { className: "mt-1 h-4 w-4 shrink-0" })) : (_jsx(ChevronRight, { className: "mt-1 h-4 w-4 shrink-0" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-medium", children: item.label }), _jsxs(Badge, { variant: "outline", children: [item.aantal, "x"] })] }), _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Automatische gegevenswijziging \u00B7 laatste ", tijd(item.laatste)] })] })] }), open ? (_jsxs("div", { className: "space-y-2 border-t px-3 py-3", children: [items.slice(0, toon).map((e) => (_jsx(Stap, { e: e, debug: debug }, e.id))), items.length > toon ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setToon((n) => n + 25), children: ["Toon meer (", items.length - toon, ")"] })) : null] })) : null] }));
 }
-export function NodeTracePanel({ groep, orderLabel, debug, onDebug, onClose }) {
+export function NodeTracePanel({ groep, stop = null, orderLabel, debug, onDebug, onClose }) {
     const events = Array.isArray(groep.events) ? groep.events : [];
     const [toon, setToon] = useState(EERSTE_AANTAL);
     const samenvatting = useMemo(() => samenvatVak(groep), [groep]);
@@ -31,7 +31,13 @@ export function NodeTracePanel({ groep, orderLabel, debug, onDebug, onClose }) {
     const zichtbaar = debug ? ruw.slice(0, toon) : regels.slice(0, toon);
     const totaal = debug ? ruw.length : regels.length;
     const calc = samenvatting.berekening;
-    return (_jsxs("div", { className: "pointer-events-auto absolute right-3 top-16 bottom-16 z-30 flex w-[26rem] max-w-[90%] flex-col rounded-xl border border-border bg-background shadow-xl", children: [_jsxs("div", { className: "flex items-start justify-between gap-2 border-b border-border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-semibold", children: flowNodeLabel(groep.nodeId) }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: orderLabel ?? "Order" })] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Sluiten", onClick: onClose, children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [_jsxs("div", { className: "space-y-2 border-b border-border px-3 py-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { className: STATUS_KLEUR[groep.status] ?? "", children: groep.status }), samenvatting.errorClass ? (_jsx(Badge, { variant: "outline", children: FOUTSOORT_LABEL[samenvatting.errorClass] ?? samenvatting.errorClass })) : null] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Veld, { label: "Beslissing", children: uitleg.beslissing }), _jsx(Veld, { label: "Waarom", children: uitleg.waarom }), uitleg.feiten.length > 0 ? (_jsx(Veld, { label: "Bepalend", children: _jsx("span", { className: "block", children: uitleg.feiten.map((f) => (_jsx("span", { className: "block", children: f }, f))) }) })) : null, _jsx(Veld, { label: "Regel", children: uitleg.regel ?? samenvatting.regel }), _jsx(Veld, { label: "Hierna", children: samenvatting.volgendeStap }), uitleg.afgeleid ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "Afgeleid uit de registraties: de Engine legde hier nog geen besluit met reden vast." })) : null] }), calc ? (_jsxs("div", { className: "rounded-md border bg-muted/40 p-2", children: [_jsx("p", { className: "text-sm font-medium", children: "Berekening" }), _jsx(Veld, { label: "Instelling", children: calc.setting }), _jsx(Veld, { label: "Rekenstap", children: calc.formula }), _jsx(Veld, { label: "Uitkomst", children: calc.result }), _jsx(Veld, { label: "Conclusie", children: calc.conclusion })] })) : null, samenvatting.fout ? (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-2", children: [_jsx(Veld, { label: "Fout", children: samenvatting.fout }), _jsx(Veld, { label: "Uitleg", children: samenvatting.errorClass ? FOUTSOORT_UITLEG[samenvatting.errorClass] ?? null : null })] })) : null, _jsxs("div", { className: "space-y-1", children: [_jsx(Veld, { label: "Eerste", children: tijd(groep.eerste) }), _jsx(Veld, { label: "Laatste", children: tijd(groep.laatste) }), _jsx(Veld, { label: "Totale duur", children: groep.duurMs === null ? null : duur(groep.duurMs) }), _jsx(Veld, { label: "Pogingen", children: samenvatting.pogingen > 0 ? String(samenvatting.pogingen) : null }), _jsx(Veld, { label: "Volgende poging", children: samenvatting.volgendePoging ? tijd(samenvatting.volgendePoging) : null })] }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [samenvatting.aantalBeslissingen, " beslismoment", samenvatting.aantalBeslissingen === 1 ? "" : "en", " van de Engine", samenvatting.aantalAutomatisch > 0
+    return (_jsxs("div", { className: "pointer-events-auto absolute right-3 top-16 bottom-16 z-30 flex w-[26rem] max-w-[90%] flex-col rounded-xl border border-border bg-background shadow-xl", children: [_jsxs("div", { className: "flex items-start justify-between gap-2 border-b border-border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-semibold", children: flowNodeLabel(groep.nodeId) }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: orderLabel ?? "Order" })] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Sluiten", onClick: onClose, children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [stop ? (_jsxs("div", { className: `border-b px-3 py-3 ${stop.soort === "mislukt"
+                            ? "border-destructive/40 bg-destructive/5"
+                            : stop.soort === "klaar"
+                                ? "border-border bg-primary/5"
+                                : stop.soort === "nietvastgelegd"
+                                    ? "border-border bg-muted/40"
+                                    : "border-amber-500/40 bg-amber-500/5"}`, children: [_jsx("p", { className: "text-sm font-semibold", children: stop.titel }), _jsx("p", { className: "mt-1 text-sm", children: stop.reden }), stop.feiten.length > 0 ? (_jsx("ul", { className: "mt-2 space-y-0.5 text-xs text-muted-foreground", children: stop.feiten.map((f) => (_jsx("li", { children: f }, f))) })) : null, stop.volgendeStap ? (_jsxs("p", { className: "mt-2 text-xs text-muted-foreground", children: ["Wat er moet gebeuren: ", stop.volgendeStap] })) : null, stop.verouderd ? (_jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Let op: een instelling is sindsdien gewijzigd, de route kan daardoor afwijken." })) : null] })) : null, _jsxs("div", { className: "space-y-2 border-b border-border px-3 py-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { className: STATUS_KLEUR[groep.status] ?? "", children: groep.status }), samenvatting.errorClass ? (_jsx(Badge, { variant: "outline", children: FOUTSOORT_LABEL[samenvatting.errorClass] ?? samenvatting.errorClass })) : null] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Veld, { label: "Beslissing", children: uitleg.beslissing }), _jsx(Veld, { label: "Waarom", children: uitleg.waarom }), uitleg.feiten.length > 0 ? (_jsx(Veld, { label: "Bepalend", children: _jsx("span", { className: "block", children: uitleg.feiten.map((f) => (_jsx("span", { className: "block", children: f }, f))) }) })) : null, _jsx(Veld, { label: "Regel", children: uitleg.regel ?? samenvatting.regel }), _jsx(Veld, { label: "Hierna", children: samenvatting.volgendeStap }), uitleg.afgeleid ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "Afgeleid uit de registraties: de Engine legde hier nog geen besluit met reden vast." })) : null] }), calc ? (_jsxs("div", { className: "rounded-md border bg-muted/40 p-2", children: [_jsx("p", { className: "text-sm font-medium", children: "Berekening" }), _jsx(Veld, { label: "Instelling", children: calc.setting }), _jsx(Veld, { label: "Rekenstap", children: calc.formula }), _jsx(Veld, { label: "Uitkomst", children: calc.result }), _jsx(Veld, { label: "Conclusie", children: calc.conclusion })] })) : null, samenvatting.fout ? (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-2", children: [_jsx(Veld, { label: "Fout", children: samenvatting.fout }), _jsx(Veld, { label: "Uitleg", children: samenvatting.errorClass ? FOUTSOORT_UITLEG[samenvatting.errorClass] ?? null : null })] })) : null, _jsxs("div", { className: "space-y-1", children: [_jsx(Veld, { label: "Eerste", children: tijd(groep.eerste) }), _jsx(Veld, { label: "Laatste", children: tijd(groep.laatste) }), _jsx(Veld, { label: "Totale duur", children: groep.duurMs === null ? null : duur(groep.duurMs) }), _jsx(Veld, { label: "Pogingen", children: samenvatting.pogingen > 0 ? String(samenvatting.pogingen) : null }), _jsx(Veld, { label: "Volgende poging", children: samenvatting.volgendePoging ? tijd(samenvatting.volgendePoging) : null })] }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [samenvatting.aantalBeslissingen, " beslismoment", samenvatting.aantalBeslissingen === 1 ? "" : "en", " van de Engine", samenvatting.aantalAutomatisch > 0
                                         ? ` · ${samenvatting.aantalAutomatisch} automatische gegevenswijziging${samenvatting.aantalAutomatisch === 1 ? "" : "en"}`
                                         : ""] })] }), _jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Stappen in dit vakje" }), _jsx(Button, { size: "sm", variant: debug ? "default" : "outline", onClick: () => {
                                     setToon(EERSTE_AANTAL);

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

@@ -1,5 +1,12 @@
-export declare function OrderStopBanner({ orderRef, onNode }: {
+import { type StopReden } from "../lib/stopReden";
+interface Props {
     orderRef: string;
+    /** De reden bij het laatste vakje van de route (uit de flowkaart). */
+    stop?: StopReden | null;
+    /** Het vakje waar de reis ophoudt. */
+    stopNode?: string | null;
     onNode?: (nodeId: string) => void;
-}): import("react").JSX.Element | null;
+}
+export declare function OrderStopBanner({ orderRef, stop, stopNode, onNode }: Props): import("react").JSX.Element | null;
+export {};
 //# sourceMappingURL=OrderStopBanner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OrderStopBanner.d.ts","sourceRoot":"","sources":["../../src/components/OrderStopBanner.tsx"],"names":[],"mappings":"AAaA,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,sCAqC5G"}
+{"version":3,"file":"OrderStopBanner.d.ts","sourceRoot":"","sources":["../../src/components/OrderStopBanner.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG7D,UAAU,KAAK;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkBD,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAW,EAAE,QAAe,EAAE,MAAM,EAAE,EAAE,KAAK,sCAqCxF"}

package/dist-lib/components/OrderStopBanner.js

@@ -1,22 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ============================================================================
-// src/components/OrderStopBanner.tsx — waar staat deze order stil?
+// src/components/OrderStopBanner.tsx — waar staat deze order stil, en waarom?
 // ============================================================================
-// Boven de flowkaart: bij welk vakje de order gestopt is of staat te wachten,
-// waarom, sinds wanneer en wat er moet gebeuren. Alleen lezen.
+// Boven de flowkaart: bij welk vakje de reis van de order ophoudt, waarom dat
+// zo is, wat de bepalende gegevens zijn en wat er moet gebeuren. Alleen lezen.
 // ============================================================================
-import { AlertTriangle, Clock } from "lucide-react";
+import { AlertTriangle, CheckCircle2, Clock } from "lucide-react";
 import { useOrderTraceStand } from "../hooks/useOrderTrace";
 import { flowNodeLabel } from "../lib/flowNodes";
-import { FOUTSOORT_LABEL, Veld, sinds, tijd } from "./OrderTraceDetails";
-export function OrderStopBanner({ orderRef, onNode }) {
+import { stopReden } from "../lib/stopReden";
+import { Veld, sinds, tijd } from "./OrderTraceDetails";
+const KLEUR = {
+    mislukt: "border-destructive/50 bg-destructive/5",
+    wachtrij: "border-amber-500/40 bg-amber-500/5",
+    handeling: "border-amber-500/40 bg-amber-500/5",
+    nietvastgelegd: "border-border bg-muted/40",
+    klaar: "border-primary/40 bg-primary/5",
+};
+const KOP = {
+    mislukt: "ORDER GESTOPT BIJ",
+    wachtrij: "ORDER WACHT BIJ",
+    handeling: "ORDER WACHT BIJ",
+    nietvastgelegd: "FLOW STOPT BIJ",
+    klaar: "FLOW EINDIGT BIJ",
+};
+export function OrderStopBanner({ orderRef, stop = null, stopNode = null, onNode }) {
     const { stand } = useOrderTraceStand(orderRef);
-    if (!stand)
+    // Komt de reden niet uit de kaart, dan leiden we hem af uit de stand.
+    const node = stopNode ?? stand?.stuckNode ?? stand?.lastNode ?? null;
+    const reden = stop ?? (node ? stopReden({ nodeId: node, stand: stand ?? null }) : null);
+    if (!reden)
         return null;
-    const gestopt = stand.stuckStatus === "mislukt";
-    const wacht = stand.stuckStatus === "wachtend";
-    if (!gestopt && !wacht)
-        return null;
-    const node = stand.stuckNode ?? null;
-    return (_jsxs("div", { className: `rounded-lg border p-3 ${gestopt ? "border-destructive/50 bg-destructive/5" : "border-amber-500/40 bg-amber-500/5"}`, children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-semibold", children: [gestopt ? _jsx(AlertTriangle, { className: "h-4 w-4" }) : _jsx(Clock, { className: "h-4 w-4" }), gestopt ? "ORDER GESTOPT BIJ" : "ORDER WACHT BIJ", ":", " ", node ? flowNodeLabel(node) : stand.stuckStep ?? "onbekende stap", node && onNode ? (_jsx("button", { type: "button", className: "text-xs font-normal underline", onClick: () => onNode(node), children: "toon dit vakje" })) : null] }), _jsx(Veld, { label: "Reden", children: stand.stuckReason ?? stand.queueError }), _jsx(Veld, { label: "Soort", children: stand.errorClass ? FOUTSOORT_LABEL[stand.errorClass] ?? stand.errorClass : null }), _jsx(Veld, { label: "Geblokkeerd sinds", children: stand.blockedSince ? `${tijd(stand.blockedSince)} (${sinds(stand.blockedSince)})` : null }), _jsx(Veld, { label: "Automatische pogingen", children: stand.tries > 0 ? String(stand.tries) : null }), _jsx(Veld, { label: "Volgende poging", children: stand.nextAttemptAt ? tijd(stand.nextAttemptAt) : null }), _jsx(Veld, { label: "Wat moet er gebeuren", children: stand.nextStep }), _jsx(Veld, { label: "Wachtrij", children: stand.queueStatus })] }));
+    const Icoon = reden.soort === "mislukt" ? AlertTriangle : reden.soort === "klaar" ? CheckCircle2 : Clock;
+    return (_jsxs("div", { className: `rounded-lg border p-3 ${KLEUR[reden.soort]}`, children: [_jsxs("p", { className: "flex flex-wrap items-center gap-2 text-sm font-semibold", children: [_jsx(Icoon, { className: "h-4 w-4" }), KOP[reden.soort], ": ", node ? flowNodeLabel(node) : stand?.stuckStep ?? "onbekende stap", node && onNode ? (_jsx("button", { type: "button", className: "text-xs font-normal underline", onClick: () => onNode(node), children: "toon dit vakje" })) : null] }), _jsx("p", { className: "mt-1 text-sm", children: reden.reden }), reden.feiten.length > 0 ? (_jsx("ul", { className: "mt-2 space-y-0.5 text-xs text-muted-foreground", children: reden.feiten.map((f) => (_jsx("li", { children: f }, f))) })) : null, _jsx(Veld, { label: "Geblokkeerd sinds", children: stand?.blockedSince ? `${tijd(stand.blockedSince)} (${sinds(stand.blockedSince)})` : null }), _jsx(Veld, { label: "Wat moet er gebeuren", children: reden.volgendeStap }), _jsx(Veld, { label: "Wachtrij", children: stand?.queueStatus ?? null })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"OrderTraceDetails.d.ts","sourceRoot":"","sources":["../../src/components/OrderTraceDetails.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAGhE,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMlD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMnD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM/C,CAAC;AAEF,wBAAgB,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAIzD;AAED,wBAAgB,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAKzD;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAK1D;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAS1D;AAED,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,sCAOnD;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sCAQrF;AAED,+EAA+E;AAC/E,wBAAgB,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE;IAAE,CAAC,EAAE,aAAa,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,+BAmJ3G"}
+{"version":3,"file":"OrderTraceDetails.d.ts","sourceRoot":"","sources":["../../src/components/OrderTraceDetails.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAIhE,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMlD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMnD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM/C,CAAC;AAEF,wBAAgB,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAIzD;AAED,wBAAgB,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAKzD;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAK1D;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAS1D;AAED,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,sCAOnD;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sCAQrF;AAED,+EAA+E;AAC/E,wBAAgB,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE;IAAE,CAAC,EAAE,aAAa,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,+BAyJ3G"}

package/dist-lib/components/OrderTraceDetails.js

@@ -10,6 +10,7 @@ import { useState } from "react";
 import { Badge } from "@flowselections/core";
 import { AlertTriangle, ChevronDown, ChevronRight, Database, ExternalLink } from "lucide-react";
 import { flowNodeLabel } from "../lib/flowNodes";
+import { foutTekst } from "../lib/foutTekst";
 export const FOUTSOORT_LABEL = {
     technisch: "Technische fout",
     ontbrekende_gegevens: "Ontbrekende gegevens",
@@ -83,5 +84,5 @@ export function Stap({ e, debug, open: standaardOpen }) {
     const [open, setOpen] = useState(standaardOpen ?? e.status === "mislukt");
     const calc = (e.calc ?? null);
     const fout = e.status === "mislukt";
-    return (_jsxs("div", { className: `rounded-lg border ${fout ? "border-destructive/50 bg-destructive/5" : "bg-card"}`, children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-start gap-3 p-3 text-left", children: [open ? _jsx(ChevronDown, { className: "mt-1 h-4 w-4 shrink-0" }) : _jsx(ChevronRight, { className: "mt-1 h-4 w-4 shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-medium", children: e.step }), _jsx(Badge, { className: STATUS_KLEUR[e.status] ?? "", children: e.status }), e.errorClass ? _jsx(Badge, { variant: "outline", children: FOUTSOORT_LABEL[e.errorClass] ?? e.errorClass }) : null, e.nodeId ? _jsx(Badge, { variant: "outline", children: flowNodeLabel(e.nodeId) }) : null] }), _jsxs("div", { className: "mt-1 flex flex-wrap gap-x-4 text-xs text-muted-foreground", children: [_jsx("span", { children: tijd(e.createdAt) }), _jsxs("span", { children: ["Duur: ", duur(e.durationMs)] }), e.actor ? _jsxs("span", { children: ["Door: ", e.actor] }) : null, e.attempts > 0 ? _jsxs("span", { children: ["Poging ", e.attempts] }) : null] }), e.reason || e.decision ? (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: e.reason ?? e.decision })) : null] })] }), open ? (_jsxs("div", { className: "space-y-3 border-t px-3 py-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Veld, { label: "Beslissing", children: e.decision }), _jsx(Veld, { label: "Waarom", children: e.reason }), _jsx(Veld, { label: "Regel", children: e.rule }), _jsx(Veld, { label: "Volgende stap", children: e.nextStep }), _jsx(Veld, { label: "Volgende poging", children: e.nextAttemptAt ? tijd(e.nextAttemptAt) : null })] }), calc ? (_jsxs("div", { className: "rounded-md border bg-muted/40 p-3", children: [_jsx("p", { className: "text-sm font-medium", children: "Berekening" }), _jsx(Veld, { label: "Instelling", children: calc.setting }), _jsx(Veld, { label: "Rekenstap", children: calc.formula }), _jsx(Veld, { label: "Uitkomst", children: calc.result }), _jsx(Veld, { label: "Conclusie", children: calc.conclusion }), calc.values ? _jsx(Json, { waarde: calc.values }) : null] })) : null, fout ? (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-destructive", children: [_jsx(AlertTriangle, { className: "h-4 w-4" }), " Fout bij deze stap"] }), _jsx(Veld, { label: "Soort", children: e.errorClass ? FOUTSOORT_LABEL[e.errorClass] ?? e.errorClass : "Technische fout" }), _jsx(Veld, { label: "Uitleg", children: e.errorClass ? FOUTSOORT_UITLEG[e.errorClass] ?? null : null }), _jsx(Veld, { label: "Melding", children: e.error }), _jsx(Veld, { label: "Pogingen", children: e.attempts > 0 ? String(e.attempts) : null })] })) : null, e.dbTable ? (_jsxs("div", { className: "rounded-md border p-3", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(Database, { className: "h-4 w-4" }), " Gegevens gewijzigd"] }), _jsx(Veld, { label: "Tabel", children: e.dbTable }), _jsx(Veld, { label: "Actie", children: e.dbAction }), e.dbOld ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2 text-xs font-medium", children: "Voor" }), _jsx(Json, { waarde: e.dbOld })] })) : null, e.dbNew ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2 text-xs font-medium", children: "Na" }), _jsx(Json, { waarde: e.dbNew })] })) : null] })) : null, e.externalSystem ? (_jsxs("div", { className: "rounded-md border p-3", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(ExternalLink, { className: "h-4 w-4" }), " Extern systeem"] }), _jsx(Veld, { label: "Systeem", children: e.externalSystem }), _jsx(Veld, { label: "Actie", children: e.externalAction }), _jsx(Veld, { label: "Kenmerk", children: e.externalRef }), _jsx(Veld, { label: "Resultaat", children: e.externalStatus }), _jsx(Json, { waarde: e.externalResponse })] })) : null, e.reads ? (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "Gelezen gegevens" }), _jsx(Json, { waarde: e.reads })] })) : null, e.values ? (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "Gebruikte waarden" }), _jsx(Json, { waarde: e.values })] })) : null, debug ? (_jsxs("div", { className: "rounded-md border border-dashed p-3", children: [_jsx("p", { className: "text-sm font-medium", children: "Technische gegevens" }), _jsx(Veld, { label: "Trace ID", children: e.traceId }), _jsx(Veld, { label: "Gebeurtenis ID", children: e.id }), _jsx(Veld, { label: "Vakje", children: e.nodeId }), _jsx(Veld, { label: "Fase", children: e.phase }), _jsx(Veld, { label: "Kar", children: e.cartRef }), _jsx(Veld, { label: "Pakbon", children: e.slipRef }), _jsx(Veld, { label: "Regel in database", children: e.dbRecord }), _jsxs("div", { className: "mt-2 grid gap-2 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium", children: "Invoer" }), _jsx(Json, { waarde: e.input })] }), _jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium", children: "Uitvoer" }), _jsx(Json, { waarde: e.output })] })] })] })) : null] })) : null] }));
+    return (_jsxs("div", { className: `rounded-lg border ${fout ? "border-destructive/50 bg-destructive/5" : "bg-card"}`, children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-start gap-3 p-3 text-left", children: [open ? _jsx(ChevronDown, { className: "mt-1 h-4 w-4 shrink-0" }) : _jsx(ChevronRight, { className: "mt-1 h-4 w-4 shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-medium", children: e.step }), _jsx(Badge, { className: STATUS_KLEUR[e.status] ?? "", children: e.status }), e.errorClass ? _jsx(Badge, { variant: "outline", children: FOUTSOORT_LABEL[e.errorClass] ?? e.errorClass }) : null, e.nodeId ? _jsx(Badge, { variant: "outline", children: flowNodeLabel(e.nodeId) }) : null] }), _jsxs("div", { className: "mt-1 flex flex-wrap gap-x-4 text-xs text-muted-foreground", children: [_jsx("span", { children: tijd(e.createdAt) }), _jsxs("span", { children: ["Duur: ", duur(e.durationMs)] }), e.actor ? _jsxs("span", { children: ["Door: ", e.actor] }) : null, e.attempts > 0 ? _jsxs("span", { children: ["Poging ", e.attempts] }) : null] }), e.reason || e.decision ? (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: e.reason ?? e.decision })) : null] })] }), open ? (_jsxs("div", { className: "space-y-3 border-t px-3 py-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Veld, { label: "Beslissing", children: e.decision }), _jsx(Veld, { label: "Waarom", children: e.reason }), _jsx(Veld, { label: "Regel", children: e.rule }), _jsx(Veld, { label: "Volgende stap", children: e.nextStep }), _jsx(Veld, { label: "Volgende poging", children: e.nextAttemptAt ? tijd(e.nextAttemptAt) : null })] }), calc ? (_jsxs("div", { className: "rounded-md border bg-muted/40 p-3", children: [_jsx("p", { className: "text-sm font-medium", children: "Berekening" }), _jsx(Veld, { label: "Instelling", children: calc.setting }), _jsx(Veld, { label: "Rekenstap", children: calc.formula }), _jsx(Veld, { label: "Uitkomst", children: calc.result }), _jsx(Veld, { label: "Conclusie", children: calc.conclusion }), calc.values ? _jsx(Json, { waarde: calc.values }) : null] })) : null, fout ? (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-destructive", children: [_jsx(AlertTriangle, { className: "h-4 w-4" }), " Fout bij deze stap"] }), _jsx(Veld, { label: "Soort", children: e.errorClass ? FOUTSOORT_LABEL[e.errorClass] ?? e.errorClass : "Technische fout" }), _jsx(Veld, { label: "Uitleg", children: e.errorClass ? FOUTSOORT_UITLEG[e.errorClass] ?? null : null }), _jsx(Veld, { label: "Melding", children: foutTekst(e.error) }), e.error && foutTekst(e.error) !== e.error ? (_jsxs("details", { className: "mt-1", children: [_jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: "Technische details" }), _jsx("p", { className: "mt-1 break-words text-xs text-muted-foreground", children: e.error })] })) : null, _jsx(Veld, { label: "Pogingen", children: e.attempts > 0 ? String(e.attempts) : null })] })) : null, e.dbTable ? (_jsxs("div", { className: "rounded-md border p-3", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(Database, { className: "h-4 w-4" }), " Gegevens gewijzigd"] }), _jsx(Veld, { label: "Tabel", children: e.dbTable }), _jsx(Veld, { label: "Actie", children: e.dbAction }), e.dbOld ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2 text-xs font-medium", children: "Voor" }), _jsx(Json, { waarde: e.dbOld })] })) : null, e.dbNew ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2 text-xs font-medium", children: "Na" }), _jsx(Json, { waarde: e.dbNew })] })) : null] })) : null, e.externalSystem ? (_jsxs("div", { className: "rounded-md border p-3", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(ExternalLink, { className: "h-4 w-4" }), " Extern systeem"] }), _jsx(Veld, { label: "Systeem", children: e.externalSystem }), _jsx(Veld, { label: "Actie", children: e.externalAction }), _jsx(Veld, { label: "Kenmerk", children: e.externalRef }), _jsx(Veld, { label: "Resultaat", children: e.externalStatus }), _jsx(Json, { waarde: e.externalResponse })] })) : null, e.reads ? (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "Gelezen gegevens" }), _jsx(Json, { waarde: e.reads })] })) : null, e.values ? (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "Gebruikte waarden" }), _jsx(Json, { waarde: e.values })] })) : null, debug ? (_jsxs("div", { className: "rounded-md border border-dashed p-3", children: [_jsx("p", { className: "text-sm font-medium", children: "Technische gegevens" }), _jsx(Veld, { label: "Trace ID", children: e.traceId }), _jsx(Veld, { label: "Gebeurtenis ID", children: e.id }), _jsx(Veld, { label: "Vakje", children: e.nodeId }), _jsx(Veld, { label: "Fase", children: e.phase }), _jsx(Veld, { label: "Kar", children: e.cartRef }), _jsx(Veld, { label: "Pakbon", children: e.slipRef }), _jsx(Veld, { label: "Regel in database", children: e.dbRecord }), _jsxs("div", { className: "mt-2 grid gap-2 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium", children: "Invoer" }), _jsx(Json, { waarde: e.input })] }), _jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium", children: "Uitvoer" }), _jsx(Json, { waarde: e.output })] })] })] })) : null] })) : null] }));
 }

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

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