@flowselections/facturen-installatie-techniek 1.3.4 → 1.4.2

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

@@ -1 +1 @@
-{"version":3,"file":"FacturenForInstallatieTechniek.d.ts","sourceRoot":"","sources":["../../src/components/FacturenForInstallatieTechniek.tsx"],"names":[],"mappings":"AAgJA,wBAAgB,8BAA8B,gCAyd7C"}
+{"version":3,"file":"FacturenForInstallatieTechniek.d.ts","sourceRoot":"","sources":["../../src/components/FacturenForInstallatieTechniek.tsx"],"names":[],"mappings":"AAiJA,wBAAgB,8BAA8B,gCAge7C"}

package/dist-lib/components/FacturenForInstallatieTechniek.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { WerkbonPreviewPanel } from "../components/WerkbonPreviewPanel";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { dependencyMessage } from "../lib/dependencies";
 import { DEFAULT_VAT_RATE } from "../lib/config";
 import { supabase } from "@flowselections/core";
 import { Link, useNavigate } from "@tanstack/react-router";
@@ -39,6 +40,7 @@ export function FacturenForInstallatieTechniek() {
     const [paidPeriod, setPaidPeriod] = useState("maand");
     const [open, setOpen] = useState(false);
     const [saving, setSaving] = useState(false);
+    const createRef = useRef(false);
     // bron-tab
     const [sourceType, setSourceType] = useState("work_order");
     const [sources, setSources] = useState([]);
@@ -136,7 +138,7 @@ export function FacturenForInstallatieTechniek() {
             if (active)
                 setSources(rows);
         })
