@flowselections/facturen-installatie-techniek 1.0.2 → 1.3.4

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

@@ -0,0 +1,19 @@
+import { type CustomerOption, type EditLine, type InvoiceBranding, type InvoiceDetails } from "../lib/facturen";
+type Props = {
+    branding: InvoiceBranding;
+    details: InvoiceDetails;
+    lines: EditLine[];
+    invoiceNumber?: string | null;
+    numberIsProvisional?: boolean;
+    logoUrl?: string | null;
+    printable?: boolean;
+    editable?: boolean;
+    defaultVat?: string;
+    onDetailsChange?: (d: InvoiceDetails) => void;
+    onLinesChange?: (l: EditLine[]) => void;
+    /** Toon klantkeuzelijst bij Klantnaam (alleen nieuwe handmatige factuur). */
+    onCustomerPick?: (c: CustomerOption) => void;
+};
+export declare const InvoiceA4Preview: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=InvoiceA4Preview.d.ts.map

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

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

package/dist-lib/components/InvoiceA4Preview.js

@@ -0,0 +1,118 @@
+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 { 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 { listInvoiceArticles } from "../lib/articles.functions";
+import { ArticlePhoto } from "./ArticlePhoto";
+const VAT_OPTIONS = CONFIG_VAT_OPTIONS;
+function CustomerPicker({ details, onDetailsChange, onPick }) {
+    const [open, setOpen] = useState(false);
+    const [q, setQ] = useState("");
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (!open || items.length)
+            return;
+        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))) })] })] })] }));
+}
+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));
+    useEffect(() => {
+        if (!editable && articleIds.length === 0)
+            return;
+        let active = true;
+        setArticlesLoading(true);
+        listArticles()
+            .then((result) => { if (active)
+            setArticles(Array.isArray(result) ? result : []); })
+            .catch(() => { if (active)
+            setArticles([]); })
+            .finally(() => { if (active)
+            setArticlesLoading(false); });
+        return () => { active = false; };
+    }, [editable, listArticles, articleIds.join(",")]);
+    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);
+    const vatGroups = useMemo(() => {
+        const m = new Map();
+        computed.forEach((l) => m.set(l.vat_rate, (m.get(l.vat_rate) ?? 0) + (l.line_total_cents ?? 0)));
+        return [...m.entries()].sort((a, b) => b[0] - a[0]).map(([rate, base]) => ({ rate, vat: Math.round((base * rate) / 100) }));
+    }, [computed]);
+    const vatTotal = vatGroups.reduce((s, g) => s + g.vat, 0);
+    const number = invoiceNumber || "Wordt toegekend";
+    const contact = [branding.address, [branding.postal_code, branding.city].filter(Boolean).join(" "), branding.email, branding.phone, branding.website].filter(Boolean);
+    const setD = (k) => (v) => onDetailsChange?.({ ...details, [k]: v });
+    const setL = (i, patch) => onLinesChange?.(safeLines.map((l, idx) => (idx === i ? { ...l, ...patch } : l)));
+    const F = ({ k, placeholder, type, className }) => editable ? (_jsx("input", { type: type ?? "text", value: details[k], placeholder: placeholder, onChange: (e) => setD(k)(e.target.value), className: `w-full rounded-sm border border-dashed border-border bg-transparent px-1 py-0.5 outline-none focus:border-primary ${className ?? ""}` })) : (_jsx("span", { className: className, children: details[k] || (type === "date" ? "—" : placeholder) }));
+    const fmtDate = (v) => (v ? new Date(`${v}T12:00:00`).toLocaleDateString("nl-NL") : "—");
+    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}}` })] }));
+});
+function AddLineBar({ defaultVat, articles, articlesLoading, onAdd }) {
+    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([]));
+    }, []);
+    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())));
+    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: () => {
+                                        onAdd({
+                                            description: article.description?.trim() ? `${article.name} — ${article.description.trim()}` : article.name,
+                                            quantity: "1",
+                                            unit: article.unit,
+                                            price: (article.sales_price_cents / 100).toFixed(2).replace(".", ","),
+                                            vat: defaultVat,
+                                            kind: "material",
+                                            articleId: article.id,
+                                            photoUrl: article.photo_url,
+                                        });
+                                        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: () => {
+                                        const cents = Math.round(Number(p.unit_price_cents) || 0);
+                                        onAdd({
+                                            description: p.description?.trim() ? `${p.name} — ${p.description.trim()}` : p.name,
+                                            quantity: String(Number(p.default_quantity) > 0 ? Number(p.default_quantity) : 1),
+                                            unit: "pakket",
+                                            price: (cents / 100).toFixed(2).replace(".", ","),
+                                            vat: defaultVat,
+                                            kind: "package",
+                                            packageId: p.id,
+                                        });
+                                        setPackageOpen(false);
+                                        setPackageQuery("");
+                                    }, children: [_jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate font-medium", children: p.name }), p.code ? _jsx("span", { className: "block text-xs text-muted-foreground", children: p.code }) : null] }), _jsx("span", { className: "shrink-0", children: formatCents(p.unit_price_cents) })] }, p.id))) })] })] })] }));
+}
+function formatDueDate(invoiceDate, paymentTerm) {
+    if (!invoiceDate)
+        return "—";
+    const date = new Date(`${invoiceDate}T12:00:00`);
+    date.setDate(date.getDate() + (parseInt(paymentTerm, 10) || 0));
+    return date.toLocaleDateString("nl-NL");
+}

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

@@ -0,0 +1,7 @@
+import type { InvoiceDetails } from "../lib/facturen";
+export declare function InvoiceDetailsFields({ value, onChange, disabled, }: {
+    value: InvoiceDetails;
+    onChange: (next: InvoiceDetails) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=InvoiceDetailsFields.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceDetailsFields.d.ts","sourceRoot":"","sources":["../../src/components/InvoiceDetailsFields.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAkBtD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,+BAgCA"}

package/dist-lib/components/InvoiceDetailsFields.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Label } from "@flowselections/core";
+const FIELDS = [
+    { key: "customer_name", label: "Klantnaam", group: "klant" },
+    { key: "customer_attention", label: "t.a.v. / p/a", group: "klant" },
+    { key: "customer_address", label: "Adres", group: "klant" },
+    { key: "customer_postal_code", label: "Postcode", group: "klant" },
+    { key: "customer_city", label: "Plaats", group: "klant" },
+    { key: "debtor_number", label: "Debiteurnummer", group: "klant" },
+    { key: "customer_vat_number", label: "Btw-nummer", group: "klant" },
+    { key: "invoice_date", label: "Factuurdatum", type: "date", group: "factuur" },
+    { key: "payment_term_days", label: "Betaaltermijn (dagen)", type: "number", group: "factuur" },
+    { key: "reference", label: "Referentie", group: "factuur" },
+    { key: "source_number", label: "Werkbonnummer", group: "factuur" },
+    { key: "work_address", label: "Werkadres", group: "factuur" },
+    { key: "execution_date", label: "Uitvoerdatum", type: "date", group: "factuur" },
+];
+export function InvoiceDetailsFields({ value, onChange, disabled, }) {
+    const render = (group) => FIELDS.filter((f) => f.group === group).map((f) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `inv-${f.key}`, className: "text-xs", children: f.label }), _jsx(Input, { id: `inv-${f.key}`, type: f.type ?? "text", value: String(value[f.key] ?? ""), disabled: disabled, onChange: (e) => onChange({ ...value, [f.key]: e.target.value }) })] }, f.key)));
+    return (_jsxs("div", { className: "space-y-3 rounded-md border p-3", children: [_jsx("p", { className: "text-sm font-medium", children: "Factuurgegevens" }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-medium uppercase text-muted-foreground", children: "Klant / debiteur" }), render("klant")] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-medium uppercase text-muted-foreground", children: "Factuur" }), render("factuur")] })] })] }));
+}

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

@@ -0,0 +1,4 @@
+export declare function WerkbonPreviewPanel({ workOrderId }: {
+    workOrderId: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=WerkbonPreviewPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WerkbonPreviewPanel.d.ts","sourceRoot":"","sources":["../../src/components/WerkbonPreviewPanel.tsx"],"names":[],"mappings":"AAwBA,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,+BA0F3E"}

package/dist-lib/components/WerkbonPreviewPanel.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { fetchSourceLines, fetchWorkOrderPreview, formatCents, } from "../lib/facturen";
+function fmtDate(v) {
+    if (!v)
+        return "—";
+    const d = new Date(v);
+    return isNaN(d.getTime()) ? v : d.toLocaleDateString("nl-NL");
+}
+function Row({ label, value }) {
+    return (_jsxs("div", { className: "grid grid-cols-[8rem_minmax(0,1fr)] gap-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { className: "min-w-0 break-words", children: value || "—" })] }));
+}
+export function WerkbonPreviewPanel({ workOrderId }) {
+    const [wo, setWo] = useState(null);
+    const [lines, setLines] = useState([]);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        let active = true;
+        setLoading(true);
+        Promise.all([fetchWorkOrderPreview(workOrderId), fetchSourceLines("work_order", workOrderId)])
+            .then(([w, l]) => {
+            if (!active)
+                return;
+            setWo(w);
+            setLines(Array.isArray(l) ? l : []);
+        })
+            .catch(() => active && setWo(null))
+            .finally(() => active && setLoading(false));
+        return () => {
+            active = false;
+        };
+    }, [workOrderId]);
+    if (loading)
+        return _jsx("p", { className: "text-sm text-muted-foreground", children: "Werkbon laden\u2026" });
+    if (!wo)
+        return _jsx("p", { className: "text-sm text-muted-foreground", children: "Werkbon niet gevonden." });
+    const safeLines = Array.isArray(lines) ? lines : [];
+    const total = safeLines.reduce((s, l) => s + Math.round((Number(l.unit_price_cents) || 0) * (Number(l.quantity) || 0)), 0);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Werkbon" }), _jsx("h3", { className: "text-lg font-semibold", children: wo.project_number ?? "zonder nummer" })] }), _jsxs("div", { className: "space-y-1.5 rounded-md border p-3", children: [_jsx(Row, { label: "Klant", value: wo.customer_name }), _jsx(Row, { label: "Status", value: wo.status }), _jsx(Row, { label: "Werkadres", value: [wo.work_address, wo.room_number].filter(Boolean).join(" — ") }), _jsx(Row, { label: "Uitvoerdatum", value: fmtDate(wo.scheduled_start_time) }), _jsx(Row, { label: "Referentie", value: wo.externe_referentie }), _jsx(Row, { label: "Getekend door", value: wo.signature_name })] }), wo.complaint_description && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: "Melding" }), _jsx("p", { className: "whitespace-pre-wrap text-sm text-muted-foreground", children: wo.complaint_description })] })), wo.technician_task_description && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: "Opdracht" }), _jsx("p", { className: "whitespace-pre-wrap text-sm text-muted-foreground", children: wo.technician_task_description })] })), wo.technician_notes && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: "Notities monteur" }), _jsx("p", { className: "whitespace-pre-wrap text-sm text-muted-foreground", children: wo.technician_notes })] })), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: "Uren, materialen en pakketten" }), safeLines.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen regels." })) : (_jsxs("div", { className: "divide-y rounded-md border text-sm", children: [safeLines.map((l, i) => (_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] gap-2 p-2", children: [_jsxs("span", { className: "min-w-0 break-words", children: [String(l.description ?? ""), _jsxs("span", { className: "block text-xs text-muted-foreground", children: [Number(l.quantity) || 0, " ", l.unit ?? "", " \u00D7 ", formatCents(Number(l.unit_price_cents) || 0)] })] }), _jsx("span", { className: "shrink-0 tabular-nums", children: formatCents(Math.round((Number(l.unit_price_cents) || 0) * (Number(l.quantity) || 0))) })] }, i))), _jsxs("div", { className: "flex justify-between p-2 font-medium", children: [_jsx("span", { children: "Totaal excl. btw" }), _jsx("span", { className: "tabular-nums", children: formatCents(total) })] })] }))] })] }));
+}

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

@@ -0,0 +1,5 @@
+import type { FlowModule } from "@flowselections/core";
+export declare function InstellingenPage({ modules }: {
+    modules: FlowModule[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=InstellingenPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InstellingenPage.d.ts","sourceRoot":"","sources":["../../../src/components/settings/InstellingenPage.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAgJvD,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,UAAU,EAAE,CAAA;CAAE,+BAmBtE"}

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

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Switch, supabase, toast, } from "@flowselections/core";
+import { Bell, Loader2, User } from "lucide-react";
+// ─── Profielkaart ─────────────────────────────────────────────────────────────
+function ProfielKaart() {
+    const [displayName, setDisplayName] = useState("");
+    const [saving, setSaving] = useState(false);
+    const handleUpdateProfile = async () => {
+        setSaving(true);
+        try {
+            const { data: { user } } = await supabase.auth.getUser();
+            if (!user)
+                throw new Error("Niet ingelogd");
+            const { error } = await supabase.from("profiles").update({ display_name: displayName.trim() }).eq("id", user.id);
+            if (error)
+                throw error;
+            toast.success("Profiel bijgewerkt");
+        }
+        catch {
+            toast.error("Fout bij het bijwerken van profiel");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(User, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Profielgegevens" })] }), _jsx(CardDescription, { children: "Werk je persoonlijke gegevens bij" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "displayName", children: "Weergavenaam" }), _jsx(Input, { id: "displayName", value: displayName, onChange: (e) => setDisplayName(e.target.value), maxLength: 100, placeholder: "Je naam" })] }), _jsxs(Button, { onClick: handleUpdateProfile, disabled: saving, children: [saving && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Opslaan"] })] })] }));
+}
+// ─── Wachtwoordkaart ──────────────────────────────────────────────────────────
+function WachtwoordKaart() {
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [changingPassword, setChangingPassword] = useState(false);
+    const handleChangePassword = async () => {
+        if (newPassword.length < 6) {
+            toast.error("Wachtwoord moet minimaal 6 tekens bevatten");
+            return;
+        }
+        if (newPassword !== confirmPassword) {
+            toast.error("Wachtwoorden komen niet overeen");
+            return;
+        }
+        setChangingPassword(true);
+        try {
+            const { error } = await supabase.auth.updateUser({ password: newPassword });
+            if (error)
+                throw error;
+            toast.success("Wachtwoord gewijzigd");
+            setNewPassword("");
+            setConfirmPassword("");
+        }
+        catch {
+            toast.error("Fout bij het wijzigen van wachtwoord");
+        }
+        finally {
+            setChangingPassword(false);
+        }
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Wachtwoord wijzigen" }), _jsx(CardDescription, { children: "Kies een nieuw wachtwoord" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "newPassword", children: "Nieuw wachtwoord" }), _jsx(Input, { id: "newPassword", type: "password", value: newPassword, onChange: (e) => setNewPassword(e.target.value), maxLength: 128, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "confirmPassword", children: "Bevestig wachtwoord" }), _jsx(Input, { id: "confirmPassword", type: "password", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), maxLength: 128, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] }), _jsxs(Button, { onClick: handleChangePassword, disabled: changingPassword, children: [changingPassword && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Wachtwoord wijzigen"] })] })] }));
+}
+// ─── Notificatievoorkeuren ────────────────────────────────────────────────────
+function NotificatieKaart() {
+    const [prefs, setPrefs] = useState({ email_notifications: true });
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    useEffect(() => {
+        (async () => {
+            try {
+                const { data: { user } } = await supabase.auth.getUser();
+                if (!user)
+                    return;
+                const { data } = await supabase.from("profiles").select("notification_preferences").eq("id", user.id).maybeSingle();
+                if (data?.notification_preferences && typeof data.notification_preferences === "object") {
+                    setPrefs({ email_notifications: Boolean(data.notification_preferences.email_notifications ?? true) });
+                }
+            }
+            catch {
+                // negeren
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+    }, []);
+    const updatePref = async (value) => {
+        const newPrefs = { ...prefs, email_notifications: value };
+        setPrefs(newPrefs);
+        setSaving(true);
+        try {
+            const { data: { user } } = await supabase.auth.getUser();
+            if (!user)
+                throw new Error("Niet ingelogd");
+            const { error } = await supabase.from("profiles").update({ notification_preferences: newPrefs }).eq("id", user.id);
+            if (error)
+                throw error;
+            toast.success("Notificatie-instelling opgeslagen");
+        }
+        catch {
+            setPrefs(prefs);
+            toast.error("Fout bij opslaan");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    if (loading) {
+        return _jsx(Card, { children: _jsx(CardContent, { className: "flex items-center justify-center py-8", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) });
+    }
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Bell, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Notificatievoorkeuren" })] }), _jsx(CardDescription, { children: "Beheer je notificatie-instellingen" })] }), _jsx(CardContent, { className: "space-y-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "E-mailnotificaties" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Ontvang meldingen per e-mail" })] }), _jsx(Switch, { checked: prefs.email_notifications, onCheckedChange: (v) => void updatePref(v), disabled: saving })] }) })] }));
+}
+// ─── Instellingenpagina ───────────────────────────────────────────────────────
+// Volgorde: Profiel | Wachtwoord, daarna de modulekaarten (Factuurhuisstijl naast
+// Factuur e-mail) en Notificatievoorkeuren onderaan over de volle breedte.
+export function InstellingenPage({ modules }) {
+    const moduleCards = modules
+        .flatMap((m) => m.settingsCards)
+        .sort((a, b) => a.order - b.order);
+    return (_jsx("main", { className: "p-6", children: _jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [_jsx(ProfielKaart, {}), _jsx(WachtwoordKaart, {}), moduleCards.map((card, i) => (_jsx(card.component, {}, i))), _jsx("div", { className: "lg:col-span-2", children: _jsx(NotificatieKaart, {}) })] }) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceBrandingSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/InvoiceBrandingSettingsCard.tsx"],"names":[],"mappings":"AAiBA,wBAAgB,2BAA2B,gCAkD1C"}

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { STORAGE_BUCKETS } from "../../lib/config";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Input, Label, supabase, toast } from "@flowselections/core";
+import { Building2, ImagePlus, Loader2, Trash2 } from "lucide-react";
+import { emptyInvoiceBranding, fetchInvoiceBranding, getInvoiceLogoUrl, saveInvoiceBranding } from "../../lib/facturen";
+const fields = [
+    { key: "company_name", label: "Bedrijfsnaam" }, { key: "address", label: "Adres" },
+    { key: "postal_code", label: "Postcode" }, { key: "city", label: "Plaats" },
+    { key: "chamber_of_commerce_number", label: "KvK-nummer" },
+    { key: "vat_identification_number", label: "Btw-identificatienummer" },
+    { key: "email", label: "E-mailadres", type: "email", optional: true },
+    { key: "phone", label: "Telefoonnummer", optional: true }, { key: "iban", label: "IBAN" },
+    { key: "website", label: "Website", optional: true },
+    { key: "payment_term_days", label: "Standaard betaaltermijn (dagen)", type: "number" },
+];
+export function InvoiceBrandingSettingsCard() {
+    const [value, setValue] = useState(emptyInvoiceBranding());
+    const [logoUrl, setLogoUrl] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    useEffect(() => {
+        fetchInvoiceBranding().then(async (row) => {
+            setValue(row);
+            setLogoUrl(await getInvoiceLogoUrl(row.logo_path));
+        }).catch(() => toast.error("Factuurhuisstijl kon niet worden geladen")).finally(() => setLoading(false));
+    }, []);
+    const uploadLogo = async (file) => {
+        if (!file)
+            return;
+        if (!["image/png", "image/jpeg", "image/webp", "image/svg+xml"].includes(file.type) || file.size > 2 * 1024 * 1024) {
+            toast.error("Gebruik PNG, JPEG, WebP of SVG van maximaal 2 MB");
+            return;
+        }
+        const extension = file.name.split(".").pop()?.toLowerCase() || "png";
+        const path = `facturen-installatietechniek/${crypto.randomUUID()}.${extension}`;
+        const { error } = await supabase.storage.from(STORAGE_BUCKETS.logos).upload(path, file, { contentType: file.type, upsert: false });
+        if (error) {
+            toast.error("Logo uploaden mislukt");
+            return;
+        }
+        setValue((current) => ({ ...current, logo_path: path }));
+        setLogoUrl(await getInvoiceLogoUrl(path));
+    };
+    const save = async () => {
+        const letters = value.company_name.toUpperCase().replace(/[^A-Z]/g, "");
+        if (letters.length < 2) {
+            toast.error("De bedrijfsnaam moet minimaal twee letters bevatten");
+            return;
+        }
+        setSaving(true);
+        try {
+            setValue(await saveInvoiceBranding(value));
+            toast.success("Factuurhuisstijl opgeslagen");
+        }
+        catch {
+            toast.error("Factuurhuisstijl opslaan mislukt");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Building2, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Factuurhuisstijl" })] }), _jsx(CardDescription, { children: "Bedrijfsgegevens en kleuren voor nieuwe A4-facturen" })] }), _jsx(CardContent, { className: "space-y-5", children: loading ? _jsx("p", { className: "text-sm text-muted-foreground", children: "Laden\u2026" }) : _jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Bedrijfslogo" }), _jsxs("div", { className: "flex min-h-28 items-center gap-4 rounded-md border p-3", children: [_jsx("div", { className: "flex h-20 w-36 items-center justify-center bg-muted", children: logoUrl ? _jsx("img", { src: logoUrl, alt: "Bedrijfslogo", className: "max-h-20 max-w-36 object-contain" }) : _jsx(ImagePlus, { className: "h-7 w-7 text-muted-foreground" }) }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", variant: "outline", asChild: true, children: _jsxs("label", { children: ["Afbeelding kiezen", _jsx("input", { className: "sr-only", type: "file", accept: "image/png,image/jpeg,image/webp,image/svg+xml", onChange: (e) => void uploadLogo(e.target.files?.[0]) })] }) }), value.logo_path ? _jsx(Button, { type: "button", variant: "ghost", size: "icon", title: "Logo verwijderen", onClick: () => { setValue((v) => ({ ...v, logo_path: null })); setLogoUrl(null); }, children: _jsx(Trash2, { className: "h-4 w-4" }) }) : null] })] })] }), _jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: fields.map((field) => _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: `branding-${field.key}`, children: [field.label, field.optional ? " (optioneel)" : ""] }), _jsx(Input, { id: `branding-${field.key}`, type: field.type || "text", min: field.type === "number" ? 1 : undefined, max: field.type === "number" ? 365 : undefined, value: String(value[field.key] ?? ""), onChange: (e) => setValue((v) => ({ ...v, [field.key]: field.type === "number" ? Number(e.target.value) : e.target.value })) }), field.key === "company_name" ? _jsxs("label", { htmlFor: "branding-show-company-name", className: "flex cursor-pointer items-center gap-2 pt-0.5 text-xs text-muted-foreground", children: [_jsx(Checkbox, { id: "branding-show-company-name", checked: value.show_company_name !== false, onCheckedChange: (c) => setValue((v) => ({ ...v, show_company_name: c === true })) }), "Bedrijfsnaam naast het logo tonen in de bovenbalk"] }) : null] }, field.key)) }), _jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: ["primary_color", "secondary_color"].map((key, index) => _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: `branding-${key}`, children: ["Bedrijfskleur ", index + 1] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { className: "h-10 w-14 p-1", id: `branding-${key}`, type: "color", value: value[key], onChange: (e) => setValue((v) => ({ ...v, [key]: e.target.value.toUpperCase() })) }), _jsx(Input, { value: value[key], onChange: (e) => setValue((v) => ({ ...v, [key]: e.target.value.toUpperCase() })) })] })] }, key)) }), _jsxs("div", { className: "overflow-hidden rounded-md border", children: [_jsx("div", { className: "h-12 px-4 py-3 text-sm font-semibold text-primary-foreground", style: { backgroundColor: value.primary_color }, children: value.show_company_name !== false ? (value.company_name || "Bedrijfsnaam") : "Logo" }), _jsx("div", { className: "h-8 px-4 py-2 text-xs text-primary-foreground", style: { backgroundColor: value.secondary_color }, children: "KvK \u00B7 Btw-id \u00B7 IBAN" })] }), _jsxs(Button, { onClick: save, disabled: saving, children: [saving ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, "Opslaan"] })] }) })] });
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceEmailSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/InvoiceEmailSettingsCard.tsx"],"names":[],"mappings":"AAKA,wBAAgB,wBAAwB,gCAuCvC"}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast } from "@flowselections/core";
+import { Mail } from "lucide-react";
+import { EMAIL_PURPOSE_OPTIONS, fetchInvoiceEmailPurpose, fetchSenderForPurpose, saveInvoiceEmailPurpose } from "../../lib/facturen";
+export function InvoiceEmailSettingsCard() {
+    const [purpose, setPurpose] = useState("");
+    const [sender, setSender] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const loadSender = async (p) => {
+        try {
+            setSender(await fetchSenderForPurpose(p || null));
+        }
+        catch {
+            setSender(null);
+        }
+    };
+    useEffect(() => {
+        fetchInvoiceEmailPurpose()
+            .then(async (p) => { setPurpose(p ?? ""); await loadSender(p ?? ""); })
+            .catch(() => toast.error("E-mailinstelling kon niet worden geladen"))
+            .finally(() => setLoading(false));
+    }, []);
+    const change = async (v) => {
+        const prev = purpose;
+        setPurpose(v);
+        try {
+            await saveInvoiceEmailPurpose(v);
+            await loadSender(v);
+            toast.success("Doeleinde opgeslagen");
+        }
+        catch (e) {
+            setPurpose(prev);
+            toast.error(e instanceof Error ? e.message : "Opslaan mislukt");
+        }
+    };
+    const options = Array.isArray(EMAIL_PURPOSE_OPTIONS) ? EMAIL_PURPOSE_OPTIONS : [];
+    return _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Mail, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Factuur e-mail" })] }), _jsx(CardDescription, { children: "Kies het e-maildoeleinde waarmee facturen worden verstuurd. Welk adres daarbij hoort stel je in bij E-mailkoppeling." })] }), _jsx(CardContent, { className: "space-y-3", children: loading ? _jsx("p", { className: "text-sm text-muted-foreground", children: "Laden\u2026" }) : _jsxs(_Fragment, { children: [_jsxs(Select, { value: purpose, onValueChange: (v) => void change(v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies een doeleinde" }) }), _jsx(SelectContent, { children: options.map((o) => _jsx(SelectItem, { value: o.key, children: o.label }, o.key)) })] }), !purpose ? _jsx("p", { className: "text-sm text-destructive", children: "Nog geen doeleinde gekozen \u2014 facturen kunnen niet worden verzonden." })
+                            : sender ? _jsxs("p", { className: "text-sm text-muted-foreground", children: ["Verzonden vanaf: ", _jsx("span", { className: "font-medium text-foreground", children: sender.account_email })] })
+                                : _jsx("p", { className: "text-sm text-destructive", children: "Aan dit doeleinde is geen mailbox gekoppeld voor verzenden." })] }) })] });
+}

package/dist-lib/index.d.ts

@@ -1,7 +1,15 @@
 import type { FlowModule } from "@flowselections/core";
+import { InvoiceEmailSettingsCard } from "./components/settings/InvoiceEmailSettingsCard";
+export { InvoiceEmailSettingsCard };
 export * from './_core-safelist';
 export { FacturenForInstallatieTechniek } from './components/FacturenForInstallatieTechniek';
 export { FactuurDetailPage } from './components/FactuurDetailPage';
 export { TemplateModuleLogo } from './components/TemplateModuleLogo';
 export declare const facturenInstallatietechniekModule: FlowModule;
+export { InvoiceDetailsFields } from "./components/InvoiceDetailsFields";
+export { WerkbonPreviewPanel } from './components/WerkbonPreviewPanel';
+export { InvoiceA4Preview } from "./components/InvoiceA4Preview";
+export { ArticlePhoto } from "./components/ArticlePhoto";
+export { InvoiceBrandingSettingsCard } from "./components/settings/InvoiceBrandingSettingsCard";
+export { InstellingenPage } from "./components/settings/InstellingenPage";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,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,UAY/C,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,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"}

package/dist-lib/index.js

@@ -2,6 +2,9 @@
 // src/index.ts — MODULE CONTRACT
 // ============================================================================
 import { FileText } from "lucide-react";
+import { InvoiceBrandingSettingsCard } from "./components/settings/InvoiceBrandingSettingsCard";
+import { InvoiceEmailSettingsCard } from "./components/settings/InvoiceEmailSettingsCard";
+export { InvoiceEmailSettingsCard };
 export * from './_core-safelist';
 export { FacturenForInstallatieTechniek } from './components/FacturenForInstallatieTechniek';
 export { FactuurDetailPage } from './components/FactuurDetailPage';
@@ -9,11 +12,20 @@ export { TemplateModuleLogo } from './components/TemplateModuleLogo';
 export const facturenInstallatietechniekModule = {
     id: "facturen-installatietechniek",
     name: "Facturen Installatietechniek",
-    version: "1.0.0",
+    version: "1.3.3", // houd gelijk aan package.json (zie src/lib/module-version.test.ts)
     nav: {
         label: "Facturen",
         href: "/facturen-installatietechniek",
         icon: FileText,
     },
-    settingsCards: [],
+    settingsCards: [
+        { component: InvoiceBrandingSettingsCard, order: 20 },
+        { component: InvoiceEmailSettingsCard, order: 21 },
+    ],
 };
+export { InvoiceDetailsFields } from "./components/InvoiceDetailsFields";
+export { WerkbonPreviewPanel } from './components/WerkbonPreviewPanel';
+export { InvoiceA4Preview } from "./components/InvoiceA4Preview";
+export { ArticlePhoto } from "./components/ArticlePhoto";
+export { InvoiceBrandingSettingsCard } from "./components/settings/InvoiceBrandingSettingsCard";
+export { InstellingenPage } from "./components/settings/InstellingenPage";