@flowselections/layout-maker 1.32.0 → 1.38.4

package/dist-lib/components/PakbonBuilderPage.js

@@ -1,7 +1,7 @@
 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 { 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 { PakbonSectiesPanel } from "./PakbonSectiesPanel.js";
 import { PakbonPreview } from "./PakbonPreview.js";
@@ -11,6 +11,7 @@ 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 pakbon-builder met live voorbeeld op echte ordergegevens. */
 export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
@@ -19,6 +20,7 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
     const [config, setConfig] = useState(null);
     const [bezig, setBezig] = useState(false);
     const [printen, setPrinten] = useState(false);
+    const [voorbeeldVariant, setVoorbeeldVariant] = useState("full_cart");
     useEffect(() => {
         if (layout)
             setConfig(leesPakbonConfig(layout.config));
@@ -50,9 +52,11 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
                 logos,
                 breedteMm: breedte,
                 hoogteMm: hoogte,
+                layoutVariant: voorbeeldVariant,
                 titel: layout?.naam ?? "Pakbon",
             });
             await voorbeeldPrint({
+                ...(layout ?? {}),
                 id: layout?.id ?? layoutId,
                 naam: layout?.naam,
                 documenttype: layout?.documenttype ?? "pakbon",
@@ -72,5 +76,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 gap-2", children: [_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: "Voorbeeldorder met 2 karren, 3 lagen en fusten." })] }), _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 }) }) })] })] })] }));
+    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 }) }) })] })] })] }));
 }

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

