@flowselections/layout-maker 1.3.3 → 1.6.5

package/dist-lib/components/PrinterSetupWizard.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ============================================================================
-// src/components/PrinterSetupWizard.tsx — eenvoudige setupwizard voor printers
+// src/components/PrinterSetupWizard.tsx — printer toevoegen in drie stappen:
+// kiezen uit het netwerk, naam en locatie geven, testpagina afdrukken.
 // ============================================================================
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Label, toast, } from "@flowselections/core";
-import { Check, CheckCircle2, FileText, Tag } from "lucide-react";
+import { Check, CheckCircle2, FileText, Loader2, Printer, RefreshCw, Search, Tag, } from "lucide-react";
 import { supabase } from "../lib/supabaseClient";
-import { DOCUMENT_PROFIELEN } from "../lib/documentProfiles";
-import { zetFormaatPrinter } from "../lib/formaatPrinters";
 import { drukAf } from "../lib/browserPrint";
-const STAPPEN = ["Printer", "Documenten", "Klaar"];
-/** Vertaalt een simpele keuze naar de technische printerinstellingen. */
+import { printDirect } from "../lib/directPrint";
+import { netwerkPrinters } from "../lib/printService.functions";
+import { PrintProgrammaUitleg, WerktHetNiet } from "./PrintProgrammaUitleg";
+const STAPPEN = ["Printer kiezen", "Naam en locatie", "Klaar"];
 function instellingenVoor(gebruik) {
     return gebruik === "etiket"
         ? { soort: "labelprinter", papierformaat: "label" }
@@ -21,42 +22,109 @@ function Stappenbalk({ stap }) {
                         ? "bg-primary text-primary-foreground"
                         : i === stap
                             ? "border-primary text-primary border-2"
-                            : "bg-muted text-muted-foreground"}`, children: i < stap ? _jsx(Check, { className: "h-4 w-4" }) : i + 1 }), _jsx("span", { className: `text-sm ${i === stap ? "text-foreground font-medium" : "text-muted-foreground"}`, children: s }), i < STAPPEN.length - 1 && _jsx("div", { className: "bg-border h-px flex-1" })] }, s))) }));
+                            : "bg-muted text-muted-foreground"}`, children: i < stap ? _jsx(Check, { className: "h-4 w-4" }) : i + 1 }), _jsx("span", { className: `hidden text-sm sm:inline ${i === stap ? "text-foreground font-medium" : "text-muted-foreground"}`, children: s }), i < STAPPEN.length - 1 && _jsx("div", { className: "bg-border h-px flex-1" })] }, s))) }));
 }
-export function PrinterSetupWizard({ open, onOpenChange, onKlaar, }) {
+export function PrinterSetupWizard({ open, onOpenChange, onKlaar, computerFilter, bekendeExterneIds = [], bekendeLocaties = [], bewerken, }) {
     const [stap, setStap] = useState(0);
     const [bezig, setBezig] = useState(false);
-    const [printernaam, setPrinternaam] = useState("");
-    const [systeemnaam, setSysteemnaam] = useState("");
+    const [zoekt, setZoekt] = useState(false);
+    const [fout, setFout] = useState(null);
+    const [lijst, setLijst] = useState([]);
+    const [zoekterm, setZoekterm] = useState("");
+    const [uitlegOpen, setUitlegOpen] = useState(false);
+    const [gekozen, setGekozen] = useState(null);
+    const [naam, setNaam] = useState("");
+    const [locatie, setLocatie] = useState("");
     const [gebruik, setGebruik] = useState("papier");
     const [printerId, setPrinterId] = useState(null);
-    const [keuzes, setKeuzes] = useState({});
-    const resetAlles = () => {
-        setStap(0);
-        setPrinternaam("");
-        setSysteemnaam("");
-        setGebruik("papier");
-        setPrinterId(null);
-        setKeuzes({});
-    };
+    const zoeken = useCallback(async () => {
+        setZoekt(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.");
+            setLijst([]);
+        }
+        finally {
+            setZoekt(false);
+        }
+    }, []);
     useEffect(() => {
-        if (!open)
-            resetAlles();
-    }, [open]);
-    const printerOpslaan = async () => {
-        const naam = printernaam.trim() || systeemnaam.trim();
-        if (!naam) {
+        if (!open) {
+            setStap(0);
+            setGekozen(null);
+            setNaam("");
+            setLocatie("");
+            setGebruik("papier");
+            setPrinterId(null);
+            setZoekterm("");
+            setUitlegOpen(false);
+            return;
+        }
+        if (bewerken) {
+            setStap(1);
+            setPrinterId(bewerken.id);
+            setNaam(bewerken.naam);
+            setLocatie(bewerken.locatie ?? "");
+            setGebruik(bewerken.papierformaat === "label" ? "etiket" : "papier");
+            return;
+        }
+        void zoeken();
+    }, [open, bewerken, zoeken]);
+    const zichtbaar = useMemo(() => {
+        const term = zoekterm.trim().toLowerCase();
+        return lijst
+            .filter((p) => (computerFilter ? p.computer === computerFilter : true))
+            .filter((p) => (term ? `${p.naam} ${p.computer}`.toLowerCase().includes(term) : true));
+    }, [lijst, zoekterm, computerFilter]);
+    const kiesPrinter = (p) => {
+        setGekozen(p);
+        setNaam(p.naam);
+        setLocatie(p.computer ?? "");
+        setStap(1);
+    };
+    const opslaan = async () => {
+        const eindnaam = naam.trim() || gekozen?.naam || "";
+        if (!eindnaam) {
             toast.error("Geef de printer een naam");
             return;
         }
         setBezig(true);
         try {
+            if (bewerken) {
+                const { error } = await supabase
+                    .from("printers")
+                    .update({
+                    naam: eindnaam,
+                    locatie: locatie.trim() || null,
+                    ...instellingenVoor(gebruik),
+                })
+                    .eq("id", bewerken.id);
+                if (error)
+                    throw error;
+                toast.success("Printer bijgewerkt");
+                onKlaar?.();
+                onOpenChange(false);
+                return;
+            }
             const { data, error } = await supabase
                 .from("printers")
                 .insert({
-                naam,
+                naam: eindnaam,
                 actief: true,
-                systeemnaam: systeemnaam.trim() || naam,
+                online: gekozen?.online ?? false,
+                systeemnaam: gekozen?.naam ?? eindnaam,
+                locatie: locatie.trim() || null,
+                extern_printer_id: gekozen?.id ?? null,
                 ...instellingenVoor(gebruik),
             })
                 .select("id")
@@ -64,7 +132,7 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, }) {
             if (error)
                 throw error;
             setPrinterId(data?.id ?? null);
-            setStap(1);
+            setStap(2);
             onKlaar?.();
         }
         catch {
@@ -74,46 +142,48 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, }) {
             setBezig(false);
         }
     };
