@flowselections/logistiek-engine 1.0.34 → 1.0.89

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":"AAuEA,wBAAgB,mBAAmB,gCAkPlC"}
+{"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,11 +7,11 @@ 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, 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";
-import { FloridayPoortCard } from "./FloridayPoortCard";
+import { WerktijdenCard } from "./WerktijdenCard";
 import { useLogistiekStrategieen, } from "../hooks/useLogistiekStrategieen";
 const SNELKOPPELINGEN = [
     {
@@ -20,6 +20,18 @@ const SNELKOPPELINGEN = [
         titel: "Werkwijze instellen",
         uitleg: "Bepaal stap voor stap hoe orders worden verzameld, gepickt en klaargezet.",
     },
+    {
+        to: "/logistiek-engine/flow",
+        icon: GitBranch,
+        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,
@@ -64,7 +76,7 @@ export function LogistiekEnginePage() {
         setEditing(item);
         setDialogOpen(true);
     };
-    return (_jsxs("main", { className: "p-6 space-y-6", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Hier bepaal je hoe orders in je bedrijf logistiek worden afgehandeld." }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: SNELKOPPELINGEN.map(({ to, icon: Icon, titel, uitleg }) => (_jsx(Link, { to: to, className: "group", children: _jsx(Card, { className: "h-full transition-colors group-hover:border-primary", children: _jsxs(CardHeader, { className: "p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary", children: _jsx(Icon, { className: "h-4 w-4" }) }), _jsx(CardTitle, { className: "text-sm font-semibold leading-tight", children: titel })] }), _jsx(CardDescription, { className: "pt-1 text-xs leading-relaxed", children: uitleg })] }) }) }, to))) }), _jsx(WerkwijzeHerindelingCard, {}), _jsx(FloridayPoortCard, {}), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Werkwijzen" }), _jsx(CardDescription, { children: "Alleen een werkwijze die aan staat wordt op je orders toegepast." })] }), _jsxs(Button, { size: "sm", onClick: openNew, children: [_jsx(Plus, { className: "h-4 w-4" }), "Nieuwe werkwijze"] })] }) }), _jsx(CardContent, { children: loading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-8 w-full" })] })) : error ? (_jsx("p", { className: "text-sm text-destructive", children: "Kon de gegevens niet ophalen. Probeer het over een moment opnieuw." })) : safeItems.length === 0 ? (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Je hebt nog geen werkwijze ingesteld." }), _jsxs(Button, { variant: "outline", size: "sm", onClick: openNew, children: [_jsx(Plus, { className: "h-4 w-4" }), "Eerste werkwijze aanmaken"] })] })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Naam" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "w-48 text-right", children: "Acties" })] }) }), _jsx(TableBody, { children: safeItems.map((item) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-3 w-3 shrink-0 rounded-full border border-border", style: { backgroundColor: item.color ?? "#3b82f6" } }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: item.name ?? "—" }), item.description && (_jsx("p", { className: "text-xs text-muted-foreground", children: item.description }))] })] }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", name: "actieve-werkwijze", className: "h-4 w-4 accent-primary", checked: !!item.is_active, disabled: saving, onChange: () => kiesWerkwijze(item), "aria-label": `${item.name ?? "Werkwijze"} als actieve werkwijze kiezen` }), _jsx("span", { className: "sr-only", children: "Actief" })] }), _jsx(Badge, { variant: item.is_active ? "default" : "secondary", children: item.is_active ? "Actief" : "Uit" }), item.is_active && (_jsx(Button, { size: "sm", variant: "ghost", disabled: saving, onClick: () => void clearActive(), children: "Uitzetten" }))] }) }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsxs(Link, { to: "/logistiek-engine/rule-engine", search: { strategy: String(item.id), naam: item.name ?? "" }, children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Instellen"] }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => openEdit(item), "aria-label": "Bewerken", children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => setDeleting(item), "aria-label": "Verwijderen", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }) })] }, String(item.id)))) })] })) })] }), _jsx(StrategieDialog, { open: dialogOpen, onOpenChange: setDialogOpen, strategie: editing, saving: saving, onSubmit: (input) => (editing ? update(editing.id, input) : create(input)) }), _jsx(AlertDialog, { open: !!deleting, onOpenChange: (open) => !open && setDeleting(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Werkwijze verwijderen?" }), _jsxs(AlertDialogDescription, { children: ["\"", deleting?.name, "\" wordt definitief verwijderd. Dit kan niet ongedaan worden gemaakt."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: async () => {
+    return (_jsxs("main", { className: "p-6 space-y-6", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Hier bepaal je hoe orders in je bedrijf logistiek worden afgehandeld." }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: SNELKOPPELINGEN.map(({ to, icon: Icon, titel, uitleg }) => (_jsx(Link, { to: to, className: "group", children: _jsx(Card, { className: "h-full transition-colors group-hover:border-primary", children: _jsxs(CardHeader, { className: "p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary", children: _jsx(Icon, { className: "h-4 w-4" }) }), _jsx(CardTitle, { className: "text-sm font-semibold leading-tight", children: titel })] }), _jsx(CardDescription, { className: "pt-1 text-xs leading-relaxed", children: uitleg })] }) }) }, to))) }), _jsx(WerkwijzeHerindelingCard, {}), _jsx(WerktijdenCard, {}), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Werkwijzen" }), _jsx(CardDescription, { children: "Alleen een werkwijze die aan staat wordt op je orders toegepast." })] }), _jsxs(Button, { size: "sm", onClick: openNew, children: [_jsx(Plus, { className: "h-4 w-4" }), "Nieuwe werkwijze"] })] }) }), _jsx(CardContent, { children: loading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-8 w-full" })] })) : error ? (_jsx("p", { className: "text-sm text-destructive", children: "Kon de gegevens niet ophalen. Probeer het over een moment opnieuw." })) : safeItems.length === 0 ? (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Je hebt nog geen werkwijze ingesteld." }), _jsxs(Button, { variant: "outline", size: "sm", onClick: openNew, children: [_jsx(Plus, { className: "h-4 w-4" }), "Eerste werkwijze aanmaken"] })] })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Naam" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "w-48 text-right", children: "Acties" })] }) }), _jsx(TableBody, { children: safeItems.map((item) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-3 w-3 shrink-0 rounded-full border border-border", style: { backgroundColor: item.color ?? "#3b82f6" } }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: item.name ?? "—" }), item.description && (_jsx("p", { className: "text-xs text-muted-foreground", children: item.description }))] })] }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", name: "actieve-werkwijze", className: "h-4 w-4 accent-primary", checked: !!item.is_active, disabled: saving, onChange: () => kiesWerkwijze(item), "aria-label": `${item.name ?? "Werkwijze"} als actieve werkwijze kiezen` }), _jsx("span", { className: "sr-only", children: "Actief" })] }), _jsx(Badge, { variant: item.is_active ? "default" : "secondary", children: item.is_active ? "Actief" : "Uit" }), item.is_active && (_jsx(Button, { size: "sm", variant: "ghost", disabled: saving, onClick: () => void clearActive(), children: "Uitzetten" }))] }) }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsxs(Link, { to: "/logistiek-engine/rule-engine", search: { strategy: String(item.id), naam: item.name ?? "" }, children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Instellen"] }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => openEdit(item), "aria-label": "Bewerken", children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => setDeleting(item), "aria-label": "Verwijderen", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }) })] }, String(item.id)))) })] })) })] }), _jsx(StrategieDialog, { open: dialogOpen, onOpenChange: setDialogOpen, strategie: editing, saving: saving, onSubmit: (input) => (editing ? update(editing.id, input) : create(input)) }), _jsx(AlertDialog, { open: !!deleting, onOpenChange: (open) => !open && setDeleting(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Werkwijze verwijderen?" }), _jsxs(AlertDialogDescription, { children: ["\"", deleting?.name, "\" wordt definitief verwijderd. Dit kan niet ongedaan worden gemaakt."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: async () => {
                                         if (deleting)
                                             await remove(deleting.id);
                                         setDeleting(null);

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

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

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

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

package/dist-lib/components/LogistiekEngineQueuePage.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/LogistiekEngineQueuePage.tsx — Queue: de volledige orderflow
+// ============================================================================
+// Gebruikt hetzelfde orderlogboek als het overzicht, zodat er één weergave is.
+// GEEN <Header /> hier — die levert de shell.
+// ============================================================================
+import { OrderLogboek } from "./OrderLogboek";
+import { AfrondWachtrijCard } from "./AfrondWachtrijCard";
+import { TaakGezondheidCard } from "./TaakGezondheidCard";
+export function LogistiekEngineQueuePage() {
+    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

@@ -0,0 +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, stop, orderLabel, debug, onDebug, onClose }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=NodeTracePanel.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/NodeTracePanel.tsx — wat er in dit vakje met de order gebeurde
+// ============================================================================
+// Klik je op een vakje van de flowkaart, dan staat hier eerst een korte
+// samenvatting van de besluitvorming, en daarna alleen de gebeurtenissen die
+// bij dit vakje horen. Automatische database-regels worden gebundeld.
+// Alleen lezen.
+// ============================================================================
+import { useMemo, useState } from "react";
+import { Badge, Button } from "@flowselections/core";
+import { ChevronDown, ChevronRight, X } from "lucide-react";
+import { flowNodeLabel } from "../lib/flowNodes";
+import { bundelGebeurtenissen, samenvatVak, } from "../lib/nodeTrace";
+import { vakUitleg } from "../lib/vakUitleg";
+import { FOUTSOORT_LABEL, FOUTSOORT_UITLEG, STATUS_KLEUR, Stap, Veld, duur, tijd, } from "./OrderTraceDetails";
+const EERSTE_AANTAL = 20;
+function Bundel({ item, debug }) {
+    const [open, setOpen] = useState(false);
+    const [toon, setToon] = useState(10);
+    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, 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]);
+    const uitleg = useMemo(() => vakUitleg(groep), [groep]);
+    const regels = useMemo(() => (debug ? [] : bundelGebeurtenissen(events)), [events, debug]);
+    const ruw = useMemo(() => (debug ? [...events].sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1)) : []), [events, debug]);
+    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: [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);
+                                    onDebug(!debug);
+                                }, children: "Technische details" })] }), _jsxs("div", { className: "space-y-2 px-3 pb-3", children: [totaal === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog niets vastgelegd in dit vakje." })) : debug ? (zichtbaar.map((e) => _jsx(Stap, { e: e, debug: true }, e.id))) : (zichtbaar.map((item) => item.event ? (_jsx(Stap, { e: item.event, debug: false }, item.key)) : (_jsx(Bundel, { item: item, debug: false }, item.key)))), totaal > toon ? (_jsxs(Button, { size: "sm", variant: "outline", className: "w-full", onClick: () => setToon((n) => n + EERSTE_AANTAL), children: ["Toon meer (", totaal - toon, ")"] })) : null] })] })] }));
+}

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

@@ -0,0 +1,9 @@
+import type { NodeTraceGroep } from "../lib/nodeTrace";
+interface Props {
+    reis: NodeTraceGroep[];
+    actiefNodeId: string | null;
+    onKies: (nodeId: string) => void;
+}
+export declare function OrderJourneyBar({ reis, actiefNodeId, onKies }: Props): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=OrderJourneyBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrderJourneyBar.d.ts","sourceRoot":"","sources":["../../src/components/OrderJourneyBar.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,UAAU,KAAK;IACb,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,KAAK,sCAsCpE"}

package/dist-lib/components/OrderJourneyBar.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/OrderJourneyBar.tsx — de reis van de order als balk
+// ============================================================================
+// Elk vakje dat de order echt gepasseerd is, op volgorde van tijd. Klikken
+// opent datzelfde vakje op de kaart. Alleen lezen.
+// ============================================================================
+import { AlertTriangle, CheckCircle2, ChevronRight, Clock } from "lucide-react";
+import { flowNodeLabel } from "../lib/flowNodes";
+import { duur, klok } from "./OrderTraceDetails";
+export function OrderJourneyBar({ reis, actiefNodeId, onKies }) {
+    const veilig = Array.isArray(reis) ? reis : [];
+    if (veilig.length === 0)
+        return null;
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-1 rounded-lg border border-border bg-background px-2 py-2", children: [_jsx("span", { className: "mr-1 text-xs font-medium text-muted-foreground", children: "Reis van de order:" }), veilig.map((g, i) => {
+                const fout = g.status === "mislukt";
+                const wacht = g.status === "wachtend" || g.status === "waarschuwing";
+                const Icoon = fout ? AlertTriangle : wacht ? Clock : CheckCircle2;
+                const actief = g.nodeId === actiefNodeId;
+                return (_jsxs("span", { className: "flex items-center gap-1", children: [i > 0 && _jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground" }), _jsxs("button", { type: "button", onClick: () => onKies(g.nodeId), className: `flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] ${fout
+                                ? "border-destructive/50 bg-destructive/10 text-destructive"
+                                : wacht
+                                    ? "border-amber-500/50 bg-amber-500/10 text-amber-700 dark:text-amber-300"
+                                    : "border-border bg-muted/40 text-foreground"} ${actief ? "ring-2 ring-primary" : ""}`, title: g.reden ?? undefined, children: [_jsx(Icoon, { className: "h-3 w-3" }), _jsx("span", { className: "max-w-[10rem] truncate font-medium", children: flowNodeLabel(g.nodeId) }), _jsx("span", { className: "text-muted-foreground", children: klok(g.eerste) }), g.duurMs !== null && _jsxs("span", { className: "text-muted-foreground", children: ["\u00B7 ", duur(g.duurMs)] }), g.aantal > 1 && _jsxs("span", { className: "text-muted-foreground", children: ["\u00B7 ", g.aantal, "\u00D7"] })] })] }, g.nodeId));
+            })] }));
+}

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

@@ -0,0 +1,10 @@
+import { type TraceEventRow } from "../hooks/useLogisticsTrace";
+export declare function Gebeurtenis({ event }: {
+    event: TraceEventRow;
+}): import("react").JSX.Element;
+export interface OrderLogboekProps {
+    titel?: string;
+    omschrijving?: string;
+}
+export declare function OrderLogboek({ titel, omschrijving, }: OrderLogboekProps): import("react").JSX.Element;
+//# sourceMappingURL=OrderLogboek.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrderLogboek.d.ts","sourceRoot":"","sources":["../../src/components/OrderLogboek.tsx"],"names":[],"mappings":"AAgCA,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,4BAA4B,CAAC;AAsDpC,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,aAAa,CAAA;CAAE,+BAoG9D;AAyBD,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAA8B,EAC9B,YAAsI,GACvI,EAAE,iBAAiB,+BAmGnB"}

package/dist-lib/components/OrderLogboek.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/OrderLogboek.tsx — alle binnengekomen orders met volledig log
+// ============================================================================
+// Eén lijst met binnengekomen orders. Per order de volledige tijdlijn van de
+// Logistiek Engine: elke stap, beslissing, foutcode, document, databaseregel
+// en uitwisseling met Floriday. Uitsluitend echt vastgelegde gebeurtenissen.
+// GEEN <Header /> hier — die levert de shell.
+// ============================================================================
+import { useMemo, useState } from "react";
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Skeleton, } from "@flowselections/core";
+import { AlertTriangle, ChevronDown, ChevronRight, Clock, Database, ExternalLink, FileText, RefreshCw, Search, } from "lucide-react";
+import { useLogisticsTrace, useLogisticsTraceTimeline, } from "../hooks/useLogisticsTrace";
+const STATUS_FILTERS = [
+    { waarde: "", label: "Alles" },
+    { waarde: "bezig", label: "Bezig" },
+    { waarde: "wachtend", label: "Wachtend" },
+    { waarde: "geblokkeerd", label: "Geblokkeerd" },
+    { waarde: "fout", label: "Fout" },
+    { waarde: "afgerond", label: "Afgerond" },
+];
+const FASE_LABEL = {
+    ontvangst: "Ontvangst",
+    validatie: "Controle van gegevens",
+    regels: "Regels",
+    karindeling: "Karindeling",
+    vrijgave: "Vrijgave",
+    pakbon: "Pakbon",
+    verzendbrief: "Verzendbrief",
+    printen: "Printen",
+    database: "Databasewijziging",
+    controle: "Controle",
+    afgerond: "Afronding",
+    onbekend: "Overig",
+};
+function tijd(waarde) {
+    if (!waarde)
+        return "—";
+    const d = new Date(waarde);
+    return Number.isNaN(d.getTime())
+        ? "—"
+        : d.toLocaleString("nl-NL", { dateStyle: "short", timeStyle: "medium" });
+}
+function statusKleur(status) {
+    if (status === "mislukt" || status === "fout" || status === "geblokkeerd")
+        return "destructive";
+    if (status === "wachtend" || status === "waarschuwing")
+        return "secondary";
+    if (status === "overgeslagen")
+        return "outline";
+    return "default";
+}
+function Blok({ titel, waarde }) {
+    if (waarde === null || waarde === undefined)
+        return null;
+    if (typeof waarde === "object" && Object.keys(waarde).length === 0)
+        return null;
+    return (_jsxs("div", { className: "rounded-md bg-muted/50 p-3", children: [_jsx("p", { className: "mb-1 text-xs font-medium text-muted-foreground", children: titel }), _jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap break-words text-xs", children: typeof waarde === "string" ? waarde : JSON.stringify(waarde, null, 2) })] }));
+}
+export function Gebeurtenis({ event }) {
+    const [open, setOpen] = useState(false);
+    const heeftDetails = event.input ||
+        event.output ||
+        event.reads ||
+        event.values ||
+        event.dbOld ||
+        event.dbNew ||
+        event.externalResponse ||
+        event.decision ||
+        event.rule ||
+        event.slipRef ||
+        event.dbTable ||
+        event.externalSystem;
+    return (_jsxs("div", { className: "border-l-2 border-muted pl-4", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-start gap-2 py-2 text-left", children: [heeftDetails ? (open ? (_jsx(ChevronDown, { className: "mt-1 h-4 w-4 shrink-0 text-muted-foreground" })) : (_jsx(ChevronRight, { className: "mt-1 h-4 w-4 shrink-0 text-muted-foreground" }))) : (_jsx("span", { 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: event.step }), _jsx(Badge, { variant: statusKleur(event.status), children: event.status }), _jsx(Badge, { variant: "outline", children: FASE_LABEL[event.phase] ?? event.phase }), event.attempts > 0 && _jsxs(Badge, { variant: "outline", children: ["poging ", event.attempts] }), event.durationMs !== null && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [event.durationMs, " ms"] }))] }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [tijd(event.createdAt), event.actor ? ` · ${event.actor}` : "", event.cartRef ? ` · kar ${event.cartRef}` : "", event.slipRef ? ` · pakbon ${event.slipRef}` : ""] }), event.reason && _jsx("p", { className: "mt-1 text-sm", children: event.reason }), event.error && (_jsxs("p", { className: "mt-1 flex items-start gap-1 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsx("span", { children: event.error })] }))] })] }), open && (_jsxs("div", { className: "mb-3 space-y-2", children: [event.decision && (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Beslissing: ", event.decision] })), event.rule && _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Regel: ", event.rule] }), event.slipRef && (_jsxs("p", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(FileText, { className: "h-3.5 w-3.5" }), " Document: ", event.slipRef] })), event.dbTable && (_jsxs("p", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(Database, { className: "h-3.5 w-3.5" }), event.dbAction, " in ", event.dbTable, event.dbRecord ? ` (${event.dbRecord})` : ""] })), event.externalSystem && (_jsxs("p", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), event.externalSystem, " \u00B7 ", event.externalAction ?? "—", event.externalRef ? ` · ${event.externalRef}` : "", event.externalStatus ? ` · antwoord ${event.externalStatus}` : ""] })), event.nextAttemptAt && (_jsxs("p", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(Clock, { className: "h-3.5 w-3.5" }), " Volgende poging: ", tijd(event.nextAttemptAt)] })), _jsx(Blok, { titel: "Invoer", waarde: event.input }), _jsx(Blok, { titel: "Gelezen gegevens", waarde: event.reads }), _jsx(Blok, { titel: "Gebruikte waarden", waarde: event.values }), _jsx(Blok, { titel: "Resultaat", waarde: event.output }), _jsx(Blok, { titel: "Waarde v\u00F3\u00F3r wijziging", waarde: event.dbOld }), _jsx(Blok, { titel: "Waarde n\u00E1 wijziging", waarde: event.dbNew }), _jsx(Blok, { titel: "Antwoord extern systeem", waarde: event.externalResponse })] }))] }));
+}
+function Tijdlijn({ orderRef }) {
+    const { events, loading, error } = useLogisticsTraceTimeline(orderRef);
+    const veilig = Array.isArray(events) ? events : [];
+    if (loading)
+        return _jsx(Skeleton, { className: "h-24 w-full" });
+    if (error)
+        return _jsx("p", { className: "text-sm text-destructive", children: error });
+    if (veilig.length === 0)
+        return (_jsx("p", { className: "text-sm text-muted-foreground", children: "Voor deze order zijn nog geen stappen vastgelegd." }));
+    return (_jsxs("div", { className: "space-y-1", children: [_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Volgnummer: ", veilig[0]?.traceId ?? "—"] }), veilig.map((e) => (_jsx(Gebeurtenis, { event: e }, e.id)))] }));
+}
+export function OrderLogboek({ titel = "Binnengekomen orders", omschrijving = "Klik een order open voor elke stap, beslissing, foutmelding en elk document dat de Logistiek Engine heeft vastgelegd.", }) {
+    const { orders, loading, error, search, setSearch, status, setStatus, hours, setHours, refresh } = useLogisticsTrace();
+    const [open, setOpen] = useState(null);
+    const veilig = useMemo(() => (Array.isArray(orders) ? orders : []), [orders]);
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: titel }), _jsx(CardDescription, { children: omschrijving })] }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative min-w-[220px] flex-1", children: [_jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Zoek op order, kar, pakbon of foutmelding", className: "pl-8" })] }), _jsxs("select", { value: String(hours), onChange: (e) => setHours(Number(e.target.value)), className: "h-9 rounded-md border bg-background px-2 text-sm", children: [_jsx("option", { value: "6", children: "Laatste 6 uur" }), _jsx("option", { value: "24", children: "Laatste 24 uur" }), _jsx("option", { value: "48", children: "Laatste 2 dagen" }), _jsx("option", { value: "168", children: "Laatste week" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void refresh(), children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), " Verversen"] })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: STATUS_FILTERS.map((f) => (_jsx(Button, { size: "sm", variant: status === f.waarde ? "default" : "outline", onClick: () => setStatus(f.waarde), children: f.label }, f.waarde || "alles"))) }), error && _jsx("p", { className: "text-sm text-destructive", children: error }), loading && veilig.length === 0 && _jsx(Skeleton, { className: "h-32 w-full" }), !loading && veilig.length === 0 && !error && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Er zijn in deze periode nog geen stappen vastgelegd." })), _jsx("div", { className: "space-y-2", children: veilig.map((o) => (_jsxs("div", { className: "rounded-lg border", children: [_jsxs("button", { type: "button", className: "flex w-full items-center gap-3 p-3 text-left", onClick: () => setOpen((v) => (v === o.orderRef ? null : o.orderRef)), children: [open === o.orderRef ? (_jsx(ChevronDown, { className: "h-4 w-4 shrink-0" })) : (_jsx(ChevronRight, { className: "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: o.orderRef }), _jsx(Badge, { variant: statusKleur(o.state), children: o.state }), o.orderSource && _jsx(Badge, { variant: "outline", children: o.orderSource }), o.errors > 0 && _jsxs(Badge, { variant: "destructive", children: [o.errors, " fout"] }), o.waiting > 0 && _jsxs(Badge, { variant: "secondary", children: [o.waiting, " wachtend"] })] }), _jsxs("p", { className: "truncate text-xs text-muted-foreground", children: [o.lastStep ?? "—", " \u00B7 ", tijd(o.lastAt)] }), o.lastReason && (_jsx("p", { className: "truncate text-sm text-muted-foreground", children: o.lastReason }))] })] }), open === o.orderRef && (_jsx("div", { className: "border-t p-3", children: _jsx(Tijdlijn, { orderRef: o.orderRef }) }))] }, o.orderRef))) })] })] }));
+}

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

@@ -0,0 +1,12 @@
+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;
+}
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/OrderStopBanner.tsx — waar staat deze order stil, en waarom?
+// ============================================================================
+// 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, CheckCircle2, Clock } from "lucide-react";
+import { useOrderTraceStand } from "../hooks/useOrderTrace";
+import { flowNodeLabel } from "../lib/flowNodes";
+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);
+    // 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 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

@@ -0,0 +1,22 @@
+import type { TraceEventRow } from "../hooks/useLogisticsTrace";
+export declare const FOUTSOORT_LABEL: Record<string, string>;
+export declare const FOUTSOORT_UITLEG: Record<string, string>;
+export declare const STATUS_KLEUR: Record<string, string>;
+export declare function tijd(v: string | null | undefined): string;
+export declare function klok(v: string | null | undefined): string;
+export declare function duur(ms: number | null | undefined): string;
+export declare function sinds(v: string | null | undefined): string;
+export declare function Json({ waarde }: {
+    waarde: unknown;
+}): import("react").JSX.Element | null;
+export declare function Veld({ label, children }: {
+    label: string;
+    children: React.ReactNode;
+}): import("react").JSX.Element | null;
+/** Eén gebeurtenis van de Engine, uitklapbaar met alle vastgelegde details. */
+export declare function Stap({ e, debug, open: standaardOpen }: {
+    e: TraceEventRow;
+    debug: boolean;
+    open?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=OrderTraceDetails.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ============================================================================
+// src/components/OrderTraceDetails.tsx — bouwstenen om één gebeurtenis te tonen
+// ============================================================================
+// Gedeelde weergave van wat de Engine bij een stap heeft vastgelegd: de
+// beslissing, de berekening, de fout, gewijzigde gegevens en extern verkeer.
+// Alleen lezen. GEEN <Header /> hier — die levert de shell.
+// ============================================================================
+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",
+    configuratie: "Configuratiefout",
+    regel: "Bewuste regel",
+    extern: "Extern systeem",
+};
+export const FOUTSOORT_UITLEG = {
+    technisch: "Er ging iets stuk in de database, een koppeling of de printer.",
+    ontbrekende_gegevens: "De order of de stamgegevens missen iets dat de Engine nodig heeft.",
+    configuratie: "Een instelling of koppeling in de werkwijze staat niet goed.",
+    regel: "De Engine mag bewust niet verder vanwege een ingestelde regel.",
+    extern: "Een extern systeem heeft nog niets teruggegeven.",
+};
+export const STATUS_KLEUR = {
+    geslaagd: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+    wachtend: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    waarschuwing: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    overgeslagen: "bg-muted text-muted-foreground",
+    mislukt: "bg-destructive/15 text-destructive",
+};
+export function tijd(v) {
+    if (!v)
+        return "—";
+    const d = new Date(v);
+    return Number.isNaN(d.getTime()) ? String(v) : d.toLocaleString("nl-NL");
+}
+export function klok(v) {
+    if (!v)
+        return "—";
+    const d = new Date(v);
+    if (Number.isNaN(d.getTime()))
+        return String(v);
+    return d.toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" });
+}
+export function duur(ms) {
+    if (ms === null || ms === undefined)
+        return "—";
+    if (ms < 1000)
+        return `${ms} ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)} s`;
+    return `${Math.round(ms / 60000)} min`;
+}
+export function sinds(v) {
+    if (!v)
+        return "—";
+    const start = new Date(v).getTime();
+    if (Number.isNaN(start))
+        return "—";
+    const min = Math.max(Math.round((Date.now() - start) / 60000), 0);
+    if (min < 60)
+        return `${min} minuten`;
+    const u = Math.floor(min / 60);
+    if (u < 24)
+        return `${u} uur en ${min % 60} minuten`;
+    return `${Math.floor(u / 24)} dagen en ${u % 24} uur`;
+}
+export function Json({ waarde }) {
+    if (waarde === null || waarde === undefined)
+        return null;
+    return (_jsx("pre", { className: "mt-1 max-h-56 overflow-auto rounded-md bg-muted/60 p-2 text-xs leading-relaxed", children: JSON.stringify(waarde, null, 2) }));
+}
+export function Veld({ label, children }) {
+    if (children === null || children === undefined || children === "")
+        return null;
+    return (_jsxs("div", { className: "text-sm", children: [_jsxs("span", { className: "font-medium text-foreground", children: [label, ": "] }), _jsx("span", { className: "text-muted-foreground", children: children })] }));
+}
+/** Eén gebeurtenis van de Engine, uitklapbaar met alle vastgelegde details. */
+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: 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlanWachtrijPage.d.ts","sourceRoot":"","sources":["../../src/components/PlanWachtrijPage.tsx"],"names":[],"mappings":"AAsEA,wBAAgB,gBAAgB,gCA0N/B"}