@@ -1,8 +1,10 @@
-import { type PakbonConfig, type PakbonSectie } from "../lib/pakbonBuilder.js";
-export declare function PakbonPreview({ config, breedteMm, hoogteMm, }: {
+import { type PakbonConfig, type PakbonSectie, type PakbonLayoutVariant } from "../lib/pakbonBuilder.js";
+export declare function PakbonPreview({ config, breedteMm, hoogteMm, variant, }: {
     config: PakbonConfig;
     breedteMm?: number;
     hoogteMm?: number;
+    /** Alleen voor het voorbeeld; echte opdrachten krijgen de variant van de Engine. */
+    variant?: PakbonLayoutVariant | null;
 }): import("react").JSX.Element;
 /** Losse weergave van één blok — gebruikt door de blokontwerper. */
 export declare function PakbonSectiePreview({ sectie, config, breedteMm, }: {

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

@@ -1 +1 @@
-{"version":3,"file":"PakbonPreview.d.ts","sourceRoot":"","sources":["../../src/components/PakbonPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAoBL,KAAK,YAAY,EAEjB,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAS9B,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAe,EACf,QAAc,GACf,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,+BAgFA;AAsKD,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":"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"}

package/dist-lib/components/PakbonPreview.js

@@ -2,14 +2,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { PaginaDocument } from "./PaginaDocument.js";
 import { useLogos } from "../lib/logoLibrary.js";
-import { DEMO_ORDER, conditieContext, groepeerIdentiekeKarren, groepeerIdentiekeLagen, karBundelTekst, fustVerzamellijst, pickMethode, productVeldBreedtes, sectieOnderdrukt, kolomLabel, laagBundelTekst, sectieZichtbaar, sorteerProducten, totalen, vulVeldcodes, } from "../lib/pakbonBuilder.js";
-export function PakbonPreview({ config, breedteMm = 210, hoogteMm = 297, }) {
-    const order = DEMO_ORDER;
+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";
+/** Voorbeeldbarcode: alleen bedoeld om de plek en hoogte te tonen. */
+function BarcodeStrepen({ waarde, hoogteMm = 15 }) {
+    const bars = code128Bars(waarde);
+    if (!bars)
+        return null;
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "flex w-48 bg-white", style: { height: `${hoogteMm}mm` }, children: bars.split("").map((bar, i) => (_jsx("span", { className: `block h-full ${bar === "1" ? "bg-foreground" : "bg-transparent"}`, style: { flex: `0 0 ${100 / bars.length}%` } }, i))) }), _jsx("div", { className: "text-[9px]", children: waarde })] }));
+}
+export function PakbonPreview({ config, breedteMm = 210, hoogteMm = 297, variant = null, }) {
+    // De deelkarweergave gebruikt bewust een beperkte demo-order. Daardoor zie
+    // je in het voorbeeld alleen de fusten die voor deze deelkar verzameld
+    // moeten worden, nooit een misleidende volledige karindeling.
+    const order = variant === "partial_order" ? deelkarVoorbeeldOrder() : DEMO_ORDER;
     const ctx = conditieContext(order);
     const alleSecties = Array.isArray(config?.secties) ? config.secties : [];
     const methode = pickMethode(alleSecties);
-    const secties = alleSecties.filter((s) => sectieZichtbaar(s, ctx) && !sectieOnderdrukt(s.type, methode));
+    const actieveVariant = pakbonLayoutVariant(variant);
+    const secties = alleSecties.filter((s) => sectieZichtbaar(s, ctx) && !sectieOnderdruktVoorVariant(s.type, methode, actieveVariant));
     const zoek = (type) => secties.find((s) => s.type === type);
+    const pickSectie = alleSecties.find((s) => s.type === "pickmethode");
+    const barcodeAan = !alleSecties.some((s) => s.type === "barcode") &&
+        (pickSectie ? opt(pickSectie, "toonBarcode", true) !== false : true);
+    const barcodeHoogte = pickSectie ? Number(opt(pickSectie, "barcodeHoogte", 15)) : 15;
+    const heeftKarBarcodes = secties.some((s) => s.type === "karren") &&
+        order.karren.some((kar) => Boolean(String(kar.barcode ?? "").trim()));
+    const paginaLabel = actieveVariant === "partial_order" ? "Deelkar" : "Hele kar";
     const segmenten = [];
     if (config?.logo?.logoId) {
         segmenten.push({
@@ -28,23 +47,47 @@ export function PakbonPreview({ config, breedteMm = 210, hoogteMm = 297, }) {
         if (s.type === "karren") {
             segmenten.push(...karSegmenten(s, order, zoek));
         }
+        else if (s.type === "barcode" && heeftKarBarcodes) {
+            // De barcode wordt binnen ieder afzonderlijk karblok getoond.
+        }
         else if (s.type === "totalen" && (totalenElkePagina || toonPaginanummer)) {
             // wordt als voettekst onder elke pagina getoond
         }
         else {
             segmenten.push({
                 key: s.id,
+                pageLabel: paginaLabel,
                 node: (_jsx(BlokFrame, { sectie: s, children: _jsx(SectieView, { sectie: s, order: order, zoek: zoek }) })),
             });
         }
     }
+    if (barcodeAan && !heeftKarBarcodes) {
+        segmenten.push({
+            key: "engine-barcode",
+            pageLabel: paginaLabel,
+            node: (_jsxs("div", { className: "space-y-1 pt-2", children: [_jsx(BarcodeStrepen, { waarde: "VOORBEELD-BARCODE", hoogteMm: barcodeHoogte }), _jsx("div", { className: "text-[8px] text-muted-foreground", children: "Voorbeeld \u2014 de echte barcode komt uit de opdracht van de Engine." })] })),
+        });
+    }
+    // Het volle-karvoorbeeld is bewust een complete serie: vier hele karren en
+    // als vijfde pagina één deelkar zonder karindeling. Zo is het verschil in
+    // dezelfde voorbeeldreeks direct zichtbaar.
+    if (actieveVariant === "full_cart" && methode === "beide" && pickSectie) {
+        const deelOrder = deelkarVoorbeeldOrder();
+        segmenten.push({
+            key: "deelkar-voorbeeldpagina",
+            breakBefore: true,
+            pageLabel: "Deelkar",
+            node: (_jsxs("div", { className: "space-y-3", children: [_jsx(BlokFrame, { sectie: pickSectie, children: _jsx(SectieView, { sectie: pickSectie, order: deelOrder, zoek: zoek }) }), _jsxs("div", { className: "space-y-1 pt-2", children: [_jsx(BarcodeStrepen, { waarde: "VOORBEELD-DEELKAR", hoogteMm: barcodeHoogte }), _jsx("div", { className: "text-[8px] text-muted-foreground", children: "Voorbeeld \u2014 de echte barcode komt uit de opdracht van de Engine." })] })] })),
+        });
+    }
     const voet = totalenSectie && (totalenElkePagina || toonPaginanummer)
         ? (pagina, totaalPaginas) => (_jsxs("div", { className: "space-y-1", children: [totalenElkePagina && (_jsx(BlokFrame, { sectie: totalenSectie, children: _jsx(SectieView, { sectie: totalenSectie, order: order, zoek: zoek }) })), toonPaginanummer && (_jsxs("div", { className: "text-right text-[9px] text-neutral-500", children: ["Pagina ", pagina, " van ", totaalPaginas] }))] }))
         : undefined;
-    return (_jsx(PaginaDocument, { breedteMm: breedteMm, hoogteMm: hoogteMm, leeg: "Nog geen zichtbare secties.", voet: voet, items: segmenten.map((seg) => ({
+    return (_jsx(PaginaDocument, { breedteMm: breedteMm, hoogteMm: hoogteMm, leeg: "Nog geen zichtbare secties.", voet: voet, kop: (label) => (_jsx("div", { className: "mb-3 border-y-2 border-neutral-900 py-2 text-center text-base font-bold uppercase", children: label ?? paginaLabel })), items: segmenten.map((seg) => ({
             id: seg.key,
             node: seg.node,
             breakBefore: seg.breakBefore,
+            pageLabel: seg.pageLabel ?? paginaLabel,
         })) }));
 }
 /** Bouwt de segmenten voor de karrensectie, inclusief pagina-afbrekingen. */
@@ -68,6 +111,7 @@ function karSegmenten(s, order, zoek) {
         return [
             {
                 key: s.id,
+                pageLabel: "Hele kar",
                 node: wrap(_jsx("div", { className: "grid grid-cols-2 gap-3", children: karGroepen.map((g) => (_jsx(KarBlok, { sectie: s, kar: g.kar, aantal: g.aantal, velden: velden, lagen: g.kar.lagen, lagenSectie: lagenSectie, productSectie: productSectie, fustSectie: fustSectie, omkaderd: false }, g.kar.karnummer))) })),
             },
         ];
@@ -82,6 +126,7 @@ function karSegmenten(s, order, zoek) {
                 segmenten.push({
                     key: `${s.id}-${kar.karnummer}-${lg.laag.laagnummer}`,
                     breakBefore: i > 0 || j > 0,
+                    pageLabel: "Hele kar",
                     node: wrap(_jsx(KarBlok, { sectie: s, kar: kar, aantal: groep.aantal, velden: velden, lagen: [lg.laag], lagenSectie: lagenSectie, productSectie: productSectie, fustSectie: fustSectie, omkaderd: modus === "blok" || modus === "passend" })),
                 });
             });
@@ -90,6 +135,7 @@ function karSegmenten(s, order, zoek) {
         segmenten.push({
             key: `${s.id}-${kar.karnummer}`,
             breakBefore: i > 0 && nieuwePaginaPerKar,
+            pageLabel: "Hele kar",
             node: wrap(_jsxs("div", { className: "space-y-2", children: [i > 0 && !nieuwePaginaPerKar && _jsx(Scheiding, { modus: scheiding }), _jsx(KarBlok, { sectie: s, kar: kar, aantal: groep.aantal, velden: velden, lagen: lagenVanKar, lagenSectie: lagenSectie, productSectie: productSectie, fustSectie: fustSectie, omkaderd: modus === "blok" || modus === "passend" })] })),
         });
     });
@@ -100,7 +146,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}` }))] }));
+    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] }));
 }
 /** Losse weergave van één blok — gebruikt door de blokontwerper. */
 export function PakbonSectiePreview({ sectie, config, breedteMm, }) {
@@ -169,7 +215,7 @@ function SectieView({ sectie, order, zoek, }) {
             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 "pickmethode":
-            if (optS(s, "methode", "kar") !== "fusten")
+            if (optS(s, "methode", "kar") === "kar")
                 return null;
             return (_jsx(FustVerzamellijst, { order: order, kop: String(s.opties?.["kop"] ?? "Te verzamelen fusten — karindeling zelf bepalen"), velden: lijst(s, "velden"), toonFusthoogte: opt(s, "toonFusthoogte", true) !== false, toonTotaal: opt(s, "toonTotaal", true) !== false }));
         case "karren":
@@ -199,10 +245,7 @@ function SectieView({ sectie, order, zoek, }) {
         case "qrcode":
             return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "flex items-center justify-center border border-dashed text-muted-foreground", style: { width: `${opt(s, "grootte", 25)}mm`, height: `${opt(s, "grootte", 25)}mm` }, children: "QR" }), _jsx("div", { className: "text-[8px] text-muted-foreground", children: vulVeldcodes(String(opt(s, "waarde", "")), order) })] }));
         case "barcode":
-            return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "w-48", style: {
-                            height: `${opt(s, "hoogte", 15)}mm`,
-                            backgroundImage: "repeating-linear-gradient(to right, currentColor 0 2px, transparent 2px 5px)",
-                        } }), _jsx("div", { children: vulVeldcodes(String(opt(s, "waarde", "")), order) })] }));
+            return (_jsxs("div", { className: "space-y-1", children: [_jsx(BarcodeStrepen, { waarde: "VOORBEELD-BARCODE", hoogteMm: Number(opt(s, "hoogte", 15)) }), _jsx("div", { className: "text-[8px] text-muted-foreground", children: "Voorbeeld \u2014 de echte barcode komt uitsluitend uit de Engine-opdracht." })] }));
         case "afbeelding": {
             const url = String(opt(s, "url", ""));
             return url ? (_jsx("img", { src: url, alt: s.titel, style: { height: `${opt(s, "hoogte", 25)}mm` } })) : (_jsx("div", { className: "flex items-center justify-center rounded border border-dashed text-muted-foreground", style: { height: `${opt(s, "hoogte", 25)}mm` }, children: "Afbeelding" }));
@@ -256,7 +299,7 @@ function KarKop({ sectie, kar, velden, bundelTekst = "" }) {
         !velden.includes("barcode") &&
         !velden.includes("qrcode"))
         return null;
-    return (_jsxs("div", { className: `flex items-center justify-between rounded px-2 py-1 ${groot ? "text-[13px] font-bold" : "font-semibold"}`, style: gekleurd ? { background: String(opt(sectie, "kleur", "#e8eef7")) } : undefined, children: [_jsxs("span", { className: "flex items-center gap-2", children: [toonNummer && _jsx("span", { children: tekst }), bundelTekst && _jsx(BundelMelding, { tekst: bundelTekst })] }), _jsxs("span", { className: "flex gap-3 text-[9px] font-normal", children: [info.map((t) => (_jsx("span", { children: t }, t))), velden.includes("barcode") && _jsxs("span", { children: ["\u25AE\u25AF\u25AE\u25AF\u25AE ", kar.karnummer] }), velden.includes("qrcode") && _jsx("span", { children: "[QR]" })] })] }));
+    return (_jsxs("div", { className: `flex items-center justify-between rounded px-2 py-1 ${groot ? "text-[13px] font-bold" : "font-semibold"}`, style: gekleurd ? { background: String(opt(sectie, "kleur", "#e8eef7")) } : undefined, children: [_jsxs("span", { className: "flex items-center gap-2", children: [toonNummer && _jsx("span", { children: tekst }), bundelTekst && _jsx(BundelMelding, { tekst: bundelTekst })] }), _jsxs("span", { className: "flex gap-3 text-[9px] font-normal", children: [info.map((t) => (_jsx("span", { children: t }, t))), velden.includes("barcode") && kar.barcode ? (_jsx(BarcodeStrepen, { waarde: kar.barcode, hoogteMm: Number(opt(sectie, "barcodeHoogte", 15)) })) : null, velden.includes("qrcode") && _jsx("span", { children: "[QR]" })] })] }));
 }
 function LagenView({ sectie, lagen, productSectie, fustSectie, }) {
     const modus = optS(sectie, "modus", "apart");

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

@@ -1,4 +1,4 @@
-import { type PakbonConfig, type PakbonSectie } from "../lib/pakbonBuilder.js";
+import { type PakbonConfig, type PakbonSectie, type PickMethode } from "../lib/pakbonBuilder.js";
 /** Beheer van de secties waaruit de pakbon is opgebouwd. */
 export declare function PakbonSectiesPanel({ config, onChange, }: {
     config: PakbonConfig;
@@ -8,7 +8,7 @@ export declare function PakbonSectiesPanel({ config, onChange, }: {
 export declare function PakbonSectieEditor({ sectie, onChange, methode, }: {
     sectie: PakbonSectie;
     onChange: (patch: Partial<PakbonSectie>) => void;
-    methode?: "kar" | "fusten";
+    methode?: PickMethode;
 }): import("react").JSX.Element;
 /** Kaderinstellingen (breedte, uitlijning, marges, opmaak) van één blok. */
 export declare function PakbonBlokKaderEditor({ sectie, onChange, }: {

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,EAElB,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,KAAK,GAAG,QAAQ,CAAC;CAC5B,+BAiGA;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,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"}

package/dist-lib/components/PakbonSectiesPanel.js

@@ -93,7 +93,12 @@ 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) => {
+    // Instellingen van de fustverzamellijst gelden alleen bij picken per fust
+    // of bij de gecombineerde methode.
+    const verzamellijstUit = s.type === "pickmethode" && methode === "kar";
+    const aangepasteOpties = def.opties
+        .filter((o) => !(verzamellijstUit && o.key !== "methode"))
+        .map((o) => {
         if (s.type === "karren" && o.key === "velden" && bundelAan) {
             return {
                 ...o,
@@ -115,7 +120,7 @@ export function PakbonSectieEditor({ sectie, onChange, methode = "kar", }) {
                         logoId: logo?.id ?? null,
                         logoNaam: logo?.naam ?? null,
                     },
-                }) })), aangepasteOpties.map((o) => {
+                }) })), s.type === "pickmethode" && methode === "beide" && (_jsxs("p", { className: "rounded border border-dashed px-3 py-2 text-xs text-muted-foreground", children: ["De Logistics Engine kiest per opdracht de variant: ", _jsx("span", { className: "font-medium", children: "volle kar" }), "toont de karrenindeling; ", _jsx("span", { className: "font-medium", children: "deelkar" }), " toont alleen de te verzamelen fusten. De barcode hieronder wordt alleen gevuld met de barcode uit die opdracht."] })), verzamellijstUit && (_jsxs("p", { className: "rounded border border-dashed px-3 py-2 text-xs text-muted-foreground", children: ["De instellingen voor de fustverzamellijst gelden bij picken per fusten of bij de gecombineerde methode. Bij picken per kar stel je de fustgegevens in bij het blok", _jsx("span", { className: "font-medium", children: " Fusten" }), "."] })), aangepasteOpties.map((o) => {
                 const isVelden = o.key === "velden";
                 const basisWaarde = s.opties?.[o.key] ?? o.standaard;
                 const waarde = isVelden && bundelAan

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

@@ -0,0 +1,6 @@
+/**
+ * Schrijft voltooide opdrachten van de virtuele PDF-printer naar de map die
+ * in deze browser op deze computer is gekozen. Dit component rendert niets.
+ */
+export declare function PdfMapAutoSaver(): null;
+//# sourceMappingURL=PdfMapAutoSaver.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdfMapAutoSaver.d.ts","sourceRoot":"","sources":["../../src/components/PdfMapAutoSaver.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,eAAe,SAM9B"}

package/dist-lib/components/PdfMapAutoSaver.js

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { startPdfMapService } from "../lib/pdfJobSaver.js";
+/**
+ * Schrijft voltooide opdrachten van de virtuele PDF-printer naar de map die
+ * in deze browser op deze computer is gekozen. Dit component rendert niets.
+ */
+export function PdfMapAutoSaver() {
+    useEffect(() => {
+        startPdfMapService();
+    }, []);
+    return null;
+}

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

@@ -0,0 +1,12 @@
+import { type Root } from "react-dom/client";
+declare global {
+    interface Window {
+        __layoutMakerPdfBannerRoot?: Root;
+    }
+}
+/**
+ * Monteert de mapmelding één keer boven de volledige shell. Zo is de actie ook
+ * zichtbaar in modules die alleen de print-API gebruiken, zoals Pickstation.
+ */
+export declare function startPdfMapGlobaleBanner(): void;
+//# sourceMappingURL=PdfMapGlobaleBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdfMapGlobaleBanner.d.ts","sourceRoot":"","sources":["../../src/components/PdfMapGlobaleBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKzD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,0BAA0B,CAAC,EAAE,IAAI,CAAC;KACnC;CACF;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,IAAI,CAoB/C"}

package/dist-lib/components/PdfMapGlobaleBanner.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { PdfMapToestemmingBanner } from "./PdfMapToestemmingBanner.js";
+const CONTAINER_ID = "layout-maker-pdf-map-banner";
+/**
+ * Monteert de mapmelding één keer boven de volledige shell. Zo is de actie ook
+ * zichtbaar in modules die alleen de print-API gebruiken, zoals Pickstation.
+ */
+export function startPdfMapGlobaleBanner() {
+    if (typeof window === "undefined" || window.__layoutMakerPdfBannerRoot)
+        return;
+    const monteer = () => {
+        if (window.__layoutMakerPdfBannerRoot)
+            return;
+        const bestaand = document.getElementById(CONTAINER_ID);
+        const container = bestaand ?? document.createElement("div");
+        container.id = CONTAINER_ID;
+        if (!bestaand)
+            document.body.appendChild(container);
+        const root = createRoot(container);
+        window.__layoutMakerPdfBannerRoot = root;
+        root.render(_jsx(PdfMapToestemmingBanner, { alleenActieNodig: true, zwevend: true }));
+    };
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", monteer, { once: true });
+    }
+    else {
+        monteer();
+    }
+}

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

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

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

@@ -0,0 +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"}

package/dist-lib/components/PdfMapToestemmingBanner.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/PdfMapToestemmingBanner.tsx — permanente, zichtbare controle om
+// de maptoestemming voor de virtuele "Opslaan als PDF"-printer te beheren.
+// Getoond op de Printplek-detailpagina en de Printwachtrij, zodat een gebruiker
+// altijd proactief toestemming kan (her)geven zonder op een toast te wachten.
+// ============================================================================
+import { useCallback, useEffect, useState } from "react";
+import { Button, toast } from "@flowselections/core";
+import { FolderCheck, FolderOpen, ShieldAlert, ShieldCheck } from "lucide-react";
+import { usePrinters } from "../lib/useDocumentData.js";
+import { zorgVoorPdfPrinter } from "../lib/pdfPrinter.js";
+import { draaitInIframe, herstelPdfMapToestemming, kiesPdfMap, mapKiezenMogelijk, openInEigenTabblad, pdfMapNaam, pdfMapToestemming, } from "../lib/pdfMap.js";
+export function PdfMapToestemmingBanner({ alleenActieNodig = false, zwevend = false, } = {}) {
+    const { printers, reload } = usePrinters();
+    const pdfPrinter = printers.find((p) => p.afdrukmethode === "pdf");
+    const [naam, setNaam] = useState(null);
+    const [toestand, setToestand] = useState("laden");
+    // Zorg dat de virtuele PDF-printer bestaat, ook als de gebruiker nog geen
+    // wizard heeft doorlopen. Daarna herladen zodat de banner direct zichtbaar is.
+    useEffect(() => {
+        if (pdfPrinter)
+            return;
+        let actief = true;
+        void (async () => {
+            try {
+                await zorgVoorPdfPrinter();
+                if (actief)
+                    await reload(true);
+            }
+            catch {
+                // RLS of netwerkfout — stil negeren, banner blijft verborgen.
+            }
+        })();
+        return () => {
+            actief = false;
+        };
+    }, [pdfPrinter, reload]);
+    const laad = useCallback(async () => {
+        if (!pdfPrinter) {
+            setNaam(null);
+            setToestand("ontbreekt");
+            return;
+        }
+        setNaam(await pdfMapNaam(pdfPrinter.id));
+        setToestand(await pdfMapToestemming(pdfPrinter.id));
+    }, [pdfPrinter]);
+    useEffect(() => {
+        void laad();
+    }, [laad]);
+    // Herverfris na focus zodat een net verleende toestemming meteen zichtbaar is.
+    useEffect(() => {
+        const h = () => void laad();
+        window.addEventListener("focus", h);
+        document.addEventListener("visibilitychange", h);
+        return () => {
+            window.removeEventListener("focus", h);
+            document.removeEventListener("visibilitychange", h);
+        };
+    }, [laad]);
+    if (!pdfPrinter)
+        return null;
+    // Banner blijft altijd zichtbaar zolang er een PDF-printer is, zodat de
+    // maptoestemming ook proactief te vernieuwen is (groen = in orde).
+    const inOrde = toestand === "granted" && !!naam;
+    if (alleenActieNodig && (toestand === "laden" || inOrde))
+        return null;
+    const inIframe = draaitInIframe();
+    const ondersteund = mapKiezenMogelijk();
+    const geefToestemming = async () => {
+        if (!pdfPrinter)
+            return;
+        const resultaat = await herstelPdfMapToestemming(pdfPrinter.id);
+        if (resultaat === "granted") {
+            toast.success("Maptoestemming verleend", {
+                description: "Gereedstaande PDF's worden nu naar de map opgeslagen.",
+            });
+            await laad();
+        }
+        else if (resultaat === "ontbreekt") {
+            // Nog geen map gekozen — open de verkenner.
+            await kiesNieuweMap();
+        }
+        else {
+            toast.error("Maptoestemming is niet verleend");
+            await laad();
+        }
+    };
+    const kiesNieuweMap = async () => {
+        if (!pdfPrinter)
+            return;
+        if (inIframe) {
+            toast.error("Map kiezen werkt niet in een iframe", {
+                description: "Open de app in een eigen tabblad om de mappenverkenner te gebruiken.",
+                action: {
+                    label: "Open in eigen tabblad",
+                    onClick: openInEigenTabblad,
+                },
+                duration: 15000,
+            });
+            return;
+        }
+        const uitkomst = await kiesPdfMap(pdfPrinter.id);
+        if (uitkomst.status === "gekozen") {
+            toast.success("Map gekozen", { description: `PDF's worden opgeslagen in “${uitkomst.naam}”.` });
+            await laad();
+        }
+        else if (uitkomst.status === "niet-ondersteund") {
+            toast.error("Deze browser ondersteunt geen mapkeuze", {
+                description: "Gebruik Chrome, Edge of Safari op desktop.",
+            });
+        }
+        else if (uitkomst.status === "iframe-geblokkeerd") {
+            toast.error("Map kiezen werkt niet in een iframe", {
+                description: "Open de app in een eigen tabblad.",
+                action: { label: "Open in eigen tabblad", onClick: openInEigenTabblad },
+                duration: 15000,
+            });
+        }
+        else if (uitkomst.status === "fout") {
+            toast.error("Map kiezen is mislukt", { description: uitkomst.melding });
+        }
+    };
+    const icoon = toestand === "granted"
+        ? ShieldCheck
+        : toestand === "denied"
+            ? ShieldAlert
+            : FolderOpen;
+    const Icoon = icoon;
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: `${inOrde
+            ? "border-emerald-300/60 bg-emerald-50 dark:border-emerald-700/60 dark:bg-emerald-950/30"
+            : "border-amber-300/60 bg-amber-50 dark:border-amber-700/60 dark:bg-amber-950/30"} ${zwevend
+            ? "fixed inset-x-4 top-4 z-[100] mx-auto max-w-4xl shadow-lg"
+            : ""} flex flex-wrap items-center justify-between gap-3 rounded-lg border p-3`, children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Icoon, { className: inOrde
+                            ? "h-4 w-4 text-emerald-600 dark:text-emerald-400"
+                            : "h-4 w-4 text-amber-600 dark:text-amber-400" }), _jsx("span", { className: "font-medium", children: "PDF-maptoestemming" }), _jsxs("span", { className: "text-muted-foreground", children: [naam
+                                ? `Map “${naam}” — toestemming ${toestand === "granted" ? "verleend" : "vereist vernieuwen"}`
+                                : "Nog geen map gekozen op deze computer", !ondersteund ? " (browser ondersteunt geen mapkeuze)" : ""] })] }), _jsxs("div", { className: "flex gap-2", children: [naam ? (_jsxs(Button, { size: "sm", variant: inOrde ? "outline" : "default", onClick: () => void geefToestemming(), children: [_jsx(FolderCheck, { className: "mr-2 h-4 w-4" }), inOrde ? "Toestemming controleren" : "Maptoestemming geven"] })) : null, _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void kiesNieuweMap(), children: [_jsx(FolderOpen, { className: "mr-2 h-4 w-4" }), " ", naam ? "Andere map kiezen" : "Map kiezen"] })] })] }));
+}

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

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

