@flowselections/layout-maker 1.69.5 → 1.69.8

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

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

package/dist-lib/components/AfleverbriefBuilderPage.js

@@ -11,7 +11,9 @@ import { AFLEVERBRIEF_SECTIE_TYPES, leesAfleverbriefConfig, } from "../lib/pakbo
 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 { useLayoutDetail } from "../lib/useDocumentData.js";
+import { bewaarIndeling, foutTekstVan, opgeslagenMelding } from "../lib/layoutOpslaan.js";
+import { SysteemLayoutMelding } from "./SysteemLayoutMelding.js";
 import { LayoutPrinterSelect } from "./LayoutPrinterSelect.js";
 import { useLayoutIdParam } from "../lib/useLayoutIdParam.js";
 /**
@@ -28,6 +30,7 @@ export function AfleverbriefBuilderPage({ layoutId: layoutIdProp } = {}) {
     const [printen, setPrinten] = useState(false);
     const [logos, setLogos] = useState([]);
     const [controle, setControle] = useState("controleren");
+    const [controleFout, setControleFout] = useState(null);
     useEffect(() => {
         void haalPrintLogos()
             .then((l) => setLogos(Array.isArray(l) ? l : []))
@@ -41,15 +44,20 @@ export function AfleverbriefBuilderPage({ layoutId: layoutIdProp } = {}) {
     const hoogte = useMemo(() => (layout?.orientatie === "landscape" ? layout?.breedte_mm : layout?.hoogte_mm) ?? 297, [layout]);
     const marge = Number(layout?.marge_boven ?? 10);
     const opslaan = async () => {
-        if (!layout || !config || controle !== "gereed")
+        if (!layout || !config || layout.systeem)
             return;
         setBezig(true);
         try {
-            await updateLayout(layout.id, { config: { ...(layout.config ?? {}), afleverbrief: config } });
-            toast.success("Afleverbriefopbouw opgeslagen");
+            const opgeslagen = await bewaarIndeling(layout.id, layout.config, "afleverbrief", config);
+            setLayout((l) => (l ? { ...l, config: opgeslagen } : l));
+            const melding = opgeslagenMelding("Afleverbriefopbouw opgeslagen", controle, controleFout);
+            if (melding.soort === "succes")
+                toast.success(melding.tekst);
+            else
+                toast.warning(melding.tekst);
         }
-        catch {
-            toast.error("Opslaan mislukt");
+        catch (e) {
+            toast.error(foutTekstVan(e));
         }
         finally {
             setBezig(false);
@@ -92,10 +100,10 @@ export function AfleverbriefBuilderPage({ layoutId: layoutIdProp } = {}) {
         }
     };
     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" }), "."] }));
+        return (_jsxs("main", { className: "p-6 text-sm text-muted-foreground", children: ["Kies eerst een layout via ", _jsx(Link, { to: "/layouts-printers/documenten", className: "underline", children: "Layouts" }), "."] }));
     if (loading)
         return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Layout laden\u2026" });
     if (!layout || !config)
         return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Layout niet gevonden." });
-    return (_jsxs("main", { className: "space-y-4 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: "/layouts-printers", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Layouts"] }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold", children: layout.naam }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Afleverbrief per kar \u00B7  ", config.secties.length, " secties"] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutPrinterSelect, { layoutId: layoutId }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void voorbeeldPrinten(), disabled: printen || controle !== "gereed", children: [printen ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-4 w-4" })), "Voorbeeld printen"] }), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { to: "/layouts-printers/blokken/$layoutId", params: { layoutId }, children: "Blokken ontwerpen" }) }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig || controle !== "gereed", children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] })] }), _jsx(FormaatOrientatieBar, { layout: layout, onChange: (patch) => setLayout((l) => (l ? { ...l, ...patch } : l)) }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[400px_1fr]", children: [_jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden lg:sticky lg:top-4", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Secties" }), _jsx(CardDescription, { children: "Voeg blokken toe, wijzig de volgorde en stel elk blok afzonderlijk in." })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(PakbonSectiesPanel, { config: config, onChange: setConfig, beschikbareTypes: AFLEVERBRIEF_SECTIE_TYPES }) })] }), _jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden", children: [_jsxs(CardHeader, { className: "flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Live voorbeeld" }), _jsx(CardDescription, { children: "Voorbeeld van de afleverbrief van \u00E9\u00E9n kar." })] }), _jsxs(Badge, { variant: controle === "afwijking" ? "destructive" : "secondary", children: [controle === "controleren" ? _jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }) : controle === "gereed" ? _jsx(CheckCircle2, { className: "mr-1 h-3 w-3" }) : _jsx(AlertTriangle, { className: "mr-1 h-3 w-3" }), controle === "controleren" ? "Controleren" : controle === "gereed" ? "Afdruk gereed" : "Afwijking gevonden"] })] }), _jsxs(CardContent, { className: "flex min-h-0 flex-1 flex-col overflow-hidden p-0", children: [_jsx(FustKolomVolgorde, { config: config, onChange: setConfig }), _jsx("div", { className: "min-h-0 flex-1 p-4 pt-3", children: _jsx("div", { className: "h-full rounded-md border bg-muted/30 p-2", children: voorbeeldHtml ? (_jsx(PdfVoorbeeld, { html: voorbeeldHtml, breedteMm: breedte, hoogteMm: hoogte, margeMm: marge, onControle: (status) => setControle(status) })) : null }) })] })] })] })] }));
+    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/documenten", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Layouts"] }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold", children: layout.naam }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Afleverbrief per kar \u00B7  ", config.secties.length, " secties"] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutPrinterSelect, { layoutId: layoutId }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void voorbeeldPrinten(), disabled: printen || controle !== "gereed", children: [printen ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-4 w-4" })), "Voorbeeld printen"] }), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { to: "/layouts-printers/blokken/$layoutId", params: { layoutId }, children: "Blokken ontwerpen" }) }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig || Boolean(layout.systeem), children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] })] }), layout.systeem ? _jsx(SysteemLayoutMelding, { layoutId: layout.id, route: "afleverbrief" }) : null, _jsx(FormaatOrientatieBar, { layout: layout, onChange: (patch) => setLayout((l) => (l ? { ...l, ...patch } : l)), vergrendeld: Boolean(layout.systeem) }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[400px_1fr]", children: [_jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden lg:sticky lg:top-4", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Secties" }), _jsx(CardDescription, { children: "Voeg blokken toe, wijzig de volgorde en stel elk blok afzonderlijk in." })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(PakbonSectiesPanel, { config: config, onChange: setConfig, beschikbareTypes: AFLEVERBRIEF_SECTIE_TYPES }) })] }), _jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden", children: [_jsxs(CardHeader, { className: "flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Live voorbeeld" }), _jsx(CardDescription, { children: "Voorbeeld van de afleverbrief van \u00E9\u00E9n kar." })] }), _jsxs(Badge, { variant: controle === "afwijking" ? "destructive" : "secondary", children: [controle === "controleren" ? _jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }) : controle === "gereed" ? _jsx(CheckCircle2, { className: "mr-1 h-3 w-3" }) : _jsx(AlertTriangle, { className: "mr-1 h-3 w-3" }), controle === "controleren" ? "Controleren" : controle === "gereed" ? "Afdruk gereed" : "Afwijking gevonden"] })] }), _jsxs(CardContent, { className: "flex min-h-0 flex-1 flex-col overflow-hidden p-0", children: [_jsx(FustKolomVolgorde, { config: config, onChange: setConfig }), _jsx("div", { className: "min-h-0 flex-1 p-4 pt-3", children: _jsx("div", { className: "h-full rounded-md border bg-muted/30 p-2", children: voorbeeldHtml ? (_jsx(PdfVoorbeeld, { html: voorbeeldHtml, breedteMm: breedte, hoogteMm: hoogte, margeMm: marge, onControle: (status, fout) => { setControle(status); setControleFout(fout ?? null); } })) : null }) })] })] })] })] }));
 }

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

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

package/dist-lib/components/BlokOntwerperPage.js

@@ -6,12 +6,14 @@ import { ArrowLeft, Plus, Save } from "lucide-react";
 import { PakbonSectieEditor, PakbonBlokKaderEditor } from "./PakbonSectiesPanel.js";
 import { PakbonSectiePreview } from "./PakbonPreview.js";
 import { SECTIE_REGISTER, leesAfleverbriefConfig, leesPakbonConfig, nieuweSectie, sectieDef, } from "../lib/pakbonBuilder.js";
-import { updateLayout, useLayoutDetail } from "../lib/useDocumentData.js";
+import { useLayoutDetail } from "../lib/useDocumentData.js";
+import { bewaarIndeling, foutTekstVan, opgeslagenMelding } from "../lib/layoutOpslaan.js";
+import { SysteemLayoutMelding } from "./SysteemLayoutMelding.js";
 import { useLayoutIdParam } from "../lib/useLayoutIdParam.js";
 /** Ontwerp elk pakbon-blok afzonderlijk, los van de volledige pagina. */
 export function BlokOntwerperPage({ layoutId: layoutIdProp } = {}) {
     const layoutId = useLayoutIdParam(layoutIdProp);
-    const { layout, loading } = useLayoutDetail(layoutId ?? "");
+    const { layout, setLayout, loading } = useLayoutDetail(layoutId ?? "");
     const [config, setConfig] = useState(null);
     const [actief, setActief] = useState(null);
     const [toevoegen, setToevoegen] = useState("orderregels");
@@ -44,23 +46,28 @@ export function BlokOntwerperPage({ layoutId: layoutIdProp } = {}) {
             const sleutel = layout.documenttype === "afleverbrief" || layout.documenttype === "veilingbrief"
                 ? "afleverbrief"
                 : "pakbon";
-            await updateLayout(layout.id, { config: { ...(layout.config ?? {}), [sleutel]: config } });
-            toast.success("Blokontwerp opgeslagen");
+            const opgeslagen = await bewaarIndeling(layout.id, layout.config, sleutel, config);
+            setLayout((l) => (l ? { ...l, config: opgeslagen } : l));
+            const melding = opgeslagenMelding("Blokontwerp opgeslagen", "gereed");
+            if (melding.soort === "succes")
+                toast.success(melding.tekst);
+            else
+                toast.warning(melding.tekst);
         }
-        catch {
-            toast.error("Opslaan mislukt");
+        catch (e) {
+            toast.error(foutTekstVan(e));
         }
         finally {
             setBezig(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" }), "."] }));
+        return (_jsxs("main", { className: "p-6 text-sm text-muted-foreground", children: ["Kies eerst een layout via ", _jsx(Link, { to: "/layouts-printers/documenten", 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/pakbon/$layoutId", params: { layoutId }, children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Pakbonopbouw"] }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold", children: "Blokken ontwerpen" }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [layout.naam, " \u00B7 elk blok afzonderlijk vormgeven"] })] })] }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig, children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-[240px_1fr_360px]", children: [_jsxs(Card, { className: "h-fit", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Blokken" }), _jsx(CardDescription, { children: "Kies welk blok je wilt ontwerpen." })] }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [secties.map((s) => (_jsxs("button", { type: "button", onClick: () => setActief(s.id), className: `flex w-full items-center justify-between rounded-md border px-2 py-1.5 text-left text-sm ${s.id === actief ? "border-primary bg-accent" : "hover:bg-accent/50"}`, children: [_jsx("span", { className: "truncate", children: s.titel }), !s.zichtbaar && _jsx(Badge, { variant: "outline", children: "verborgen" })] }, s.id))), secties.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen blokken." }))] }), _jsx(Separator, {}), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: toevoegen, onValueChange: (v) => setToevoegen(v), children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SECTIE_REGISTER.map((d) => (_jsx(SelectItem, { value: d.type, children: d.label }, d.type))) })] }), _jsx(Button, { size: "sm", onClick: () => {
+    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: layout.documenttype === "afleverbrief" || layout.documenttype === "veilingbrief" ? (_jsxs(Link, { to: "/layouts-printers/afleverbrief/$layoutId", params: { layoutId }, children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Afleverbriefopbouw"] })) : (_jsxs(Link, { to: "/layouts-printers/pakbon/$layoutId", params: { layoutId }, children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Pakbonopbouw"] })) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold", children: "Blokken ontwerpen" }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [layout.naam, " \u00B7 elk blok afzonderlijk vormgeven"] })] })] }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig, children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] }), layout.systeem ? _jsx(SysteemLayoutMelding, { layoutId: layout.id, route: "blokken" }) : null, _jsxs("div", { className: "grid gap-4 lg:grid-cols-[240px_1fr_360px]", children: [_jsxs(Card, { className: "h-fit", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Blokken" }), _jsx(CardDescription, { children: "Kies welk blok je wilt ontwerpen." })] }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [secties.map((s) => (_jsxs("button", { type: "button", onClick: () => setActief(s.id), className: `flex w-full items-center justify-between rounded-md border px-2 py-1.5 text-left text-sm ${s.id === actief ? "border-primary bg-accent" : "hover:bg-accent/50"}`, children: [_jsx("span", { className: "truncate", children: s.titel }), !s.zichtbaar && _jsx(Badge, { variant: "outline", children: "verborgen" })] }, s.id))), secties.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen blokken." }))] }), _jsx(Separator, {}), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: toevoegen, onValueChange: (v) => setToevoegen(v), children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SECTIE_REGISTER.map((d) => (_jsx(SelectItem, { value: d.type, children: d.label }, d.type))) })] }), _jsx(Button, { size: "sm", onClick: () => {
                                                     const s = nieuweSectie(toevoegen);
                                                     setConfig({ ...config, secties: [...secties, s] });
                                                     setActief(s.id);

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

@@ -3,8 +3,9 @@ import { type LayoutModel } from "../lib/documentTypes.js";
  * Formaat- en oriëntatiekeuze die in elke ontwerp-editor beschikbaar is.
  * Wijzigingen worden direct opgeslagen en lokaal doorgegeven aan de preview.
  */
-export declare function FormaatOrientatieBar({ layout, onChange, }: {
+export declare function FormaatOrientatieBar({ layout, onChange, vergrendeld, }: {
     layout: LayoutModel;
     onChange: (patch: Partial<LayoutModel>) => void;
+    vergrendeld?: boolean;
 }): import("react").JSX.Element;
 //# sourceMappingURL=FormaatOrientatieBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormaatOrientatieBar.d.ts","sourceRoot":"","sources":["../../src/components/FormaatOrientatieBar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxE;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACjD,+BAgHA"}
+{"version":3,"file":"FormaatOrientatieBar.d.ts","sourceRoot":"","sources":["../../src/components/FormaatOrientatieBar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIxE;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,WAAmB,GACpB,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,+BAiHA"}

package/dist-lib/components/FormaatOrientatieBar.js

@@ -4,12 +4,14 @@ import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger,
 import { RectangleHorizontal, RectangleVertical } from "lucide-react";
 import { PAPIERFORMATEN } from "../lib/documentTypes.js";
 import { updateLayout } from "../lib/useDocumentData.js";
+import { foutTekstVan } from "../lib/layoutOpslaan.js";
 /**
  * Formaat- en oriëntatiekeuze die in elke ontwerp-editor beschikbaar is.
  * Wijzigingen worden direct opgeslagen en lokaal doorgegeven aan de preview.
  */
-export function FormaatOrientatieBar({ layout, onChange, }) {
-    const [bezig, setBezig] = useState(false);
+export function FormaatOrientatieBar({ layout, onChange, vergrendeld = false, }) {
+    const [opslaanBezig, setBezig] = useState(false);
+    const bezig = opslaanBezig || vergrendeld;
     const vrij = layout.papierformaat === "VRIJ";
     const bewaar = async (patch) => {
         onChange(patch);
@@ -17,8 +19,8 @@ export function FormaatOrientatieBar({ layout, onChange, }) {
         try {
             await updateLayout(layout.id, patch);
         }
-        catch {
-            toast.error("Formaat opslaan mislukt");
+        catch (e) {
+            toast.error(`Formaat opslaan mislukt: ${foutTekstVan(e)}`);
         }
         finally {
             setBezig(false);

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

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

package/dist-lib/components/PakbonBuilderPage.js

@@ -10,7 +10,9 @@ import { leesPakbonConfig, pickMethode } from "../lib/pakbonBuilder.js";
 import { renderPakbonDocument, voorbeeldPakbonOrder } from "../lib/pakbonHtml.js";
 import { voorbeeldPrint } from "../lib/voorbeeldPrint.js";
 import { haalPrintLogos } from "../lib/logoLibrary.js";
-import { updateLayout, useLayoutDetail } from "../lib/useDocumentData.js";
+import { useLayoutDetail } from "../lib/useDocumentData.js";
+import { bewaarIndeling, foutTekstVan, opgeslagenMelding } from "../lib/layoutOpslaan.js";
+import { SysteemLayoutMelding } from "./SysteemLayoutMelding.js";
 import { LayoutPrinterSelect } from "./LayoutPrinterSelect.js";
 import { useLayoutIdParam } from "../lib/useLayoutIdParam.js";
 /** Sectiegebaseerde pakbon-builder met live voorbeeld op echte ordergegevens. */
@@ -23,6 +25,7 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
     const [voorbeeldVariant, setVoorbeeldVariant] = useState("full_cart");
     const [logos, setLogos] = useState([]);
     const [controle, setControle] = useState("controleren");
+    const [controleFout, setControleFout] = useState(null);
     useEffect(() => {
         void haalPrintLogos()
             .then((l) => setLogos(Array.isArray(l) ? l : []))
@@ -36,15 +39,20 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
     const hoogte = useMemo(() => (layout?.orientatie === "landscape" ? layout?.breedte_mm : layout?.hoogte_mm) ?? 297, [layout]);
     const marge = Number(layout?.marge_boven ?? 10);
     const opslaan = async () => {
-        if (!layout || !config || controle !== "gereed")
+        if (!layout || !config || layout.systeem)
             return;
         setBezig(true);
         try {
-            await updateLayout(layout.id, { config: { ...(layout.config ?? {}), pakbon: config } });
-            toast.success("Pakbonopbouw opgeslagen");
+            const opgeslagen = await bewaarIndeling(layout.id, layout.config, "pakbon", config);
+            setLayout((l) => (l ? { ...l, config: opgeslagen } : l));
+            const melding = opgeslagenMelding("Pakbonopbouw opgeslagen", controle, controleFout);
+            if (melding.soort === "succes")
+                toast.success(melding.tekst);
+            else
+                toast.warning(melding.tekst);
         }
-        catch {
-            toast.error("Opslaan mislukt");
+        catch (e) {
+            toast.error(foutTekstVan(e));
         }
         finally {
             setBezig(false);
@@ -89,10 +97,10 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
         }
     };
     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" }), "."] }));
+        return (_jsxs("main", { className: "p-6 text-sm text-muted-foreground", children: ["Kies eerst een layout via ", _jsx(Link, { to: "/layouts-printers/documenten", 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: ["Pakbon opbouwen uit secties \u00B7 ", config.secties.length, " secties"] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutPrinterSelect, { layoutId: layoutId }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void voorbeeldPrinten(), disabled: printen || controle !== "gereed", children: [printen ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-4 w-4" })), "Voorbeeld printen"] }), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { to: "/layouts-printers/blokken/$layoutId", params: { layoutId }, children: "Blokken ontwerpen" }) }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig || controle !== "gereed", children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] })] }), _jsx(FormaatOrientatieBar, { layout: layout, onChange: (patch) => setLayout((l) => (l ? { ...l, ...patch } : l)) }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[400px_1fr]", children: [_jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden lg:sticky lg:top-4", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Secties" }), _jsx(CardDescription, { children: "Voeg blokken toe, wijzig de volgorde en stel elk blok afzonderlijk in." })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(PakbonSectiesPanel, { config: config, onChange: setConfig }) })] }), _jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden", children: [_jsxs(CardHeader, { className: "flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Live voorbeeld" }), _jsx(CardDescription, { children: "Bekijk een volle kar of een deelkar met alleen de te verzamelen fusten." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { value: voorbeeldVariant, onValueChange: (value) => setVoorbeeldVariant(value), children: [_jsx(SelectTrigger, { className: "w-48", "aria-label": "Voorbeeldvariant", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "full_cart", children: "Volle kar" }), _jsx(SelectItem, { value: "partial_order", children: "Deelkar" })] })] }), _jsxs(Badge, { variant: controle === "afwijking" ? "destructive" : "secondary", children: [controle === "controleren" ? _jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }) : controle === "gereed" ? _jsx(CheckCircle2, { className: "mr-1 h-3 w-3" }) : _jsx(AlertTriangle, { className: "mr-1 h-3 w-3" }), controle === "controleren" ? "Controleren" : controle === "gereed" ? "Afdruk gereed" : "Afwijking gevonden"] })] })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "h-full rounded-md border bg-muted/30 p-2", children: voorbeeldHtml ? (_jsx(PdfVoorbeeld, { html: voorbeeldHtml, breedteMm: breedte, hoogteMm: hoogte, margeMm: marge, onControle: (status) => setControle(status) })) : null }) })] })] })] }));
+    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/documenten", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Layouts"] }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold", children: layout.naam }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Pakbon opbouwen uit secties \u00B7 ", config.secties.length, " secties"] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutPrinterSelect, { layoutId: layoutId }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void voorbeeldPrinten(), disabled: printen || controle !== "gereed", children: [printen ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-4 w-4" })), "Voorbeeld printen"] }), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { to: "/layouts-printers/blokken/$layoutId", params: { layoutId }, children: "Blokken ontwerpen" }) }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig || Boolean(layout.systeem), children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] })] }), layout.systeem ? _jsx(SysteemLayoutMelding, { layoutId: layout.id, route: "pakbon" }) : null, _jsx(FormaatOrientatieBar, { layout: layout, onChange: (patch) => setLayout((l) => (l ? { ...l, ...patch } : l)), vergrendeld: Boolean(layout.systeem) }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[400px_1fr]", children: [_jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden lg:sticky lg:top-4", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Secties" }), _jsx(CardDescription, { children: "Voeg blokken toe, wijzig de volgorde en stel elk blok afzonderlijk in." })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(PakbonSectiesPanel, { config: config, onChange: setConfig }) })] }), _jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden", children: [_jsxs(CardHeader, { className: "flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Live voorbeeld" }), _jsx(CardDescription, { children: "Bekijk een volle kar of een deelkar met alleen de te verzamelen fusten." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { value: voorbeeldVariant, onValueChange: (value) => setVoorbeeldVariant(value), children: [_jsx(SelectTrigger, { className: "w-48", "aria-label": "Voorbeeldvariant", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "full_cart", children: "Volle kar" }), _jsx(SelectItem, { value: "partial_order", children: "Deelkar" })] })] }), _jsxs(Badge, { variant: controle === "afwijking" ? "destructive" : "secondary", children: [controle === "controleren" ? _jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }) : controle === "gereed" ? _jsx(CheckCircle2, { className: "mr-1 h-3 w-3" }) : _jsx(AlertTriangle, { className: "mr-1 h-3 w-3" }), controle === "controleren" ? "Controleren" : controle === "gereed" ? "Afdruk gereed" : "Afwijking gevonden"] })] })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "h-full rounded-md border bg-muted/30 p-2", children: voorbeeldHtml ? (_jsx(PdfVoorbeeld, { html: voorbeeldHtml, breedteMm: breedte, hoogteMm: hoogte, margeMm: marge, onControle: (status, fout) => { setControle(status); setControleFout(fout ?? null); } })) : null }) })] })] })] }));
 }

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

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

package/dist-lib/components/ProductiebonBuilderPage.js

@@ -7,7 +7,9 @@ import { ProductiebonBlokkenPanel } from "./ProductiebonBlokkenPanel.js";
 import { PdfVoorbeeld } from "./PdfVoorbeeld.js";
 import { FormaatOrientatieBar } from "./FormaatOrientatieBar.js";
 import { leesProductiebonConfig } from "../lib/productiebonBuilder.js";
-import { updateLayout, useLayoutDetail } from "../lib/useDocumentData.js";
+import { useLayoutDetail } from "../lib/useDocumentData.js";
+import { bewaarIndeling, foutTekstVan, opgeslagenMelding } from "../lib/layoutOpslaan.js";
+import { SysteemLayoutMelding } from "./SysteemLayoutMelding.js";
 import { LayoutPrinterSelect } from "./LayoutPrinterSelect.js";
 import { useLayoutIdParam } from "../lib/useLayoutIdParam.js";
 import { renderProductiebonDocument } from "../lib/productiebonHtml.js";
@@ -20,6 +22,7 @@ export function ProductiebonBuilderPage({ layoutId: layoutIdProp } = {}) {
     const [bezig, setBezig] = useState(false);
     const [printen, setPrinten] = useState(false);
     const [controle, setControle] = useState("controleren");
+    const [controleFout, setControleFout] = useState(null);
     useEffect(() => {
         if (layout)
             setConfig(leesProductiebonConfig(layout.config));
@@ -33,17 +36,20 @@ export function ProductiebonBuilderPage({ layoutId: layoutIdProp } = {}) {
         return renderProductiebonDocument({ productiebon: config }, {}, { breedteMm: breedte, hoogteMm: hoogte, margeMm: marge, titel: layout?.naam ?? "Productiebon" });
     }, [config, breedte, hoogte, marge, layout?.naam]);
     const opslaan = async () => {
-        if (!layout || !config || controle !== "gereed")
+        if (!layout || !config || layout.systeem)
             return;
         setBezig(true);
         try {
-            await updateLayout(layout.id, {
-                config: { ...(layout.config ?? {}), productiebon: config },
-            });
-            toast.success("Productiebon opgeslagen");
+            const opgeslagen = await bewaarIndeling(layout.id, layout.config, "productiebon", config);
+            setLayout((l) => (l ? { ...l, config: opgeslagen } : l));
+            const melding = opgeslagenMelding("Productiebon opgeslagen", controle, controleFout);
+            if (melding.soort === "succes")
+                toast.success(melding.tekst);
+            else
+                toast.warning(melding.tekst);
         }
-        catch {
-            toast.error("Opslaan mislukt");
+        catch (e) {
+            toast.error(foutTekstVan(e));
         }
         finally {
             setBezig(false);
@@ -70,10 +76,10 @@ export function ProductiebonBuilderPage({ layoutId: layoutIdProp } = {}) {
         }
     };
     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" }), "."] }));
+        return (_jsxs("main", { className: "p-6 text-sm text-muted-foreground", children: ["Kies eerst een layout via ", _jsx(Link, { to: "/layouts-printers/documenten", 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("div", { className: "flex items-center gap-2", children: [layoutId ? _jsx(LayoutPrinterSelect, { layoutId: layoutId }) : null, _jsxs(Button, { size: "sm", variant: "outline", onClick: voorbeeldPrinten, disabled: printen || controle !== "gereed", children: [printen ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-4 w-4" })), "Voorbeeld printen"] }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig || controle !== "gereed", children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] })] }), _jsx(FormaatOrientatieBar, { layout: layout, onChange: (patch) => setLayout((l) => (l ? { ...l, ...patch } : l)) }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[400px_1fr]", children: [_jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden lg:sticky lg:top-4", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "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." })] }), _jsxs(Badge, { variant: controle === "afwijking" ? "destructive" : "secondary", children: [controle === "controleren" ? _jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }) : controle === "gereed" ? _jsx(CheckCircle2, { className: "mr-1 h-3 w-3" }) : _jsx(AlertTriangle, { className: "mr-1 h-3 w-3" }), controle === "controleren" ? "Controleren" : controle === "gereed" ? "Afdruk gereed" : "Afwijking gevonden"] })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "h-full overflow-hidden rounded-md border bg-muted/30 p-2", children: voorbeeldHtml ? _jsx(PdfVoorbeeld, { html: voorbeeldHtml, breedteMm: breedte, hoogteMm: hoogte, margeMm: marge, onControle: (status) => setControle(status) }) : null }) })] })] })] }));
+    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/documenten", 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: [layoutId ? _jsx(LayoutPrinterSelect, { layoutId: layoutId }) : null, _jsxs(Button, { size: "sm", variant: "outline", onClick: voorbeeldPrinten, disabled: printen || controle !== "gereed", children: [printen ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-4 w-4" })), "Voorbeeld printen"] }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig || Boolean(layout.systeem), children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] })] }), layout.systeem ? _jsx(SysteemLayoutMelding, { layoutId: layout.id, route: "productiebon" }) : null, _jsx(FormaatOrientatieBar, { layout: layout, onChange: (patch) => setLayout((l) => (l ? { ...l, ...patch } : l)), vergrendeld: Boolean(layout.systeem) }), _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." })] }), _jsxs(Badge, { variant: controle === "afwijking" ? "destructive" : "secondary", children: [controle === "controleren" ? _jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }) : controle === "gereed" ? _jsx(CheckCircle2, { className: "mr-1 h-3 w-3" }) : _jsx(AlertTriangle, { className: "mr-1 h-3 w-3" }), controle === "controleren" ? "Controleren" : controle === "gereed" ? "Afdruk gereed" : "Afwijking gevonden"] })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "h-full overflow-hidden rounded-md border bg-muted/30 p-2", children: voorbeeldHtml ? _jsx(PdfVoorbeeld, { html: voorbeeldHtml, breedteMm: breedte, hoogteMm: hoogte, margeMm: marge, onControle: (status, fout) => { setControle(status); setControleFout(fout ?? null); } }) : null }) })] })] })] }));
 }

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

@@ -0,0 +1,6 @@
+/** Melding in de builders: een systeemlayout is niet aanpasbaar; maak een kopie. */
+export declare function SysteemLayoutMelding({ layoutId, route, }: {
+    layoutId: string;
+    route: "pakbon" | "afleverbrief" | "productiebon" | "blokken";
+}): import("react").JSX.Element;
+//# sourceMappingURL=SysteemLayoutMelding.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SysteemLayoutMelding.d.ts","sourceRoot":"","sources":["../../src/components/SysteemLayoutMelding.tsx"],"names":[],"mappings":"AAOA,oFAAoF;AACpF,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,QAAQ,GAAG,cAAc,GAAG,cAAc,GAAG,SAAS,CAAC;CAC/D,+BA0BA"}

package/dist-lib/components/SysteemLayoutMelding.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Button, toast } from "@flowselections/core";
+import { Copy, Lock } from "lucide-react";
+import { dupliceerLayout } from "../lib/useDocumentData.js";
+import { foutTekstVan } from "../lib/layoutOpslaan.js";
+/** Melding in de builders: een systeemlayout is niet aanpasbaar; maak een kopie. */
+export function SysteemLayoutMelding({ layoutId, route, }) {
+    const navigate = useNavigate();
+    const [bezig, setBezig] = useState(false);
+    const kopie = async () => {
+        setBezig(true);
+        try {
+            const nieuwId = await dupliceerLayout(layoutId);
+            if (!nieuwId)
+                throw new Error("Kopie maken mislukt");
+            toast.success("Kopie gemaakt");
+            void navigate({ to: `/layouts-printers/${route}/$layoutId`, params: { layoutId: String(nieuwId) } });
+        }
+        catch (e) {
+            toast.error(foutTekstVan(e, "Kopie maken mislukt"));
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-md border bg-muted/40 p-3 text-sm", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Lock, { className: "h-4 w-4" }), " Systeemlayout \u2013 niet aanpasbaar. Maak een kopie om te wijzigen."] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void kopie(), disabled: bezig, children: [_jsx(Copy, { className: "mr-2 h-4 w-4" }), " Kopie maken"] })] }));
+}