@flowselections/layout-maker 1.51.4 → 1.53.2

package/README.md

@@ -6,7 +6,6 @@ This project was built with [Lovable](https://lovable.dev).
 
 ## Build with Lovable
 
-Continue developing this project in the [Lovable editor](https://lovable.dev/projects/4735fccb-b385-4b48-b4f8-ef135f63f4f7).
 
 - **Ship faster**: describe what you want to build and Lovable handles the code.
 - **Stay in sync**: every change made in Lovable is committed straight to this repository.

package/dist-lib/components/AfdrukKnop.js

@@ -1,64 +1,64 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// ============================================================================
-// src/components/AfdrukKnop.tsx — afdrukken met automatisch ingesteld
-// papierformaat, stand en de bedoelde printer. Waar mogelijk gaat het
-// document direct naar de printer; anders opent het printvenster.
-// ============================================================================
-import { useState } from "react";
-import { Button, toast } from "@flowselections/core";
-import { Loader2, Printer } from "lucide-react";
-import { drukAf } from "../lib/browserPrint.js";
-import { printDirect } from "../lib/directPrint.js";
-/**
- * @deprecated Verouderd — deze knop gebruikt het browser-printvenster als
- * terugval. Gebruik `printHtml()` / `printPdf()` uit `printApi` zodat alles
- * via PrintNode loopt.
- */
-export function AfdrukKnop({ documenttype, formaatCode, orientatie, getHtml, css, documentnaam, label = "Afdrukken", layoutId, kopieen, }) {
-    const [bezig, setBezig] = useState(false);
-    const afdrukken = async () => {
-        setBezig(true);
-        try {
-            const html = getHtml();
-            const direct = await printDirect({
-                documenttype,
-                formaatCode,
-                orientatie,
-                html,
-                css,
-                documentnaam,
-                layoutId: layoutId ?? null,
-                kopieen,
-            });
-            if (direct.gelukt) {
-                toast.success(direct.printernaam
-                    ? `Verstuurd naar ${direct.printernaam}`
-                    : "Het document is naar de printer verstuurd");
-                return;
-            }
-            if (direct.reden)
-                toast.error(direct.reden);
-            const { printer } = await drukAf({
-                documenttype,
-                formaatCode,
-                orientatie,
-                html,
-                css,
-                documentnaam,
-            });
-            if (printer) {
-                toast.info(`Kies in het printvenster: ${printer.systeemnaam ?? printer.naam}`);
-            }
-            else {
-                toast.info("Er is nog geen vaste printer ingesteld voor dit document.");
-            }
-        }
-        catch {
-            toast.error("Afdrukken mislukt");
-        }
-        finally {
-            setBezig(false);
-        }
-    };
-    return (_jsxs(Button, { variant: "outline", disabled: bezig, onClick: () => void afdrukken(), children: [bezig ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(Printer, { className: "mr-2 h-4 w-4" }), label] }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/AfdrukKnop.tsx — afdrukken met automatisch ingesteld
+// papierformaat, stand en de bedoelde printer. Waar mogelijk gaat het
+// document direct naar de printer; anders opent het printvenster.
+// ============================================================================
+import { useState } from "react";
+import { Button, toast } from "@flowselections/core";
+import { Loader2, Printer } from "lucide-react";
+import { drukAf } from "../lib/browserPrint.js";
+import { printDirect } from "../lib/directPrint.js";
+/**
+ * @deprecated Verouderd — deze knop gebruikt het browser-printvenster als
+ * terugval. Gebruik `printHtml()` / `printPdf()` uit `printApi` zodat alles
+ * via PrintNode loopt.
+ */
+export function AfdrukKnop({ documenttype, formaatCode, orientatie, getHtml, css, documentnaam, label = "Afdrukken", layoutId, kopieen, }) {
+    const [bezig, setBezig] = useState(false);
+    const afdrukken = async () => {
+        setBezig(true);
+        try {
+            const html = getHtml();
+            const direct = await printDirect({
+                documenttype,
+                formaatCode,
+                orientatie,
+                html,
+                css,
+                documentnaam,
+                layoutId: layoutId ?? null,
+                kopieen,
+            });
+            if (direct.gelukt) {
+                toast.success(direct.printernaam
+                    ? `Verstuurd naar ${direct.printernaam}`
+                    : "Het document is naar de printer verstuurd");
+                return;
+            }
+            if (direct.reden)
+                toast.error(direct.reden);
+            const { printer } = await drukAf({
+                documenttype,
+                formaatCode,
+                orientatie,
+                html,
+                css,
+                documentnaam,
+            });
+            if (printer) {
+                toast.info(`Kies in het printvenster: ${printer.systeemnaam ?? printer.naam}`);
+            }
+            else {
+                toast.info("Er is nog geen vaste printer ingesteld voor dit document.");
+            }
+        }
+        catch {
+            toast.error("Afdrukken mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    return (_jsxs(Button, { variant: "outline", disabled: bezig, onClick: () => void afdrukken(), children: [bezig ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(Printer, { className: "mr-2 h-4 w-4" }), label] }));
+}

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

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

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

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

package/dist-lib/components/LivePrintstatusRegel.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/LivePrintstatusRegel.tsx — één regel "Live printstatus: aan /
+// uit" met de knop "Opnieuw koppelen" (alleen voor herstel).
+// ============================================================================
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { useState } from "react";
+import { Badge, Button, toast } from "@flowselections/core";
+import { webhookOpnieuwKoppelen, webhookStatus } from "../lib/printService.functions.js";
+export function LivePrintstatusRegel() {
+    const haal = useServerFn(webhookStatus);
+    const koppel = useServerFn(webhookOpnieuwKoppelen);
+    const qc = useQueryClient();
+    const [bezig, setBezig] = useState(false);
+    const { data } = useQuery({ queryKey: ["printnode-webhook-status"], queryFn: () => haal(), refetchInterval: 60000 });
+    const s = data && data.ok ? data : null;
+    const aan = !!s?.aan;
+    return (_jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-3 rounded-md border border-border bg-card px-4 py-3 text-sm", children: [_jsx("span", { className: "font-medium text-foreground", children: "Live printstatus:" }), _jsx(Badge, { variant: aan ? "default" : "secondary", children: aan ? "aan" : "uit" }), _jsx("span", { className: "text-muted-foreground", children: aan
+                    ? s?.laatstOntvangenOp
+                        ? `laatste melding ${new Date(s.laatstOntvangenOp).toLocaleString("nl-NL")}`
+                        : "gekoppeld, wacht op de eerste melding van PrintNode"
+                    : s?.fout ?? "nog niet gekoppeld — de status wordt elke paar minuten opgevraagd" }), s?.melding && _jsxs("span", { className: "text-muted-foreground", children: ["\u00B7 ", s.melding] }), _jsx(Button, { size: "sm", variant: "outline", className: "ml-auto", disabled: bezig, onClick: async () => {
+                    setBezig(true);
+                    try {
+                        const r = await koppel();
+                        if (r.ok)
+                            toast.success("Live printstatus opnieuw gekoppeld");
+                        else
+                            toast.error(r.reden);
+                    }
+                    finally {
+                        setBezig(false);
+                        qc.invalidateQueries({ queryKey: ["printnode-webhook-status"] });
+                    }
+                }, children: bezig ? "Bezig…" : "Opnieuw koppelen" })] }));
+}

package/dist-lib/components/NetwerkPrintersDialog.js

@@ -1,79 +1,79 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// ============================================================================
-// src/components/NetwerkPrintersDialog.tsx — printers uit het netwerk zoeken,
-// toevoegen of koppelen aan een bestaande printer.
-// ============================================================================
-import { useCallback, useEffect, useState } from "react";
-import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, toast, } from "@flowselections/core";
-import { Loader2, Printer, RefreshCw } from "lucide-react";
-import { supabase } from "../lib/supabaseClient.js";
-import { netwerkPrinters } from "../lib/printService.functions.js";
-export function NetwerkPrintersDialog({ open, onOpenChange, huidigePrinterId, huidigePrinterNaam, onKlaar, }) {
-    const [bezig, setBezig] = useState(false);
-    const [fout, setFout] = useState(null);
-    const [lijst, setLijst] = useState([]);
-    const zoeken = useCallback(async () => {
-        setBezig(true);
-        setFout(null);
-        try {
-            const res = await netwerkPrinters({ data: undefined });
-            if (!res.ok) {
-                setFout(res.fout);
-                setLijst([]);
-            }
-            else {
-                setLijst(Array.isArray(res.printers) ? res.printers : []);
-            }
-        }
-        catch {
-            setFout("Er kon niet in het netwerk worden gezocht. Probeer het zo opnieuw.");
-        }
-        finally {
-            setBezig(false);
-        }
-    }, []);
-    useEffect(() => {
-        if (open)
-            void zoeken();
-    }, [open, zoeken]);
-    const toevoegen = async (p) => {
-        try {
-            const { error } = await supabase.from("printers").insert({
-                naam: p.naam,
-                systeemnaam: p.naam,
-                locatie: p.computer,
-                omschrijving: p.omschrijving,
-                online: p.online,
-                actief: true,
-                extern_printer_id: p.id,
-            });
-            if (error)
-                throw error;
-            toast.success(`${p.naam} is toegevoegd`);
-            onKlaar?.();
-            onOpenChange(false);
-        }
-        catch {
-            toast.error("Toevoegen mislukt");
-        }
-    };
-    const koppelen = async (p) => {
-        if (!huidigePrinterId)
-            return;
-        try {
-            const { error } = await supabase
-                .from("printers")
-                .update({ extern_printer_id: p.id, systeemnaam: p.naam, locatie: p.computer })
-                .eq("id", huidigePrinterId);
-            if (error)
-                throw error;
-            toast.success("Printer gekoppeld");
-            onKlaar?.();
-            onOpenChange(false);
-        }
-        catch {
-            toast.error("Koppelen mislukt");
-        }
-    };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Printers in het netwerk" }), _jsx(DialogDescription, { children: "Kies een printer om toe te voegen. Staat een printer er niet bij? Zet dan de computer aan waar de printer op is aangesloten." })] }), _jsxs("div", { className: "space-y-2", children: [bezig && (_jsxs("p", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Zoeken\u2026"] })), !bezig && fout && _jsx("p", { className: "text-destructive text-sm", children: fout }), !bezig && !fout && lijst.length === 0 && (_jsx("p", { className: "text-muted-foreground text-sm", children: "Er zijn geen printers gevonden." })), lijst.map((p) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border p-3", children: [_jsx(Printer, { className: "text-muted-foreground h-5 w-5" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: p.naam }), _jsxs("p", { className: "text-muted-foreground truncate text-xs", children: [p.computer || "Onbekende computer", " \u00B7 ", p.online ? "online" : "offline"] })] }), huidigePrinterId && (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => void koppelen(p), children: ["Koppelen aan ", huidigePrinterNaam ?? "printer"] })), _jsx(Button, { size: "sm", onClick: () => void toevoegen(p), children: "Toevoegen" })] }, p.id)))] }), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { variant: "ghost", onClick: () => void zoeken(), disabled: bezig, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), " Opnieuw zoeken"] }) })] }) }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/NetwerkPrintersDialog.tsx — printers uit het netwerk zoeken,
+// toevoegen of koppelen aan een bestaande printer.
+// ============================================================================
+import { useCallback, useEffect, useState } from "react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, toast, } from "@flowselections/core";
+import { Loader2, Printer, RefreshCw } from "lucide-react";
+import { supabase } from "../lib/supabaseClient.js";
+import { netwerkPrinters } from "../lib/printService.functions.js";
+export function NetwerkPrintersDialog({ open, onOpenChange, huidigePrinterId, huidigePrinterNaam, onKlaar, }) {
+    const [bezig, setBezig] = useState(false);
+    const [fout, setFout] = useState(null);
+    const [lijst, setLijst] = useState([]);
+    const zoeken = useCallback(async () => {
+        setBezig(true);
+        setFout(null);
+        try {
+            const res = await netwerkPrinters({ data: undefined });
+            if (!res.ok) {
+                setFout(res.fout);
+                setLijst([]);
+            }
+            else {
+                setLijst(Array.isArray(res.printers) ? res.printers : []);
+            }
+        }
+        catch {
+            setFout("Er kon niet in het netwerk worden gezocht. Probeer het zo opnieuw.");
+        }
+        finally {
+            setBezig(false);
+        }
+    }, []);
+    useEffect(() => {
+        if (open)
+            void zoeken();
+    }, [open, zoeken]);
+    const toevoegen = async (p) => {
+        try {
+            const { error } = await supabase.from("printers").insert({
+                naam: p.naam,
+                systeemnaam: p.naam,
+                locatie: p.computer,
+                omschrijving: p.omschrijving,
+                online: p.online,
+                actief: true,
+                extern_printer_id: p.id,
+            });
+            if (error)
+                throw error;
+            toast.success(`${p.naam} is toegevoegd`);
+            onKlaar?.();
+            onOpenChange(false);
+        }
+        catch {
+            toast.error("Toevoegen mislukt");
+        }
+    };
+    const koppelen = async (p) => {
+        if (!huidigePrinterId)
+            return;
+        try {
+            const { error } = await supabase
+                .from("printers")
+                .update({ extern_printer_id: p.id, systeemnaam: p.naam, locatie: p.computer })
+                .eq("id", huidigePrinterId);
+            if (error)
+                throw error;
+            toast.success("Printer gekoppeld");
+            onKlaar?.();
+            onOpenChange(false);
+        }
+        catch {
+            toast.error("Koppelen mislukt");
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Printers in het netwerk" }), _jsx(DialogDescription, { children: "Kies een printer om toe te voegen. Staat een printer er niet bij? Zet dan de computer aan waar de printer op is aangesloten." })] }), _jsxs("div", { className: "space-y-2", children: [bezig && (_jsxs("p", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Zoeken\u2026"] })), !bezig && fout && _jsx("p", { className: "text-destructive text-sm", children: fout }), !bezig && !fout && lijst.length === 0 && (_jsx("p", { className: "text-muted-foreground text-sm", children: "Er zijn geen printers gevonden." })), lijst.map((p) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border p-3", children: [_jsx(Printer, { className: "text-muted-foreground h-5 w-5" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: p.naam }), _jsxs("p", { className: "text-muted-foreground truncate text-xs", children: [p.computer || "Onbekende computer", " \u00B7 ", p.online ? "online" : "offline"] })] }), huidigePrinterId && (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => void koppelen(p), children: ["Koppelen aan ", huidigePrinterNaam ?? "printer"] })), _jsx(Button, { size: "sm", onClick: () => void toevoegen(p), children: "Toevoegen" })] }, p.id)))] }), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { variant: "ghost", onClick: () => void zoeken(), disabled: bezig, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), " Opnieuw zoeken"] }) })] }) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"PrintQueuePage.d.ts","sourceRoot":"","sources":["../../src/components/PrintQueuePage.tsx"],"names":[],"mappings":"AAkFA,wBAAgB,cAAc,gCA4T7B"}
+{"version":3,"file":"PrintQueuePage.d.ts","sourceRoot":"","sources":["../../src/components/PrintQueuePage.tsx"],"names":[],"mappings":"AAkFA,wBAAgB,cAAc,gCAiX7B"}

package/dist-lib/components/PrintQueuePage.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, } from "@flowselections/core";
 import { RotateCcw, Search, XCircle } from "lucide-react";
 import { bijgewerktTekst, useAutoRefresh } from "../lib/useAutoRefresh.js";
 import { PrintStatusBanner } from "./PrintStatusBanner.js";
