@flowselections/layout-maker 1.38.4 → 1.45.9

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

@@ -0,0 +1,10 @@
+/**
+ * Sectiegebaseerde afleverbrief-builder. Deelt het sectiesysteem met de
+ * pakbon-opbouw, maar slaat de indeling onder de eigen sleutel "afleverbrief"
+ * op en kent geen kar-, laag- of fustvarianten: een afleverbrief geldt altijd
+ * voor de hele levering.
+ */
+export declare function AfleverbriefBuilderPage({ layoutId: layoutIdProp }?: {
+    layoutId?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=AfleverbriefBuilderPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AfleverbriefBuilderPage.d.ts","sourceRoot":"","sources":["../../src/components/AfleverbriefBuilderPage.tsx"],"names":[],"mappings":"AA8BA;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BA+K7F"}

package/dist-lib/components/AfleverbriefBuilderPage.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, toast, } from "@flowselections/core";
+import { AlertTriangle, ArrowLeft, CheckCircle2, Loader2, Printer, Save } from "lucide-react";
+import { PakbonSectiesPanel } from "./PakbonSectiesPanel.js";
+import { PdfVoorbeeld } from "./PdfVoorbeeld.js";
+import { FormaatOrientatieBar } from "./FormaatOrientatieBar.js";
+import { FustKolomVolgorde } from "./FustKolomVolgorde.js";
+import { AFLEVERBRIEF_SECTIE_TYPES, leesAfleverbriefConfig, } from "../lib/pakbonBuilder.js";
+import { renderPakbonDocument, voorbeeldPakbonOrder } from "../lib/pakbonHtml.js";
+import { voorbeeldPrint } from "../lib/voorbeeldPrint.js";
+import { haalPrintLogos } from "../lib/logoLibrary.js";
+import { updateLayout, useLayoutDetail } from "../lib/useDocumentData.js";
+import { LayoutPrinterSelect } from "./LayoutPrinterSelect.js";
+import { useLayoutIdParam } from "../lib/useLayoutIdParam.js";
+/**
+ * Sectiegebaseerde afleverbrief-builder. Deelt het sectiesysteem met de
+ * pakbon-opbouw, maar slaat de indeling onder de eigen sleutel "afleverbrief"
+ * op en kent geen kar-, laag- of fustvarianten: een afleverbrief geldt altijd
+ * voor de hele levering.
+ */
+export function AfleverbriefBuilderPage({ layoutId: layoutIdProp } = {}) {
+    const layoutId = useLayoutIdParam(layoutIdProp);
+    const { layout, setLayout, loading } = useLayoutDetail(layoutId ?? "");
+    const [config, setConfig] = useState(null);
+    const [bezig, setBezig] = useState(false);
+    const [printen, setPrinten] = useState(false);
+    const [logos, setLogos] = useState([]);
+    const [controle, setControle] = useState("controleren");
+    useEffect(() => {
+        void haalPrintLogos()
+            .then((l) => setLogos(Array.isArray(l) ? l : []))
+            .catch(() => setLogos([]));
+    }, []);
+    useEffect(() => {
+        if (layout)
+            setConfig(leesAfleverbriefConfig(layout.config));
+    }, [layout?.id]);
+    const breedte = useMemo(() => (layout?.orientatie === "landscape" ? layout?.hoogte_mm : layout?.breedte_mm) ?? 210, [layout]);
+    const hoogte = useMemo(() => (layout?.orientatie === "landscape" ? layout?.breedte_mm : layout?.hoogte_mm) ?? 297, [layout]);
+    const marge = Number(layout?.marge_boven ?? 10);
+    const opslaan = async () => {
+        if (!layout || !config || controle !== "gereed")
+            return;
+        setBezig(true);
+        try {
+            await updateLayout(layout.id, { config: { ...(layout.config ?? {}), afleverbrief: config } });
+            toast.success("Afleverbriefopbouw opgeslagen");
+        }
+        catch {
+            toast.error("Opslaan mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    // Eén bron voor scherm én print: exact dezelfde HTML gaat naar de
+    // server-PDF van het voorbeeld en naar de printopdracht.
+    const voorbeeldHtml = useMemo(() => {
+        if (!config)
+            return "";
+        // Een afleverbrief geldt altijd voor één kar: het voorbeeld toont er dus ook maar één.
+        const basis = voorbeeldPakbonOrder();
+        const order = { ...basis, karren: (basis.karren ?? []).slice(0, 1) };
+        return renderPakbonDocument(config, order, {
+            logos: logos,
+            breedteMm: breedte,
+            hoogteMm: hoogte,
+            margeMm: marge,
+            titel: layout?.naam ?? "Afleverbrief",
+        });
+    }, [config, logos, breedte, hoogte, marge, layout?.naam]);
+    const voorbeeldPrinten = async () => {
+        if (!config || controle !== "gereed")
+            return;
+        setPrinten(true);
+        try {
+            await voorbeeldPrint({
+                ...(layout ?? {}),
+                id: layout?.id ?? layoutId,
+                naam: layout?.naam,
+                documenttype: layout?.documenttype ?? "afleverbrief",
+                papierformaat: layout?.papierformaat,
+            }, voorbeeldHtml);
+        }
+        catch (e) {
+            toast.error(e instanceof Error ? e.message : "Voorbeeld printen mislukt");
+        }
+        finally {
+            setPrinten(false);
+        }
+    };
+    if (!layoutId)
+        return (_jsxs("main", { className: "p-6 text-sm text-muted-foreground", children: ["Kies eerst een layout via ", _jsx(Link, { to: "/layouts-printers", className: "underline", children: "Layouts" }), "."] }));
+    if (loading)
+        return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Layout laden\u2026" });
+    if (!layout || !config)
+        return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Layout niet gevonden." });
+    return (_jsxs("main", { className: "space-y-4 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: "/layouts-printers", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Layouts"] }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold", children: layout.naam }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Afleverbrief per kar \u00B7  ", config.secties.length, " secties"] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutPrinterSelect, { layoutId: layoutId }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void voorbeeldPrinten(), disabled: printen || controle !== "gereed", children: [printen ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-4 w-4" })), "Voorbeeld printen"] }), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { to: "/layouts-printers/blokken/$layoutId", params: { layoutId }, children: "Blokken ontwerpen" }) }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig || controle !== "gereed", children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] })] }), _jsx(FormaatOrientatieBar, { layout: layout, onChange: (patch) => setLayout((l) => (l ? { ...l, ...patch } : l)) }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[400px_1fr]", children: [_jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden lg:sticky lg:top-4", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Secties" }), _jsx(CardDescription, { children: "Voeg blokken toe, wijzig de volgorde en stel elk blok afzonderlijk in." })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(PakbonSectiesPanel, { config: config, onChange: setConfig, beschikbareTypes: AFLEVERBRIEF_SECTIE_TYPES }) })] }), _jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden", children: [_jsxs(CardHeader, { className: "flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Live voorbeeld" }), _jsx(CardDescription, { children: "Voorbeeld van de afleverbrief van \u00E9\u00E9n kar." })] }), _jsxs(Badge, { variant: controle === "afwijking" ? "destructive" : "secondary", children: [controle === "controleren" ? _jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }) : controle === "gereed" ? _jsx(CheckCircle2, { className: "mr-1 h-3 w-3" }) : _jsx(AlertTriangle, { className: "mr-1 h-3 w-3" }), controle === "controleren" ? "Controleren" : controle === "gereed" ? "Afdruk gereed" : "Afwijking gevonden"] })] }), _jsxs(CardContent, { className: "flex min-h-0 flex-1 flex-col overflow-hidden p-0", children: [_jsx(FustKolomVolgorde, { config: config, onChange: setConfig }), _jsx("div", { className: "min-h-0 flex-1 p-4 pt-3", children: _jsx("div", { className: "h-full rounded-md border bg-muted/30 p-2", children: voorbeeldHtml ? (_jsx(PdfVoorbeeld, { html: voorbeeldHtml, breedteMm: breedte, hoogteMm: hoogte, margeMm: marge, onControle: (status) => setControle(status) })) : null }) })] })] })] })] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"BlokOntwerperPage.d.ts","sourceRoot":"","sources":["../../src/components/BlokOntwerperPage.tsx"],"names":[],"mappings":"AAiCA,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BA6LvF"}
+{"version":3,"file":"BlokOntwerperPage.d.ts","sourceRoot":"","sources":["../../src/components/BlokOntwerperPage.tsx"],"names":[],"mappings":"AAkCA,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BAoMvF"}