-    const koppelingenOpslaan = async () => {
-        if (!printerId)
-            return;
-        setBezig(true);
+    const [testStatus, setTestStatus] = useState("leeg");
+    const testpagina = async () => {
+        setTestStatus("bezig");
+        const html = `<div style="padding:20mm;font-size:14pt"><h1 style="font-size:20pt">Testpagina</h1>
+<p>Deze pagina hoort uit: <strong>${naam}</strong></p></div>`;
+        const opdracht = {
+            documenttype: "pakbon",
+            formaatCode: gebruik === "etiket" ? "label" : "A4",
+            orientatie: "portrait",
+            documentnaam: "Testpagina",
+            html,
+            printerId: printerId ?? undefined,
+        };
         try {
-            for (const [documenttype, formaatCode] of Object.entries(keuzes)) {
-                await zetFormaatPrinter(documenttype, formaatCode, printerId);
+            const direct = await printDirect(opdracht);
+            if (direct.gelukt) {
+                setTestStatus("gelukt");
+                return;
             }
-            setStap(2);
+            await drukAf(opdracht);
+            setTestStatus("gelukt");
         }
         catch {
-            toast.error("Opslaan van de documentkeuzes mislukt");
-        }
-        finally {
-            setBezig(false);
+            setTestStatus("fout");
         }
     };
-    const testpaginaAfdrukken = async () => {
-        const naam = printernaam || systeemnaam;
-        await drukAf({
-            documenttype: "pakbon",
-            formaatCode: gebruik === "etiket" ? "label" : "A4",
-            orientatie: "portrait",
-            documentnaam: "Testpagina",
-            html: `<div style="padding:20mm;font-size:14pt"><h1 style="font-size:20pt">Testpagina</h1>
-<p>Deze pagina hoort uit: <strong>${naam}</strong></p></div>`,
-        });
+    const opnieuw = () => {
+        setStap(0);
+        setGekozen(null);
+        setNaam("");
+        setLocatie("");
+        setPrinterId(null);
+        setTestStatus("leeg");
+        void zoeken();
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-h-[85vh] overflow-y-auto sm:max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Printer instellen" }), _jsx(DialogDescription, { children: "Twee korte stappen, daarna staat alles goed." })] }), _jsx(Stappenbalk, { stap: stap }), stap === 0 && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Naam van de printer" }), _jsx(Input, { value: printernaam, placeholder: "Bijvoorbeeld: printer magazijn", onChange: (e) => setPrinternaam(e.target.value) }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Gebruik dezelfde naam als in het printvenster van deze computer, dan weet u meteen welke u moet kiezen." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Wat gaat deze printer afdrukken?" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: [
-                                        { code: "papier", label: "Papier", sub: "Gewone A4-documenten", Icon: FileText },
-                                        { code: "etiket", label: "Etiketten", sub: "Stickers en labels", Icon: Tag },
-                                    ].map((o) => (_jsxs("button", { type: "button", onClick: () => setGebruik(o.code), className: `hover:bg-accent rounded-lg border p-4 text-left transition ${gebruik === o.code ? "border-primary bg-accent" : ""}`, children: [_jsx(o.Icon, { className: "text-muted-foreground mb-2 h-5 w-5" }), _jsx("p", { className: "text-sm font-medium", children: o.label }), _jsx("p", { className: "text-muted-foreground text-xs", children: o.sub })] }, o.code))) })] }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { disabled: bezig, onClick: () => void printerOpslaan(), children: "Opslaan en verder" }) })] })), stap === 1 && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "Wat drukt deze printer af?" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Kies per soort document het formaat. Daarna staan papierformaat en stand bij het afdrukken automatisch goed." })] }), _jsx("div", { className: "space-y-3", children: DOCUMENT_PROFIELEN.map((profiel) => {
-                                const gekozen = keuzes[profiel.id];
-                                return (_jsxs("div", { className: "rounded-lg border p-3", children: [_jsx("p", { className: "text-sm font-medium", children: profiel.label }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: profiel.formaten.map((f) => (_jsx("button", { type: "button", onClick: () => setKeuzes((k) => {
-                                                    const n = { ...k };
-                                                    if (n[profiel.id] === f.code)
-                                                        delete n[profiel.id];
-                                                    else
-                                                        n[profiel.id] = f.code;
-                                                    return n;
-                                                }), className: `hover:bg-accent rounded-md border px-3 py-1.5 text-xs transition ${gekozen === f.code ? "border-primary bg-accent" : ""}`, children: f.label }, f.code))) })] }, profiel.id));
-                            }) }), _jsxs("div", { className: "flex justify-between", children: [_jsx(Button, { variant: "ghost", onClick: () => setStap(2), children: "Overslaan" }), _jsx(Button, { disabled: bezig, onClick: () => void koppelingenOpslaan(), children: "Opslaan en verder" })] })] })), stap === 2 && (_jsxs("div", { className: "space-y-4 text-center", children: [_jsx(CheckCircle2, { className: "text-primary mx-auto h-10 w-10" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "De printer is klaar voor gebruik" }), _jsxs("p", { className: "text-muted-foreground text-sm", children: [printernaam || systeemnaam, " staat klaar. Papierformaat en stand worden voortaan automatisch ingesteld bij het afdrukken."] })] }), _jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => void testpaginaAfdrukken(), children: "Testpagina afdrukken" }), _jsx(Button, { variant: "ghost", onClick: resetAlles, children: "Nog een printer instellen" }), _jsx(Button, { onClick: () => onOpenChange(false), children: "Klaar" })] })] }))] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-h-[85vh] overflow-y-auto sm:max-w-xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: bewerken ? "Naam en locatie wijzigen" : "Printer toevoegen" }), _jsx(DialogDescription, { children: bewerken
+                                ? "Pas de naam, de locatie en het soort papier aan."
+                                : "Kies uw printer, geef hem een herkenbare naam en druk een testpagina af." })] }), !bewerken && _jsx(Stappenbalk, { stap: stap }), stap === 0 && (_jsxs("div", { className: "space-y-4", children: [lijst.length > 6 && (_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground absolute top-2.5 left-3 h-4 w-4" }), _jsx(Input, { className: "pl-9", value: zoekterm, placeholder: "Zoek op printer of computer", onChange: (e) => setZoekterm(e.target.value) })] })), zoekt && (_jsxs("p", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Printers zoeken\u2026"] })), !zoekt && fout && _jsx("p", { className: "text-destructive text-sm", children: fout }), !zoekt && zichtbaar.length > 0 && (_jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: zichtbaar.map((p) => {
+                                const al = bekendeExterneIds.includes(p.id);
+                                return (_jsx("button", { type: "button", disabled: al, onClick: () => kiesPrinter(p), className: `rounded-xl border p-4 text-left transition ${al ? "opacity-60" : "hover:border-primary/50 hover:bg-accent/40"}`, children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Printer, { className: "text-muted-foreground mt-0.5 h-5 w-5 shrink-0" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium", children: p.naam }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: p.computer }), _jsxs("span", { className: "mt-2 flex items-center gap-1.5 text-xs", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${p.online ? "bg-primary" : "bg-muted-foreground/40"}` }), al ? "Al toegevoegd" : p.online ? "Beschikbaar" : "Niet aan"] })] })] }) }, p.id));
+                            }) })), !zoekt && zichtbaar.length === 0 && _jsx(PrintProgrammaUitleg, {}), !zoekt && zichtbaar.length > 0 && (_jsxs("div", { className: "space-y-3", children: [_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground text-sm underline", onClick: () => setUitlegOpen((v) => !v), children: "Ik zie mijn printer niet" }), uitlegOpen && _jsx(PrintProgrammaUitleg, { compact: true })] })), _jsx("div", { className: "flex justify-between", children: _jsxs(Button, { variant: "ghost", onClick: () => void zoeken(), disabled: zoekt, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), " Opnieuw zoeken"] }) })] })), stap === 1 && (_jsxs("div", { className: "grid gap-5 sm:grid-cols-[1fr_200px]", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Weergavenaam" }), _jsx(Input, { value: naam, placeholder: "Bijvoorbeeld: pakbonprinter voorin", onChange: (e) => setNaam(e.target.value) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Locatie" }), _jsx(Input, { value: locatie, placeholder: "Bijvoorbeeld: magazijn", onChange: (e) => setLocatie(e.target.value) }), bekendeLocaties.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 pt-1", children: bekendeLocaties.slice(0, 6).map((l) => (_jsx("button", { type: "button", onClick: () => setLocatie(l), className: "hover:bg-accent rounded-full border px-3 py-1 text-xs", children: l }, l))) }))] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Wat gaat deze printer afdrukken?" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: [
+                                                { code: "papier", label: "Papier (A4)", sub: "Gewone documenten", Icon: FileText },
+                                                { code: "etiket", label: "Etiketten", sub: "Stickers en labels", Icon: Tag },
+                                            ].map((o) => (_jsxs("button", { type: "button", onClick: () => setGebruik(o.code), className: `hover:bg-accent rounded-lg border p-4 text-left transition ${gebruik === o.code ? "border-primary bg-accent" : ""}`, children: [_jsx(o.Icon, { className: "text-muted-foreground mb-2 h-5 w-5" }), _jsx("p", { className: "text-sm font-medium", children: o.label }), _jsx("p", { className: "text-muted-foreground text-xs", children: o.sub })] }, o.code))) })] }), _jsxs("div", { className: "flex justify-between", children: [!bewerken ? (_jsx(Button, { variant: "ghost", onClick: () => setStap(0), children: "Terug" })) : (_jsx("span", {})), _jsx(Button, { disabled: bezig, onClick: () => void opslaan(), children: bewerken ? "Opslaan" : "Opslaan en verder" })] })] }), _jsxs("div", { className: "hidden sm:block", children: [_jsx("p", { className: "text-muted-foreground mb-2 text-xs", children: "Zo komt hij in de lijst:" }), _jsxs("div", { className: "bg-card rounded-xl border p-3", children: [_jsx(Printer, { className: "text-muted-foreground mb-2 h-4 w-4" }), _jsx("p", { className: "truncate text-sm font-medium", children: naam || "Naam van de printer" }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: locatie || "Geen locatie" })] })] })] })), stap === 2 && (_jsxs("div", { className: "space-y-4 text-center", children: [_jsx(CheckCircle2, { className: "text-primary mx-auto h-10 w-10" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "De printer is klaar voor gebruik" }), _jsxs("p", { className: "text-muted-foreground text-sm", children: [naam, " ", locatie ? `bij ${locatie}` : "", " drukt voortaan automatisch af."] })] }), testStatus !== "leeg" && (_jsxs("p", { className: "text-muted-foreground text-sm", children: [testStatus === "bezig" && "Onderweg naar de printer…", testStatus === "gelukt" && "De testpagina is verstuurd.", testStatus === "fout" && "De testpagina kon niet worden afgedrukt."] })), _jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => void testpagina(), children: "Testpagina afdrukken" }), _jsx(Button, { variant: "ghost", onClick: opnieuw, children: "Nog een printer toevoegen" }), _jsx(Button, { onClick: () => onOpenChange(false), children: "Klaar" })] }), _jsx(WerktHetNiet, {})] }))] }) }));
 }

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

