@flowselections/logistiek-engine 1.0.53 → 1.0.90

package/README.md

@@ -1,24 +1,24 @@
-# logistiek Engine
-
-blank project start
-
-This project was built with [Lovable](https://lovable.dev).
-
-## Build with Lovable
-
-Continue developing this project in the [Lovable editor](https://lovable.dev/projects/316ec9c5-0f01-408a-b7ec-3d4dccf9b65d).
-
-- **Ship faster**: describe what you want to build and Lovable handles the code.
-- **Stay in sync**: every change made in Lovable is committed straight to this repository.
-- **Full ownership**: this code is yours. Push to `main` on GitHub and your changes sync back into Lovable, ready for your next prompt.
-
-## Development
-
-Prefer working locally? You need Node.js and npm — [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating).
-
-```sh
-git clone <this-repository-url>
-cd <repository-name>
-npm i
-npm run dev
-```
+# logistiek Engine
+
+blank project start
+
+This project was built with [Lovable](https://lovable.dev).
+
+## Build with Lovable
+
+Continue developing this project in the [Lovable editor](https://lovable.dev/projects/316ec9c5-0f01-408a-b7ec-3d4dccf9b65d).
+
+- **Ship faster**: describe what you want to build and Lovable handles the code.
+- **Stay in sync**: every change made in Lovable is committed straight to this repository.
+- **Full ownership**: this code is yours. Push to `main` on GitHub and your changes sync back into Lovable, ready for your next prompt.
+
+## Development
+
+Prefer working locally? You need Node.js and npm — [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating).
+
+```sh
+git clone <this-repository-url>
+cd <repository-name>
+npm i
+npm run dev
+```

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AfrondWachtrijCard.d.ts","sourceRoot":"","sources":["../../src/components/AfrondWachtrijCard.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,kBAAkB,gCAqFjC"}

package/dist-lib/components/AfrondWachtrijCard.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/AfrondWachtrijCard.tsx — zichtbaarheid op de afronding
+// ============================================================================
+// Toont wat er na de eindcontrole nog moet worden afgerond, met waarschuwing
+// wanneer iets te lang wacht. Alleen lezen, behalve de knoppen.
+// ============================================================================
+import { AlertTriangle, CheckCircle2, RefreshCw } from "lucide-react";
+import { useAfrondWachtrij } from "../hooks/useAfrondWachtrij";
+function duur(seconden) {
+    if (seconden < 60)
+        return `${seconden} sec`;
+    if (seconden < 3600)
+        return `${Math.round(seconden / 60)} min`;
+    return `${Math.round(seconden / 360) / 10} uur`;
+}
+export function AfrondWachtrijCard() {
+    const { stand, regels, laden, fout, herlaad, opnieuw, naloop } = useAfrondWachtrij();
+    const traag = stand.oudsteWachttijdSeconden > 300;
+    const alarm = traag || stand.mislukt > 0;
+    return (_jsxs("div", { className: "rounded-lg border bg-card p-4 text-card-foreground", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-semibold", children: "Afronding na controle" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Orders waarvan de karren zijn afgemeld en die nog moeten worden afgerond." })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", onClick: () => void naloop(), className: "rounded-md border px-3 py-1.5 text-sm hover:bg-accent", children: "Naloop uitvoeren" }), _jsx("button", { type: "button", onClick: () => void herlaad(), className: "rounded-md border px-3 py-1.5 text-sm hover:bg-accent", "aria-label": "Vernieuwen", children: _jsx(RefreshCw, { className: "h-4 w-4" }) })] })] }), fout ? _jsx("p", { className: "mb-3 text-sm text-destructive", children: fout }) : null, _jsxs("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4", children: [_jsx(Cijfer, { label: "Wachtend", waarde: stand.wachtend }), _jsx(Cijfer, { label: "Bezig", waarde: stand.bezig }), _jsx(Cijfer, { label: "Mislukt", waarde: stand.mislukt, nadruk: stand.mislukt > 0 }), _jsx(Cijfer, { label: "Oudste wacht", tekst: duur(stand.oudsteWachttijdSeconden), nadruk: traag })] }), !laden && !alarm && stand.wachtend === 0 && stand.bezig === 0 ? (_jsxs("p", { className: "mt-3 flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(CheckCircle2, { className: "h-4 w-4" }), " Alles is afgerond."] })) : null, alarm ? (_jsxs("p", { className: "mt-3 flex items-start gap-2 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), stand.mislukt > 0
+                        ? "Er zijn orders die niet konden worden afgerond. Bekijk de reden hieronder en probeer opnieuw."
+                        : "Er wacht een order langer dan vijf minuten. Controleer of de achtergrondtaak draait."] })) : null, regels.length > 0 ? (_jsx("ul", { className: "mt-4 space-y-2", children: regels.map((r) => (_jsxs("li", { className: "rounded-md border p-3 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "font-medium", children: r.orderId }), _jsxs("span", { className: "text-muted-foreground", children: [r.status, " \u00B7 poging ", r.pogingen, r.maxPogingen ? `/${r.maxPogingen}` : ""] })] }), r.reden ? _jsx("p", { className: "text-muted-foreground", children: r.reden }) : null, r.fout ? _jsx("p", { className: "mt-1 text-destructive", children: r.fout }) : null, r.status === "failed" ? (_jsx("button", { type: "button", onClick: () => void opnieuw(r.orderId), className: "mt-2 rounded-md border px-2 py-1 text-xs hover:bg-accent", children: "Opnieuw proberen" })) : null] }, r.orderId))) })) : null] }));
+}
+function Cijfer({ label, waarde, tekst, nadruk, }) {
+    return (_jsxs("div", { className: "rounded-md border p-3", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: label }), _jsx("p", { className: `text-lg font-semibold ${nadruk ? "text-destructive" : ""}`, children: tekst ?? waarde ?? 0 })] }));
+}

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

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

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

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

package/dist-lib/components/BeladingsafwijkingenCard.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ============================================================================
+// src/components/BeladingsafwijkingenCard.tsx — belading naast de Floriday-stand
+// ============================================================================
+// Toont per gevonden afwijking welk product of welke order het betreft, wat wij
+// hebben opgeslagen, wat Floriday nu zegt en sinds wanneer het verschil bestaat.
+// Wat veilig kon worden bijgewerkt is al automatisch rechtgezet; de rest staat
+// hier als "beoordelen".
+// GEEN <Header /> hier — die levert de shell.
+// ============================================================================
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Skeleton, } from "@flowselections/core";
+import { Boxes, Check, RefreshCw } from "lucide-react";
+import { useBeladingsafwijkingen, } from "../hooks/useBeladingsafwijkingen";
+function beladingTekst(b) {
+    const deel = [
+        b.piecesPerPackage == null ? "?" : String(b.piecesPerPackage),
+        b.packagesPerLayer == null ? "?" : String(b.packagesPerLayer),
+        b.layersPerLoadCarrier == null ? "?" : String(b.layersPerLoadCarrier),
+    ];
+    const basis = `${deel[0]} per fust · ${deel[1]} fusten per laag · ${deel[2]} lagen per kar`;
+    return b.loadCarrier ? `${basis} (${b.loadCarrier.toLowerCase().replace(/_/g, " ")})` : basis;
+}
+function sindsTekst(sinds) {
+    if (!sinds)
+        return "onbekend";
+    const ms = Date.now() - new Date(sinds).getTime();
+    const minuten = Math.max(0, Math.round(ms / 60000));
+    if (minuten < 60)
+        return `${minuten} min`;
+    const uren = Math.round(minuten / 60);
+    if (uren < 48)
+        return `${uren} uur`;
+    return `${Math.round(uren / 24)} dagen`;
+}
+function Regel({ a, onAfsluiten, }) {
+    return (_jsxs("div", { className: "space-y-2 rounded-lg border p-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { variant: a.beoordelen ? "destructive" : "secondary", children: a.beoordelen ? "Beoordelen" : "Wordt bijgewerkt" }), _jsxs("span", { className: "text-sm font-medium", children: [a.soort === "product" ? "Product" : "Order", " ", a.orderNummer ?? a.productNaam ?? "onbekend"] }), a.orderNummer && a.productNaam ? (_jsx("span", { className: "text-muted-foreground text-xs", children: a.productNaam })) : null, _jsxs("span", { className: "text-muted-foreground ml-auto text-xs", children: ["sinds ", sindsTekst(a.sinds)] })] }), _jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsxs("div", { className: "rounded-md border p-2", children: [_jsx("div", { className: "text-muted-foreground text-xs", children: "Bij ons opgeslagen" }), _jsx("div", { className: "text-sm tabular-nums", children: beladingTekst(a.lokaal) })] }), _jsxs("div", { className: "rounded-md border p-2", children: [_jsx("div", { className: "text-muted-foreground text-xs", children: "Floriday nu" }), _jsx("div", { className: "text-sm tabular-nums", children: beladingTekst(a.floriday) })] })] }), a.reden ? _jsx("p", { className: "text-muted-foreground text-xs", children: a.reden }) : null, a.beoordelen ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => onAfsluiten(a.id), children: [_jsx(Check, { className: "mr-2 h-4 w-4" }), "Beoordeeld, afsluiten"] })) : null] }));
+}
+export function BeladingsafwijkingenCard() {
+    const { stand, afwijkingen, laden, bezig, fout, nuControleren, afsluiten } = useBeladingsafwijkingen();
+    const lijst = Array.isArray(afwijkingen) ? afwijkingen : [];
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Boxes, { className: "h-5 w-5 text-primary" }), "Beladingsafwijkingen"] }), _jsx(CardDescription, { children: "Elk uur vergelijken we de opgeslagen belading met de laatste Floriday-gegevens. Wat veilig kan, wordt vanzelf bijgewerkt; de rest wacht op uw beoordeling." })] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => void nuControleren(), disabled: bezig || laden, children: _jsx(RefreshCw, { className: `h-4 w-4 ${bezig ? "animate-spin" : ""}` }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [fout ? _jsx("p", { className: "text-destructive text-sm", children: fout }) : null, laden && lijst.length === 0 ? (_jsx(Skeleton, { className: "h-24 w-full" })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4", children: [_jsxs("div", { className: "rounded-lg border p-3", children: [_jsx("div", { className: "text-muted-foreground text-xs", children: "Openstaand" }), _jsx("div", { className: "text-2xl font-semibold tabular-nums", children: stand.openTotaal })] }), _jsxs("div", { className: "rounded-lg border p-3", children: [_jsx("div", { className: "text-muted-foreground text-xs", children: "Mens moet kijken" }), _jsx("div", { className: "text-2xl font-semibold tabular-nums", children: stand.beoordelen })] }), _jsxs("div", { className: "rounded-lg border p-3", children: [_jsx("div", { className: "text-muted-foreground text-xs", children: "Betrokken orders" }), _jsx("div", { className: "text-2xl font-semibold tabular-nums", children: stand.orders })] }), _jsxs("div", { className: "rounded-lg border p-3", children: [_jsx("div", { className: "text-muted-foreground text-xs", children: "Productgegevens" }), _jsx("div", { className: "text-2xl font-semibold tabular-nums", children: stand.producten })] })] }), lijst.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Geen verschillen gevonden. Onze belading komt overeen met Floriday." })) : (_jsx("div", { className: "space-y-3", children: lijst.map((a) => (_jsx(Regel, { a: a, onAfsluiten: (id) => void afsluiten(id) }, a.id))) })), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Laatste meting: ", stand.laatstGemeten ? sindsTekst(stand.laatstGemeten) + " geleden" : "nog niet", stand.laatstHersteld
+                                        ? ` · laatst automatisch bijgewerkt ${sindsTekst(stand.laatstHersteld)} geleden`
+                                        : "", ". Regels die handmatig zijn vastgezet worden nooit automatisch gewijzigd."] })] }))] })] }));
+}

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

