@flowselections/layout-maker 1.3.2

package/dist-lib/components/PakbonSectiesPanel.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Badge, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, } from "@flowselections/core";
+import { ChevronDown, ChevronUp, ImagePlus, Plus, Trash2 } from "lucide-react";
+import { useLogos } from "../lib/logoLibrary";
+import { LogoBibliotheekDialog } from "./LogoBibliotheekDialog";
+import { LogoThumbnail } from "./LogosPage";
+import { BESCHIKBARE_KOLOMMEN, CONDITIE_VELDEN, SECTIE_REGISTER, nieuweKolom, nieuweSectie, pickMethode, sectieDef, sectieOnderdrukt, } from "../lib/pakbonBuilder";
+/** Beheer van de secties waaruit de pakbon is opgebouwd. */
+export function PakbonSectiesPanel({ config, onChange, }) {
+    const alleSecties = Array.isArray(config?.secties) ? config.secties : [];
+    const methode = pickMethode(alleSecties);
+    const secties = alleSecties.filter((s) => !sectieOnderdrukt(s.type, methode));
+    const [open, setOpen] = useState(secties[0]?.id ?? null);
+    const [toevoegen, setToevoegen] = useState("orderregels");
+    // Onderdrukte blokken blijven bewaard in de configuratie, ook al staan ze niet in de lijst.
+    const verborgen = alleSecties.filter((s) => sectieOnderdrukt(s.type, methode));
+    const zet = (nieuw) => onChange({ ...config, secties: [...nieuw, ...verborgen] });
+    const update = (id, patch) => zet(secties.map((s) => (s.id === id ? { ...s, ...patch } : s)));
+    const verplaats = (index, richting) => {
+        const doel = index + richting;
+        if (doel < 0 || doel >= secties.length)
+            return;
+        const kopie = [...secties];
+        [kopie[index], kopie[doel]] = [kopie[doel], kopie[index]];
+        zet(kopie);
+    };
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-2 rounded-md border bg-muted/30 p-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs uppercase text-muted-foreground", children: "Documentlogo" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Dit logo staat bovenaan het document en wordt ook meegeprint." })] }), _jsx(LogoKiezer, { logoId: config.logo?.logoId ?? null, onKies: (logo) => onChange({
+                            ...config,
+                            logo: {
+                                ...(config.logo ?? {}),
+                                logoId: logo?.id ?? null,
+                                naam: logo?.naam ?? null,
+                                hoogte: config.logo?.hoogte ?? 18,
+                                uitlijning: config.logo?.uitlijning ?? "left",
+                            },
+                        }) }), config.logo?.logoId && (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Hoogte (mm)" }), _jsx(Input, { type: "number", value: config.logo?.hoogte ?? 18, onChange: (e) => onChange({
+                                            ...config,
+                                            logo: { ...(config.logo ?? { logoId: null }), hoogte: Number(e.target.value) || 0 },
+                                        }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Uitlijning" }), _jsxs(Select, { value: config.logo?.uitlijning ?? "left", onValueChange: (v) => onChange({
+                                            ...config,
+                                            logo: {
+                                                ...(config.logo ?? { logoId: null }),
+                                                uitlijning: v,
+                                            },
+                                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "left", children: "Links" }), _jsx(SelectItem, { value: "center", children: "Midden" }), _jsx(SelectItem, { value: "right", children: "Rechts" })] })] })] })] }))] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: toevoegen, onValueChange: (v) => setToevoegen(v), children: [_jsx(SelectTrigger, { className: "h-9", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SECTIE_REGISTER.filter((d) => !sectieOnderdrukt(d.type, methode)).map((d) => (_jsx(SelectItem, { value: d.type, children: d.label }, d.type))) })] }), _jsx(Button, { size: "sm", onClick: () => {
+                            const s = nieuweSectie(toevoegen);
+                            zet([...secties, s]);
+                            setOpen(s.id);
+                        }, children: _jsx(Plus, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "space-y-2", children: [secties.map((s, i) => {
+                        const def = sectieDef(s.type);
+                        const uitgeklapt = open === s.id;
+                        return (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5", children: [_jsxs("button", { type: "button", className: "flex-1 text-left text-sm font-medium", onClick: () => setOpen(uitgeklapt ? null : s.id), children: [s.titel, !s.zichtbaar && (_jsx(Badge, { variant: "outline", className: "ml-2", children: "verborgen" })), s.condities.length > 0 && (_jsxs(Badge, { variant: "secondary", className: "ml-2", children: [s.condities.length, " voorwaarde", s.condities.length > 1 ? "n" : ""] }))] }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => verplaats(i, -1), children: _jsx(ChevronUp, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => verplaats(i, 1), children: _jsx(ChevronDown, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => zet(secties.filter((x) => x.id !== s.id)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), uitgeklapt && (_jsx("div", { className: "border-t px-3 py-3", children: _jsx(PakbonSectieEditor, { sectie: s, methode: methode, onChange: (patch) => update(s.id, patch) }) }))] }, s.id));
+                    }), secties.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen secties toegevoegd." }))] })] }));
+}
+function OptieVeld({ def, waarde, onChange, }) {
+    if (def.type === "schakelaar") {
+        return (_jsxs("div", { className: "flex items-center justify-between rounded border px-3 py-2", children: [_jsx("span", { className: "text-sm", children: def.label }), _jsx(Switch, { checked: !!waarde, onCheckedChange: onChange })] }));
+    }
+    if (def.type === "keuze") {
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: def.label }), _jsxs(Select, { value: String(waarde ?? ""), onValueChange: onChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: (def.opties ?? []).map((o) => (_jsx(SelectItem, { value: o.value, children: o.label }, o.value))) })] })] }));
+    }
+    if (def.type === "meerkeuze") {
+        const gekozen = Array.isArray(waarde) ? waarde : [];
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: def.label }), _jsx("div", { className: "space-y-1", children: (def.opties ?? []).map((o) => (_jsxs("div", { className: "flex items-center justify-between rounded border px-3 py-1.5", children: [_jsx("span", { className: "text-sm", children: o.label }), _jsx(Switch, { checked: gekozen.includes(o.value), onCheckedChange: (aan) => onChange(aan ? [...gekozen, o.value] : gekozen.filter((v) => v !== o.value)) })] }, o.value))) })] }));
+    }
+    if (def.type === "getal") {
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: def.label }), _jsx(Input, { type: "number", value: Number(waarde ?? 0), onChange: (e) => onChange(Number(e.target.value)) })] }));
+    }
+    if (def.type === "kleur") {
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: def.label }), _jsx(Input, { type: "color", value: String(waarde ?? "#ffffff"), onChange: (e) => onChange(e.target.value) })] }));
+    }
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: def.label }), _jsx(Input, { value: String(waarde ?? ""), onChange: (e) => onChange(e.target.value) }), def.hint && _jsx("p", { className: "text-xs text-muted-foreground", children: def.hint })] }));
+}
+function KolommenEditor({ kolommen, onChange, }) {
+    const [nieuw, setNieuw] = useState(BESCHIKBARE_KOLOMMEN[0].key);
+    const zet = (i, patch) => onChange(kolommen.map((k, idx) => (idx === i ? { ...k, ...patch } : k)));
+    const verplaats = (i, r) => {
+        const d = i + r;
+        if (d < 0 || d >= kolommen.length)
+            return;
+        const kopie = [...kolommen];
+        [kopie[i], kopie[d]] = [kopie[d], kopie[i]];
+        onChange(kopie);
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-xs uppercase text-muted-foreground", children: "Kolommen" }), kolommen.map((k, i) => (_jsxs("div", { className: "space-y-2 rounded border p-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { className: "h-8 flex-1", value: k.label, onChange: (e) => zet(i, { label: e.target.value }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => verplaats(i, -1), children: _jsx(ChevronUp, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => verplaats(i, 1), children: _jsx(ChevronDown, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => onChange(kolommen.filter((_, idx) => idx !== i)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Breedte %" }), _jsx(Input, { className: "h-8", type: "number", value: k.breedte, onChange: (e) => zet(i, { breedte: Number(e.target.value) }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Uitlijning" }), _jsxs(Select, { value: k.uitlijning, onValueChange: (v) => zet(i, { uitlijning: v }), children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "left", children: "Links" }), _jsx(SelectItem, { value: "center", children: "Midden" }), _jsx(SelectItem, { value: "right", children: "Rechts" })] })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Lettertype" }), _jsxs(Select, { value: k.fontfamilie ?? "Helvetica", onValueChange: (v) => zet(i, { fontfamilie: v }), children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ["Helvetica", "Arial", "Times New Roman", "Courier New", "Verdana"].map((f) => (_jsx(SelectItem, { value: f, children: f }, f))) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Tekstgrootte" }), _jsx(Input, { className: "h-8", type: "number", value: k.fontgrootte ?? 9, onChange: (e) => zet(i, { fontgrootte: Number(e.target.value) }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Kleur" }), _jsx(Input, { className: "h-8", type: "color", value: k.kleur ?? "#111827", onChange: (e) => zet(i, { kleur: e.target.value }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Achtergrond" }), _jsx(Input, { className: "h-8", type: "color", value: k.achtergrond ?? "#ffffff", onChange: (e) => zet(i, { achtergrond: e.target.value }) })] })] }), _jsxs("div", { className: "flex gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 text-xs", children: [_jsx(Switch, { checked: !!k.vet, onCheckedChange: (v) => zet(i, { vet: v }) }), " Vet"] }), _jsxs("label", { className: "flex items-center gap-2 text-xs", children: [_jsx(Switch, { checked: !!k.rand, onCheckedChange: (v) => zet(i, { rand: v }) }), " Rand"] })] })] }, `${k.key}-${i}`))), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: nieuw, onValueChange: setNieuw, children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: BESCHIKBARE_KOLOMMEN.map((k) => (_jsx(SelectItem, { value: k.key, children: k.label }, k.key))) })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => onChange([...kolommen, nieuweKolom(nieuw)]), children: _jsx(Plus, { className: "h-4 w-4" }) })] })] }));
+}
+function CondityEditor({ condities, onChange, }) {
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-xs uppercase text-muted-foreground", children: "Alleen tonen wanneer" }), condities.map((c, i) => (_jsxs("div", { className: "grid grid-cols-[1fr_auto_1fr_auto] items-center gap-1", children: [_jsxs(Select, { value: c.veld, onValueChange: (v) => onChange(condities.map((x, idx) => (idx === i ? { ...x, veld: v } : x))), children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: CONDITIE_VELDEN.map((v) => (_jsx(SelectItem, { value: v.value, children: v.label }, v.value))) })] }), _jsxs(Select, { value: c.operator, onValueChange: (v) => onChange(condities.map((x, idx) => idx === i ? { ...x, operator: v } : x)), children: [_jsx(SelectTrigger, { className: "h-8 w-20", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ["=", "!=", ">", "<", "bevat", "leeg", "niet_leeg"].map((o) => (_jsx(SelectItem, { value: o, children: o }, o))) })] }), _jsx(Input, { className: "h-8", value: c.waarde, onChange: (e) => onChange(condities.map((x, idx) => (idx === i ? { ...x, waarde: e.target.value } : x))) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => onChange(condities.filter((_, idx) => idx !== i)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, i))), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => onChange([...condities, { veld: "aantal_karren", operator: ">", waarde: "1" }]), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Voorwaarde"] })] }));
+}
+/** Volledige instellingen van één blok — herbruikt in de blokontwerper. */
+export function PakbonSectieEditor({ sectie, onChange, methode = "kar", }) {
+    const s = sectie;
+    const def = sectieDef(s.type);
+    const bundelAan = s.type === "karren" && (s.opties?.bundel_identiek ?? true);
+    const aangepasteOpties = def.opties.map((o) => {
+        if (s.type === "karren" && o.key === "velden" && bundelAan) {
+            return {
+                ...o,
+                opties: (o.opties ?? []).filter((x) => x.value !== "karnummer"),
+            };
+        }
+        // Zonder karindeling zijn totalen van karren en lagen niet van toepassing.
+        if (s.type === "totalen" && o.key === "velden" && methode === "fusten") {
+            return {
+                ...o,
+                opties: (o.opties ?? []).filter((x) => !["karren", "lagen"].includes(x.value)),
+            };
+        }
+        return o;
+    });
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: def.omschrijving }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Titel" }), _jsx(Input, { value: s.titel, onChange: (e) => onChange({ titel: e.target.value }) })] }), s.type !== "pickmethode" && (_jsxs("div", { className: "flex items-center justify-between rounded border px-3 py-2", children: [_jsx("span", { className: "text-sm", children: "Sectie tonen" }), _jsx(Switch, { checked: s.zichtbaar, onCheckedChange: (v) => onChange({ zichtbaar: v }) })] })), s.type === "logo" && (_jsx(LogoKiezer, { logoId: typeof s.opties?.logoId === "string" ? s.opties.logoId : null, onKies: (logo) => onChange({
+                    opties: {
+                        ...s.opties,
+                        logoId: logo?.id ?? null,
+                        logoNaam: logo?.naam ?? null,
+                    },
+                }) })), aangepasteOpties.map((o) => {
+                const isVelden = o.key === "velden";
+                const basisWaarde = s.opties?.[o.key] ?? o.standaard;
+                const waarde = isVelden && bundelAan
+                    ? (Array.isArray(basisWaarde) ? basisWaarde : []).filter((v) => v !== "karnummer")
+                    : basisWaarde;
+                return (_jsx(OptieVeld, { def: o, waarde: waarde, onChange: (v) => {
+                        if (o.key === "bundel_identiek" && v === true) {
+                            const huidigeVelden = Array.isArray(s.opties?.velden)
+                                ? s.opties.velden
+                                : [];
+                            onChange({
+                                opties: {
+                                    ...s.opties,
+                                    bundel_identiek: true,
+                                    velden: huidigeVelden.filter((x) => x !== "karnummer"),
+                                },
+                            });
+                        }
+                        else {
+                            onChange({ opties: { ...s.opties, [o.key]: v } });
+                        }
+                    } }, o.key));
+            }), def.kolommen && (_jsx(KolommenEditor, { kolommen: Array.isArray(s.kolommen) ? s.kolommen : [], onChange: (k) => onChange({ kolommen: k }) })), _jsx(Separator, {}), _jsx(CondityEditor, { condities: s.condities ?? [], onChange: (c) => onChange({ condities: c }) })] }));
+}
+/** Kaderinstellingen (breedte, uitlijning, marges, opmaak) van één blok. */
+export function PakbonBlokKaderEditor({ sectie, onChange, }) {
+    const o = sectie.opties ?? {};
+    const zet = (key, waarde) => onChange({ opties: { ...o, [key]: waarde } });
+    const num = (key, fallback) => Number(o[key] ?? fallback);
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Breedte %" }), _jsx(Input, { className: "h-8", type: "number", value: num("blok_breedte", 100), onChange: (e) => zet("blok_breedte", Number(e.target.value)) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Uitlijning blok" }), _jsxs(Select, { value: String(o.blok_uitlijning ?? "left"), onValueChange: (v) => zet("blok_uitlijning", v), children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "left", children: "Links" }), _jsx(SelectItem, { value: "center", children: "Midden" }), _jsx(SelectItem, { value: "right", children: "Rechts" })] })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Marge boven/onder (mm)" }), _jsx(Input, { className: "h-8", type: "number", value: num("blok_marge", 0), onChange: (e) => zet("blok_marge", Number(e.target.value)) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Binnenruimte (mm)" }), _jsx(Input, { className: "h-8", type: "number", value: num("blok_padding", 0), onChange: (e) => zet("blok_padding", Number(e.target.value)) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Achtergrond" }), _jsx(Input, { className: "h-8", type: "color", value: String(o.blok_achtergrond ?? "#ffffff"), onChange: (e) => zet("blok_achtergrond", e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Randkleur" }), _jsx(Input, { className: "h-8", type: "color", value: String(o.blok_randkleur ?? "#e5e7eb"), onChange: (e) => zet("blok_randkleur", e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Hoekafronding (mm)" }), _jsx(Input, { className: "h-8", type: "number", value: num("blok_radius", 0), onChange: (e) => zet("blok_radius", Number(e.target.value)) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Tekstschaal %" }), _jsx(Input, { className: "h-8", type: "number", value: num("blok_tekstschaal", 100), onChange: (e) => zet("blok_tekstschaal", Number(e.target.value)) })] }), _jsxs("div", { className: "col-span-2 flex items-center justify-between rounded border px-3 py-2", children: [_jsx("span", { className: "text-sm", children: "Rand om blok" }), _jsx(Switch, { checked: !!o.blok_rand, onCheckedChange: (v) => zet("blok_rand", v) })] })] }));
+}
+/** Kiest een logo uit de centrale Logo Bibliotheek voor een logo-sectie. */
+function LogoKiezer({ logoId, onKies, }) {
+    const { logos } = useLogos();
+    const [open, setOpen] = useState(false);
+    const logo = logos.find((l) => l.id === logoId) ?? null;
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Logo" }), _jsxs("div", { className: "flex items-center gap-2 rounded border px-3 py-2", children: [logo ? (_jsx(LogoThumbnail, { logo: logo })) : (_jsx("div", { className: "flex h-12 w-16 items-center justify-center rounded border border-dashed", children: _jsx(ImagePlus, { className: "h-4 w-4 text-muted-foreground" }) })), _jsx("div", { className: "flex-1 truncate text-sm", children: logo ? logo.naam : _jsx("span", { className: "text-muted-foreground", children: "Geen logo gekozen" }) }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => setOpen(true), children: "Kiezen" }), logo && (_jsx(Button, { size: "icon", variant: "ghost", className: "h-8 w-8", onClick: () => onKies(null), children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }), _jsx(LogoBibliotheekDialog, { open: open, onOpenChange: setOpen, onKies: (l) => onKies(l) })] }));
+}

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+/**
+ * Schaalt het voorbeelddocument zo dat het volledig binnen het beschikbare
+ * kader past — zonder scrollbalken.
+ */
+export declare function PreviewFit({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PreviewFit.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewFit.d.ts","sourceRoot":"","sources":["../../src/components/PreviewFit.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAErF;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAwC/D"}

package/dist-lib/components/PreviewFit.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+/**
+ * Schaalt het voorbeelddocument zo dat het volledig binnen het beschikbare
+ * kader past — zonder scrollbalken.
+ */
+export function PreviewFit({ children }) {
+    const buiten = useRef(null);
+    const binnen = useRef(null);
+    const [schaal, setSchaal] = useState(1);
+    const meet = () => {
+        const b = buiten.current;
+        const i = binnen.current;
+        if (!b || !i)
+            return;
+        const bw = b.clientWidth;
+        const bh = b.clientHeight;
+        const iw = i.scrollWidth;
+        const ih = i.scrollHeight;
+        if (!iw || !ih || !bw || !bh)
+            return;
+        const s = Math.min(bw / iw, bh / ih, 1);
+        setSchaal(s > 0 ? s : 1);
+    };
+    useLayoutEffect(meet);
+    useEffect(() => {
+        const ro = new ResizeObserver(() => meet());
+        if (buiten.current)
+            ro.observe(buiten.current);
+        if (binnen.current)
+            ro.observe(binnen.current);
+        return () => ro.disconnect();
+    }, []);
+    return (_jsx("div", { ref: buiten, className: "flex h-full w-full items-start justify-center overflow-hidden", children: _jsx("div", { ref: binnen, style: {
+                transform: `scale(${schaal})`,
+                transformOrigin: "top center",
+            }, children: children }) }));
+}

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

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

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

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

package/dist-lib/components/PrintQueuePage.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, 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 { RefreshCw, RotateCcw, Search, XCircle } from "lucide-react";
+import { maakPrintJob, updateJobStatus, useLayouts, usePrinters, usePrintJobs } from "../lib/useDocumentData";
+import { documentTypeLabel } from "../lib/documentTypes";
+const STATUS_VARIANT = {
+    wachtend: "outline",
+    bezig: "secondary",
+    voltooid: "default",
+    mislukt: "destructive",
+    geannuleerd: "outline",
+};
+export function PrintQueuePage() {
+    const { jobs, loading, reload } = usePrintJobs();
+    const { printers } = usePrinters();
+    const { layouts } = useLayouts();
+    const [zoek, setZoek] = useState("");
+    const [status, setStatus] = useState("alle");
+    const printerNaam = useMemo(() => new Map(printers.map((p) => [p.id, p.naam])), [printers]);
+    const layoutNaam = useMemo(() => new Map(layouts.map((l) => [l.id, l.naam])), [layouts]);
+    const gefilterd = jobs.filter((j) => {
+        const q = zoek.trim().toLowerCase();
+        if (q && !`${j.documentnaam ?? ""} ${j.gebruiker_naam ?? ""}`.toLowerCase().includes(q))
+            return false;
+        if (status !== "alle" && j.status !== status)
+            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]);
+    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: "Printwachtrij" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Volg printopdrachten, herstart mislukte prints en print documenten opnieuw." })] }), _jsxs(Button, { variant: "outline", onClick: () => reload(), children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), " Vernieuwen"] })] }), _jsx("div", { className: "grid gap-4 md:grid-cols-4", children: ["wachtend", "bezig", "voltooid", "mislukt"].map((s) => (_jsx(Card, { children: _jsxs(CardHeader, { className: "pb-2", children: [_jsx(CardDescription, { className: "capitalize", children: s }), _jsx(CardTitle, { className: "text-2xl", children: tellingen[s] ?? 0 })] }) }, s))) }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Opdrachten" }), _jsx(CardDescription, { children: loading ? "Laden…" : `${gefilterd.length} opdrachten` })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-4", children: [_jsxs("div", { className: "relative md:col-span-2", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { className: "pl-9", placeholder: "Zoek op document of gebruiker", value: zoek, onChange: (e) => setZoek(e.target.value) })] }), _jsxs(Select, { value: status, onValueChange: setStatus, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle statussen" }), ["wachtend", "bezig", "voltooid", "mislukt", "geannuleerd"].map((s) => (_jsx(SelectItem, { value: s, children: s }, s)))] })] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Document" }), _jsx(TableHead, { children: "Layout" }), _jsx(TableHead, { children: "Printer" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Tijdstip" }), _jsx(TableHead, { className: "text-right", children: "Acties" })] }) }), _jsxs(TableBody, { children: [gefilterd.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, className: "py-10 text-center text-sm text-muted-foreground", children: "Geen printopdrachten." }) })), gefilterd.map((j) => (_jsxs(TableRow, { children: [_jsxs(TableCell, { children: [_jsx("span", { className: "font-medium", children: j.documentnaam ?? documentTypeLabel(j.documenttype) }), j.is_herprint && (_jsx(Badge, { variant: "outline", className: "ml-2", children: "herprint" })), j.foutmelding && (_jsx("span", { className: "block text-xs text-destructive", children: j.foutmelding }))] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: j.layout_id ? layoutNaam.get(j.layout_id) ?? "—" : "—" }), _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;
+                                                                        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,
+                                                                            });
+                                                                            toast.success("Opnieuw in de wachtrij gezet");
+                                                                            void reload();
+                                                                        }
+                                                                        catch {
+                                                                            toast.error("Herprint 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 () => {
+                                                                        await updateJobStatus(j.id, "geannuleerd");
+                                                                        toast.success("Opdracht geannuleerd");
+                                                                        void reload();
+                                                                    }, children: _jsx(XCircle, { className: "h-4 w-4" }) }))] }) })] }, j.id)))] })] })] })] })] }));
+}

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

