@flowselections/floriday-afhandeling-module 1.0.10 → 1.0.12

package/dist-lib/components/afhandeling/ControleLijstPrint.d.ts

@@ -0,0 +1,7 @@
+import type { ControlCart } from "../../lib/cartControl.functions";
+/** Printbare controlelijst — één regel per kar met checkbox en opmerkingveld. */
+export declare function ControleLijstPrint({ carts, onClose, }: {
+    carts: ControlCart[];
+    onClose: () => void;
+}): import("react").ReactPortal | null;
+//# sourceMappingURL=ControleLijstPrint.d.ts.map

package/dist-lib/components/afhandeling/ControleLijstPrint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControleLijstPrint.d.ts","sourceRoot":"","sources":["../../../src/components/afhandeling/ControleLijstPrint.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAanE,iFAAiF;AACjF,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,sCAkIA"}

package/dist-lib/components/afhandeling/ControleLijstPrint.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Button } from "@flowselections/core";
+import { X, Printer } from "lucide-react";
+function fmt(iso) {
+    if (!iso)
+        return "—";
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    return d.toLocaleDateString("nl-NL", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+    });
+}
+/** Printbare controlelijst — één regel per kar met checkbox en opmerkingveld. */
+export function ControleLijstPrint({ carts, onClose, }) {
+    useEffect(() => {
+        const t = setTimeout(() => window.print(), 300);
+        const handleAfterPrint = () => onClose();
+        window.addEventListener("afterprint", handleAfterPrint);
+        return () => {
+            clearTimeout(t);
+            window.removeEventListener("afterprint", handleAfterPrint);
+        };
+    }, [onClose]);
+    const today = new Date().toLocaleDateString("nl-NL", {
+        weekday: "long",
+        day: "2-digit",
+        month: "long",
+        year: "numeric",
+    });
+    const content = (_jsxs("div", { id: "controle-print-root", className: "fixed inset-0 z-[100] bg-white overflow-auto", children: [_jsxs("div", { className: "print:hidden sticky top-0 flex items-center justify-between p-3 border-b bg-white", children: [_jsx("div", { className: "font-semibold", children: "Controlelijst \u2014 printweergave" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: () => window.print(), children: [_jsx(Printer, { className: "h-4 w-4 mr-2" }), "Opnieuw printen"] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: onClose, children: [_jsx(X, { className: "h-4 w-4 mr-2" }), "Sluiten"] })] })] }), _jsxs("div", { className: "print-sheet p-8 print:p-0 max-w-[210mm] mx-auto text-black", children: [_jsxs("div", { className: "flex items-baseline justify-between border-b border-black pb-2 mb-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Controlelijst karren" }), _jsx("div", { className: "text-sm", children: today })] }), _jsxs("div", { className: "text-sm mb-3", children: ["Totaal karren: ", _jsx("strong", { children: carts.length })] }), _jsxs("table", { className: "w-full text-[11px] border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-black", children: [_jsx("th", { className: "text-left py-1 pr-2", children: "Karnr" }), _jsx("th", { className: "text-left py-1 pr-2", children: "Klant" }), _jsx("th", { className: "text-left py-1 pr-2", children: "Vervoerder" }), _jsx("th", { className: "text-left py-1 pr-2", children: "Lever" }), _jsx("th", { className: "text-left py-1 pr-2", children: "Ophaal" }), _jsx("th", { className: "text-left py-1 pr-2", children: "Print" }), _jsx("th", { className: "text-center py-1 px-2", children: "Klaar" }), _jsx("th", { className: "text-left py-1 pr-2", children: "Opmerkingen" })] }) }), _jsxs("tbody", { children: [carts.map((c) => (_jsxs("tr", { className: "border-b border-gray-300", children: [_jsx("td", { className: "py-2 pr-2 font-mono font-bold whitespace-nowrap", children: c.cartNumber ?? "—" }), _jsx("td", { className: "py-2 pr-2", children: c.customerName }), _jsx("td", { className: "py-2 pr-2", children: c.carrierName ?? "—" }), _jsx("td", { className: "py-2 pr-2 whitespace-nowrap", children: fmt(c.deliveryDate) }), _jsx("td", { className: "py-2 pr-2 whitespace-nowrap", children: fmt(c.pickupDate) }), _jsx("td", { className: "py-2 pr-2 text-center", children: c.printedCount > 0 ? "✓" : "" }), _jsx("td", { className: "py-2 px-2 text-center", children: _jsx("span", { className: "inline-block w-4 h-4 border border-black" }) }), _jsx("td", { className: "py-2 pr-2 w-[30%]", children: _jsx("span", { className: "inline-block w-full border-b border-gray-400 h-4" }) })] }, `${c.orderSource}#${c.orderId}#${c.cartIndex}`))), carts.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: 8, className: "py-6 text-center text-gray-500", children: "Geen karren om vandaag te controleren." }) }))] })] }), _jsxs("div", { className: "mt-6 text-[11px]", children: [_jsxs("div", { children: ["Gecontroleerd door: ", _jsx("span", { className: "inline-block border-b border-black w-64" })] }), _jsxs("div", { className: "mt-2", children: ["Datum / tijd: ", _jsx("span", { className: "inline-block border-b border-black w-64" })] }), _jsxs("div", { className: "mt-2", children: ["Handtekening: ", _jsx("span", { className: "inline-block border-b border-black w-64" })] })] })] }), _jsx("style", { children: `
+        @media print {
+          @page { size: A4 portrait; margin: 12mm; }
+          html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
+          /* Hide the entire app; show only the print root */
+          body > *:not(#controle-print-portal) { display: none !important; }
+          #controle-print-portal, #controle-print-root {
+            position: static !important;
+            overflow: visible !important;
+            height: auto !important;
+            width: auto !important;
+            background: #fff !important;
+          }
+          .print-sheet {
+            max-width: none !important;
+            padding: 0 !important;
+            margin: 0 !important;
+          }
+          table { page-break-inside: auto; }
+          tr { page-break-inside: avoid; page-break-after: auto; }
+          thead { display: table-header-group; }
+        }
+      ` })] }));
+    if (typeof document === "undefined")
+        return null;
+    let portalNode = document.getElementById("controle-print-portal");
+    if (!portalNode) {
+        portalNode = document.createElement("div");
+        portalNode.id = "controle-print-portal";
+        document.body.appendChild(portalNode);
+    }
+    return createPortal(content, portalNode);
+}