@@ -1,6 +1,7 @@
 import "@xyflow/react/dist/style.css";
 import { type FlowTree } from "../lib/flowTree";
 import type { RouteMarker } from "../lib/flowRoute";
+import type { StopReden } from "../lib/stopReden";
 import type { NodeTraceGroep } from "../lib/nodeTrace";
 import type { RuleEngineSettings } from "../lib/ruleEngineSchema";
 export type { RouteMarker };
@@ -11,6 +12,8 @@ interface Props {
     settings: RuleEngineSettings;
     /** Markeringen per knoop-id (vastgelopen / bezig / klaar) van een gekozen orderversie. */
     markers?: Map<string, RouteMarker>;
+    /** Vakjes die vastlopen, met de reden erbij. Wordt als foutmelding getoond. */
+    problemen?: Map<string, StopReden>;
     /** Wat de Engine per vakje voor de gekozen order heeft vastgelegd. */
     nodeTrace?: Map<string, NodeTraceGroep> | null;
     /** Tekst boven de kaart als een orderroute getoond wordt. */
@@ -23,6 +26,9 @@ interface Props {
     onClearRoute?: () => void;
     onSelectStep: (stepId: string) => void;
     onChangeChoice: (storeId: string, fieldKey: string, value: unknown) => void;
+    /** Aangeklikt samenkomstpunt (ruitje) om te beheren. */
+    mergeId?: string | null;
+    onSelectMerge?: (mergeId: string | null) => void;
 }
 export declare function FlowCanvas(props: Props): import("react").JSX.Element;
 //# sourceMappingURL=FlowCanvas.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FlowCanvas.d.ts","sourceRoot":"","sources":["../../src/components/FlowCanvas.tsx"],"names":[],"mappings":"AAgDA,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAA6B,KAAK,QAAQ,EAAiB,MAAM,iBAAiB,CAAC;AAC1F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAOlE,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,kFAAkF;IAClF,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,0FAA0F;IAC1F,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACnC,sEAAsE;IACtE,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,GAAG,IAAI,CAAC;IAC/C,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7E;AA87BD,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,+BAMtC"}
+{"version":3,"file":"FlowCanvas.d.ts","sourceRoot":"","sources":["../../src/components/FlowCanvas.tsx"],"names":[],"mappings":"AAiDA,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAA6B,KAAK,QAAQ,EAAiB,MAAM,iBAAiB,CAAC;AAC1F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAOlE,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,kFAAkF;IAClF,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,0FAA0F;IAC1F,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACnC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,sEAAsE;IACtE,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,GAAG,IAAI,CAAC;IAC/C,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5E,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD;AAymCD,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,+BAMtC"}

package/dist-lib/components/FlowCanvas.js

@@ -11,7 +11,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { BaseEdge, Background, BackgroundVariant, EdgeLabelRenderer, Handle, MiniMap, Position, ReactFlow, ReactFlowProvider, getSmoothStepPath, useReactFlow, } from "@xyflow/react";
 import dagre from "@dagrejs/dagre";
 import { Button } from "@flowselections/core";
-import { AlertTriangle, ArrowDownUp, ArrowLeftRight, CheckCircle2, ChevronDown, ChevronRight, Clock, Maximize2, Minimize2, Expand, ListChecks, Pencil, Settings2, Minus, Plus, X, } from "lucide-react";
+import { AlertTriangle, ArrowDownUp, ArrowLeftRight, CheckCircle2, ChevronDown, ChevronRight, ChevronUp, Clock, Maximize2, Minimize2, Expand, ListChecks, Pencil, Settings2, Minus, Plus, X, } from "lucide-react";
 import "@xyflow/react/dist/style.css";
 import { fieldsFor } from "../lib/flowTree";
 import { RuleFieldInput } from "./rule-engine/RuleFieldInput";
@@ -32,7 +32,7 @@ const NODE_STATE_CLASS = {
     disabled: "border-dashed border-border bg-muted text-muted-foreground",
 };
 // ── Lay-out ─────────────────────────────────────────────────────────────────
-function layout(tree, collapsed, richting) {
+function layout(tree, collapsed, richting, markers) {
     const nodes = Array.isArray(tree?.nodes) ? tree.nodes : [];
     const edges = Array.isArray(tree?.edges) ? tree.edges : [];
     const verborgen = (ancestors) => ancestors.some((a) => collapsed.has(a));
@@ -65,8 +65,9 @@ function layout(tree, collapsed, richting) {
         marginy: 40,
     });
     g.setDefaultEdgeLabel(() => ({}));
+    const effectieveHoogte = (n) => n.h + (markers?.get(n.id)?.eindpunt ? 112 : 0);
     for (const n of zichtbaar)
-        g.setNode(n.id, { width: n.w, height: n.h });
+        g.setNode(n.id, { width: n.w, height: effectieveHoogte(n) });
     const alle = [...zichtbareEdges, ...extra];
     for (const e of alle) {
         // Verwijspijlen tellen niet mee voor de rangorde (anders trekt dagre stappen scheef).
@@ -79,7 +80,7 @@ function layout(tree, collapsed, richting) {
     for (const n of zichtbaar) {
         const p = g.node(n.id);
         if (p)
-            posities.set(n.id, { x: p.x - n.w / 2, y: p.y - n.h / 2 });
+            posities.set(n.id, { x: p.x - n.w / 2, y: p.y - effectieveHoogte(n) / 2 });
     }
     return { zichtbaar, edges: alle, posities };
 }
@@ -134,6 +135,9 @@ function SourceNode({ data }) {
  * Klikken opent het paneel met alle vastgelegde stappen van dat vakje.
  */
 function Markering({ marker, onClick }) {
+    // Standaard klein: het vakje eronder blijft leesbaar. Met het pijltje klap
+    // je de volledige uitleg open.
+    const [open, setOpen] = useState(false);
     if (!marker)
         return null;
     const kleur = marker.kind === "stuck"
@@ -149,10 +153,47 @@ function Markering({ marker, onClick }) {
         marker.count && marker.count > 1 ? `${marker.count} gebeurtenissen` : null,
         marker.attempts && marker.attempts > 1 ? `poging ${marker.attempts}` : null,
     ].filter(Boolean);
-    return (_jsxs("button", { type: "button", className: `nodrag nopan absolute -bottom-6 left-3 right-3 z-20 flex items-start gap-1 rounded-md border px-2 py-1 text-left text-[10px] font-medium leading-tight shadow ${kleur} ${onClick ? "cursor-pointer hover:brightness-110" : "cursor-default"}`, title: onClick ? "Klik voor alles wat hier is vastgelegd" : marker.text, onClick: (e) => {
-            e.stopPropagation();
-            onClick?.();
-        }, children: [_jsx(Icoon, { className: "mt-0.5 h-3 w-3 shrink-0" }), _jsxs("span", { className: "min-w-0", children: [_jsxs("span", { className: "line-clamp-2 block", children: [marker.kind === "stuck" ? "Vastgelopen: " : "Beslissing: ", marker.beslissing ?? marker.text] }), marker.waarom ? (_jsxs("span", { className: "line-clamp-2 block font-normal opacity-95", children: ["Waarom: ", marker.waarom] })) : null, feiten.length > 0 && _jsx("span", { className: "line-clamp-2 block font-normal opacity-90", children: feiten.join(" · ") }), details.length > 0 && _jsx("span", { className: "block opacity-90", children: details.join(" · ") })] })] }));
+    const kop = `${marker.kind === "stuck" ? "Vastgelopen: " : "Beslissing: "}${marker.beslissing ?? marker.text}`;
+    if (marker.eindpunt && marker.stop) {
+        const stopKop = marker.stop.soort === "mislukt"
+            ? "Flow vastgelopen"
+            : marker.stop.soort === "klaar"
+                ? "Flow afgerond"
+                : marker.stop.soort === "nietvastgelegd"
+                    ? "Flow stopt hier"
+                    : "Flow wacht hier";
+        const stand = marker.feiten?.length
+            ? marker.feiten.slice(0, 2).join(" · ")
+            : marker.beslissing ?? marker.text;
+        return (_jsx("div", { className: `nodrag nopan absolute left-0 top-full z-30 mt-1 w-full rounded-md border px-2.5 py-2 text-left text-[10px] leading-tight shadow-lg ${kleur}`, children: _jsxs("button", { type: "button", className: `block w-full text-left ${onClick ? "cursor-pointer hover:brightness-110" : "cursor-default"}`, title: onClick ? "Klik voor alle vastgelegde details" : marker.stop.reden, onClick: (e) => {
+                    e.stopPropagation();
+                    onClick?.();
+                }, children: [_jsxs("span", { className: "flex items-center gap-1 font-semibold", children: [_jsx(Icoon, { className: "h-3 w-3 shrink-0" }), stopKop] }), _jsxs("span", { className: "mt-1 line-clamp-2 block font-normal", children: [_jsx("span", { className: "font-semibold", children: "Waarom: " }), marker.stop.reden] }), _jsxs("span", { className: "mt-0.5 line-clamp-1 block font-normal opacity-95", children: [_jsx("span", { className: "font-semibold", children: "Stand: " }), stand] }), _jsxs("span", { className: "mt-0.5 line-clamp-2 block font-normal opacity-95", children: [_jsx("span", { className: "font-semibold", children: "Wat moet er gebeuren: " }), marker.stop.volgendeStap ?? "Geen vervolgactie nodig."] })] }) }));
+    }
+    return (_jsxs("div", { className: `nodrag nopan absolute -bottom-6 left-3 right-3 z-20 flex items-start gap-1 rounded-md border px-2 py-1 text-left text-[10px] font-medium leading-tight shadow ${kleur}`, children: [_jsx(Icoon, { className: "mt-0.5 h-3 w-3 shrink-0" }), _jsxs("button", { type: "button", className: `min-w-0 flex-1 text-left ${onClick ? "cursor-pointer hover:brightness-110" : "cursor-default"}`, title: onClick ? "Klik voor alles wat hier is vastgelegd" : marker.text, onClick: (e) => {
+                    e.stopPropagation();
+                    onClick?.();
+                }, children: [_jsx("span", { className: open ? "line-clamp-2 block" : "block truncate", children: kop }), open ? (_jsxs(_Fragment, { children: [marker.waarom ? (_jsxs("span", { className: "line-clamp-2 block font-normal opacity-95", children: ["Waarom: ", marker.waarom] })) : null, feiten.length > 0 && (_jsx("span", { className: "line-clamp-2 block font-normal opacity-90", children: feiten.join(" · ") })), details.length > 0 && _jsx("span", { className: "block opacity-90", children: details.join(" · ") }), marker.verouderd && (_jsx("span", { className: "block font-normal opacity-90", children: "Instelling is sindsdien gewijzigd" }))] })) : null] }), _jsx("button", { type: "button", className: "mt-0.5 shrink-0 rounded p-0.5 hover:bg-black/20", title: open ? "Uitleg inklappen" : "Uitleg openklappen", "aria-label": open ? "Uitleg inklappen" : "Uitleg openklappen", "aria-expanded": open, onClick: (e) => {
+                    e.stopPropagation();
+                    setOpen((v) => !v);
+                }, children: open ? _jsx(ChevronUp, { className: "h-3 w-3" }) : _jsx(ChevronDown, { className: "h-3 w-3" }) })] }));
+}
+/**
+ * Rood blokje boven een vakje: dit vakje loopt vast, en dit is de reden.
+ * Standaard compact, zodat het vakje eronder leesbaar blijft.
+ */
+function Probleem({ probleem }) {
+    const [open, setOpen] = useState(false);
+    if (!probleem)
+        return null;
+    const kleur = probleem.soort === "mislukt"
+        ? "border-destructive bg-destructive text-destructive-foreground"
+        : "border-amber-500 bg-amber-500 text-white";
+    const feiten = Array.isArray(probleem.feiten) ? probleem.feiten : [];
+    return (_jsxs("div", { className: `nodrag nopan absolute -top-7 left-3 right-3 z-20 flex items-start gap-1 rounded-md border px-2 py-1 text-left text-[10px] font-medium leading-tight shadow ${kleur}`, children: [_jsx(AlertTriangle, { className: "mt-0.5 h-3 w-3 shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("span", { className: open ? "block" : "block truncate", children: probleem.titel }), open ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "block font-normal opacity-95", children: probleem.reden }), feiten.length > 0 && (_jsx("span", { className: "block font-normal opacity-90", children: feiten.join(" · ") })), probleem.volgendeStap ? (_jsxs("span", { className: "block font-normal opacity-90", children: ["Wat moet er gebeuren: ", probleem.volgendeStap] })) : null] })) : (_jsx("span", { className: "block truncate font-normal opacity-95", children: probleem.reden }))] }), _jsx("button", { type: "button", className: "mt-0.5 shrink-0 rounded p-0.5 hover:bg-black/20", title: open ? "Foutmelding inklappen" : "Foutmelding openklappen", "aria-label": open ? "Foutmelding inklappen" : "Foutmelding openklappen", "aria-expanded": open, onClick: (e) => {
+                    e.stopPropagation();
+                    setOpen((v) => !v);
+                }, children: open ? _jsx(ChevronUp, { className: "h-3 w-3" }) : _jsx(ChevronDown, { className: "h-3 w-3" }) })] }));
 }
 function StepNode({ data }) {
     const { node, richting, geselecteerd, marker, traceActief } = data;
@@ -170,14 +211,18 @@ function StepNode({ data }) {
                 data.onTrace(node.id);
             else if (node.stepId)
                 data.onSelectStep(node.stepId);
-        }, children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-[15px] font-semibold text-foreground", children: node.label }), _jsx("p", { className: "line-clamp-2 text-[11px] leading-snug text-muted-foreground", children: node.sublabel })] }), _jsx(TaakTeken, { soort: "taak", actief: !inactief }), _jsx(VraagTeken, { onClick: () => data.onHelp({ titel: node.label, regels: node.help }) }), _jsx(Markering, { marker: marker, onClick: data.onTrace ? () => data.onTrace?.(node.id) : undefined }), handles(richting)] }));
+        }, children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-[15px] font-semibold text-foreground", children: node.label }), _jsx("p", { className: "line-clamp-2 text-[11px] leading-snug text-muted-foreground", children: node.sublabel })] }), _jsx(TaakTeken, { soort: "taak", actief: !inactief }), _jsx(VraagTeken, { onClick: () => data.onHelp({ titel: node.label, regels: node.help }) }), _jsx(Markering, { marker: marker, onClick: data.onTrace ? () => data.onTrace?.(node.id) : undefined }), _jsx(Probleem, { probleem: data.probleem }), handles(richting)] }));
 }
 function SettingNode({ data }) {
     const { node, richting, bewerken } = data;
-    return (_jsxs("div", { className: `relative flex cursor-pointer items-start justify-between gap-2 rounded-lg border px-3 py-2 ${NODE_STATE_CLASS[node.state]}${routeClass(node)} ${bewerken ? "ring-2 ring-primary" : ""}`, style: { width: node.w, height: node.h }, onClick: () => node.stepId && data.onSelectStep(node.stepId), onDoubleClick: (e) => {
+    return (_jsxs("div", { className: `relative flex cursor-pointer items-start justify-between gap-2 rounded-lg border px-3 py-2 ${NODE_STATE_CLASS[node.state]}${routeClass(node)} ${data.probleem?.soort === "mislukt"
+            ? "border-destructive ring-2 ring-destructive/50"
+            : data.probleem
+                ? "border-amber-500 ring-2 ring-amber-400/50"
+                : ""} ${bewerken ? "ring-2 ring-primary" : ""}`, style: { width: node.w, height: node.h }, onClick: () => node.stepId && data.onSelectStep(node.stepId), onDoubleClick: (e) => {
             e.stopPropagation();
             data.onBewerk(bewerken ? null : node.id);
-        }, title: "Klik voor het zijpaneel \u00B7 dubbelklik om hier aan te passen", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-[11px] font-semibold leading-tight text-foreground", children: node.label }), Array.isArray(node.lines) && node.lines.length ? (_jsxs("ul", { className: "mt-1 space-y-0.5", children: [node.lines.slice(0, 6).map((l) => (_jsx("li", { className: "truncate text-[10px] leading-[16px] text-muted-foreground", children: l }, l))), node.lines.length > 6 && (_jsxs("li", { className: "text-[10px] text-muted-foreground", children: ["+", node.lines.length - 6, " meer\u2026"] }))] })) : (_jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: node.sublabel }))] }), _jsx(TaakTeken, { soort: "regel", actief: node.state === "active" }), _jsx(VraagTeken, { onClick: () => data.onHelp({ titel: node.label, regels: node.help }) }), _jsx(BewerkHint, {}), bewerken && _jsx(VeldBewerker, { data: data }), handles(richting)] }));
+        }, title: "Klik voor het zijpaneel \u00B7 dubbelklik om hier aan te passen", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-[11px] font-semibold leading-tight text-foreground", children: node.label }), Array.isArray(node.lines) && node.lines.length ? (_jsxs("ul", { className: "mt-1 space-y-0.5", children: [node.lines.slice(0, 6).map((l) => (_jsx("li", { className: "truncate text-[10px] leading-[16px] text-muted-foreground", children: l }, l))), node.lines.length > 6 && (_jsxs("li", { className: "text-[10px] text-muted-foreground", children: ["+", node.lines.length - 6, " meer\u2026"] }))] })) : (_jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: node.sublabel }))] }), _jsx(TaakTeken, { soort: "regel", actief: node.state === "active" }), _jsx(VraagTeken, { onClick: () => data.onHelp({ titel: node.label, regels: node.help }) }), _jsx(BewerkHint, {}), _jsx(Probleem, { probleem: data.probleem }), bewerken && _jsx(VeldBewerker, { data: data }), handles(richting)] }));
 }
 function DecisionNode({ data }) {
     const { node, richting, ingeklapt, bewerken } = data;
@@ -196,11 +241,20 @@ function DecisionNode({ data }) {
                     const waarde = node.isBoolean ? raw === "true" : raw;
                     if (node.storeId && node.fieldKey)
                         data.onChangeChoice(node.storeId, node.fieldKey, waarde);
-                }, children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }), bewerken && _jsx(VeldBewerker, { data: data }), handles(richting)] }));
+                }, children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }), _jsx(Probleem, { probleem: data.probleem }), bewerken && _jsx(VeldBewerker, { data: data }), handles(richting)] }));
 }
 function MergeNode({ data }) {
-    const { node, richting } = data;
-    return (_jsx("div", { className: `rotate-45 border-2 ${node.state === "active" ? "border-primary bg-primary/20" : "border-muted-foreground/50 bg-background"}`, style: { width: node.w, height: node.h }, title: "Samenkomst (BPMN-gateway)", children: handles(richting) }));
+    const { node, richting, geselecteerd, onMerge } = data;
+    const wacht = node.wacht;
+    return (_jsxs("div", { className: "relative", style: { width: node.w, height: node.h }, children: [_jsx("div", { role: onMerge ? "button" : undefined, tabIndex: onMerge ? 0 : undefined, "aria-label": onMerge ? "Samenkomst beheren" : undefined, onClick: onMerge ? () => onMerge(node.id) : undefined, className: `h-full w-full rotate-45 border-2 ${onMerge ? "cursor-pointer" : ""} ${geselecteerd
+                    ? "border-primary bg-primary ring-2 ring-primary/40"
+                    : wacht
+                        ? "border-amber-500 bg-amber-200"
+                        : node.state === "active"
+                            ? "border-primary bg-primary/20"
+                            : "border-muted-foreground/50 bg-background"}`, title: wacht
+                    ? `Samenkomst — de flow gaat verder zodra ${wacht.label} klaar is`
+                    : "Samenkomst — klik om dit ruitje te beheren", children: handles(richting) }), wacht && (_jsx("span", { className: "pointer-events-none absolute left-1/2 top-full mt-1 -translate-x-1/2 whitespace-nowrap rounded border border-amber-500/50 bg-background px-1 text-[10px] font-medium text-amber-700", children: wacht.wanneer === "alle" ? "alle lijnen" : `alleen: ${wacht.label}` }))] }));
 }
 function OptionNode({ data }) {
     const { node, richting } = data;
@@ -249,7 +303,7 @@ function StateEdge(props) {
 }
 const EDGE_TYPES = { state: StateEdge };
 // ── Canvas ──────────────────────────────────────────────────────────────────
-function Binnen({ tree, selectedStepId, settings, markers, nodeTrace, routeLabel, routeSummary, traceNodeId, onTraceNode, onClearRoute, onSelectStep, onChangeChoice, }) {
+function Binnen({ tree, selectedStepId, settings, markers, problemen, nodeTrace, routeLabel, routeSummary, traceNodeId, onTraceNode, onClearRoute, onSelectStep, onChangeChoice, mergeId, onSelectMerge, }) {
     const [debug, setDebug] = useState(false);
     const [bewerktId, setBewerktId] = useState(null);
     const [uitleg, setUitleg] = useState(null);
@@ -329,7 +383,7 @@ function Binnen({ tree, selectedStepId, settings, markers, nodeTrace, routeLabel
             return next;
         });
     }, []);
-    const { zichtbaar, edges, posities } = useMemo(() => layout(tree, collapsed, richting), [tree, collapsed, richting]);
+    const { zichtbaar, edges, posities } = useMemo(() => layout(tree, collapsed, richting, markers), [tree, collapsed, richting, markers]);
     const rfNodes = useMemo(() => zichtbaar.map((node) => ({
         id: node.id,
         type: node.kind,
@@ -344,10 +398,13 @@ function Binnen({ tree, selectedStepId, settings, markers, nodeTrace, routeLabel
         data: {
             node,
             richting,
-            geselecteerd: !!node.stepId && node.kind === "step" && node.stepId === selectedStepId,
+            geselecteerd: node.kind === "merge"
+                ? node.id === mergeId
+                : !!node.stepId && node.kind === "step" && node.stepId === selectedStepId,
             ingeklapt: collapsed.has(node.id),
             bewerken: bewerktId === node.id,
             marker: markers?.get(node.id),
+            probleem: problemen?.get(node.id),
             traceActief: traceNodeId === node.id,
             settings,
             onSelectStep,
@@ -356,15 +413,19 @@ function Binnen({ tree, selectedStepId, settings, markers, nodeTrace, routeLabel
             onToggleCollapse: toggleCollapse,
             onBewerk: setBewerktId,
             onTrace: onTraceNode ? (id) => onTraceNode(id) : undefined,
+            onMerge: onSelectMerge,
         },
     })), [
         zichtbaar,
         posities,
         richting,
         selectedStepId,
+        mergeId,
+        onSelectMerge,
         collapsed,
         bewerktId,
         markers,
+        problemen,
         traceNodeId,
         onTraceNode,
         settings,
@@ -422,7 +483,7 @@ function Binnen({ tree, selectedStepId, settings, markers, nodeTrace, routeLabel
                                     if (!d)
                                         return "transparent";
                                     return d.state === "active" ? "hsl(var(--primary))" : "hsl(var(--muted-foreground) / 0.4)";
-                                } })] })] }), traceGroep && (_jsx(NodeTracePanel, { groep: traceGroep, orderLabel: routeLabel ?? null, debug: debug, onDebug: setDebug, onClose: () => onTraceNode?.(null) })), uitleg && (_jsxs("div", { className: "absolute bottom-12 left-3 z-20 w-[22rem] max-w-[85%] rounded-xl border border-border bg-background p-4 shadow-lg", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("p", { className: "text-sm font-semibold", children: uitleg.titel }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Uitleg sluiten", onClick: () => setUitleg(null), children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "mt-2 space-y-2", children: uitleg.regels.map((regel, i) => (_jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: regel }, i))) })] })), _jsx("p", { className: "border-t border-border px-3 py-2 text-xs text-muted-foreground", children: "Slepen om te verschuiven \u00B7 scrollen verschuift, linkermuisknop ingedrukt houden en scrollen zoomt in en uit \u00B7 dubbelklik op een vakje of keuzelijst om de instellingen daar meteen aan te passen (Escape sluit) \u00B7 klik een stap of instelling om alle regels in het zijpaneel te openen" })] }));
+                                } })] })] }), traceGroep && (_jsx(NodeTracePanel, { groep: traceGroep, stop: problemen?.get(traceGroep.nodeId) ?? markers?.get(traceGroep.nodeId)?.stop ?? null, orderLabel: routeLabel ?? null, debug: debug, onDebug: setDebug, onClose: () => onTraceNode?.(null) })), uitleg && (_jsxs("div", { className: "absolute bottom-12 left-3 z-20 w-[22rem] max-w-[85%] rounded-xl border border-border bg-background p-4 shadow-lg", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("p", { className: "text-sm font-semibold", children: uitleg.titel }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Uitleg sluiten", onClick: () => setUitleg(null), children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "mt-2 space-y-2", children: uitleg.regels.map((regel, i) => (_jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: regel }, i))) })] })), _jsx("p", { className: "border-t border-border px-3 py-2 text-xs text-muted-foreground", children: "Slepen om te verschuiven \u00B7 scrollen verschuift, linkermuisknop ingedrukt houden en scrollen zoomt in en uit \u00B7 dubbelklik op een vakje of keuzelijst om de instellingen daar meteen aan te passen (Escape sluit) \u00B7 klik een stap of instelling om alle regels in het zijpaneel te openen" })] }));
 }
 export function FlowCanvas(props) {
     return (_jsx(ReactFlowProvider, { children: _jsx(Binnen, { ...props }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"FlowOrders.d.ts","sourceRoot":"","sources":["../../src/components/FlowOrders.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAA2B,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG9F,UAAU,KAAK;IACb,mEAAmE;IACnE,OAAO,EAAE,CACP,KAAK,EAAE,UAAU,GAAG,IAAI,EACxB,KAAK,EAAE,MAAM,GAAG,IAAI,EACpB,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,MAAM,EAAE,WAAW,GAAG,IAAI,KACvB,IAAI,CAAC;CACX;AAoCD,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,KAAK,+BAgN5C"}
+{"version":3,"file":"FlowOrders.d.ts","sourceRoot":"","sources":["../../src/components/FlowOrders.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAA2B,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG9F,UAAU,KAAK;IACb,mEAAmE;IACnE,OAAO,EAAE,CACP,KAAK,EAAE,UAAU,GAAG,IAAI,EACxB,KAAK,EAAE,MAAM,GAAG,IAAI,EACpB,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,MAAM,EAAE,WAAW,GAAG,IAAI,KACvB,IAAI,CAAC;CACX;AAoCD,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,KAAK,+BA6Q5C"}

package/dist-lib/components/FlowOrders.js

@@ -9,7 +9,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ============================================================================
 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 { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Clock, RefreshCw, RotateCcw, Search, X } from "lucide-react";
+import { toast } from "sonner";
+import { supabase } from "../integrations/supabase/moduleClient.js";
 import { useAlleOrders, useOrderVersies, useVersieEvents } from "../hooks/useOrderVersies";
 import { bepaalRoute, redenTekst } from "../lib/flowRoute";
 import { Gebeurtenis } from "./OrderLogboek";
@@ -58,24 +60,33 @@ export function FlowOrders({ onRoute }) {
     const [zoek, setZoek] = useState("");
     const [zoekActief, setZoekActief] = useState("");
     const [filter, setFilter] = useState("");
+    const [sortering, setSortering] = useState("nieuw");
     const [orderRef, setOrderRef] = useState(null);
     const [versieId, setVersieId] = useState(null);
+    const [herbezig, setHerbezig] = useState(false);
     useEffect(() => {
         const t = setTimeout(() => setZoekActief(zoek.trim()), 300);
         return () => clearTimeout(t);
     }, [zoek]);
     const { rows, loading, error, refresh } = useAlleOrders(zoekActief);
     const veiligeRows = Array.isArray(rows) ? rows : [];
-    const gefilterd = useMemo(() => 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 gefilterd = useMemo(() => {
+        const lijst = veiligeRows.filter((r) => {
+            if (!filter)
+                return true;
+            const st = orderStand(r);
+            if (filter === "fout")
+                return st.kleur === "destructive";
+            if (filter === "bezig")
+                return st.kleur === "secondary";
+            return st.kleur === "default" || st.kleur === "outline";
+        });
+        const stempel = (r) => {
+            const t = Date.parse(String(r.createdAt ?? r.lastAt ?? ""));
+            return Number.isFinite(t) ? t : 0;
+        };
+        return [...lijst].sort((a, b) => (sortering === "nieuw" ? stempel(b) - stempel(a) : stempel(a) - stempel(b)));
+    }, [veiligeRows, filter, sortering]);
     const versies = useOrderVersies(orderRef);
     const veiligeVersies = Array.isArray(versies.versions) ? versies.versions : [];
     const gekozen = veiligeVersies.find((v) => v.id === versieId) ?? null;
@@ -98,18 +109,53 @@ export function FlowOrders({ onRoute }) {
         setVersieId(null);
         setOrderRef((v) => (v === nr ? null : nr));
     };
+    // Eén order helemaal opnieuw vanaf "Order komt binnen" door de flow laten lopen.
+    const opnieuwDoorFlow = async (nr) => {
+        setHerbezig(true);
+        try {
+            const { data, error: rpcError } = await supabase.rpc("logistics_replan_order_journey", {
+                p_order_ref: nr,
+            });
+            if (rpcError)
+                throw new Error(rpcError.message);
+            const r = (data ?? {});
+            if (r?.gevonden === false) {
+                toast.error(`Order ${nr} is niet gevonden.`);
+                return;
+            }
+            toast.success(`${nr} begint opnieuw vanaf "Order komt binnen"`, {
+                description: `Oude route gewist (${r?.oudeStappenGewist ?? 0} stappen, ${r?.oudeBerekeningenGewist ?? 0} eerdere berekeningen). ${r?.karrenVerwijderd ?? 0} karren opnieuw te berekenen.`,
+            });
+            setVersieId(null);
+            onRoute(null, null, null, null);
+            try {
+                await supabase.rpc("logistics_trace_progress_order", { p_order_ref: nr });
+            }
+            catch {
+                /* meekijken mag nooit blokkeren */
+            }
+            await refresh();
+            await versies.refresh();
+        }
+        catch (e) {
+            toast.error("Opnieuw berekenen is niet gelukt", { description: e?.message ? String(e.message) : undefined });
+        }
+        finally {
+            setHerbezig(false);
+        }
+    };
     return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Orders in het systeem" }), _jsx(CardDescription, { children: "Klik een order voor alle herberekeningen; klik een versie om de gelopen route blauw op de kaart te zien en precies te lezen waar hij is vastgelopen." })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void refresh(), disabled: loading, children: [_jsx(RefreshCw, { className: `mr-1 h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` }), "Vernieuwen"] })] }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative w-full max-w-xs", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }), _jsx(Input, { className: "pl-8", placeholder: "Zoek op ordernummer of klant", value: zoek, onChange: (e) => setZoek(e.target.value) })] }), [
                                 ["", "Alles"],
                                 ["fout", "Vastgelopen"],
                                 ["bezig", "Bezig / wachtend"],
                                 ["klaar", "Overig"],
-                            ].map(([w, l]) => (_jsx(Button, { size: "sm", variant: filter === w ? "default" : "outline", onClick: () => setFilter(w), children: l }, w))), _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) => {
+                            ].map(([w, l]) => (_jsx(Button, { size: "sm", variant: filter === w ? "default" : "outline", onClick: () => setFilter(w), children: l }, w))), _jsx(Button, { size: "sm", variant: "outline", onClick: () => setSortering((s) => (s === "nieuw" ? "oud" : "nieuw")), children: sortering === "nieuw" ? "Nieuwste eerst" : "Oudste eerst" }), _jsxs("span", { className: "ml-auto text-xs text-muted-foreground", children: [gefilterd.length, " orders"] })] })] }), _jsxs(CardContent, { className: "space-y-3", children: [error && (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2", children: [_jsx("p", { className: "text-sm text-destructive", children: error }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void refresh(), disabled: loading, children: [_jsx(RefreshCw, { className: `mr-1 h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` }), "Opnieuw proberen"] })] })), loading && veiligeRows.length === 0 ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-10 w-full" }), _jsx(Skeleton, { className: "h-10 w-full" }), _jsx(Skeleton, { className: "h-10 w-full" })] })) : gefilterd.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen orders gevonden." })) : (_jsx("div", { className: "max-h-[420px] overflow-y-auto rounded-md border border-border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "sticky top-0 bg-muted/60 text-xs text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Order" }), _jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Klant" }), _jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Bron" }), _jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Levering" }), _jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Stand" }), _jsx("th", { className: "px-2 py-1.5 text-right font-medium", children: "Versies" }), _jsx("th", { className: "px-2 py-1.5 text-right font-medium", children: "Fouten" }), _jsx("th", { className: "px-2 py-1.5 text-left font-medium", children: "Laatste activiteit" })] }) }), _jsx("tbody", { children: gefilterd.map((r) => {
                                         const st = orderStand(r);
                                         const actief = r.orderNumber === orderRef;
                                         return (_jsxs("tr", { className: `cursor-pointer border-t border-border hover:bg-muted/40 ${actief ? "bg-primary/10" : ""}`, onClick: () => kies(r.orderNumber), children: [_jsx("td", { className: "px-2 py-1.5 font-medium", children: _jsxs("span", { className: "inline-flex items-center gap-1", children: [actief ? _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : _jsx(ChevronRight, { className: "h-3.5 w-3.5" }), r.orderNumber] }) }), _jsx("td", { className: "max-w-[180px] truncate px-2 py-1.5", children: r.customerName ?? "—" }), _jsx("td", { className: "px-2 py-1.5", children: r.orderSource === "floriday" ? "Floriday" : r.orderSource ? "Eigen verkoop" : "—" }), _jsx("td", { className: "px-2 py-1.5", children: r.deliveryDate ?? "—" }), _jsxs("td", { className: "px-2 py-1.5", children: [_jsx(Badge, { variant: st.kleur, children: st.label }), r.reasonCode && st.kleur === "destructive" && (_jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: redenTekst(r.reasonCode) }))] }), _jsx("td", { className: "px-2 py-1.5 text-right tabular-nums", children: r.versions }), _jsx("td", { className: `px-2 py-1.5 text-right tabular-nums ${r.errors > 0 ? "text-destructive" : ""}`, children: r.errors }), _jsx("td", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: tijd(r.lastAt ?? r.createdAt) })] }, r.orderNumber));
                                     }) })] }) })), orderRef && (_jsxs("div", { className: "space-y-3 rounded-md border border-primary/40 bg-primary/5 p-3", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: orderRef }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [versies.order?.customerName ?? "", versies.order?.status ? ` · status: ${versies.order.status}` : "", versies.carts && versies.carts.total > 0
                                                         ? ` · karren: ${versies.carts.total} (${versies.carts.printed} geprint, ${versies.carts.controlled} gecontroleerd)`
-                                                        : "", versies.order?.planLockedAt ? " · indeling bevroren" : ""] })] }), _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) }))] }))] })] }));
+                                                        : "", versies.order?.planLockedAt ? " · indeling bevroren" : ""] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { size: "sm", onClick: () => void opnieuwDoorFlow(orderRef), disabled: herbezig, children: [_jsx(RotateCcw, { className: "mr-1 h-4 w-4" }), herbezig ? "Bezig…" : "Opnieuw door de flowchart"] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Order sluiten", onClick: () => kies(orderRef), children: _jsx(X, { className: "h-4 w-4" }) })] })] }), versies.error && _jsx("p", { className: "text-sm text-destructive", children: versies.error }), versies.loading ? (_jsx(Skeleton, { className: "h-16 w-full" })) : veiligeVersies.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen herberekening vastgelegd voor deze order. De kaart toont waar de order nu staat." })) : (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("p", { className: "text-xs font-medium text-muted-foreground", children: [veiligeVersies.length, " herberekening", veiligeVersies.length === 1 ? "" : "en", " \u2014 nieuwste bovenaan"] }), veiligeVersies.map((v) => (_jsx(VersieRij, { versie: v, laatste: v.id === laatsteId, gekozen: (gekozen?.id ?? (versieId ? null : laatsteId)) === v.id, onKies: () => setVersieId((cur) => (cur === v.id ? null : v.id)) }, v.id)))] })), (gekozen ?? (versieId ? null : veiligeVersies[0])) && (_jsx(VersieDetail, { orderRef: orderRef, versie: (gekozen ?? veiligeVersies[0]), route: bepaalRoute(gekozen ?? veiligeVersies[0], versies.order, versies.carts, (gekozen ?? veiligeVersies[0])?.id === laatsteId) }))] }))] })] }));
 }
 function VersieRij({ versie, laatste, gekozen, onKies, }) {
     const st = VERSIE_STATUS[(versie.status ?? "pending").toLowerCase()] ?? { label: versie.status ?? "—", kleur: "outline" };

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

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