-import { maakPrintJob, updateJobStatus, useLayouts, usePrinters, usePrintJobs, usePrintPlekNamen, } from "../lib/useDocumentData.js";
-import { annuleerPrintOpdrachten, printStatus } from "../lib/printService.functions.js";
+import { useLayouts, usePrinters, usePrintJobs, usePrintPlekNamen, } from "../lib/useDocumentData.js";
+import { annuleerPrintOpdrachten, opnieuwPrinten, printTellingen } from "../lib/printService.functions.js";
+import { opnieuwActie, printnodeStatusLabel, SCANBARE_SOORTEN } from "../lib/printnodeStatus.js";
+import { supabase } from "../lib/supabaseClient.js";
 import { vraagWachtrijRonde } from "../lib/queueTickClient.js";
 import { documentTypeLabel } from "../lib/documentTypes.js";
 import { jobPlekLabel } from "../lib/printQueue.js";
@@ -73,12 +75,58 @@ export function PrintQueuePage() {
             return false;
         return true;
     });
-    const tellingen = useMemo(() => {
-        const t = { wachtend: 0, bezig: 0, voltooid: 0, mislukt: 0, geannuleerd: 0 };
-        for (const j of jobs)
-            t[j.status] = (t[j.status] ?? 0) + 1;
-        return t;
-    }, [jobs]);
+    // Echte tellingen over alle opdrachten (de lijst toont alleen de laatste 200).
+    const [tellingen, setTellingen] = useState({});
+    const herlaadTellingen = async () => {
+        try {
+            const t = await printTellingen();
+            if (t && typeof t === "object")
+                setTellingen(t);
+        }
+        catch {
+            /* tellingen blijven staan */
+        }
+    };
+    const printerById = useMemo(() => new Map(printers.map((p) => [p.id, p])), [printers]);
+    // "Gescand": goedgekeurde controlescan van de kar (match op cart_id). Alleen lezen.
+    const [gescand, setGescand] = useState(new Set());
+    const cartIds = useMemo(() => Array.from(new Set(jobs
+        .filter((j) => SCANBARE_SOORTEN.has(j.documenttype))
+        .map((j) => String(j.payload?.["cart_id"] ?? ""))
+        .filter((c) => c.length > 0))).slice(0, 200), [jobs]);
+    useEffect(() => {
+        if (cartIds.length === 0)
+            return;
+        let actief = true;
+        void supabase
+            .from("logistics_control_scan")
+            .select("cart_id")
+            .in("cart_id", cartIds)
+            .not("approved_at", "is", null)
+            .then(({ data }) => {
+            if (!actief)
+                return;
+            const rijen = Array.isArray(data) ? data : [];
+            setGescand(new Set(rijen.map((r) => String(r.cart_id ?? "")).filter(Boolean)));
+        });
+        return () => {
+            actief = false;
+        };
+    }, [cartIds]);
+    // Live bijwerken (webhook en wachtrij schrijven in print_jobs).
+    useEffect(() => {
+        const kanaal = supabase
+            .channel("printwachtrij-live")
+            .on("postgres_changes", { event: "*", schema: "public", table: "print_jobs" }, () => {
+            void reload(true);
+            void herlaadTellingen();
+        })
+            .subscribe();
+        return () => {
+            void supabase.removeChannel(kanaal);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [reload]);
     const jobsRef = useRef(jobs);
     jobsRef.current = jobs;
     const lopende = jobs.some((j) => j.status === "wachtend" || j.status === "bezig");
@@ -94,19 +142,9 @@ export function PrintQueuePage() {
                 setTickFout(e instanceof Error ? e.message : "Achtergrondprinten werkt nu niet.");
             }
         }
-        const open = jobsRef.current.filter((j) => j.extern_job_id && (j.status === "bezig" || j.status === "wachtend"));
-        for (const j of open) {
-            try {
-                const res = await printStatus({ data: { externJobId: String(j.extern_job_id) } });
-                if (!res.ok)
-                    break;
-                if (res.status !== j.status)
-                    await updateJobStatus(j.id, res.status);
-            }
-            catch {
-                break;
-            }
-        }
+        // Statussen worden op de server bijgewerkt (webhook + terugval-polling);
+        // deze pagina schrijft zelf niets.
+        await herlaadTellingen();
         await reload(true);
     };
     const bijgewerkt = useAutoRefresh(ronde, lopende ? 5000 : 20000);