-            .catch(() => toast.error("Bronnen konden niet worden geladen"))
+            .catch((e) => toast.error(dependencyMessage(e, sourceType === "work_order" ? "werkbonnen" : "offertes", "Bronnen")))
             .finally(() => {
             if (active)
                 setSourcesLoading(false);
@@ -181,6 +183,9 @@ export function FacturenForInstallatieTechniek() {
             toast.error("Kies eerst een bron");
             return;
         }
+        if (createRef.current)
+            return;
+        createRef.current = true;
         setSaving(true);
         try {
             const sourceLines = await fetchSourceLines(sourceType, source.id);
@@ -204,6 +209,7 @@ export function FacturenForInstallatieTechniek() {
             toast.error("Factuur aanmaken mislukt");
         }
         finally {
+            createRef.current = false;
             setSaving(false);
         }
     };
@@ -213,6 +219,9 @@ export function FacturenForInstallatieTechniek() {
             toast.error("Vul een klantnaam en minimaal één regel in");
             return;
         }
+        if (createRef.current)
+            return;
+        createRef.current = true;
         setSaving(true);
         try {
             const result = await createInvoiceFromSource({
@@ -236,6 +245,7 @@ export function FacturenForInstallatieTechniek() {
             toast.error("Factuur aanmaken mislukt");
         }
         finally {
+            createRef.current = false;
             setSaving(false);
         }
     };

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

@@ -1 +1 @@
-{"version":3,"file":"FactuurDetailPage.d.ts","sourceRoot":"","sources":["../../src/components/FactuurDetailPage.tsx"],"names":[],"mappings":"AAoDA,wBAAgB,iBAAiB,gCA+ahC"}
+{"version":3,"file":"FactuurDetailPage.d.ts","sourceRoot":"","sources":["../../src/components/FactuurDetailPage.tsx"],"names":[],"mappings":"AAoDA,wBAAgB,iBAAiB,gCA6bhC"}

package/dist-lib/components/FactuurDetailPage.js

@@ -33,6 +33,9 @@ export function FactuurDetailPage() {
     const siblingRetryRef = useRef(false);
     const sheetRef = useRef(null);
     const autoOpenedRef = useRef(false);
+    const sendingRef = useRef(false);
+    const statusRef = useRef(false);
+    const [senderChecked, setSenderChecked] = useState(false);
     const loadSeqRef = useRef(0);
     const load = useCallback(async () => {
         const seq = ++loadSeqRef.current;
@@ -103,6 +106,9 @@ export function FactuurDetailPage() {
         });
     };
     const changeStatus = async (status) => {
+        if (statusRef.current)
+            return;
+        statusRef.current = true;
         setSaving(true);
         try {
             await updateInvoiceStatus(id, status);
@@ -113,6 +119,7 @@ export function FactuurDetailPage() {
             toast.error("Status bijwerken mislukt");
         }
         finally {
+            statusRef.current = false;
             setSaving(false);
         }
     };
@@ -150,10 +157,11 @@ export function FactuurDetailPage() {
             message: `Beste ${details.customer_attention || details.customer_name || "klant"},\n\nIn de bijlage vindt u factuur ${num}.\n\nMet vriendelijke groet,\n${company}`,
         });
         setSender(null);
+        setSenderChecked(false);
         setAttachPdf(true);
         setPreparedPdf("");
         setMailToTouched(false);
-        fetchInvoiceEmailPurpose().then(fetchSenderForPurpose).then(setSender).catch(() => setSender(null));
+        fetchInvoiceEmailPurpose().then(fetchSenderForPurpose).then(setSender).catch(() => setSender(null)).finally(() => setSenderChecked(true));
         setSendOpen(true);
         if (!sheetRef.current)
             return;
@@ -192,6 +200,10 @@ export function FactuurDetailPage() {
         }
         if (!invoice)
             return;
+        if (senderChecked && !sender) {
+            toast.error("Er is geen afzender ingesteld. Stel die in bij Instellingen → Factuur e-mail.");
+            return;
+        }
         if (!attachPdf || !preparedPdf) {
             toast.error("Vink de PDF-bijlage aan voordat u de factuur verzendt");
             return;
@@ -204,8 +216,11 @@ export function FactuurDetailPage() {
     };
     const doSend = async () => {
         setConfirmOpen(false);
+        if (sendingRef.current)
+            return;
         if (!invoice || !isValidEmail(mail.to) || !attachPdf || !preparedPdf)
             return;
+        sendingRef.current = true;
         const targetInvoice = nextInvoice ?? prevInvoice;
         setSaving(true);
         try {
@@ -242,6 +257,7 @@ export function FactuurDetailPage() {
             toast.error(e instanceof Error ? e.message : "Verzenden mislukt");
         }
         finally {
+            sendingRef.current = false;
             setSaving(false);
         }
     };
@@ -258,5 +274,5 @@ export function FactuurDetailPage() {
     }
     const isConcept = invoice.status === "concept";
     const wasSent = Boolean(invoice.sent_at);
-    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "sticky top-16 z-20 -mx-6 flex flex-wrap items-center gap-3 border-b border-border/60 bg-background px-6 py-3", children: [_jsx(Button, { asChild: true, variant: "ghost", size: "sm", children: _jsxs(Link, { to: "/facturen-installatietechniek", className: "gap-1", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Overzicht"] }) }), _jsx("h1", { className: "text-xl font-semibold", children: invoice.invoice_number ?? "Concept" }), _jsxs(Badge, { variant: "outline", children: [SOURCE_LABELS[invoice.source_type] ?? invoice.source_type, invoice.source_number ? ` ${invoice.source_number}` : ""] }), invoice.sent_at ? (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["Verzonden ", new Date(invoice.sent_at).toLocaleString("nl-NL"), " aan ", invoice.sent_to] })) : null, _jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1 rounded-full border border-border bg-card p-1", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 rounded-full", "aria-label": "Vorige factuur op de lijst", title: "Vorige factuur op de lijst", disabled: editing || loading || siblingsLoading || !prevInvoice, onClick: () => goToSibling(prevInvoice?.id), children: _jsx(ChevronLeft, { className: "h-5 w-5" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 rounded-full", "aria-label": "Volgende factuur op de lijst", title: "Volgende factuur op de lijst", disabled: editing || loading || siblingsLoading || !nextInvoice, onClick: () => goToSibling(nextInvoice?.id), children: _jsx(ChevronRight, { className: "h-5 w-5" }) })] }), editing ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", onClick: () => { setEditing(false); void load(); }, disabled: saving, children: [_jsx(X, { className: "mr-2 h-4 w-4" }), "Annuleren"] }), _jsxs(Button, { onClick: save, disabled: saving, children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), saving ? "Opslaan…" : "Opslaan"] })] })) : (_jsxs(_Fragment, { children: [!wasSent ? (_jsxs(Button, { variant: "outline", onClick: () => (isConcept ? setEditing(true) : toast.error("Alleen conceptfacturen kunnen worden bewerkt. Zet de status terug op Concept.")), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Bewerken"] })) : null, _jsxs(Button, { onClick: () => void openSend(), children: [_jsx(Mail, { className: "mr-2 h-4 w-4" }), wasSent ? "Opnieuw verzenden" : "Verzenden"] })] })), _jsx("div", { className: "w-44", children: _jsxs(Select, { value: invoice.status, onValueChange: (v) => changeStatus(v), disabled: saving || editing, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: Object.entries(STATUS_LABELS).map(([value, label]) => (_jsx(SelectItem, { value: value, children: label }, value))) })] }) })] })] }), _jsx("div", { children: _jsx("div", { className: "min-w-0", children: _jsx(InvoiceA4Preview, { ref: sheetRef, branding: invoice.branding_snapshot ?? emptyInvoiceBranding(), details: details, lines: lines, invoiceNumber: invoice.invoice_number, logoUrl: logoUrl, printable: !editing, editable: editing, defaultVat: String(Number(invoice.vat_rate) || DEFAULT_VAT_RATE), onDetailsChange: setDetails, onLinesChange: setLines }) }) }), _jsx(Dialog, { open: sendOpen, onOpenChange: changeSendOpen, children: _jsxs(DialogContent, { className: "flex max-h-[92vh] max-w-[calc(100vw-2rem)] flex-col sm:max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Factuur verzenden" }) }), _jsxs("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto pr-1", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "mail-to", children: "E-mailadres klant" }), _jsx(Input, { id: "mail-to", type: "email", value: mail.to, onChange: (e) => setMail({ ...mail, to: e.target.value }), onBlur: () => setMailToTouched(true), placeholder: "naam@bedrijf.nl", "aria-invalid": mailToTouched && !isValidEmail(mail.to) }), mailToTouched && !isValidEmail(mail.to) ? (_jsx("p", { className: "text-xs text-destructive", children: "Vul een geldig e-mailadres in, bijvoorbeeld naam@bedrijf.nl" })) : null] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "mail-subject", children: "Onderwerp" }), _jsx(Input, { id: "mail-subject", value: mail.subject, onChange: (e) => setMail({ ...mail, subject: e.target.value }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "mail-msg", children: "Bericht" }), _jsx(Textarea, { id: "mail-msg", rows: 6, value: mail.message, onChange: (e) => setMail({ ...mail, message: e.target.value }) })] }), _jsxs("label", { className: "flex cursor-pointer items-start gap-3 rounded-md border border-border p-3", children: [_jsx("input", { type: "checkbox", checked: attachPdf, onChange: (event) => setAttachPdf(event.target.checked), className: "mt-1 h-4 w-4 accent-primary" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium", children: [preparedPdf ? _jsx(FileCheck2, { className: "h-4 w-4 text-primary" }) : _jsx(Download, { className: "h-4 w-4" }), "Factuur als PDF meesturen"] }), _jsx("span", { className: "mt-1 block truncate text-xs text-muted-foreground", children: preparingPdf ? "PDF wordt aangemaakt en gedownload…" : preparedPdf ? `${pdfFilename} is gedownload en klaar als bijlage.` : "PDF kon niet worden voorbereid." })] })] }), !attachPdf ? _jsx("p", { className: "text-xs text-destructive", children: "Vink de PDF aan om deze e-mail te kunnen versturen." }) : null, _jsxs("p", { className: "text-xs text-muted-foreground", children: [sender ? _jsxs(_Fragment, { children: ["Verzonden vanaf ", _jsx("span", { className: "font-medium text-foreground", children: sender.account_email }), ". "] }) : _jsx("span", { className: "text-destructive", children: "Geen afzender ingesteld (Instellingen \u2192 Factuur e-mail). " }), "De factuur wordt als PDF-bijlage aangeboden aan de e-mailmodule."] }), _jsxs(Button, { className: "w-full", onClick: send, disabled: saving || preparingPdf || !attachPdf || !preparedPdf || !isValidEmail(mail.to), children: [_jsx(Mail, { className: "mr-2 h-4 w-4" }), saving ? "Bezig…" : preparingPdf ? "PDF voorbereiden…" : "Verzenden met PDF"] })] })] }) }), _jsx(Dialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Ander e-mailadres dan bekend" }) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [knownEmail ? (_jsxs(_Fragment, { children: ["Dit adres wijkt af van het bekende adres van de klant (", _jsx("span", { className: "font-medium text-foreground", children: knownEmail }), ")."] })) : (_jsx(_Fragment, { children: "Er is geen e-mailadres van deze klant bekend." })), " ", "Weet je zeker dat je naar ", _jsx("span", { className: "font-medium text-foreground", children: mail.to.trim() }), " wilt verzenden?"] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setConfirmOpen(false), children: "Annuleren" }), _jsx(Button, { onClick: () => void doSend(), disabled: saving, children: "Toch verzenden" })] })] }) })] }));
+    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "sticky top-16 z-20 -mx-6 flex flex-wrap items-center gap-3 border-b border-border/60 bg-background px-6 py-3", children: [_jsx(Button, { asChild: true, variant: "ghost", size: "sm", children: _jsxs(Link, { to: "/facturen-installatietechniek", className: "gap-1", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Overzicht"] }) }), _jsx("h1", { className: "text-xl font-semibold", children: invoice.invoice_number ?? "Concept" }), _jsxs(Badge, { variant: "outline", children: [SOURCE_LABELS[invoice.source_type] ?? invoice.source_type, invoice.source_number ? ` ${invoice.source_number}` : ""] }), invoice.sent_at ? (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["Verzonden ", new Date(invoice.sent_at).toLocaleString("nl-NL"), " aan ", invoice.sent_to] })) : null, _jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1 rounded-full border border-border bg-card p-1", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 rounded-full", "aria-label": "Vorige factuur op de lijst", title: "Vorige factuur op de lijst", disabled: editing || loading || siblingsLoading || !prevInvoice, onClick: () => goToSibling(prevInvoice?.id), children: _jsx(ChevronLeft, { className: "h-5 w-5" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 rounded-full", "aria-label": "Volgende factuur op de lijst", title: "Volgende factuur op de lijst", disabled: editing || loading || siblingsLoading || !nextInvoice, onClick: () => goToSibling(nextInvoice?.id), children: _jsx(ChevronRight, { className: "h-5 w-5" }) })] }), editing ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", onClick: () => { setEditing(false); void load(); }, disabled: saving, children: [_jsx(X, { className: "mr-2 h-4 w-4" }), "Annuleren"] }), _jsxs(Button, { onClick: save, disabled: saving, children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), saving ? "Opslaan…" : "Opslaan"] })] })) : (_jsxs(_Fragment, { children: [!wasSent ? (_jsxs(Button, { variant: "outline", onClick: () => (isConcept ? setEditing(true) : toast.error("Alleen conceptfacturen kunnen worden bewerkt. Zet de status terug op Concept.")), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Bewerken"] })) : null, _jsxs(Button, { onClick: () => void openSend(), children: [_jsx(Mail, { className: "mr-2 h-4 w-4" }), wasSent ? "Opnieuw verzenden" : "Verzenden"] })] })), _jsx("div", { className: "w-44", children: _jsxs(Select, { value: invoice.status, onValueChange: (v) => changeStatus(v), disabled: saving || editing, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: Object.entries(STATUS_LABELS).map(([value, label]) => (_jsx(SelectItem, { value: value, children: label }, value))) })] }) })] })] }), _jsx("div", { children: _jsx("div", { className: "min-w-0", children: _jsx(InvoiceA4Preview, { ref: sheetRef, branding: invoice.branding_snapshot ?? emptyInvoiceBranding(), details: details, lines: lines, invoiceNumber: invoice.invoice_number, logoUrl: logoUrl, printable: !editing, editable: editing, defaultVat: String(Number(invoice.vat_rate) || DEFAULT_VAT_RATE), onDetailsChange: setDetails, onLinesChange: setLines }) }) }), _jsx(Dialog, { open: sendOpen, onOpenChange: changeSendOpen, children: _jsxs(DialogContent, { className: "flex max-h-[92vh] max-w-[calc(100vw-2rem)] flex-col sm:max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Factuur verzenden" }) }), _jsxs("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto pr-1", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "mail-to", children: "E-mailadres klant" }), _jsx(Input, { id: "mail-to", type: "email", value: mail.to, onChange: (e) => setMail({ ...mail, to: e.target.value }), onBlur: () => setMailToTouched(true), placeholder: "naam@bedrijf.nl", "aria-invalid": mailToTouched && !isValidEmail(mail.to) }), mailToTouched && !isValidEmail(mail.to) ? (_jsx("p", { className: "text-xs text-destructive", children: "Vul een geldig e-mailadres in, bijvoorbeeld naam@bedrijf.nl" })) : null] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "mail-subject", children: "Onderwerp" }), _jsx(Input, { id: "mail-subject", value: mail.subject, onChange: (e) => setMail({ ...mail, subject: e.target.value }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "mail-msg", children: "Bericht" }), _jsx(Textarea, { id: "mail-msg", rows: 6, value: mail.message, onChange: (e) => setMail({ ...mail, message: e.target.value }) })] }), _jsxs("label", { className: "flex cursor-pointer items-start gap-3 rounded-md border border-border p-3", children: [_jsx("input", { type: "checkbox", checked: attachPdf, onChange: (event) => setAttachPdf(event.target.checked), className: "mt-1 h-4 w-4 accent-primary" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium", children: [preparedPdf ? _jsx(FileCheck2, { className: "h-4 w-4 text-primary" }) : _jsx(Download, { className: "h-4 w-4" }), "Factuur als PDF meesturen"] }), _jsx("span", { className: "mt-1 block truncate text-xs text-muted-foreground", children: preparingPdf ? "PDF wordt aangemaakt en gedownload…" : preparedPdf ? `${pdfFilename} is gedownload en klaar als bijlage.` : "PDF kon niet worden voorbereid." })] })] }), !attachPdf ? _jsx("p", { className: "text-xs text-destructive", children: "Vink de PDF aan om deze e-mail te kunnen versturen." }) : null, _jsxs("p", { className: "text-xs text-muted-foreground", children: [!senderChecked ? _jsx(_Fragment, { children: "Afzender controleren\u2026 " }) : sender ? _jsxs(_Fragment, { children: ["Verzonden vanaf ", _jsx("span", { className: "font-medium text-foreground", children: sender.account_email }), ". "] }) : _jsx("span", { className: "text-destructive", children: "Geen afzender ingesteld (Instellingen \u2192 Factuur e-mail). " }), "De factuur wordt als PDF-bijlage aangeboden aan de e-mailmodule."] }), _jsxs(Button, { className: "w-full", onClick: send, disabled: saving || preparingPdf || (senderChecked && !sender) || !attachPdf || !preparedPdf || !isValidEmail(mail.to), children: [_jsx(Mail, { className: "mr-2 h-4 w-4" }), saving ? "Bezig…" : preparingPdf ? "PDF voorbereiden…" : "Verzenden met PDF"] })] })] }) }), _jsx(Dialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Ander e-mailadres dan bekend" }) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [knownEmail ? (_jsxs(_Fragment, { children: ["Dit adres wijkt af van het bekende adres van de klant (", _jsx("span", { className: "font-medium text-foreground", children: knownEmail }), ")."] })) : (_jsx(_Fragment, { children: "Er is geen e-mailadres van deze klant bekend." })), " ", "Weet je zeker dat je naar ", _jsx("span", { className: "font-medium text-foreground", children: mail.to.trim() }), " wilt verzenden?"] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setConfirmOpen(false), children: "Annuleren" }), _jsx(Button, { onClick: () => void doSend(), disabled: saving, children: "Toch verzenden" })] })] }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"InvoiceA4Preview.d.ts","sourceRoot":"","sources":["../../src/components/InvoiceA4Preview.tsx"],"names":[],"mappings":"AAKA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,eAAe,EACpB,KAAK,cAAc,EAEpB,MAAM,iBAAiB,CAAC;AAIzB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,eAAe,CAAC;IAC1B,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACxC,6EAA6E;IAC7E,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C,CAAC;AA+CF,eAAO,MAAM,gBAAgB,+FA8K3B,CAAC"}
+{"version":3,"file":"InvoiceA4Preview.d.ts","sourceRoot":"","sources":["../../src/components/InvoiceA4Preview.tsx"],"names":[],"mappings":"AAMA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,eAAe,EACpB,KAAK,cAAc,EAEpB,MAAM,iBAAiB,CAAC;AAIzB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,eAAe,CAAC;IAC1B,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACxC,6EAA6E;IAC7E,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C,CAAC;AAqDF,eAAO,MAAM,gBAAgB,+FA4K3B,CAAC"}