package/dist-lib/components/BlokOntwerperPage.js

@@ -5,7 +5,7 @@ import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitl
 import { ArrowLeft, Plus, Save } from "lucide-react";
 import { PakbonSectieEditor, PakbonBlokKaderEditor } from "./PakbonSectiesPanel.js";
 import { PakbonSectiePreview } from "./PakbonPreview.js";
-import { SECTIE_REGISTER, leesPakbonConfig, nieuweSectie, sectieDef, } from "../lib/pakbonBuilder.js";
+import { SECTIE_REGISTER, leesAfleverbriefConfig, leesPakbonConfig, nieuweSectie, sectieDef, } from "../lib/pakbonBuilder.js";
 import { updateLayout, useLayoutDetail } from "../lib/useDocumentData.js";
 import { useLayoutIdParam } from "../lib/useLayoutIdParam.js";
 /** Ontwerp elk pakbon-blok afzonderlijk, los van de volledige pagina. */
@@ -20,7 +20,9 @@ export function BlokOntwerperPage({ layoutId: layoutIdProp } = {}) {
     useEffect(() => {
         if (!layout)
             return;
-        const c = leesPakbonConfig(layout.config);
+        const c = layout.documenttype === "afleverbrief" || layout.documenttype === "veilingbrief"
+            ? leesAfleverbriefConfig(layout.config)
+            : leesPakbonConfig(layout.config);
         setConfig(c);
         setActief((huidig) => huidig ?? c.secties[0]?.id ?? null);
     }, [layout?.id]);
@@ -39,7 +41,10 @@ export function BlokOntwerperPage({ layoutId: layoutIdProp } = {}) {
             return;
         setBezig(true);
         try {
-            await updateLayout(layout.id, { config: { ...(layout.config ?? {}), pakbon: config } });
+            const sleutel = layout.documenttype === "afleverbrief" || layout.documenttype === "veilingbrief"
+                ? "afleverbrief"
+                : "pakbon";
+            await updateLayout(layout.id, { config: { ...(layout.config ?? {}), [sleutel]: config } });
             toast.success("Blokontwerp opgeslagen");
         }
         catch {

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

@@ -1 +1 @@
-{"version":3,"file":"ComputersLijst.d.ts","sourceRoot":"","sources":["../../src/components/ComputersLijst.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,YAAY;;;;;EA6C3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,qBAAqB,EACrB,YAAoB,GACrB,EAAE;IACD,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,OAAO,CAAC;IACvB,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,+BAwIA"}
+{"version":3,"file":"ComputersLijst.d.ts","sourceRoot":"","sources":["../../src/components/ComputersLijst.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,YAAY;;;;;EA6C3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,qBAAqB,EACrB,YAAoB,GACrB,EAAE;IACD,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,OAAO,CAAC;IACvB,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,+BA0IA"}

package/dist-lib/components/ComputersLijst.js

@@ -71,5 +71,5 @@ export function ComputersLijst({ computers, loading, fout, onVernieuw, onPrinter
     return (_jsxs("div", { className: alleenDialog ? "" : "space-y-3", children: [!alleenDialog && loading && _jsx("p", { className: "text-muted-foreground text-sm", children: "Laden\u2026" }), !alleenDialog && !loading && fout && (_jsx(Card, { children: _jsxs(CardContent, { className: "space-y-3 py-6", children: [_jsx("p", { className: "font-medium", children: "Geen verbinding" }), _jsx("p", { className: "text-muted-foreground text-sm", children: fout }), _jsxs(Button, { variant: "outline", onClick: onVernieuw, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), " Opnieuw proberen"] })] }) })), !alleenDialog && !loading && !fout && computers.length === 0 && (_jsx(Card, { children: _jsxs(CardContent, { className: "space-y-4 py-8", children: [_jsx(PrintProgrammaUitleg, {}), _jsxs(Button, { onClick: () => onToevoegenOpenChange(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Computer toevoegen"] })] }) })), !alleenDialog && computers.map((c) => (_jsxs("div", { className: "bg-card flex items-center gap-4 rounded-xl border p-4", children: [_jsx("div", { className: "bg-muted rounded-lg p-2.5", children: _jsx(Monitor, { className: "text-muted-foreground h-5 w-5" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate font-medium", children: c.naam }), _jsxs("p", { className: "text-muted-foreground text-sm", children: [c.aantalGevonden, " ", c.aantalGevonden === 1 ? "printer gevonden" : "printers gevonden"] })] }), _jsx("span", { className: `rounded-full px-2.5 py-1 text-xs font-medium ${c.online ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"}`, children: c.online ? "Aan" : "Uit" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onPrintersToevoegen(c.naam), children: "Printers toevoegen" })] }, c.id))), !alleenDialog && computers.length > 0 && _jsx(WerktHetNiet, {}), _jsx(Dialog, { open: toevoegenOpen, onOpenChange: onToevoegenOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Computer toevoegen" }), _jsx(DialogDescription, { children: "Zet het printprogramma klaar op de computer waar de printers aan hangen." })] }), _jsx(PrintProgrammaUitleg, { compact: true }), _jsx("div", { className: "space-y-2 rounded-lg border p-4 text-sm", children: computers.length === 0 ? (_jsxs("p", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " We wachten tot de computer zich meldt\u2026"] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "font-medium", children: nieuw ? `Nieuwe computer gevonden: ${nieuw.naam}` : "Gevonden computers" }), computers.map((c) => (_jsxs("div", { className: "flex items-center gap-3 rounded-md border p-2", children: [_jsx(Monitor, { className: "text-muted-foreground h-4 w-4" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: c.naam }), _jsx("span", { className: "text-muted-foreground text-xs", children: c.online ? "Aan" : "Uit" }), _jsx(Button, { size: "sm", onClick: () => {
                                                     onToevoegenOpenChange(false);
                                                     onPrintersToevoegen(c.naam);
-                                                }, children: "Printers toevoegen" })] }, c.id))), _jsx("p", { className: "text-muted-foreground text-xs", children: "Staat jouw Mac er niet bij? Controleer of het printprogramma draait en of je daar met dezelfde beheerdergegevens bent ingelogd." })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { variant: "outline", onClick: () => onToevoegenOpenChange(false), children: "Sluiten" }) }), _jsx(WerktHetNiet, {})] }) })] }));
+                                                }, children: "Printers toevoegen" })] }, c.id))), _jsx("p", { className: "text-muted-foreground text-xs", children: "Staat jouw Mac er niet bij? Dan kent de printdienst hem nog niet: start het printprogramma op die Mac en log daar in met dezelfde beheerdergegevens (geen eigen PrintNode-account). De naam in de lijst is de macOS-computernaam \u2014 die kan anders heten dan je verwacht." })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { variant: "outline", onClick: () => onToevoegenOpenChange(false), children: "Sluiten" }) }), _jsx(WerktHetNiet, {})] }) })] }));
 }

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

