@flowselections/facturen-installatie-techniek 1.0.2 → 1.3.4

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

@@ -0,0 +1,8 @@
+type ArticlePhotoProps = {
+    src?: string | null;
+    alt: string;
+    className?: string;
+};
+export declare function ArticlePhoto({ src, alt, className }: ArticlePhotoProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ArticlePhoto.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticlePhoto.d.ts","sourceRoot":"","sources":["../../src/components/ArticlePhoto.tsx"],"names":[],"mappings":"AAEA,KAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,SAAuB,EAAE,EAAE,iBAAiB,+BAcpF"}

package/dist-lib/components/ArticlePhoto.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+export function ArticlePhoto({ src, alt, className = "h-14 w-14" }) {
+    const [failed, setFailed] = useState(false);
+    useEffect(() => setFailed(false), [src]);
+    return (_jsx("div", { className: `shrink-0 overflow-hidden rounded-sm bg-muted ${className}`, children: src && !failed ? (_jsx("img", { src: src, alt: alt, className: "h-full w-full object-cover", onError: () => setFailed(true) })) : (_jsx("div", { className: "h-full w-full", role: "img", "aria-label": `Geen foto beschikbaar voor ${alt}` })) }));
+}

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

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

package/dist-lib/components/FacturenForInstallatieTechniek.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { WerkbonPreviewPanel } from "../components/WerkbonPreviewPanel";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Link } from "@tanstack/react-router";
+import { DEFAULT_VAT_RATE } from "../lib/config";
+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, Trash2 } from "lucide-react";
-import { createInvoiceFromSource, euroToCents, fetchInvoices, fetchSourceLines, formatCents, listSources, SOURCE_LABELS, STATUS_LABELS, } from "../lib/facturen";
-const emptyLine = () => ({ description: "", quantity: "1", unit: "stuk", price: "" });
+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 { InvoiceA4Preview } from "./InvoiceA4Preview";
 function statusVariant(status) {
     if (status === "betaald")
         return "default";
@@ -14,11 +17,26 @@ function statusVariant(status) {
         return "outline";
     return "secondary";
 }
+function InvoiceTable({ invoices, emptyText, onOpen, }) {
+    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))) })] }));
+}
 export function FacturenForInstallatieTechniek() {
+    const navigate = useNavigate();
     const [invoices, setInvoices] = useState([]);
     const [loading, setLoading] = useState(true);
+    const [sessionExpired, setSessionExpired] = useState(false);
+    const [loadError, setLoadError] = useState(false);
+    const [hasMore, setHasMore] = useState(false);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [kpiData, setKpiData] = useState(null);
     const [statusFilter, setStatusFilter] = useState("alle");
     const [sourceFilter, setSourceFilter] = useState("alle");
+    const [paidPeriod, setPaidPeriod] = useState("maand");
     const [open, setOpen] = useState(false);
     const [saving, setSaving] = useState(false);
     // bron-tab
@@ -27,22 +45,83 @@ export function FacturenForInstallatieTechniek() {
     const [sourcesLoading, setSourcesLoading] = useState(false);
     const [selectedSource, setSelectedSource] = useState("");
     // handmatig-tab
-    const [customerName, setCustomerName] = useState("");
-    const [invoiceDate, setInvoiceDate] = useState(() => new Date().toISOString().slice(0, 10));
-    const [vatRate, setVatRate] = useState("21");
-    const [lines, setLines] = useState([emptyLine()]);
+    const [pickedCustomerId, setPickedCustomerId] = useState(null);
+    const [tab, setTab] = useState("handmatig");
+    const [details, setDetails] = useState(emptyInvoiceDetails);
+    const [vatRate, setVatRate] = useState(String(DEFAULT_VAT_RATE));
+    const [lines, setLines] = useState([emptyEditLine()]);
+    const [nextNumber, setNextNumber] = useState(null);
+    const [linkedWorkOrder, setLinkedWorkOrder] = useState(null);
+    const [branding, setBranding] = useState(emptyInvoiceBranding);
+    const [logoUrl, setLogoUrl] = useState(null);
+    const resetForm = () => {
+        setPickedCustomerId(null);
+        setDetails(emptyInvoiceDetails(branding.payment_term_days));
+        setLines([emptyEditLine(vatRate)]);
+        setLinkedWorkOrder(null);
+    };
+    const openNew = () => {
+        resetForm();
+        setTab("handmatig");
+        setOpen(true);
+    };
+    useEffect(() => {
+        if (!open)
+            return;
+        fetchInvoiceBranding().then(async (row) => {
+            setBranding(row);
+            setLogoUrl(await getInvoiceLogoUrl(row.logo_path));
+            setDetails((current) => ({
+                ...current,
+                payment_term_days: current.payment_term_days === "30" ? String(row.payment_term_days) : current.payment_term_days,
+            }));
+        }).catch(() => toast.error("Factuurhuisstijl kon niet worden geladen"));
+        peekNextInvoiceNumber().then(setNextNumber);
+    }, [open]);
     const load = useCallback(async () => {
         setLoading(true);
         try {
-            setInvoices(await fetchInvoices());
+            const { data: userData } = await supabase.auth.getUser();
+            if (!userData?.user) {
+                setSessionExpired(true);
+                setLoadError(false);
+                setInvoices([]);
+                return;
+            }
+            setSessionExpired(false);
+            const result = await fetchInvoicesDetailed({ status: statusFilter, source: sourceFilter });
+            setLoadError(result.failed);
+            setInvoices(result.failed ? [] : result.invoices);
+            setHasMore(result.hasMore);
+            fetchInvoiceKpis().then(setKpiData).catch(() => setKpiData(null));
         }
         catch {
-            toast.error("Fout bij het laden van facturen");
+            setLoadError(true);
+            setInvoices([]);
         }
         finally {
             setLoading(false);
         }
-    }, []);
+    }, [statusFilter, sourceFilter]);
+    const loadMore = useCallback(async () => {
+        setLoadingMore(true);
+        try {
+            const offset = invoices.filter((i) => i.status !== "concept").length;
+            const result = await fetchInvoicesDetailed({ offset, status: statusFilter, source: sourceFilter });
+            if (result.failed) {
+                toast.error("Meer facturen laden is mislukt");
+                return;
+            }
+            setInvoices((prev) => {
+                const seen = new Set(prev.map((i) => i.id));
+                return [...prev, ...result.invoices.filter((i) => !seen.has(i.id))];
+            });
+            setHasMore(result.hasMore);
+        }
+        finally {
+            setLoadingMore(false);
+        }
+    }, [invoices, statusFilter, sourceFilter]);
     useEffect(() => {
         void load();
     }, [load]);