package/dist-lib/components/InvoiceA4Preview.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useState } from "react";
-import { DEFAULT_VAT_RATE, VAT_OPTIONS as CONFIG_VAT_OPTIONS } from "../lib/config";
+import { DEFAULT_VAT_RATE, SEARCH_DEBOUNCE_MS, VAT_OPTIONS as CONFIG_VAT_OPTIONS } from "../lib/config";
+import { dependencyMessage } from "../lib/dependencies";
 import { useServerFn } from "@tanstack/react-start";
 import { Button, Input, Popover, PopoverContent, PopoverTrigger } from "@flowselections/core";
 import { ChevronDown, Package, Plus, Printer, Search, Trash2 } from "lucide-react";
-import { editLineToBillable, emptyEditLine, fetchCustomers, fetchPackages, formatCents, } from "../lib/facturen";
+import { editLineToBillable, emptyEditLine, searchCustomers, fetchPackages, formatCents, } from "../lib/facturen";
 import { listInvoiceArticles } from "../lib/articles.functions";
 import { ArticlePhoto } from "./ArticlePhoto";
 const VAT_OPTIONS = CONFIG_VAT_OPTIONS;
@@ -13,37 +14,47 @@ function CustomerPicker({ details, onDetailsChange, onPick }) {
     const [q, setQ] = useState("");
     const [items, setItems] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
     useEffect(() => {
-        if (!open || items.length)
+        if (!open)
             return;
+        let active = true;
         setLoading(true);
-        fetchCustomers().then((r) => setItems(Array.isArray(r) ? r : [])).catch(() => setItems([])).finally(() => setLoading(false));
-    }, [open, items.length]);
-    const term = q.trim().toLowerCase();
-    const safe = Array.isArray(items) ? items : [];
-    const filtered = term ? safe.filter((c) => `${c.name ?? ""} ${c.customer_number ?? ""} ${c.billing_city ?? ""}`.toLowerCase().includes(term)) : safe;
-    return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { value: details.customer_name, placeholder: "Klantnaam", onChange: (e) => onDetailsChange?.({ ...details, customer_name: e.target.value }), className: "w-full rounded-sm border border-dashed border-border bg-transparent px-1 py-0.5 font-semibold outline-none focus:border-primary" }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "h-6 shrink-0 px-1.5 print:hidden", "aria-label": "Kies klant", children: _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { align: "start", className: "w-80 p-2", children: [_jsx(Input, { autoFocus: true, placeholder: "Zoek klant\u2026", value: q, onChange: (e) => setQ(e.target.value) }), _jsx("div", { className: "mt-2 max-h-64 overflow-y-auto", children: loading ? _jsx("p", { className: "p-2 text-xs text-muted-foreground", children: "Laden\u2026" }) : filtered.length === 0 ? _jsx("p", { className: "p-2 text-xs text-muted-foreground", children: "Geen klanten gevonden." }) : filtered.map((c) => (_jsxs("button", { type: "button", onClick: () => { onPick(c); setOpen(false); setQ(""); }, className: "block w-full rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent", children: [_jsx("div", { className: "font-medium", children: c.name ?? "—" }), _jsx("div", { className: "text-xs text-muted-foreground", children: [c.customer_number, c.billing_city].filter(Boolean).join(" · ") })] }, c.id))) })] })] })] }));
+        const t = setTimeout(() => {
+            searchCustomers(q)
+                .then((r) => { if (active) {
+                setItems(Array.isArray(r) ? r : []);
+                setError("");
+            } })
+                .catch((e) => { if (active) {
+                setItems([]);
+                setError(dependencyMessage(e, "klanten", "Klanten"));
+            } })
+                .finally(() => { if (active)
+                setLoading(false); });
+        }, SEARCH_DEBOUNCE_MS);
+        return () => { active = false; clearTimeout(t); };
+    }, [open, q]);
+    const filtered = Array.isArray(items) ? items : [];
+    return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { value: details.customer_name, placeholder: "Klantnaam", onChange: (e) => onDetailsChange?.({ ...details, customer_name: e.target.value }), className: "w-full rounded-sm border border-dashed border-border bg-transparent px-1 py-0.5 font-semibold outline-none focus:border-primary" }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "h-6 shrink-0 px-1.5 print:hidden", "aria-label": "Kies klant", children: _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { align: "start", className: "w-80 p-2", children: [_jsx(Input, { autoFocus: true, placeholder: "Zoek klant\u2026", value: q, onChange: (e) => setQ(e.target.value) }), _jsx("div", { className: "mt-2 max-h-64 overflow-y-auto", children: error ? _jsx("p", { className: "p-2 text-xs text-destructive", children: error }) : loading ? _jsx("p", { className: "p-2 text-xs text-muted-foreground", children: "Laden\u2026" }) : filtered.length === 0 ? _jsx("p", { className: "p-2 text-xs text-muted-foreground", children: "Geen klanten gevonden." }) : filtered.map((c) => (_jsxs("button", { type: "button", onClick: () => { onPick(c); setOpen(false); setQ(""); }, className: "block w-full rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent", children: [_jsx("div", { className: "font-medium", children: c.name ?? "—" }), _jsx("div", { className: "text-xs text-muted-foreground", children: [c.customer_number, c.billing_city].filter(Boolean).join(" · ") })] }, c.id))) })] })] })] }));
 }
 export const InvoiceA4Preview = forwardRef(function InvoiceA4Preview({ branding, details, lines, invoiceNumber, numberIsProvisional, logoUrl, printable = true, editable = false, defaultVat = String(DEFAULT_VAT_RATE), onDetailsChange, onLinesChange, onCustomerPick }, ref) {
     const safeLines = Array.isArray(lines) ? lines : [];
     const listArticles = useServerFn(listInvoiceArticles);
     const [articles, setArticles] = useState([]);
-    const [articlesLoading, setArticlesLoading] = useState(false);
     const articleIds = safeLines.map((line) => line.articleId).filter((id) => Boolean(id));
+    const idsKey = [...new Set(articleIds)].sort().join(",");
     useEffect(() => {
-        if (!editable && articleIds.length === 0)
+        if (!idsKey)
             return;
         let active = true;
-        setArticlesLoading(true);
-        listArticles()
+        listArticles({ data: { ids: idsKey.split(",") } })
             .then((result) => { if (active)
             setArticles(Array.isArray(result) ? result : []); })
             .catch(() => { if (active)
-            setArticles([]); })
-            .finally(() => { if (active)
-            setArticlesLoading(false); });
+            setArticles([]); });
         return () => { active = false; };
-    }, [editable, listArticles, articleIds.join(",")]);
+    }, [listArticles, idsKey]);
     const articleById = useMemo(() => new Map(articles.map((article) => [article.id, article])), [articles]);
     const computed = safeLines.map(editLineToBillable);
     const subtotal = computed.reduce((s, l) => s + (l.line_total_cents ?? 0), 0);
