@flowselections/floriday-klanten-module 1.0.13 → 1.0.15

package/dist-lib/components/CustomerAvatar.js

@@ -12,7 +12,7 @@ function initials(name) {
 }
 export function CustomerAvatar({ logoUrl, name, size = "md", className, }) {
     const sizeClass = size === "sm" ? "h-8 w-8 text-xs" : size === "lg" ? "h-16 w-16 text-lg" : "h-10 w-10 text-sm";
-    return (_jsx("div", { className: cn("relative shrink-0 overflow-hidden rounded-full bg-muted flex items-center justify-center font-medium text-muted-foreground border border-border", sizeClass, className), children: logoUrl ? (_jsx("img", { src: logoUrl, alt: name ?? "", className: "h-full w-full object-cover", onError: (e) => {
+    return (_jsx("div", { className: cn("relative shrink-0 overflow-hidden rounded-md bg-white flex items-center justify-center font-medium text-muted-foreground border border-border", sizeClass, className), children: logoUrl ? (_jsx("img", { src: logoUrl, alt: name ?? "", className: "h-full w-full object-contain p-1", onError: (e) => {
                 e.currentTarget.style.display = "none";
             } })) : (_jsx("span", { children: initials(name) })) }));
 }

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":"AA4MA,wBAAgB,aAAa,gCAmc5B"}

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

@@ -0,0 +1,438 @@
+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";
+// Alleen `company_name` is écht verplicht om te kunnen importeren. Overige
+// velden mogen leeg zijn — ontbrekende gegevens worden na de import getoond
+// als waarschuwing zodat je ze later kunt aanvullen.
+const REQUIRED = ["company_name"];
+const RECOMMENDED_FIELDS = [
+    { key: "email", label: "E-mailadres" },
+    { key: "street", label: "Straat" },
+    { key: "house_number", label: "Huisnummer" },
+    { key: "country", label: "Land" },
+];
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+// 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" },
+    { key: "street", label: "Straat" },
+    { key: "house_number", label: "Huisnummer" },
+    { key: "country", label: "Land" },
+    { 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 straat ontbreekt maar adresregel 1 is gevuld, gebruik die.
+            const street = r.street || r.address_line1 || "";
+            const houseNumber = r.house_number || "";
+            // E-mail sanitair: alleen doorlaten als het qua vorm lijkt op een
+            // e-mailadres. Ongeldige waarden worden weggelaten en als
+            // waarschuwing gerapporteerd.
+            const rawEmail = (r.email || "").trim();
+            const emailValid = rawEmail !== "" && EMAIL_RE.test(rawEmail);
+            const email = emailValid ? rawEmail : "";
+            const candidate = {
+                company_name: r.company_name ?? "",
+                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 warnings = [];
+            for (const f of RECOMMENDED_FIELDS) {
+                const v = candidate[f.key];
+                if (v === undefined || v === null || v === "") {
+                    warnings.push(`${f.label} ontbreekt`);
+                }
+            }
+            if (rawEmail !== "" && !emailValid) {
+                warnings.push("E-mailadres ongeldig — leeg gelaten");
+            }
+            const res = customerImportRowSchema.safeParse(candidate);
+            if (res.success)
+                return { raw: r, data: res.data, errors: [], warnings };
+            return {
+                raw: r,
+                data: null,
+                errors: res.error.issues.map((i) => `${i.path.join(".")}: ${i.message}`),
+                warnings,
+            };
+        });
+    };
+    // 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 of Excel om meerdere klanten tegelijk toe te voegen. Alleen ", _jsx("strong", { children: "bedrijfsnaam" }), " is verplicht \u2014 ontbrekende gegevens zoals e-mail, adres of land worden na de import als waarschuwing getoond zodat je ze later kunt aanvullen."] })] }), _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"] }), rows.filter((r) => r.errors.length === 0 && r.warnings.length > 0).length > 0 && (_jsxs(Badge, { variant: "secondary", className: "bg-warning/10 text-warning", children: [_jsx(AlertTriangle, { className: "h-3 w-3 mr-1" }), rows.filter((r) => r.errors.length === 0 && r.warnings.length > 0).length, " met waarschuwingen"] })), 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"
+                                                : r.warnings.length > 0
+                                                    ? "bg-warning/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-destructive", title: r.errors.join("\n"), children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5" }), " ", r.errors[0]] })) : r.warnings.length > 0 ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-warning", title: r.warnings.join("\n"), children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5" }), r.warnings.length === 1
+                                                                ? r.warnings[0]
+                                                                : `${r.warnings.length} waarschuwingen`] })) : (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-success", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), " OK"] })) })] }, 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/NetwerkPagina.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetwerkPagina.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/NetwerkPagina.tsx"],"names":[],"mappings":"AAqBA,wBAAgB,aAAa,gCAyH5B"}
+{"version":3,"file":"NetwerkPagina.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/NetwerkPagina.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,aAAa,gCAwO5B"}

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

@@ -1,23 +1,52 @@
-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 { Link } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 import { useState } from "react";
 import { Input, Card, CardContent, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Switch, Label, } from "@flowselections/core";
-import { ArrowLeft, Search } from "lucide-react";
+import { ArrowLeft, Search, MapPin, Globe } from "lucide-react";
 import { listFloridayNetwork } from "../../lib/customers.functions";
+import { CustomerAvatar } from "../CustomerAvatar";
+const TYPE_OPTIONS = [
+    { value: "CUSTOMER", label: "Klant" },
+    { value: "AGENT", label: "Agent" },
+    { value: "SUPPLIER", label: "Leverancier" },
+    { value: "CARRIER", label: "Vervoerder" },
+    { value: "OTHER", label: "Overig" },
+];
 export function NetwerkPagina() {
     const [search, setSearch] = useState("");
-    const [hideUnknown, setHideUnknown] = useState(true);
+    const [hideUnknown, setHideUnknown] = useState(false);
+    const [types, setTypes] = useState(["CUSTOMER", "AGENT"]);
+    const [includeExpired, setIncludeExpired] = useState(false);
     const list = useServerFn(listFloridayNetwork);
     const { data, isLoading } = useQuery({
-        queryKey: ["floriday-network", search],
-        queryFn: () => list({ data: { search } }),
+        queryKey: ["floriday-network", search, types, includeExpired],
+        queryFn: () => list({ data: { search, types, includeExpired, limit: 1000 } }),
     });
     const all = data?.organizations ?? [];
-    const orgs = hideUnknown
-        ? all.filter((o) => o.organization_name && o.organization_name.trim() !== "")
-        : all;
+    const named = all.filter((o) => o.organization_name && o.organization_name.trim() !== "");
+    const orgs = hideUnknown ? named : all;
     const hiddenCount = all.length - orgs.length;
-    return (_jsxs("main", { className: "p-6 space-y-4", children: [_jsx("div", { className: "flex items-center justify-between gap-4", children: _jsxs("div", { children: [_jsxs(Link, { to: "/klanten", className: "text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1", children: [_jsx(ArrowLeft, { className: "h-3 w-3" }), " Terug naar klanten"] }), _jsx("h1", { className: "text-2xl font-semibold mt-1", children: "Klanten toevoegen uit netwerk" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Doorzoek alle organisaties die via het netwerk beschikbaar zijn." })] }) }), _jsxs("div", { className: "relative 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 organisatienaam of GLN...", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9" })] }), _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Switch, { id: "hide-unknown", checked: hideUnknown, onCheckedChange: setHideUnknown }), _jsx(Label, { htmlFor: "hide-unknown", className: "cursor-pointer", children: "Verberg organisaties zonder naam" }), hideUnknown && hiddenCount > 0 ? (_jsxs("span", { className: "text-muted-foreground", children: ["(", hiddenCount, " verborgen)"] })) : null] }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Organisatie" }), _jsx(TableHead, { children: "GLN" }), _jsx(TableHead, { children: "Plaats" }), _jsx(TableHead, { children: "Land" }), _jsx(TableHead, { children: "Bijgewerkt" })] }) }), _jsx(TableBody, { children: isLoading ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "text-center py-8 text-muted-foreground", children: "Laden..." }) })) : orgs.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "text-center py-8 text-muted-foreground", children: "Geen organisaties gevonden." }) })) : (orgs.map((o) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: o.organization_name && o.organization_name.trim() !== "" ? (o.organization_name) : (_jsx("span", { className: "italic text-muted-foreground", children: "Onbekende organisatie" })) }), _jsx(TableCell, { children: o.gln ? (_jsx(Badge, { variant: "outline", children: o.gln })) : ("—") }), _jsx(TableCell, { children: o.city ?? "—" }), _jsx(TableCell, { children: o.country ?? "—" }), _jsx(TableCell, { className: "text-muted-foreground text-sm", children: new Date(o.fetched_at).toLocaleDateString("nl-NL") })] }, `${o.connection_id}-${o.organization_id}`)))) })] }) }) })] }));
+    const totalMatching = data?.total ?? all.length;
+    const truncated = !!data?.truncated;
+    const toggleType = (value) => {
+        setTypes((prev) => prev.includes(value) ? prev.filter((t) => t !== value) : [...prev, value]);
+    };
+    return (_jsxs("main", { className: "p-6 space-y-4", children: [_jsx("div", { className: "flex items-center justify-between gap-4", children: _jsxs("div", { children: [_jsxs(Link, { to: "/klanten", className: "text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1", children: [_jsx(ArrowLeft, { className: "h-3 w-3" }), " Terug naar klanten"] }), _jsx("h1", { className: "text-2xl font-semibold mt-1", children: "Klanten toevoegen uit netwerk" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Doorzoek alle organisaties die via het netwerk beschikbaar zijn." })] }) }), _jsxs("div", { className: "relative 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 organisatienaam of GLN...", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9" })] }), _jsx("div", { className: "flex items-center gap-2 flex-wrap", children: TYPE_OPTIONS.map((opt) => {
+                    const active = types.includes(opt.value);
+                    return (_jsx("button", { type: "button", onClick: () => toggleType(opt.value), className: "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors " +
+                            (active
+                                ? "bg-primary text-primary-foreground border-primary"
+                                : "bg-card text-muted-foreground border-border hover:bg-muted"), children: opt.label }, opt.value));
+                }) }), _jsxs("div", { className: "flex items-center gap-6 flex-wrap text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "include-expired", checked: includeExpired, onCheckedChange: setIncludeExpired }), _jsx(Label, { htmlFor: "include-expired", className: "cursor-pointer", children: "Toon be\u00EBindigde relaties" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "hide-unknown", checked: hideUnknown, onCheckedChange: setHideUnknown }), _jsx(Label, { htmlFor: "hide-unknown", className: "cursor-pointer", children: "Verberg organisaties zonder naam" }), hideUnknown && hiddenCount > 0 ? (_jsxs("span", { className: "text-muted-foreground", children: ["(", hiddenCount, " verborgen)"] })) : null] })] }), _jsx("div", { className: "text-xs text-muted-foreground", children: isLoading ? ("Laden…") : (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium text-foreground", children: orgs.length.toLocaleString("nl-NL") }), " ", "weergegeven van", " ", _jsx("span", { className: "font-medium text-foreground", children: totalMatching.toLocaleString("nl-NL") }), " ", "organisaties \u00B7 bron: Floriday", truncated && (_jsx("span", { className: "ml-1 text-warning", children: "(verfijn de zoekopdracht om alles te zien)" }))] })) }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Organisatie" }), _jsx(TableHead, { children: "GLN" }), _jsx(TableHead, { children: "Adres" }), _jsx(TableHead, { children: "Land" }), _jsx(TableHead, { children: "Type" }), _jsx(TableHead, { children: "Bijgewerkt" })] }) }), _jsx(TableBody, { children: isLoading ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, className: "text-center py-8 text-muted-foreground", children: "Laden..." }) })) : orgs.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, className: "text-center py-8 text-muted-foreground", children: "Geen organisaties gevonden." }) })) : (orgs.map((o) => {
+                                    const displayName = o.organization_name && o.organization_name.trim() !== ""
+                                        ? o.organization_name
+                                        : null;
+                                    const addressBits = [
+                                        o.address_line,
+                                        [o.postal_code, o.city].filter(Boolean).join(" "),
+                                    ].filter((x) => x && String(x).trim() !== "");
+                                    return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsx(CustomerAvatar, { logoUrl: o.logo_url, name: displayName ?? "?", size: "sm" }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "font-medium truncate flex items-center gap-2", children: [displayName ? (_jsx("span", { className: "truncate", children: displayName })) : (_jsx("span", { className: "italic text-muted-foreground", children: "Onbekende organisatie" })), o.is_expired && (_jsx(Badge, { variant: "outline", className: "text-[10px] uppercase tracking-wide", children: "be\u00EBindigd" }))] }), o.commercial_name && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: o.commercial_name })), o.website && (_jsxs("a", { href: o.website.startsWith("http") ? o.website : `https://${o.website}`, target: "_blank", rel: "noreferrer", className: "text-xs text-muted-foreground inline-flex items-center gap-1 hover:underline", children: [_jsx(Globe, { className: "h-3 w-3" }), " ", o.website] }))] })] }) }), _jsx(TableCell, { children: o.gln ? _jsx(Badge, { variant: "outline", children: o.gln }) : "—" }), _jsx(TableCell, { className: "text-sm", children: addressBits.length ? (_jsx("div", { className: "min-w-0", children: _jsxs("div", { className: "inline-flex items-start gap-1 text-muted-foreground", children: [_jsx(MapPin, { className: "h-3 w-3 mt-0.5 shrink-0" }), _jsx("span", { className: "truncate", children: addressBits.join(", ") })] }) })) : ("—") }), _jsx(TableCell, { children: o.country ?? "—" }), _jsx(TableCell, { className: "text-xs text-muted-foreground uppercase tracking-wide", children: o.organization_type ?? "—" }), _jsx(TableCell, { className: "text-muted-foreground text-sm", children: new Date(o.fetched_at).toLocaleDateString("nl-NL") })] }, `${o.connection_id}-${o.organization_id}`));
+                                })) })] }) }) })] }));
 }

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"}