@flowselections/facturen-installatie-techniek 1.0.3 → 1.4.1

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":"AAiJA,wBAAgB,8BAA8B,gCAge7C"}

package/dist-lib/components/FacturenForInstallatieTechniek.js

@@ -1,10 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Link } from "@tanstack/react-router";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { WerkbonPreviewPanel } from "../components/WerkbonPreviewPanel";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { dependencyMessage } from "../lib/dependencies";
+import { DEFAULT_VAT_RATE } from "../lib/config";
+import { supabase } from "@flowselections/core";
+import { Link, useNavigate } from "@tanstack/react-router";
 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,35 +18,112 @@ 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);
+    const createRef = useRef(false);
     // bron-tab
     const [sourceType, setSourceType] = useState("work_order");
     const [sources, setSources] = useState([]);
     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]);
@@ -57,7 +138,7 @@ export function FacturenForInstallatieTechniek() {
             if (active)
                 setSources(rows);
         })
-            .catch(() => toast.error("Bronnen konden niet worden geladen"))
+            .catch((e) => toast.error(dependencyMessage(e, sourceType === "work_order" ? "werkbonnen" : "offertes", "Bronnen")))
             .finally(() => {
             if (active)
                 setSourcesLoading(false);
@@ -68,26 +149,43 @@ 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) {
             toast.error("Kies eerst een bron");
             return;
         }
+        if (createRef.current)
+            return;
+        createRef.current = true;
         setSaving(true);
         try {
             const sourceLines = await fetchSourceLines(sourceType, source.id);
@@ -111,51 +209,56 @@ export function FacturenForInstallatieTechniek() {
             toast.error("Factuur aanmaken mislukt");
         }
         finally {
+            createRef.current = false;
             setSaving(false);
         }
     };
     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;
         }
+        if (createRef.current)
+            return;
+        createRef.current = true;
         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");
         }
         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-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,gCA6bhC"}