@@ -62,26 +73,56 @@ export const InvoiceA4Preview = forwardRef(function InvoiceA4Preview({ branding,
     return (_jsxs("div", { className: "space-y-2", children: [printable ? (_jsx("div", { className: "flex justify-end print:hidden", children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => window.print(), children: [_jsx(Printer, { className: "mr-2 h-4 w-4" }), "Afdrukken"] }) })) : null, _jsxs("article", { ref: ref, className: "invoice-print-target mx-auto flex min-h-[1123px] w-full max-w-[794px] flex-col bg-card text-card-foreground shadow-sm ring-1 ring-border", style: { "--invoice-primary": branding.primary_color, "--invoice-secondary": branding.secondary_color }, children: [_jsxs("header", { className: "flex h-36 items-stretch bg-[var(--invoice-primary)] px-8 py-4 text-primary-foreground", children: [_jsxs("div", { className: "flex flex-1 items-center gap-3", children: [_jsx("div", { className: "flex h-full items-center", children: logoUrl ? _jsx("img", { src: logoUrl, alt: `${branding.company_name} logo`, crossOrigin: "anonymous", className: "max-h-full max-w-56 object-contain" }) : _jsx("span", { className: "text-xs opacity-75", children: "BEDRIJFSLOGO" }) }), branding.show_company_name !== false ? _jsx("div", { className: "text-2xl font-semibold", children: branding.company_name || "Bedrijfsnaam" }) : null] }), _jsx("div", { className: "flex flex-col items-start justify-center text-left text-[11px] leading-4", children: contact.map((v) => _jsx("div", { children: v }, v)) })] }), _jsxs("div", { className: "flex flex-1 flex-col px-10 py-8 text-xs", children: [_jsxs("div", { className: "mb-8 flex items-start justify-between gap-8", children: [_jsxs("div", { className: "w-64 space-y-0.5 leading-5", children: [editable && onCustomerPick ? (_jsx(CustomerPicker, { details: details, onDetailsChange: onDetailsChange, onPick: onCustomerPick })) : (F({ k: "customer_name", placeholder: "Klantnaam", className: "font-semibold" })), editable || details.customer_attention ? _jsx("div", { children: F({ k: "customer_attention", placeholder: "T.a.v." }) }) : null, _jsx("div", { children: F({ k: "customer_address", placeholder: "Adres" }) }), _jsxs("div", { className: "flex gap-1", children: [F({ k: "customer_postal_code", placeholder: "Postcode", className: "w-24" }), F({ k: "customer_city", placeholder: "Plaats" })] }), editable || details.customer_vat_number ? _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "shrink-0", children: "Btw-nr:" }), F({ k: "customer_vat_number", placeholder: "—" })] }) : null] }), _jsxs("div", { className: "min-w-72", children: [_jsx("h2", { className: "mb-3 text-2xl font-semibold", children: "FACTUUR" }), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] items-center gap-x-5 gap-y-1", children: [_jsx("dt", { children: "Factuurnummer" }), _jsxs("dd", { className: "font-medium", children: [number, numberIsProvisional && invoiceNumber ? _jsx("span", { className: "ml-1 text-[10px] font-normal text-muted-foreground print:hidden", children: "(voorlopig)" }) : null] }), _jsx("dt", { children: "Factuurdatum" }), _jsx("dd", { children: editable ? F({ k: "invoice_date", placeholder: "", type: "date" }) : fmtDate(details.invoice_date) }), _jsx("dt", { children: "Betaaltermijn" }), _jsx("dd", { children: editable ? _jsxs("span", { className: "flex items-center gap-1", children: [F({ k: "payment_term_days", placeholder: "30", className: "w-14" }), "dagen"] }) : `${details.payment_term_days || branding.payment_term_days} dagen` }), _jsx("dt", { children: "Vervaldatum" }), _jsx("dd", { children: formatDueDate(details.invoice_date, details.payment_term_days) }), _jsx("dt", { children: "Debiteurnummer" }), _jsx("dd", { children: F({ k: "debtor_number", placeholder: "—" }) }), _jsx("dt", { children: "Referentie" }), _jsx("dd", { children: F({ k: "reference", placeholder: "—" }) }), _jsx("dt", { children: "Werkbonnummer" }), _jsx("dd", { children: F({ k: "source_number", placeholder: "—" }) }), _jsx("dt", { children: "Werkadres" }), _jsx("dd", { children: F({ k: "work_address", placeholder: "—" }) }), _jsx("dt", { children: "Uitvoerdatum" }), _jsx("dd", { children: editable ? F({ k: "execution_date", placeholder: "", type: "date" }) : fmtDate(details.execution_date) })] })] })] }), _jsxs("table", { className: "w-full table-fixed border-collapse text-left", children: [_jsx("thead", { className: "border-y border-foreground/30", children: _jsxs("tr", { children: [_jsx("th", { className: "w-[44%] py-2", children: "Omschrijving" }), _jsx("th", { className: "w-[12%] py-2 text-right", children: "Aantal" }), _jsx("th", { className: "w-[15%] py-2 text-right", children: "Prijs" }), _jsx("th", { className: "w-[11%] py-2 text-right", children: "Btw" }), _jsx("th", { className: "w-[15%] py-2 text-right", children: "Totaal" }), editable ? _jsx("th", { className: "w-[3%]" }) : null] }) }), _jsx("tbody", { children: safeLines.length ? safeLines.map((line, i) => {
                                             const c = computed[i];
                                             return (_jsx("tr", { className: "border-b border-border/60 align-top", children: editable ? (_jsxs(_Fragment, { children: [_jsx("td", { className: "py-1 pr-2", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("textarea", { rows: 1, value: line.description, placeholder: "Omschrijving", readOnly: Boolean(line.articleId), onChange: (e) => setL(i, { description: e.target.value }), className: "min-w-0 flex-1 resize-y rounded-sm border border-dashed border-border bg-transparent px-1 py-0.5 outline-none focus:border-primary read-only:border-transparent read-only:bg-muted/40" }), line.articleId ? _jsx(ArticlePhoto, { src: articleById.get(line.articleId)?.photo_url ?? line.photoUrl, alt: line.description, className: "h-9 w-9" }) : null] }) }), _jsx("td", { className: "py-1", children: _jsx("input", { value: line.quantity, onChange: (e) => setL(i, { quantity: e.target.value }), className: "w-full rounded-sm border border-dashed border-border bg-transparent px-1 py-0.5 text-right outline-none focus:border-primary" }) }), _jsx("td", { className: "py-1 pl-1", children: _jsx("input", { value: line.price, placeholder: "0,00", readOnly: Boolean(line.articleId), onChange: (e) => setL(i, { price: e.target.value }), className: "w-full rounded-sm border border-dashed border-border bg-transparent px-1 py-0.5 text-right outline-none focus:border-primary read-only:border-transparent read-only:bg-muted/40" }) }), _jsx("td", { className: "py-1 pl-1", children: _jsx("select", { value: line.vat, disabled: Boolean(line.articleId), onChange: (e) => setL(i, { vat: e.target.value }), className: "w-full rounded-sm border border-dashed border-border bg-transparent px-0.5 py-0.5 text-right outline-none disabled:border-transparent disabled:bg-muted/40 disabled:opacity-100", children: [...new Set([...VAT_OPTIONS, line.vat])].map((v) => _jsxs("option", { value: v, children: [v, "%"] }, v)) }) }), _jsx("td", { className: "py-1.5 text-right", children: formatCents(c.line_total_cents) }), _jsx("td", { className: "py-1 text-right print:hidden", children: _jsx("button", { type: "button", "aria-label": "Regel verwijderen", onClick: () => onLinesChange?.(safeLines.filter((_, idx) => idx !== i)), className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) })] })) : (_jsxs(_Fragment, { children: [_jsx("td", { className: "whitespace-pre-wrap break-words py-2 pr-3", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "min-w-0 flex-1", children: line.description || "—" }), line.articleId ? _jsx(ArticlePhoto, { src: articleById.get(line.articleId)?.photo_url ?? line.photoUrl, alt: line.description, className: "h-9 w-9" }) : null] }) }), _jsxs("td", { className: "py-2 text-right", children: [c.quantity, " ", line.unit] }), _jsx("td", { className: "py-2 text-right", children: formatCents(c.unit_price_cents) }), _jsxs("td", { className: "py-2 text-right", children: [c.vat_rate, "%"] }), _jsx("td", { className: "py-2 text-right", children: formatCents(c.line_total_cents) })] })) }, i));
-                                        }) : _jsx("tr", { children: _jsx("td", { colSpan: editable ? 6 : 5, className: "py-8 text-center text-muted-foreground", children: "Nog geen factuurregels" }) }) })] }), editable ? _jsx(AddLineBar, { defaultVat: defaultVat, articles: articles, articlesLoading: articlesLoading, onAdd: (l) => onLinesChange?.([...safeLines, l]) }) : null, _jsxs("div", { className: "mt-6 ml-auto w-64 space-y-1.5", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Totaal excl. btw" }), _jsx("span", { children: formatCents(subtotal) })] }), (vatGroups.length ? vatGroups : [{ rate: Number(defaultVat) || 0, vat: 0 }]).map((g) => (_jsxs("div", { className: "flex justify-between", children: [_jsxs("span", { children: ["Btw ", g.rate, "%"] }), _jsx("span", { children: formatCents(g.vat) })] }, g.rate))), _jsxs("div", { className: "flex justify-between border-t border-foreground pt-2 text-sm font-semibold", children: [_jsx("span", { children: "Door u te betalen" }), _jsx("span", { children: formatCents(subtotal + vatTotal) })] })] }), _jsxs("p", { className: "mt-auto pb-5 pt-8 text-center font-medium", children: ["Graag betaling binnen ", details.payment_term_days || branding.payment_term_days, " dagen o.v.v. ", number] })] }), _jsxs("footer", { className: "grid min-h-16 grid-cols-3 items-center gap-4 bg-[var(--invoice-secondary)] px-8 py-4 text-[10px] text-primary-foreground", children: [_jsxs("span", { children: ["KvK ", branding.chamber_of_commerce_number || "—"] }), _jsxs("span", { className: "text-center", children: ["Btw-id ", branding.vat_identification_number || "—"] }), _jsxs("span", { className: "text-right", children: ["IBAN ", branding.iban || "—"] })] })] }), _jsx("style", { children: `@page{size:A4;margin:0}@media print{body *{visibility:hidden!important}.invoice-print-target,.invoice-print-target *{visibility:visible!important}.invoice-print-target{position:absolute!important;inset:0!important;width:210mm!important;min-height:297mm!important;height:auto!important;max-width:none!important;box-shadow:none!important;print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important}.invoice-print-target tr{break-inside:avoid}}` })] }));
+                                        }) : _jsx("tr", { children: _jsx("td", { colSpan: editable ? 6 : 5, className: "py-8 text-center text-muted-foreground", children: "Nog geen factuurregels" }) }) })] }), editable ? _jsx(AddLineBar, { defaultVat: defaultVat, onAdd: (l) => onLinesChange?.([...safeLines, l]) }) : null, _jsxs("div", { className: "mt-6 ml-auto w-64 space-y-1.5", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Totaal excl. btw" }), _jsx("span", { children: formatCents(subtotal) })] }), (vatGroups.length ? vatGroups : [{ rate: Number(defaultVat) || 0, vat: 0 }]).map((g) => (_jsxs("div", { className: "flex justify-between", children: [_jsxs("span", { children: ["Btw ", g.rate, "%"] }), _jsx("span", { children: formatCents(g.vat) })] }, g.rate))), _jsxs("div", { className: "flex justify-between border-t border-foreground pt-2 text-sm font-semibold", children: [_jsx("span", { children: "Door u te betalen" }), _jsx("span", { children: formatCents(subtotal + vatTotal) })] })] }), _jsxs("p", { className: "mt-auto pb-5 pt-8 text-center font-medium", children: ["Graag betaling binnen ", details.payment_term_days || branding.payment_term_days, " dagen o.v.v. ", number] })] }), _jsxs("footer", { className: "grid min-h-16 grid-cols-3 items-center gap-4 bg-[var(--invoice-secondary)] px-8 py-4 text-[10px] text-primary-foreground", children: [_jsxs("span", { children: ["KvK ", branding.chamber_of_commerce_number || "—"] }), _jsxs("span", { className: "text-center", children: ["Btw-id ", branding.vat_identification_number || "—"] }), _jsxs("span", { className: "text-right", children: ["IBAN ", branding.iban || "—"] })] })] }), _jsx("style", { children: `@page{size:A4;margin:0}@media print{body *{visibility:hidden!important}.invoice-print-target,.invoice-print-target *{visibility:visible!important}.invoice-print-target{position:absolute!important;inset:0!important;width:210mm!important;min-height:297mm!important;height:auto!important;max-width:none!important;box-shadow:none!important;print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important}.invoice-print-target tr{break-inside:avoid}}` })] }));
 });