@@ -0,0 +1,11 @@
+import type { LucideIcon } from "lucide-react";
+export interface StatKaart {
+    label: string;
+    waarde: string;
+    toelichting: string;
+    icon: LucideIcon;
+}
+export declare function PrinterStatsKaarten({ kaarten }: {
+    kaarten: StatKaart[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=PrinterStatsKaarten.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrinterStatsKaarten.d.ts","sourceRoot":"","sources":["../../src/components/PrinterStatsKaarten.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,SAAS,EAAE,CAAA;CAAE,+BAmBxE"}

package/dist-lib/components/PrinterStatsKaarten.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/PrinterStatsKaarten.tsx — vier kerncijfers bovenaan de pagina
+// ============================================================================
+import { Card, CardContent } from "@flowselections/core";
+export function PrinterStatsKaarten({ kaarten }) {
+    return (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-4", children: kaarten.map((k) => (_jsx(Card, { children: _jsxs(CardContent, { className: "flex items-center gap-4 py-5", children: [_jsx("div", { className: "bg-muted rounded-lg p-3", children: _jsx(k.icon, { className: "text-muted-foreground h-5 w-5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-muted-foreground truncate text-sm", children: k.label }), _jsx("p", { className: "text-2xl font-semibold leading-tight", children: k.waarde }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: k.toelichting })] })] }) }, k.label))) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"PrintersPage.d.ts","sourceRoot":"","sources":["../../src/components/PrintersPage.tsx"],"names":[],"mappings":"AAiBA,wBAAgB,YAAY,gCAoK3B"}
+{"version":3,"file":"PrintersPage.d.ts","sourceRoot":"","sources":["../../src/components/PrintersPage.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,YAAY,gCA6O3B"}

package/dist-lib/components/PrintersPage.js

@@ -1,60 +1,131 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/PrintersPage.tsx — overzicht van werkplekken (computers) met
+// hun printers, status en snelkoppelingen naar het configuratiescherm.
+// ============================================================================
 import { useMemo, useState } from "react";
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, toast, } from "@flowselections/core";
+import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
 import { Link } from "@tanstack/react-router";
-import { ListChecks, Plus, Printer, Trash2 } from "lucide-react";
-import { toggleKoppeling, useLayouts, usePrinters, verwijderPrinter } from "../lib/useDocumentData";
-import { drukAf } from "../lib/browserPrint";
+import { CheckCircle2, FileText, ListChecks, Monitor, Plus, Printer, Search } from "lucide-react";
+import { bijgewerktTekst, useAutoRefresh } from "../lib/useAutoRefresh";
+import { useLayouts, usePrinters } from "../lib/useDocumentData";
+import { useNetwerkPrinters } from "../lib/useNetwerkPrinters";
 import { PrinterSetupWizard } from "./PrinterSetupWizard";
+import { ComputersLijst, useComputers } from "./ComputersLijst";
+import { PrinterStatsKaarten } from "./PrinterStatsKaarten";
+import { WerkplekkenTabel } from "./WerkplekkenTabel";
 export function PrintersPage() {
-    const { printers, koppelingen, loading, reload } = usePrinters();
+    const { printers, koppelingen, reload } = usePrinters();
     const { layouts } = useLayouts();
+    const { computers, loading: computersLaden, fout: computersFout, reload: herlaadComputers, } = useComputers();
+    const { gevonden, zoek } = useNetwerkPrinters();
     const [wizard, setWizard] = useState(false);
-    const [gekozenPrinter, setGekozenPrinter] = useState(null);
-    const gekoppeld = useMemo(() => {
+    const [computerToevoegen, setComputerToevoegen] = useState(false);
+    const [computerFilter, setComputerFilter] = useState(null);
+    const [bewerken] = useState(null);
+    const [zoekterm, setZoekterm] = useState("");
+    const [status, setStatus] = useState("alle");
+    const [locatie, setLocatie] = useState("alle");
+    const bijgewerkt = useAutoRefresh(async () => {
+        await Promise.all([reload(true), herlaadComputers(true), zoek()]);
+    }, 10000, wizard || computerToevoegen);
+    const gekoppeldePrinters = useMemo(() => new Set(koppelingen.map((k) => k.printer_id)), [koppelingen]);
+    const printersPerComputer = useMemo(() => {
+        const externNaarComputer = new Map(gevonden.map((g) => [g.id, g.computer]));
         const map = new Map();
-        for (const k of koppelingen) {
-            if (!map.has(k.printer_id))
-                map.set(k.printer_id, new Set());
-            map.get(k.printer_id).add(k.layout_id);
+        for (const p of printers) {
+            const extern = p.extern_printer_id ?? null;
+            const naam = extern ? externNaarComputer.get(extern) : undefined;
+            if (!naam)
+                continue;
+            const rij = map.get(naam) ?? { totaal: 0, gekoppeld: 0, locaties: [] };
+            rij.totaal += 1;
+            if (gekoppeldePrinters.has(p.id))
+                rij.gekoppeld += 1;
+            if (p.locatie && !rij.locaties.includes(p.locatie))
+                rij.locaties.push(p.locatie);
+            map.set(naam, rij);
         }
         return map;
-    }, [koppelingen]);
-    const actievePrinter = printers.find((p) => p.id === gekozenPrinter) ?? null;
-    const testpagina = async (naam) => {
-        try {
-            await drukAf({
-                documenttype: "pakbon",
-                formaatCode: "A4",
-                orientatie: "portrait",
-                documentnaam: "Testpagina",
-                html: `<div style="padding:20mm;font-size:14pt"><h1 style="font-size:20pt">Testpagina</h1>
-<p>Deze pagina hoort uit: <strong>${naam}</strong></p></div>`,
-            });
-        }
-        catch {
-            toast.error("De testpagina kon niet worden geopend");
-        }
-    };
-    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: "Printers" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Stel een printer in en kies wat erop wordt afgedrukt." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", asChild: true, children: _jsxs(Link, { to: "/layouts-printers/wachtrij", children: [_jsx(ListChecks, { className: "mr-2 h-4 w-4" }), " Printwachtrij"] }) }), _jsxs(Button, { onClick: () => setWizard(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Printer instellen"] })] })] }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-[1fr_340px]", children: [_jsxs("div", { className: "space-y-3", children: [loading && _jsx("p", { className: "text-muted-foreground text-sm", children: "Laden\u2026" }), !loading && printers.length === 0 && (_jsx(Card, { children: _jsxs(CardContent, { className: "py-12 text-center", children: [_jsx(Printer, { className: "text-muted-foreground mx-auto mb-3 h-8 w-8" }), _jsx("p", { className: "text-sm font-medium", children: "Nog geen printers" }), _jsx("p", { className: "text-muted-foreground mb-4 text-sm", children: "In drie korte stappen is uw printer klaar voor gebruik." }), _jsx(Button, { onClick: () => setWizard(true), children: "Printer instellen" })] }) })), printers.map((p) => (_jsxs("button", { type: "button", onClick: () => setGekozenPrinter(p.id), className: `hover:bg-accent/50 flex w-full items-center gap-3 rounded-lg border p-4 text-left transition ${p.id === gekozenPrinter ? "border-primary bg-accent/40" : ""}`, 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 }), _jsx("p", { className: "text-muted-foreground text-xs", children: p.locatie ? `Bij ${p.locatie}` : "Geen computer gekozen" })] }), _jsx("span", { className: `h-2.5 w-2.5 rounded-full ${p.actief ? "bg-primary" : "bg-muted-foreground/40"}` }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
-                                            e.stopPropagation();
-                                            void testpagina(p.naam);
-                                        }, children: "Testpagina" }), _jsx(Button, { variant: "ghost", size: "sm", title: "Verwijderen", onClick: async (e) => {
-                                            e.stopPropagation();
-                                            try {
-                                                await verwijderPrinter(p.id);
-                                                toast.success("Printer verwijderd");
-                                                void reload();
-                                            }
-                                            catch {
-                                                toast.error("Verwijderen mislukt");
-                                            }
-                                        }, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, p.id)))] }), _jsx("div", { className: "space-y-6", children: _jsxs(Card, { className: "h-fit", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Wat wordt hier afgedrukt?" }), _jsx(CardDescription, { children: actievePrinter ? actievePrinter.naam : "Kies eerst een printer" })] }), _jsxs(CardContent, { className: "space-y-3", children: [!actievePrinter && (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nog geen printer gekozen." })), actievePrinter &&
-                                            layouts.map((l) => {
-                                                const aan = gekoppeld.get(actievePrinter.id)?.has(l.id) ?? false;
-                                                return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Checkbox, { checked: aan, onCheckedChange: async (v) => {
-                                                                await toggleKoppeling(l.id, actievePrinter.id, !!v);
-                                                                void reload();
-                                                            } }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "block truncate text-sm", children: l.naam }), _jsx("span", { className: "text-muted-foreground text-xs", children: l.papierformaat })] })] }, l.id));
-                                            }), actievePrinter && layouts.length === 0 && (_jsx("p", { className: "text-muted-foreground text-sm", children: "Er zijn nog geen ontwerpen." }))] })] }) })] }), _jsx(PrinterSetupWizard, { open: wizard, onOpenChange: setWizard, onKlaar: () => void reload() })] }));
+    }, [printers, gevonden, gekoppeldePrinters]);
+    const alleRijen = computers.map((c) => {
+        const info = printersPerComputer.get(c.naam);
+        return {
+            id: c.id,
+            naam: c.naam,
+            online: c.online,
+            locatie: info?.locaties.join(" · ") || "Geen locatie",
+            aantalPrinters: info?.totaal ?? c.aantalPrinters,
+            aantalGekoppeld: info?.gekoppeld ?? 0,
+        };
+    });
+    const locaties = Array.from(new Set(alleRijen.map((r) => r.locatie))).filter((l) => l !== "Geen locatie");
+    const rijen = alleRijen.filter((r) => {
+        const term = zoekterm.trim().toLowerCase();
+        if (term && !r.naam.toLowerCase().includes(term) && !r.locatie.toLowerCase().includes(term))
+            return false;
+        if (status === "aan" && !r.online)
+            return false;
+        if (status === "uit" && r.online)
+            return false;
+        if (locatie !== "alle" && r.locatie !== locatie)
+            return false;
+        return true;
+    });
+    const computersOnline = computers.filter((c) => c.online).length;
+    const bekendeExterneIds = printers
+        .map((p) => p.extern_printer_id ?? null)
+        .filter((e) => !!e);
+    const bekendeLocaties = Array.from(new Set(printers.map((p) => p.locatie).filter((l) => !!l)));
+    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: "Printers" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Beheer per werkplek welke computer is aangemeld en welke printers worden gebruikt." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", asChild: true, children: _jsxs(Link, { to: "/layouts-printers/wachtrij", children: [_jsx(ListChecks, { className: "mr-2 h-4 w-4" }), " Printwachtrij"] }) }), _jsxs(Button, { onClick: () => setComputerToevoegen(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Computer toevoegen"] })] })] }), _jsx(PrinterStatsKaarten, { kaarten: [
+                    {
+                        label: "Werkplekken",
+                        waarde: String(computers.length),
+                        toelichting: "Aangemelde computers",
+                        icon: Monitor,
+                    },
+                    {
+                        label: "Totaal printers",
+                        waarde: String(printers.length),
+                        toelichting: "Ingestelde printers",
+                        icon: Printer,
+                    },
+                    {
+                        label: "Documenten",
+                        waarde: String(layouts.length),
+                        toelichting: "Beschikbare ontwerpen",
+                        icon: FileText,
+                    },
+                    {
+                        label: "Status",
+                        waarde: `${computersOnline} / ${computers.length}`,
+                        toelichting: "Werkplekken aan",
+                        icon: CheckCircle2,
+                    },
+                ] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3 rounded-xl border p-3", children: [_jsxs("div", { className: "relative min-w-[220px] flex-1", children: [_jsx(Search, { className: "text-muted-foreground absolute top-2.5 left-3 h-4 w-4" }), _jsx(Input, { className: "pl-9", placeholder: "Zoek werkplek of locatie\u2026", value: zoekterm, onChange: (e) => setZoekterm(e.target.value) })] }), _jsxs(Select, { value: status, onValueChange: setStatus, children: [_jsx(SelectTrigger, { className: "w-[170px]", children: _jsx(SelectValue, { placeholder: "Status" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Status: alle" }), _jsx(SelectItem, { value: "aan", children: "Alleen aan" }), _jsx(SelectItem, { value: "uit", children: "Alleen uit" })] })] }), _jsxs(Select, { value: locatie, onValueChange: setLocatie, children: [_jsx(SelectTrigger, { className: "w-[190px]", children: _jsx(SelectValue, { placeholder: "Locatie" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Locatie: alle" }), locaties.map((l) => (_jsx(SelectItem, { value: l, children: l }, l)))] })] }), _jsx("span", { className: "text-muted-foreground ml-auto text-xs", children: bijgewerktTekst(bijgewerkt) })] }), rijen.length > 0 ? (_jsx(WerkplekkenTabel, { rijen: rijen, onPrinterToevoegen: (computer) => {
+                    setComputerFilter(computer);
+                    setWizard(true);
+                }, onVernieuw: () => {
+                    void herlaadComputers();
+                    void zoek();
+                } })) : (_jsx(ComputersLijst, { computers: computers, loading: computersLaden, fout: computersFout, onVernieuw: () => {
+                    void herlaadComputers();
+                    void zoek();
+                }, onPrintersToevoegen: (computer) => {
+                    setComputerFilter(computer);
+                    setWizard(true);
+                }, toevoegenOpen: false, onToevoegenOpenChange: setComputerToevoegen })), _jsx(ComputersLijst, { computers: computers, loading: false, fout: null, onVernieuw: () => {
+                    void herlaadComputers();
+                    void zoek();
+                }, onPrintersToevoegen: (computer) => {
+                    setComputerFilter(computer);
+                    setWizard(true);
+                }, toevoegenOpen: computerToevoegen, onToevoegenOpenChange: setComputerToevoegen, alleenDialog: true }), _jsx(PrinterSetupWizard, { open: wizard, onOpenChange: (v) => {
+                    setWizard(v);
+                    if (!v)
+                        setComputerFilter(null);
+                }, computerFilter: computerFilter, bekendeExterneIds: bekendeExterneIds, bekendeLocaties: bekendeLocaties, bewerken: bewerken, onKlaar: () => {
+                    void reload();
+                    void zoek();
+                } })] }));
 }

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

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

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

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