@@ -0,0 +1,11 @@
+import { type PakbonConfig } from "../lib/pakbonBuilder.js";
+/**
+ * Sleepbalk boven het live voorbeeld: elke fustkolom is een chip die je naar
+ * voren, naar het midden of naar achteren kunt slepen. De volgorde van de
+ * chips is exact de kolomvolgorde op de afdruk.
+ */
+export declare function FustKolomVolgorde({ config, onChange, }: {
+    config: PakbonConfig;
+    onChange: (c: PakbonConfig) => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=FustKolomVolgorde.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FustKolomVolgorde.d.ts","sourceRoot":"","sources":["../../src/components/FustKolomVolgorde.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE3E;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CACrC,sCAoEA"}

package/dist-lib/components/FustKolomVolgorde.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { GripVertical } from "lucide-react";
+import { Button } from "@flowselections/core";
+import { FUSTREGEL_LABELS } from "../lib/pakbonBuilder.js";
+/**
+ * Sleepbalk boven het live voorbeeld: elke fustkolom is een chip die je naar
+ * voren, naar het midden of naar achteren kunt slepen. De volgorde van de
+ * chips is exact de kolomvolgorde op de afdruk.
+ */
+export function FustKolomVolgorde({ config, onChange, }) {
+    const [sleep, setSleep] = useState(null);
+    const [over, setOver] = useState(null);
+    const secties = Array.isArray(config?.secties) ? config.secties : [];
+    const sectie = secties.find((s) => s.type === "fustregels" && s.zichtbaar !== false);
+    const velden = Array.isArray(sectie?.opties?.["velden"])
+        ? sectie.opties["velden"]
+        : [];
+    if (!sectie || velden.length < 2)
+        return null;
+    const zetVolgorde = (nieuw) => {
+        onChange({
+            ...config,
+            secties: secties.map((s) => s.id === sectie.id ? { ...s, opties: { ...s.opties, velden: nieuw } } : s),
+        });
+    };
+    const verplaats = (van, naar) => {
+        if (van === naar || van < 0 || naar < 0)
+            return;
+        const nieuw = [...velden];
+        const [item] = nieuw.splice(van, 1);
+        if (item === undefined)
+            return;
+        nieuw.splice(naar, 0, item);
+        zetVolgorde(nieuw);
+    };
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5 border-b px-3 py-2", children: [_jsx("span", { className: "mr-1 text-xs font-medium text-muted-foreground", children: "Fustkolommen:" }), velden.map((veld, i) => (_jsxs(Button, { type: "button", size: "sm", variant: "outline", draggable: true, onDragStart: () => setSleep(i), onDragOver: (e) => {
+                    e.preventDefault();
+                    setOver(i);
+                }, onDrop: (e) => {
+                    e.preventDefault();
+                    if (sleep !== null)
+                        verplaats(sleep, i);
+                    setSleep(null);
+                    setOver(null);
+                }, onDragEnd: () => {
+                    setSleep(null);
+                    setOver(null);
+                }, className: `h-7 cursor-grab gap-1 px-2 text-xs active:cursor-grabbing ${over === i && sleep !== null && sleep !== i
+                    ? "border-primary bg-primary/10"
+                    : ""} ${sleep === i ? "opacity-50" : ""}`, title: `Sleep ${FUSTREGEL_LABELS[veld] ?? veld} naar de gewenste positie`, children: [_jsx(GripVertical, { className: "h-3 w-3 text-muted-foreground" }), FUSTREGEL_LABELS[veld] ?? veld] }, veld)))] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutsPage.d.ts","sourceRoot":"","sources":["../../src/components/LayoutsPage.tsx"],"names":[],"mappings":"AAkEA,wBAAgB,WAAW,CAAC,EAAE,OAAe,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,+BA8mB1E"}
+{"version":3,"file":"LayoutsPage.d.ts","sourceRoot":"","sources":["../../src/components/LayoutsPage.tsx"],"names":[],"mappings":"AA2EA,wBAAgB,WAAW,CAAC,EAAE,OAAe,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,+BAimB1E"}