@@ -137,31 +175,28 @@ export function PrintQueuePage() {
                                                                             ? layoutNaam.get(j.gebruikte_layout_id) ?? "Onbekende layout"
                                                                             : j.gebruikte_bron
                                                                                 ? "geen layout"
-                                                                                : "nog niet verwerkt" }), j.gebruikte_bron && (_jsx(Badge, { variant: "outline", className: "ml-2", children: BRON_LABEL[j.gebruikte_bron] ?? j.gebruikte_bron }))] })] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: j.printer_id ? printerNaam.get(j.printer_id) ?? "—" : "—" }), _jsx(TableCell, { children: _jsx(Badge, { variant: STATUS_VARIANT[j.status] ?? "outline", children: j.status }) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: new Date(j.created_at).toLocaleString("nl-NL") }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: async () => {
-                                                                        if (!j.layout_id)
-                                                                            return;
+                                                                                : "nog niet verwerkt" }), j.gebruikte_bron && (_jsx(Badge, { variant: "outline", className: "ml-2", children: BRON_LABEL[j.gebruikte_bron] ?? j.gebruikte_bron }))] })] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: j.printer_id ? printerNaam.get(j.printer_id) ?? "—" : "—" }), _jsxs(TableCell, { children: [_jsx(Badge, { variant: STATUS_VARIANT[j.status] ?? "outline", children: printnodeStatusLabel(j) }), gescand.has(String(j.payload?.["cart_id"] ?? "")) &&
+                                                                SCANBARE_SOORTEN.has(j.documenttype) &&
+                                                                !j.is_herprint && j.status === "voltooid" && (_jsx(Badge, { variant: "default", className: "ml-2", children: "Gescand" })), j.printnode_bericht && j.status === "mislukt" && (_jsx("span", { className: "block text-xs text-destructive", children: j.printnode_bericht }))] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: new Date(j.created_at).toLocaleString("nl-NL") }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [opnieuwActie(j) && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: async () => {
+                                                                        const pr = j.printer_id ? printerById.get(j.printer_id) : null;
+                                                                        if (pr && !pr.online) {
+                                                                            const door = window.confirm(`Printer "${pr.naam}" (of de computer) is nu offline. De opdracht blijft wachten tot hij weer aan staat, en verloopt anders. Toch versturen?`);
+                                                                            if (!door)
+                                                                                return;
+                                                                        }
                                                                         try {
-                                                                            await maakPrintJob({
-                                                                                layout_id: j.layout_id,
-                                                                                printer_id: j.printer_id,
-                                                                                documenttype: j.documenttype,
-                                                                                documentnaam: j.documentnaam ?? "Herprint",
-                                                                                kopieen: j.kopieen ?? 1,
-                                                                                is_herprint: true,
-                                                                                bron_job_id: j.id,
-                                                                                payload: {
-                                                                                    ...(j.payload && typeof j.payload === "object" ? j.payload : {}),
-                                                                                    is_herprint: true,
-                                                                                    bron_job_id: j.id,
-                                                                                },
-                                                                            });
+                                                                            const r = await opnieuwPrinten({ data: { jobId: j.id } });
+                                                                            if (!r.ok) {
+                                                                                toast.error(r.fout);
+                                                                                return;
+                                                                            }
                                                                             toast.success("Opnieuw in de wachtrij gezet");
-                                                                            void reload();
+                                                                            void reload(true);
                                                                         }
-                                                                        catch {
-                                                                            toast.error("Herprint mislukt");
+                                                                        catch (fout) {
+                                                                            toast.error(fout instanceof Error ? fout.message : "Opnieuw printen mislukt");
                                                                         }
-                                                                    }, children: [_jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), " Opnieuw"] }), (j.status === "wachtend" || j.status === "bezig") && (_jsx(Button, { variant: "ghost", size: "sm", onClick: async () => {
+                                                                    }, children: [_jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), opnieuwActie(j) === "opnieuw_proberen" ? "Opnieuw proberen" : "Opnieuw printen"] })), (j.status === "wachtend" || j.status === "bezig") && (_jsx(Button, { variant: "ghost", size: "sm", onClick: async () => {
                                                                         try {
                                                                             const resultaat = await annuleerPrintOpdrachten({ data: { jobIds: [j.id] } });
                                                                             if (resultaat.externMislukt > 0) {

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

@@ -1 +1 @@
-{"version":3,"file":"PrintenPage.d.ts","sourceRoot":"","sources":["../../src/components/PrintenPage.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,WAAW,CAAC,EAC1B,GAAoB,GACrB,EAAE;IACD,GAAG,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC;CACpC,+BAsBA"}
+{"version":3,"file":"PrintenPage.d.ts","sourceRoot":"","sources":["../../src/components/PrintenPage.tsx"],"names":[],"mappings":"AAqBA,wBAAgB,WAAW,CAAC,EAC1B,GAAoB,GACrB,EAAE;IACD,GAAG,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC;CACpC,+BAuBA"}

package/dist-lib/components/PrintenPage.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // ============================================================================
 // src/components/PrintenPage.tsx — één menu-item "Printen" met tabbladen voor
 // printplekken (plekken, computers en printers samen) en standaardregels.
@@ -8,6 +8,7 @@ import { MapPin, Route as RouteIcon } from "lucide-react";
 import { ModuleTabs } from "./ModuleTabs.js";
 import { PrintplekkenPage } from "./PrintplekkenPage.js";
 import { DocumentRouteringPage } from "./DocumentRouteringPage.js";
+import { LivePrintstatusRegel } from "./LivePrintstatusRegel.js";
 const TABS = [
     {
         id: "printplekken",
@@ -18,5 +19,5 @@ const TABS = [
 ];
 export function PrintenPage({ tab = "printplekken", }) {
     const [actiefTab, setActiefTab] = useState(tab);
-    return (_jsx(_Fragment, { children: _jsx(ModuleTabs, { titel: "Printen", omschrijving: "Stel per plek in het bedrijf in welke computers, printers en documenten daar horen.", tabs: TABS, actiefTab: actiefTab, onTabWijzig: (nieuwTab) => setActiefTab(nieuwTab === "routering" ? "routering" : "printplekken"), children: actiefTab === "routering" ? (_jsx(DocumentRouteringPage, { ingebed: true })) : (_jsx(PrintplekkenPage, { ingebed: true })) }) }));
+    return (_jsx(_Fragment, { children: _jsxs(ModuleTabs, { titel: "Printen", omschrijving: "Stel per plek in het bedrijf in welke computers, printers en documenten daar horen.", tabs: TABS, actiefTab: actiefTab, onTabWijzig: (nieuwTab) => setActiefTab(nieuwTab === "routering" ? "routering" : "printplekken"), children: [_jsx(LivePrintstatusRegel, {}), actiefTab === "routering" ? (_jsx(DocumentRouteringPage, { ingebed: true })) : (_jsx(PrintplekkenPage, { ingebed: true }))] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PrintplekDetailPage.d.ts","sourceRoot":"","sources":["../../src/components/PrintplekDetailPage.tsx"],"names":[],"mappings":"AA8DA,wBAAgB,mBAAmB,gCAmmBlC"}
+{"version":3,"file":"PrintplekDetailPage.d.ts","sourceRoot":"","sources":["../../src/components/PrintplekDetailPage.tsx"],"names":[],"mappings":"AA+DA,wBAAgB,mBAAmB,gCAooBlC"}

package/dist-lib/components/PrintplekDetailPage.js

@@ -19,6 +19,7 @@ import { DOCUMENT_TYPES, documentTypeLabel } from "../lib/documentTypes.js";
 import { drukTestpaginaAf } from "../lib/testpagina.js";
 import { TestprintDialog } from "./TestprintDialog.js";
 import { leesbareFout } from "../lib/foutTekst.js";
+import { supabase } from "../lib/supabaseClient.js";
 import { useRouteringOverzicht } from "../lib/printRoutering.js";
 const BRON_LABEL = {
     printplek: "Printplek-eigen",
@@ -35,6 +36,30 @@ export function PrintplekDetailPage() {
     const [verwijderOpen, setVerwijderOpen] = useState(false);
     const { plekken, computers: plekComputers, regels, koppelingen, toegewezen, reload } = usePrintplekken();
     const { computers, reload: herlaadComputers } = useComputers();
+    // Live computerstatus uit de PrintNode-webhook, op PrintNode-computer-id.
+    const [statusPerId, setStatusPerId] = useState(new Map());
+    useEffect(() => {
+        const laad = async () => {
+            const { data } = await supabase.from("print_computer_status").select("extern_computer_id, verbonden");
+            const rijen = Array.isArray(data) ? data : [];
+            setStatusPerId(new Map(rijen.map((r) => [String(r.extern_computer_id), !!r.verbonden])));
+        };
+        void laad();
+        const kanaal = supabase
+            .channel("computerstatus-live")
+            .on("postgres_changes", { event: "*", schema: "public", table: "print_computer_status" }, () => void laad())
+            .subscribe();
+        return () => {
+            void supabase.removeChannel(kanaal);
+        };
+    }, []);
+    const computerAan = (naam) => {
+        const k = computers.find((x) => x.naam === naam);
+        if (!k)
+            return false;
+        const live = statusPerId.get(String(k.id));
+        return live ?? k.online;
+    };
     const { printers } = usePrinters();
     const { gevonden } = useNetwerkPrinters();
     const [naamBewerken, setNaamBewerken] = useState(false);
@@ -47,6 +72,9 @@ export function PrintplekDetailPage() {
     const [teVerwijderen, setTeVerwijderen] = useState(null);
     const plek = plekken.find((p) => p.id === plekId) ?? null;
     const eigenComputers = plekComputers.filter((c) => c.print_plek_id === plekId);
+    const uitgevallen = eigenComputers
+        .filter((c) => computers.some((k) => k.naam === c.computer_naam) && !computerAan(c.computer_naam))
+        .map((c) => c.computer_naam);
     const vrijeComputers = computers.filter((c) => !plekComputers.some((pc) => pc.computer_naam === c.naam));
     const andereplekken = plekken.filter((p) => p.id !== plekId);
     // De live scan bepaalt alleen online-status en op welke computer een printer hangt.
@@ -186,7 +214,7 @@ export function PrintplekDetailPage() {
                                         }, children: _jsx(Check, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => setNaamBewerken(false), children: _jsx(X, { className: "h-4 w-4" }) })] })) : (_jsx("h1", { className: "cursor-pointer text-xl font-semibold", onClick: () => {
                                     setNaam(plek.naam);
                                     setNaamBewerken(true);
-                                }, children: plek.naam })), _jsx("p", { className: "text-muted-foreground text-sm", children: plek.omschrijving ?? "Hier stel je alles in wat er op deze plek wordt afgedrukt." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => setTestprintOpen(true), children: [_jsx(Printer, { className: "mr-2 h-4 w-4" }), " Testprint controleren"] }), _jsxs(Button, { variant: "ghost", className: "text-destructive", onClick: () => setVerwijderOpen(true), children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), " Verwijderen"] })] })] }), _jsx(PrintplekVerwijderenDialog, { plek: verwijderOpen ? { id: plek.id, naam: plek.naam } : null, onOpenChange: setVerwijderOpen, onKlaar: () => void navigate({ to: "/layouts-printers/printplekken" }) }), _jsx(TestprintDialog, { open: testprintOpen, onOpenChange: setTestprintOpen, printplekId: plekId, printplekNaam: plek.naam }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(Monitor, { className: "h-4 w-4" }), " Computers op deze plek"] }), _jsx(CardDescription, { children: "Het bolletje laat zien of de computer nu aan staat." })] }), vrijeComputers.length > 0 ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("select", { className: selectKlasse, value: computerToevoegen, onChange: (e) => setComputerToevoegen(e.target.value), "aria-label": "Computer kiezen", children: [_jsx("option", { value: "", children: "Computer kiezen\u2026" }), vrijeComputers.map((c) => (_jsx("option", { value: c.naam, children: c.naam }, c.id)))] }), _jsxs(Button, { size: "sm", disabled: !computerToevoegen, onClick: async () => {
+                                }, children: plek.naam })), _jsx("p", { className: "text-muted-foreground text-sm", children: plek.omschrijving ?? "Hier stel je alles in wat er op deze plek wordt afgedrukt." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => setTestprintOpen(true), children: [_jsx(Printer, { className: "mr-2 h-4 w-4" }), " Testprint controleren"] }), _jsxs(Button, { variant: "ghost", className: "text-destructive", onClick: () => setVerwijderOpen(true), children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), " Verwijderen"] })] })] }), _jsx(PrintplekVerwijderenDialog, { plek: verwijderOpen ? { id: plek.id, naam: plek.naam } : null, onOpenChange: setVerwijderOpen, onKlaar: () => void navigate({ to: "/layouts-printers/printplekken" }) }), _jsx(TestprintDialog, { open: testprintOpen, onOpenChange: setTestprintOpen, printplekId: plekId, printplekNaam: plek.naam }), uitgevallen.length > 0 && (_jsxs("div", { role: "alert", className: "rounded-lg border border-destructive bg-destructive/10 px-4 py-3 text-sm text-destructive", children: [_jsx("strong", { children: "Computer niet verbonden:" }), " ", uitgevallen.join(", "), ". Opdrachten voor deze plek worden pas geprint als de computer weer verbonden is, en verlopen anders."] })), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(Monitor, { className: "h-4 w-4" }), " Computers op deze plek"] }), _jsx(CardDescription, { children: "Het bolletje laat zien of de computer nu aan staat." })] }), vrijeComputers.length > 0 ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("select", { className: selectKlasse, value: computerToevoegen, onChange: (e) => setComputerToevoegen(e.target.value), "aria-label": "Computer kiezen", children: [_jsx("option", { value: "", children: "Computer kiezen\u2026" }), vrijeComputers.map((c) => (_jsx("option", { value: c.naam, children: c.naam }, c.id)))] }), _jsxs(Button, { size: "sm", disabled: !computerToevoegen, onClick: async () => {
                                             try {
                                                 await koppelComputerAanPrintplek(plekId, computerToevoegen);
                                                 setComputerToevoegen("");
@@ -196,7 +224,7 @@ export function PrintplekDetailPage() {
                                                 toast.error("Toevoegen mislukt");
                                             }
                                         }, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), " Computer toevoegen"] })] })) : null] }), _jsx(CardContent, { className: "space-y-2", children: eigenComputers.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nog geen computers gekoppeld." })) : (eigenComputers.map((c) => {
-                            const aan = computers.find((k) => k.naam === c.computer_naam)?.online ?? false;
+                            const aan = computerAan(c.computer_naam);
                             return (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border px-3 py-2 text-sm", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${aan ? "bg-emerald-500" : "bg-muted-foreground"}` }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: c.computer_naam }), _jsx("span", { className: "text-muted-foreground text-xs", children: aan ? "Aan" : "Uit" }), _jsxs(Button, { size: "sm", variant: "ghost", className: "text-destructive", onClick: () => setTeVerwijderen(c.computer_naam), children: [_jsx(Trash2, { className: "mr-1 h-3.5 w-3.5" }), " Verwijderen"] })] }, c.id));
                         })) })] }), _jsx(ComputerVerwijderenDialog, { open: !!teVerwijderen, onOpenChange: (v) => !v && setTeVerwijderen(null), computerNaam: teVerwijderen, printplekId: plekId, printers: teVerwijderenPrinters, andereplekken: andereplekken, onKlaar: () => {
                     void herlaadComputers(true);