@flowselections/layout-maker 1.23.2 → 1.24.0

package/README.md

@@ -1,139 +1,139 @@
-# Layout maker (pakbonnen, verzendbrieven, ectra)
-
-blank project start
-
-This project was built with [Lovable](https://lovable.dev).
-
-## Build with Lovable
-
-Continue developing this project in the [Lovable editor](https://lovable.dev/projects/4735fccb-b385-4b48-b4f8-ef135f63f4f7).
-
-- **Ship faster**: describe what you want to build and Lovable handles the code.
-- **Stay in sync**: every change made in Lovable is committed straight to this repository.
-- **Full ownership**: this code is yours. Push to `main` on GitHub and your changes sync back into Lovable, ready for your next prompt.
-
-## Development
-
-Prefer working locally? You need Node.js and npm — [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating).
-
-```sh
-git clone <this-repository-url>
-cd <repository-name>
-npm i
-npm run dev
-```
-
-## Installeren in een andere shell
-
-1. Draai `sql/print-schema.sql` één keer in de Supabase-database van die shell
-   (SQL editor). Het script is idempotent en zet tabellen, rechten, RLS,
-   functies, de geplande taken én de opslagmap `layout-logos` voor de Logo
-   Bibliotheek klaar. Zorg dat de extensies `pg_cron` en `pg_net` aan staan.
-
-2. Zet in de omgeving van de shell:
-   - `SUPABASE_URL` en `SERVICE_ROLE_KEY` — nodig voor achtergrondprinten
-   - `CENTRAL_AUTH_URL` en `CENTRAL_AUTH_SECRET` — nodig voor de printdienst
-3. Zorg dat de shell het tick-eindpunt host. De setup-CLI doet dit automatisch
-   op basis van `flowselections.serverRoutes` in `package.json`. Handmatig
-   opgezette shells maken zelf dit bestand aan:
-
-   ```ts
-   // src/routes/api/public/print/queue-tick.ts
-   import { createFileRoute } from "@tanstack/react-router";
-   import { behandelQueueTick } from "@flowselections/layout-maker/print";
-
-   export const Route = createFileRoute("/api/public/print/queue-tick")({
-     server: {
-       handlers: {
-         POST: async ({ request }) => {
-           // De shell levert de databaseverbinding; de module maakt er nooit zelf een.
-           const { supabaseAdmin } = await import(
-             "../../../../integrations/supabase/client.server"
-           );
-           return behandelQueueTick(request, supabaseAdmin);
-         },
-       },
-     },
-   });
-   ```
-
-   Het eindpunt accepteert drie toegangsbewijzen: een runner-sleutel uit
-   `print_queue_runners.tick_sleutel`, `SUPABASE_PUBLISHABLE_KEY` (de cron) of
-   het sessietoken van een ingelogde gebruiker (de knop in de Printwachtrij).
-
-
-4. Klaar. Zodra de module in de shell draait meldt hij zichzelf aan als
-   verwerker van de printwachtrij. Een nieuwe printopdracht wordt meteen
-   opgepakt; daarnaast verwerkt de geplande taak `print-queue-tick` elke minuut
-   de wachtende opdrachten. Reageert een shell een uur lang niet, dan wordt hij
-   automatisch op inactief gezet. De taak `print-queue-cleanup` ruimt dagelijks
-   oude opdrachten en bestanden op.
-
-## Printen vanuit een andere module
-
-Andere modules in dezelfde shell gebruiken uitsluitend de print-API van deze
-module; zij hoeven de printtabellen niet te kennen en mogen er ook niet zelf in
-schrijven (dan blijft de opdracht wachten tot de volgende cronronde).
-
-```ts
-import {
-  printDocument, printPdf, printHtml,
-  printerVoorWerkplek, printerVoorDocumenttype, volgJobStatus,
-} from "@flowselections/layout-maker";
-
-// 1. Document dat via een ontwerp uit deze module wordt opgemaakt
-const { jobId } = await printDocument({
-  documenttype: "pakbon",          // moet een bestaande documentsoort zijn
-  documentnaam: "PB-2601284",
-  payload: { order, order_id: order.id }, // order_id: verplicht kenmerk
-});
-
-// 2. Kant-en-klare PDF (Floriday-document, klantsticker, externe factuur)
-//    Zonder printerId wordt de printer bepaald via de gekoppelde layout van
-//    de documentsoort (of de koppeling op papierformaat).
-await printPdf({
-  documenttype: "factuur",
-  documentnaam: "F-2026-00123",
-  pdfBase64,                       // met of zonder data:-voorvoegsel
-  payload: { order_id: factuur.id },
-});
-
-// Geef in payload altijd een order-kenmerk mee: queue_item_id, order_id of
-// ordernummer. De wachtrij gebruikt dat om dubbele aanvragen te herkennen;
-// zonder kenmerk kunnen twee orders met dezelfde documentnaam binnen tien
-// minuten als dubbel worden gezien.
-
-
-// Of expliciet per werkplek:
-const printerId = await printerVoorWerkplek("PICKSTATION-1", "A4");
-await printPdf({
-  documenttype: "afleverbrief",
-  documentnaam: "AFL-12345",
-  pdfBase64,
-  printerId: printerId!,
-});
-
-
-// 3. Eigen opmaak afdrukken (geen layout, anders wint de layout)
-await printHtml({
-  documenttype: "controlelijst",
-  documentnaam: "Controlelijst kar 12",
-  html,
-  printerId: printerId!,
-});
-
-// Status live volgen (realtime staat aan op print_jobs)
-const stop = volgJobStatus(jobId, (s) => console.log(s.status, s.foutmelding));
-```
-
-Belangrijk:
-
-- **Documentsoorten** liggen vast in de database: pakbon, factuur, offerte,
-  orderbevestiging, etiket, verzendlabel, productlabel, barcode_label,
-  magazijnlijst, controlelijst, transportdocument, sticker, productiebon,
-  veilingbon, afleverbrief, veilingbrief en vrij.
-- **Beslisvolgorde bij het afdrukken**: kant-en-klare PDF > gekoppelde layout >
-  meegestuurde opmaak > actieve layout van de documentsoort.
-- **Dubbelbeveiliging**: een identieke aanvraag binnen 10 minuten wordt
-  genegeerd; de aanroep werpt dan `DubbeleAanvraagFout`. Geef bij bulkprints per
-  document een eigen `documentnaam` zodat elke opdracht uniek is.
+# Layout maker (pakbonnen, verzendbrieven, ectra)
+
+blank project start
+
+This project was built with [Lovable](https://lovable.dev).
+
+## Build with Lovable
+
+Continue developing this project in the [Lovable editor](https://lovable.dev/projects/4735fccb-b385-4b48-b4f8-ef135f63f4f7).
+
+- **Ship faster**: describe what you want to build and Lovable handles the code.
+- **Stay in sync**: every change made in Lovable is committed straight to this repository.
+- **Full ownership**: this code is yours. Push to `main` on GitHub and your changes sync back into Lovable, ready for your next prompt.
+
+## Development
+
+Prefer working locally? You need Node.js and npm — [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating).
+
+```sh
+git clone <this-repository-url>
+cd <repository-name>
+npm i
+npm run dev
+```
+
+## Installeren in een andere shell
+
+1. Draai `sql/print-schema.sql` één keer in de Supabase-database van die shell
+   (SQL editor). Het script is idempotent en zet tabellen, rechten, RLS,
+   functies, de geplande taken én de opslagmap `layout-logos` voor de Logo
+   Bibliotheek klaar. Zorg dat de extensies `pg_cron` en `pg_net` aan staan.
+
+2. Zet in de omgeving van de shell:
+   - `SUPABASE_URL` en `SERVICE_ROLE_KEY` — nodig voor achtergrondprinten
+   - `CENTRAL_AUTH_URL` en `CENTRAL_AUTH_SECRET` — nodig voor de printdienst
+3. Zorg dat de shell het tick-eindpunt host. De setup-CLI doet dit automatisch
+   op basis van `flowselections.serverRoutes` in `package.json`. Handmatig
+   opgezette shells maken zelf dit bestand aan:
+
+   ```ts
+   // src/routes/api/public/print/queue-tick.ts
+   import { createFileRoute } from "@tanstack/react-router";
+   import { behandelQueueTick } from "@flowselections/layout-maker/print";
+
+   export const Route = createFileRoute("/api/public/print/queue-tick")({
+     server: {
+       handlers: {
+         POST: async ({ request }) => {
+           // De shell levert de databaseverbinding; de module maakt er nooit zelf een.
+           const { supabaseAdmin } = await import(
+             "../../../../integrations/supabase/client.server"
+           );
+           return behandelQueueTick(request, supabaseAdmin);
+         },
+       },
+     },
+   });
+   ```
+
+   Het eindpunt accepteert drie toegangsbewijzen: een runner-sleutel uit
+   `print_queue_runners.tick_sleutel`, `SUPABASE_PUBLISHABLE_KEY` (de cron) of
+   het sessietoken van een ingelogde gebruiker (de knop in de Printwachtrij).
+
+
+4. Klaar. Zodra de module in de shell draait meldt hij zichzelf aan als
+   verwerker van de printwachtrij. Een nieuwe printopdracht wordt meteen
+   opgepakt; daarnaast verwerkt de geplande taak `print-queue-tick` elke minuut
+   de wachtende opdrachten. Reageert een shell een uur lang niet, dan wordt hij
+   automatisch op inactief gezet. De taak `print-queue-cleanup` ruimt dagelijks
+   oude opdrachten en bestanden op.
+
+## Printen vanuit een andere module
+
+Andere modules in dezelfde shell gebruiken uitsluitend de print-API van deze
+module; zij hoeven de printtabellen niet te kennen en mogen er ook niet zelf in
+schrijven (dan blijft de opdracht wachten tot de volgende cronronde).
+
+```ts
+import {
+  printDocument, printPdf, printHtml,
+  printerVoorWerkplek, printerVoorDocumenttype, volgJobStatus,
+} from "@flowselections/layout-maker";
+
+// 1. Document dat via een ontwerp uit deze module wordt opgemaakt
+const { jobId } = await printDocument({
+  documenttype: "pakbon",          // moet een bestaande documentsoort zijn
+  documentnaam: "PB-2601284",
+  payload: { order, order_id: order.id }, // order_id: verplicht kenmerk
+});
+
+// 2. Kant-en-klare PDF (Floriday-document, klantsticker, externe factuur)
+//    Zonder printerId wordt de printer bepaald via de gekoppelde layout van
+//    de documentsoort (of de koppeling op papierformaat).
+await printPdf({
+  documenttype: "factuur",
+  documentnaam: "F-2026-00123",
+  pdfBase64,                       // met of zonder data:-voorvoegsel
+  payload: { order_id: factuur.id },
+});
+
+// Geef in payload altijd een order-kenmerk mee: queue_item_id, order_id of
+// ordernummer. De wachtrij gebruikt dat om dubbele aanvragen te herkennen;
+// zonder kenmerk kunnen twee orders met dezelfde documentnaam binnen tien
+// minuten als dubbel worden gezien.
+
+
+// Of expliciet per werkplek:
+const printerId = await printerVoorWerkplek("PICKSTATION-1", "A4");
+await printPdf({
+  documenttype: "afleverbrief",
+  documentnaam: "AFL-12345",
+  pdfBase64,
+  printerId: printerId!,
+});
+
+
+// 3. Eigen opmaak afdrukken (geen layout, anders wint de layout)
+await printHtml({
+  documenttype: "controlelijst",
+  documentnaam: "Controlelijst kar 12",
+  html,
+  printerId: printerId!,
+});
+
+// Status live volgen (realtime staat aan op print_jobs)
+const stop = volgJobStatus(jobId, (s) => console.log(s.status, s.foutmelding));
+```
+
+Belangrijk:
+
+- **Documentsoorten** liggen vast in de database: pakbon, factuur, offerte,
+  orderbevestiging, etiket, verzendlabel, productlabel, barcode_label,
+  magazijnlijst, controlelijst, transportdocument, sticker, productiebon,
+  veilingbon, afleverbrief, veilingbrief en vrij.
+- **Beslisvolgorde bij het afdrukken**: kant-en-klare PDF > gekoppelde layout >
+  meegestuurde opmaak > actieve layout van de documentsoort.
+- **Dubbelbeveiliging**: een identieke aanvraag binnen 10 minuten wordt
+  genegeerd; de aanroep werpt dan `DubbeleAanvraagFout`. Geef bij bulkprints per
+  document een eigen `documentnaam` zodat elke opdracht uniek is.

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

@@ -1,20 +1,20 @@
-import { type Orientatie } from "../lib/browserPrint.js";
-export interface AfdrukKnopProps {
-    documenttype: string;
-    formaatCode: string | null;
-    orientatie: Orientatie;
-    /** Levert de HTML van het document aan op het moment van afdrukken. */
-    getHtml: () => string;
-    css?: string;
-    documentnaam?: string;
-    label?: string;
-    layoutId?: string | null;
-    kopieen?: number;
-}
-/**
- * @deprecated Verouderd — deze knop gebruikt het browser-printvenster als
- * terugval. Gebruik `printHtml()` / `printPdf()` uit `printApi` zodat alles
- * via PrintNode loopt.
- */
-export declare function AfdrukKnop({ documenttype, formaatCode, orientatie, getHtml, css, documentnaam, label, layoutId, kopieen, }: AfdrukKnopProps): import("react/jsx-runtime").JSX.Element;
+import { type Orientatie } from "../lib/browserPrint.js";
+export interface AfdrukKnopProps {
+    documenttype: string;
+    formaatCode: string | null;
+    orientatie: Orientatie;
+    /** Levert de HTML van het document aan op het moment van afdrukken. */
+    getHtml: () => string;
+    css?: string;
+    documentnaam?: string;
+    label?: string;
+    layoutId?: string | null;
+    kopieen?: number;
+}
+/**
+ * @deprecated Verouderd — deze knop gebruikt het browser-printvenster als
+ * terugval. Gebruik `printHtml()` / `printPdf()` uit `printApi` zodat alles
+ * via PrintNode loopt.
+ */
+export declare function AfdrukKnop({ documenttype, formaatCode, orientatie, getHtml, css, documentnaam, label, layoutId, kopieen, }: AfdrukKnopProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AfdrukKnop.d.ts.map

package/dist-lib/components/DocumentRouteringPage.js

@@ -19,7 +19,7 @@ const GEEN = "geen";
  * zelf geen printer meer, dus zonder standaardregel blijft zo'n opdracht
  * liggen. Daarom staan ze altijd bovenaan met een waarschuwing.
  */
-const ENGINE_TYPES = ["pakbon", "sticker", "transportdocument", "productiebon"];
+const ENGINE_TYPES = ["pakbon", "sticker", "afleverbrief", "productiebon"];
 export function DocumentRouteringPage({ ingebed = false } = {}) {
     const { printers } = usePrinters();
     const { koppelingen: standaard, reload: herlaadStandaard } = useAlleFormaatPrinters();

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

@@ -1 +1 @@
-{"version":3,"file":"DocumentSettingsPanel.d.ts","sourceRoot":"","sources":["../../src/components/DocumentSettingsPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAIL,KAAK,cAAc,EAGpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,GAAG;QAAE,MAAM,CAAC,EAAE,cAAc,CAAA;KAAE,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CACjD,+BA+DA"}
+{"version":3,"file":"DocumentSettingsPanel.d.ts","sourceRoot":"","sources":["../../src/components/DocumentSettingsPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAIL,KAAK,cAAc,EAGpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKxD;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,GAAG;QAAE,MAAM,CAAC,EAAE,cAAc,CAAA;KAAE,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CACjD,+BAiGA"}

package/dist-lib/components/DocumentSettingsPanel.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Badge, Button, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, toast, } from "@flowselections/core";
-import { Save } from "lucide-react";
+import { Loader2, Printer, Save } from "lucide-react";
 import { configWaarde, documentProfiel, standaardConfig, } from "../lib/documentProfiles.js";
 import { updateLayout, usePrinters } from "../lib/useDocumentData.js";
 import { useFormaatPrinters, zetFormaatPrinter } from "../lib/formaatPrinters.js";
+import { renderProfielDocument } from "../lib/profielHtml.js";
+import { voorbeeldContext } from "../lib/layoutPreview.js";
+import { voorbeeldPrint } from "../lib/voorbeeldPrint.js";
 /**
  * Documentspecifieke instellingen. Wat hier verschijnt komt volledig uit het
  * profiel van het documenttype — nieuwe documentsoorten werken automatisch.
@@ -13,6 +16,7 @@ export function DocumentSettingsPanel({ layout, onOpgeslagen, }) {
     const profiel = useMemo(() => documentProfiel(layout.documenttype), [layout.documenttype]);
     const [config, setConfig] = useState(() => layout.config ?? standaardConfig(profiel));
     const [bezig, setBezig] = useState(false);
+    const [printen, setPrinten] = useState(false);
     useEffect(() => {
         setConfig(layout.config ?? standaardConfig(profiel));
     }, [layout.id, layout.config, profiel]);
@@ -31,7 +35,27 @@ export function DocumentSettingsPanel({ layout, onOpgeslagen, }) {
             setBezig(false);
         }
     };
-    return (_jsxs("div", { className: "space-y-5", children: [_jsx("div", { className: "rounded-md border bg-muted/40 p-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "secondary", children: profiel.label }), _jsx("span", { className: "text-xs text-muted-foreground", children: profiel.omschrijving })] }) }), profiel.groepen.map((groep) => (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs uppercase text-muted-foreground", children: groep.label }), groep.omschrijving && (_jsx("p", { className: "text-xs text-muted-foreground", children: groep.omschrijving }))] }), groep.instellingen.map((inst) => (_jsx(Instelling, { inst: inst, waarde: configWaarde(config, groep, inst), onChange: (v) => zet(groep.key, inst.key, v) }, inst.key))), _jsx(Separator, {})] }, groep.key))), profiel.printerPerFormaat && _jsx(FormaatPrinters, { documenttype: profiel.id }), _jsxs(Button, { className: "w-full", onClick: opslaan, disabled: bezig, children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Instellingen opslaan"] })] }));
+    const voorbeeldPrinten = async () => {
+        setPrinten(true);
+        try {
+            const liggend = String(layout.orientatie ?? "portrait") === "landscape";
+            const b = Number(layout.breedte_mm ?? 210);
+            const h = Number(layout.hoogte_mm ?? 297);
+            const html = renderProfielDocument(layout.documenttype, config, voorbeeldContext(), {
+                breedteMm: liggend ? h : b,
+                hoogteMm: liggend ? b : h,
+                titel: layout.naam ?? profiel.label,
+            });
+            await voorbeeldPrint(layout, html);
+        }
+        catch (e) {
+            toast.error(e instanceof Error ? e.message : "Voorbeeld printen mislukt");
+        }
+        finally {
+            setPrinten(false);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-5", children: [_jsx("div", { className: "rounded-md border bg-muted/40 p-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "secondary", children: profiel.label }), _jsx("span", { className: "text-xs text-muted-foreground", children: profiel.omschrijving })] }) }), profiel.groepen.map((groep) => (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs uppercase text-muted-foreground", children: groep.label }), groep.omschrijving && (_jsx("p", { className: "text-xs text-muted-foreground", children: groep.omschrijving }))] }), groep.instellingen.map((inst) => (_jsx(Instelling, { inst: inst, waarde: configWaarde(config, groep, inst), onChange: (v) => zet(groep.key, inst.key, v) }, inst.key))), _jsx(Separator, {})] }, groep.key))), profiel.printerPerFormaat && _jsx(FormaatPrinters, { documenttype: profiel.id }), _jsxs(Button, { className: "w-full", onClick: opslaan, disabled: bezig, children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Instellingen opslaan"] }), _jsxs(Button, { variant: "outline", className: "w-full", onClick: 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"] })] }));
 }
 function Instelling({ inst, waarde, onChange, }) {
     if (inst.type === "schakelaar") {

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

@@ -1,8 +1,8 @@
-export declare function NetwerkPrintersDialog({ open, onOpenChange, huidigePrinterId, huidigePrinterNaam, onKlaar, }: {
-    open: boolean;
-    onOpenChange: (v: boolean) => void;
-    huidigePrinterId?: string | null;
-    huidigePrinterNaam?: string | null;
-    onKlaar?: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function NetwerkPrintersDialog({ open, onOpenChange, huidigePrinterId, huidigePrinterNaam, onKlaar, }: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    huidigePrinterId?: string | null;
+    huidigePrinterNaam?: string | null;
+    onKlaar?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NetwerkPrintersDialog.d.ts.map

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

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

package/dist-lib/components/PakbonBuilderPage.js

@@ -8,7 +8,7 @@ import { PakbonPreview } from "./PakbonPreview.js";
 import { FormaatOrientatieBar } from "./FormaatOrientatieBar.js";
 import { leesPakbonConfig } from "../lib/pakbonBuilder.js";
 import { renderPakbonDocument, voorbeeldPakbonOrder } from "../lib/pakbonHtml.js";
-import { printHtml, printerVoorDocumenttype, volgJobStatus } from "../lib/printApi.js";
+import { voorbeeldPrint } from "../lib/voorbeeldPrint.js";
 import { haalPrintLogos } from "../lib/logoLibrary.js";
 import { updateLayout, useLayoutDetail } from "../lib/useDocumentData.js";
 import { useLayoutIdParam } from "../lib/useLayoutIdParam.js";
@@ -45,11 +45,6 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
             return;
         setPrinten(true);
         try {
-            const printerId = await printerVoorDocumenttype("pakbon", layout?.papierformaat ?? undefined);
-            if (!printerId) {
-                toast.error("Nog geen printer gekoppeld aan Pakbon — stel dit in bij Layouts & printers > Routering.");
-                return;
-            }
             const logos = await haalPrintLogos();
             const html = renderPakbonDocument(config, voorbeeldPakbonOrder(), {
                 logos,
@@ -57,26 +52,12 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
                 hoogteMm: hoogte,
                 titel: layout?.naam ?? "Pakbon",
             });
-            const { jobId } = await printHtml({
-                documenttype: "pakbon",
-                documentnaam: `Voorbeeld ${layout?.naam ?? "pakbon"}`,
-                html,
-                printerId,
-                payload: { voorbeeld: true, layout_id: layout?.id ?? layoutId },
-                isHerprint: true,
-            });
-            toast.success("Voorbeeld naar de printer verstuurd");
-            const stop = volgJobStatus(jobId, (s) => {
-                if (s.status === "klaar") {
-                    toast.success("Voorbeeld afgedrukt");
-                    stop();
-                }
-                else if (s.status === "mislukt") {
-                    toast.error(s.foutmelding ?? "Voorbeeld printen mislukt");
-                    stop();
-                }
-            });
-            window.setTimeout(() => stop(), 120000);
+            await voorbeeldPrint({
+                id: layout?.id ?? layoutId,
+                naam: layout?.naam,
+                documenttype: layout?.documenttype ?? "pakbon",
+                papierformaat: layout?.papierformaat,
+            }, html);
         }
         catch (e) {
             toast.error(e instanceof Error ? e.message : "Voorbeeld printen mislukt");

package/dist-lib/components/PrinterSetupWizard.js

@@ -183,9 +183,9 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, computerFilter
         setTestStatus("bezig");
         setTestMelding("");
         const maat = gekozenFormaat ? `${gekozenFormaat.breedte} × ${gekozenFormaat.hoogte} mm` : "standaardformaat";
-        const html = `<div style="padding:15mm;font-family:Arial,Helvetica,sans-serif;font-size:12pt">
-<h1 style="font-size:20pt;margin:0 0 6mm">Testpagina</h1>
-<p style="margin:0 0 3mm">Deze pagina hoort uit: <strong>${naam}</strong></p>
+        const html = `<div style="padding:15mm;font-family:Arial,Helvetica,sans-serif;font-size:12pt">
+<h1 style="font-size:20pt;margin:0 0 6mm">Testpagina</h1>
+<p style="margin:0 0 3mm">Deze pagina hoort uit: <strong>${naam}</strong></p>
 <p style="margin:0">Papier: ${maat} — ${new Date().toLocaleString("nl-NL")}</p></div>`;
         try {
             const { jobId } = await printHtml({

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

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

package/dist-lib/components/PrintersRedirectPage.js

@@ -1,14 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// ============================================================================
-// src/components/PrintersRedirectPage.tsx — oude URL /layouts-printers/printers
-// stuurt door naar de samengevoegde pagina Printplekken.
-// ============================================================================
-import { useEffect } from "react";
-import { useNavigate } from "@tanstack/react-router";
-export function PrintersRedirectPage() {
-    const navigate = useNavigate();
-    useEffect(() => {
-        void navigate({ to: "/layouts-printers/printplekken", replace: true });
-    }, [navigate]);
-    return _jsx("p", { className: "text-muted-foreground p-6 text-sm", children: "Doorsturen naar Printplekken\u2026" });
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+// ============================================================================
+// src/components/PrintersRedirectPage.tsx — oude URL /layouts-printers/printers
+// stuurt door naar de samengevoegde pagina Printplekken.
+// ============================================================================
+import { useEffect } from "react";
+import { useNavigate } from "@tanstack/react-router";
+export function PrintersRedirectPage() {
+    const navigate = useNavigate();
+    useEffect(() => {
+        void navigate({ to: "/layouts-printers/printplekken", replace: true });
+    }, [navigate]);
+    return _jsx("p", { className: "text-muted-foreground p-6 text-sm", children: "Doorsturen naar Printplekken\u2026" });
+}

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

@@ -1 +1 @@
-{"version":3,"file":"ProductiebonBuilderPage.d.ts","sourceRoot":"","sources":["../../src/components/ProductiebonBuilderPage.tsx"],"names":[],"mappings":"AAoBA,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BAsG7F"}
+{"version":3,"file":"ProductiebonBuilderPage.d.ts","sourceRoot":"","sources":["../../src/components/ProductiebonBuilderPage.tsx"],"names":[],"mappings":"AAsBA,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BA0I7F"}

package/dist-lib/components/ProductiebonBuilderPage.js

@@ -2,19 +2,22 @@ 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 { ArrowLeft, Save } from "lucide-react";
+import { ArrowLeft, Loader2, Printer, Save } from "lucide-react";
 import { ProductiebonBlokkenPanel } from "./ProductiebonBlokkenPanel.js";
 import { ProductiebonPreview } from "./ProductiebonPreview.js";
 import { FormaatOrientatieBar } from "./FormaatOrientatieBar.js";
 import { leesProductiebonConfig } from "../lib/productiebonBuilder.js";
 import { updateLayout, useLayoutDetail } from "../lib/useDocumentData.js";
 import { useLayoutIdParam } from "../lib/useLayoutIdParam.js";
+import { renderProductiebonDocument } from "../lib/productiebonHtml.js";
+import { voorbeeldPrint } from "../lib/voorbeeldPrint.js";
 /** Eigen editor voor de productiebon: modulaire blokken met live voorbeeld. */
 export function ProductiebonBuilderPage({ 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);
     useEffect(() => {
         if (layout)
             setConfig(leesProductiebonConfig(layout.config));
@@ -38,11 +41,31 @@ export function ProductiebonBuilderPage({ layoutId: layoutIdProp } = {}) {
             setBezig(false);
         }
     };
+    const voorbeeldPrinten = async () => {
+        if (!config)
+            return;
+        setPrinten(true);
+        try {
+            const html = renderProductiebonDocument({ productiebon: config }, {}, { breedteMm: breedte, hoogteMm: hoogte, titel: layout?.naam ?? "Productiebon" });
+            await voorbeeldPrint({
+                id: layout?.id ?? layoutId,
+                naam: layout?.naam,
+                documenttype: layout?.documenttype ?? "productiebon",
+                papierformaat: layout?.papierformaat,
+            }, html);
+        }
+        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: ["Productiebon opbouwen uit blokken \u00B7 ", config.blokken.length, " blokken"] })] })] }), _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: "Blokken" }), _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(ProductiebonBlokkenPanel, { 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: "Voorbeeldproductieorder met samenstelling en belading." })] }), _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(ProductiebonPreview, { 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: ["Productiebon opbouwen uit blokken \u00B7 ", config.blokken.length, " blokken"] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: 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"] }), _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: "Blokken" }), _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(ProductiebonBlokkenPanel, { 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: "Voorbeeldproductieorder met samenstelling en belading." })] }), _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(ProductiebonPreview, { config: config, breedteMm: breedte, hoogteMm: hoogte }) }) })] })] })] }));
 }

package/dist-lib/index.d.ts

@@ -58,7 +58,7 @@ export { bewaarElementen, bewaarPrinter, bewaarVersie, dupliceerLayout, maakLayo
 export { jobPickstation, jobPlekLabel, jobPrintPlekId, jobWerkplek } from './lib/printQueue.js';
 export type { PlekNamen } from './lib/printQueue.js';
 export type { PrintJobModel, PrinterModel } from './lib/useDocumentData.js';
-export { beschikbareLayouts, beschikbarePrinters, printDocument, printPdf, printHtml, printerVoorWerkplek, printerVoorDocumenttype, volgJobStatus, DubbeleAanvraagFout, } from './lib/printApi.js';
+export { beschikbareLayouts, beschikbarePrinters, printDocument, printPdf, printHtml, printerVoorWerkplek, printerVoorDocumenttype, printerVoorLayout, volgJobStatus, DubbeleAanvraagFout, } from './lib/printApi.js';
 export type { PrintDocumentInput, PrintDocumentResult, PrintPdfInput, PrintHtmlInput, JobStatus, } from './lib/printApi.js';
 export { printDirect } from './lib/directPrint.js';
 export type { DirectPrintOpdracht, DirectPrintResultaat } from './lib/directPrint.js';
@@ -79,4 +79,5 @@ export { bewerkPrintplek, koppelBronAanPrintplek, koppelComputerAanPrintplek, ma
 export type { Printplek, PrintplekComputer, PrintplekDocumentPrinter, PrintplekKoppeling, } from './lib/printplekken.js';
 export { GeenPrinterFout } from './lib/printApi.js';
 export declare const layoutmodule: FlowModule;
+export { voorbeeldPrint } from './lib/voorbeeldPrint.js';
 //# sourceMappingURL=index.d.ts.map