@flowselections/logistiek-engine 1.0.34 → 1.0.53

package/dist-lib/components/OrderLogboek.js

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

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

@@ -0,0 +1,5 @@
+export declare function OrderStopBanner({ orderRef, onNode }: {
+    orderRef: string;
+    onNode?: (nodeId: string) => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=OrderStopBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrderStopBanner.d.ts","sourceRoot":"","sources":["../../src/components/OrderStopBanner.tsx"],"names":[],"mappings":"AAaA,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,sCAqC5G"}

package/dist-lib/components/OrderStopBanner.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/OrderStopBanner.tsx — waar staat deze order stil?
+// ============================================================================
+// Boven de flowkaart: bij welk vakje de order gestopt is of staat te wachten,
+// waarom, sinds wanneer en wat er moet gebeuren. Alleen lezen.
+// ============================================================================
+import { AlertTriangle, Clock } from "lucide-react";
+import { useOrderTraceStand } from "../hooks/useOrderTrace";
+import { flowNodeLabel } from "../lib/flowNodes";
+import { FOUTSOORT_LABEL, Veld, sinds, tijd } from "./OrderTraceDetails";
+export function OrderStopBanner({ orderRef, onNode }) {
+    const { stand } = useOrderTraceStand(orderRef);
+    if (!stand)
+        return null;
+    const gestopt = stand.stuckStatus === "mislukt";
+    const wacht = stand.stuckStatus === "wachtend";
+    if (!gestopt && !wacht)
+        return null;
+    const node = stand.stuckNode ?? null;
+    return (_jsxs("div", { className: `rounded-lg border p-3 ${gestopt ? "border-destructive/50 bg-destructive/5" : "border-amber-500/40 bg-amber-500/5"}`, children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-semibold", children: [gestopt ? _jsx(AlertTriangle, { className: "h-4 w-4" }) : _jsx(Clock, { className: "h-4 w-4" }), gestopt ? "ORDER GESTOPT BIJ" : "ORDER WACHT BIJ", ":", " ", node ? flowNodeLabel(node) : stand.stuckStep ?? "onbekende stap", node && onNode ? (_jsx("button", { type: "button", className: "text-xs font-normal underline", onClick: () => onNode(node), children: "toon dit vakje" })) : null] }), _jsx(Veld, { label: "Reden", children: stand.stuckReason ?? stand.queueError }), _jsx(Veld, { label: "Soort", children: stand.errorClass ? FOUTSOORT_LABEL[stand.errorClass] ?? stand.errorClass : null }), _jsx(Veld, { label: "Geblokkeerd sinds", children: stand.blockedSince ? `${tijd(stand.blockedSince)} (${sinds(stand.blockedSince)})` : null }), _jsx(Veld, { label: "Automatische pogingen", children: stand.tries > 0 ? String(stand.tries) : null }), _jsx(Veld, { label: "Volgende poging", children: stand.nextAttemptAt ? tijd(stand.nextAttemptAt) : null }), _jsx(Veld, { label: "Wat moet er gebeuren", children: stand.nextStep }), _jsx(Veld, { label: "Wachtrij", children: stand.queueStatus })] }));
+}

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

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

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

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

package/dist-lib/components/OrderTraceDetails.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ============================================================================
+// src/components/OrderTraceDetails.tsx — bouwstenen om één gebeurtenis te tonen
+// ============================================================================
+// Gedeelde weergave van wat de Engine bij een stap heeft vastgelegd: de
+// beslissing, de berekening, de fout, gewijzigde gegevens en extern verkeer.
+// Alleen lezen. GEEN <Header /> hier — die levert de shell.
+// ============================================================================
+import { useState } from "react";
+import { Badge } from "@flowselections/core";
+import { AlertTriangle, ChevronDown, ChevronRight, Database, ExternalLink } from "lucide-react";
+import { flowNodeLabel } from "../lib/flowNodes";
+export const FOUTSOORT_LABEL = {
+    technisch: "Technische fout",
+    ontbrekende_gegevens: "Ontbrekende gegevens",
+    configuratie: "Configuratiefout",
+    regel: "Bewuste regel",
+    extern: "Extern systeem",
+};
+export const FOUTSOORT_UITLEG = {
+    technisch: "Er ging iets stuk in de database, een koppeling of de printer.",
+    ontbrekende_gegevens: "De order of de stamgegevens missen iets dat de Engine nodig heeft.",
+    configuratie: "Een instelling of koppeling in de werkwijze staat niet goed.",
+    regel: "De Engine mag bewust niet verder vanwege een ingestelde regel.",
+    extern: "Een extern systeem heeft nog niets teruggegeven.",
+};
+export const STATUS_KLEUR = {
+    geslaagd: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+    wachtend: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    waarschuwing: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    overgeslagen: "bg-muted text-muted-foreground",
+    mislukt: "bg-destructive/15 text-destructive",
+};
+export function tijd(v) {
+    if (!v)
+        return "—";
+    const d = new Date(v);
+    return Number.isNaN(d.getTime()) ? String(v) : d.toLocaleString("nl-NL");
+}
+export function klok(v) {
+    if (!v)
+        return "—";
+    const d = new Date(v);
+    if (Number.isNaN(d.getTime()))
+        return String(v);
+    return d.toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" });
+}
+export function duur(ms) {
+    if (ms === null || ms === undefined)
+        return "—";
+    if (ms < 1000)
+        return `${ms} ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)} s`;
+    return `${Math.round(ms / 60000)} min`;
+}
+export function sinds(v) {
+    if (!v)
+        return "—";
+    const start = new Date(v).getTime();
+    if (Number.isNaN(start))
+        return "—";
+    const min = Math.max(Math.round((Date.now() - start) / 60000), 0);
+    if (min < 60)
+        return `${min} minuten`;
+    const u = Math.floor(min / 60);
+    if (u < 24)
+        return `${u} uur en ${min % 60} minuten`;
+    return `${Math.floor(u / 24)} dagen en ${u % 24} uur`;
+}
+export function Json({ waarde }) {
+    if (waarde === null || waarde === undefined)
+        return null;
+    return (_jsx("pre", { className: "mt-1 max-h-56 overflow-auto rounded-md bg-muted/60 p-2 text-xs leading-relaxed", children: JSON.stringify(waarde, null, 2) }));
+}
+export function Veld({ label, children }) {
+    if (children === null || children === undefined || children === "")
+        return null;
+    return (_jsxs("div", { className: "text-sm", children: [_jsxs("span", { className: "font-medium text-foreground", children: [label, ": "] }), _jsx("span", { className: "text-muted-foreground", children: children })] }));
+}
+/** Eén gebeurtenis van de Engine, uitklapbaar met alle vastgelegde details. */
+export function Stap({ e, debug, open: standaardOpen }) {
+    const [open, setOpen] = useState(standaardOpen ?? e.status === "mislukt");
+    const calc = (e.calc ?? null);
+    const fout = e.status === "mislukt";
+    return (_jsxs("div", { className: `rounded-lg border ${fout ? "border-destructive/50 bg-destructive/5" : "bg-card"}`, children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-start gap-3 p-3 text-left", children: [open ? _jsx(ChevronDown, { className: "mt-1 h-4 w-4 shrink-0" }) : _jsx(ChevronRight, { className: "mt-1 h-4 w-4 shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-medium", children: e.step }), _jsx(Badge, { className: STATUS_KLEUR[e.status] ?? "", children: e.status }), e.errorClass ? _jsx(Badge, { variant: "outline", children: FOUTSOORT_LABEL[e.errorClass] ?? e.errorClass }) : null, e.nodeId ? _jsx(Badge, { variant: "outline", children: flowNodeLabel(e.nodeId) }) : null] }), _jsxs("div", { className: "mt-1 flex flex-wrap gap-x-4 text-xs text-muted-foreground", children: [_jsx("span", { children: tijd(e.createdAt) }), _jsxs("span", { children: ["Duur: ", duur(e.durationMs)] }), e.actor ? _jsxs("span", { children: ["Door: ", e.actor] }) : null, e.attempts > 0 ? _jsxs("span", { children: ["Poging ", e.attempts] }) : null] }), e.reason || e.decision ? (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: e.reason ?? e.decision })) : null] })] }), open ? (_jsxs("div", { className: "space-y-3 border-t px-3 py-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Veld, { label: "Beslissing", children: e.decision }), _jsx(Veld, { label: "Waarom", children: e.reason }), _jsx(Veld, { label: "Regel", children: e.rule }), _jsx(Veld, { label: "Volgende stap", children: e.nextStep }), _jsx(Veld, { label: "Volgende poging", children: e.nextAttemptAt ? tijd(e.nextAttemptAt) : null })] }), calc ? (_jsxs("div", { className: "rounded-md border bg-muted/40 p-3", children: [_jsx("p", { className: "text-sm font-medium", children: "Berekening" }), _jsx(Veld, { label: "Instelling", children: calc.setting }), _jsx(Veld, { label: "Rekenstap", children: calc.formula }), _jsx(Veld, { label: "Uitkomst", children: calc.result }), _jsx(Veld, { label: "Conclusie", children: calc.conclusion }), calc.values ? _jsx(Json, { waarde: calc.values }) : null] })) : null, fout ? (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-destructive", children: [_jsx(AlertTriangle, { className: "h-4 w-4" }), " Fout bij deze stap"] }), _jsx(Veld, { label: "Soort", children: e.errorClass ? FOUTSOORT_LABEL[e.errorClass] ?? e.errorClass : "Technische fout" }), _jsx(Veld, { label: "Uitleg", children: e.errorClass ? FOUTSOORT_UITLEG[e.errorClass] ?? null : null }), _jsx(Veld, { label: "Melding", children: e.error }), _jsx(Veld, { label: "Pogingen", children: e.attempts > 0 ? String(e.attempts) : null })] })) : null, e.dbTable ? (_jsxs("div", { className: "rounded-md border p-3", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(Database, { className: "h-4 w-4" }), " Gegevens gewijzigd"] }), _jsx(Veld, { label: "Tabel", children: e.dbTable }), _jsx(Veld, { label: "Actie", children: e.dbAction }), e.dbOld ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2 text-xs font-medium", children: "Voor" }), _jsx(Json, { waarde: e.dbOld })] })) : null, e.dbNew ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2 text-xs font-medium", children: "Na" }), _jsx(Json, { waarde: e.dbNew })] })) : null] })) : null, e.externalSystem ? (_jsxs("div", { className: "rounded-md border p-3", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(ExternalLink, { className: "h-4 w-4" }), " Extern systeem"] }), _jsx(Veld, { label: "Systeem", children: e.externalSystem }), _jsx(Veld, { label: "Actie", children: e.externalAction }), _jsx(Veld, { label: "Kenmerk", children: e.externalRef }), _jsx(Veld, { label: "Resultaat", children: e.externalStatus }), _jsx(Json, { waarde: e.externalResponse })] })) : null, e.reads ? (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "Gelezen gegevens" }), _jsx(Json, { waarde: e.reads })] })) : null, e.values ? (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "Gebruikte waarden" }), _jsx(Json, { waarde: e.values })] })) : null, debug ? (_jsxs("div", { className: "rounded-md border border-dashed p-3", children: [_jsx("p", { className: "text-sm font-medium", children: "Technische gegevens" }), _jsx(Veld, { label: "Trace ID", children: e.traceId }), _jsx(Veld, { label: "Gebeurtenis ID", children: e.id }), _jsx(Veld, { label: "Vakje", children: e.nodeId }), _jsx(Veld, { label: "Fase", children: e.phase }), _jsx(Veld, { label: "Kar", children: e.cartRef }), _jsx(Veld, { label: "Pakbon", children: e.slipRef }), _jsx(Veld, { label: "Regel in database", children: e.dbRecord }), _jsxs("div", { className: "mt-2 grid gap-2 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium", children: "Invoer" }), _jsx(Json, { waarde: e.input })] }), _jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium", children: "Uitvoer" }), _jsx(Json, { waarde: e.output })] })] })] })) : null] })) : null] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"RegiePage.d.ts","sourceRoot":"","sources":["../../src/components/RegiePage.tsx"],"names":[],"mappings":"AA6EA,wBAAgB,SAAS,gCAmYxB"}
+{"version":3,"file":"RegiePage.d.ts","sourceRoot":"","sources":["../../src/components/RegiePage.tsx"],"names":[],"mappings":"AA4BA,wBAAgB,SAAS,gCAqExB"}