@@ -68,20 +147,34 @@ export function FacturenForInstallatieTechniek() {
     }, [open, sourceType]);
     const filtered = useMemo(() => invoices.filter((i) => (statusFilter === "alle" || i.status === statusFilter) &&
         (sourceFilter === "alle" || i.source_type === sourceFilter)), [invoices, statusFilter, sourceFilter]);
+    const conceptInvoices = useMemo(() => filtered.filter((i) => i.status === "concept"), [filtered]);
+    const sendOrPaidInvoices = useMemo(() => filtered.filter((i) => i.status !== "concept"), [filtered]);
+    const openInvoice = useCallback((id) => navigate({
+        to: "/facturen-installatietechniek/detail/$id",
+        params: { id },
+        search: { send: false },
+    }), [navigate]);
     const kpi = useMemo(() => {
         const now = new Date();
-        const openCents = invoices
-            .filter((i) => i.status === "verzonden" || i.status === "vervallen")
-            .reduce((sum, i) => sum + (i.total_cents || 0), 0);
-        const overdue = invoices.filter((i) => i.status === "vervallen").length;
-        const monthCents = invoices
-            .filter((i) => {
-            const d = new Date(i.invoice_date);
-            return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth();
-        })
-            .reduce((sum, i) => sum + (i.total_cents || 0), 0);
-        return { openCents, overdue, monthCents };
-    }, [invoices]);
+        const inPeriod = (d) => {
+            if (paidPeriod === "jaar")
+                return d.getFullYear() === now.getFullYear();
+            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;
+        };
+        const paidRows = Array.isArray(kpiData?.paidThisYear) ? kpiData.paidThisYear : [];
+        const paidMonthCents = paidRows
+            .filter((i) => inPeriod(new Date(i.invoice_date)))
+            .reduce((sum, i) => sum + (Number(i.total_cents) || 0), 0);
+        const openCount = kpiData?.openCount ?? 0;
+        return { paidMonthCents, openCount };
+    }, [kpiData, paidPeriod]);
     const createFromSource = async () => {
         const source = sources.find((s) => s.id === selectedSource);
         if (!source) {
@@ -115,40 +208,29 @@ export function FacturenForInstallatieTechniek() {
         }
     };
     const createManual = async () => {
-        const payloadLines = lines
-            .filter((l) => l.description.trim() !== "")
-            .map((l, index) => {
-            const quantity = parseFloat(l.quantity.replace(",", ".")) || 0;
-            const unitPrice = euroToCents(l.price);
-            return {
-                description: l.description.trim(),
-                kind: "other",
-                quantity,
-                unit: l.unit || "stuk",
-                unit_price_cents: unitPrice,
-                line_total_cents: Math.round(quantity * unitPrice),
-                sort_order: index + 1,
-            };
-        });
-        if (!customerName.trim() || payloadLines.length === 0) {
+        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");
             return;
         }
         setSaving(true);
         try {
             const result = await createInvoiceFromSource({
-                sourceType: "manual",
-                sourceId: null,
-                customerName: customerName.trim(),
-                vatRate: parseFloat(vatRate.replace(",", ".")) || 21,
-                invoiceDate,
+                sourceType: linkedWorkOrder ? "work_order" : "manual",
+                sourceId: linkedWorkOrder?.id ?? null,
+                customerId: linkedWorkOrder?.customer_id ?? pickedCustomerId ?? null,
+                vatRate: parseFloat(vatRate.replace(",", ".")) || DEFAULT_VAT_RATE,
                 lines: payloadLines,
+                details,
             });
-            toast.success(`Factuur ${result.invoice_number} aangemaakt`);
-            setCustomerName("");
-            setLines([emptyLine()]);
+            toast.success(result.reused ? `Bestaand concept ${result.invoice_number}` : `Factuur ${result.invoice_number} aangemaakt`);
+            resetForm();
             setOpen(false);
-            await load();
+            await navigate({
+                to: "/facturen-installatietechniek/detail/$id",
+                params: { id: result.id },
+                search: { send: true },
+            });
         }
         catch {
             toast.error("Factuur aanmaken mislukt");
@@ -157,5 +239,16 @@ export function FacturenForInstallatieTechniek() {
             setSaving(false);
         }
     };
-    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_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: formatCents(kpi.openCents) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: "Vervallen" }) }), _jsx(CardContent, { className: "text-2xl font-semibold", children: kpi.overdue })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: "Deze maand" }) }), _jsx(CardContent, { className: "text-2xl font-semibold", children: formatCents(kpi.monthCents) })] })] }), _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: () => setOpen(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Nieuwe factuur"] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Facturen" }) }), _jsx(CardContent, { children: loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Laden\u2026" })) : filtered.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen facturen gevonden." })) : (_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: filtered.map((invoice) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: _jsx(Link, { to: "/facturen-installatietechniek/detail/$id", params: { id: invoice.id }, className: "underline-offset-2 hover:underline", children: invoice.invoice_number ?? "—" }) }), _jsx(TableCell, { children: invoice.customer_name ?? "—" }), _jsx(TableCell, { children: _jsxs(Badge, { variant: "outline", children: [SOURCE_LABELS[invoice.source_type] ?? 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))) })] })) })] }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-w-3xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Nieuwe factuur" }) }), _jsxs(Tabs, { defaultValue: "bron", 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: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsxs("div", { className: "space-y-2 sm:col-span-1", children: [_jsx(Label, { htmlFor: "klant", children: "Klantnaam" }), _jsx(Input, { id: "klant", value: customerName, onChange: (e) => setCustomerName(e.target.value) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "datum", children: "Factuurdatum" }), _jsx(Input, { id: "datum", type: "date", value: invoiceDate, onChange: (e) => setInvoiceDate(e.target.value) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "btw", children: "Btw %" }), _jsx(Input, { id: "btw", value: vatRate, onChange: (e) => setVatRate(e.target.value) })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Label, { children: "Regels" }), lines.map((line, index) => (_jsxs("div", { className: "grid grid-cols-12 items-end gap-2", children: [_jsx(Input, { className: "col-span-5", placeholder: "Omschrijving", value: line.description, onChange: (e) => setLines((prev) => prev.map((l, i) => (i === index ? { ...l, description: e.target.value } : l))) }), _jsx(Input, { className: "col-span-2", placeholder: "Aantal", value: line.quantity, onChange: (e) => setLines((prev) => prev.map((l, i) => (i === index ? { ...l, quantity: e.target.value } : l))) }), _jsx(Input, { className: "col-span-2", placeholder: "Eenheid", value: line.unit, onChange: (e) => setLines((prev) => prev.map((l, i) => (i === index ? { ...l, unit: e.target.value } : l))) }), _jsx(Input, { className: "col-span-2", placeholder: "Prijs", value: line.price, onChange: (e) => setLines((prev) => prev.map((l, i) => (i === index ? { ...l, price: e.target.value } : l))) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "col-span-1", onClick: () => setLines((prev) => (prev.length === 1 ? [emptyLine()] : prev.filter((_, i) => i !== index))), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, index))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setLines((prev) => [...prev, emptyLine()]), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Regel toevoegen"] })] }), _jsx(Button, { onClick: createManual, disabled: saving, className: "w-full", children: saving ? "Bezig…" : "Factuur aanmaken" })] })] })] }) })] }));
+    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) => {
+                                                                setPickedCustomerId(c.id);
+                                                                setDetails((d) => ({
+                                                                    ...d,
+                                                                    customer_name: c.name ?? "",
+                                                                    customer_address: c.billing_street ?? "",
+                                                                    customer_postal_code: c.billing_postcode ?? "",
+                                                                    customer_city: c.billing_city ?? "",
+                                                                    debtor_number: c.customer_number ?? "",
+                                                                    customer_vat_number: c.vat_number ?? "",
+                                                                }));
+                                                            } }), _jsx(Button, { onClick: createManual, disabled: saving, className: "w-full", children: saving ? "Bezig…" : "Factuur aanmaken" })] })] })] })] })] }) })] }));
 }

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

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