@@ -0,0 +1,6 @@
+export declare function PrinterSetupWizard({ open, onOpenChange, onKlaar, }: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    onKlaar?: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PrinterSetupWizard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrinterSetupWizard.d.ts","sourceRoot":"","sources":["../../src/components/PrinterSetupWizard.tsx"],"names":[],"mappings":"AA6DA,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,+BAuNA"}

package/dist-lib/components/PrinterSetupWizard.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/PrinterSetupWizard.tsx — eenvoudige setupwizard voor printers
+// ============================================================================
+import { useEffect, 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 { 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. */
+function instellingenVoor(gebruik) {
+    return gebruik === "etiket"
+        ? { soort: "labelprinter", papierformaat: "label" }
+        : { soort: "laserprinter", papierformaat: "A4" };
+}
+function Stappenbalk({ stap }) {
+    return (_jsx("div", { className: "flex items-center gap-2", children: STAPPEN.map((s, i) => (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsx("div", { className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-medium ${i < 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))) }));
+}
+export function PrinterSetupWizard({ open, onOpenChange, onKlaar, }) {
+    const [stap, setStap] = useState(0);
+    const [bezig, setBezig] = useState(false);
+    const [printernaam, setPrinternaam] = useState("");
+    const [systeemnaam, setSysteemnaam] = 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({});
+    };
+    useEffect(() => {
+        if (!open)
+            resetAlles();
+    }, [open]);
+    const printerOpslaan = async () => {
+        const naam = printernaam.trim() || systeemnaam.trim();
+        if (!naam) {
+            toast.error("Geef de printer een naam");
+            return;
+        }
+        setBezig(true);
+        try {
+            const { data, error } = await supabase
+                .from("printers")
+                .insert({
+                naam,
+                actief: true,
+                systeemnaam: systeemnaam.trim() || naam,
+                ...instellingenVoor(gebruik),
+            })
+                .select("id")
+                .single();
+            if (error)
+                throw error;
+            setPrinterId(data?.id ?? null);
+            setStap(1);
+            onKlaar?.();
+        }
+        catch {
+            toast.error("Opslaan mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    const koppelingenOpslaan = async () => {
+        if (!printerId)
+            return;
+        setBezig(true);
+        try {
+            for (const [documenttype, formaatCode] of Object.entries(keuzes)) {
+                await zetFormaatPrinter(documenttype, formaatCode, printerId);
+            }
+            setStap(2);
+        }
+        catch {
+            toast.error("Opslaan van de documentkeuzes mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    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>`,
+        });
+    };
+    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" })] })] }))] }) }));
+}

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

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

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

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

package/dist-lib/components/PrintersPage.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, toast, } 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 { PrinterSetupWizard } from "./PrinterSetupWizard";
+export function PrintersPage() {
+    const { printers, koppelingen, loading, reload } = usePrinters();
+    const { layouts } = useLayouts();
+    const [wizard, setWizard] = useState(false);
+    const [gekozenPrinter, setGekozenPrinter] = useState(null);
+    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 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() })] }));
+}

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

@@ -0,0 +1,7 @@
+import { type ProductiebonConfig } from "../lib/productiebonBuilder";
+/** Beheer van de blokken waaruit de productiebon is opgebouwd. */
+export declare function ProductiebonBlokkenPanel({ config, onChange, }: {
+    config: ProductiebonConfig;
+    onChange: (c: ProductiebonConfig) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ProductiebonBlokkenPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductiebonBlokkenPanel.d.ts","sourceRoot":"","sources":["../../src/components/ProductiebonBlokkenPanel.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAaL,KAAK,kBAAkB,EAGxB,MAAM,4BAA4B,CAAC;AAEpC,kEAAkE;AAClE,wBAAgB,wBAAwB,CAAC,EACvC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,kBAAkB,CAAC;IAC3B,QAAQ,EAAE,CAAC,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC3C,+BAkGA"}