@flowselections/logistiek-engine 1.0.34 → 1.0.53

package/dist-lib/components/FlowOrders.js

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

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

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

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

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

package/dist-lib/components/FlowPage.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/FlowPage.tsx — visuele flow van de Logistiek Engine
+// ============================================================================
+// Het schema wordt opgebouwd uit dezelfde werkwijze die de engine gebruikt
+// (WIZARD_STEPS + de opgeslagen instellingen). Klik je een stap aan, dan pas
+// je diezelfde instellingen aan; opslaan werkt door in de engine én in dit
+// schema. GEEN <Header /> hier — die levert de shell.
+// ============================================================================
+import { useCallback, 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 { applyRoute } from "../lib/flowRoute";
+import { FlowCanvas } from "./FlowCanvas";
+import { FlowOrders } from "./FlowOrders";
+import { OrderJourneyBar } from "./OrderJourneyBar";
+import { OrderStopBanner } from "./OrderStopBanner";
+import { useOrderNodeTrace } from "../hooks/useOrderNodeTrace";
+import { useRuleEngine } from "../hooks/useRuleEngine";
+import { useLogistiekStrategieen } from "../hooks/useLogistiekStrategieen";
+import { useRecalcJob, phaseLabel } from "../hooks/useRecalcJob";
+import { RuleFieldInput } from "./rule-engine/RuleFieldInput";
+import { CollapsibleGroup } from "./rule-engine/CollapsibleGroup";
+import { ConditionsEditor } from "./rule-engine/ConditionsEditor";
+const WIDE_TYPES = ["priority", "toggle", "days", "radio", "textarea", "guidance"];
+function fieldClass(field) {
+    return WIDE_TYPES.includes(field.type) ? "md:col-span-2" : "";
+}
+export function FlowPage() {
+    const { configs, activeConfig, activeId, setActiveId, loading, saving, error, patchSettings, saveConfig, activateConfig, } = useRuleEngine();
+    const { items: strategieen } = useLogistiekStrategieen();
+    const [openStep, setOpenStep] = useState(null);
+    // Naam van de werkwijze = de naam uit het Werkwijzen-overzicht (strategie),
+    // zodat beide schermen exact hetzelfde zeggen.
+    const werkwijzeNaam = (config) => {
+        if (!config)
+            return "";
+        const lijst = Array.isArray(strategieen) ? strategieen : [];
+        const match = config.strategy_id
+            ? lijst.find((s) => s.id === config.strategy_id)
+            : undefined;
+        return match?.name ?? config.name.replace(/^Werkwijze\s+/i, "");
+    };
+    const settings = activeConfig?.settings ?? {};
+    const basisTree = useMemo(() => buildFlowTree(settings), [settings]);
+    // Gekozen order/versie: de echte reis wordt als laag over de kaart gelegd.
+    const [orderRoute, setOrderRoute] = useState(null);
+    const [routeLabel, setRouteLabel] = useState(null);
+    const [orderRef, setOrderRef] = useState(null);
+    const [versie, setVersie] = useState(null);
+    const [traceNodeId, setTraceNodeId] = useState(null);
+    const kaartRef = useRef(null);
+    const onRoute = useCallback((route, label, ref, v) => {
+        setOrderRoute(route);
+        setRouteLabel(label);
+        setOrderRef(ref);
+        setVersie(v);
+        setTraceNodeId(null);
+        if (route && label) {
+            // De kaart staat boven de orderlijst: breng hem meteen in beeld.
+            setTimeout(() => kaartRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 50);
+        }
+    }, []);
+    const { groepen, reis, loading: traceLoading } = useOrderNodeTrace(orderRef, versie);
+    const overlay = useMemo(() => applyRoute(basisTree, orderRoute, orderRef ? groepen : null), [basisTree, orderRoute, groepen, orderRef]);
+    const tree = overlay.tree;
+    const step = WIZARD_STEPS.find((s) => s.id === openStep) ?? null;
+    const stepValues = step ? (settings?.[step.storeId]?.fields ?? {}) : {};
+    const stepConditions = step
+        ? (settings?.[step.storeId]?.conditions ?? [])
+        : [];
+    const setFieldValue = (key, value) => {
+        if (!activeConfig || !step)
+            return;
+        patchSettings(activeConfig.id, {
+            ...settings,
+            [step.storeId]: {
+                ...(settings[step.storeId] ?? { fields: {}, conditions: [] }),
+                fields: { ...stepValues, [key]: value },
+            },
+        });
+    };
+    // Keuze veranderen vanuit een ruit in het schema (elke stap, niet alleen de
+    // geopende): schrijft naar dezelfde werkwijze die de engine gebruikt.
+    const setFieldByStore = (storeId, key, value) => {
+        if (!activeConfig)
+            return;
+        const huidig = settings[storeId] ?? { fields: {}, conditions: [] };
+        patchSettings(activeConfig.id, {
+            ...settings,
+            [storeId]: { ...huidig, fields: { ...(huidig.fields ?? {}), [key]: value } },
+        });
+    };
+    const setConditions = (conditions) => {
+        if (!activeConfig || !step)
+            return;
+        patchSettings(activeConfig.id, {
+            ...settings,
+            [step.storeId]: {
+                ...(settings[step.storeId] ?? { fields: {}, conditions: [] }),
+                conditions,
+            },
+        });
+    };
+    const { job, starting, startRecalculation } = useRecalcJob();
+    const running = job?.status === "running";
+    const [busy, setBusy] = useState(false);
+    const opslaan = async (opnieuwBerekenen) => {
+        if (!activeConfig)
+            return;
+        setBusy(true);
+        try {
+            await saveConfig(activeConfig);
+            if (opnieuwBerekenen) {
+                if (!activeConfig.is_active)
+                    await activateConfig(activeConfig.id);
+                await startRecalculation(null);
+                toast.success("Opgeslagen — de herberekening loopt op de achtergrond");
+            }
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Opslaan is niet gelukt. Probeer het nog een keer.");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const veiligeConfigs = Array.isArray(configs) ? configs : [];
+    return (_jsxs("div", { className: "space-y-4 p-6", children: [_jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold tracking-tight", children: "Flow van de Logistiek Engine" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Alle mogelijke routes door de engine in \u00E9\u00E9n kaart. De gekleurde route geldt nu; kies in een beslistegel iets anders en de actieve tak springt direct mee." })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [veiligeConfigs.length > 1 && (_jsxs(Select, { value: activeId ?? "", onValueChange: (v) => setActiveId(v), children: [_jsx(SelectTrigger, { className: "w-56", children: _jsx(SelectValue, { placeholder: "Kies een werkwijze" }) }), _jsx(SelectContent, { children: veiligeConfigs.map((c) => (_jsxs(SelectItem, { value: c.id, children: [werkwijzeNaam(c), c.is_active ? " (actief)" : ""] }, c.id))) })] })), _jsxs(Button, { variant: "outline", size: "sm", disabled: !activeConfig || saving || busy, onClick: () => void opslaan(false), children: [_jsx(Save, { className: "h-4 w-4" }), " Opslaan"] }), _jsxs(Button, { size: "sm", disabled: !activeConfig || saving || busy || starting || running, onClick: () => void opslaan(true), children: [busy || starting || running ? (_jsx(RefreshCw, { className: "h-4 w-4 animate-spin" })) : (_jsx(CheckCircle2, { className: "h-4 w-4" })), running ? `${phaseLabel(job?.phase)}…` : "Opslaan & opnieuw berekenen"] })] })] }), error && (_jsx("p", { className: "rounded-md border border-destructive/50 bg-destructive/5 px-3 py-2 text-sm text-destructive", children: "De werkwijze kon niet worden geladen. Probeer het opnieuw." })), loading ? (_jsxs("div", { className: "space-y-3", children: [_jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" })] })) : !activeConfig ? (_jsx(Card, { children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Nog geen werkwijze" }), _jsx(CardDescription, { children: "Maak eerst een werkwijze aan bij Werkwijze instellen; daarna verschijnt de flow hier vanzelf." })] }) })) : (_jsxs("div", { className: `grid gap-6 ${openStep ? "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) => {
+                                            const visibleFields = group.fields.filter((field) => fieldVisible(field, stepValues, settings));
+                                            if (visibleFields.length === 0)
+                                                return null;
+                                            const basicFields = visibleFields.filter((f) => !isAdvancedField(f));
+                                            const advancedFields = visibleFields.filter((f) => isAdvancedField(f));
+                                            const isLastGroup = groupIndex === step.groups.length - 1;
+                                            return (_jsxs(CollapsibleGroup, { title: group.label, help: group.description, summary: groupSummary(group, stepValues), defaultOpen: groupIndex === 0, children: [basicFields.length > 0 && (_jsx("div", { className: "grid gap-4 md:grid-cols-2", children: basicFields.map((field) => (_jsx("div", { className: fieldClass(field), children: _jsx(RuleFieldInput, { field: field, value: stepValues[field.key], stepValues: stepValues, onChange: (value) => setFieldValue(field.key, value) }) }, field.key))) })), (advancedFields.length > 0 || (step.showConditions && isLastGroup)) && (_jsxs("details", { className: "rounded-lg border border-dashed border-border", children: [_jsx("summary", { className: "cursor-pointer px-3 py-2 text-sm font-medium text-muted-foreground", children: "Geavanceerd" }), _jsxs("div", { className: "space-y-4 border-t border-border px-3 py-4", children: [advancedFields.length > 0 && (_jsx("div", { className: "grid gap-4 md:grid-cols-2", children: advancedFields.map((field) => (_jsx("div", { className: fieldClass(field), children: _jsx(RuleFieldInput, { field: field, value: stepValues[field.key], stepValues: stepValues, onChange: (value) => setFieldValue(field.key, value) }) }, field.key))) })), step.showConditions && isLastGroup && (_jsx(ConditionsEditor, { conditions: stepConditions, onChange: setConditions }))] })] }))] }, group.id));
+                                        }), _jsxs("div", { className: "flex flex-wrap gap-2 pt-1", children: [_jsxs(Button, { variant: "outline", size: "sm", disabled: saving || busy, onClick: () => void opslaan(false), children: [_jsx(Save, { className: "h-4 w-4" }), " Opslaan"] }), _jsxs(Button, { size: "sm", disabled: saving || busy, onClick: () => void opslaan(true), children: [_jsx(CheckCircle2, { className: "h-4 w-4" }), " Opslaan & opnieuw berekenen"] })] })] })] }) }))] })), !loading && activeConfig && _jsx(FlowOrders, { onRoute: onRoute })] }));
+}

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

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

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

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

package/dist-lib/components/InklapbaarVenster.js

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

package/dist-lib/components/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":"AAiFA,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, 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,12 @@ 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/regie",
         icon: Workflow,
@@ -64,7 +70,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":"AASA,wBAAgB,wBAAwB,gCASvC"}

package/dist-lib/components/LogistiekEngineQueuePage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } 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";
+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." }) }));
+}

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

@@ -0,0 +1,11 @@
+import { type NodeTraceGroep } from "../lib/nodeTrace";
+interface Props {
+    groep: NodeTraceGroep;
+    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 {};
+//# 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;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"}

package/dist-lib/components/NodeTracePanel.js

@@ -0,0 +1,40 @@
+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, 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: [_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"}