@flowselections/facturen-installatie-techniek 1.4.3 → 1.5.1

package/README.md

@@ -0,0 +1,27 @@
+# @flowselections/facturen-installatie-techniek
+
+Facturen-module voor FlowSelections-shells: facturen maken uit werkbonnen/offertes of handmatig, bewerken, samenvoegen, als PDF versturen.
+
+## Instellingen (per database)
+- **Btw-tarieven** — tabel `invoice_vat_rates` (tarief, omschrijving, standaard, actief). Standaard 21% (standaard) en 9%. "Btw verlegd" (0%) is altijd een aparte keuze. Beheer: Instellingen → Btw en tijdzone.
+- **Tijdzone** — tabel `invoice_module_settings.timezone`, standaard `Europe/Amsterdam`. Bepaalt "vandaag" voor de factuurdatum en de week/maand/jaar-periodes.
+- Ontbreken deze tabellen of rijen, dan gebruikt de module de standaardwaarden hierboven en logt een waarschuwing (`[facturen] instellingen ontbreken…`); de controlekaart toont dit ook.
+
+## Rekenregels
+`src/lib/rekenregels.ts` bevat de gedeelde FlowSelections-rekenregels (bedragen naar centen, kalenderdatums, pakket-, reis-, afrondings- en mandaatregels). Deze module gebruikt `parseBedragNaarCenten`, `vandaagLokaal`, `plusDagen` en `lokaleDatum`; basispakketten rekenen nog met de bestaande factuurlogica.
+
+## Gedrag
+- Bedragen en aantallen: "12,50", "12.50", "1.250,00" en "1,250.00" worden herkend; ongeldige invoer geeft "Ongeldig bedrag" en blokkeert opslaan.
+- Per bron (werkbon/offerte) bestaat maximaal één niet-gecrediteerde factuur (unieke index + controle in `invoice_create_from_source`).
+- Samenvoegen alleen bij dezelfde klant (klant-id) en hetzelfde btw-regime; ook in `invoice_merge` gecontroleerd.
+- Opslaan controleert of een ander intussen wijzigde (`invoice_update_full_vat`, optionele `_expected_updated_at`).
+- Lange facturen worden meerdere A4-pagina's met kopregel en paginanummer. De PDF wordt alleen gedownload via de knop "PDF downloaden".
+- Verzenden naar een ander adres wijzigt het klantrecord niet.
+
+## Vereist in de omgeving
+- Shell-sessie en Supabase-client via `@flowselections/core`.
+- Opslagbuckets `layout-logos` en `artikel-fotos`.
+- Server: `SUPABASE_URL`, `SUPABASE_PUBLISHABLE_KEY` (door de shell geleverd).
+
+## Tests
+`bunx vitest@3 run`

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

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

package/dist-lib/components/FacturenForInstallatieTechniek.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { WerkbonPreviewPanel } from "./WerkbonPreviewPanel.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { dependencyMessage } from "../lib/dependencies";
-import { DEFAULT_VAT_RATE } from "../lib/config";
+import { dependencyMessage, explainError } from "../lib/dependencies";
+import { plusDagen, vandaagLokaal } from "../lib/rekenregels";
+import { useInvoiceSettings } from "../lib/settings";
 import { supabase } from "@flowselections/core";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, toast, } from "@flowselections/core";
 import { Plus } from "lucide-react";
