@flowselections/floriday-klanten-module 1.0.13 → 1.0.14

package/dist-lib/components/klanten/ImportKlanten.d.ts

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

package/dist-lib/components/klanten/ImportKlanten.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImportKlanten.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/ImportKlanten.tsx"],"names":[],"mappings":"AAgMA,wBAAgB,aAAa,gCAuZ5B"}

package/dist-lib/components/klanten/ImportKlanten.js

@@ -0,0 +1,406 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNavigate } from "@tanstack/react-router";
+import { useEffect, useMemo, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, toast, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Badge, Checkbox, } from "@flowselections/core";
+import { ArrowLeft, Upload, Download, FileText, CheckCircle2, AlertTriangle, XCircle } from "lucide-react";
+import * as XLSX from "xlsx";
+import { bulkImportCustomers } from "../../lib/customers.functions";
+import { customerImportRowSchema } from "../../lib/customer-schemas";
+const REQUIRED = ["company_name", "email", "street", "house_number", "country"];
+// Alle interne doelvelden die de importer ondersteunt (voor handmatige mapping)
+const TARGET_FIELDS = [
+    { key: "company_name", label: "Bedrijfsnaam", required: true },
+    { key: "email", label: "E-mailadres", required: true },
+    { key: "street", label: "Straat", required: true },
+    { key: "house_number", label: "Huisnummer", required: true },
+    { key: "country", label: "Land", required: true },
+    { key: "customer_number", label: "Klantnummer" },
+    { key: "language", label: "Taal" },
+    { key: "website", label: "Website" },
+    { key: "billing_email", label: "E-mailadres voor facturering" },
+    { key: "address_type", label: "Adrestype" },
+    { key: "address_line1", label: "Adresregel 1" },
+    { key: "address_line2", label: "Adresregel 2" },
+    { key: "postal_code", label: "Postcode" },
+    { key: "city", label: "Plaats" },
+    { key: "icp_country_code", label: "ICP landcode" },
+    { key: "attention_to", label: "T.a.v." },
+    { key: "phone", label: "Telefoonnummer" },
+    { key: "fax", label: "Faxnummer" },
+    { key: "vat_number", label: "Btw-nummer" },
+    { key: "coc_number", label: "KvK-nummer" },
+    { key: "contact_person", label: "Contactpersoon" },
+    { key: "customer_class", label: "Klantklasse" },
+    { key: "notes", label: "Notities" },
+    { key: "is_active", label: "Actief" },
+    { key: "bank_name", label: "Bank - Naam" },
+    { key: "bank_account_holder", label: "Bank - Rekeninghouder" },
+    { key: "bank_account_number", label: "Bank - Rekeningnummer" },
+    { key: "bank_iban", label: "Bank - IBAN" },
+    { key: "bank_bic", label: "Bank - BIC" },
+    { key: "bank_national_code", label: "Bank - Nationale bankcode" },
+    { key: "bank_address_line1", label: "Bank - Adresregel 1" },
+    { key: "bank_address_line2", label: "Bank - Adresregel 2" },
+    { key: "bank_house_number", label: "Bank - Huisnummer" },
+    { key: "bank_postal_code", label: "Bank - Postcode" },
+    { key: "bank_city", label: "Bank - Plaats" },
+    { key: "bank_state", label: "Bank - Staat" },
+    { key: "bank_country", label: "Bank - Land" },
+    { key: "discount_percentage", label: "Kortingspercentage" },
+    { key: "discount_days", label: "Aantal kortingsdagen" },
+    { key: "payment_term_days", label: "Aantal vervaldagen" },
+    { key: "vat_display", label: "Btw-weergave op factuur" },
+];
+// Mapping van herkende (Nederlandse of Engelse) CSV-kolomnamen -> intern veld.
+// Alles wordt case-insensitive vergeleken.
+const HEADER_ALIASES = {
+    // basis
+    "nummer": "customer_number", "customer_number": "customer_number",
+    "naam": "company_name", "bedrijfsnaam": "company_name", "company_name": "company_name",
+    "taal": "language", "language": "language",
+    "website": "website",
+    "e-mailadres voor facturering": "billing_email", "billing_email": "billing_email",
+    "e-mailadres": "email", "email": "email", "e-mail": "email",
+    "adrestype": "address_type", "address_type": "address_type",
+    "adresregel 1": "address_line1", "adresregel1": "address_line1", "address_line1": "address_line1",
+    "adresregel 2": "address_line2", "adresregel2": "address_line2", "address_line2": "address_line2",
+    "straat": "street", "street": "street",
+    "huisnummer": "house_number", "house_number": "house_number",
+    "postcode": "postal_code", "postal_code": "postal_code",
+    "plaats": "city", "stad": "city", "city": "city",
+    "land": "country", "country": "country",
+    "icp land code": "icp_country_code", "icp landcode": "icp_country_code", "icp_country_code": "icp_country_code",
+    "t.a.v.": "attention_to", "tav": "attention_to", "attention_to": "attention_to",
+    "telefoonnummer": "phone", "telefoon": "phone", "phone": "phone",
+    "faxnummer": "fax", "fax": "fax",
+    "btw-nummer": "vat_number", "btw nummer": "vat_number", "vat_number": "vat_number",
+    "kvk-nummer": "coc_number", "kvk nummer": "coc_number", "coc_number": "coc_number",
+    "contactpersoon": "contact_person", "contact_person": "contact_person",
+    "klantklasse": "customer_class", "customer_class": "customer_class",
+    "notities": "notes", "notes": "notes",
+    // bank
+    "bank - naam": "bank_name", "bank naam": "bank_name", "bank_name": "bank_name",
+    "bank - rekeninghouder": "bank_account_holder", "bank_account_holder": "bank_account_holder",
+    "bank - rekeningnummer": "bank_account_number", "bank_account_number": "bank_account_number",
+    "bank - iban": "bank_iban", "bank iban": "bank_iban", "bank_iban": "bank_iban", "iban": "bank_iban",
+    "bank - bic": "bank_bic", "bic": "bank_bic", "bank_bic": "bank_bic",
+    "bank - nationale bankcode": "bank_national_code", "bank_national_code": "bank_national_code",
+    "bank - adresregel 1": "bank_address_line1", "bank_address_line1": "bank_address_line1",
+    "bank - adresregel 2": "bank_address_line2", "bank_address_line2": "bank_address_line2",
+    "bank - huisnummer": "bank_house_number", "bank_house_number": "bank_house_number",
+    "bank - postcode": "bank_postal_code", "bank_postal_code": "bank_postal_code",
+    "bank - plaats": "bank_city", "bank_city": "bank_city",
+    "bank - staat": "bank_state", "bank_state": "bank_state",
+    "bank - land": "bank_country", "bank_country": "bank_country",
+    // facturering
+    "kortingspercentage": "discount_percentage", "discount_percentage": "discount_percentage",
+    "aantal kortingsdagen": "discount_days", "discount_days": "discount_days",
+    "aantal vervaldagen": "payment_term_days", "payment_term_days": "payment_term_days",
+    "btw-weergave op factuur": "vat_display", "btw weergave op factuur": "vat_display", "vat_display": "vat_display",
+    // status
+    "actief": "is_active", "is_active": "is_active",
+};
+const TEMPLATE_HEADERS = [
+    "Nummer", "Naam", "Taal", "Website", "E-mailadres voor facturering",
+    "Adrestype", "Adresregel 1", "Adresregel 2", "Postcode", "Plaats", "Land",
+    "ICP land code", "T.a.v.", "Telefoonnummer", "Faxnummer",
+    "Btw-nummer", "KvK-nummer", "E-mailadres",
+    "Bank - Naam", "Bank - Rekeninghouder", "Bank - Rekeningnummer",
+    "Bank - IBAN", "Bank - BIC", "Bank - Nationale bankcode",
+    "Bank - Adresregel 1", "Bank - Adresregel 2", "Bank - Huisnummer",
+    "Bank - Postcode", "Bank - Plaats", "Bank - Staat", "Bank - Land",
+    "Kortingspercentage", "Aantal kortingsdagen", "Aantal vervaldagen",
+    "Btw-weergave op factuur",
+    "Straat", "Huisnummer", "Contactpersoon", "Klantklasse", "Notities", "Actief",
+];
+const TEMPLATE_CSV = TEMPLATE_HEADERS.map((h) => `"${h}"`).join(",") + "\n" +
+    `"K-001","Voorbeeld B.V.","nl","https://voorbeeld.nl","facturen@voorbeeld.nl","Bezoek","Hoofdstraat 12","","1234AB","Amsterdam","Nederland","NL","Jan Jansen","+31612345678","","NL123456789B01","12345678","info@voorbeeld.nl","ING","Voorbeeld B.V.","","NL91INGB0002445588","INGBNL2A","","Adres 1","","1","1000AA","Amsterdam","","Nederland","2","14","30","Exclusief","Hoofdstraat","12","Jan Jansen","Groothandel","","true"\n`;
+function parseCSV(text) {
+    const rows = [];
+    let cur = [];
+    let field = "";
+    let inQuotes = false;
+    for (let i = 0; i < text.length; i++) {
+        const ch = text[i];
+        if (inQuotes) {
+            if (ch === '"') {
+                if (text[i + 1] === '"') {
+                    field += '"';
+                    i++;
+                }
+                else {
+                    inQuotes = false;
+                }
+            }
+            else
+                field += ch;
+        }
+        else {
+            if (ch === '"')
+                inQuotes = true;
+            else if (ch === "," || ch === ";" || ch === "\t") {
+                cur.push(field);
+                field = "";
+            }
+            else if (ch === "\n" || ch === "\r") {
+                if (field !== "" || cur.length > 0) {
+                    cur.push(field);
+                    rows.push(cur);
+                    cur = [];
+                    field = "";
+                }
+                if (ch === "\r" && text[i + 1] === "\n")
+                    i++;
+            }
+            else
+                field += ch;
+        }
+    }
+    if (field !== "" || cur.length > 0) {
+        cur.push(field);
+        rows.push(cur);
+    }
+    if (rows.length === 0)
+        return { headers: [], rows: [] };
+    const headers = rows[0].map((h) => h.trim());
+    const dataRows = rows.slice(1)
+        .filter((r) => r.some((c) => c.trim() !== ""))
+        .map((r) => {
+        const obj = {};
+        headers.forEach((h, idx) => { obj[h] = (r[idx] ?? "").trim(); });
+        return obj;
+    });
+    return { headers, rows: dataRows };
+}
+function toBool(v) {
+    if (v === undefined || v === "")
+        return true;
+    return !["false", "0", "nee", "no"].includes(v.toLowerCase());
+}
+function rowsFromXlsx(buf) {
+    const wb = XLSX.read(buf, { type: "array" });
+    const sheet = wb.Sheets[wb.SheetNames[0]];
+    if (!sheet)
+        return { headers: [], rows: [] };
+    const matrix = XLSX.utils.sheet_to_json(sheet, {
+        header: 1, raw: false, defval: "",
+    });
+    if (matrix.length === 0)
+        return { headers: [], rows: [] };
+    const headers = matrix[0].map((h) => String(h ?? "").trim());
+    const dataRows = matrix.slice(1)
+        .filter((r) => r.some((c) => String(c ?? "").trim() !== ""))
+        .map((r) => {
+        const obj = {};
+        headers.forEach((h, idx) => { obj[h] = String(r[idx] ?? "").trim(); });
+        return obj;
+    });
+    return { headers, rows: dataRows };
+}
+export function ImportKlanten() {
+    const navigate = useNavigate();
+    const importFn = useServerFn(bulkImportCustomers);
+    const queryClient = useQueryClient();
+    const [sourceHeaders, setSourceHeaders] = useState([]);
+    const [sourceRows, setSourceRows] = useState([]);
+    const [mapping, setMapping] = useState({});
+    const [rows, setRows] = useState([]);
+    const [fileName, setFileName] = useState("");
+    const [skipDuplicates, setSkipDuplicates] = useState(true);
+    const [result, setResult] = useState(null);
+    const mut = useMutation({
+        mutationFn: (validRows) => importFn({ data: { rows: validRows, skipDuplicates } }),
+        onSuccess: (r) => {
+            setResult(r);
+            if (r.created > 0)
+                toast.success(`${r.created} klant${r.created === 1 ? "" : "en"} geïmporteerd`);
+            if (r.failed > 0)
+                toast.error(`${r.failed} rij${r.failed === 1 ? "" : "en"} mislukt`);
+            if (r.created > 0) {
+                queryClient.invalidateQueries({ queryKey: ["customers-local"] });
+                queryClient.invalidateQueries({ queryKey: ["customers-external"] });
+            }
+        },
+        onError: (e) => toast.error(e instanceof Error ? e.message : "Import mislukt"),
+    });
+    const validCount = useMemo(() => rows.filter((r) => r.data && r.errors.length === 0).length, [rows]);
+    const invalidCount = rows.length - validCount;
+    const handleFile = async (file) => {
+        setResult(null);
+        setRows([]);
+        setFileName(file.name);
+        const isXlsx = /\.xlsx?$/i.test(file.name)
+            || file.type.includes("spreadsheetml")
+            || file.type.includes("ms-excel");
+        const { headers, rows: raw } = isXlsx
+            ? rowsFromXlsx(await file.arrayBuffer())
+            : parseCSV(await file.text());
+        if (raw.length === 0) {
+            toast.error("Geen rijen gevonden in bestand");
+            setSourceHeaders([]);
+            setSourceRows([]);
+            setMapping({});
+            return;
+        }
+        // Auto-map: probeer elke bronkolom via HEADER_ALIASES te matchen aan een intern veld.
+        const auto = {};
+        const used = new Set();
+        for (const h of headers) {
+            const key = h.trim().toLowerCase();
+            const target = HEADER_ALIASES[key];
+            if (target && !used.has(target)) {
+                auto[h] = target;
+                used.add(target);
+            }
+            else {
+                auto[h] = "";
+            }
+        }
+        setSourceHeaders(headers);
+        setSourceRows(raw);
+        setMapping(auto);
+    };
+    const buildParsed = (srcRows, map) => {
+        return srcRows.map((sr) => {
+            // Herbouw rij op basis van huidige mapping
+            const r = {};
+            for (const [srcHeader, target] of Object.entries(map)) {
+                if (!target)
+                    continue;
+                const val = sr[srcHeader];
+                if (val !== undefined && val !== "")
+                    r[target] = val;
+            }
+            // Fallback: als street/house_number ontbreken maar adresregel 1 is
+            // gevuld, gebruik dan die als straat (verplicht veld).
+            const street = r.street || r.address_line1 || "";
+            const houseNumber = r.house_number || "-";
+            const candidate = {
+                company_name: r.company_name ?? "",
+                email: r.email ?? "",
+                street,
+                house_number: houseNumber,
+                country: r.country ?? "",
+                vat_number: r.vat_number ?? "",
+                contact_person: r.contact_person ?? "",
+                phone: r.phone ?? "",
+                postal_code: r.postal_code ?? "",
+                city: r.city ?? "",
+                customer_class: r.customer_class ?? "",
+                notes: r.notes ?? "",
+                is_active: toBool(r.is_active),
+                customer_number: r.customer_number ?? "",
+                language: r.language ?? "",
+                website: r.website ?? "",
+                billing_email: r.billing_email ?? "",
+                address_type: r.address_type ?? "",
+                address_line1: r.address_line1 ?? "",
+                address_line2: r.address_line2 ?? "",
+                icp_country_code: r.icp_country_code ?? "",
+                attention_to: r.attention_to ?? "",
+                fax: r.fax ?? "",
+                coc_number: r.coc_number ?? "",
+                bank_name: r.bank_name ?? "",
+                bank_account_holder: r.bank_account_holder ?? "",
+                bank_account_number: r.bank_account_number ?? "",
+                bank_iban: r.bank_iban ?? "",
+                bank_bic: r.bank_bic ?? "",
+                bank_national_code: r.bank_national_code ?? "",
+                bank_address_line1: r.bank_address_line1 ?? "",
+                bank_address_line2: r.bank_address_line2 ?? "",
+                bank_house_number: r.bank_house_number ?? "",
+                bank_postal_code: r.bank_postal_code ?? "",
+                bank_city: r.bank_city ?? "",
+                bank_state: r.bank_state ?? "",
+                bank_country: r.bank_country ?? "",
+                discount_percentage: r.discount_percentage ?? "",
+                discount_days: r.discount_days ?? "",
+                payment_term_days: r.payment_term_days ?? "",
+                vat_display: r.vat_display ?? "",
+            };
+            const res = customerImportRowSchema.safeParse(candidate);
+            if (res.success)
+                return { raw: r, data: res.data, errors: [] };
+            return {
+                raw: r,
+                data: null,
+                errors: res.error.issues.map((i) => `${i.path.join(".")}: ${i.message}`),
+            };
+        });
+    };
+    // Preview automatisch bijwerken wanneer bron of mapping verandert.
+    useEffect(() => {
+        if (sourceRows.length === 0) {
+            setRows([]);
+            return;
+        }
+        setRows(buildParsed(sourceRows, mapping));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sourceRows, mapping]);
+    const downloadTemplateCsv = () => {
+        const blob = new Blob([TEMPLATE_CSV], { type: "text/csv;charset=utf-8" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "klanten-import-template.csv";
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    const downloadTemplateXlsx = () => {
+        const sampleRow = {
+            "Nummer": "K-001", "Naam": "Voorbeeld B.V.", "Taal": "nl",
+            "Website": "https://voorbeeld.nl",
+            "E-mailadres voor facturering": "facturen@voorbeeld.nl",
+            "Adrestype": "Bezoek", "Adresregel 1": "Hoofdstraat 12", "Adresregel 2": "",
+            "Postcode": "1234AB", "Plaats": "Amsterdam", "Land": "Nederland",
+            "ICP land code": "NL", "T.a.v.": "Jan Jansen",
+            "Telefoonnummer": "+31612345678", "Faxnummer": "",
+            "Btw-nummer": "NL123456789B01", "KvK-nummer": "12345678",
+            "E-mailadres": "info@voorbeeld.nl",
+            "Bank - Naam": "ING", "Bank - Rekeninghouder": "Voorbeeld B.V.",
+            "Bank - Rekeningnummer": "", "Bank - IBAN": "NL91INGB0002445588",
+            "Bank - BIC": "INGBNL2A", "Bank - Nationale bankcode": "",
+            "Bank - Adresregel 1": "Adres 1", "Bank - Adresregel 2": "",
+            "Bank - Huisnummer": "1", "Bank - Postcode": "1000AA",
+            "Bank - Plaats": "Amsterdam", "Bank - Staat": "", "Bank - Land": "Nederland",
+            "Kortingspercentage": "2", "Aantal kortingsdagen": "14",
+            "Aantal vervaldagen": "30", "Btw-weergave op factuur": "Exclusief",
+            "Straat": "Hoofdstraat", "Huisnummer": "12",
+            "Contactpersoon": "Jan Jansen", "Klantklasse": "Groothandel",
+            "Notities": "", "Actief": "true",
+        };
+        const ws = XLSX.utils.json_to_sheet([sampleRow], { header: TEMPLATE_HEADERS });
+        const wb = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(wb, ws, "Klanten");
+        XLSX.writeFile(wb, "klanten-import-template.xlsx");
+    };
+    const runImport = () => {
+        const valid = rows.filter((r) => r.data && r.errors.length === 0).map((r) => r.data);
+        if (valid.length === 0) {
+            toast.error("Geen geldige rijen om te importeren");
+            return;
+        }
+        mut.mutate(valid);
+    };
+    return (_jsxs("main", { className: "p-6 max-w-5xl mx-auto space-y-4", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate({ to: "/klanten" }), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), " Terug"] }), _jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Klanten importeren" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: ["Upload een CSV om meerdere klanten tegelijk toe te voegen. Verplichte kolommen: ", REQUIRED.join(", "), "."] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", onClick: downloadTemplateXlsx, children: [_jsx(Download, { className: "h-4 w-4 mr-2" }), " Template (.xlsx)"] }), _jsxs(Button, { variant: "outline", onClick: downloadTemplateCsv, children: [_jsx(Download, { className: "h-4 w-4 mr-2" }), " Template (.csv)"] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "1. Bestand kiezen" }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsx(Label, { htmlFor: "csvfile", className: "sr-only", children: "Excel- of CSV-bestand" }), _jsx(Input, { id: "csvfile", type: "file", accept: ".csv,.xlsx,.xls,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel", onChange: (e) => { const f = e.target.files?.[0]; if (f)
+                                            handleFile(f); }, className: "max-w-sm" }), fileName && (_jsxs("span", { className: "inline-flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(FileText, { className: "h-4 w-4" }), " ", fileName] }))] }), _jsxs("label", { className: "inline-flex items-center gap-2 text-sm", children: [_jsx(Checkbox, { checked: skipDuplicates, onCheckedChange: (v) => setSkipDuplicates(v === true) }), "Duplicaten overslaan (op e-mail, BTW of vergelijkbare bedrijfsnaam)"] })] })] }), sourceHeaders.length > 0 && (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base", children: ["2. Velden koppelen (", sourceHeaders.length, " kolommen)"] }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Kies per bronkolom naar welk klantveld deze moet worden ge\u00EFmporteerd." })] }), _jsx(CardContent, { className: "p-0", children: _jsx("div", { className: "max-h-[420px] overflow-auto", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Bronkolom (uit bestand)" }), _jsx(TableHead, { children: "Voorbeeldwaarde" }), _jsx(TableHead, { className: "w-[280px]", children: "Koppelen aan klantveld" })] }) }), _jsx(TableBody, { children: sourceHeaders.map((h) => {
+                                            const sample = sourceRows.find((r) => r[h])?.[h] ?? "";
+                                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "text-sm font-medium", children: h || _jsx("span", { className: "text-muted-foreground italic", children: "(zonder naam)" }) }), _jsx(TableCell, { className: "text-xs text-muted-foreground truncate max-w-[280px]", children: sample }), _jsx(TableCell, { children: _jsxs("select", { className: "w-full h-9 rounded-md border border-input bg-background px-2 text-sm", value: mapping[h] ?? "", onChange: (e) => setMapping((m) => ({ ...m, [h]: e.target.value })), children: [_jsx("option", { value: "", children: "\u2014 Negeren \u2014" }), TARGET_FIELDS.map((f) => (_jsxs("option", { value: f.key, children: [f.label, f.required ? " *" : ""] }, f.key)))] }) })] }, h));
+                                        }) })] }) }) }), _jsxs("div", { className: "flex items-center justify-between gap-2 p-4 border-t", children: [_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Verplicht: ", TARGET_FIELDS.filter((f) => f.required).map((f) => f.label).join(", ")] }), _jsx(Button, { variant: "outline", onClick: () => {
+                                    setSourceHeaders([]);
+                                    setSourceRows([]);
+                                    setMapping({});
+                                    setRows([]);
+                                    setFileName("");
+                                    setResult(null);
+                                }, children: "Wissen" })] })] })), rows.length > 0 && (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base", children: ["3. Voorbeeld (", rows.length, " rijen)"] }), _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsxs(Badge, { variant: "secondary", className: "bg-success/10 text-success", children: [_jsx(CheckCircle2, { className: "h-3 w-3 mr-1" }), " ", validCount, " geldig"] }), invalidCount > 0 && (_jsxs(Badge, { variant: "secondary", className: "bg-destructive/10 text-destructive", children: [_jsx(XCircle, { className: "h-3 w-3 mr-1" }), " ", invalidCount, " ongeldig"] }))] })] }), _jsx(CardContent, { className: "p-0", children: _jsx("div", { className: "max-h-[420px] overflow-auto", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-10", children: "#" }), _jsx(TableHead, { children: "Bedrijf" }), _jsx(TableHead, { children: "E-mail" }), _jsx(TableHead, { children: "Plaats" }), _jsx(TableHead, { children: "Land" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: rows.map((r, i) => (_jsxs(TableRow, { className: r.errors.length > 0 ? "bg-destructive/5" : "", children: [_jsx(TableCell, { className: "text-xs text-muted-foreground", children: i + 1 }), _jsx(TableCell, { className: "text-sm", children: r.raw.company_name || _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "text-sm", children: r.raw.email || _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "text-sm", children: r.raw.city || _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "text-sm", children: r.raw.country || _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { children: r.errors.length === 0 ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-success", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), " OK"] })) : (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-destructive", title: r.errors.join("\n"), children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5" }), " ", r.errors[0]] })) })] }, i))) })] }) }) }), _jsxs("div", { className: "flex justify-end gap-2 p-4 border-t", children: [_jsx(Button, { variant: "outline", onClick: () => {
+                                    setRows([]);
+                                    setFileName("");
+                                    setResult(null);
+                                    setSourceHeaders([]);
+                                    setSourceRows([]);
+                                    setMapping({});
+                                }, children: "Wissen" }), _jsxs(Button, { onClick: runImport, disabled: mut.isPending || validCount === 0, children: [_jsx(Upload, { className: "h-4 w-4 mr-2" }), mut.isPending ? "Importeren..." : `Importeer ${validCount} klant${validCount === 1 ? "" : "en"}`] })] })] })), result && (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Resultaat" }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex gap-2 flex-wrap", children: [_jsxs(Badge, { className: "bg-success/10 text-success", children: [result.created, " aangemaakt"] }), _jsxs(Badge, { className: "bg-warning/10 text-warning", children: [result.skipped, " overgeslagen"] }), _jsxs(Badge, { className: "bg-destructive/10 text-destructive", children: [result.failed, " mislukt"] })] }), result.errors.length > 0 && (_jsx("div", { className: "max-h-64 overflow-auto border rounded-md", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-10", children: "#" }), _jsx(TableHead, { children: "Bedrijf" }), _jsx(TableHead, { children: "Reden" })] }) }), _jsx(TableBody, { children: result.errors.map((e, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "text-xs", children: e.row }), _jsx(TableCell, { className: "text-sm", children: e.company_name }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: e.reason })] }, i))) })] }) })), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { onClick: () => navigate({ to: "/klanten" }), children: "Naar klantenlijst" }) })] })] }))] }));
+}

package/dist-lib/components/klanten/KlantenOverzicht.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KlantenOverzicht.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/KlantenOverzicht.tsx"],"names":[],"mappings":"AAwCA,wBAAgB,gBAAgB,gCAwZ/B"}
+{"version":3,"file":"KlantenOverzicht.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/KlantenOverzicht.tsx"],"names":[],"mappings":"AAwCA,wBAAgB,gBAAgB,gCA2Z/B"}

package/dist-lib/components/klanten/KlantenOverzicht.js

@@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 import { useMemo, useState } from "react";
 import { Button, Input, Card, CardContent, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsList, TabsTrigger, Skeleton, } from "@flowselections/core";
-import { Plus, Search, Network, Users, UserCheck, UserX, AlertCircle, X, ArrowUpDown, Mail, MapPin, ChevronLeft, ChevronRight, } from "lucide-react";
+import { Plus, Search, Network, Users, UserCheck, UserX, AlertCircle, X, ArrowUpDown, Mail, MapPin, Upload, ChevronLeft, ChevronRight, } from "lucide-react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { listCustomers, listCustomerClasses } from "../../lib/customers.functions";
 import { listExternalCustomers } from "../../lib/external-customers.functions";
@@ -157,7 +157,7 @@ export function KlantenOverzicht() {
         activeFilterChips.push({ key: "co", label: `Land: ${country}`, clear: () => { setCountry("__all__"); resetPage(); } });
     const toggleSort = (col) => setSort((s) => (s.col === col ? { col, dir: s.dir === "asc" ? "desc" : "asc" } : { col, dir: "asc" }));
     const lastUpdated = externalData?.last_fetched_at ?? null;
-    return (_jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: _jsxs("main", { className: "p-6 space-y-5", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Klanten" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Beheer en doorzoek al je klanten." })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => navigate({ to: "/klanten/netwerk" }), children: [_jsx(Network, { className: "h-4 w-4 mr-2" }), " Klanten toevoegen uit netwerk"] }), _jsxs(Button, { onClick: () => navigate({ to: "/klanten/nieuw" }), children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), " Nieuwe klant"] })] })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3", children: [_jsx(StatCard, { icon: _jsx(Users, { className: "h-5 w-5" }), tint: "muted", label: "Alle klanten", value: totals.all, tooltip: "Totaal aantal klanten (lokaal + gekoppelde bronnen).", active: view === "all", onClick: () => { setView("all"); resetPage(); } }), _jsx(StatCard, { icon: _jsx(UserCheck, { className: "h-5 w-5" }), tint: "success", label: "Actieve klanten", value: totals.active, tooltip: "Klanten met minimaal \u00E9\u00E9n bestelling in de afgelopen 12 maanden.", active: view === "active", onClick: () => { setView("active"); resetPage(); } }), _jsx(StatCard, { icon: _jsx(UserX, { className: "h-5 w-5" }), tint: "warning", label: "Inactieve klanten", value: totals.inactive, tooltip: "Klanten zonder omzet in de afgelopen 12 maanden.", active: view === "inactive", onClick: () => { setView("inactive"); resetPage(); } }), _jsx(StatCard, { icon: _jsx(AlertCircle, { className: "h-5 w-5" }), tint: "destructive", label: "Achterstallige betalingen", value: totals.overdue, tooltip: (overdueData
+    return (_jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: _jsxs("main", { className: "p-6 space-y-5", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Klanten" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Beheer en doorzoek al je klanten." })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => navigate({ to: "/klanten/netwerk" }), children: [_jsx(Network, { className: "h-4 w-4 mr-2" }), " Klanten toevoegen uit netwerk"] }), _jsxs(Button, { variant: "outline", onClick: () => navigate({ to: "/klanten/import" }), children: [_jsx(Upload, { className: "h-4 w-4 mr-2" }), " Importeren"] }), _jsxs(Button, { onClick: () => navigate({ to: "/klanten/nieuw" }), children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), " Nieuwe klant"] })] })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3", children: [_jsx(StatCard, { icon: _jsx(Users, { className: "h-5 w-5" }), tint: "muted", label: "Alle klanten", value: totals.all, tooltip: "Totaal aantal klanten (lokaal + gekoppelde bronnen).", active: view === "all", onClick: () => { setView("all"); resetPage(); } }), _jsx(StatCard, { icon: _jsx(UserCheck, { className: "h-5 w-5" }), tint: "success", label: "Actieve klanten", value: totals.active, tooltip: "Klanten met minimaal \u00E9\u00E9n bestelling in de afgelopen 12 maanden.", active: view === "active", onClick: () => { setView("active"); resetPage(); } }), _jsx(StatCard, { icon: _jsx(UserX, { className: "h-5 w-5" }), tint: "warning", label: "Inactieve klanten", value: totals.inactive, tooltip: "Klanten zonder omzet in de afgelopen 12 maanden.", active: view === "inactive", onClick: () => { setView("inactive"); resetPage(); } }), _jsx(StatCard, { icon: _jsx(AlertCircle, { className: "h-5 w-5" }), tint: "destructive", label: "Achterstallige betalingen", value: totals.overdue, tooltip: (overdueData
                                 ? `Klanten met openstaande facturen waarvan de vervaldatum is verstreken.\nTotaal openstaand: ${formatEuro(overdueData.totals.amount)} · ${overdueData.totals.invoices} facturen\nBron: Twinfield & Exact · bijgewerkt ${relativeTime(overdueData.as_of)}`
                                 : "Klanten met openstaande facturen waarvan de vervaldatum is verstreken."), active: view === "overdue", onClick: () => { setView("overdue"); resetPage(); } })] }), _jsxs(Card, { children: [_jsx("div", { className: "border-b px-4 pt-3", children: _jsx(Tabs, { value: view, onValueChange: (v) => { setView(v); resetPage(); }, children: _jsxs(TabsList, { className: "flex-wrap", children: [_jsxs(TabsTrigger, { value: "all", children: ["Alle ", _jsx("span", { className: "ml-1.5 text-xs text-muted-foreground", children: totals.all ?? 0 })] }), _jsxs(TabsTrigger, { value: "active", children: ["Actief ", _jsx("span", { className: "ml-1.5 text-xs text-muted-foreground", children: totals.active ?? 0 })] }), _jsxs(TabsTrigger, { value: "inactive", children: ["Inactief ", _jsx("span", { className: "ml-1.5 text-xs text-muted-foreground", children: totals.inactive ?? 0 })] }), _jsxs(TabsTrigger, { value: "overdue", children: ["Achterstallig ", _jsx("span", { className: "ml-1.5 text-xs text-muted-foreground", children: totals.overdue ?? 0 })] })] }) }) }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap p-4 border-b", children: [_jsxs("div", { className: "relative flex-1 min-w-[240px] max-w-md", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoek op bedrijf, contactpersoon of e-mail...", value: search, onChange: (e) => { setSearch(e.target.value); resetPage(); }, className: "pl-9" })] }), _jsxs(Select, { value: customerClass, onValueChange: (v) => { setCustomerClass(v); resetPage(); }, children: [_jsx(SelectTrigger, { className: "w-40", children: _jsx(SelectValue, { placeholder: "Klasse" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "Alle klassen" }), (classData?.classes ?? []).map((c) => (_jsx(SelectItem, { value: c, children: c }, c)))] })] }), _jsxs(Select, { value: country, onValueChange: (v) => { setCountry(v); resetPage(); }, children: [_jsx(SelectTrigger, { className: "w-36", children: _jsx(SelectValue, { placeholder: "Land" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "Alle landen" }), countries.map((c) => (_jsx(SelectItem, { value: c, children: c }, c)))] })] })] }), activeFilterChips.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap px-4 py-2 border-b bg-muted/30", children: [activeFilterChips.map((chip) => (_jsxs("button", { type: "button", onClick: chip.clear, className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-xs hover:bg-muted", children: [chip.label, " ", _jsx(X, { className: "h-3 w-3" })] }, chip.key))), _jsx("button", { type: "button", onClick: () => { setSearch(""); setCustomerClass("__all__"); setCountry("__all__"); resetPage(); }, className: "text-xs text-muted-foreground hover:text-foreground underline", children: "Alles wissen" })] })), _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(SortHeader, { label: "Bedrijf", col: "company_name", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: "Contact" }), _jsx(TableHead, { children: _jsx(SortHeader, { label: "Klasse", col: "customer_class", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: "Land", col: "country", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: isLoading ? (Array.from({ length: 6 }).map((_, i) => (_jsx(TableRow, { children: Array.from({ length: 5 }).map((__, j) => (_jsx(TableCell, { className: "py-4", children: _jsx(Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, j))) }, i)))) : pageRows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, children: _jsx(EmptyState, { onAdd: () => navigate({ to: "/klanten/nieuw" }) }) }) })) : pageRows.map((c) => {
                                             const secondary = c.commercial_name && c.commercial_name !== c.company_name

package/dist-lib/components/klanten/NieuweKlant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NieuweKlant.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/NieuweKlant.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,WAAW,gCA4H1B"}
+{"version":3,"file":"NieuweKlant.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/NieuweKlant.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,WAAW,gCAiN1B"}

package/dist-lib/components/klanten/NieuweKlant.js

@@ -25,6 +25,15 @@ export function NieuweKlant() {
             company_name: "", vat_number: "", contact_person: "", email: "", phone: "",
             street: "", house_number: "", postal_code: "", city: "", country: "Nederland",
             customer_class: "", notes: "", is_active: true, force: false,
+            customer_number: "", language: "nl", website: "", billing_email: "",
+            address_type: "", address_line1: "", address_line2: "", icp_country_code: "",
+            attention_to: "", fax: "", coc_number: "",
+            bank_name: "", bank_account_holder: "", bank_account_number: "",
+            bank_iban: "", bank_bic: "", bank_national_code: "",
+            bank_address_line1: "", bank_address_line2: "", bank_house_number: "",
+            bank_postal_code: "", bank_city: "", bank_state: "", bank_country: "",
+            discount_percentage: undefined, discount_days: undefined,
+            payment_term_days: undefined, vat_display: "",
         },
     });
     const mut = useMutation({
@@ -50,7 +59,7 @@ export function NieuweKlant() {
         mut.mutate({ ...pendingData, force: true });
     };
     const fieldErr = (k) => form.formState.errors[k]?.message;
-    return (_jsxs("main", { className: "p-6 max-w-3xl mx-auto space-y-4", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate({ to: "/klanten" }), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), " Terug"] }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Nieuwe klant" }) }), _jsxs(CardContent, { className: "grid grid-cols-2 gap-4", children: [_jsx(Field, { label: "Bedrijfsnaam *", error: fieldErr("company_name"), children: _jsx(Input, { ...form.register("company_name") }) }), _jsx(Field, { label: "BTW-nummer", error: fieldErr("vat_number"), children: _jsx(Input, { ...form.register("vat_number") }) }), _jsx(Field, { label: "Contactpersoon", error: fieldErr("contact_person"), children: _jsx(Input, { ...form.register("contact_person") }) }), _jsx(Field, { label: "E-mail *", error: fieldErr("email"), children: _jsx(Input, { type: "email", ...form.register("email") }) }), _jsx(Field, { label: "Telefoon", error: fieldErr("phone"), children: _jsx(Input, { ...form.register("phone") }) }), _jsx(Field, { label: "Klantklasse", children: _jsxs(Select, { onValueChange: (v) => form.setValue("customer_class", v), defaultValue: "", children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies klasse..." }) }), _jsx(SelectContent, { children: (classData?.classes ?? []).map((c) => _jsx(SelectItem, { value: c, children: c }, c)) })] }) }), _jsx(Field, { label: "Straat *", error: fieldErr("street"), children: _jsx(Input, { ...form.register("street") }) }), _jsx(Field, { label: "Huisnummer *", error: fieldErr("house_number"), children: _jsx(Input, { ...form.register("house_number") }) }), _jsx(Field, { label: "Postcode", error: fieldErr("postal_code"), children: _jsx(Input, { ...form.register("postal_code") }) }), _jsx(Field, { label: "Stad", error: fieldErr("city"), children: _jsx(Input, { ...form.register("city") }) }), _jsx(Field, { label: "Land *", error: fieldErr("country"), children: _jsx(Input, { ...form.register("country") }) }), _jsxs("div", { className: "col-span-2", children: [_jsx(Label, { children: "Notities" }), _jsx(Textarea, { ...form.register("notes") })] })] })] }), _jsxs("div", { className: "flex justify-end gap-2 mt-4", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => navigate({ to: "/klanten" }), children: "Annuleren" }), _jsx(Button, { type: "submit", disabled: mut.isPending, children: mut.isPending ? "Opslaan..." : "Klant aanmaken" })] })] }), _jsx(AlertDialog, { open: dupes.length > 0, onOpenChange: (o) => !o && setDupes([]), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Mogelijke duplicaten gevonden" }), _jsx(AlertDialogDescription, { children: _jsx("ul", { className: "list-disc pl-5 space-y-1 mt-2", children: dupes.map((d) => _jsxs("li", { children: [_jsx("strong", { children: d.company_name }), " \u2014 ", d.reason] }, d.id + d.reason)) }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: forceCreate, children: "Toch aanmaken" })] })] }) })] }));
+    return (_jsxs("main", { className: "p-6 max-w-5xl mx-auto space-y-4", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate({ to: "/klanten" }), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), " Terug"] }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Algemeen" }) }), _jsxs(CardContent, { className: "grid grid-cols-2 gap-4", children: [_jsx(Field, { label: "Nummer", error: fieldErr("customer_number"), children: _jsx(Input, { ...form.register("customer_number") }) }), _jsx(Field, { label: "Bedrijfsnaam *", error: fieldErr("company_name"), children: _jsx(Input, { ...form.register("company_name") }) }), _jsx(Field, { label: "Taal", error: fieldErr("language"), children: _jsx(Input, { placeholder: "bv. nl, en", ...form.register("language") }) }), _jsx(Field, { label: "Website", error: fieldErr("website"), children: _jsx(Input, { ...form.register("website") }) }), _jsx(Field, { label: "BTW-nummer", error: fieldErr("vat_number"), children: _jsx(Input, { ...form.register("vat_number") }) }), _jsx(Field, { label: "KvK-nummer", error: fieldErr("coc_number"), children: _jsx(Input, { ...form.register("coc_number") }) }), _jsx(Field, { label: "Contactpersoon", error: fieldErr("contact_person"), children: _jsx(Input, { ...form.register("contact_person") }) }), _jsx(Field, { label: "T.a.v.", error: fieldErr("attention_to"), children: _jsx(Input, { ...form.register("attention_to") }) }), _jsx(Field, { label: "E-mail *", error: fieldErr("email"), children: _jsx(Input, { type: "email", ...form.register("email") }) }), _jsx(Field, { label: "E-mail voor facturering", error: fieldErr("billing_email"), children: _jsx(Input, { type: "email", ...form.register("billing_email") }) }), _jsx(Field, { label: "Telefoon", error: fieldErr("phone"), children: _jsx(Input, { ...form.register("phone") }) }), _jsx(Field, { label: "Faxnummer", error: fieldErr("fax"), children: _jsx(Input, { ...form.register("fax") }) }), _jsx(Field, { label: "Klantklasse", children: _jsxs(Select, { onValueChange: (v) => form.setValue("customer_class", v), defaultValue: "", children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies klasse..." }) }), _jsx(SelectContent, { children: (classData?.classes ?? []).map((c) => _jsx(SelectItem, { value: c, children: c }, c)) })] }) })] })] }), _jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Adres" }) }), _jsxs(CardContent, { className: "grid grid-cols-2 gap-4", children: [_jsx(Field, { label: "Adrestype", error: fieldErr("address_type"), children: _jsx(Input, { placeholder: "bv. Bezoek, Post", ...form.register("address_type") }) }), _jsx(Field, { label: "ICP landcode", error: fieldErr("icp_country_code"), children: _jsx(Input, { placeholder: "bv. NL", ...form.register("icp_country_code") }) }), _jsx(Field, { label: "Adresregel 1", error: fieldErr("address_line1"), children: _jsx(Input, { ...form.register("address_line1") }) }), _jsx(Field, { label: "Adresregel 2", error: fieldErr("address_line2"), children: _jsx(Input, { ...form.register("address_line2") }) }), _jsx(Field, { label: "Straat *", error: fieldErr("street"), children: _jsx(Input, { ...form.register("street") }) }), _jsx(Field, { label: "Huisnummer *", error: fieldErr("house_number"), children: _jsx(Input, { ...form.register("house_number") }) }), _jsx(Field, { label: "Postcode", error: fieldErr("postal_code"), children: _jsx(Input, { ...form.register("postal_code") }) }), _jsx(Field, { label: "Plaats", error: fieldErr("city"), children: _jsx(Input, { ...form.register("city") }) }), _jsx(Field, { label: "Land *", error: fieldErr("country"), children: _jsx(Input, { ...form.register("country") }) })] })] }), _jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Bankgegevens" }) }), _jsxs(CardContent, { className: "grid grid-cols-2 gap-4", children: [_jsx(Field, { label: "Bank - Naam", children: _jsx(Input, { ...form.register("bank_name") }) }), _jsx(Field, { label: "Bank - Rekeninghouder", children: _jsx(Input, { ...form.register("bank_account_holder") }) }), _jsx(Field, { label: "Bank - Rekeningnummer", children: _jsx(Input, { ...form.register("bank_account_number") }) }), _jsx(Field, { label: "Bank - IBAN", children: _jsx(Input, { ...form.register("bank_iban") }) }), _jsx(Field, { label: "Bank - BIC", children: _jsx(Input, { ...form.register("bank_bic") }) }), _jsx(Field, { label: "Bank - Nationale bankcode", children: _jsx(Input, { ...form.register("bank_national_code") }) }), _jsx(Field, { label: "Bank - Adresregel 1", children: _jsx(Input, { ...form.register("bank_address_line1") }) }), _jsx(Field, { label: "Bank - Adresregel 2", children: _jsx(Input, { ...form.register("bank_address_line2") }) }), _jsx(Field, { label: "Bank - Huisnummer", children: _jsx(Input, { ...form.register("bank_house_number") }) }), _jsx(Field, { label: "Bank - Postcode", children: _jsx(Input, { ...form.register("bank_postal_code") }) }), _jsx(Field, { label: "Bank - Plaats", children: _jsx(Input, { ...form.register("bank_city") }) }), _jsx(Field, { label: "Bank - Staat", children: _jsx(Input, { ...form.register("bank_state") }) }), _jsx(Field, { label: "Bank - Land", children: _jsx(Input, { ...form.register("bank_country") }) })] })] }), _jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Facturering & betaling" }) }), _jsxs(CardContent, { className: "grid grid-cols-2 gap-4", children: [_jsx(Field, { label: "Kortingspercentage (%)", error: fieldErr("discount_percentage"), children: _jsx(Input, { type: "number", step: "0.01", ...form.register("discount_percentage", { valueAsNumber: true }) }) }), _jsx(Field, { label: "Aantal kortingsdagen", error: fieldErr("discount_days"), children: _jsx(Input, { type: "number", ...form.register("discount_days", { valueAsNumber: true }) }) }), _jsx(Field, { label: "Aantal vervaldagen", error: fieldErr("payment_term_days"), children: _jsx(Input, { type: "number", ...form.register("payment_term_days", { valueAsNumber: true }) }) }), _jsx(Field, { label: "Btw-weergave op factuur", error: fieldErr("vat_display"), children: _jsx(Input, { placeholder: "bv. Inclusief, Exclusief", ...form.register("vat_display") }) }), _jsxs("div", { className: "col-span-2", children: [_jsx(Label, { children: "Notities" }), _jsx(Textarea, { ...form.register("notes") })] })] })] }), _jsxs("div", { className: "flex justify-end gap-2 mt-4", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => navigate({ to: "/klanten" }), children: "Annuleren" }), _jsx(Button, { type: "submit", disabled: mut.isPending, children: mut.isPending ? "Opslaan..." : "Klant aanmaken" })] })] }), _jsx(AlertDialog, { open: dupes.length > 0, onOpenChange: (o) => !o && setDupes([]), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Mogelijke duplicaten gevonden" }), _jsx(AlertDialogDescription, { children: _jsx("ul", { className: "list-disc pl-5 space-y-1 mt-2", children: dupes.map((d) => _jsxs("li", { children: [_jsx("strong", { children: d.company_name }), " \u2014 ", d.reason] }, d.id + d.reason)) }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: forceCreate, children: "Toch aanmaken" })] })] }) })] }));
 }
 function Field({ label, error, children }) {
     return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: label }), children, error && _jsx("p", { className: "text-xs text-destructive", children: error })] }));