-function AddLineBar({ defaultVat, articles, articlesLoading, onAdd }) {
+function AddLineBar({ defaultVat, onAdd }) {
+    const searchArticles = useServerFn(listInvoiceArticles);
+    const [articles, setArticles] = useState([]);
+    const [articlesLoading, setArticlesLoading] = useState(false);
+    const [articlesError, setArticlesError] = useState("");
+    const [packagesError, setPackagesError] = useState("");
     const [packages, setPackages] = useState([]);
     const [packageOpen, setPackageOpen] = useState(false);
     const [packageQuery, setPackageQuery] = useState("");
     const [articleOpen, setArticleOpen] = useState(false);
     const [articleQuery, setArticleQuery] = useState("");
     useEffect(() => {
-        fetchPackages().then((r) => setPackages(Array.isArray(r) ? r : [])).catch(() => setPackages([]));
+        fetchPackages()
+            .then((r) => { setPackages(Array.isArray(r) ? r : []); setPackagesError(""); })
+            .catch((e) => { setPackages([]); setPackagesError(dependencyMessage(e, "werkbonnen", "Pakketten")); });
     }, []);
+    useEffect(() => {
+        if (!articleOpen)
+            return;
+        let active = true;
+        setArticlesLoading(true);
+        const t = setTimeout(() => {
+            searchArticles({ data: { query: articleQuery } })
+                .then((r) => { if (active) {
+                setArticles(Array.isArray(r) ? r : []);
+                setArticlesError("");
+            } })
+                .catch((e) => {
+                if (!active)
+                    return;
+                setArticles([]);
+                const msg = e instanceof Error ? e.message : "";
+                setArticlesError(msg.startsWith("MISSING_DEPENDENCY:") ? `Materialen niet beschikbaar: ${msg.slice(19).trim()}` : "Artikelen konden niet worden geladen. Probeer het opnieuw.");
+            })
+                .finally(() => { if (active)
+                setArticlesLoading(false); });
+        }, SEARCH_DEBOUNCE_MS);
+        return () => { active = false; clearTimeout(t); };
+    }, [articleOpen, articleQuery, searchArticles]);
     const safePackages = Array.isArray(packages) ? packages : [];
     const safeArticles = Array.isArray(articles) ? articles : [];
     const filteredPackages = safePackages.filter((p) => !packageQuery.trim() || [p.name, p.code, p.description].some((v) => (v ?? "").toLowerCase().includes(packageQuery.trim().toLowerCase())));
-    const filteredArticles = safeArticles.filter((article) => !articleQuery.trim() || [article.name, article.code, article.gtin, article.description].some((value) => (value ?? "").toLowerCase().includes(articleQuery.trim().toLowerCase())));
+    const filteredArticles = safeArticles;
     return (_jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2 print:hidden", children: [_jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: () => onAdd(emptyEditLine(defaultVat)), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Vrije regel"] }), _jsxs(Popover, { open: articleOpen, onOpenChange: setArticleOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", size: "sm", variant: "outline", children: [_jsx(Search, { className: "mr-1 h-4 w-4" }), "Materiaal zoeken"] }) }), _jsxs(PopoverContent, { className: "w-[min(42rem,calc(100vw-2rem))] p-2", align: "start", children: [_jsx(Input, { autoFocus: true, placeholder: "Zoek op titel, artikelcode, EAN of omschrijving\u2026", value: articleQuery, onChange: (e) => setArticleQuery(e.target.value) }), _jsx("div", { className: "mt-2 flex max-h-[18rem] flex-wrap content-start touch-pan-y gap-1 overflow-y-auto overscroll-contain", onWheel: (event) => {
                                     event.preventDefault();
                                     event.stopPropagation();
                                     event.currentTarget.scrollTop += event.deltaY;
-                                }, children: articlesLoading ? _jsx("p", { className: "w-full p-3 text-sm text-muted-foreground", children: "Artikelen laden\u2026" }) : filteredArticles.length === 0 ? _jsx("p", { className: "w-full p-3 text-sm text-muted-foreground", children: "Geen artikelen gevonden." }) : filteredArticles.map((article) => (_jsxs(Button, { type: "button", variant: "ghost", className: "flex h-auto w-fit flex-col items-start gap-2 overflow-hidden p-2 text-left", onClick: () => {
+                                }, children: articlesError ? _jsx("p", { className: "w-full p-3 text-sm text-destructive", children: articlesError }) : articlesLoading ? _jsx("p", { className: "w-full p-3 text-sm text-muted-foreground", children: "Artikelen laden\u2026" }) : filteredArticles.length === 0 ? _jsx("p", { className: "w-full p-3 text-sm text-muted-foreground", children: "Geen artikelen gevonden." }) : filteredArticles.map((article) => (_jsxs(Button, { type: "button", variant: "ghost", className: "flex h-auto w-fit flex-col items-start gap-2 overflow-hidden p-2 text-left", onClick: () => {
                                         onAdd({
                                             description: article.description?.trim() ? `${article.name} — ${article.description.trim()}` : article.name,
                                             quantity: "1",
@@ -94,7 +135,7 @@ function AddLineBar({ defaultVat, articles, articlesLoading, onAdd }) {
                                         });
                                         setArticleOpen(false);
                                         setArticleQuery("");
-                                    }, children: [_jsx(ArticlePhoto, { src: article.photo_url, alt: article.name, className: "h-24 w-24" }), _jsxs("span", { className: "w-24", children: [_jsx("span", { className: "line-clamp-2 block whitespace-normal font-medium leading-snug", children: article.name }), _jsxs("span", { className: "mt-1 block truncate text-xs text-muted-foreground", children: ["EAN ", article.gtin || "—"] }), _jsx("span", { className: "mt-1 block font-semibold", children: formatCents(article.sales_price_cents) })] })] }, article.id))) })] })] }), _jsxs(Popover, { open: packageOpen, onOpenChange: setPackageOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", size: "sm", variant: "outline", children: [_jsx(Package, { className: "mr-1 h-4 w-4" }), "Pakket"] }) }), _jsxs(PopoverContent, { className: "w-96 p-2", align: "start", children: [_jsx(Input, { autoFocus: true, placeholder: "Zoek pakket\u2026", value: packageQuery, onChange: (e) => setPackageQuery(e.target.value) }), _jsx("div", { className: "mt-2 max-h-72 overflow-y-auto", children: filteredPackages.length === 0 ? _jsx("p", { className: "p-2 text-sm text-muted-foreground", children: "Geen pakketten gevonden." }) : filteredPackages.map((p) => (_jsxs(Button, { type: "button", variant: "ghost", className: "flex h-auto w-full items-start justify-between gap-2 px-2 py-1.5 text-left text-sm", onClick: () => {
+                                    }, children: [_jsx(ArticlePhoto, { src: article.photo_url, alt: article.name, className: "h-24 w-24" }), _jsxs("span", { className: "w-24", children: [_jsx("span", { className: "line-clamp-2 block whitespace-normal font-medium leading-snug", children: article.name }), _jsxs("span", { className: "mt-1 block truncate text-xs text-muted-foreground", children: ["EAN ", article.gtin || "—"] }), _jsx("span", { className: "mt-1 block font-semibold", children: formatCents(article.sales_price_cents) })] })] }, article.id))) })] })] }), _jsxs(Popover, { open: packageOpen, onOpenChange: setPackageOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", size: "sm", variant: "outline", children: [_jsx(Package, { className: "mr-1 h-4 w-4" }), "Pakket"] }) }), _jsxs(PopoverContent, { className: "w-96 p-2", align: "start", children: [_jsx(Input, { autoFocus: true, placeholder: "Zoek pakket\u2026", value: packageQuery, onChange: (e) => setPackageQuery(e.target.value) }), _jsx("div", { className: "mt-2 max-h-72 overflow-y-auto", children: packagesError ? _jsx("p", { className: "p-2 text-sm text-destructive", children: packagesError }) : filteredPackages.length === 0 ? _jsx("p", { className: "p-2 text-sm text-muted-foreground", children: "Geen pakketten gevonden." }) : filteredPackages.map((p) => (_jsxs(Button, { type: "button", variant: "ghost", className: "flex h-auto w-full items-start justify-between gap-2 px-2 py-1.5 text-left text-sm", onClick: () => {
                                         const cents = Math.round(Number(p.unit_price_cents) || 0);
                                         onAdd({
                                             description: p.description?.trim() ? `${p.name} — ${p.description.trim()}` : p.name,

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

@@ -0,0 +1,6 @@
+/** Nette foutweergave voor de pagina's van de Facturen-module (geen wit scherm). */
+export declare function ModuleErrorView({ reset }: {
+    error?: unknown;
+    reset?: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ModuleErrorView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleErrorView.d.ts","sourceRoot":"","sources":["../../src/components/ModuleErrorView.tsx"],"names":[],"mappings":"AAGA,oFAAoF;AACpF,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAgBjF"}

package/dist-lib/components/ModuleErrorView.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@flowselections/core";
+import { useRouter } from "@tanstack/react-router";
+/** Nette foutweergave voor de pagina's van de Facturen-module (geen wit scherm). */
+export function ModuleErrorView({ reset }) {
+    const router = useRouter();
+    return (_jsxs("main", { className: "space-y-4 p-6", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Er ging iets mis bij het laden van deze pagina." }), _jsx(Button, { variant: "outline", onClick: () => {
+                    reset?.();
+                    void router.invalidate();
+                }, children: "Opnieuw proberen" })] }));
+}

package/dist-lib/components/settings/ModuleHealthSettingsCard.d.ts

@@ -0,0 +1,3 @@
+/** Toont wat er in deze omgeving nog niet is ingesteld voor de Facturen-module. */
+export declare function ModuleHealthSettingsCard(): import("react").JSX.Element;
+//# sourceMappingURL=ModuleHealthSettingsCard.d.ts.map

package/dist-lib/components/settings/ModuleHealthSettingsCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleHealthSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/ModuleHealthSettingsCard.tsx"],"names":[],"mappings":"AAsBA,mFAAmF;AACnF,wBAAgB,wBAAwB,gCAmDvC"}

package/dist-lib/components/settings/ModuleHealthSettingsCard.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, supabase } from "@flowselections/core";
+import { CheckCircle2, AlertTriangle, RefreshCw } from "lucide-react";
+import { STORAGE_BUCKETS } from "../../lib/config";
+import { isMissingObjectError } from "../../lib/dependencies";
+import { fetchInvoiceBranding, fetchInvoiceEmailPurpose, fetchSenderForPurpose } from "../../lib/facturen";
+const db = supabase;
+async function tableCheck(table, label, module) {
+    const { error } = await db.from(table).select("*", { head: true, count: "exact" }).limit(1);
+    if (!error)
+        return { label, ok: true, hint: "" };
+    return { label, ok: false, hint: isMissingObjectError(error) ? `Module ${module} ontbreekt.` : "Niet bereikbaar." };
+}
+async function bucketCheck(bucket, label) {
+    const { error } = await supabase.storage.from(bucket).list("", { limit: 1 });
+    return { label, ok: !error, hint: error ? `Opslagmap '${bucket}' ontbreekt of is niet toegankelijk.` : "" };
+}
+/** Toont wat er in deze omgeving nog niet is ingesteld voor de Facturen-module. */
+export function ModuleHealthSettingsCard() {
+    const [checks, setChecks] = useState(null);
+    const run = useCallback(async () => {
+        setChecks(null);
+        const results = await Promise.all([
+            fetchInvoiceBranding()
+                .then((b) => ({ label: "Bedrijfsgegevens", ok: Boolean(b.company_name.trim() && b.iban.trim()), hint: "Vul bedrijfsnaam en IBAN in bij Factuurhuisstijl." }))
+                .catch(() => ({ label: "Bedrijfsgegevens", ok: false, hint: "Niet bereikbaar." })),
+            fetchInvoiceEmailPurpose()
+                .then(async (p) => {
+                if (!p)
+                    return { label: "Afzender factuurmail", ok: false, hint: "Kies een e-maildoeleinde bij Factuur e-mail." };
+                const s = await fetchSenderForPurpose(p);
+                return { label: "Afzender factuurmail", ok: Boolean(s?.id), hint: `Geen mailbox gekoppeld aan '${p}'.` };
+            })
+                .catch((e) => ({ label: "Afzender factuurmail", ok: false, hint: isMissingObjectError(e) ? "Module E-mail - Authenticatie ontbreekt." : "Niet bereikbaar." })),
+            bucketCheck(STORAGE_BUCKETS.logos, "Opslag logo"),
+            bucketCheck(STORAGE_BUCKETS.articlePhotos, "Opslag artikelfoto's"),
+            tableCheck("artikelen_instellingen", "Marge-instelling", "Artikelen"),
+            tableCheck("itk_customers", "Klanten", "Klanten"),
+            tableCheck("werkbonnen", "Werkbonnen", "Werkbonnen"),
+            tableCheck("itk_offertes", "Offertes", "Offertes"),
+        ]);
+        setChecks(results.map((r) => (r.ok ? { ...r, hint: "" } : r)));
+    }, []);
+    useEffect(() => { void run(); }, [run]);
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Controle Facturen-module" }), _jsx(CardDescription, { children: "Wat er in deze omgeving nog ingesteld moet worden" })] }), _jsxs(CardContent, { className: "space-y-2", children: [checks === null ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Controleren\u2026" })) : (checks.map((c) => (_jsxs("div", { className: "flex items-start gap-2 text-sm", children: [c.ok ? _jsx(CheckCircle2, { className: "mt-0.5 h-4 w-4 shrink-0 text-primary" }) : _jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0 text-destructive" }), _jsxs("span", { children: [_jsx("span", { className: "font-medium", children: c.label }), c.hint ? _jsx("span", { className: "block text-xs text-muted-foreground", children: c.hint }) : null] })] }, c.label)))), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void run(), disabled: checks === null, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), "Opnieuw controleren"] })] })] }));
+}

package/dist-lib/index.d.ts

@@ -1,5 +1,8 @@
 import type { FlowModule } from "@flowselections/core";
 import { InvoiceEmailSettingsCard } from "./components/settings/InvoiceEmailSettingsCard";
+import { ModuleHealthSettingsCard } from "./components/settings/ModuleHealthSettingsCard";
+export { ModuleHealthSettingsCard };
+export { ModuleErrorView } from "./components/ModuleErrorView";
 export { InvoiceEmailSettingsCard };
 export * from './_core-safelist';
 export { FacturenForInstallatieTechniek } from './components/FacturenForInstallatieTechniek';

package/dist-lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,gDAAgD,CAAC;AAC1F,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAEpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,8BAA8B,EAAE,MAAM,6CAA6C,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAErE,eAAO,MAAM,iCAAiC,EAAE,UAe/C,CAAC;AACF,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,2BAA2B,EAAE,MAAM,mDAAmD,CAAC;AAChG,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,gDAAgD,CAAC;AAC1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,gDAAgD,CAAC;AAC1F,OAAO,EAAE,wBAAwB,EAAE,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAEpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,8BAA8B,EAAE,MAAM,6CAA6C,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAErE,eAAO,MAAM,iCAAiC,EAAE,UAgB/C,CAAC;AACF,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,2BAA2B,EAAE,MAAM,mDAAmD,CAAC;AAChG,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC"}

package/dist-lib/index.js

@@ -4,6 +4,9 @@
 import { FileText } from "lucide-react";
 import { InvoiceBrandingSettingsCard } from "./components/settings/InvoiceBrandingSettingsCard";
 import { InvoiceEmailSettingsCard } from "./components/settings/InvoiceEmailSettingsCard";
+import { ModuleHealthSettingsCard } from "./components/settings/ModuleHealthSettingsCard";
+export { ModuleHealthSettingsCard };
+export { ModuleErrorView } from "./components/ModuleErrorView";
 export { InvoiceEmailSettingsCard };
 export * from './_core-safelist';
 export { FacturenForInstallatieTechniek } from './components/FacturenForInstallatieTechniek';
@@ -12,7 +15,7 @@ export { TemplateModuleLogo } from './components/TemplateModuleLogo';
 export const facturenInstallatietechniekModule = {
     id: "facturen-installatietechniek",
     name: "Facturen Installatietechniek",
-    version: "1.3.3", // houd gelijk aan package.json (zie src/lib/module-version.test.ts)
+    version: "1.4.0", // houd gelijk aan package.json (zie src/lib/module-version.test.ts)
     nav: {
         label: "Facturen",
         href: "/facturen-installatietechniek",
@@ -21,6 +24,7 @@ export const facturenInstallatietechniekModule = {
     settingsCards: [
         { component: InvoiceBrandingSettingsCard, order: 20 },
         { component: InvoiceEmailSettingsCard, order: 21 },
+        { component: ModuleHealthSettingsCard, order: 22 },
     ],
 };
 export { InvoiceDetailsFields } from "./components/InvoiceDetailsFields";

package/dist-lib/integrations/supabase/client.d.ts

@@ -1,4 +1,4 @@
-import { type SupabaseClient } from '@supabase/supabase-js';
-import type { Database } from './types';
+import type { SupabaseClient } from "@supabase/supabase-js";
+import type { Database } from "./types.js";
 export declare const supabase: SupabaseClient<Database>;
 //# sourceMappingURL=client.d.ts.map

package/dist-lib/integrations/supabase/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/integrations/supabase/client.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAWxC,eAAO,MAAM,QAAQ,EAAE,cAAc,CAAC,QAAQ,CAM5C,CAAC"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/integrations/supabase/client.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAI3C,eAAO,MAAM,QAAQ,EAAE,cAAc,CAAC,QAAQ,CAAuD,CAAC"}

package/dist-lib/integrations/supabase/client.js

@@ -1,16 +1,5 @@
-// This file is automatically generated. Do not edit it directly.
-import { createClient } from '@supabase/supabase-js';
-import { brokeredPreviewStorage } from './previewAuthStorage';
-const SUPABASE_URL = "https://wieomvgjyxoerzndxnla.supabase.co";
-const SUPABASE_PUBLISHABLE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6IndpZW9tdmdqeXhvZXJ6bmR4bmxhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODMwNzQzMDgsImV4cCI6MjA5ODY1MDMwOH0.uP3RBhvEMqCW61E-firCtlBGsgRyWY9BkLriF-yInho";
+// Geen project-URL of sleutel in module-code: de client komt van @flowselections/core (env-gebaseerd, dezelfde sessie als de shell).
+import { supabase as coreSupabase } from "@flowselections/core";
 // Import the supabase client like this:
 // import { supabase } from "../../integrations/supabase/client";
-// Explicit annotation: the inferred type of createClient<Database> exceeds
-// the maximum the compiler can serialize for declaration emit (TS7056).
-export const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, {
-    auth: {
-        storage: brokeredPreviewStorage(),
-        persistSession: true,
-        autoRefreshToken: true,
-    }
-});
+export const supabase = coreSupabase;