@flowselections/floriday-klanten-module 1.0.6 → 1.0.7

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

@@ -0,0 +1,6 @@
+import type { ExternalProvider } from "../../lib/external-customers.functions";
+export declare function ExternalCacheBanner({ lastFetchedAt, providers, }: {
+    lastFetchedAt: string | null;
+    providers: ExternalProvider[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=ExternalCacheBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalCacheBanner.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/ExternalCacheBanner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAa/E,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,SAAS,GACV,EAAE;IACD,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,EAAE,gBAAgB,EAAE,CAAC;CAC/B,+BAqBA"}

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cloud, Clock } from "lucide-react";
+function relativeTime(iso) {
+    const diff = Date.now() - new Date(iso).getTime();
+    const min = Math.floor(diff / 60000);
+    if (min < 1)
+        return "zojuist";
+    if (min < 60)
+        return `${min} min geleden`;
+    const hr = Math.floor(min / 60);
+    if (hr < 24)
+        return `${hr} uur geleden`;
+    const day = Math.floor(hr / 24);
+    return `${day} dag${day === 1 ? "" : "en"} geleden`;
+}
+export function ExternalCacheBanner({ lastFetchedAt, providers, }) {
+    const labels = providers
+        .filter((p) => p.is_enabled)
+        .map((p) => p.label)
+        .join(", ");
+    return (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-border bg-muted/40 px-4 py-3 text-sm", children: [_jsx(Cloud, { className: "h-4 w-4 mt-0.5 text-muted-foreground shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium", children: "Externe klantgegevens (read-only)" }), _jsxs("div", { className: "text-xs text-muted-foreground mt-0.5", children: ["Data wordt automatisch verfrist door de gekoppelde authenticatiemodules", labels ? `: ${labels}` : "", "."] })] }), _jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground shrink-0", children: [_jsx(Clock, { className: "h-3.5 w-3.5" }), lastFetchedAt ? `Laatste cache: ${relativeTime(lastFetchedAt)}` : "Nog geen cache"] })] }));
+}

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":"AAiBA,wBAAgB,gBAAgB,gCAmT/B"}
+{"version":3,"file":"KlantenOverzicht.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/KlantenOverzicht.tsx"],"names":[],"mappings":"AAuCA,wBAAgB,gBAAgB,gCAuW/B"}

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

@@ -1,109 +1,136 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useNavigate } from "@tanstack/react-router";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Button, Input, Card, CardContent, Badge, toast, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsList, TabsTrigger, Skeleton, } from "@flowselections/core";
-import { Plus, RefreshCw, Search, Network, Users, UserCheck, UserX, Cloud, HardDrive, Clock, X, ArrowUpDown, Mail, MapPin, } from "lucide-react";
-import { listCustomers, syncFloridayCustomers, listCustomerClasses } from "../../lib/customers.functions";
+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, Cloud, HardDrive, X, ArrowUpDown, Mail, MapPin, } from "lucide-react";
+import { listCustomers, listCustomerClasses } from "../../lib/customers.functions";
+import { listExternalCustomers } from "../../lib/external-customers.functions";
 import { CustomerAvatar } from "../CustomerAvatar";
