@flowselections/floriday-klanten-module 1.0.7 → 1.0.9

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

@@ -3,18 +3,19 @@ import { useNavigate } from "@tanstack/react-router";
 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, Cloud, HardDrive, X, ArrowUpDown, Mail, MapPin, } from "lucide-react";
+import { Button, Input, Card, CardContent, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsList, TabsTrigger, Skeleton, Switch, Label, } from "@flowselections/core";
+import { Plus, Search, Network, Users, UserCheck, 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";
+import { formatCountry } from "./KlantDetailLayout";
 export function KlantenOverzicht() {
     const navigate = useNavigate();
     const [search, setSearch] = useState("");
     const [customerClass, setCustomerClass] = useState("__all__");
     const [country, setCountry] = useState("__all__");
     const [view, setView] = useState("all");
+    const [showInactive, setShowInactive] = useState(false);
     const [sort, setSort] = useState({ col: "company_name", dir: "asc" });
     const list = useServerFn(listCustomers);
     const listExternal = useServerFn(listExternalCustomers);
@@ -35,22 +36,13 @@ export function KlantenOverzicht() {
     });
     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,
@@ -63,16 +55,12 @@ export function KlantenOverzicht() {
         }));
         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,
@@ -85,19 +73,14 @@ export function KlantenOverzicht() {
             };
         });
         return [...local, ...ext];
-    }, [localData, externalData, providerLabel]);
+    }, [localData, externalData]);
     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]);
+    }, [allRows]);
     const countries = useMemo(() => {
         const set = new Set();
         allRows.forEach((c) => { if (c.country)
@@ -108,12 +91,8 @@ export function KlantenOverzicht() {
         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 (!showInactive && view !== "active")
+            rows = rows.filter((c) => c.is_active);
         if (customerClass !== "__all__")
             rows = rows.filter((c) => c.customer_class === customerClass);
         if (country !== "__all__")
@@ -130,7 +109,7 @@ export function KlantenOverzicht() {
             const cmp = av.localeCompare(bv);
             return sort.dir === "asc" ? cmp : -cmp;
         });
-    }, [allRows, view, customerClass, country, search, sort]);
+    }, [allRows, view, customerClass, country, search, sort, showInactive]);
     const activeFilterChips = [];
     if (search)
         activeFilterChips.push({ key: "s", label: `Zoek: "${search}"`, clear: () => setSearch("") });
@@ -139,7 +118,8 @@ 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 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 lastUpdated = externalData?.last_fetched_at ?? null;
+    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" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: ["Beheer en doorzoek al je klanten.", lastUpdated && (_jsxs("span", { className: "ml-2 text-xs", children: ["\u00B7 Bijgewerkt ", relativeTime(lastUpdated)] }))] })] }), _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-2 gap-3 max-w-md", 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(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("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: "flex items-center gap-2 ml-auto", children: [_jsx(Switch, { id: "show-inactive", checked: showInactive, onCheckedChange: setShowInactive }), _jsx(Label, { htmlFor: "show-inactive", className: "text-sm cursor-pointer", children: "Toon inactieve klanten" })] })] }), 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: "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)))) : customers.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, 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;
@@ -148,7 +128,7 @@ export function KlantenOverzicht() {
                                             : 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));
+                                            }), 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" }), " ", formatCountry(c.country)] })) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3", children: _jsx(StatusPill, { active: c.is_active }) })] }, c.key));
                                 }) })] }) }) })] }));
 }
 function StatCard({ icon, label, value, active, onClick, }) {

package/dist-lib/index.js

@@ -23,7 +23,7 @@ export const floridayKlantenModule = {
     version: "1.0.0",
     nav: {
         label: "Klanten",
-        href: "/floriday-klanten",
+        href: "/klanten",
         icon: Users,
     },
     settingsCards: [