package/dist-lib/components/PrintQueuePage.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from "react";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, } from "@flowselections/core";
-import { RotateCcw, Search, XCircle } from "lucide-react";
+import { FileDown, RotateCcw, Search, XCircle } from "lucide-react";
 import { bijgewerktTekst, useAutoRefresh } from "../lib/useAutoRefresh.js";
 import { PrintStatusBanner } from "./PrintStatusBanner.js";
 import { maakPrintJob, updateJobStatus, useLayouts, usePrinters, usePrintJobs, usePrintPlekNamen, } from "../lib/useDocumentData.js";
@@ -9,6 +9,10 @@ import { printStatus } from "../lib/printService.functions.js";
 import { vraagWachtrijRonde } from "../lib/queueTickClient.js";
 import { documentTypeLabel } from "../lib/documentTypes.js";
 import { jobPlekLabel } from "../lib/printQueue.js";
+import { bewaarInPdfMap } from "../lib/pdfMap.js";
+import { PdfMapAutoSaver } from "./PdfMapAutoSaver.js";
+import { PdfMapToestemmingBanner } from "./PdfMapToestemmingBanner.js";
+import { supabase } from "../lib/supabaseClient.js";
 const STATUS_VARIANT = {
     wachtend: "outline",
     bezig: "secondary",
@@ -23,6 +27,14 @@ const BRON_LABEL = {
     render_html: "meegestuurde opmaak",
     klantlayout: "klantlayout",
 };
+const LOKALE_PDF_LABEL = {
+    gereed: "PDF gereed — lokaal opslaan",
+    opgeslagen: "opgeslagen op Mac",
+    map_ontbreekt: "PDF-map ontbreekt",
+    toestemming_nodig: "maptoestemming nodig",
+    schrijffout: "opslaan mislukt",
+    timeout: "wachten op PDF verlopen",
+};
 /**
  * Heeft deze opdracht een kenmerk waarmee hij van andere orders te
  * onderscheiden is? Zo niet, dan valt de dubbelbescherming terug op het
@@ -103,11 +115,38 @@ export function PrintQueuePage() {
         await reload(true);
     };
     const bijgewerkt = useAutoRefresh(ronde, lopende ? 5000 : 20000);
-    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." })] }), _jsx("span", { className: "text-muted-foreground text-xs", children: bijgewerktTekst(bijgewerkt) })] }), _jsx(PrintStatusBanner, { fout: tickFout }), _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(Select, { value: plekFilter, onValueChange: setPlekFilter, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle printplekken" }), plekOpties.map((p) => (_jsx(SelectItem, { value: p, children: p }, p))), _jsx(SelectItem, { value: "\u2014", children: "Zonder printplek" })] })] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Document" }), _jsx(TableHead, { children: "Printplek" }), _jsx(TableHead, { children: "Layout (aangeleverd \u2192 gebruikt)" }), _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: 7, 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" })), !heeftOrderKenmerk(j) && (_jsx(Badge, { variant: "outline", className: "ml-2 text-amber-600", children: "geen orderkenmerk" })), j.foutmelding && (_jsx("span", { className: "block text-xs text-destructive", children: j.foutmelding }))] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: plekPerJob.get(j.id) || "—" }), _jsxs(TableCell, { className: "text-sm text-muted-foreground", children: [_jsx("span", { title: "Aangeleverd door de module", children: j.layout_id ? layoutNaam.get(j.layout_id) ?? "Onbekende layout" : "geen" }), _jsxs("span", { className: "block text-xs", children: ["\u2192", " ", _jsx("span", { title: "Layout die de wachtrij gebruikte", children: j.gebruikte_layout_id
+    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsx(PdfMapAutoSaver, {}), _jsx(PdfMapToestemmingBanner, {}), _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." })] }), _jsx("span", { className: "text-muted-foreground text-xs", children: bijgewerktTekst(bijgewerkt) })] }), _jsx(PrintStatusBanner, { fout: tickFout }), _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(Select, { value: plekFilter, onValueChange: setPlekFilter, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle printplekken" }), plekOpties.map((p) => (_jsx(SelectItem, { value: p, children: p }, p))), _jsx(SelectItem, { value: "\u2014", children: "Zonder printplek" })] })] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Document" }), _jsx(TableHead, { children: "Printplek" }), _jsx(TableHead, { children: "Layout (aangeleverd \u2192 gebruikt)" }), _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: 7, 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" })), !heeftOrderKenmerk(j) && (_jsx(Badge, { variant: "outline", className: "ml-2 text-amber-600", children: "geen orderkenmerk" })), j.foutmelding && (_jsx("span", { className: "block text-xs text-destructive", children: j.foutmelding })), j.lokale_pdf_fout && (_jsx("span", { className: "block text-xs text-destructive", children: j.lokale_pdf_fout }))] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: plekPerJob.get(j.id) || "—" }), _jsxs(TableCell, { className: "text-sm text-muted-foreground", children: [_jsx("span", { title: "Aangeleverd door de module", children: j.layout_id ? layoutNaam.get(j.layout_id) ?? "Onbekende layout" : "geen" }), _jsxs("span", { className: "block text-xs", children: ["\u2192", " ", _jsx("span", { title: "Layout die de wachtrij gebruikte", children: j.gebruikte_layout_id
                                                                             ? layoutNaam.get(j.gebruikte_layout_id) ?? "Onbekende layout"
                                                                             : j.gebruikte_bron
                                                                                 ? "geen layout"
-                                                                                : "nog niet verwerkt" }), j.gebruikte_bron && (_jsx(Badge, { variant: "outline", className: "ml-2", children: BRON_LABEL[j.gebruikte_bron] ?? j.gebruikte_bron }))] })] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: j.printer_id ? printerNaam.get(j.printer_id) ?? "—" : "—" }), _jsx(TableCell, { children: _jsx(Badge, { variant: STATUS_VARIANT[j.status] ?? "outline", children: j.status }) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: new Date(j.created_at).toLocaleString("nl-NL") }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: async () => {
+                                                                                : "nog niet verwerkt" }), j.gebruikte_bron && (_jsx(Badge, { variant: "outline", className: "ml-2", children: BRON_LABEL[j.gebruikte_bron] ?? j.gebruikte_bron }))] })] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: j.printer_id ? printerNaam.get(j.printer_id) ?? "—" : "—" }), _jsx(TableCell, { children: _jsx(Badge, { variant: STATUS_VARIANT[j.status] ?? "outline", children: (j.lokale_pdf_status && LOKALE_PDF_LABEL[j.lokale_pdf_status]) ?? 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: [j.resultaat_pdf_base64 && (_jsxs(Button, { variant: "ghost", size: "sm", title: "Bewaar de opgemaakte PDF", onClick: async () => {
+                                                                        const bytes = Uint8Array.from(atob(j.resultaat_pdf_base64), (c) => c.charCodeAt(0));
+                                                                        const blob = new Blob([bytes], { type: "application/pdf" });
+                                                                        const bestandsnaam = `${j.documentnaam ?? "document"}.pdf`;
+                                                                        const inMap = j.printer_id
+                                                                            ? await bewaarInPdfMap(j.printer_id, bestandsnaam, blob)
+                                                                            : false;
+                                                                        if (inMap) {
+                                                                            await supabase
+                                                                                .from("print_jobs")
+                                                                                .update({
+                                                                                status: "voltooid",
+                                                                                lokale_pdf_status: "opgeslagen",
+                                                                                lokaal_opgeslagen_op: new Date().toISOString(),
+                                                                                lokale_pdf_fout: null,
+                                                                            })
+                                                                                .eq("id", j.id);
+                                                                            toast.success("PDF opgeslagen in de ingestelde map");
+                                                                            void reload(true);
+                                                                            return;
+                                                                        }
+                                                                        const url = URL.createObjectURL(blob);
+                                                                        const a = document.createElement("a");
+                                                                        a.href = url;
+                                                                        a.download = bestandsnaam;
+                                                                        a.click();
+                                                                        URL.revokeObjectURL(url);
+                                                                    }, children: [_jsx(FileDown, { className: "mr-2 h-4 w-4" }), " PDF"] })), _jsxs(Button, { variant: "ghost", size: "sm", onClick: async () => {
                                                                         if (!j.layout_id)
                                                                             return;
                                                                         try {