package/dist-lib/components/RegiePage.js

@@ -1,75 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ============================================================================
 // src/components/RegiePage.tsx — Regieoverzicht van de Logistics Engine
 // ============================================================================
-// Toont welke taken de Engine heeft uitgedeeld, per order en per module,
-// plus een simulatieveld om te zien wat de Engine met een order zou doen.
+// Toont hoeveel taken er per module openstaan en daaronder alle binnengekomen
+// orders met het volledige logboek per order.
 // GEEN <Header /> hier — die levert de shell.
 // ============================================================================
-import { useMemo, useState } from "react";
-import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
-import { ArrowUpCircle, Ban, RefreshCw, RotateCcw, Trash2, Workflow } from "lucide-react";
+import { useMemo } from "react";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@flowselections/core";
+import { RefreshCw, Workflow } from "lucide-react";
 import { Link } from "@tanstack/react-router";
 import { useLogistiekTaken } from "../hooks/useLogistiekTaken";
-import { BeladingIndelingCard } from "./BeladingIndelingCard";
-import { VoorraadMeldingenCard } from "./VoorraadMeldingenCard";
-import { VertragingMeldingenCard } from "./VertragingMeldingenCard";
-import { CapaciteitMeldingenCard } from "./CapaciteitMeldingenCard";
-import { FloridayPushCard } from "./FloridayPushCard";
-import { PrintjobsCard } from "./PrintjobsCard";
 import { ConsistentieCard } from "./ConsistentieCard";
 import { KarplanStatusCard } from "./KarplanStatusCard";