package/dist-lib/components/LayoutsPage.js

@@ -7,6 +7,14 @@ import { Copy, FileText, Pencil, Plus, Search, Settings2, Trash2 } from "lucide-
 import { dupliceerLayout, maakLayout, updateLayout, useLayouts, usePrinters, zetLayoutPrinter, verwijderLayout, } from "../lib/useDocumentData.js";
 import { DOCUMENT_TYPES, FLORIDAY_LAYOUT_TOELICHTING, PAPIERFORMATEN, documentTypeLabel, isFloridayLayout, } from "../lib/documentTypes.js";
 import { DOCUMENT_PROFIELEN, documentProfiel, primaireProfielen, standaardConfig, } from "../lib/documentProfiles.js";
+/** Elk documenttype krijgt zijn eigen opbouwpagina. */
+function builderRoute(documenttype, layoutId) {
+    if (documenttype === "productiebon")
+        return { to: "/layouts-printers/productiebon/$layoutId", params: { layoutId } };
+    if (documenttype === "afleverbrief" || documenttype === "veilingbrief")
+        return { to: "/layouts-printers/afleverbrief/$layoutId", params: { layoutId } };
+    return { to: "/layouts-printers/pakbon/$layoutId", params: { layoutId } };
+}
 function klantOntwerpLayout(l) {
     if (l.documenttype !== "sticker")
         return false;
@@ -137,9 +145,7 @@ export function LayoutsPage({ ingebed = false } = {}) {
             void reload();
             if (wasKlantOntwerp)
                 return;
-            void navigate(documenttype === "productiebon"
-                ? { to: "/layouts-printers/productiebon/$layoutId", params: { layoutId: id } }
-                : { to: "/layouts-printers/pakbon/$layoutId", params: { layoutId: id } });
+            void navigate(builderRoute(documenttype, id));
         }
         catch {
             toast.error("Aanmaken mislukt");
@@ -161,12 +167,7 @@ export function LayoutsPage({ ingebed = false } = {}) {
                                                             }, children: [_jsx(SelectTrigger, { "aria-label": `Printer voor ${l.naam}`, children: _jsx(SelectValue, { placeholder: "Geen printer" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "geen", children: "Geen printer" }), printers.filter((p) => p.actief).map((printer) => (_jsx(SelectItem, { value: printer.id, children: printer.naam }, printer.id)))] })] }) }), _jsx(TableCell, { children: _jsx(Switch, { checked: l.actief, onCheckedChange: async (v) => {
                                                                 await updateLayout(l.id, { actief: v });
                                                                 void reload();
-                                                            } }) }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [isFloridayLayout(l) ? (_jsx("span", { className: "text-xs text-muted-foreground", children: "Niet aanpasbaar \u2014 komt uit Floriday" })) : klantOntwerpLayout(l) ? (_jsx(Badge, { variant: "outline", children: "Ontwerp van klant" })) : (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(l.documenttype === "productiebon"
-                                                                        ? {
-                                                                            to: "/layouts-printers/productiebon/$layoutId",
-                                                                            params: { layoutId: l.id },
-                                                                        }
-                                                                        : { to: "/layouts-printers/pakbon/$layoutId", params: { layoutId: l.id } }), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), " Ontwerpen"] })), !isFloridayLayout(l) && (_jsx(Button, { variant: "ghost", size: "sm", title: "Naam, documenttype en formaat wijzigen", onClick: () => openBewerken(l), children: _jsx(Settings2, { className: "h-4 w-4" }) })), !isFloridayLayout(l) && (_jsx(Button, { variant: "ghost", size: "sm", title: "Kopie maken", onClick: async () => {
+                                                            } }) }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [isFloridayLayout(l) ? (_jsx("span", { className: "text-xs text-muted-foreground", children: "Niet aanpasbaar \u2014 komt uit Floriday" })) : klantOntwerpLayout(l) ? (_jsx(Badge, { variant: "outline", children: "Ontwerp van klant" })) : (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(builderRoute(l.documenttype, l.id)), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), " Ontwerpen"] })), !isFloridayLayout(l) && (_jsx(Button, { variant: "ghost", size: "sm", title: "Naam, documenttype en formaat wijzigen", onClick: () => openBewerken(l), children: _jsx(Settings2, { className: "h-4 w-4" }) })), !isFloridayLayout(l) && (_jsx(Button, { variant: "ghost", size: "sm", title: "Kopie maken", onClick: async () => {
                                                                         try {
                                                                             await dupliceerLayout(l.id);
                                                                             toast.success("Layout gedupliceerd");

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

@@ -1 +1 @@
-{"version":3,"file":"PakbonBuilderPage.d.ts","sourceRoot":"","sources":["../../src/components/PakbonBuilderPage.tsx"],"names":[],"mappings":"AA+BA,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BAqKvF"}
+{"version":3,"file":"PakbonBuilderPage.d.ts","sourceRoot":"","sources":["../../src/components/PakbonBuilderPage.tsx"],"names":[],"mappings":"AA+BA,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BA8LvF"}

package/dist-lib/components/PakbonBuilderPage.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Link } from "@tanstack/react-router";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
-import { ArrowLeft, Loader2, Printer, Save } from "lucide-react";
+import { AlertTriangle, ArrowLeft, CheckCircle2, Loader2, Printer, Save } from "lucide-react";
 import { PakbonSectiesPanel } from "./PakbonSectiesPanel.js";
-import { PakbonPreview } from "./PakbonPreview.js";
+import { PdfVoorbeeld } from "./PdfVoorbeeld.js";
 import { FormaatOrientatieBar } from "./FormaatOrientatieBar.js";
-import { leesPakbonConfig } from "../lib/pakbonBuilder.js";
+import { leesPakbonConfig, pickMethode } from "../lib/pakbonBuilder.js";
 import { renderPakbonDocument, voorbeeldPakbonOrder } from "../lib/pakbonHtml.js";
 import { voorbeeldPrint } from "../lib/voorbeeldPrint.js";
 import { haalPrintLogos } from "../lib/logoLibrary.js";
@@ -21,14 +21,22 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
     const [bezig, setBezig] = useState(false);
     const [printen, setPrinten] = useState(false);
     const [voorbeeldVariant, setVoorbeeldVariant] = useState("full_cart");
+    const [logos, setLogos] = useState([]);
+    const [controle, setControle] = useState("controleren");
+    useEffect(() => {
+        void haalPrintLogos()
+            .then((l) => setLogos(Array.isArray(l) ? l : []))
+            .catch(() => setLogos([]));
+    }, []);
     useEffect(() => {
         if (layout)
             setConfig(leesPakbonConfig(layout.config));
     }, [layout?.id]);
     const breedte = useMemo(() => (layout?.orientatie === "landscape" ? layout?.hoogte_mm : layout?.breedte_mm) ?? 210, [layout]);
     const hoogte = useMemo(() => (layout?.orientatie === "landscape" ? layout?.breedte_mm : layout?.hoogte_mm) ?? 297, [layout]);
+    const marge = Number(layout?.marge_boven ?? 10);
     const opslaan = async () => {
-        if (!layout || !config)
+        if (!layout || !config || controle !== "gereed")
             return;
         setBezig(true);
         try {
@@ -42,19 +50,29 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
             setBezig(false);
         }
     };
-    const voorbeeldPrinten = async () => {
+    // Eén bron voor scherm én print: exact dezelfde HTML gaat naar de
+    // server-PDF van het voorbeeld en naar de printopdracht.
+    const voorbeeldHtml = useMemo(() => {
         if (!config)
+            return "";
+        const beideVarianten = voorbeeldVariant === "full_cart" &&
+            pickMethode(Array.isArray(config?.secties) ? config.secties : []) === "beide";
+        return renderPakbonDocument(config, voorbeeldPakbonOrder(), {
+            logos: logos,
+            breedteMm: breedte,
+            hoogteMm: hoogte,
+            margeMm: marge,
+            layoutVariant: voorbeeldVariant,
+            voorbeeldBeideVarianten: beideVarianten,
+            titel: layout?.naam ?? "Pakbon",
+        });
+    }, [config, logos, breedte, hoogte, marge, voorbeeldVariant, layout?.naam]);
+    const voorbeeldPrinten = async () => {
+        if (!config || controle !== "gereed")
             return;
         setPrinten(true);
         try {
-            const logos = await haalPrintLogos();
-            const html = renderPakbonDocument(config, voorbeeldPakbonOrder(), {
-                logos,
-                breedteMm: breedte,
-                hoogteMm: hoogte,
-                layoutVariant: voorbeeldVariant,
-                titel: layout?.naam ?? "Pakbon",
-            });
+            const html = voorbeeldHtml;
             await voorbeeldPrint({
                 ...(layout ?? {}),
                 id: layout?.id ?? layoutId,
@@ -76,5 +94,5 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
         return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Layout laden\u2026" });
     if (!layout || !config)
         return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Layout niet gevonden." });
-    return (_jsxs("main", { className: "space-y-4 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: "/layouts-printers", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Layouts"] }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold", children: layout.naam }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Pakbon opbouwen uit secties \u00B7 ", config.secties.length, " secties"] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutPrinterSelect, { layoutId: layoutId }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void voorbeeldPrinten(), disabled: printen, children: [printen ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-4 w-4" })), "Voorbeeld printen"] }), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { to: "/layouts-printers/blokken/$layoutId", params: { layoutId }, children: "Blokken ontwerpen" }) }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig, children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] })] }), _jsx(FormaatOrientatieBar, { layout: layout, onChange: (patch) => setLayout((l) => (l ? { ...l, ...patch } : l)) }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[400px_1fr]", children: [_jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden lg:sticky lg:top-4", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Secties" }), _jsx(CardDescription, { children: "Voeg blokken toe, wijzig de volgorde en stel elk blok afzonderlijk in." })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(PakbonSectiesPanel, { config: config, onChange: setConfig }) })] }), _jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden", children: [_jsxs(CardHeader, { className: "flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Live voorbeeld" }), _jsx(CardDescription, { children: "Bekijk een volle kar of een deelkar met alleen de te verzamelen fusten." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { value: voorbeeldVariant, onValueChange: (value) => setVoorbeeldVariant(value), children: [_jsx(SelectTrigger, { className: "w-48", "aria-label": "Voorbeeldvariant", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "full_cart", children: "Volle kar" }), _jsx(SelectItem, { value: "partial_order", children: "Deelkar" })] })] }), _jsx(Badge, { variant: "secondary", children: "Direct bijgewerkt" })] })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "h-full overflow-auto rounded-md border bg-muted/30 p-2", children: _jsx(PakbonPreview, { config: config, breedteMm: breedte, hoogteMm: hoogte, variant: voorbeeldVariant }) }) })] })] })] }));
+    return (_jsxs("main", { className: "space-y-4 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: "/layouts-printers", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Layouts"] }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold", children: layout.naam }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Pakbon opbouwen uit secties \u00B7 ", config.secties.length, " secties"] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutPrinterSelect, { layoutId: layoutId }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void voorbeeldPrinten(), disabled: printen || controle !== "gereed", children: [printen ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-4 w-4" })), "Voorbeeld printen"] }), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { to: "/layouts-printers/blokken/$layoutId", params: { layoutId }, children: "Blokken ontwerpen" }) }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig || controle !== "gereed", children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] })] }), _jsx(FormaatOrientatieBar, { layout: layout, onChange: (patch) => setLayout((l) => (l ? { ...l, ...patch } : l)) }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[400px_1fr]", children: [_jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden lg:sticky lg:top-4", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Secties" }), _jsx(CardDescription, { children: "Voeg blokken toe, wijzig de volgorde en stel elk blok afzonderlijk in." })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(PakbonSectiesPanel, { config: config, onChange: setConfig }) })] }), _jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden", children: [_jsxs(CardHeader, { className: "flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Live voorbeeld" }), _jsx(CardDescription, { children: "Bekijk een volle kar of een deelkar met alleen de te verzamelen fusten." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { value: voorbeeldVariant, onValueChange: (value) => setVoorbeeldVariant(value), children: [_jsx(SelectTrigger, { className: "w-48", "aria-label": "Voorbeeldvariant", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "full_cart", children: "Volle kar" }), _jsx(SelectItem, { value: "partial_order", children: "Deelkar" })] })] }), _jsxs(Badge, { variant: controle === "afwijking" ? "destructive" : "secondary", children: [controle === "controleren" ? _jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }) : controle === "gereed" ? _jsx(CheckCircle2, { className: "mr-1 h-3 w-3" }) : _jsx(AlertTriangle, { className: "mr-1 h-3 w-3" }), controle === "controleren" ? "Controleren" : controle === "gereed" ? "Afdruk gereed" : "Afwijking gevonden"] })] })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "h-full rounded-md border bg-muted/30 p-2", children: voorbeeldHtml ? (_jsx(PdfVoorbeeld, { html: voorbeeldHtml, breedteMm: breedte, hoogteMm: hoogte, margeMm: marge, onControle: (status) => setControle(status) })) : null }) })] })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PakbonPreview.d.ts","sourceRoot":"","sources":["../../src/components/PakbonPreview.tsx"],"names":[],"mappings":"AAIA,OAAO,EAsBL,KAAK,YAAY,EAEjB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AA6B9B,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAe,EACf,QAAc,EACd,OAAc,GACf,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACtC,+BAiJA;AAiLD,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAmCA"}
+{"version":3,"file":"PakbonPreview.d.ts","sourceRoot":"","sources":["../../src/components/PakbonPreview.tsx"],"names":[],"mappings":"AAKA,OAAO,EAyBL,KAAK,YAAY,EAEjB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AA6B9B,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAe,EACf,QAAc,EACd,OAAc,GACf,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACtC,+BAiJA;AAiLD,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAmCA"}