package/dist-lib/index.d.ts

@@ -5,6 +5,7 @@ export { KlantDetail } from "./components/klanten/KlantDetail";
 export { GroupedKlantDetail } from "./components/klanten/GroupedKlantDetail";
 export { NetwerkPagina } from "./components/klanten/NetwerkPagina";
 export { NieuweKlant } from "./components/klanten/NieuweKlant";
+export { ImportKlanten } from "./components/klanten/ImportKlanten";
 export { KlantDetailRoute } from "./components/klanten/KlantDetailRoute";
 export { GroupedKlantDetailRoute } from "./components/klanten/GroupedKlantDetailRoute";
 export declare const floridayKlantenModule: FlowModule;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAEvF,eAAO,MAAM,qBAAqB,EAAE,UAYnC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAEvF,eAAO,MAAM,qBAAqB,EAAE,UAYnC,CAAC"}

package/dist-lib/index.js

@@ -21,6 +21,7 @@ export { KlantDetail } from "./components/klanten/KlantDetail";
 export { GroupedKlantDetail } from "./components/klanten/GroupedKlantDetail";
 export { NetwerkPagina } from "./components/klanten/NetwerkPagina";
 export { NieuweKlant } from "./components/klanten/NieuweKlant";
+export { ImportKlanten } from "./components/klanten/ImportKlanten";
 export { KlantDetailRoute } from "./components/klanten/KlantDetailRoute";
 export { GroupedKlantDetailRoute } from "./components/klanten/GroupedKlantDetailRoute";
 export const floridayKlantenModule = {