package/dist-lib/components/FactuurDetailPage.js

@@ -1,32 +1,107 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
-import { Link, useParams } from "@tanstack/react-router";
-import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, } from "@flowselections/core";
-import { ArrowLeft } from "lucide-react";
-import { fetchInvoice, fetchInvoiceItems, formatCents, KIND_LABELS, SOURCE_LABELS, STATUS_LABELS, updateInvoiceStatus, } from "../lib/facturen";
+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 { 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 { 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 { InvoiceA4Preview } from "./InvoiceA4Preview";
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const isValidEmail = (value) => EMAIL_PATTERN.test(value.trim());
 export function FactuurDetailPage() {
     const { id } = useParams({ from: "/_authenticated/facturen-installatietechniek/detail/$id" });
+    const search = useSearch({ from: "/_authenticated/facturen-installatietechniek/detail/$id" });
+    const navigate = useNavigate();
     const [invoice, setInvoice] = useState(null);
-    const [items, setItems] = useState([]);
+    const [lines, setLines] = useState([]);
+    const [details, setDetails] = useState(emptyInvoiceDetails);
     const [loading, setLoading] = useState(true);
     const [saving, setSaving] = useState(false);
+    const [editing, setEditing] = useState(false);
+    const [logoUrl, setLogoUrl] = useState(null);
+    const [sendOpen, setSendOpen] = useState(false);
+    const [mail, setMail] = useState({ to: "", subject: "", message: "" });
+    const [mailToTouched, setMailToTouched] = useState(false);
+    const [knownEmail, setKnownEmail] = useState("");
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [sender, setSender] = useState(null);
+    const [attachPdf, setAttachPdf] = useState(true);
+    const [preparedPdf, setPreparedPdf] = useState("");
+    const [preparingPdf, setPreparingPdf] = useState(false);
+    const [siblingInvoices, setSiblingInvoices] = useState(null);
+    const [siblingsLoading, setSiblingsLoading] = useState(true);
+    const siblingRetryRef = useRef(false);
+    const sheetRef = useRef(null);
+    const autoOpenedRef = useRef(false);
+    const loadSeqRef = useRef(0);
     const load = useCallback(async () => {
+        const seq = ++loadSeqRef.current;
         setLoading(true);
         try {
             const [inv, rows] = await Promise.all([fetchInvoice(id), fetchInvoiceItems(id)]);
+            if (seq !== loadSeqRef.current)
+                return;
+            const logo = await getInvoiceLogoUrl(inv?.branding_snapshot?.logo_path);
+            if (seq !== loadSeqRef.current)
+                return;
             setInvoice(inv);
-            setItems(rows);
+            setDetails(detailsFromRecord(inv));
+            const safeRows = Array.isArray(rows) ? rows : [];
+            setLines(safeRows.map((r) => itemToEditLine(r, Number(inv?.vat_rate ?? DEFAULT_VAT_RATE))));
+            setLogoUrl(logo);
         }
         catch {
-            toast.error("Factuur kon niet worden geladen");
+            if (seq === loadSeqRef.current)
+                toast.error("Factuur kon niet worden geladen");
         }
         finally {
-            setLoading(false);
+            if (seq === loadSeqRef.current)
+                setLoading(false);
         }
     }, [id]);
     useEffect(() => {
         void load();
     }, [load]);
+    const loadSiblings = useCallback(async () => {
+        setSiblingsLoading(true);
+        try {
+            const rows = await fetchInvoices();
+            setSiblingInvoices(Array.isArray(rows) ? rows : []);
+        }
+        catch {
+            setSiblingInvoices(null);
+        }
+        finally {
+            setSiblingsLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        void loadSiblings();
+    }, [loadSiblings]);
+    // Als de huidige factuur nog niet in de lijst staat (net aangemaakt), één keer opnieuw ophalen.
+    useEffect(() => {
+        if (siblingsLoading || !siblingInvoices || siblingRetryRef.current)
+            return;
+        if (siblingInvoices.some((i) => i.id === id))
+            return;
+        siblingRetryRef.current = true;
+        void loadSiblings();
+    }, [siblingInvoices, siblingsLoading, id, loadSiblings]);
+    const listIndex = siblingInvoices ? siblingInvoices.findIndex((i) => i.id === id) : -1;
+    // Lijst is nieuwste eerst: vorige op de lijst = rij erboven, volgende = rij eronder.
+    const prevInvoice = listIndex > 0 ? siblingInvoices[listIndex - 1] : undefined;
+    const nextInvoice = listIndex >= 0 && siblingInvoices && listIndex < siblingInvoices.length - 1
+        ? siblingInvoices[listIndex + 1]
+        : undefined;
+    const goToSibling = (targetId) => {
+        if (!targetId)
+            return;
+        navigate({
+            to: "/facturen-installatietechniek/detail/$id",
+            params: { id: targetId },
+            search: { send: false },
+        });
+    };
     const changeStatus = async (status) => {
         setSaving(true);
         try {
@@ -41,11 +116,147 @@ export function FactuurDetailPage() {
             setSaving(false);
         }
     };
-    if (loading) {
+    const save = async () => {
+        setSaving(true);
+        try {
+            await updateInvoiceFull(id, details, lines, invoice?.note ?? null);
+            toast.success("Factuur opgeslagen");
+            setEditing(false);
+            await load();
+        }
+        catch (e) {
+            toast.error(e instanceof Error ? e.message : "Opslaan mislukt");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const pdfFilename = `Factuur-${invoice?.invoice_number ?? "concept"}.pdf`;
+    const openSend = async () => {
+        const num = invoice?.invoice_number ?? "";
+        const company = invoice?.branding_snapshot?.company_name ?? "";
+        let storedEmail = "";
+        try {
+            storedEmail = (await fetchCustomerEmail(invoice?.customer_id)) ?? "";
+        }
+        catch {
+            storedEmail = "";
+        }
+        setKnownEmail(storedEmail.trim());
+        const customerEmail = invoice?.sent_to || storedEmail;
+        setMail({
+            to: customerEmail,
+            subject: `Factuur ${num}${company ? ` van ${company}` : ""}`,
+            message: `Beste ${details.customer_attention || details.customer_name || "klant"},\n\nIn de bijlage vindt u factuur ${num}.\n\nMet vriendelijke groet,\n${company}`,
+        });
+        setSender(null);
+        setAttachPdf(true);
+        setPreparedPdf("");
+        setMailToTouched(false);
+        fetchInvoiceEmailPurpose().then(fetchSenderForPurpose).then(setSender).catch(() => setSender(null));
+        setSendOpen(true);
+        if (!sheetRef.current)
+            return;
+        setPreparingPdf(true);
+        try {
+            const pdf = await elementToPdfBase64(sheetRef.current);
+            setPreparedPdf(pdf);
+            downloadPdfBase64(pdf, pdfFilename);
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : "De factuur-PDF kon niet worden aangemaakt");
+        }
+        finally {
+            setPreparingPdf(false);
+        }
+    };
+    useEffect(() => {
+        autoOpenedRef.current = false;
+    }, [id]);
+    useEffect(() => {
+        if (loading || !invoice || !search.send || autoOpenedRef.current)
+            return;
+        autoOpenedRef.current = true;
+        void openSend();
+        void navigate({
+            to: "/facturen-installatietechniek/detail/$id",
+            params: { id },
+            search: { send: false },
+            replace: true,
+        });
+    }, [id, invoice, loading, navigate, search.send]);
+    const send = () => {
+        if (!isValidEmail(mail.to)) {
+            toast.error("Vul een geldig e-mailadres in");
+            return;
+        }
+        if (!invoice)
+            return;
+        if (!attachPdf || !preparedPdf) {
+            toast.error("Vink de PDF-bijlage aan voordat u de factuur verzendt");
+            return;
+        }
+        if (mail.to.trim().toLowerCase() !== knownEmail.toLowerCase()) {
+            setConfirmOpen(true);
+            return;
+        }
+        void doSend();
+    };
+    const doSend = async () => {
+        setConfirmOpen(false);
+        if (!invoice || !isValidEmail(mail.to) || !attachPdf || !preparedPdf)
+            return;
+        const targetInvoice = nextInvoice ?? prevInvoice;
+        setSaving(true);
+        try {
+            const queued = await sendInvoiceEmail({
+                invoiceId: id,
+                to: mail.to.trim(),
+                subject: mail.subject,
+                message: mail.message,
+                pdfBase64: preparedPdf,
+                filename: pdfFilename,
+            });
+            try {
+                await registerInvoiceSend(id, queued.outboxId);
+            }
+            catch (e) {
+                toast.warning(e instanceof Error ? e.message : "De e-mail staat in de wachtrij, maar de factuur kon niet als verzonden worden geregistreerd");
+            }
+            toast.success(`Factuur verzonden naar ${mail.to.trim()}`, {
+                description: "De factuur staat nu op Verzonden. De e-mailmodule verwerkt de verzending met de PDF als bijlage.",
+            });
+            setSendOpen(false);
+            if (targetInvoice) {
+                navigate({
+                    to: "/facturen-installatietechniek/detail/$id",
+                    params: { id: targetInvoice.id },
+                    search: { send: false },
+                });
+            }
+            else {
+                navigate({ to: "/facturen-installatietechniek" });
+            }
+        }
+        catch (e) {
+            toast.error(e instanceof Error ? e.message : "Verzenden mislukt");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const changeSendOpen = (nextOpen) => {
+        setSendOpen(nextOpen);
+        if (!nextOpen) {
+            setPreparedPdf("");
+        }
+    };
+    if (loading && !invoice)
         return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Laden\u2026" });
-    }
     if (!invoice) {
         return (_jsxs("main", { className: "space-y-4 p-6", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Factuur niet gevonden." }), _jsx(Button, { asChild: true, variant: "outline", children: _jsx(Link, { to: "/facturen-installatietechniek", children: "Terug naar overzicht" }) })] }));
     }
-    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-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}` : ""] }), _jsx("div", { className: "ml-auto w-48", children: _jsxs(Select, { value: invoice.status, onValueChange: (v) => changeStatus(v), disabled: saving, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: Object.entries(STATUS_LABELS).map(([value, label]) => (_jsx(SelectItem, { value: value, children: label }, value))) })] }) })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: "Klant" }) }), _jsx(CardContent, { className: "text-base", children: invoice.customer_name ?? "—" })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: "Factuurdatum" }) }), _jsx(CardContent, { className: "text-base", children: new Date(invoice.invoice_date).toLocaleDateString("nl-NL") })] }), _jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: "Totaal incl. btw" }) }), _jsx(CardContent, { className: "text-base font-semibold", children: formatCents(invoice.total_cents) })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Regels" }) }), _jsxs(CardContent, { className: "space-y-4", children: [items.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Deze factuur heeft geen regels." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Omschrijving" }), _jsx(TableHead, { children: "Soort" }), _jsx(TableHead, { className: "text-right", children: "Aantal" }), _jsx(TableHead, { children: "Eenheid" }), _jsx(TableHead, { className: "text-right", children: "Stukprijs" }), _jsx(TableHead, { className: "text-right", children: "Totaal" })] }) }), _jsx(TableBody, { children: items.map((item) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: item.description }), _jsx(TableCell, { children: KIND_LABELS[item.kind] ?? item.kind }), _jsx(TableCell, { className: "text-right", children: Number(item.quantity) }), _jsx(TableCell, { children: item.unit }), _jsx(TableCell, { className: "text-right", children: formatCents(item.unit_price_cents) }), _jsx(TableCell, { className: "text-right", children: formatCents(item.total_cents) })] }, item.id))) })] })), _jsxs("div", { className: "ml-auto w-64 space-y-1 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Subtotaal" }), _jsx("span", { children: formatCents(invoice.subtotal_cents) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsxs("span", { className: "text-muted-foreground", children: ["Btw ", Number(invoice.vat_rate), "%"] }), _jsx("span", { children: formatCents(invoice.vat_cents) })] }), _jsxs("div", { className: "flex justify-between font-semibold", children: [_jsx("span", { children: "Totaal" }), _jsx("span", { children: formatCents(invoice.total_cents) })] })] })] })] }), invoice.note ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Notitie" }) }), _jsx(CardContent, { className: "text-sm", children: invoice.note })] })) : null] }));
+    const isConcept = invoice.status === "concept";
+    const wasSent = Boolean(invoice.sent_at);
+    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "sticky top-16 z-20 -mx-6 flex flex-wrap items-center gap-3 border-b border-border/60 bg-background px-6 py-3", children: [_jsx(Button, { asChild: true, variant: "ghost", size: "sm", children: _jsxs(Link, { to: "/facturen-installatietechniek", className: "gap-1", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Overzicht"] }) }), _jsx("h1", { className: "text-xl font-semibold", children: invoice.invoice_number ?? "Concept" }), _jsxs(Badge, { variant: "outline", children: [SOURCE_LABELS[invoice.source_type] ?? invoice.source_type, invoice.source_number ? ` ${invoice.source_number}` : ""] }), invoice.sent_at ? (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["Verzonden ", new Date(invoice.sent_at).toLocaleString("nl-NL"), " aan ", invoice.sent_to] })) : null, _jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1 rounded-full border border-border bg-card p-1", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 rounded-full", "aria-label": "Vorige factuur op de lijst", title: "Vorige factuur op de lijst", disabled: editing || loading || siblingsLoading || !prevInvoice, onClick: () => goToSibling(prevInvoice?.id), children: _jsx(ChevronLeft, { className: "h-5 w-5" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 rounded-full", "aria-label": "Volgende factuur op de lijst", title: "Volgende factuur op de lijst", disabled: editing || loading || siblingsLoading || !nextInvoice, onClick: () => goToSibling(nextInvoice?.id), children: _jsx(ChevronRight, { className: "h-5 w-5" }) })] }), editing ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", onClick: () => { setEditing(false); void load(); }, disabled: saving, children: [_jsx(X, { className: "mr-2 h-4 w-4" }), "Annuleren"] }), _jsxs(Button, { onClick: save, disabled: saving, children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), saving ? "Opslaan…" : "Opslaan"] })] })) : (_jsxs(_Fragment, { children: [!wasSent ? (_jsxs(Button, { variant: "outline", onClick: () => (isConcept ? setEditing(true) : toast.error("Alleen conceptfacturen kunnen worden bewerkt. Zet de status terug op Concept.")), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Bewerken"] })) : null, _jsxs(Button, { onClick: () => void openSend(), children: [_jsx(Mail, { className: "mr-2 h-4 w-4" }), wasSent ? "Opnieuw verzenden" : "Verzenden"] })] })), _jsx("div", { className: "w-44", children: _jsxs(Select, { value: invoice.status, onValueChange: (v) => changeStatus(v), disabled: saving || editing, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: Object.entries(STATUS_LABELS).map(([value, label]) => (_jsx(SelectItem, { value: value, children: label }, value))) })] }) })] })] }), _jsx("div", { children: _jsx("div", { className: "min-w-0", children: _jsx(InvoiceA4Preview, { ref: sheetRef, branding: invoice.branding_snapshot ?? emptyInvoiceBranding(), details: details, lines: lines, invoiceNumber: invoice.invoice_number, logoUrl: logoUrl, printable: !editing, editable: editing, defaultVat: String(Number(invoice.vat_rate) || DEFAULT_VAT_RATE), onDetailsChange: setDetails, onLinesChange: setLines }) }) }), _jsx(Dialog, { open: sendOpen, onOpenChange: changeSendOpen, children: _jsxs(DialogContent, { className: "flex max-h-[92vh] max-w-[calc(100vw-2rem)] flex-col sm:max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Factuur verzenden" }) }), _jsxs("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto pr-1", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "mail-to", children: "E-mailadres klant" }), _jsx(Input, { id: "mail-to", type: "email", value: mail.to, onChange: (e) => setMail({ ...mail, to: e.target.value }), onBlur: () => setMailToTouched(true), placeholder: "naam@bedrijf.nl", "aria-invalid": mailToTouched && !isValidEmail(mail.to) }), mailToTouched && !isValidEmail(mail.to) ? (_jsx("p", { className: "text-xs text-destructive", children: "Vul een geldig e-mailadres in, bijvoorbeeld naam@bedrijf.nl" })) : null] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "mail-subject", children: "Onderwerp" }), _jsx(Input, { id: "mail-subject", value: mail.subject, onChange: (e) => setMail({ ...mail, subject: e.target.value }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "mail-msg", children: "Bericht" }), _jsx(Textarea, { id: "mail-msg", rows: 6, value: mail.message, onChange: (e) => setMail({ ...mail, message: e.target.value }) })] }), _jsxs("label", { className: "flex cursor-pointer items-start gap-3 rounded-md border border-border p-3", children: [_jsx("input", { type: "checkbox", checked: attachPdf, onChange: (event) => setAttachPdf(event.target.checked), className: "mt-1 h-4 w-4 accent-primary" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium", children: [preparedPdf ? _jsx(FileCheck2, { className: "h-4 w-4 text-primary" }) : _jsx(Download, { className: "h-4 w-4" }), "Factuur als PDF meesturen"] }), _jsx("span", { className: "mt-1 block truncate text-xs text-muted-foreground", children: preparingPdf ? "PDF wordt aangemaakt en gedownload…" : preparedPdf ? `${pdfFilename} is gedownload en klaar als bijlage.` : "PDF kon niet worden voorbereid." })] })] }), !attachPdf ? _jsx("p", { className: "text-xs text-destructive", children: "Vink de PDF aan om deze e-mail te kunnen versturen." }) : null, _jsxs("p", { className: "text-xs text-muted-foreground", children: [sender ? _jsxs(_Fragment, { children: ["Verzonden vanaf ", _jsx("span", { className: "font-medium text-foreground", children: sender.account_email }), ". "] }) : _jsx("span", { className: "text-destructive", children: "Geen afzender ingesteld (Instellingen \u2192 Factuur e-mail). " }), "De factuur wordt als PDF-bijlage aangeboden aan de e-mailmodule."] }), _jsxs(Button, { className: "w-full", onClick: send, disabled: saving || preparingPdf || !attachPdf || !preparedPdf || !isValidEmail(mail.to), children: [_jsx(Mail, { className: "mr-2 h-4 w-4" }), saving ? "Bezig…" : preparingPdf ? "PDF voorbereiden…" : "Verzenden met PDF"] })] })] }) }), _jsx(Dialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Ander e-mailadres dan bekend" }) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [knownEmail ? (_jsxs(_Fragment, { children: ["Dit adres wijkt af van het bekende adres van de klant (", _jsx("span", { className: "font-medium text-foreground", children: knownEmail }), ")."] })) : (_jsx(_Fragment, { children: "Er is geen e-mailadres van deze klant bekend." })), " ", "Weet je zeker dat je naar ", _jsx("span", { className: "font-medium text-foreground", children: mail.to.trim() }), " wilt verzenden?"] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setConfirmOpen(false), children: "Annuleren" }), _jsx(Button, { onClick: () => void doSend(), disabled: saving, children: "Toch verzenden" })] })] }) })] }));
 }