@flowselections/floriday-klanten-module 1.0.12 → 1.0.14

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

@@ -0,0 +1,4 @@
+export declare function DiscountsTab({ buyerOrganizationId }: {
+    buyerOrganizationId: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DiscountsTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DiscountsTab.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/DiscountsTab.tsx"],"names":[],"mappings":"AAmDA,wBAAgB,YAAY,CAAC,EAAE,mBAAmB,EAAE,EAAE;IAAE,mBAAmB,EAAE,MAAM,CAAA;CAAE,+BAmJpF"}

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Card, CardContent, Badge, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
+import { Info, Percent, FileText, Users } from "lucide-react";
+import { listCustomerDiscounts, } from "../../lib/floriday-discounts.functions";
+import { EmptyState } from "./KlantDetailLayout";
+const SOURCE_LABEL = {
+    agreement: "Contract",
+    sales_strategy: "Sales Strategy",
+    price_group: "Prijsgroep",
+};
+const SOURCE_ICON = {
+    agreement: _jsx(FileText, { className: "h-3 w-3" }),
+    sales_strategy: _jsx(Percent, { className: "h-3 w-3" }),
+    price_group: _jsx(Users, { className: "h-3 w-3" }),
+};
+function fmtMoney(v, currency = "EUR") {
+    if (v == null)
+        return "—";
+    try {
+        return new Intl.NumberFormat("nl-NL", { style: "currency", currency }).format(v);
+    }
+    catch {
+        return `${v.toFixed(2)} ${currency}`;
+    }
+}
+function fmtDiscount(row) {
+    if (row.discount_type == null || row.discount_value == null)
+        return "—";
+    return row.discount_type === "percentage"
+        ? `${row.discount_value}%`
+        : fmtMoney(row.discount_value, row.currency);
+}
+function fmtDate(v) {
+    if (!v)
+        return "—";
+    try {
+        return new Date(v).toLocaleDateString("nl-NL");
+    }
+    catch {
+        return v;
+    }
+}
+function isActiveOn(row, date) {
+    if (row.valid_from && row.valid_from > date)
+        return false;
+    if (row.valid_until && row.valid_until < date)
+        return false;
+    return true;
+}
+export function DiscountsTab({ buyerOrganizationId }) {
+    const fn = useServerFn(listCustomerDiscounts);
+    const { data, isLoading, error } = useQuery({
+        queryKey: ["floriday-discounts", buyerOrganizationId],
+        queryFn: () => fn({ data: { buyerOrganizationId } }),
+    });
+    const [source, setSource] = useState("all");
+    const [search, setSearch] = useState("");
+    const [onlyActive, setOnlyActive] = useState(true);
+    const today = new Date().toISOString().slice(0, 10);
+    const filtered = useMemo(() => {
+        const rows = data?.rows ?? [];
+        return rows.filter((r) => {
+            if (source !== "all" && r.source !== source)
+                return false;
+            if (onlyActive && !isActiveOn(r, today))
+                return false;
+            if (search) {
+                const q = search.toLowerCase();
+                const hay = [r.trade_item_name, r.trade_item_id, r.product_group_id].filter(Boolean).join(" ").toLowerCase();
+                if (!hay.includes(q))
+                    return false;
+            }
+            return true;
+        });
+    }, [data, source, search, onlyActive, today]);
+    if (isLoading)
+        return _jsx(Card, { children: _jsx(CardContent, { className: "pt-6", children: "Kortingen laden\u2026" }) });
+    if (error) {
+        return (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-6 text-sm text-destructive", children: ["Kortingen konden niet worden geladen: ", error.message] }) }));
+    }
+    const s = data?.summary;
+    const rows = data?.rows ?? [];
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-4", children: [_jsx(SummaryCard, { label: "Contracten", value: s?.agreements ?? 0, icon: _jsx(FileText, { className: "h-4 w-4" }) }), _jsx(SummaryCard, { label: "Prijsregels", value: s?.sales_strategies ?? 0, icon: _jsx(Percent, { className: "h-4 w-4" }) }), _jsx(SummaryCard, { label: "Prijsgroep-regels", value: s?.price_groups ?? 0, icon: _jsx(Users, { className: "h-4 w-4" }) }), _jsx(SummaryCard, { label: "Laatst gesynchroniseerd", value: s?.last_fetched_at ? new Date(s.last_fetched_at).toLocaleString("nl-NL") : "—", icon: _jsx(Info, { className: "h-4 w-4" }), small: true })] }), rows.length === 0 ? (_jsx(EmptyState, { message: "Nog geen kortingsdata beschikbaar. Floriday moet de scopes " +
+                    "'sales-strategy:read' en 'agreement:read' voor onze Client ID activeren; " +
+                    "daarna vult de authenticatiemodule deze cache automatisch." })) : (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-6 space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Input, { placeholder: "Zoek op artikel of ID\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "max-w-xs" }), _jsxs(Select, { value: source, onValueChange: (v) => setSource(v), children: [_jsx(SelectTrigger, { className: "w-44", children: _jsx(SelectValue, { placeholder: "Bron" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle bronnen" }), _jsx(SelectItem, { value: "agreement", children: "Contract" }), _jsx(SelectItem, { value: "sales_strategy", children: "Sales Strategy" }), _jsx(SelectItem, { value: "price_group", children: "Prijsgroep" })] })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-muted-foreground ml-auto", children: [_jsx("input", { type: "checkbox", checked: onlyActive, onChange: (e) => setOnlyActive(e.target.checked) }), "Alleen actief vandaag"] })] }), _jsx("div", { className: "rounded-md border overflow-x-auto", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Artikel / Groep" }), _jsx(TableHead, { children: "Bron" }), _jsx(TableHead, { className: "text-right", children: "Basisprijs" }), _jsx(TableHead, { className: "text-right", children: "Korting" }), _jsx(TableHead, { className: "text-right", children: "Netto" }), _jsx(TableHead, { children: "Geldig" }), _jsx(TableHead, { className: "text-right", children: "Min. hvh" })] }) }), _jsx(TableBody, { children: filtered.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "text-center text-muted-foreground py-6", children: "Geen kortingen die aan de filters voldoen." }) })) : filtered.map((r, i) => (_jsxs(TableRow, { children: [_jsxs(TableCell, { children: [_jsx("div", { className: "font-medium", children: r.trade_item_name ?? r.trade_item_id ?? r.product_group_id ?? "—" }), r.trade_item_name && (_jsx("div", { className: "text-xs text-muted-foreground font-mono truncate max-w-[280px]", children: r.trade_item_id }))] }), _jsx(TableCell, { children: _jsxs(Badge, { variant: "secondary", className: "gap-1", children: [SOURCE_ICON[r.source], SOURCE_LABEL[r.source]] }) }), _jsx(TableCell, { className: "text-right tabular-nums", children: fmtMoney(r.base_price, r.currency) }), _jsx(TableCell, { className: "text-right tabular-nums", children: fmtDiscount(r) }), _jsx(TableCell, { className: "text-right tabular-nums font-medium", children: fmtMoney(r.net_price, r.currency) }), _jsxs(TableCell, { className: "text-sm text-muted-foreground", children: [fmtDate(r.valid_from), " \u2013 ", fmtDate(r.valid_until)] }), _jsx(TableCell, { className: "text-right tabular-nums", children: r.min_quantity || "—" })] }, `${r.source_id}-${r.trade_item_id}-${i}`))) })] }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Wijzigingen doe je in Floriday. Deze module leest de gesynchroniseerde kortingscache alleen." })] }) }))] }));
+}
+function SummaryCard({ label, value, icon, small, }) {
+    return (_jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs uppercase text-muted-foreground", children: [icon, label] }), _jsx("div", { className: small ? "text-sm mt-1" : "text-2xl font-semibold mt-1", children: value })] }) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"GroupedKlantDetail.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/GroupedKlantDetail.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,+BA4MpE"}
+{"version":3,"file":"GroupedKlantDetail.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/GroupedKlantDetail.tsx"],"names":[],"mappings":"AAqBA,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,+BAwNpE"}

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

@@ -7,6 +7,7 @@ import { Card, CardContent, Badge, Button, Tabs, TabsList, TabsTrigger, TabsCont
 import { ArrowLeft, Mail, Phone } from "lucide-react";
 import { getGroupedCustomerDetail, } from "../../lib/external-customers.functions";
 import { ProfileCard, KpiStrip, BadgeList, EmptyState, adaptGroupedToProfile, } from "../../components/klanten/KlantDetailLayout";
+import { DiscountsTab } from "../../components/klanten/DiscountsTab";
 export function GroupedKlantDetail({ groupKey }) {
     const navigate = useNavigate();
     const get = useServerFn(getGroupedCustomerDetail);
@@ -24,6 +25,8 @@ export function GroupedKlantDetail({ groupKey }) {
     const providerMap = new Map(data.providers.map((p) => [p.provider, p]));
     const sources = g.sources ?? [];
     const profile = adaptGroupedToProfile(g);
+    const floridaySource = sources.find((s) => s.provider === "floriday");
+    const floridayBuyerId = floridaySource?.external_id ?? null;
     const contacts = collectContacts(sources, providerMap);
     const locations = collectLocations(sources, providerMap);
     const segments = collectArray(sources, ["segments"]);
@@ -46,7 +49,7 @@ export function GroupedKlantDetail({ groupKey }) {
                                     assortment: 0,
                                     orders: 0,
                                     lastSync: g.fetched_at,
-                                }, onSelect: setTab }), _jsxs(Tabs, { value: tab, onValueChange: setTab, children: [_jsxs(TabsList, { className: "flex-wrap", children: [_jsx(TabsTrigger, { value: "overview", children: "Overzicht" }), _jsxs(TabsTrigger, { value: "contacts", children: ["Contacten (", contacts.length, ")"] }), _jsxs(TabsTrigger, { value: "locations", children: ["Locaties (", locations.length, ")"] }), _jsx(TabsTrigger, { value: "assortment", children: "Assortiment (0)" }), _jsx(TabsTrigger, { value: "orders", children: "Bestellingen (0)" }), _jsx(TabsTrigger, { value: "trade", children: "Handel" }), _jsx(TabsTrigger, { value: "activity", children: "Activiteit" }), g.is_merged && sources.length > 1 && (_jsxs(TabsTrigger, { value: "sources", children: ["Bronnen (", sources.length, ")"] }))] }), _jsxs(TabsContent, { value: "overview", className: "space-y-4", children: [(segments.length || tradeForms.length || markets.length || productGroups.length) ? (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-6 grid gap-4 md:grid-cols-2", children: [_jsx(BadgeList, { label: "Segmenten", items: segments }), _jsx(BadgeList, { label: "Handelsvorm", items: tradeForms }), _jsx(BadgeList, { label: "Afzetmarkten", items: markets }), _jsx(BadgeList, { label: "Productgroepen", items: productGroups })] }) })) : null, paymentMethods.length > 0 && (_jsx(Card, { children: _jsx(CardContent, { className: "pt-6", children: _jsx(BadgeList, { label: "Betaalmethoden", items: paymentMethods }) }) })), !segments.length && !tradeForms.length && !markets.length && !productGroups.length && !paymentMethods.length && (_jsx(EmptyState, { message: "Geen extra profielinformatie beschikbaar voor deze klant." }))] }), _jsx(TabsContent, { value: "contacts", children: contacts.length === 0 ? (_jsx(EmptyState, { message: "Geen contactpersonen beschikbaar via de koppeling." })) : (_jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: contacts.map((p, i) => (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-6 space-y-2", children: [_jsx("div", { className: "font-semibold", children: p.full_name }), p.job_title && _jsx("div", { className: "text-sm text-muted-foreground", children: p.job_title }), p.phone && (_jsxs("a", { href: `tel:${p.phone}`, className: "text-sm flex items-center gap-2 hover:underline", children: [_jsx(Phone, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", p.phone] })), p.email && (_jsxs("a", { href: `mailto:${p.email}`, className: "text-sm flex items-center gap-2 hover:underline", children: [_jsx(Mail, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", p.email] })), _jsx(Badge, { variant: "secondary", children: p.source_label })] }) }, i))) })) }), _jsx(TabsContent, { value: "locations", children: locations.length === 0 ? (_jsx(EmptyState, { message: "Geen afleverlocaties beschikbaar via de koppeling." })) : (_jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Adres" }), _jsx(TableHead, { children: "GLN" }), _jsx(TableHead, { children: "Postcode" }), _jsx(TableHead, { children: "Bron" })] }) }), _jsx(TableBody, { children: locations.map((l, i) => (_jsxs(TableRow, { children: [_jsxs(TableCell, { children: [_jsx("div", { className: "font-medium", children: l.name || l.address_line || "—" }), l.name && l.address_line && (_jsxs("div", { className: "text-xs text-muted-foreground", children: [l.address_line, ", ", l.city ?? ""] }))] }), _jsx(TableCell, { className: "font-mono text-sm", children: l.gln || "—" }), _jsx(TableCell, { className: "text-sm", children: [l.postal_code, l.country].filter(Boolean).join(" · ") }), _jsx(TableCell, { children: _jsx(Badge, { variant: "secondary", children: l.source_label }) })] }, i))) })] }) }) })) }), _jsx(TabsContent, { value: "assortment", children: _jsx(EmptyState, { message: "Assortiment is beschikbaar zodra de koppeling dit levert." }) }), _jsx(TabsContent, { value: "orders", children: _jsx(EmptyState, { message: "Bestellingen zijn beschikbaar zodra de koppeling dit levert." }) }), _jsx(TabsContent, { value: "trade", children: _jsx(EmptyState, { message: "Handelsinstellingen zijn niet beschikbaar via deze koppeling." }) }), _jsx(TabsContent, { value: "activity", children: _jsx(Card, { children: _jsx(CardContent, { className: "pt-6 space-y-2", children: activity.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen activiteit voor deze klant." })) : (activity.map((a) => (_jsxs("div", { className: "flex items-center justify-between text-sm border-l-2 border-primary pl-3 py-1", children: [_jsxs("span", { children: ["Bijgewerkt via ", _jsx("strong", { children: a.provider })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: new Date(a.created_at).toLocaleString("nl-NL") })] }, a.id)))) }) }) }), g.is_merged && sources.length > 1 && (_jsx(TabsContent, { value: "sources", children: _jsx(CompareCard, { sources: sources, providerMap: providerMap }) }))] })] })] })] }));
+                                }, onSelect: setTab }), _jsxs(Tabs, { value: tab, onValueChange: setTab, children: [_jsxs(TabsList, { className: "flex-wrap", children: [_jsx(TabsTrigger, { value: "overview", children: "Overzicht" }), _jsxs(TabsTrigger, { value: "contacts", children: ["Contacten (", contacts.length, ")"] }), _jsxs(TabsTrigger, { value: "locations", children: ["Locaties (", locations.length, ")"] }), _jsx(TabsTrigger, { value: "assortment", children: "Assortiment (0)" }), _jsx(TabsTrigger, { value: "orders", children: "Bestellingen (0)" }), _jsx(TabsTrigger, { value: "trade", children: "Handel" }), floridayBuyerId && (_jsx(TabsTrigger, { value: "discounts", children: "Kortingen & prijzen" })), _jsx(TabsTrigger, { value: "activity", children: "Activiteit" }), g.is_merged && sources.length > 1 && (_jsxs(TabsTrigger, { value: "sources", children: ["Bronnen (", sources.length, ")"] }))] }), _jsxs(TabsContent, { value: "overview", className: "space-y-4", children: [(segments.length || tradeForms.length || markets.length || productGroups.length) ? (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-6 grid gap-4 md:grid-cols-2", children: [_jsx(BadgeList, { label: "Segmenten", items: segments }), _jsx(BadgeList, { label: "Handelsvorm", items: tradeForms }), _jsx(BadgeList, { label: "Afzetmarkten", items: markets }), _jsx(BadgeList, { label: "Productgroepen", items: productGroups })] }) })) : null, paymentMethods.length > 0 && (_jsx(Card, { children: _jsx(CardContent, { className: "pt-6", children: _jsx(BadgeList, { label: "Betaalmethoden", items: paymentMethods }) }) })), !segments.length && !tradeForms.length && !markets.length && !productGroups.length && !paymentMethods.length && (_jsx(EmptyState, { message: "Geen extra profielinformatie beschikbaar voor deze klant." }))] }), _jsx(TabsContent, { value: "contacts", children: contacts.length === 0 ? (_jsx(EmptyState, { message: "Geen contactpersonen beschikbaar via de koppeling." })) : (_jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: contacts.map((p, i) => (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-6 space-y-2", children: [_jsx("div", { className: "font-semibold", children: p.full_name }), p.job_title && _jsx("div", { className: "text-sm text-muted-foreground", children: p.job_title }), p.phone && (_jsxs("a", { href: `tel:${p.phone}`, className: "text-sm flex items-center gap-2 hover:underline", children: [_jsx(Phone, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", p.phone] })), p.email && (_jsxs("a", { href: `mailto:${p.email}`, className: "text-sm flex items-center gap-2 hover:underline", children: [_jsx(Mail, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", p.email] })), _jsx(Badge, { variant: "secondary", children: p.source_label })] }) }, i))) })) }), _jsx(TabsContent, { value: "locations", children: locations.length === 0 ? (_jsx(EmptyState, { message: "Geen afleverlocaties beschikbaar via de koppeling." })) : (_jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Adres" }), _jsx(TableHead, { children: "GLN" }), _jsx(TableHead, { children: "Postcode" }), _jsx(TableHead, { children: "Bron" })] }) }), _jsx(TableBody, { children: locations.map((l, i) => (_jsxs(TableRow, { children: [_jsxs(TableCell, { children: [_jsx("div", { className: "font-medium", children: l.name || l.address_line || "—" }), l.name && l.address_line && (_jsxs("div", { className: "text-xs text-muted-foreground", children: [l.address_line, ", ", l.city ?? ""] }))] }), _jsx(TableCell, { className: "font-mono text-sm", children: l.gln || "—" }), _jsx(TableCell, { className: "text-sm", children: [l.postal_code, l.country].filter(Boolean).join(" · ") }), _jsx(TableCell, { children: _jsx(Badge, { variant: "secondary", children: l.source_label }) })] }, i))) })] }) }) })) }), _jsx(TabsContent, { value: "assortment", children: _jsx(EmptyState, { message: "Assortiment is beschikbaar zodra de koppeling dit levert." }) }), _jsx(TabsContent, { value: "orders", children: _jsx(EmptyState, { message: "Bestellingen zijn beschikbaar zodra de koppeling dit levert." }) }), _jsx(TabsContent, { value: "trade", children: _jsx(EmptyState, { message: "Handelsinstellingen zijn niet beschikbaar via deze koppeling." }) }), floridayBuyerId && (_jsx(TabsContent, { value: "discounts", children: _jsx(DiscountsTab, { buyerOrganizationId: floridayBuyerId }) })), _jsx(TabsContent, { value: "activity", children: _jsx(Card, { children: _jsx(CardContent, { className: "pt-6 space-y-2", children: activity.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen activiteit voor deze klant." })) : (activity.map((a) => (_jsxs("div", { className: "flex items-center justify-between text-sm border-l-2 border-primary pl-3 py-1", children: [_jsxs("span", { children: ["Bijgewerkt via ", _jsx("strong", { children: a.provider })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: new Date(a.created_at).toLocaleString("nl-NL") })] }, a.id)))) }) }) }), g.is_merged && sources.length > 1 && (_jsx(TabsContent, { value: "sources", children: _jsx(CompareCard, { sources: sources, providerMap: providerMap }) }))] })] })] })] }));
 }
 function collectContacts(sources, providerMap) {
     const out = [];

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/KlantDetail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KlantDetail.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/KlantDetail.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,+BAkPjD"}
+{"version":3,"file":"KlantDetail.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/KlantDetail.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,+BAuPjD"}