-import { GeblokkeerdeOrdersCard } from "./GeblokkeerdeOrdersCard";
-import { AfmetingenBronnenCard } from "./AfmetingenBronnenCard";
-import { LOGISTICS_MODULES, TASK_LABEL, TASK_STATUS_LABEL, } from "../lib/logisticsTasks";
-function tijd(value) {
-    if (!value)
-        return "—";
-    const d = new Date(value);
-    if (Number.isNaN(d.getTime()))
-        return "—";
-    return d.toLocaleString("nl-NL", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });
-}
-function statusVariant(status) {
-    if (status === "done")
-        return "default";
-    if (status === "failed" || status === "cancelled")
-        return "destructive";
-    if (status === "in_progress" || status === "claimed")
-        return "secondary";
-    return "outline";
-}
-const WAARSCHUWING_LABEL = {
-    pick_start_in_past: "Pickstart lag in het verleden",
-    pick_window_too_short: "Pickvenster te kort",
-    pickup_in_past: "Ophaalmoment verstreken",
-    buffer_close_in_past: "Buffer sloot al",
-    rule_version_not_found: "Regelversie niet gevonden",
-    no_rule_config: "Geen regelset gekoppeld",
-};
+import { OrderLogboek } from "./OrderLogboek";
+import { InklapbaarVenster } from "./InklapbaarVenster";
+import { LOGISTICS_MODULES } from "../lib/logisticsTasks";
 export function RegiePage() {
-    const { taken, planRuns, meldingen, loading, laden, verwijderOrder, herverwerkMelding, claimTaak, rondTaakAf, meldTaakMislukt, annuleerOrder, zetPrioriteit, } = useLogistiekTaken();
-    const [filter, setFilter] = useState("");
+    const { taken, loading, laden } = useLogistiekTaken();
     const safeTaken = Array.isArray(taken) ? taken : [];
-    const safeRuns = Array.isArray(planRuns) ? planRuns : [];
-    const safeMeldingen = Array.isArray(meldingen) ? meldingen : [];
-    const gefilterd = useMemo(() => {
-        const q = filter.trim().toLowerCase();
-        if (!q)
-            return safeTaken;
-        return safeTaken.filter((t) => t.order_ref.toLowerCase().includes(q) ||
-            t.task_type.toLowerCase().includes(q) ||
-            t.owner_module.toLowerCase().includes(q));
-    }, [safeTaken, filter]);
-    const perOrder = useMemo(() => {
-        const map = new Map();
-        for (const t of gefilterd) {
-            const list = map.get(t.order_ref) ?? [];
-            list.push(t);
-            map.set(t.order_ref, list);
-        }
-        return Array.from(map.entries());
-    }, [gefilterd]);
     const perModule = useMemo(() => {
         const counts = {};
         for (const t of safeTaken) {
@@ -77,12 +26,5 @@ export function RegiePage() {
         }
         return counts;
     }, [safeTaken]);
-    return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsxs("h1", { className: "flex items-center gap-2 text-2xl font-semibold tracking-tight", children: [_jsx(Workflow, { className: "h-6 w-6 text-primary" }), "Overzicht & meldingen"] }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Wat er vandaag klaarstaat en waar aandacht voor nodig is." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", asChild: true, children: _jsx(Link, { to: "/logistiek-engine", children: "Terug naar overzicht" }) }), _jsxs(Button, { variant: "outline", onClick: () => void laden(), disabled: loading, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), "Vernieuwen"] })] })] }), _jsx(ConsistentieCard, {}), _jsx(KarplanStatusCard, {}), _jsx(GeblokkeerdeOrdersCard, {}), _jsx(AfmetingenBronnenCard, {}), _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: Object.keys(LOGISTICS_MODULES).map((key) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsx(CardDescription, { children: LOGISTICS_MODULES[key] }), _jsx(CardTitle, { className: "text-2xl", children: perModule[key] ?? 0 })] }), _jsx(CardContent, { className: "text-muted-foreground text-xs", children: "openstaande en geplande taken" })] }, key))) }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Taken per order" }), _jsx(CardDescription, { children: "Elke order krijgt bij binnenkomst meteen de volledige keten aan taken toegewezen." }), _jsxs("div", { className: "pt-2", children: [_jsx(Label, { htmlFor: "regie-filter", className: "sr-only", children: "Zoeken" }), _jsx(Input, { id: "regie-filter", placeholder: "Zoek op ordernummer, taaktype of module\u2026", value: filter, onChange: (e) => setFilter(e.target.value), className: "max-w-sm" })] })] }), _jsx(CardContent, { className: "space-y-6", children: loading ? (_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" })] })) : perOrder.length === 0 ? (_jsxs("p", { className: "text-muted-foreground py-8 text-center text-sm", children: ["Nog geen taken. Zodra een module een melding wegschrijft in", " ", _jsx("code", { className: "bg-muted rounded px-1", children: "logistics_events" }), " maakt de database de keten meteen aan."] })) : (perOrder.map(([orderRef, orderTaken]) => {
-                            const spoed = orderTaken.some((t) => (t.priority ?? 0) > 0);
-                            const actief = orderTaken.some((t) => t.status !== "cancelled" && t.status !== "done" && t.status !== "superseded");
-                            return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("h2", { className: "flex items-center gap-2 font-medium", children: ["Order ", orderRef, _jsxs("span", { className: "text-muted-foreground text-xs font-normal", children: [orderTaken.length, " taken"] }), spoed && (_jsx(Badge, { variant: "destructive", className: "text-[10px]", children: "spoed" }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => void zetPrioriteit(orderRef, spoed ? 0 : 100), children: [_jsx(ArrowUpCircle, { className: "mr-1 h-4 w-4" }), spoed ? "Normaal" : "Spoed"] }), actief && (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => void annuleerOrder(orderRef), children: [_jsx(Ban, { className: "mr-1 h-4 w-4" }), "Annuleren"] })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => void verwijderOrder(orderRef), children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-12", children: "#" }), _jsx(TableHead, { children: "Taak" }), _jsx(TableHead, { children: "Module" }), _jsx(TableHead, { children: "Start" }), _jsx(TableHead, { children: "Gereed" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "text-right", children: "Actie" })] }) }), _jsx(TableBody, { children: orderTaken.map((t) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "text-muted-foreground", children: t.sequence + 1 }), _jsxs(TableCell, { className: "font-medium", children: [TASK_LABEL[t.task_type] ?? t.task_type, t.shadow && (_jsx(Badge, { variant: "outline", className: "ml-2 text-[10px]", children: "schaduw" }))] }), _jsx(TableCell, { className: "text-sm", children: LOGISTICS_MODULES[t.owner_module] ?? t.owner_module }), _jsxs(TableCell, { className: "text-sm", children: [tijd(t.planned_start), t.payload?.["pickWindowShifted"] === true && (_jsx(Badge, { variant: "outline", className: "ml-2 text-[10px]", title: "Het berekende moment lag in het verleden; deze taak is naar nu verschoven.", children: "te laat aangemeld" }))] }), _jsx(TableCell, { className: "text-sm", children: tijd(t.planned_end) }), _jsxs(TableCell, { children: [_jsx(Badge, { variant: statusVariant(t.status), children: TASK_STATUS_LABEL[t.status] ?? t.status }), t.claimed_by && (t.status === "claimed" || t.status === "in_progress") && (_jsxs("span", { className: "text-muted-foreground ml-2 text-xs", children: ["door ", t.claimed_by] })), t.error && _jsx("span", { className: "text-destructive ml-2 text-xs", children: t.error })] }), _jsxs(TableCell, { className: "space-x-1 text-right", children: [t.status === "planned" && (_jsx(Button, { variant: "outline", size: "sm", onClick: () => void claimTaak(t.id), children: "Claimen" })), (t.status === "claimed" || t.status === "in_progress") && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => void rondTaakAf(t.id), children: "Afronden" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => void meldTaakMislukt(t.id, "Handmatig gemeld vanuit regieoverzicht"), children: "Mislukt" })] }))] })] }, t.id))) })] })] }, orderRef));
-                        })) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Planrondes" }), _jsx(CardDescription, { children: "Elke keer dat de Engine (her)plande, met welke regelversie." })] }), _jsx(CardContent, { children: safeRuns.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nog geen planrondes." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Moment" }), _jsx(TableHead, { children: "Order" }), _jsx(TableHead, { children: "Aanleiding" }), _jsx(TableHead, { children: "Bron" }), _jsx(TableHead, { children: "Regelversie" }), _jsx(TableHead, { children: "Taken" }), _jsx(TableHead, { children: "Signalen" })] }) }), _jsx(TableBody, { children: safeRuns.map((r) => {
-                                        const warnings = Array.isArray(r.warnings) ? r.warnings : [];
-                                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "text-sm", children: tijd(r.created_at) }), _jsx(TableCell, { className: "font-medium", children: r.order_ref }), _jsx(TableCell, { className: "text-sm", children: r.trigger }), _jsx(TableCell, { className: "text-sm", children: r.source_module ?? "—" }), _jsxs(TableCell, { className: "text-sm", children: [r.rule_version ?? "—", r.settings_hash ? (_jsx("span", { className: "text-muted-foreground ml-1 font-mono text-xs", children: r.settings_hash.slice(0, 6) })) : null] }), _jsxs(TableCell, { className: "text-sm", children: [r.tasks_created, " nieuw / ", r.tasks_revised, " herzien"] }), _jsx(TableCell, { className: "text-sm", children: warnings.length === 0 ? (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) : (_jsx("div", { className: "flex flex-wrap gap-1", children: warnings.map((w, i) => (_jsx(Badge, { variant: "outline", children: WAARSCHUWING_LABEL[String(w.code)] ?? String(w.code) }, i))) })) })] }, r.id));
-                                    }) })] })) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Binnengekomen orders" }), _jsx(CardDescription, { children: "Elke binnengekomen order wordt automatisch omgezet naar de bijbehorende werkzaamheden." })] }), _jsx(CardContent, { children: safeMeldingen.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nog geen meldingen ontvangen." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Moment" }), _jsx(TableHead, { children: "Onderdeel" }), _jsx(TableHead, { children: "Soort" }), _jsx(TableHead, { children: "Order" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "w-24" })] }) }), _jsx(TableBody, { children: safeMeldingen.map((m) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "text-sm", children: tijd(m.created_at) }), _jsx(TableCell, { className: "text-sm", children: LOGISTICS_MODULES[m.source_module] ?? m.source_module }), _jsx(TableCell, { className: "text-sm", children: m.event_type }), _jsx(TableCell, { className: "font-medium", children: m.order_ref }), _jsxs(TableCell, { children: [_jsx(Badge, { variant: m.status === "failed" ? "destructive" : m.status === "processed" ? "default" : "outline", children: m.status === "processed" ? "Verwerkt" : m.status === "failed" ? "Mislukt" : "Wachtend" }), m.error && _jsx("p", { className: "text-destructive mt-1 text-xs", children: m.error })] }), _jsx(TableCell, { className: "text-right", children: m.status !== "processed" && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => void herverwerkMelding(m.id), children: [_jsx(RotateCcw, { className: "mr-1 h-4 w-4" }), "Opnieuw"] })) })] }, m.id))) })] })) })] }), _jsx(FloridayPushCard, {}), _jsx(PrintjobsCard, {}), _jsx(VoorraadMeldingenCard, {}), _jsx(VertragingMeldingenCard, {}), _jsx(CapaciteitMeldingenCard, {}), _jsx(BeladingIndelingCard, {})] }));
+    return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsxs("h1", { className: "flex items-center gap-2 text-2xl font-semibold tracking-tight", children: [_jsx(Workflow, { className: "h-6 w-6 text-primary" }), "Overzicht & meldingen"] }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Wat er vandaag klaarstaat en waar aandacht voor nodig is." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", asChild: true, children: _jsx(Link, { to: "/logistiek-engine", children: "Terug naar overzicht" }) }), _jsxs(Button, { variant: "outline", onClick: () => void laden(), disabled: loading, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), "Vernieuwen"] })] })] }), _jsx(InklapbaarVenster, { titel: "Binnengekomen orders", omschrijving: "Klik een order open voor elke stap, beslissing, foutmelding en elk document.", standaardOpen: true, children: _jsx(OrderLogboek, { titel: "Binnengekomen orders" }) }), _jsx(InklapbaarVenster, { titel: "Consistentie", omschrijving: "Controle of alle modules hetzelfde tonen.", children: _jsx(ConsistentieCard, {}) }), _jsx(InklapbaarVenster, { titel: "Karplanstatus", omschrijving: "Stand van de karrenindeling.", children: _jsx(KarplanStatusCard, {}) }), _jsx(InklapbaarVenster, { titel: "Taken per module", omschrijving: "Openstaande en geplande taken.", children: _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: Object.keys(LOGISTICS_MODULES).map((key) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsx(CardDescription, { children: LOGISTICS_MODULES[key] }), _jsx(CardTitle, { className: "text-2xl", children: perModule[key] ?? 0 })] }), _jsx(CardContent, { className: "text-muted-foreground text-xs", children: "openstaande en geplande taken" })] }, key))) }) })] }));
 }

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

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

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

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