package/dist-lib/components/afhandeling/ControlePage.d.ts

@@ -0,0 +1,4 @@
+export declare function ControlePage({ onExit }?: {
+    onExit?: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ControlePage.d.ts.map

package/dist-lib/components/afhandeling/ControlePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlePage.d.ts","sourceRoot":"","sources":["../../../src/components/afhandeling/ControlePage.tsx"],"names":[],"mappings":"AA4GA,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CAAO,+BA+tBpE"}

package/dist-lib/components/afhandeling/ControlePage.js

@@ -0,0 +1,460 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { supabase } from "../../integrations/supabase/client";
+import { Button, Card, Checkbox, Dialog, DialogDescription, DialogTitle, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea, Badge, toast, } from "@flowselections/core";
+import { Printer, CheckCircle2, AlertTriangle, History } from "lucide-react";
+import { ResponsiveDialogBody, ResponsiveDialogContent, ResponsiveDialogFooter, ResponsiveDialogHeader, } from "../../components/ui/responsive-dialog";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { getTodaysControlCarts, getControlRescheduleProposals, submitControlSession, listControlHistory, getControlSessionDetail, getControlDraft, saveControlDraft, } from "../../lib/cartControl.functions";
+import { ControleLijstPrint } from "./ControleLijstPrint";
+function fmtDate(iso) {
+    if (!iso)
+        return "—";
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    return d.toLocaleDateString("nl-NL", {
+        weekday: "short",
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+    });
+}
+function isTomorrowIso(iso) {
+    if (!iso)
+        return false;
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return false;
+    const tomorrow = new Date();
+    tomorrow.setHours(0, 0, 0, 0);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime() === tomorrow.getTime();
+}
+function blockedKey(b) {
+    return `${b.orderSource}#${b.orderId}#${b.cartIndex}`;
+}
+function controlCartKey(c) {
+    return `${c.orderSource}#${c.orderId}#${c.cartIndex}`;
+}
+function stableStringifyDraft(input) {
+    const checkedKeys = [...input.checkedKeys].sort();
+    const cartStates = Object.fromEntries(Object.entries(input.cartStates).sort(([a], [b]) => a.localeCompare(b)));
+    return JSON.stringify({ notes: input.notes, checkedKeys, cartStates });
+}
+const controlDraftQueryKey = ["control", "draft"];
+function buildDraftDto(input, formState, updatedAt) {
+    return {
+        notes: input.notes,
+        checkedKeys: [...input.checkedKeys].sort(),
+        cartStates: input.cartStates,
+        formState,
+        updatedAt,
+    };
+}
+export function ControlePage({ onExit } = {}) {
+    const qc = useQueryClient();
+    const [tab, setTab] = useState("controle");
+    const [notes, setNotes] = useState("");
+    const [checked, setChecked] = useState(new Set());
+    const [cartStates, setCartStates] = useState({});
+    const [showPrint, setShowPrint] = useState(false);
+    const [result, setResult] = useState(null);
+    const [pendingProposal, setPendingProposal] = useState(null);
+    const [confirmApproval, setConfirmApproval] = useState(null);
+    const fetchToday = useServerFn(getTodaysControlCarts);
+    const fetchHistory = useServerFn(listControlHistory);
+    const fetchProposals = useServerFn(getControlRescheduleProposals);
+    const submit = useServerFn(submitControlSession);
+    const fetchDraft = useServerFn(getControlDraft);
+    const saveDraft = useServerFn(saveControlDraft);
+    const cartsQ = useQuery({
+        queryKey: ["control", "today"],
+        queryFn: () => fetchToday(),
+    });
+    const histQ = useQuery({
+        queryKey: ["control", "history"],
+        queryFn: () => fetchHistory(),
+        enabled: tab === "historie",
+    });
+    const draftQ = useQuery({
+        queryKey: controlDraftQueryKey,
+        queryFn: async () => (await fetchDraft()),
+        staleTime: 0,
+        refetchOnMount: "always",
+        refetchOnWindowFocus: true,
+    });
+    const carts = cartsQ.data?.carts ?? [];
+    const currentDraftPayload = useMemo(() => {
+        const nextStates = { ...cartStates };
+        for (const cart of carts) {
+            const key = controlCartKey(cart);
+            const status = checked.has(key) ? "ready" : "pending";
+            const previous = nextStates[key];
+            nextStates[key] = previous ? { ...previous, status } : { status };
+        }
+        return {
+            notes,
+            checkedKeys: [...checked].sort(),
+            cartStates: nextStates,
+        };
+    }, [cartStates, checked, carts, notes]);
+    const latestDraftPayloadRef = useRef(currentDraftPayload);
+    useEffect(() => {
+        latestDraftPayloadRef.current = currentDraftPayload;
+    }, [currentDraftPayload]);
+    const draftFormStateRef = useRef({});
+    useEffect(() => {
+        if (draftQ.data?.formState)
+            draftFormStateRef.current = draftQ.data.formState;
+    }, [draftQ.data?.formState]);
+    const saveDraftRef = useRef(saveDraft);
+    useEffect(() => {
+        saveDraftRef.current = saveDraft;
+    }, [saveDraft]);
+    // Hydrate notes, checked cart keys and per-cart states from the server draft once loaded.
+    const draftLoadedRef = useRef(false);
+    const [draftHydrated, setDraftHydrated] = useState(false);
+    const lastSavedSnapshotRef = useRef(null);
+    const lastSavedRef = useRef(null);
+    useEffect(() => {
+        if (draftLoadedRef.current)
+            return;
+        if (draftQ.isLoading)
+            return;
+        if (draftQ.isFetching)
+            return;
+        if (draftQ.isError)
+            return;
+        const draft = draftQ.data ?? {
+            notes: "",
+            checkedKeys: [],
+            cartStates: {},
+            formState: {},
+            updatedAt: null,
+        };
+        const restoredStates = draft.cartStates ?? {};
+        const restoredKeys = draft.checkedKeys?.length
+            ? draft.checkedKeys
+            : Object.entries(restoredStates)
+                .filter(([, state]) => state.status === "ready")
+                .map(([key]) => key);
+        setNotes(draft.notes ?? "");
+        setChecked(new Set(restoredKeys));
+        setCartStates(restoredStates);
+        draftFormStateRef.current = draft.formState ?? {};
+        const hydratedPayload = {
+            notes: draft.notes ?? "",
+            checkedKeys: [...restoredKeys].sort(),
+            cartStates: restoredStates,
+        };
+        latestDraftPayloadRef.current = hydratedPayload;
+        lastSavedSnapshotRef.current = stableStringifyDraft(hydratedPayload);
+        lastSavedRef.current = draft.notes ?? "";
+        draftLoadedRef.current = true;
+        setDraftHydrated(true);
+    }, [draftQ.data, draftQ.isError, draftQ.isFetching, draftQ.isLoading]);
+    // Debounced autosave of the complete draft state.
+    const [savingState, setSavingState] = useState("idle");
+    const autosaveTimer = useRef(null);
+    const controlFinalizedRef = useRef(false);
+    useEffect(() => {
+        if (controlFinalizedRef.current)
+            return;
+        if (!draftHydrated)
+            return;
+        const snapshot = stableStringifyDraft(currentDraftPayload);
+        if (lastSavedSnapshotRef.current === snapshot)
+            return;
+        if (autosaveTimer.current)
+            clearTimeout(autosaveTimer.current);
+        autosaveTimer.current = setTimeout(async () => {
+            try {
+                if (controlFinalizedRef.current)
+                    return;
+                setSavingState("saving");
+                const r = await saveDraft({ data: currentDraftPayload });
+                lastSavedSnapshotRef.current = snapshot;
+                lastSavedRef.current = currentDraftPayload.notes;
+                qc.setQueryData(controlDraftQueryKey, buildDraftDto(currentDraftPayload, draftFormStateRef.current, r.updatedAt));
+                setSavingState("saved");
+                setTimeout(() => setSavingState((s) => (s === "saved" ? "idle" : s)), 2000);
+            }
+            catch {
+                setSavingState("idle");
+            }
+        }, 300);
+        return () => {
+            if (autosaveTimer.current)
+                clearTimeout(autosaveTimer.current);
+        };
+    }, [currentDraftPayload, draftHydrated, qc, saveDraft]);
+    // Flush pending progress when navigating away, refreshing or hiding the tab.
+    useEffect(() => {
+        const flush = () => {
+            if (controlFinalizedRef.current)
+                return;
+            if (!draftLoadedRef.current)
+                return;
+            const payload = latestDraftPayloadRef.current;
+            const snapshot = stableStringifyDraft(payload);
+            if (lastSavedSnapshotRef.current === snapshot)
+                return;
+            qc.setQueryData(controlDraftQueryKey, buildDraftDto(payload, draftFormStateRef.current, new Date().toISOString()));
+            lastSavedSnapshotRef.current = snapshot;
+            lastSavedRef.current = payload.notes;
+            void saveDraftRef.current({ data: payload });
+        };
+        const onVisibilityChange = () => {
+            if (document.visibilityState === "hidden")
+                flush();
+        };
+        window.addEventListener("pagehide", flush);
+        document.addEventListener("visibilitychange", onVisibilityChange);
+        return () => {
+            flush();
+            window.removeEventListener("pagehide", flush);
+            document.removeEventListener("visibilitychange", onVisibilityChange);
+        };
+    }, [qc]);
+    const toggle = (k, on) => {
+        setChecked((prev) => {
+            const next = new Set(prev);
+            if (on)
+                next.add(k);
+            else
+                next.delete(k);
+            return next;
+        });
+        setCartStates((prev) => ({
+            ...prev,
+            [k]: {
+                ...(prev[k] ?? {}),
+                status: on ? "ready" : "pending",
+                updatedAt: new Date().toISOString(),
+            },
+        }));
+    };
+    const toggleAll = (on) => {
+        const keys = carts.map(controlCartKey);
+        setChecked(on ? new Set(keys) : new Set());
+        const nowIso = new Date().toISOString();
+        setCartStates((prev) => {
+            const next = { ...prev };
+            for (const key of keys) {
+                next[key] = {
+                    ...(next[key] ?? {}),
+                    status: on ? "ready" : "pending",
+                    updatedAt: nowIso,
+                };
+            }
+            return next;
+        });
+    };
+    const submitM = useMutation({
+        mutationFn: (input) => {
+            const visibleKeys = new Set(carts.map(controlCartKey));
+            const checkedCartKeys = [...checked].filter((k) => visibleKeys.has(k));
+            return submit({
+                data: {
+                    checkedCartKeys,
+                    confirmedRescheduleCartKeys: input?.confirmedRescheduleCartKeys ?? [],
+                    notes,
+                },
+            });
+        },
+        onMutate: () => {
+            controlFinalizedRef.current = true;
+            if (autosaveTimer.current)
+                clearTimeout(autosaveTimer.current);
+        },
+        onSuccess: (r) => {
+            setResult(r);
+            toast.success(`Controle opgeslagen — ${r.checkedCount} klaar, ${r.rescheduledCount} doorgeschoven, ${r.blockedCount} geblokkeerd.`);
+            qc.invalidateQueries({ queryKey: ["control"] });
+            qc.invalidateQueries({ queryKey: ["floriday", "orders"] });
+            qc.invalidateQueries({ queryKey: ["cart-overrides"] });
+            setChecked(new Set());
+            setCartStates({});
+            setNotes("");
+            lastSavedRef.current = "";
+            const emptyDraftPayload = {
+                notes: "",
+                checkedKeys: [],
+                cartStates: {},
+            };
+            latestDraftPayloadRef.current = emptyDraftPayload;
+            lastSavedSnapshotRef.current = stableStringifyDraft(emptyDraftPayload);
+            setSavingState("idle");
+            qc.setQueryData(controlDraftQueryKey, buildDraftDto(emptyDraftPayload, {}, null));
+            qc.invalidateQueries({ queryKey: controlDraftQueryKey });
+        },
+        onError: (e) => {
+            controlFinalizedRef.current = false;
+            toast.error(e instanceof Error ? e.message : "Opslaan mislukt");
+        },
+    });
+    const proposalM = useMutation({
+        mutationFn: () => fetchProposals({ data: { checkedCartKeys: [...checked] } }),
+        onSuccess: (r) => {
+            if (r.proposals.length > 0 || r.blocked.length > 0) {
+                setPendingProposal(r);
+                return;
+            }
+            // All carts already checked → require explicit approval before submitting.
+            setConfirmApproval({ mode: "all-checked" });
+        },
+        onError: (e) => {
+            toast.error(e instanceof Error ? e.message : "Controlevoorstel kon niet worden geladen");
+        },
+    });
+    const runControl = () => {
+        proposalM.mutate();
+    };
+    const requestApproveMoveProposals = () => {
+        const keys = pendingProposal?.proposals.map((p) => p.key) ?? [];
+        setPendingProposal(null);
+        setConfirmApproval({ mode: "with-reschedule", confirmedRescheduleCartKeys: keys });
+    };
+    const requestApproveKeepOnDay = () => {
+        setPendingProposal(null);
+        setConfirmApproval({ mode: "keep-on-day" });
+    };
+    const markPendingCartReady = (key) => {
+        setChecked((prev) => {
+            const next = new Set(prev);
+            next.add(key);
+            return next;
+        });
+        setCartStates((prev) => ({
+            ...prev,
+            [key]: {
+                ...(prev[key] ?? {}),
+                status: "ready",
+                updatedAt: new Date().toISOString(),
+            },
+        }));
+        setPendingProposal((prev) => {
+            if (!prev)
+                return prev;
+            const proposals = prev.proposals.filter((x) => x.key !== key);
+            const blocked = prev.blocked.filter((x) => blockedKey(x) !== key);
+            if (proposals.length === 0 && blocked.length === 0) {
+                setConfirmApproval({ mode: "all-checked" });
+                return null;
+            }
+            return { proposals, blocked };
+        });
+    };
+    const performApproval = () => {
+        if (!confirmApproval)
+            return;
+        const keys = confirmApproval.mode === "with-reschedule"
+            ? confirmApproval.confirmedRescheduleCartKeys
+            : [];
+        setConfirmApproval(null);
+        submitM.mutate({ confirmedRescheduleCartKeys: keys });
+    };
+    const stats = useMemo(() => {
+        const total = carts.length;
+        const printed = carts.filter((c) => c.printedCount > 0).length;
+        const checkedCount = carts.filter((c) => checked.has(controlCartKey(c))).length;
+        return { total, printed, checked: checkedCount };
+    }, [carts, checked]);
+    const pendingProposals = pendingProposal?.proposals ?? [];
+    const pendingBlocked = pendingProposal?.blocked ?? [];
+    const pendingNotReadyCount = pendingProposals.length + pendingBlocked.length;
+    const criticalTomorrowCount = pendingProposals.filter((p) => isTomorrowIso(p.pickupDate)).length +
+        pendingBlocked.filter((b) => isTomorrowIso(b.pickupDate)).length;
+    // Realtime sync: invalidate control queries on any change to relevant tables.
+    const invalidateTimer = useRef(null);
+    useEffect(() => {
+        const scheduleInvalidate = () => {
+            if (invalidateTimer.current)
+                clearTimeout(invalidateTimer.current);
+            invalidateTimer.current = setTimeout(() => {
+                qc.invalidateQueries({ queryKey: ["control"] });
+            }, 300);
+        };
+        const tables = [
+            "cart_numbers",
+            "cart_control_sessions",
+            "cart_control_items",
+            "cart_pick_overrides",
+            "orders",
+            "floriday_salesorders_cache",
+            "dashboard_critical_alerts",
+        ];
+        const channel = supabase.channel("controle-page-realtime");
+        for (const table of tables) {
+            channel.on("postgres_changes", { event: "*", schema: "public", table }, scheduleInvalidate);
+        }
+        channel.subscribe();
+        return () => {
+            if (invalidateTimer.current)
+                clearTimeout(invalidateTimer.current);
+            supabase.removeChannel(channel);
+        };
+    }, [qc]);
+    return (_jsxs("main", { className: "p-6 space-y-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Controle karren" }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["Dagelijkse eindcontrole \u2014 vandaag ", new Date().toLocaleDateString("nl-NL")] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => setShowPrint(true), children: [_jsx(Printer, { className: "h-4 w-4 mr-2" }), "Controlelijst afdrukken"] }), _jsxs(Button, { onClick: runControl, disabled: submitM.isPending || proposalM.isPending || carts.length === 0 || tab !== "controle", children: [_jsx(CheckCircle2, { className: "h-4 w-4 mr-2" }), proposalM.isPending ? "Controleren…" : "Controle uitvoeren"] })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: tab === "controle" ? "default" : "outline", onClick: () => setTab("controle"), children: "Controle" }), _jsxs(Button, { variant: tab === "historie" ? "default" : "outline", onClick: () => setTab("historie"), children: [_jsx(History, { className: "h-4 w-4 mr-2" }), "Historie"] })] }), tab === "controle" && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsxs(Card, { className: "p-3", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Totaal karren vandaag" }), _jsx("div", { className: "text-2xl font-semibold", children: stats.total })] }), _jsxs(Card, { className: "p-3", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Geprint" }), _jsx("div", { className: "text-2xl font-semibold", children: stats.printed })] }), _jsxs(Card, { className: "p-3", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Aangevinkt" }), _jsx("div", { className: "text-2xl font-semibold", children: stats.checked })] })] }), _jsx(Card, { className: "p-0 overflow-hidden", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-12", children: _jsx(Checkbox, { checked: carts.length > 0 && carts.every((c) => checked.has(controlCartKey(c)))
+                                                        ? true
+                                                        : carts.some((c) => checked.has(controlCartKey(c)))
+                                                            ? "indeterminate"
+                                                            : false, onCheckedChange: (v) => toggleAll(!!v) }) }), _jsx(TableHead, { children: "Karnummer" }), _jsx(TableHead, { children: "Ophaaldatum" }), _jsx(TableHead, { children: "Uitgeprint" })] }) }), _jsxs(TableBody, { children: [cartsQ.isLoading && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 4, className: "text-center text-muted-foreground py-8", children: "Laden\u2026" }) })), !cartsQ.isLoading && carts.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 4, className: "text-center text-muted-foreground py-8", children: "Geen karren om vandaag te controleren." }) })), carts.map((c) => {
+                                            const k = controlCartKey(c);
+                                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Checkbox, { checked: checked.has(k), onCheckedChange: (v) => toggle(k, !!v) }) }), _jsx(TableCell, { className: "font-mono font-semibold", children: c.cartNumber ?? "—" }), _jsx(TableCell, { children: fmtDate(c.pickupDate) }), _jsx(TableCell, { children: (c.printedCount ?? 0) > 0 ? (_jsx(Badge, { variant: "secondary", children: "Ja" })) : (_jsx(Badge, { variant: "outline", children: "Nee" })) })] }, k));
+                                        })] })] }) }), _jsxs("div", { className: "max-w-xl", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-sm font-medium", children: "Opmerkingen bij deze controle" }), _jsx("span", { className: "text-xs text-muted-foreground", "aria-live": "polite", children: savingState === "saving"
+                                            ? "Opslaan…"
+                                            : savingState === "saved"
+                                                ? "Voortgang automatisch opgeslagen"
+                                                : lastSavedRef.current && notes === lastSavedRef.current
+                                                    ? "Concept bewaard"
+                                                    : "" })] }), _jsx(Textarea, { value: notes, onChange: (e) => setNotes(e.target.value), placeholder: "Bijzonderheden, afwijkingen\u2026", rows: 3 }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Wordt automatisch bewaard tot de controle definitief is goedgekeurd." })] })] })), tab === "historie" && _jsx(HistorieView, { loading: histQ.isLoading, sessions: histQ.data?.sessions ?? [] }), showPrint && (_jsx(ControleLijstPrint, { carts: carts, onClose: () => setShowPrint(false) })), _jsx(Dialog, { open: !!result, onOpenChange: (v) => !v && setResult(null), children: _jsxs(ResponsiveDialogContent, { size: "md", children: [_jsxs(ResponsiveDialogHeader, { children: [_jsx(DialogTitle, { children: "Resultaat controle" }), _jsxs(DialogDescription, { children: [result?.checkedCount, " klaar \u00B7 ", result?.rescheduledCount, " doorgeschoven \u00B7", " ", result?.blockedCount, " geblokkeerd"] })] }), _jsxs(ResponsiveDialogBody, { className: "space-y-4", children: [result?.blocked && result.blocked.length > 0 && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 p-3 space-y-2", children: [_jsxs("div", { className: "flex items-start gap-2 text-destructive font-medium", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsx("span", { children: "De volgende karren kunnen niet automatisch worden doorgeschoven omdat hierdoor de planning of levering in gevaar komt." })] }), _jsx(BlockedTable, { blocked: result.blocked })] })), result?.rescheduled && result.rescheduled.length > 0 && (_jsxs("div", { className: "border rounded-md p-3", children: [_jsx("div", { className: "font-medium mb-2", children: "Doorgeschoven karren" }), _jsx("ul", { className: "text-sm space-y-1", children: result.rescheduled.map((r, i) => (_jsxs("li", { children: [_jsx("span", { className: "font-mono", children: r.cartNumber ?? "—" }), " \u2014", " ", r.customerName, " \u2192 nieuwe pickdatum", " ", _jsx("strong", { children: fmtDate(r.newPickDate) })] }, i))) })] }))] }), _jsx(ResponsiveDialogFooter, { children: _jsx(Button, { onClick: () => {
+                                    setResult(null);
+                                    if (onExit)
+                                        onExit();
+                                }, children: "Sluiten" }) })] }) }), _jsx(Dialog, { open: !!pendingProposal, onOpenChange: (v) => !v && setPendingProposal(null), children: _jsxs(ResponsiveDialogContent, { size: "lg", rows: "with-alert", children: [_jsxs(ResponsiveDialogHeader, { children: [_jsx(DialogTitle, { children: "Controle beslisscherm" }), _jsx(DialogDescription, { children: "Bepaal wat er met de niet-gereed gemelde karren moet gebeuren voordat je de controle definitief afrondt." })] }), _jsx("div", { className: criticalTomorrowCount > 0 ? "border-b bg-destructive/10 px-6 py-4" : "border-b bg-muted/30 px-6 py-4", children: _jsxs("div", { className: criticalTomorrowCount > 0 ? "flex min-w-0 items-start gap-3 text-destructive" : "flex min-w-0 items-start gap-3 text-muted-foreground", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-5 w-5 shrink-0" }), _jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "font-semibold", children: criticalTomorrowCount > 0
+                                                    ? `LET OP: Er ${criticalTomorrowCount === 1 ? "staat 1 kar" : `staan ${criticalTomorrowCount} karren`} gepland om morgen opgehaald te worden die nog niet gereed ${criticalTomorrowCount === 1 ? "is" : "zijn"}.`
+                                                    : "Geen kritieke karren met ophaaldatum morgen." }), _jsx("div", { className: criticalTomorrowCount > 0 ? "text-sm text-destructive/90" : "text-sm text-muted-foreground", children: criticalTomorrowCount > 0
+                                                    ? "Controleer deze karren voordat je verder gaat met de vervolgprocessen."
+                                                    : "Controleer de overige niet-gereed gemelde karren hieronder." })] })] }) }), _jsxs(ResponsiveDialogBody, { className: "space-y-5", children: [_jsxs("section", { className: "space-y-3", children: [_jsx(SectionTitle, { tone: "critical", title: "Kritieke waarschuwingen", count: criticalTomorrowCount }), criticalTomorrowCount > 0 ? (_jsxs("div", { className: "grid gap-2", children: [pendingProposals.filter((p) => isTomorrowIso(p.pickupDate)).map((p) => (_jsx(CartDecisionRow, { cartNumber: p.cartNumber, customerName: p.customerName, pickupDate: p.pickupDate, status: "Niet gereed", critical: true, onReady: () => markPendingCartReady(p.key) }, p.key))), pendingBlocked.filter((b) => isTomorrowIso(b.pickupDate)).map((b) => (_jsx(CartDecisionRow, { cartNumber: b.cartNumber, customerName: b.customerName, pickupDate: b.pickupDate, status: "Niet gereed", critical: true, onReady: () => markPendingCartReady(blockedKey(b)) }, blockedKey(b))))] })) : (_jsx("p", { className: "rounded-md border bg-muted/30 px-3 py-2 text-sm text-muted-foreground", children: "Geen niet-gereed gemelde karren met ophaaldatum morgen." }))] }), (() => {
+                                    const nonCriticalProposals = pendingProposals.filter((p) => !isTomorrowIso(p.pickupDate));
+                                    const nonCriticalBlocked = pendingBlocked.filter((b) => !isTomorrowIso(b.pickupDate));
+                                    const nonCriticalCount = nonCriticalProposals.length + nonCriticalBlocked.length;
+                                    return (_jsxs("section", { className: "space-y-3", children: [_jsx(SectionTitle, { title: "Overige karren die nog niet gereed zijn", count: nonCriticalCount }), nonCriticalCount > 0 ? (_jsxs("div", { className: "grid gap-2", children: [nonCriticalProposals.map((p) => (_jsx(CartDecisionRow, { cartNumber: p.cartNumber, customerName: p.customerName, pickupDate: p.pickupDate, status: "Nog niet afgevinkt", onReady: () => markPendingCartReady(p.key) }, p.key))), nonCriticalBlocked.map((b) => (_jsx(CartDecisionRow, { cartNumber: b.cartNumber, customerName: b.customerName, pickupDate: b.pickupDate, status: "Niet veilig te verplaatsen", onReady: () => markPendingCartReady(blockedKey(b)) }, blockedKey(b))))] })) : (_jsx("p", { className: "rounded-md border bg-muted/30 px-3 py-2 text-sm text-muted-foreground", children: "Geen overige niet-gereed gemelde karren." }))] }));
+                                })(), _jsxs("section", { className: "space-y-3", children: [_jsx(SectionTitle, { title: "Samenvatting" }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [_jsx(SummaryTile, { label: "Niet gereed", value: pendingNotReadyCount }), _jsx(SummaryTile, { label: "Kritiek morgen", value: criticalTomorrowCount, tone: "critical" }), _jsx(SummaryTile, { label: "Niet veilig te verplaatsen", value: pendingBlocked.length, tone: pendingBlocked.length > 0 ? "critical" : "default" })] })] })] }), _jsxs(ResponsiveDialogFooter, { children: [_jsx(Button, { className: "w-full sm:w-auto", variant: "ghost", onClick: () => setPendingProposal(null), children: "Annuleren" }), _jsx(Button, { className: "w-full min-w-0 sm:w-auto", variant: "outline", onClick: requestApproveKeepOnDay, disabled: submitM.isPending, children: "Op huidige dag laten staan" }), _jsx(Button, { className: "w-full min-w-0 sm:w-auto", onClick: requestApproveMoveProposals, disabled: submitM.isPending, children: "Verplaatsen naar morgen" })] })] }) }), _jsx(Dialog, { open: !!confirmApproval, onOpenChange: (v) => !v && setConfirmApproval(null), children: _jsxs(ResponsiveDialogContent, { size: "sm", children: [_jsxs(ResponsiveDialogHeader, { children: [_jsx(DialogTitle, { children: "Controle definitief goedkeuren" }), _jsx(DialogDescription, { children: "Alle controlepunten zijn afgerond. Weet je zeker dat je de controle definitief wilt goedkeuren? Deze actie start de vervolgprocessen." })] }), _jsx(ResponsiveDialogBody, { className: "py-0" }), _jsxs(ResponsiveDialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setConfirmApproval(null), children: "Nee, terug naar de controle" }), _jsx(Button, { onClick: performApproval, disabled: submitM.isPending, children: "Ja, controle goedkeuren" })] })] }) })] }));
+}
+function BlockedTable({ blocked }) {
+    return (_jsx("div", { className: "grid gap-2", children: blocked.map((b, i) => (_jsxs("div", { className: "rounded-md border bg-background/70 p-3", children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-[1fr_1.5fr_1fr_1fr]", children: [_jsx(InfoCell, { label: "Karnummer", value: b.cartNumber ?? "—", mono: true }), _jsx(InfoCell, { label: "Klant", value: b.customerName }), _jsx(InfoCell, { label: "Ophaaldatum", value: fmtDate(b.pickupDate) }), _jsx(InfoCell, { label: "Vervoerder", value: b.carrierName ?? "—" })] }), _jsx("div", { className: "mt-2 text-sm text-muted-foreground", children: b.reason })] }, i))) }));
+}
+function HistorieView({ loading, sessions, }) {
+    const [openId, setOpenId] = useState(null);
+    const fetchDetail = useServerFn(getControlSessionDetail);
+    const detailQ = useQuery({
+        queryKey: ["control", "detail", openId],
+        queryFn: () => fetchDetail({ data: { sessionId: openId } }),
+        enabled: !!openId,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { className: "p-0 overflow-hidden", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Datum" }), _jsx(TableHead, { children: "Tijd" }), _jsx(TableHead, { children: "Totaal" }), _jsx(TableHead, { children: "Gecontroleerd" }), _jsx(TableHead, { children: "Doorgeschoven" }), _jsx(TableHead, { children: "Kritiek" }), _jsx(TableHead, { children: "Opmerkingen" }), _jsx(TableHead, {})] }) }), _jsxs(TableBody, { children: [loading && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "text-center py-8 text-muted-foreground", children: "Laden\u2026" }) })), !loading && sessions.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "text-center py-8 text-muted-foreground", children: "Nog geen controles uitgevoerd." }) })), sessions.map((s) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: fmtDate(s.controlDate) }), _jsx(TableCell, { children: new Date(s.performedAt).toLocaleTimeString("nl-NL", {
+                                                hour: "2-digit",
+                                                minute: "2-digit",
+                                            }) }), _jsx(TableCell, { children: s.totalCarts }), _jsx(TableCell, { children: s.checkedCount }), _jsx(TableCell, { children: s.rescheduledCount }), _jsx(TableCell, { children: s.blockedCount > 0 ? (_jsx(Badge, { variant: "destructive", children: s.blockedCount })) : (_jsx("span", { className: "text-muted-foreground", children: "0" })) }), _jsx(TableCell, { className: "max-w-[220px] truncate", children: s.notes ?? "—" }), _jsx(TableCell, { children: _jsx(Button, { size: "sm", variant: "outline", onClick: () => setOpenId(s.id), children: "Details" }) })] }, s.id)))] })] }) }), _jsx(Dialog, { open: !!openId, onOpenChange: (v) => !v && setOpenId(null), children: _jsxs(ResponsiveDialogContent, { size: "lg", children: [_jsx(ResponsiveDialogHeader, { children: _jsx(DialogTitle, { children: "Controle-details" }) }), _jsx(ResponsiveDialogBody, { children: _jsx("div", { className: "grid gap-2", children: detailQ.data?.items.map((it, i) => (_jsxs("div", { className: "rounded-md border p-3", children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-[1fr_1fr_1.5fr_1fr_auto] md:items-center", children: [_jsx(InfoCell, { label: "Karnummer", value: it.cartNumberLabel ?? "—", mono: true }), _jsx(InfoCell, { label: "Order", value: it.orderNumber ?? "—" }), _jsx(InfoCell, { label: "Klant", value: it.customerName ?? "—" }), _jsx(InfoCell, { label: "Leverdatum", value: fmtDate(it.deliveryDate) }), _jsxs("div", { children: [it.action === "checked" && _jsx(Badge, { children: "Gecontroleerd" }), it.action === "rescheduled" && _jsx(Badge, { variant: "secondary", children: "Doorgeschoven" }), it.action === "blocked" && _jsx(Badge, { variant: "destructive", children: "Geblokkeerd" })] })] }), _jsx("div", { className: "mt-2 text-sm text-muted-foreground", children: it.action === "rescheduled" && it.newPickDate
+                                                ? `Nieuwe pickdatum: ${fmtDate(it.newPickDate)}`
+                                                : it.blockReason ?? "—" })] }, i))) }) }), _jsx(ResponsiveDialogFooter, { children: _jsx(Button, { onClick: () => setOpenId(null), children: "Sluiten" }) })] }) })] }));
+}
+function SectionTitle({ title, count, tone = "default", }) {
+    return (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3", children: [_jsxs("h3", { className: tone === "critical" ? "truncate font-semibold text-destructive" : "truncate font-semibold", children: [tone === "critical" ? "🔴 " : "", title] }), typeof count === "number" && (_jsx(Badge, { variant: tone === "critical" && count > 0 ? "destructive" : "secondary", children: count }))] }));
+}
+function CartDecisionRow({ cartNumber, customerName, pickupDate, status, critical = false, onReady, }) {
+    return (_jsx("div", { className: critical ? "rounded-md border border-destructive/40 bg-destructive/10 p-3" : "rounded-md border bg-card p-3", children: _jsxs("div", { className: "grid gap-3 lg:grid-cols-[1.1fr_1.4fr_1fr_1fr_auto] lg:items-center", children: [_jsx(InfoCell, { label: "Karnummer", value: cartNumber ?? "—", mono: true }), _jsx(InfoCell, { label: "Klant", value: customerName }), _jsx(InfoCell, { label: "Ophaallocatie", value: "\u2014" }), _jsx(InfoCell, { label: "Geplande ophaaldatum", value: fmtDate(pickupDate) }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 lg:justify-end", children: [_jsx(Badge, { variant: critical ? "destructive" : "outline", children: status }), _jsxs("label", { className: "inline-flex items-center gap-2 text-sm font-medium", children: [_jsx(Checkbox, { onCheckedChange: (v) => v && onReady() }), "Gereed"] })] })] }) }));
+}
+function InfoCell({ label, value, mono = false }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: label }), _jsx("div", { className: mono ? "truncate font-mono font-semibold" : "truncate font-medium", title: value, children: value })] }));
+}
+function SummaryTile({ label, value, tone = "default", }) {
+    return (_jsxs("div", { className: tone === "critical" ? "rounded-md border border-destructive/40 bg-destructive/10 p-3" : "rounded-md border bg-muted/30 p-3", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: label }), _jsx("div", { className: tone === "critical" ? "text-2xl font-semibold text-destructive" : "text-2xl font-semibold", children: value })] }));
+}
+// Silence unused Input import (may be used later); keep tree-shakeable
+void Input;

package/dist-lib/components/afhandeling/DagDetailDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DagDetailDialog.d.ts","sourceRoot":"","sources":["../../../src/components/afhandeling/DagDetailDialog.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAyBjE,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAID,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,oBAAoB,sCAyE1F"}
+{"version":3,"file":"DagDetailDialog.d.ts","sourceRoot":"","sources":["../../../src/components/afhandeling/DagDetailDialog.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAyBjE,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAID,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,oBAAoB,sCA2E1F"}