package/dist-lib/components/WerkplekConfiguratiePage.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/WerkplekConfiguratiePage.tsx — één computer configureren:
+// printers op deze computer en welke ontwerpen er worden afgedrukt.
+// ============================================================================
+import { useMemo, useState } from "react";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Input, toast, } from "@flowselections/core";
+import { Link, useParams } from "@tanstack/react-router";
+import { ChevronRight, Monitor, Plus, Printer, Search } from "lucide-react";
+import { bijgewerktTekst, useAutoRefresh } from "../lib/useAutoRefresh";
+import { toggleKoppeling, useLayouts, usePrinters, verwijderPrinter } from "../lib/useDocumentData";
+import { useNetwerkPrinters } from "../lib/useNetwerkPrinters";
+import { drukTestpaginaAf } from "../lib/testpagina";
+import { useComputers } from "./ComputersLijst";
+import { PrinterKaart } from "./PrinterKaart";
+import { PrinterSetupWizard } from "./PrinterSetupWizard";
+export function WerkplekConfiguratiePage() {
+    const params = useParams({ strict: false });
+    const computerId = params.computerId ?? "";
+    const { printers, koppelingen, reload } = usePrinters();
+    const { layouts } = useLayouts();
+    const { computers, reload: herlaadComputers } = useComputers();
+    const { gevonden, zoek } = useNetwerkPrinters();
+    const [wizard, setWizard] = useState(false);
+    const [bewerken, setBewerken] = useState(null);
+    const [gekozenPrinter, setGekozenPrinter] = useState(null);
+    const [zoekComputer, setZoekComputer] = useState("");
+    const [layoutZoek, setLayoutZoek] = useState("");
+    const bijgewerkt = useAutoRefresh(async () => {
+        await Promise.all([reload(true), herlaadComputers(true), zoek()]);
+    }, 10000, wizard);
+    const computer = computers.find((c) => c.id === computerId) ?? null;
+    const beschikbaarheid = useMemo(() => {
+        const map = new Map();
+        for (const g of gevonden)
+            map.set(g.id, g);
+        return map;
+    }, [gevonden]);
+    const gekoppeld = useMemo(() => {
+        const map = new Map();
+        for (const k of koppelingen) {
+            if (!map.has(k.printer_id))
+                map.set(k.printer_id, new Set());
+            map.get(k.printer_id).add(k.layout_id);
+        }
+        return map;
+    }, [koppelingen]);
+    const rijen = printers
+        .map((p) => {
+        const extern = p.extern_printer_id ?? null;
+        const net = extern ? beschikbaarheid.get(extern) : undefined;
+        return { printer: p, extern, computer: net?.computer ?? null, online: !!net?.online };
+    })
+        .filter((r) => (computer ? r.computer === computer.naam : false));
+    const actievePrinter = printers.find((p) => p.id === gekozenPrinter) ?? null;
+    const zichtbareComputers = computers.filter((c) => zoekComputer.trim() ? c.naam.toLowerCase().includes(zoekComputer.trim().toLowerCase()) : true);
+    const zichtbareLayouts = layouts.filter((l) => layoutZoek.trim() ? l.naam.toLowerCase().includes(layoutZoek.trim().toLowerCase()) : true);
+    const bekendeExterneIds = printers
+        .map((p) => p.extern_printer_id ?? null)
+        .filter((e) => !!e);
+    const bekendeLocaties = Array.from(new Set(printers.map((p) => p.locatie).filter((l) => !!l)));
+    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-1 text-sm", children: [_jsx(Link, { to: "/layouts-printers/printers", className: "hover:text-foreground", children: "Printers" }), _jsx(ChevronRight, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-foreground", children: computer?.naam ?? "Werkplek" })] }), _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: "Werkplek configureren" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Kies welke printers op deze computer welke ontwerpen afdrukken." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: bijgewerktTekst(bijgewerkt) }), _jsxs(Button, { onClick: () => {
+                                    setBewerken(null);
+                                    setWizard(true);
+                                }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Printer toevoegen"] })] })] }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-[300px_1fr]", children: [_jsxs(Card, { className: "h-fit", children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-base", children: "Werkplekken" }) }), _jsxs(CardContent, { className: "space-y-2", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground absolute top-2.5 left-3 h-4 w-4" }), _jsx(Input, { className: "pl-9", placeholder: "Zoek werkplek", value: zoekComputer, onChange: (e) => setZoekComputer(e.target.value) })] }), zichtbareComputers.map((c) => (_jsxs(Link, { to: "/layouts-printers/printers/$computerId", params: { computerId: c.id }, className: `flex items-center gap-3 rounded-lg border p-3 text-sm transition ${c.id === computerId ? "border-primary ring-primary/20 ring-2" : "hover:bg-muted/50"}`, children: [_jsx("span", { className: `h-2 w-2 shrink-0 rounded-full ${c.online ? "bg-primary" : "bg-muted-foreground/40"}` }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-medium", children: c.naam }), _jsxs("span", { className: "text-muted-foreground block text-xs", children: [c.aantalPrinters, " ", c.aantalPrinters === 1 ? "printer" : "printers"] })] }), _jsx(ChevronRight, { className: "text-muted-foreground h-4 w-4" })] }, c.id))), zichtbareComputers.length === 0 && (_jsx("p", { className: "text-muted-foreground text-sm", children: "Geen werkplekken gevonden." }))] })] }), _jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsxs(CardHeader, { className: "pb-3", children: [_jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(Monitor, { className: "h-4 w-4" }), " ", computer?.naam ?? "Onbekende werkplek"] }), _jsx(CardDescription, { children: computer
+                                                ? `${computer.online ? "Aan" : "Uit"} · ${rijen.length} ${rijen.length === 1 ? "printer" : "printers"}`
+                                                : "Deze computer is niet gevonden. Staat hij aan?" })] }) }), _jsxs("div", { className: "grid gap-6 xl:grid-cols-[1fr_340px]", children: [_jsxs("div", { className: "space-y-3", children: [rijen.length === 0 && (_jsx(Card, { children: _jsxs(CardContent, { className: "space-y-4 py-10 text-center", children: [_jsx(Printer, { className: "text-muted-foreground mx-auto h-8 w-8" }), _jsx("p", { className: "text-sm font-medium", children: "Nog geen printers op deze werkplek" }), _jsx(Button, { onClick: () => {
+                                                                setBewerken(null);
+                                                                setWizard(true);
+                                                            }, children: "Printer toevoegen" })] }) })), rijen.map(({ printer, online }) => (_jsx(PrinterKaart, { printer: printer, computer: computer?.naam ?? null, beschikbaar: online, gekozen: printer.id === gekozenPrinter, onKies: () => setGekozenPrinter(printer.id), onTest: () => void drukTestpaginaAf(printer.id, printer.naam), onBewerk: () => {
+                                                    setBewerken({
+                                                        id: printer.id,
+                                                        naam: printer.naam,
+                                                        locatie: printer.locatie,
+                                                        papierformaat: printer.papierformaat,
+                                                    });
+                                                    setWizard(true);
+                                                }, onVerwijder: async () => {
+                                                    try {
+                                                        await verwijderPrinter(printer.id);
+                                                        toast.success("Printer verwijderd");
+                                                        void reload();
+                                                    }
+                                                    catch {
+                                                        toast.error("Verwijderen mislukt");
+                                                    }
+                                                } }, printer.id)))] }), actievePrinter && (_jsxs(Card, { className: "h-fit", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Wat wordt hier afgedrukt?" }), _jsx(CardDescription, { children: actievePrinter.naam })] }), _jsxs(CardContent, { className: "space-y-3", children: [layouts.length > 8 && (_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground absolute top-2.5 left-3 h-4 w-4" }), _jsx(Input, { className: "pl-9", value: layoutZoek, placeholder: "Zoek een ontwerp", onChange: (e) => setLayoutZoek(e.target.value) })] })), zichtbareLayouts.map((l) => {
+                                                        const aan = gekoppeld.get(actievePrinter.id)?.has(l.id) ?? false;
+                                                        return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Checkbox, { checked: aan, onCheckedChange: async (v) => {
+                                                                        await toggleKoppeling(l.id, actievePrinter.id, !!v);
+                                                                        void reload();
+                                                                    } }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "block truncate text-sm", children: l.naam }), _jsx("span", { className: "text-muted-foreground text-xs", children: l.papierformaat })] })] }, l.id));
+                                                    }), zichtbareLayouts.length === 0 && (_jsx("p", { className: "text-muted-foreground text-sm", children: "Er zijn nog geen ontwerpen." }))] })] }))] })] })] }), _jsx(PrinterSetupWizard, { open: wizard, onOpenChange: (v) => {
+                    setWizard(v);
+                    if (!v)
+                        setBewerken(null);
+                }, computerFilter: computer?.naam ?? null, bekendeExterneIds: bekendeExterneIds, bekendeLocaties: bekendeLocaties, bewerken: bewerken, onKlaar: () => {
+                    void reload();
+                    void zoek();
+                } })] }));
+}