package/dist-lib/components/PakbonPreview.js

@@ -3,7 +3,8 @@ import { useMemo } from "react";
 import { PaginaDocument } from "./PaginaDocument.js";
 import { useLogos } from "../lib/logoLibrary.js";
 import { code128Bars } from "../lib/code128.js";
-import { DEMO_ORDER, deelkarVoorbeeldOrder, conditieContext, groepeerIdentiekeKarren, groepeerIdentiekeLagen, karBundelTekst, fustVerzamellijst, pickMethode, pakbonLayoutVariant, productVeldBreedtes, sectieOnderdruktVoorVariant, kolomLabel, laagBundelTekst, sectieZichtbaar, sorteerProducten, totalen, vulVeldcodes, } from "../lib/pakbonBuilder.js";
+import { karMetadata } from "../lib/pakbonPresentation.js";
+import { DEMO_ORDER, deelkarVoorbeeldOrder, conditieContext, groepeerIdentiekeKarren, groepeerIdentiekeLagen, karBundelTekst, fustVerzamellijst, fustRegels, FUSTREGEL_LABELS, FUSTREGEL_RECHTS, pickMethode, pakbonLayoutVariant, productVeldBreedtes, sectieOnderdruktVoorVariant, kolomLabel, laagBundelTekst, sectieZichtbaar, sorteerProducten, totalen, vulVeldcodes, } from "../lib/pakbonBuilder.js";
 /** Voorbeeldbarcode: alleen bedoeld om de plek en hoogte te tonen. */
 function BarcodeStrepen({ waarde, hoogteMm = 15 }) {
     const bars = code128Bars(waarde);
@@ -146,7 +147,7 @@ function BundelMelding({ tekst }) {
     return (_jsx("div", { className: "rounded border border-dashed px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide", children: tekst }));
 }
 function KarBlok({ sectie, kar, velden, lagen, lagenSectie, productSectie, fustSectie, omkaderd, aantal = 1, }) {
-    return (_jsxs("div", { className: `space-y-2 ${omkaderd ? "rounded border p-2" : ""}`, children: [_jsx(KarKop, { sectie: sectie, kar: kar, velden: velden, bundelTekst: karBundelTekst(aantal) }), lagen.length > 0 && lagenSectie && (_jsx(LagenView, { sectie: lagenSectie, lagen: lagen, productSectie: productSectie, fustSectie: fustSectie })), fustSectie && optS(fustSectie, "modus", "totaal") === "kar" && (_jsx(FustTabel, { velden: lijst(fustSectie, "velden"), fusten: lagen.flatMap((l) => l.fusten), titel: `Fusten kar ${kar.karnummer}` })), kar.barcode ? (_jsxs("div", { className: "space-y-1 pt-2", children: [_jsx(BarcodeStrepen, { waarde: kar.barcode, hoogteMm: Number(opt(sectie, "barcodeHoogte", 15)) }), _jsx("div", { className: "text-[8px] text-muted-foreground", children: "Voorbeeld \u2014 iedere kar krijgt de eigen barcode van de Engine." })] })) : null] }));
+    return (_jsxs("div", { className: `space-y-2 ${omkaderd ? "rounded border p-2" : ""}`, children: [_jsx(KarKop, { sectie: sectie, kar: kar, velden: velden, bundelTekst: karBundelTekst(aantal) }), kar.barcode ? (_jsxs("div", { className: "space-y-1 py-1", children: [_jsx(BarcodeStrepen, { waarde: kar.barcode, hoogteMm: Number(opt(sectie, "barcodeHoogte", 15)) }), _jsx("div", { className: "text-[8px] text-muted-foreground", children: "Voorbeeld \u2014 iedere kar krijgt de eigen barcode van de Engine." })] })) : null, lagen.length > 0 && lagenSectie && (_jsx(LagenView, { sectie: lagenSectie, lagen: lagen, productSectie: productSectie, fustSectie: fustSectie })), fustSectie && optS(fustSectie, "modus", "totaal") === "kar" && (_jsx(FustTabel, { velden: lijst(fustSectie, "velden"), fusten: lagen.flatMap((l) => l.fusten), titel: `Fusten kar ${kar.karnummer}` }))] }));
 }
 /** Losse weergave van één blok — gebruikt door de blokontwerper. */
 export function PakbonSectiePreview({ sectie, config, breedteMm, }) {
@@ -214,6 +215,21 @@ function SectieView({ sectie, order, zoek, }) {
             const groepen = groepeer(order, groepering, optS(s, "sortering", "eigen"));
             return (_jsx("div", { className: "space-y-2", children: groepen.map((g) => (_jsxs("div", { className: "space-y-1", children: [g.titel !== "—" && _jsx("div", { className: "font-semibold", children: g.titel }), _jsx(RegelWeergave, { producten: g.producten, kolommen: kolommen, weergave: optS(s, "weergave", "tabel"), toonKoppen: opt(s, "toonKoppen", true), zebra: opt(s, "zebra", false), randen: opt(s, "randen", true) })] }, g.titel))) }));
         }
+        case "fustregels": {
+            const velden = lijst(s, "velden").filter((v) => FUSTREGEL_LABELS[v]);
+            const regels = fustRegels(order.karren, {
+                comprimeren: opt(s, "comprimeren", true) !== false,
+                sortering: optS(s, "sortering", "fustsoort"),
+            });
+            if (!velden.length || !regels.length)
+                return null;
+            const randen = opt(s, "randen", true) !== false;
+            const zebra = opt(s, "zebra", false);
+            const cel = randen ? "border-b border-neutral-300 px-1 py-0.5" : "px-1 py-0.5";
+            const totaalFusten = regels.reduce((n, r) => n + r.fust_aantal, 0);
+            const totaalPlanten = regels.reduce((n, r) => n + r.aantal, 0);
+            return (_jsxs("div", { className: "space-y-1", children: [_jsxs("table", { className: "w-full border-collapse", children: [opt(s, "toonKoppen", true) !== false && (_jsx("thead", { children: _jsx("tr", { children: velden.map((v) => (_jsx("th", { className: `${cel} font-semibold ${FUSTREGEL_RECHTS.has(v) ? "text-right" : "text-left"}`, children: FUSTREGEL_LABELS[v] }, v))) }) })), _jsx("tbody", { children: regels.map((r, i) => (_jsx("tr", { className: zebra && i % 2 === 1 ? "bg-neutral-100" : undefined, children: velden.map((v) => (_jsx("td", { className: `${cel} ${FUSTREGEL_RECHTS.has(v) ? "text-right" : "text-left"}`, children: String(r[v] ?? "") }, v))) }, i))) })] }), opt(s, "toonTotaal", true) !== false && (_jsxs("div", { className: "flex justify-end gap-3 font-semibold", children: [_jsxs("span", { children: [totaalFusten, " fusten"] }), _jsxs("span", { children: [totaalPlanten, " planten"] })] }))] }));
+        }
         case "pickmethode":
             if (optS(s, "methode", "kar") === "kar")
                 return null;
@@ -279,17 +295,7 @@ function KarKop({ sectie, kar, velden, bundelTekst = "" }) {
         .replace(/{chauffeur}/g, kar.chauffeur)
         .replace(/{lagen}/g, String(kar.lagen.length))
         .replace(/{producten}/g, String(kar.lagen.reduce((n, l) => n + l.producten.length, 0)));
-    const info = [];
-    if (velden.includes("lagen"))
-        info.push(`${kar.lagen.length} lagen`);
-    if (velden.includes("producten"))
-        info.push(`${kar.lagen.reduce((n, l) => n + l.producten.reduce((m, p) => m + p.aantal, 0), 0)} producten`);
-    if (velden.includes("gewicht"))
-        info.push(kar.gewicht);
-    if (velden.includes("chauffeur"))
-        info.push(kar.chauffeur);
-    if (velden.includes("route"))
-        info.push(kar.route);
+    const info = karMetadata(kar, velden);
     const groot = scheiding === "kop";
     const gekleurd = scheiding === "kleur" || groot;
     const toonNummer = velden.includes("karnummer");
@@ -372,9 +378,10 @@ const FUST_KOLOM_LABELS = {
     locatie: "Locatie",
     fustsoort: "Tray/fust",
     planten_per_fust: "Pl./fust",
+    fust_aantal: "Fusten",
     aantal: "Planten",
 };
-const FUST_RECHTS = new Set(["planten_per_fust", "aantal"]);
+const FUST_RECHTS = new Set(["planten_per_fust", "fust_aantal", "aantal"]);
 /** Verzamellijst met alle te picken fusten per fusttype, incl. producten. */
 function FustVerzamellijst({ order, kop = "Te verzamelen fusten — karindeling zelf bepalen", velden, toonFusthoogte = true, toonTotaal = true, }) {
     const groepen = fustVerzamellijst(order?.karren);

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

@@ -1,8 +1,10 @@
-import { type PakbonConfig, type PakbonSectie, type PickMethode } from "../lib/pakbonBuilder.js";
+import { type PakbonConfig, type PakbonSectie, type PakbonSectieType, type PickMethode } from "../lib/pakbonBuilder.js";
 /** Beheer van de secties waaruit de pakbon is opgebouwd. */
-export declare function PakbonSectiesPanel({ config, onChange, }: {
+export declare function PakbonSectiesPanel({ config, onChange, beschikbareTypes, }: {
     config: PakbonConfig;
     onChange: (c: PakbonConfig) => void;
+    /** Beperkt de keuzelijst met blokken (bijvoorbeeld voor de afleverbrief). */
+    beschikbareTypes?: PakbonSectieType[];
 }): import("react").JSX.Element;
 /** Volledige instellingen van één blok — herbruikt in de blokontwerper. */
 export declare function PakbonSectieEditor({ sectie, onChange, methode, }: {

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

@@ -1 +1 @@
-{"version":3,"file":"PakbonSectiesPanel.d.ts","sourceRoot":"","sources":["../../src/components/PakbonSectiesPanel.tsx"],"names":[],"mappings":"AAmBA,OAAO,EASL,KAAK,YAAY,EAEjB,KAAK,YAAY,EAEjB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAE9B,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CACrC,+BA6KA;AA0TD,2EAA2E;AAC3E,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,OAAe,GAChB,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACjD,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,+BAuHA;AAED,4EAA4E;AAC5E,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;CAClD,+BA4FA"}
+{"version":3,"file":"PakbonSectiesPanel.d.ts","sourceRoot":"","sources":["../../src/components/PakbonSectiesPanel.tsx"],"names":[],"mappings":"AAmBA,OAAO,EASL,KAAK,YAAY,EAEjB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAE9B,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,gBAAgB,GACjB,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IACpC,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACvC,+BAkLA;AA0TD,2EAA2E;AAC3E,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,OAAe,GAChB,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACjD,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,+BAuHA;AAED,4EAA4E;AAC5E,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;CAClD,+BA4FA"}

package/dist-lib/components/PakbonSectiesPanel.js

@@ -7,12 +7,14 @@ import { LogoBibliotheekDialog } from "./LogoBibliotheekDialog.js";
 import { LogoThumbnail } from "./LogosPage.js";
 import { BESCHIKBARE_KOLOMMEN, CONDITIE_VELDEN, SECTIE_REGISTER, nieuweKolom, nieuweSectie, pickMethode, sectieDef, sectieOnderdrukt, } from "../lib/pakbonBuilder.js";
 /** Beheer van de secties waaruit de pakbon is opgebouwd. */
-export function PakbonSectiesPanel({ config, onChange, }) {
+export function PakbonSectiesPanel({ config, onChange, beschikbareTypes, }) {
     const alleSecties = Array.isArray(config?.secties) ? config.secties : [];
     const methode = pickMethode(alleSecties);
+    const toegestaan = (t) => !beschikbareTypes || beschikbareTypes.includes(t);
     const secties = alleSecties.filter((s) => !sectieOnderdrukt(s.type, methode));
     const [open, setOpen] = useState(secties[0]?.id ?? null);
-    const [toevoegen, setToevoegen] = useState("orderregels");
+    const keuzes = SECTIE_REGISTER.filter((d) => !sectieOnderdrukt(d.type, methode) && toegestaan(d.type));
+    const [toevoegen, setToevoegen] = useState(keuzes.find((d) => d.type === "orderregels")?.type ?? keuzes[0]?.type ?? "tekstblok");
     // 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] });
@@ -43,7 +45,7 @@ export function PakbonSectiesPanel({ config, onChange, }) {
                                                 ...(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: () => {
+                                        }), 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: keuzes.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);

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

@@ -1,7 +1,8 @@
 type PdfMapToestemmingBannerProps = {
     alleenActieNodig?: boolean;
     zwevend?: boolean;
+    printplekId?: string;
 };
-export declare function PdfMapToestemmingBanner({ alleenActieNodig, zwevend, }?: PdfMapToestemmingBannerProps): import("react").JSX.Element | null;
+export declare function PdfMapToestemmingBanner({ alleenActieNodig, zwevend, printplekId, }?: PdfMapToestemmingBannerProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=PdfMapToestemmingBanner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PdfMapToestemmingBanner.d.ts","sourceRoot":"","sources":["../../src/components/PdfMapToestemmingBanner.tsx"],"names":[],"mappings":"AAuBA,KAAK,4BAA4B,GAAG;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,EACtC,gBAAwB,EACxB,OAAe,GAChB,GAAE,4BAAiC,sCAwKnC"}
+{"version":3,"file":"PdfMapToestemmingBanner.d.ts","sourceRoot":"","sources":["../../src/components/PdfMapToestemmingBanner.tsx"],"names":[],"mappings":"AA0BA,KAAK,4BAA4B,GAAG;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,EACtC,gBAAwB,EACxB,OAAe,EACf,WAAW,GACZ,GAAE,4BAAiC,sCAsTnC"}