+import { ExternalCacheBanner } from "./ExternalCacheBanner";
 export function KlantenOverzicht() {
     const navigate = useNavigate();
-    const qc = useQueryClient();
     const [search, setSearch] = useState("");
     const [customerClass, setCustomerClass] = useState("__all__");
     const [country, setCountry] = useState("__all__");
     const [view, setView] = useState("all");
     const [sort, setSort] = useState({ col: "company_name", dir: "asc" });
     const list = useServerFn(listCustomers);
-    const sync = useServerFn(syncFloridayCustomers);
+    const listExternal = useServerFn(listExternalCustomers);
     const classesFn = useServerFn(listCustomerClasses);
-    const activeFilter = view === "active" ? "active" : view === "inactive" ? "inactive" : "all";
-    const source = view === "floriday" ? "floriday" : view === "local" ? "local" : "all";
     const { data: classData } = useQuery({
         queryKey: ["customer-classes"],
         queryFn: () => classesFn({ data: undefined }),
     });
-    const { data: totalsData } = useQuery({
-        queryKey: ["customers", "totals"],
+    const { data: localData, isLoading: loadingLocal } = useQuery({
+        queryKey: ["customers-local"],
         queryFn: () => list({
-            data: { search: "", customer_class: "", country: "", is_active: "all", source: "all" },
+            data: { search: "", customer_class: "", country: "", is_active: "all", source: "local" },
         }),
     });
-    const { data, isLoading } = useQuery({
-        queryKey: ["customers", { search, customerClass, activeFilter, source }],
-        queryFn: () => list({
-            data: {
-                search,
-                customer_class: customerClass === "__all__" ? "" : customerClass,
-                country: "",
-                is_active: activeFilter,
-                source,
-            },
-        }),
+    const { data: externalData, isLoading: loadingExternal } = useQuery({
+        queryKey: ["customers-external"],
+        queryFn: () => listExternal({ data: { status: "all" } }),
     });
-    const syncMut = useMutation({
-        mutationFn: (_variables) => sync({ data: undefined }),
-        onSuccess: (r, variables) => {
-            const showToast = variables?.showToast ?? true;
-            if (showToast) {
-                if (r.errors.length) {
-                    const firstError = r.errors[0]?.message ?? "Onbekende Floriday-fout";
-                    toast.error(r.errors.length === 1 ? firstError : `${r.errors.length} fouten bij sync. Eerste fout: ${firstError}`);
-                }
-                else {
-                    toast.success(`Floriday gesynchroniseerd (${r.synced} klanten)`);
-                }
-            }
-            qc.invalidateQueries({ queryKey: ["customers"] });
-        },
-        onError: (e, variables) => {
-            if (variables?.showToast ?? true)
-                toast.error(e instanceof Error ? e.message : "Sync mislukt");
-        },
-    });
-    const autoSyncedRef = useRef(false);
-    useEffect(() => {
-        if (autoSyncedRef.current)
-            return;
-        autoSyncedRef.current = true;
-        syncMut.mutate({ showToast: false });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const all = totalsData?.customers ?? [];
-    const totals = useMemo(() => ({
-        all: all.length,
-        active: all.filter((c) => c.is_active).length,
-        inactive: all.filter((c) => !c.is_active).length,
-        floriday: all.filter((c) => c.source === "floriday").length,
-        local: all.filter((c) => c.source === "local").length,
-        lastSync: all.reduce((acc, c) => {
-            if (!c.last_synced_at)
-                return acc;
-            if (!acc || new Date(c.last_synced_at) > new Date(acc))
-                return c.last_synced_at;
-            return acc;
-        }, null),
-    }), [all]);
+    const isLoading = loadingLocal || loadingExternal;
+    const providers = externalData?.providers ?? [];
+    const providerLabel = useMemo(() => {
+        const m = new Map();
+        for (const p of providers)
+            m.set(p.provider, p.label);
+        return m;
+    }, [providers]);
+    const allRows = useMemo(() => {
+        const local = (localData?.customers ?? []).map((c) => ({
+            key: `local-${c.id}`,
+            id: c.id,
+            group_key: null,
+            source: "local",
+            source_label: "Lokaal",
+            providers: [],
+            provider_labels: [],
+            source_count: 1,
+            company_name: c.company_name,
+            commercial_name: c.commercial_name ?? null,
+            contact_person: c.contact_person ?? null,
+            email: c.email ?? null,
+            city: c.city ?? null,
+            country: c.country ?? null,
+            customer_class: c.customer_class ?? null,
+            logo_url: c.logo_url ?? null,
+            is_active: !!c.is_active,
+        }));
+        const ext = (externalData?.customers ?? []).map((c) => {
+            const provs = c.providers ?? [];
+            const labels = provs.map((p) => providerLabel.get(p) ?? p);
+            return {
+                key: `grp-${c.group_key}`,
+                id: null,
+                group_key: c.group_key,
+                source: provs[0] ?? "external",
+                source_label: labels[0] ?? "Extern",
+                providers: provs,
+                provider_labels: labels,
+                source_count: c.source_count ?? provs.length,
+                company_name: c.display_name,
+                commercial_name: c.commercial_name,
+                contact_person: c.contact_person,
+                email: c.email,
+                city: c.city,
+                country: c.country,
+                customer_class: null,
+                logo_url: c.logo_url,
+                is_active: c.is_active,
+            };
+        });
+        return [...local, ...ext];
+    }, [localData, externalData, providerLabel]);
+    const totals = useMemo(() => {
+        const t = {
+            all: allRows.length,
+            active: allRows.filter((c) => c.is_active).length,
+            inactive: allRows.filter((c) => !c.is_active).length,
+            local: allRows.filter((c) => c.source === "local").length,
+        };
+        for (const p of providers) {
+            t[p.provider] = allRows.filter((c) => c.providers.includes(p.provider)).length;
+        }
+        return t;
+    }, [allRows, providers]);
     const countries = useMemo(() => {
         const set = new Set();
-        all.forEach((c) => { if (c.country)
+        allRows.forEach((c) => { if (c.country)
             set.add(c.country); });
         return Array.from(set).sort();
-    }, [all]);
-    const baseCustomers = data?.customers ?? [];
+    }, [allRows]);
     const customers = useMemo(() => {
-        let rows = baseCustomers;
+        let rows = allRows;
+        if (view === "active")
+            rows = rows.filter((c) => c.is_active);
+        else if (view === "inactive")
+            rows = rows.filter((c) => !c.is_active);
+        else if (view === "local")
+            rows = rows.filter((c) => c.source === "local");
+        else if (view !== "all")
+            rows = rows.filter((c) => c.providers.includes(view));
+        if (customerClass !== "__all__")
+            rows = rows.filter((c) => c.customer_class === customerClass);
         if (country !== "__all__")
             rows = rows.filter((c) => c.country === country);
-        const sorted = [...rows].sort((a, b) => {
-            const av = (a[sort.col] ?? "").toString().toLowerCase();
-            const bv = (b[sort.col] ?? "").toString().toLowerCase();
+        if (search) {
+            const s = search.toLowerCase();
+            rows = rows.filter((c) => [c.company_name, c.commercial_name, c.contact_person, c.email, c.city]
+                .filter(Boolean)
+                .some((v) => String(v).toLowerCase().includes(s)));
+        }
+        return [...rows].sort((a, b) => {
+            const av = String(a[sort.col] ?? "").toLowerCase();
+            const bv = String(b[sort.col] ?? "").toLowerCase();
             const cmp = av.localeCompare(bv);
             return sort.dir === "asc" ? cmp : -cmp;
         });
-        return sorted;
-    }, [baseCustomers, country, sort]);
+    }, [allRows, view, customerClass, country, search, sort]);
     const activeFilterChips = [];
     if (search)
         activeFilterChips.push({ key: "s", label: `Zoek: "${search}"`, clear: () => setSearch("") });
@@ -112,11 +139,16 @@ export function KlantenOverzicht() {
     if (country !== "__all__")
         activeFilterChips.push({ key: "co", label: `Land: ${country}`, clear: () => setCountry("__all__") });
     const toggleSort = (col) => setSort((s) => (s.col === col ? { col, dir: s.dir === "asc" ? "desc" : "asc" } : { col, dir: "asc" }));
-    return (_jsxs("main", { className: "p-6 space-y-5 max-w-[1400px] mx-auto", 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 je relaties en synchroniseer ze met Floriday." })] }), _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" }), " Floriday-netwerk"] }), _jsxs(Button, { variant: "outline", onClick: () => syncMut.mutate({ showToast: true }), disabled: syncMut.isPending, children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${syncMut.isPending ? "animate-spin" : ""}` }), "Synchroniseer"] }), _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-2 md:grid-cols-5 gap-3", children: [_jsx(StatCard, { icon: _jsx(Users, { className: "h-4 w-4" }), label: "Totaal", value: totals.all, active: view === "all", onClick: () => setView("all") }), _jsx(StatCard, { icon: _jsx(UserCheck, { className: "h-4 w-4" }), label: "Actief", value: totals.active, active: view === "active", onClick: () => setView("active") }), _jsx(StatCard, { icon: _jsx(UserX, { className: "h-4 w-4" }), label: "Inactief", value: totals.inactive, active: view === "inactive", onClick: () => setView("inactive") }), _jsx(StatCard, { icon: _jsx(Cloud, { className: "h-4 w-4" }), label: "Floriday", value: totals.floriday, active: view === "floriday", onClick: () => setView("floriday") }), _jsx(StatCard, { icon: _jsx(HardDrive, { className: "h-4 w-4" }), label: "Lokaal", value: totals.local, active: view === "local", onClick: () => setView("local") })] }), _jsx(Tabs, { value: view, onValueChange: (v) => setView(v), children: _jsxs(TabsList, { className: "flex-wrap", children: [_jsxs(TabsTrigger, { value: "all", children: ["Alle (", totals.all, ")"] }), _jsxs(TabsTrigger, { value: "active", children: ["Actief (", totals.active, ")"] }), _jsxs(TabsTrigger, { value: "inactive", children: ["Inactief (", totals.inactive, ")"] }), _jsxs(TabsTrigger, { value: "floriday", children: ["Floriday (", totals.floriday, ")"] }), _jsxs(TabsTrigger, { value: "local", children: ["Lokaal (", totals.local, ")"] })] }) }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", 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), className: "pl-9" })] }), _jsxs(Select, { value: customerClass, onValueChange: setCustomerClass, 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: setCountry, 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)))] })] }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(Clock, { className: "h-3.5 w-3.5" }), "Laatste sync: ", totals.lastSync ? relativeTime(totals.lastSync) : "nog niet"] })] }), activeFilterChips.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap", 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-muted/50 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__"); }, className: "text-xs text-muted-foreground hover:text-foreground underline", children: "Alles wissen" })] })), _jsx("div", { className: "text-sm text-muted-foreground", children: isLoading ? "Laden..." : `${customers.length} ${customers.length === 1 ? "klant" : "klanten"} gevonden` }), _jsx(Card, { children: _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: "Bron" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: isLoading ? (Array.from({ length: 6 }).map((_, i) => (_jsx(TableRow, { children: Array.from({ length: 6 }).map((__, j) => (_jsx(TableCell, { className: "py-4", children: _jsx(Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, j))) }, i)))) : customers.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, children: _jsx(EmptyState, { onSync: () => syncMut.mutate({ showToast: true }), onAdd: () => navigate({ to: "/klanten/nieuw" }) }) }) })) : customers.map((c) => {
+    return (_jsxs("main", { className: "p-6 space-y-5 max-w-[1400px] mx-auto", 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 je lokale relaties en bekijk Floriday-klanten uit de cache." })] }), _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" }), " Floriday-netwerk"] }), _jsxs(Button, { onClick: () => navigate({ to: "/klanten/nieuw" }), children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), " Nieuwe klant"] })] })] }), _jsx(ExternalCacheBanner, { lastFetchedAt: externalData?.last_fetched_at ?? null, providers: providers }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-3", children: [_jsx(StatCard, { icon: _jsx(Users, { className: "h-4 w-4" }), label: "Totaal", value: totals.all ?? 0, active: view === "all", onClick: () => setView("all") }), _jsx(StatCard, { icon: _jsx(UserCheck, { className: "h-4 w-4" }), label: "Actief", value: totals.active ?? 0, active: view === "active", onClick: () => setView("active") }), _jsx(StatCard, { icon: _jsx(UserX, { className: "h-4 w-4" }), label: "Inactief", value: totals.inactive ?? 0, active: view === "inactive", onClick: () => setView("inactive") }), _jsx(StatCard, { icon: _jsx(HardDrive, { className: "h-4 w-4" }), label: "Lokaal", value: totals.local ?? 0, active: view === "local", onClick: () => setView("local") }), providers.filter((p) => p.is_enabled).map((p) => (_jsx(StatCard, { icon: _jsx(Cloud, { className: "h-4 w-4" }), label: p.label, value: totals[p.provider] ?? 0, active: view === p.provider, onClick: () => setView(p.provider) }, p.provider)))] }), _jsx(Tabs, { value: view, onValueChange: (v) => setView(v), children: _jsxs(TabsList, { className: "flex-wrap", children: [_jsxs(TabsTrigger, { value: "all", children: ["Alle (", totals.all ?? 0, ")"] }), _jsxs(TabsTrigger, { value: "active", children: ["Actief (", totals.active ?? 0, ")"] }), _jsxs(TabsTrigger, { value: "inactive", children: ["Inactief (", totals.inactive ?? 0, ")"] }), _jsxs(TabsTrigger, { value: "local", children: ["Lokaal (", totals.local ?? 0, ")"] }), providers.filter((p) => p.is_enabled).map((p) => (_jsxs(TabsTrigger, { value: p.provider, children: [p.label, " (", totals[p.provider] ?? 0, ")"] }, p.provider)))] }) }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", 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), className: "pl-9" })] }), _jsxs(Select, { value: customerClass, onValueChange: setCustomerClass, 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: setCountry, 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", 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-muted/50 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__"); }, className: "text-xs text-muted-foreground hover:text-foreground underline", children: "Alles wissen" })] })), _jsx("div", { className: "text-sm text-muted-foreground", children: isLoading ? "Laden..." : `${customers.length} ${customers.length === 1 ? "klant" : "klanten"} gevonden` }), _jsx(Card, { children: _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: "Bron" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: isLoading ? (Array.from({ length: 6 }).map((_, i) => (_jsx(TableRow, { children: Array.from({ length: 6 }).map((__, j) => (_jsx(TableCell, { className: "py-4", children: _jsx(Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, j))) }, i)))) : customers.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, children: _jsx(EmptyState, { onAdd: () => navigate({ to: "/klanten/nieuw" }) }) }) })) : customers.map((c) => {
                                     const secondary = c.commercial_name && c.commercial_name !== c.company_name
                                         ? c.commercial_name
                                         : c.city ?? c.email ?? null;
-                                    return (_jsxs(TableRow, { className: "cursor-pointer hover:bg-muted/50", onClick: () => navigate({ to: "/klanten/$id", params: { id: c.id } }), children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(CustomerAvatar, { logoUrl: c.logo_url, name: c.company_name, size: "sm" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium truncate", children: c.company_name }), secondary && _jsx("div", { className: "text-xs text-muted-foreground truncate", children: secondary })] })] }) }), _jsx(TableCell, { className: "py-3", children: c.contact_person || c.email ? (_jsxs("div", { className: "min-w-0", children: [c.contact_person && _jsx("div", { className: "text-sm truncate", children: c.contact_person }), c.email && (_jsxs("a", { href: `mailto:${c.email}`, onClick: (e) => e.stopPropagation(), className: "text-xs text-muted-foreground inline-flex items-center gap-1 hover:underline truncate", children: [_jsx(Mail, { className: "h-3 w-3" }), " ", c.email] }))] })) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3", children: c.customer_class ? _jsx(Badge, { variant: "secondary", children: c.customer_class }) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3 text-sm", children: c.country ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(MapPin, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", c.country] })) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3", children: _jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs", children: [c.source === "floriday" ? _jsx(Cloud, { className: "h-3.5 w-3.5 text-muted-foreground" }) : _jsx(HardDrive, { className: "h-3.5 w-3.5 text-muted-foreground" }), c.source === "floriday" ? "Floriday" : "Lokaal"] }) }), _jsx(TableCell, { className: "py-3", children: _jsx(StatusPill, { active: c.is_active }) })] }, c.id));
+                                    return (_jsxs(TableRow, { className: "cursor-pointer hover:bg-muted/50", onClick: () => c.source === "local"
+                                            ? navigate({ to: "/klanten/$id", params: { id: c.id } })
+                                            : navigate({
+                                                to: "/klanten/groep/$groupKey",
+                                                params: { groupKey: c.group_key },
+                                            }), children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(CustomerAvatar, { logoUrl: c.logo_url, name: c.company_name, size: "sm" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium truncate", children: c.company_name }), secondary && _jsx("div", { className: "text-xs text-muted-foreground truncate", children: secondary })] })] }) }), _jsx(TableCell, { className: "py-3", children: c.contact_person || c.email ? (_jsxs("div", { className: "min-w-0", children: [c.contact_person && _jsx("div", { className: "text-sm truncate", children: c.contact_person }), c.email && (_jsxs("a", { href: `mailto:${c.email}`, onClick: (e) => e.stopPropagation(), className: "text-xs text-muted-foreground inline-flex items-center gap-1 hover:underline truncate", children: [_jsx(Mail, { className: "h-3 w-3" }), " ", c.email] }))] })) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3", children: c.customer_class ? _jsx(Badge, { variant: "secondary", children: c.customer_class }) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3 text-sm", children: c.country ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(MapPin, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", c.country] })) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3", children: c.source === "local" ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs", children: [_jsx(HardDrive, { className: "h-3.5 w-3.5 text-muted-foreground" }), c.source_label] })) : (_jsx("div", { className: "flex flex-wrap gap-1", children: c.provider_labels.map((lbl) => (_jsxs(Badge, { variant: "outline", className: "text-[10px] font-normal", children: [_jsx(Cloud, { className: "h-3 w-3 mr-1" }), lbl] }, lbl))) })) }), _jsx(TableCell, { className: "py-3", children: _jsx(StatusPill, { active: c.is_active }) })] }, c.key));
                                 }) })] }) }) })] }));
 }
 function StatCard({ icon, label, value, active, onClick, }) {
@@ -131,8 +163,8 @@ function StatusPill({ active }) {
             ? "bg-primary/10 text-primary"
             : "bg-muted text-muted-foreground"}`, children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${active ? "bg-primary" : "bg-muted-foreground"}` }), active ? "Actief" : "Inactief"] }));
 }
-function EmptyState({ onSync, onAdd }) {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center gap-3", children: [_jsx("div", { className: "h-12 w-12 rounded-full bg-muted flex items-center justify-center", children: _jsx(Users, { className: "h-6 w-6 text-muted-foreground" }) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Geen klanten gevonden" }), _jsx("div", { className: "text-sm text-muted-foreground mt-0.5", children: "Pas je filters aan, synchroniseer met Floriday of voeg er handmatig \u00E9\u00E9n toe." })] }), _jsxs("div", { className: "flex gap-2 mt-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: onSync, children: [_jsx(RefreshCw, { className: "h-4 w-4 mr-2" }), " Synchroniseer Floriday"] }), _jsxs(Button, { size: "sm", onClick: onAdd, children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), " Nieuwe klant"] })] })] }));
+function EmptyState({ onAdd }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center gap-3", children: [_jsx("div", { className: "h-12 w-12 rounded-full bg-muted flex items-center justify-center", children: _jsx(Users, { className: "h-6 w-6 text-muted-foreground" }) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Geen klanten gevonden" }), _jsx("div", { className: "text-sm text-muted-foreground mt-0.5", children: "Pas je filters aan of voeg handmatig een klant toe." })] }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Button, { size: "sm", onClick: onAdd, children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), " Nieuwe klant"] }) })] }));
 }
 function relativeTime(iso) {
     const d = new Date(iso);