package/dist-lib/components/WerktijdenCard.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ============================================================================
+// src/components/WerktijdenCard.tsx — openingstijden voor het terugrekenen
+// ============================================================================
+// De Engine rekent de benodigde picktijd terug in werkuren. Deze kaart toont en
+// beheert de vensters per weekdag, afwijkende dagen en de tijdzone. Ontbreken
+// die gegevens, dan rekent de Engine niets uit — er wordt niets geraden.
+// GEEN <Header /> hier — die levert de shell.
+// ============================================================================
+import { useState } from "react";
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Skeleton, } from "@flowselections/core";
+import { Clock, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { useWerktijden } from "../hooks/useWerktijden";
+const DAGEN = ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"];
+export function WerktijdenCard() {
+    const { status, loading, error, refresh, zetTijdzone, voegVensterToe, verwijderVenster, voegUitzonderingToe, verwijderUitzondering, } = useWerktijden();
+    const [tz, setTz] = useState("");
+    const [dag, setDag] = useState("1");
+    const [van, setVan] = useState("07:00");
+    const [tot, setTot] = useState("17:00");
+    const [datum, setDatum] = useState("");
+    const [melding, setMelding] = useState(null);
+    const vensters = status?.windows ?? [];
+    const uitzonderingen = status?.exceptions ?? [];
+    const doe = async (fn, ok) => {
+        try {
+            await fn();
+            setMelding(ok);
+        }
+        catch (e) {
+            setMelding(e?.message ? String(e.message) : "Opslaan is niet gelukt.");
+        }
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "h-4 w-4" }), "Werktijden voor het picken"] }), _jsx(CardDescription, { children: "De starttijd van een pickopdracht wordt teruggerekend in werkuren, niet in klokuren. Alleen tijd binnen deze vensters telt mee." })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void refresh(), disabled: loading, children: [_jsx(RefreshCw, { className: "h-4 w-4" }), "Verversen"] })] }), _jsx(CardContent, { className: "space-y-4", children: loading ? (_jsx(Skeleton, { className: "h-24 w-full" })) : error ? (_jsx("p", { className: "text-sm text-destructive", children: error })) : (_jsxs(_Fragment, { children: [!status?.usable ? (_jsx("p", { className: "text-sm text-destructive", children: "Er zijn nog geen werktijden ingesteld. Zolang die ontbreken, bepaalt de Engine geen starttijd voor het picken en komt er niets vrij op het pickscherm." })) : null, _jsx("div", { className: "flex flex-wrap items-end gap-2", children: _jsxs("div", { children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Tijdzone van de vestiging" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: tz || status?.timezone || "", placeholder: "bijv. Europe/Amsterdam", onChange: (e) => setTz(e.target.value), className: "w-56" }), _jsx(Button, { size: "sm", onClick: () => void doe(() => zetTijdzone((tz || status?.timezone || "").trim()), "Tijdzone opgeslagen."), children: "Opslaan" })] })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", children: "Openingstijden per dag" }), vensters.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen openingstijden ingesteld." })) : (_jsx("ul", { className: "space-y-1", children: vensters.map((v) => (_jsxs("li", { className: "flex items-center gap-2 text-sm", children: [_jsx(Badge, { variant: "outline", children: DAGEN[v.weekday] ?? v.weekday }), _jsxs("span", { children: [String(v.opens).slice(0, 5), " \u2013 ", String(v.closes).slice(0, 5)] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => void doe(() => verwijderVenster(v.id), "Venster verwijderd."), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, v.id))) })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("select", { value: dag, onChange: (e) => setDag(e.target.value), className: "h-9 rounded-md border bg-background px-2 text-sm", children: DAGEN.map((d, i) => (_jsx("option", { value: String(i), children: d }, d))) }), _jsx(Input, { type: "time", value: van, onChange: (e) => setVan(e.target.value), className: "w-32" }), _jsx(Input, { type: "time", value: tot, onChange: (e) => setTot(e.target.value), className: "w-32" }), _jsxs(Button, { size: "sm", onClick: () => void doe(() => voegVensterToe(Number(dag), van, tot), "Openingstijd toegevoegd."), children: [_jsx(Plus, { className: "h-4 w-4" }), "Toevoegen"] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Meerdere vensters op \u00E9\u00E9n dag mag; zo blijft bijvoorbeeld een pauze buiten de picktijd. Een dag zonder venster is een niet-werkdag." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", children: "Afwijkende dagen" }), uitzonderingen.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen afwijkende dagen ingesteld." })) : (_jsx("ul", { className: "space-y-1", children: uitzonderingen.map((u) => (_jsxs("li", { className: "flex items-center gap-2 text-sm", children: [_jsx(Badge, { variant: "outline", children: u.day }), _jsx("span", { children: u.closed
+                                                    ? "gesloten"
+                                                    : `${String(u.opens ?? "").slice(0, 5)} – ${String(u.closes ?? "").slice(0, 5)}` }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => void doe(() => verwijderUitzondering(u.id), "Afwijkende dag verwijderd."), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, u.id))) })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Input, { type: "date", value: datum, onChange: (e) => setDatum(e.target.value), className: "w-44" }), _jsx(Button, { variant: "outline", size: "sm", disabled: !datum, onClick: () => void doe(() => voegUitzonderingToe(datum, true, null, null, null), "Dag als gesloten gezet."), children: "Gesloten" }), _jsxs(Button, { size: "sm", disabled: !datum, onClick: () => void doe(() => voegUitzonderingToe(datum, false, van, tot, null), "Afwijkende openingstijd toegevoegd."), children: ["Afwijkend ", van, "\u2013", tot] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Een afwijkende dag gaat altijd boven de vaste weekinstelling." })] }), melding ? _jsx("p", { className: "text-sm", children: melding }) : null] })) })] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"WerkwijzeHerindelingCard.d.ts","sourceRoot":"","sources":["../../src/components/WerkwijzeHerindelingCard.tsx"],"names":[],"mappings":"AA4BA,wBAAgB,wBAAwB,gCAoGvC"}
+{"version":3,"file":"WerkwijzeHerindelingCard.d.ts","sourceRoot":"","sources":["../../src/components/WerkwijzeHerindelingCard.tsx"],"names":[],"mappings":"AAoCA,wBAAgB,wBAAwB,gCA+RvC"}

package/dist-lib/components/WerkwijzeHerindelingCard.js

@@ -7,30 +7,124 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Engine-functies; hier wordt niets zelf berekend.
 // GEEN <Header /> hier — die levert de shell.
 // ============================================================================
-import { useState } from "react";
-import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Skeleton, } from "@flowselections/core";
-import { RefreshCw, RotateCcw, Ruler, Boxes } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Skeleton, } from "@flowselections/core";
+import { RefreshCw, RotateCcw, Ruler, Boxes, AlertTriangle } from "lucide-react";
 import { useWerkwijzeStatus } from "../hooks/useWerkwijzeStatus";
 const METHODE_LABEL = {
     belading: "Indelen op basis van belading",
     afmetingen: "Indelen op basis van afmetingen",
 };
 export function WerkwijzeHerindelingCard() {
-    const { status, loading, busy, error, refresh, herindelen } = useWerkwijzeStatus();
+    const { status, loading, busy, error, refresh, refreshQuiet, herindelen, alsnogAllesHerindelen, pakbonnenGereedmaken, } = useWerkwijzeStatus();
     const [melding, setMelding] = useState(null);
+    const [totaal, setTotaal] = useState(0);
+    const [bevestigOpen, setBevestigOpen] = useState(false);
+    const [pakbonnen, setPakbonnen] = useState(null);
+    const [pakbonBezig, setPakbonBezig] = useState(false);
+    const quietRef = useRef(refreshQuiet);
+    quietRef.current = refreshQuiet;
+    const pakbonRef = useRef(pakbonnenGereedmaken);
+    pakbonRef.current = pakbonnenGereedmaken;
+    const draaitRef = useRef(false);
     const wachtrij = status?.wachtrij ?? {};
     const pending = Number(wachtrij["pending"] ?? 0);
+    const running = Number(wachtrij["running"] ?? 0);
     const blocked = Number(wachtrij["geblokkeerd"] ?? 0);
+    const openWerk = pending + running;
+    const bezigMetIndelen = totaal > 0 && openWerk > 0;
+    const gereed = totaal > 0 ? Math.max(0, Math.min(totaal, totaal - openWerk)) : 0;
+    const percentage = totaal > 0 ? Math.round((gereed / totaal) * 100) : 0;
+    const pakbonPercentage = pakbonnen && pakbonnen.totaal > 0
+        ? Math.round((pakbonnen.gereed / pakbonnen.totaal) * 100)
+        : 0;
+    // Pakbongegevens klaarzetten; herhaald aanroepen is veilig en idempotent.
+    const pakbonRonde = useCallback(async () => {
+        if (draaitRef.current)
+            return;
+        draaitRef.current = true;
+        setPakbonBezig(true);
+        try {
+            setPakbonnen(await pakbonRef.current());
+        }
+        catch {
+            // Een mislukte ronde blokkeert de herindeling niet; volgende ronde probeert opnieuw.
+        }
+        finally {
+            draaitRef.current = false;
+            setPakbonBezig(false);
+        }
+    }, []);
+    // Zolang er nog orders in de wachtrij staan, de stand stil bijwerken en
+    // ondertussen de pakbonnen van die orders alvast printklaar maken.
+    useEffect(() => {
+        const nogPakbonnenOpen = (pakbonnen?.open ?? 0) > 0;
+        if (!bezigMetIndelen && !nogPakbonnenOpen)
+            return;
+        const t = setInterval(() => {
+            void quietRef.current();
+            void pakbonRonde();
+        }, 3000);
+        return () => clearInterval(t);
+    }, [bezigMetIndelen, pakbonnen?.open, pakbonRonde]);
+    // De balk verdwijnt vanzelf zodra alles klaar is, zodat hij nooit blijft staan.
+    useEffect(() => {
+        if (totaal === 0)
+            return;
+        const nogPakbonnenOpen = (pakbonnen?.open ?? 0) > 0;
+        if (bezigMetIndelen || nogPakbonnenOpen)
+            return;
+        const t = setTimeout(() => {
+            setTotaal(0);
+            setPakbonnen(null);
+            setMelding(null);
+        }, 6000);
+        return () => clearTimeout(t);
+    }, [totaal, bezigMetIndelen, pakbonnen?.open]);
+    // Harde bovengrens: duurt het te lang, dan stopt de balk met een leesbare melding.
+    useEffect(() => {
+        if (totaal === 0)
+            return;
+        const t = setTimeout(() => {
+            setTotaal(0);
+            setPakbonnen(null);
+            setMelding("Het opnieuw indelen duurt langer dan verwacht. De achtergrondverwerking loopt door; klik op Verversen voor de actuele stand.");
+        }, 5 * 60 * 1000);
+        return () => clearTimeout(t);
+    }, [totaal]);
     const opnieuw = async () => {
         try {
             const n = await herindelen();
+            setTotaal(n);
             setMelding(n === 0
                 ? "Er stonden geen orders open om opnieuw in te delen."
-                : `${n} order(s) opnieuw aangemeld. De indeling wordt op de achtergrond bijgewerkt.`);
+                : `${n} order(s) opnieuw aangemeld. De indeling en de pakbonnen worden op de achtergrond klaargezet.`);
+            void pakbonRonde();
         }
         catch (e) {
+            setTotaal(0);
             setMelding(e?.message ? String(e.message) : "Opnieuw indelen is niet gelukt.");
         }
     };
-    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [status?.methode === "afmetingen" ? (_jsx(Ruler, { className: "h-4 w-4" })) : (_jsx(Boxes, { className: "h-4 w-4" })), "Werkwijze en herindeling"] }), _jsx(CardDescription, { children: "Zo worden karren op dit moment samengesteld. Verandert de methode, dan worden alle openstaande orders automatisch opnieuw ingedeeld." })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => void refresh(), disabled: loading, children: [_jsx(RefreshCw, { className: "h-4 w-4" }), "Verversen"] }), _jsxs(Button, { size: "sm", onClick: () => void opnieuw(), disabled: busy, children: [_jsx(RotateCcw, { className: "h-4 w-4" }), "Alles opnieuw indelen"] })] })] }), _jsx(CardContent, { className: "space-y-3", children: loading ? (_jsx(Skeleton, { className: "h-16 w-full" })) : error ? (_jsx("p", { className: "text-sm text-destructive", children: error })) : status ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { children: METHODE_LABEL[status.methode] ?? status.methode }), status.actieveWerkwijze ? (_jsxs("span", { className: "text-sm text-muted-foreground", children: ["volgens werkwijze \u201C", status.actieveWerkwijze, "\u201D"] })) : (_jsx("span", { className: "text-sm text-muted-foreground", children: "Er staat geen werkwijze aan; er wordt op belading ingedeeld." }))] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [_jsxs("div", { className: "rounded-md border p-3", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Karren volgens deze methode" }), _jsx("p", { className: "text-lg font-semibold", children: status.karrenVolgensMethode })] }), _jsxs("div", { className: "rounded-md border p-3", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Karren van een oudere methode" }), _jsx("p", { className: "text-lg font-semibold", children: status.karrenOudeMethode })] }), _jsxs("div", { className: "rounded-md border p-3", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Wacht op indelen" }), _jsx("p", { className: "text-lg font-semibold", children: pending }), blocked > 0 ? (_jsxs("p", { className: "text-xs text-destructive", children: [blocked, " geblokkeerd"] })) : null] })] }), status.karrenOudeMethode > 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Deze karren zijn nog met een eerdere methode berekend. Ze worden vervangen zodra de order opnieuw is ingedeeld; al geprinte of gecontroleerde karren blijven staan." })) : null, melding ? _jsx("p", { className: "text-sm", children: melding }) : null] })) : null })] }));
+    // Noodknop: alles opnieuw indelen, ook orders die al gepickt of geprint zijn.
+    const allesOpnieuwInclusiefGepickt = async () => {
+        setBevestigOpen(false);
+        try {
+            const r = await alsnogAllesHerindelen();
+            setTotaal(r.aangemeld);
+            setMelding(r.aangemeld === 0
+                ? "Er stonden geen orders open om opnieuw in te delen."
+                : `${r.aangemeld} order(s) lopen de flow opnieuw af, vanaf "Order komt binnen". ${r.karrenVerwijderd} kar(ren) en ${r.pakbonnenVervallen} oude pakbon(nen) zijn vervallen; overal worden nieuwe pakbonnen met nieuwe barcodes klaargezet.`);
+            void pakbonRonde();
+        }
+        catch (e) {
+            setTotaal(0);
+            setMelding(e?.message ? String(e.message) : "Volledig opnieuw indelen is niet gelukt.");
+        }
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [status?.methode === "afmetingen" ? (_jsx(Ruler, { className: "h-4 w-4" })) : (_jsx(Boxes, { className: "h-4 w-4" })), "Werkwijze en herindeling"] }), _jsx(CardDescription, { children: "Zo worden karren op dit moment samengesteld. Verandert de methode, dan worden alle openstaande orders automatisch opnieuw ingedeeld." })] }), _jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => void refresh(), disabled: loading, children: [_jsx(RefreshCw, { className: "h-4 w-4" }), "Verversen"] }), _jsxs(Button, { size: "sm", onClick: () => void opnieuw(), disabled: busy, children: [_jsx(RotateCcw, { className: "h-4 w-4" }), "Alles opnieuw indelen"] }), _jsxs(Button, { size: "sm", variant: "destructive", onClick: () => setBevestigOpen(true), disabled: busy, children: [_jsx(AlertTriangle, { className: "h-4 w-4" }), "Alle orders opnieuw indelen, ook gepickte orders"] })] })] }), _jsx(CardContent, { className: "space-y-3", children: loading ? (_jsx(Skeleton, { className: "h-16 w-full" })) : error ? (_jsx("p", { className: "text-sm text-destructive", children: error })) : status ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { children: METHODE_LABEL[status.methode] ?? status.methode }), status.actieveWerkwijze ? (_jsxs("span", { className: "text-sm text-muted-foreground", children: ["volgens werkwijze \u201C", status.actieveWerkwijze, "\u201D"] })) : (_jsx("span", { className: "text-sm text-muted-foreground", children: "Er staat geen werkwijze aan; er wordt op belading ingedeeld." }))] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [_jsxs("div", { className: "rounded-md border p-3", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Karren volgens deze methode" }), _jsx("p", { className: "text-lg font-semibold", children: status.karrenVolgensMethode })] }), _jsxs("div", { className: "rounded-md border p-3", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Karren van een oudere methode" }), _jsx("p", { className: "text-lg font-semibold", children: status.karrenOudeMethode })] }), _jsxs("div", { className: "rounded-md border p-3", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Wacht op indelen" }), _jsx("p", { className: "text-lg font-semibold", children: openWerk }), running > 0 ? (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["waarvan ", running, " nu bezig"] })) : null, blocked > 0 ? (_jsxs("p", { className: "text-xs text-destructive", children: [blocked, " geblokkeerd"] })) : null] })] }), status.karrenOudeMethode > 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Deze karren zijn nog met een eerdere methode berekend. Ze worden vervangen zodra de order opnieuw is ingedeeld; al geprinte of gecontroleerde karren blijven staan." })) : null, melding ? _jsx("p", { className: "text-sm", children: melding }) : null, totaal > 0 ? (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percentage, "aria-label": "Voortgang opnieuw indelen", children: _jsx("div", { className: "h-full rounded-full bg-primary transition-all duration-500", style: { width: `${percentage}%` } }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: bezigMetIndelen
+                                        ? `${gereed} van ${totaal} order(s) ingedeeld — ${percentage}%`
+                                        : `Klaar: ${totaal} order(s) opnieuw ingedeeld.` })] })) : null, pakbonnen && pakbonnen.totaal > 0 ? (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pakbonPercentage, "aria-label": "Voortgang pakbonnen klaarzetten", children: _jsx("div", { className: "h-full rounded-full bg-primary/70 transition-all duration-500", style: { width: `${pakbonPercentage}%` } }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: pakbonnen.open > 0 || pakbonBezig
+                                        ? `Pakbonnen klaarzetten: ${pakbonnen.gereed} van ${pakbonnen.totaal} printklaar — ${pakbonPercentage}%`
+                                        : `Alle ${pakbonnen.totaal} pakbon(nen) staan printklaar.` })] })) : null] })) : null }), _jsx(AlertDialog, { open: bevestigOpen, onOpenChange: setBevestigOpen, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Weet je het zeker?" }), _jsx(AlertDialogDescription, { children: "Alle openstaande orders worden opnieuw ingedeeld, ook orders die al gepickt of geprint zijn. Alle oude pakbonnen en barcodes vervallen en er worden overal nieuwe aangemaakt. Reeds geprinte pakbonnen kunnen daarna niet meer worden gescand. Dit kan niet ongedaan worden gemaakt." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: () => void allesOpnieuwInclusiefGepickt(), children: "Ja, alles opnieuw indelen" })] })] }) })] }));
 }