-import { createInvoiceFromSource, emptyInvoiceDetails, fetchInvoicesDetailed, fetchInvoiceKpis, fetchSourceLines, formatCents, listSources, SOURCE_LABELS, STATUS_LABELS, emptyInvoiceBranding, fetchInvoiceBranding, getInvoiceLogoUrl, editLineToBillable, emptyEditLine, peekNextInvoiceNumber, } from "../lib/facturen";
+import { createInvoiceFromSource, emptyInvoiceDetails, firstLineInputError, mergeBlockReason, fetchInvoicesDetailed, fetchInvoiceKpis, fetchSourceLines, formatCents, listSources, SOURCE_LABELS, STATUS_LABELS, emptyInvoiceBranding, fetchInvoiceBranding, getInvoiceLogoUrl, editLineToBillable, emptyEditLine, peekNextInvoiceNumber, canMerge, canSelectForMerge, mergeInvoices, } from "../lib/facturen";
 import { InvoiceA4Preview } from "./InvoiceA4Preview";
 function statusVariant(status) {
     if (status === "betaald")
@@ -18,13 +19,24 @@ function statusVariant(status) {
         return "outline";
     return "secondary";
 }
-function InvoiceTable({ invoices, emptyText, onOpen, }) {
+function InvoiceTable({ invoices, emptyText, onOpen, selection, }) {
     if (invoices.length === 0) {
         return _jsx("p", { className: "text-sm text-muted-foreground", children: emptyText });
     }
-    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Nummer" }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Bron" }), _jsx(TableHead, { children: "Datum" }), _jsx(TableHead, { className: "text-right", children: "Totaal" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: invoices.map((invoice) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => onOpen(invoice.id), children: [_jsx(TableCell, { className: "font-medium", children: _jsx(Link, { to: "/facturen-installatietechniek/detail/$id", params: { id: invoice.id }, search: { send: false }, className: "underline-offset-2 hover:underline", children: invoice.invoice_number ?? "—" }) }), _jsx(TableCell, { children: invoice.customer_name ?? "—" }), _jsx(TableCell, { children: _jsx(Badge, { variant: "outline", children: SOURCE_LABELS[invoice.source_type]
-                                    ? SOURCE_LABELS[invoice.source_type] + (invoice.source_number ? ` ${invoice.source_number}` : "")
-                                    : "—" }) }), _jsx(TableCell, { children: new Date(invoice.invoice_date).toLocaleDateString("nl-NL") }), _jsx(TableCell, { className: "text-right", children: formatCents(invoice.total_cents) }), _jsx(TableCell, { children: _jsx(Badge, { variant: statusVariant(invoice.status), children: STATUS_LABELS[invoice.status] ?? invoice.status }) })] }, invoice.id))) })] }));
+    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [selection && _jsx(TableHead, { className: "w-10" }), _jsx(TableHead, { children: "Nummer" }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Bron" }), _jsx(TableHead, { children: "Datum" }), _jsx(TableHead, { className: "text-right", children: "Totaal" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: invoices.map((invoice) => {
+                    const checked = selection?.selectedIds.has(invoice.id) ?? false;
+                    const selectable = selection ? checked || selection.isSelectable(invoice) : true;
+                    return (_jsxs(TableRow, { className: selection && !selectable ? "cursor-not-allowed opacity-40" : "cursor-pointer", onClick: () => {
+                            if (selection) {
+                                if (selectable)
+                                    selection.onToggle(invoice);
+                            }
+                            else
+                                onOpen(invoice.id);
+                        }, children: [selection && (_jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsx("input", { type: "checkbox", "aria-label": `Selecteer ${invoice.invoice_number ?? "factuur"}`, className: "h-4 w-4 accent-primary", checked: checked, disabled: !selectable, onChange: () => selection.onToggle(invoice) }) })), _jsx(TableCell, { className: "font-medium", children: selection ? (invoice.invoice_number ?? "—") : (_jsx(Link, { to: "/facturen-installatietechniek/detail/$id", params: { id: invoice.id }, search: { send: false }, className: "underline-offset-2 hover:underline", children: invoice.invoice_number ?? "—" })) }), _jsx(TableCell, { children: invoice.customer_name ?? "—" }), _jsx(TableCell, { children: _jsx(Badge, { variant: "outline", children: SOURCE_LABELS[invoice.source_type]
+                                        ? SOURCE_LABELS[invoice.source_type] + (invoice.source_number ? ` ${invoice.source_number}` : "")
+                                        : "—" }) }), _jsx(TableCell, { children: invoice.invoice_date ? new Date(`${invoice.invoice_date}T12:00:00`).toLocaleDateString("nl-NL") : "—" }), _jsx(TableCell, { className: "text-right", children: formatCents(invoice.total_cents) }), _jsx(TableCell, { children: _jsx(Badge, { variant: statusVariant(invoice.status), children: STATUS_LABELS[invoice.status] ?? invoice.status }) })] }, invoice.id));
+                }) })] }));
 }
 export function FacturenForInstallatieTechniek() {
     const navigate = useNavigate();
@@ -41,6 +53,46 @@ export function FacturenForInstallatieTechniek() {
     const [open, setOpen] = useState(false);
     const [saving, setSaving] = useState(false);
     const createRef = useRef(false);
+    // samenvoegen
+    const [mergeMode, setMergeMode] = useState(false);
+    const [mergeSelected, setMergeSelected] = useState([]);
+    const [mergeConfirm, setMergeConfirm] = useState(false);
+    const [merging, setMerging] = useState(false);
+    const mergeRef = useRef(false);
+    const mergeIds = useMemo(() => new Set(mergeSelected.map((i) => i.id)), [mergeSelected]);
+    const stopMerge = () => { setMergeMode(false); setMergeSelected([]); setMergeConfirm(false); };
+    const toggleMerge = (invoice) => {
+        if (!mergeSelected.some((i) => i.id === invoice.id)) {
+            const reason = mergeBlockReason(invoice, mergeSelected);
+            if (reason) {
+                toast.error(`Niet samen te voegen: ${reason}`);
+                return;
+            }
+        }
+        setMergeSelected((cur) => cur.some((i) => i.id === invoice.id)
+            ? cur.filter((i) => i.id !== invoice.id)
+            : canSelectForMerge(invoice, cur) ? [...cur, invoice] : cur);
+    };
+    const doMerge = async () => {
+        if (!canMerge(mergeSelected) || mergeRef.current)
+            return;
+        mergeRef.current = true;
+        setMerging(true);
+        try {
+            const id = await mergeInvoices(mergeSelected.map((i) => i.id));
+            toast.success(`${mergeSelected.length} facturen samengevoegd`);
+            stopMerge();
+            await navigate({ to: "/facturen-installatietechniek/detail/$id", params: { id }, search: { send: true } });
+        }
+        catch (e) {
+            console.error("Samenvoegen mislukt", e);
+            toast.error(`Samenvoegen mislukt: ${explainError(e)}`);
+        }
+        finally {
+            mergeRef.current = false;
+            setMerging(false);
+        }
+    };
     // bron-tab
     const [sourceType, setSourceType] = useState("work_order");
     const [sources, setSources] = useState([]);
@@ -50,7 +102,9 @@ export function FacturenForInstallatieTechniek() {
     const [pickedCustomerId, setPickedCustomerId] = useState(null);
     const [tab, setTab] = useState("handmatig");
     const [details, setDetails] = useState(emptyInvoiceDetails);
-    const [vatRate, setVatRate] = useState(String(DEFAULT_VAT_RATE));
+    const settings = useInvoiceSettings();
+    const [vatRate, setVatRate] = useState(String(settings.defaultVatRate));
+    useEffect(() => { setVatRate(String(settings.defaultVatRate)); }, [settings.defaultVatRate]);
     const [lines, setLines] = useState([emptyEditLine()]);
     const [nextNumber, setNextNumber] = useState(null);
     const [linkedWorkOrder, setLinkedWorkOrder] = useState(null);
@@ -157,26 +211,27 @@ export function FacturenForInstallatieTechniek() {
         search: { send: false },
     }), [navigate]);
     const kpi = useMemo(() => {
-        const now = new Date();
+        // Kalenderdatums (yyyy-mm-dd) in de tijdzone uit de instellingen.
+        const today = vandaagLokaal(settings.timezone);
+        const weekday = (new Date(`${today}T00:00:00Z`).getUTCDay() + 6) % 7; // ma = 0
+        const weekStart = plusDagen(today, -weekday);
+        const weekEnd = plusDagen(weekStart, 7);
         const inPeriod = (d) => {
+            if (!d)
+                return false;
             if (paidPeriod === "jaar")
-                return d.getFullYear() === now.getFullYear();
+                return d.slice(0, 4) === today.slice(0, 4);
             if (paidPeriod === "maand")
-                return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth();
-            // huidige kalenderweek (maandag t/m zondag)
-            const start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-            start.setDate(start.getDate() - ((start.getDay() + 6) % 7));
-            const end = new Date(start);
-            end.setDate(end.getDate() + 7);
-            return d >= start && d < end;
+                return d.slice(0, 7) === today.slice(0, 7);
+            return d >= weekStart && d < weekEnd;
         };
         const paidRows = Array.isArray(kpiData?.paidThisYear) ? kpiData.paidThisYear : [];
         const paidMonthCents = paidRows
-            .filter((i) => inPeriod(new Date(i.invoice_date)))
+            .filter((i) => inPeriod(String(i.invoice_date ?? "").slice(0, 10)))
             .reduce((sum, i) => sum + (Number(i.total_cents) || 0), 0);
         const openCount = kpiData?.openCount ?? 0;
         return { paidMonthCents, openCount };
-    }, [kpiData, paidPeriod]);
+    }, [kpiData, paidPeriod, settings.timezone]);
     const createFromSource = async () => {
         const source = sources.find((s) => s.id === selectedSource);
         if (!source) {
@@ -188,6 +243,11 @@ export function FacturenForInstallatieTechniek() {
         createRef.current = true;
         setSaving(true);
         try {
+            const { data: sess } = await supabase.auth.getSession();
+            if (!sess?.session) {
+                toast.error("Factuur aanmaken mislukt: Je bent niet (meer) ingelogd. Log opnieuw in.");
+                return;
+            }
             const sourceLines = await fetchSourceLines(sourceType, source.id);
             if (sourceLines.length === 0) {
                 toast.error("Deze bron heeft geen factureerbare regels");
@@ -205,8 +265,9 @@ export function FacturenForInstallatieTechniek() {
             setOpen(false);
             await load();
         }
-        catch {
-            toast.error("Factuur aanmaken mislukt");
+        catch (e) {
+            console.error("Factuur aanmaken mislukt", e);
+            toast.error(`Factuur aanmaken mislukt: ${explainError(e)}`);
         }
         finally {
             createRef.current = false;
@@ -214,6 +275,11 @@ export function FacturenForInstallatieTechniek() {
         }
     };
     const createManual = async () => {
+        const invalid = firstLineInputError(lines);
+        if (invalid) {
+            toast.error(invalid);
+            return;
+        }
         const payloadLines = lines.filter((l) => l.description.trim() !== "").map(editLineToBillable);
         if (!details.customer_name.trim() || payloadLines.length === 0) {
             toast.error("Vul een klantnaam en minimaal één regel in");
@@ -224,11 +290,16 @@ export function FacturenForInstallatieTechniek() {
         createRef.current = true;
         setSaving(true);
         try {
+            const { data: sess } = await supabase.auth.getSession();
+            if (!sess?.session) {
+                toast.error("Factuur aanmaken mislukt: Je bent niet (meer) ingelogd. Log opnieuw in.");
+                return;
+            }
             const result = await createInvoiceFromSource({
                 sourceType: linkedWorkOrder ? "work_order" : "manual",
                 sourceId: linkedWorkOrder?.id ?? null,
                 customerId: linkedWorkOrder?.customer_id ?? pickedCustomerId ?? null,
-                vatRate: parseFloat(vatRate.replace(",", ".")) || DEFAULT_VAT_RATE,
+                vatRate: Number(vatRate.replace(",", ".")) || settings.defaultVatRate,
                 lines: payloadLines,
                 details,
             });
@@ -241,15 +312,20 @@ export function FacturenForInstallatieTechniek() {
                 search: { send: true },
             });
         }
-        catch {
-            toast.error("Factuur aanmaken mislukt");
+        catch (e) {
+            console.error("Factuur aanmaken mislukt", e);
+            toast.error(`Factuur aanmaken mislukt: ${explainError(e)}`);
         }
         finally {
             createRef.current = false;
             setSaving(false);
         }
     };
-    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: paidPeriod === "week" ? "Betaald deze week" : paidPeriod === "jaar" ? "Betaald dit jaar" : "Betaald deze maand" }), _jsxs(Select, { value: paidPeriod, onValueChange: (v) => setPaidPeriod(v), children: [_jsx(SelectTrigger, { className: "h-7 w-24 text-xs", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "week", children: "Week" }), _jsx(SelectItem, { value: "maand", children: "Maand" }), _jsx(SelectItem, { value: "jaar", children: "Jaar" })] })] })] }) }), _jsx(CardContent, { className: "text-2xl font-semibold", children: formatCents(kpi.paidMonthCents) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: "Openstaand" }) }), _jsx(CardContent, { className: "text-2xl font-semibold", children: kpi.openCount })] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs(Select, { value: statusFilter, onValueChange: setStatusFilter, children: [_jsx(SelectTrigger, { className: "w-44", children: _jsx(SelectValue, { placeholder: "Status" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle statussen" }), Object.entries(STATUS_LABELS).map(([value, label]) => (_jsx(SelectItem, { value: value, children: label }, value)))] })] }), _jsxs(Select, { value: sourceFilter, onValueChange: setSourceFilter, children: [_jsx(SelectTrigger, { className: "w-44", children: _jsx(SelectValue, { placeholder: "Bron" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle bronnen" }), Object.entries(SOURCE_LABELS).map(([value, label]) => (_jsx(SelectItem, { value: value, children: label }, value)))] })] }), _jsx("div", { className: "ml-auto", children: _jsxs(Button, { onClick: openNew, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Nieuwe factuur"] }) })] }), loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Laden\u2026" })) : sessionExpired ? (_jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col items-start gap-3 py-6", children: [_jsx("p", { className: "text-sm", children: "Je sessie is verlopen, log opnieuw in om je facturen te zien." }), _jsx(Button, { asChild: true, children: _jsx(Link, { to: "/login", children: "Opnieuw inloggen" }) })] }) })) : loadError ? (_jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col items-start gap-3 py-6", children: [_jsx("p", { className: "text-sm", children: "Facturen konden niet worden geladen. Probeer het opnieuw." }), _jsx(Button, { onClick: () => void load(), children: "Opnieuw proberen" })] }) })) : (_jsxs(_Fragment, { children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Goedkeuren en verzenden" }) }), _jsx(CardContent, { children: _jsx(InvoiceTable, { invoices: conceptInvoices, emptyText: "Geen conceptfacturen.", onOpen: openInvoice }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Facturen" }) }), _jsxs(CardContent, { children: [_jsx(InvoiceTable, { invoices: sendOrPaidInvoices, emptyText: "Geen facturen gevonden.", onOpen: openInvoice }), hasMore && (_jsx("div", { className: "mt-4 flex justify-center", children: _jsx(Button, { variant: "outline", onClick: () => void loadMore(), disabled: loadingMore, children: loadingMore ? "Laden…" : "Meer laden" }) }))] })] })] })), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "flex max-h-[92vh] max-w-[calc(100vw-2rem)] flex-col sm:max-w-7xl", children: [_jsx(DialogHeader, { className: "shrink-0", children: _jsx(DialogTitle, { children: "Nieuwe factuur" }) }), _jsxs("div", { className: linkedWorkOrder ? "grid min-h-0 flex-1 gap-6 overflow-y-auto md:grid-cols-2 md:overflow-hidden" : "contents", children: [linkedWorkOrder && (_jsx("div", { className: "min-h-0 rounded-md border bg-muted/30 p-4 md:overflow-y-auto", children: _jsx(WerkbonPreviewPanel, { workOrderId: linkedWorkOrder.id }) })), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto pr-1", children: [linkedWorkOrder && _jsx("p", { className: "mb-2 text-xs uppercase tracking-wide text-muted-foreground", children: "Factuur" }), _jsxs(Tabs, { value: tab, onValueChange: setTab, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "bron", children: "Uit bron" }), _jsx(TabsTrigger, { value: "handmatig", children: "Handmatig" })] }), _jsxs(TabsContent, { value: "bron", className: "space-y-4 pt-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Brontype" }), _jsxs(Select, { value: sourceType, onValueChange: (v) => setSourceType(v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "work_order", children: "Werkbon" }), _jsx(SelectItem, { value: "quotation", children: "Offerte" })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Bron" }), sourcesLoading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Bronnen laden\u2026" })) : sources.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen factureerbare bronnen gevonden." })) : (_jsxs(Select, { value: selectedSource, onValueChange: setSelectedSource, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies een bron" }) }), _jsx(SelectContent, { children: sources.map((s) => (_jsx(SelectItem, { value: s.id, children: (s.number ?? "zonder nummer") + (s.customer_name ? ` — ${s.customer_name}` : "") }, s.id))) })] }))] }), _jsx(Button, { onClick: createFromSource, disabled: saving || !selectedSource, className: "w-full", children: saving ? "Bezig…" : "Factuur aanmaken" })] }), _jsxs(TabsContent, { value: "handmatig", className: "space-y-4 pt-4", children: [linkedWorkOrder ? (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Gekoppeld aan werkbon ", _jsx("span", { className: "font-medium", children: linkedWorkOrder.number ?? "—" })] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { htmlFor: "btw", className: "text-xs", children: "Standaard btw % nieuwe regels" }), _jsx(Input, { id: "btw", className: "h-8 w-20", value: vatRate, onChange: (e) => setVatRate(e.target.value) })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Klik op de teksten in de factuur om ze aan te passen." }), _jsx(InvoiceA4Preview, { branding: branding, details: details, lines: lines, invoiceNumber: nextNumber, numberIsProvisional: true, logoUrl: logoUrl, printable: false, editable: true, defaultVat: vatRate, onDetailsChange: setDetails, onLinesChange: setLines, onCustomerPick: linkedWorkOrder ? undefined : (c) => {
+    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: paidPeriod === "week" ? "Betaald deze week" : paidPeriod === "jaar" ? "Betaald dit jaar" : "Betaald deze maand" }), _jsxs(Select, { value: paidPeriod, onValueChange: (v) => setPaidPeriod(v), children: [_jsx(SelectTrigger, { className: "h-7 w-24 text-xs", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "week", children: "Week" }), _jsx(SelectItem, { value: "maand", children: "Maand" }), _jsx(SelectItem, { value: "jaar", children: "Jaar" })] })] })] }) }), _jsx(CardContent, { className: "text-2xl font-semibold", children: formatCents(kpi.paidMonthCents) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: "Openstaand" }) }), _jsx(CardContent, { className: "text-2xl font-semibold", children: kpi.openCount })] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs(Select, { value: statusFilter, onValueChange: setStatusFilter, children: [_jsx(SelectTrigger, { className: "w-44", children: _jsx(SelectValue, { placeholder: "Status" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle statussen" }), Object.entries(STATUS_LABELS).filter(([value]) => value !== "samengevoegd").map(([value, label]) => (_jsx(SelectItem, { value: value, children: label }, value)))] })] }), _jsxs(Select, { value: sourceFilter, onValueChange: setSourceFilter, children: [_jsx(SelectTrigger, { className: "w-44", children: _jsx(SelectValue, { placeholder: "Bron" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle bronnen" }), Object.entries(SOURCE_LABELS).map(([value, label]) => (_jsx(SelectItem, { value: value, children: label }, value)))] })] }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [mergeMode ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: stopMerge, disabled: merging, children: "Annuleren" }), _jsxs(Button, { onClick: () => setMergeConfirm(true), disabled: !canMerge(mergeSelected) || merging, children: ["Samenvoegen (", mergeSelected.length, ")"] })] })) : (_jsx(Button, { variant: "outline", onClick: () => setMergeMode(true), children: "Samenvoegen" })), _jsxs(Button, { onClick: openNew, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Nieuwe factuur"] })] })] }), loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Laden\u2026" })) : sessionExpired ? (_jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col items-start gap-3 py-6", children: [_jsx("p", { className: "text-sm", children: "Je sessie is verlopen, log opnieuw in om je facturen te zien." }), _jsx(Button, { asChild: true, children: _jsx(Link, { to: "/login", children: "Opnieuw inloggen" }) })] }) })) : loadError ? (_jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col items-start gap-3 py-6", children: [_jsx("p", { className: "text-sm", children: "Facturen konden niet worden geladen. Probeer het opnieuw." }), _jsx(Button, { onClick: () => void load(), children: "Opnieuw proberen" })] }) })) : (_jsxs(_Fragment, { children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Goedkeuren en verzenden" }) }), _jsxs(CardContent, { children: [_jsx(InvoiceTable, { invoices: conceptInvoices, emptyText: "Geen conceptfacturen.", onOpen: openInvoice, selection: mergeMode ? {
+                                            selectedIds: mergeIds,
+                                            isSelectable: (i) => canSelectForMerge(i, mergeSelected),
+                                            onToggle: toggleMerge,
+                                        } : undefined }), mergeMode && (_jsx("p", { className: "mt-3 text-xs text-muted-foreground", children: "Vink minimaal twee conceptfacturen van dezelfde klant aan." }))] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Facturen" }) }), _jsxs(CardContent, { children: [_jsx(InvoiceTable, { invoices: sendOrPaidInvoices, emptyText: "Geen facturen gevonden.", onOpen: openInvoice }), hasMore && (_jsx("div", { className: "mt-4 flex justify-center", children: _jsx(Button, { variant: "outline", onClick: () => void loadMore(), disabled: loadingMore, children: loadingMore ? "Laden…" : "Meer laden" }) }))] })] })] })), _jsx(Dialog, { open: mergeConfirm, onOpenChange: (o) => !merging && setMergeConfirm(o), children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Facturen samenvoegen" }) }), _jsxs("p", { className: "text-sm", children: [mergeSelected.length, " conceptfacturen van ", mergeSelected[0]?.customer_name ?? "deze klant", " worden samengevoegd tot \u00E9\u00E9n nieuwe factuur. De losse facturen worden bewaard als \u201CSamengevoegd\u201D en verdwijnen uit de lijst."] }), _jsx("ul", { className: "text-sm text-muted-foreground", children: mergeSelected.map((i) => (_jsxs("li", { children: [i.invoice_number ?? "—", " \u00B7 ", formatCents(i.total_cents)] }, i.id))) }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setMergeConfirm(false), disabled: merging, children: "Annuleren" }), _jsx(Button, { onClick: () => void doMerge(), disabled: merging, children: merging ? "Bezig…" : "Samenvoegen" })] })] }) }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "flex max-h-[92vh] max-w-[calc(100vw-2rem)] flex-col sm:max-w-7xl", children: [_jsx(DialogHeader, { className: "shrink-0", children: _jsx(DialogTitle, { children: "Nieuwe factuur" }) }), _jsxs("div", { className: linkedWorkOrder ? "grid min-h-0 flex-1 gap-6 overflow-y-auto md:grid-cols-2 md:overflow-hidden" : "contents", children: [linkedWorkOrder && (_jsx("div", { className: "min-h-0 rounded-md border bg-muted/30 p-4 md:overflow-y-auto", children: _jsx(WerkbonPreviewPanel, { workOrderId: linkedWorkOrder.id }) })), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto pr-1", children: [linkedWorkOrder && _jsx("p", { className: "mb-2 text-xs uppercase tracking-wide text-muted-foreground", children: "Factuur" }), _jsxs(Tabs, { value: tab, onValueChange: setTab, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "bron", children: "Uit bron" }), _jsx(TabsTrigger, { value: "handmatig", children: "Handmatig" })] }), _jsxs(TabsContent, { value: "bron", className: "space-y-4 pt-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Brontype" }), _jsxs(Select, { value: sourceType, onValueChange: (v) => setSourceType(v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "work_order", children: "Werkbon" }), _jsx(SelectItem, { value: "quotation", children: "Offerte" })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Bron" }), sourcesLoading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Bronnen laden\u2026" })) : sources.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen factureerbare bronnen gevonden." })) : (_jsxs(Select, { value: selectedSource, onValueChange: setSelectedSource, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies een bron" }) }), _jsx(SelectContent, { children: sources.map((s) => (_jsx(SelectItem, { value: s.id, children: (s.number ?? "zonder nummer") + (s.customer_name ? ` — ${s.customer_name}` : "") }, s.id))) })] }))] }), _jsx(Button, { onClick: createFromSource, disabled: saving || !selectedSource, className: "w-full", children: saving ? "Bezig…" : "Factuur aanmaken" })] }), _jsxs(TabsContent, { value: "handmatig", className: "space-y-4 pt-4", children: [linkedWorkOrder ? (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Gekoppeld aan werkbon ", _jsx("span", { className: "font-medium", children: linkedWorkOrder.number ?? "—" })] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { htmlFor: "btw", className: "text-xs", children: "Standaard btw % nieuwe regels" }), _jsx(Input, { id: "btw", className: "h-8 w-20", value: vatRate, onChange: (e) => setVatRate(e.target.value) })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Klik op de teksten in de factuur om ze aan te passen." }), _jsx(InvoiceA4Preview, { branding: branding, details: details, lines: lines, invoiceNumber: nextNumber, numberIsProvisional: true, logoUrl: logoUrl, printable: false, editable: true, defaultVat: vatRate, onDetailsChange: setDetails, onLinesChange: setLines, onCustomerPick: linkedWorkOrder ? undefined : (c) => {
                                                                 setPickedCustomerId(c.id);
                                                                 setDetails((d) => ({
                                                                     ...d,

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,gCA6bhC"}
+{"version":3,"file":"FactuurDetailPage.d.ts","sourceRoot":"","sources":["../../src/components/FactuurDetailPage.tsx"],"names":[],"mappings":"AAgDA,wBAAgB,iBAAiB,gCAudhC"}

package/dist-lib/components/FactuurDetailPage.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { DEFAULT_VAT_RATE } from "../lib/config";
+import { useInvoiceSettings } from "../lib/settings";
 import { Link, useNavigate, useParams, useSearch } from "@tanstack/react-router";
-import { Badge, Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, toast, } from "@flowselections/core";
+import { Badge, Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Label, Textarea, toast, } from "@flowselections/core";
 import { ArrowLeft, ChevronLeft, ChevronRight, Download, FileCheck2, Mail, Pencil, Save, X } from "lucide-react";
-import { detailsFromRecord, downloadPdfBase64, elementToPdfBase64, emptyInvoiceBranding, emptyInvoiceDetails, fetchCustomerEmail, fetchInvoice, fetchInvoiceEmailPurpose, fetchSenderForPurpose, fetchInvoiceItems, fetchInvoices, getInvoiceLogoUrl, itemToEditLine, registerInvoiceSend, sendInvoiceEmail, SOURCE_LABELS, STATUS_LABELS, updateInvoiceFull, updateInvoiceStatus, } from "../lib/facturen";
+import { detailsFromRecord, downloadPdfBase64, elementToPdfBase64, emptyInvoiceBranding, emptyInvoiceDetails, fetchCustomerEmail, fetchInvoice, fetchInvoiceEmailPurpose, fetchSenderForPurpose, fetchInvoiceItems, fetchInvoices, getInvoiceLogoUrl, itemToEditLine, registerInvoiceSend, sendInvoiceEmail, setInvoiceNote, SOURCE_LABELS, STATUS_LABELS, updateInvoiceFull, firstLineInputError, InvoiceConflictError, } from "../lib/facturen";
 import { InvoiceA4Preview } from "./InvoiceA4Preview";
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const isValidEmail = (value) => EMAIL_PATTERN.test(value.trim());
@@ -34,8 +34,14 @@ export function FactuurDetailPage() {
     const sheetRef = useRef(null);
     const autoOpenedRef = useRef(false);
     const sendingRef = useRef(false);
-    const statusRef = useRef(false);
     const [senderChecked, setSenderChecked] = useState(false);
+    const [noteText, setNoteText] = useState("");
+    const [reverseCharge, setReverseCharge] = useState(false);
+    const [noteSaving, setNoteSaving] = useState(false);
+    const [noteSavedAt, setNoteSavedAt] = useState(null);
+    const settings = useInvoiceSettings();
+    const settingsRef = useRef(settings);
+    settingsRef.current = settings;
     const loadSeqRef = useRef(0);
     const load = useCallback(async () => {
         const seq = ++loadSeqRef.current;
@@ -48,9 +54,12 @@ export function FactuurDetailPage() {
             if (seq !== loadSeqRef.current)
                 return;
             setInvoice(inv);
+            setNoteText(inv?.note ?? "");
+            setReverseCharge(Boolean(inv?.vat_reverse_charge));
+            setNoteSavedAt(null);
             setDetails(detailsFromRecord(inv));
             const safeRows = Array.isArray(rows) ? rows : [];
-            setLines(safeRows.map((r) => itemToEditLine(r, Number(inv?.vat_rate ?? DEFAULT_VAT_RATE))));
+            setLines(safeRows.map((r) => itemToEditLine(r, Number(inv?.vat_rate ?? settingsRef.current.defaultVatRate))));
             setLogoUrl(logo);
         }
         catch {
@@ -105,37 +114,49 @@ export function FactuurDetailPage() {
             search: { send: false },
         });
     };
-    const changeStatus = async (status) => {
-        if (statusRef.current)
+    const saveRef = useRef(false);
+    const lineError = firstLineInputError(lines);
+    const save = async () => {
+        if (saveRef.current)
+            return;
+        if (lineError) {
+            toast.error(`Kan niet opslaan: ${lineError}`);
             return;
-        statusRef.current = true;
+        }
+        saveRef.current = true;
         setSaving(true);
         try {
-            await updateInvoiceStatus(id, status);
-            toast.success("Status bijgewerkt");
+            await updateInvoiceFull(id, details, lines, invoice?.note ?? null, reverseCharge, invoice?.updated_at ?? null);
+            toast.success("Factuur opgeslagen");
+            setEditing(false);
             await load();
         }
-        catch {
-            toast.error("Status bijwerken mislukt");
+        catch (e) {
+            console.error("[facturen] opslaan mislukt", e);
+            toast.error(e instanceof InvoiceConflictError ? e.message : e instanceof Error ? e.message : "Opslaan mislukt");
         }
         finally {
-            statusRef.current = false;
+            saveRef.current = false;
             setSaving(false);
         }
     };
-    const save = async () => {
-        setSaving(true);
+    const saveNote = async () => {
+        if (noteSaving || !invoice)
+            return;
+        setNoteSaving(true);
         try {
-            await updateInvoiceFull(id, details, lines, invoice?.note ?? null);
-            toast.success("Factuur opgeslagen");
-            setEditing(false);
-            await load();
+            const at = await setInvoiceNote(id, noteText);
+            const clean = noteText.trim();
+            setInvoice((prev) => (prev ? { ...prev, note: clean || null } : prev));
+            setNoteText(clean);
+            setNoteSavedAt(at ?? new Date().toISOString());
+            toast.success("Notitie opgeslagen");
         }
         catch (e) {
-            toast.error(e instanceof Error ? e.message : "Opslaan mislukt");
+            toast.error(e instanceof Error ? e.message : "Notitie opslaan mislukt");
         }
         finally {
-            setSaving(false);
+            setNoteSaving(false);
         }
     };
     const pdfFilename = `Factuur-${invoice?.invoice_number ?? "concept"}.pdf`;
@@ -167,9 +188,8 @@ export function FactuurDetailPage() {
             return;
         setPreparingPdf(true);
         try {
-            const pdf = await elementToPdfBase64(sheetRef.current);
+            const pdf = await elementToPdfBase64(sheetRef.current, { header: `Factuur ${invoice?.invoice_number ?? ""}`.trim() });
             setPreparedPdf(pdf);
-            downloadPdfBase64(pdf, pdfFilename);
         }
         catch (error) {
             toast.error(error instanceof Error ? error.message : "De factuur-PDF kon niet worden aangemaakt");
@@ -274,5 +294,10 @@ 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: [!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" })] })] }) })] }));
+    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 || Boolean(lineError), title: lineError ?? undefined, 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(Badge, { variant: "secondary", className: "px-3 py-1.5 text-sm", title: "De status wordt automatisch bepaald", children: STATUS_LABELS[invoice.status] ?? invoice.status })] })] }), _jsxs("div", { className: "flex flex-col gap-6 xl:flex-row xl:items-start", children: [_jsxs("aside", { className: "w-full shrink-0 space-y-2 rounded-lg border border-border bg-card p-4 xl:sticky xl:top-36 xl:w-72", children: [_jsx(Label, { htmlFor: "inv-note", className: "text-sm font-semibold", children: "Notitie" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Alleen intern. Komt niet op de factuur of in de e-mail." }), _jsx(Textarea, { id: "inv-note", rows: 6, value: noteText, onChange: (e) => setNoteText(e.target.value), placeholder: "Typ hier een notitie\u2026" }), _jsxs(Button, { size: "sm", className: "w-full", onClick: () => void saveNote(), disabled: noteSaving || noteText === (invoice.note ?? ""), children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), noteSaving ? "Opslaan…" : "Notitie opslaan"] }), noteSavedAt ? (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Laatst opgeslagen ", new Date(noteSavedAt).toLocaleString("nl-NL")] })) : null] }), _jsx("div", { className: "min-w-0 flex-1", 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) || settings.defaultVatRate), onDetailsChange: setDetails, onLinesChange: setLines, reverseCharge: reverseCharge, onReverseChargeChange: setReverseCharge }) })] }), _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…" : preparedPdf ? `${pdfFilename} is klaar als bijlage.` : "PDF kon niet worden voorbereid." })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: !preparedPdf || preparingPdf, onClick: () => { try {
+                                        downloadPdfBase64(preparedPdf, pdfFilename);
+                                    }
+                                    catch (e) {
+                                        toast.error(e instanceof Error ? e.message : "Downloaden mislukt");
+                                    } }, children: [_jsx(Download, { className: "mr-2 h-4 w-4" }), "PDF downloaden"] }), !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

@@ -13,6 +13,9 @@ type Props = {
     onLinesChange?: (l: EditLine[]) => void;
     /** Toon klantkeuzelijst bij Klantnaam (alleen nieuwe handmatige factuur). */
     onCustomerPick?: (c: CustomerOption) => void;
+    /** Btw verlegd naar afnemer: alle regels 0%, totaal zonder btw. */
+    reverseCharge?: boolean;
+    onReverseChargeChange?: (v: boolean) => void;
 };
 export declare const InvoiceA4Preview: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLElement>>;
 export {};

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"InvoiceA4Preview.d.ts","sourceRoot":"","sources":["../../src/components/InvoiceA4Preview.tsx"],"names":[],"mappings":"AAOA,OAAO,EAWL,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,eAAe,EACpB,KAAK,cAAc,EAGpB,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;IAC7C,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAoDF,eAAO,MAAM,gBAAgB,+FAuN3B,CAAC"}