@flowselections/floriday-klanten-module 1.0.7 → 1.0.9

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerAnalyticsTab.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/CustomerAnalyticsTab.tsx"],"names":[],"mappings":"AA0FA,wBAAgB,oBAAoB,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,sCA6N1E"}

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

@@ -0,0 +1,90 @@
+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, CardHeader, CardTitle, Badge, Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Input, } from "@flowselections/core";
+import { ResponsiveContainer, LineChart, Line, BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid, PieChart, Pie, Cell, Legend, } from "recharts";
+import { TrendingUp, TrendingDown, Minus } from "lucide-react";
+import { getCustomerAnalytics } from "../../lib/customer-analytics.functions";
+function presetRange(key) {
+    const now = new Date();
+    const y = now.getFullYear(), m = now.getMonth(), d = now.getDate();
+    switch (key) {
+        case "today": return { from: new Date(y, m, d), to: new Date(y, m, d + 1) };
+        case "week": {
+            const day = now.getDay() || 7;
+            const start = new Date(y, m, d - day + 1);
+            return { from: start, to: new Date(start.getTime() + 7 * 86400000) };
+        }
+        case "month": return { from: new Date(y, m, 1), to: new Date(y, m + 1, 1) };
+        case "quarter": {
+            const q = Math.floor(m / 3);
+            return { from: new Date(y, q * 3, 1), to: new Date(y, q * 3 + 3, 1) };
+        }
+        case "year": return { from: new Date(y, 0, 1), to: new Date(y + 1, 0, 1) };
+        case "last_year": return { from: new Date(y - 1, 0, 1), to: new Date(y, 0, 1) };
+        case "all":
+        default: return { from: new Date(2000, 0, 1), to: new Date(y + 1, 0, 1) };
+    }
+}
+const PRESETS = [
+    { key: "today", label: "Vandaag" },
+    { key: "week", label: "Deze week" },
+    { key: "month", label: "Deze maand" },
+    { key: "quarter", label: "Dit kwartaal" },
+    { key: "year", label: "Dit jaar" },
+    { key: "last_year", label: "Vorig jaar" },
+    { key: "all", label: "Alles" },
+    { key: "custom", label: "Aangepast" },
+];
+const PIE_COLORS = ["#2563eb", "#16a34a", "#f59e0b", "#dc2626", "#7c3aed", "#0891b2", "#db2777", "#65a30d"];
+function formatEUR(n) {
+    return new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(n);
+}
+function formatNum(n, d = 0) {
+    return new Intl.NumberFormat("nl-NL", { maximumFractionDigits: d }).format(n);
+}
+function formatDate(s) {
+    if (!s)
+        return "—";
+    return new Date(s).toLocaleDateString("nl-NL", { day: "2-digit", month: "short", year: "numeric" });
+}
+function Kpi({ label, value, hint, delta }) {
+    let deltaEl = null;
+    if (delta != null && isFinite(delta)) {
+        const Icon = delta > 0.5 ? TrendingUp : delta < -0.5 ? TrendingDown : Minus;
+        const color = delta > 0.5 ? "text-emerald-600" : delta < -0.5 ? "text-rose-600" : "text-muted-foreground";
+        deltaEl = (_jsxs("div", { className: `flex items-center gap-1 text-xs ${color}`, children: [_jsx(Icon, { className: "h-3 w-3" }), " ", delta > 0 ? "+" : "", formatNum(delta, 1), "%"] }));
+    }
+    return (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-4 pb-4 space-y-1", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: label }), _jsx("div", { className: "text-xl font-semibold tabular-nums", children: value }), _jsxs("div", { className: "flex items-center justify-between", children: [hint && _jsx("div", { className: "text-xs text-muted-foreground", children: hint }), deltaEl] })] }) }));
+}
+export function CustomerAnalyticsTab({ customerId }) {
+    const [preset, setPreset] = useState("year");
+    const [customFrom, setCustomFrom] = useState("");
+    const [customTo, setCustomTo] = useState("");
+    const range = useMemo(() => {
+        if (preset === "custom" && customFrom && customTo) {
+            return { from: new Date(customFrom), to: new Date(new Date(customTo).getTime() + 86400000) };
+        }
+        return presetRange(preset === "custom" ? "year" : preset);
+    }, [preset, customFrom, customTo]);
+    const fetchAnalytics = useServerFn(getCustomerAnalytics);
+    const { data, isLoading, error } = useQuery({
+        queryKey: ["customer-analytics", customerId, range.from.toISOString(), range.to.toISOString()],
+        queryFn: () => fetchAnalytics({ data: {
+                customerId, from: range.from.toISOString(), to: range.to.toISOString(),
+            } }),
+    });
+    if (isLoading)
+        return _jsx("div", { className: "text-sm text-muted-foreground p-4", children: "Analyses laden..." });
+    if (error)
+        return _jsxs("div", { className: "text-sm text-rose-600 p-4", children: ["Kon analyses niet laden: ", error.message] });
+    if (!data)
+        return null;
+    const a = data;
+    const k = a.kpis;
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardContent, { className: "pt-4 pb-4", children: _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [PRESETS.map((p) => (_jsx(Button, { size: "sm", variant: preset === p.key ? "default" : "outline", onClick: () => setPreset(p.key), children: p.label }, p.key))), preset === "custom" && (_jsxs("div", { className: "flex items-center gap-2 ml-2", children: [_jsx(Input, { type: "date", value: customFrom, onChange: (e) => setCustomFrom(e.target.value), className: "h-8 w-40" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "tot" }), _jsx(Input, { type: "date", value: customTo, onChange: (e) => setCustomTo(e.target.value), className: "h-8 w-40" })] }))] }) }) }), _jsxs("div", { className: "grid gap-3 grid-cols-2 md:grid-cols-4", children: [_jsx(Kpi, { label: "Omzet in periode", value: formatEUR(k.revenue_period), delta: k.revenue_growth_pct, hint: `vs vorige periode: ${formatEUR(k.revenue_compare)}` }), _jsx(Kpi, { label: "Aantal bestellingen", value: formatNum(k.order_count_period), hint: `totaal: ${formatNum(k.order_count)}` }), _jsx(Kpi, { label: "Gem. orderwaarde", value: formatEUR(k.avg_order_value) }), _jsx(Kpi, { label: "Totale omzet (alle tijd)", value: formatEUR(k.total_revenue) }), _jsx(Kpi, { label: "Dit jaar", value: formatEUR(k.revenue_this_year), hint: `vorig jaar: ${formatEUR(k.revenue_last_year)}` }), _jsx(Kpi, { label: "Deze maand", value: formatEUR(k.revenue_this_month), hint: `vorige maand: ${formatEUR(k.revenue_last_month)}` }), _jsx(Kpi, { label: "Grootste bestelling", value: formatEUR(k.largest_order), hint: `kleinste: ${formatEUR(k.smallest_order)}` }), _jsx(Kpi, { label: "Gem. tijd tussen bestellingen", value: k.avg_days_between_orders != null ? `${formatNum(k.avg_days_between_orders, 1)} dgn` : "—", hint: k.avg_orders_per_month != null ? `${formatNum(k.avg_orders_per_month, 1)} / maand` : undefined })] }), _jsxs("div", { className: "grid gap-3 grid-cols-1 md:grid-cols-3 text-sm", children: [_jsx(Card, { children: _jsxs(CardContent, { className: "pt-4 pb-4", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Eerste bestelling" }), _jsx("div", { className: "font-medium", children: formatDate(k.first_order_date) })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "pt-4 pb-4", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Laatste bestelling" }), _jsx("div", { className: "font-medium", children: formatDate(k.last_order_date) })] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "pt-4 pb-4", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Periode" }), _jsxs("div", { className: "font-medium", children: [formatDate(a.period.from), " \u2013 ", formatDate(new Date(new Date(a.period.to).getTime() - 86400000).toISOString())] })] }) })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Omzet per maand" }) }), _jsx(CardContent, { className: "h-72", children: a.monthly.length === 0 ? _jsx(EmptyChart, {}) : (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(LineChart, { data: a.monthly, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }), _jsx(XAxis, { dataKey: "label", fontSize: 11 }), _jsx(YAxis, { fontSize: 11, tickFormatter: (v) => formatEUR(Number(v)) }), _jsx(Tooltip, { formatter: (v) => formatEUR(Number(v)) }), _jsx(Line, { type: "monotone", dataKey: "revenue", stroke: "#2563eb", strokeWidth: 2, dot: false, name: "Omzet" })] }) })) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Aantal bestellingen per maand" }) }), _jsx(CardContent, { className: "h-72", children: a.monthly.length === 0 ? _jsx(EmptyChart, {}) : (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(BarChart, { data: a.monthly, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }), _jsx(XAxis, { dataKey: "label", fontSize: 11 }), _jsx(YAxis, { fontSize: 11, allowDecimals: false }), _jsx(Tooltip, {}), _jsx(Bar, { dataKey: "orders", fill: "#16a34a", name: "Bestellingen" })] }) })) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gem. orderwaarde per maand" }) }), _jsx(CardContent, { className: "h-72", children: a.monthly.length === 0 ? _jsx(EmptyChart, {}) : (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(LineChart, { data: a.monthly, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }), _jsx(XAxis, { dataKey: "label", fontSize: 11 }), _jsx(YAxis, { fontSize: 11, tickFormatter: (v) => formatEUR(Number(v)) }), _jsx(Tooltip, { formatter: (v) => formatEUR(Number(v)) }), _jsx(Line, { type: "monotone", dataKey: "aov", stroke: "#f59e0b", strokeWidth: 2, dot: false, name: "Gem. waarde" })] }) })) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Omzet per jaar" }) }), _jsx(CardContent, { className: "h-72", children: a.yearly.length === 0 ? _jsx(EmptyChart, {}) : (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(BarChart, { data: a.yearly, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }), _jsx(XAxis, { dataKey: "label", fontSize: 11 }), _jsx(YAxis, { fontSize: 11, tickFormatter: (v) => formatEUR(Number(v)) }), _jsx(Tooltip, { formatter: (v) => formatEUR(Number(v)) }), _jsx(Bar, { dataKey: "revenue", fill: "#7c3aed", name: "Omzet" })] }) })) })] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-[2fr_1fr]", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Top artikelen in periode" }) }), _jsx(CardContent, { className: "p-0", children: a.topProducts.length === 0 ? (_jsx("div", { className: "p-6 text-sm text-muted-foreground", children: "Geen orderregels in deze periode." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Product" }), _jsx(TableHead, { className: "text-right", children: "Aantal" }), _jsx(TableHead, { children: "Eenheid" }), _jsx(TableHead, { className: "text-right", children: "Omzet" })] }) }), _jsx(TableBody, { children: a.topProducts.map((p) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: p.product_name }), _jsx(TableCell, { className: "text-right tabular-nums", children: formatNum(p.quantity) }), _jsx(TableCell, { className: "text-muted-foreground", children: p.unit ?? "—" }), _jsx(TableCell, { className: "text-right tabular-nums", children: formatEUR(p.revenue) })] }, p.product_name))) })] })) })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Verkocht per eenheid" }) }), _jsx(CardContent, { className: "space-y-2", children: a.unitTotals.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground", children: "Geen data." })) : a.unitTotals.map((u) => (_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "capitalize", children: u.unit }), _jsx("span", { className: "tabular-nums font-medium", children: formatNum(u.quantity) })] }, u.unit))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Status van bestellingen" }) }), _jsx(CardContent, { className: "h-56", children: a.statusBreakdown.length === 0 ? _jsx(EmptyChart, {}) : (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(PieChart, { children: [_jsx(Pie, { data: a.statusBreakdown, dataKey: "count", nameKey: "status", outerRadius: 70, label: true, children: a.statusBreakdown.map((_, i) => (_jsx(Cell, { fill: PIE_COLORS[i % PIE_COLORS.length] }, i))) }), _jsx(Tooltip, {}), _jsx(Legend, {})] }) })) })] })] })] }), _jsx(Card, { children: _jsx(CardContent, { className: "pt-4 pb-4 text-xs text-muted-foreground space-y-1", children: _jsxs("div", { children: [_jsx(Badge, { variant: "secondary", children: "Let op" }), " Sommige analyses zijn nog niet beschikbaar omdat de onderliggende data ontbreekt: btw-bedragen, marge en vervoerder/afhaallocatie per bestelling. Voeg deze velden toe aan orders/orderregels om die overzichten te activeren."] }) }) })] }));
+}
+function EmptyChart() {
+    return _jsx("div", { className: "h-full flex items-center justify-center text-sm text-muted-foreground", children: "Geen data in deze periode." });
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeliveryLocationsTab.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/DeliveryLocationsTab.tsx"],"names":[],"mappings":"AAwDA,wBAAgB,oBAAoB,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,+BAwS1E"}

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Button, Card, CardContent, Badge, toast, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@flowselections/core";
+import { MapPin, Plus, Pencil, Trash2, Truck, Sparkles, PackageCheck } from "lucide-react";
+import { listCarriers, listDeliveryLocations, upsertDeliveryLocation, deleteDeliveryLocation, pickCarrierForLocation, } from "../../lib/delivery-locations.functions";
+import { EU_COUNTRIES, findCountry } from "../../lib/eu-regions";
+const EMPTY = {
+    name: "", street: "", house_number: "", postal_code: "",
+    city: "", province: "", country: "Nederland",
+    carrier_id: null, carrier_assignment_source: "auto", is_primary: false, self_pickup: false,
+};
+export function DeliveryLocationsTab({ customerId }) {
+    const qc = useQueryClient();
+    const listFn = useServerFn(listDeliveryLocations);
+    const carriersFn = useServerFn(listCarriers);
+    const upsertFn = useServerFn(upsertDeliveryLocation);
+    const deleteFn = useServerFn(deleteDeliveryLocation);
+    const { data: list } = useQuery({
+        queryKey: ["delivery-locations", customerId],
+        queryFn: () => listFn({ data: { customer_id: customerId } }),
+    });
+    const { data: carriersResp } = useQuery({
+        queryKey: ["carriers"],
+        queryFn: () => carriersFn(),
+    });
+    const carriers = carriersResp?.carriers ?? [];
+    const locations = (list?.locations ?? []);
+    const [open, setOpen] = useState(false);
+    const [form, setForm] = useState(EMPTY);
+    const autoSuggested = useMemo(() => {
+        if (form.carrier_assignment_source === "manual")
+            return null;
+        return pickCarrierForLocation({ country: form.country, province: form.province, city: form.city }, carriers);
+    }, [form.country, form.province, form.city, form.carrier_assignment_source, carriers]);
+    useEffect(() => {
+        if (form.carrier_assignment_source !== "manual" && autoSuggested) {
+            setForm((f) => ({ ...f, carrier_id: autoSuggested.carrier_id }));
+        }
+    }, [autoSuggested?.carrier_id, form.carrier_assignment_source]);
+    const carrierName = (id) => carriers.find((c) => c.id === id)?.name ?? "—";
+    const startNew = () => { setForm(EMPTY); setOpen(true); };
+    const startEdit = (loc) => {
+        setForm({
+            id: loc.id,
+            name: loc.name ?? "",
+            street: loc.street ?? "",
+            house_number: loc.house_number ?? "",
+            postal_code: loc.postal_code ?? "",
+            city: loc.city ?? "",
+            province: loc.province ?? "",
+            country: loc.country ?? "Nederland",
+            carrier_id: loc.carrier_id,
+            carrier_assignment_source: (loc.carrier_assignment_source ?? "auto"),
+            is_primary: loc.is_primary,
+            self_pickup: !!loc.self_pickup,
+        });
+        setOpen(true);
+    };
+    const saveMut = useMutation({
+        mutationFn: () => upsertFn({ data: { ...form, customer_id: customerId } }),
+        onSuccess: () => {
+            toast.success(form.id ? "Locatie bijgewerkt" : "Locatie toegevoegd");
+            qc.invalidateQueries({ queryKey: ["delivery-locations", customerId] });
+            qc.invalidateQueries({ queryKey: ["customer", customerId] });
+            setOpen(false);
+        },
+        onError: (e) => toast.error(e?.message ?? "Opslaan mislukt"),
+    });
+    const delMut = useMutation({
+        mutationFn: (id) => deleteFn({ data: { id } }),
+        onSuccess: () => {
+            toast.success("Locatie verwijderd");
+            qc.invalidateQueries({ queryKey: ["delivery-locations", customerId] });
+            qc.invalidateQueries({ queryKey: ["customer", customerId] });
+        },
+    });
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-sm text-muted-foreground", children: "Voeg afleverlocaties toe; de vervoerder wordt automatisch gekoppeld op basis van het bedieningsgebied." }), _jsxs(Button, { size: "sm", onClick: startNew, children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), " Locatie toevoegen"] })] }), locations.length === 0 ? (_jsx(Card, { children: _jsx(CardContent, { className: "py-10 text-center text-sm text-muted-foreground", children: "Nog geen afleverlocaties." }) })) : (_jsx("div", { className: "grid gap-3 md:grid-cols-2", children: locations.map((loc) => (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-5 space-y-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "font-semibold flex items-center gap-2", children: [_jsx(MapPin, { className: "h-4 w-4 text-muted-foreground" }), loc.name || [loc.street, loc.house_number].filter(Boolean).join(" ") || "Afleverlocatie"] }), _jsxs("div", { className: "text-sm text-muted-foreground mt-0.5", children: [[loc.street, loc.house_number].filter(Boolean).join(" "), (loc.street || loc.house_number) && (loc.postal_code || loc.city) ? ", " : "", [loc.postal_code, loc.city].filter(Boolean).join(" "), loc.province ? ` · ${loc.province}` : "", loc.country ? ` · ${loc.country}` : ""] })] }), _jsxs("div", { className: "flex gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => startEdit(loc), children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", children: _jsx(Trash2, { className: "h-4 w-4" }) }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Locatie verwijderen?" }), _jsx(AlertDialogDescription, { children: "Deze actie kan niet ongedaan worden gemaakt." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: () => delMut.mutate(loc.id), children: "Verwijderen" })] })] })] })] })] }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap text-sm", children: [loc.self_pickup ? (_jsxs(_Fragment, { children: [_jsx(PackageCheck, { className: "h-4 w-4 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: "Eigen vervoer" }), _jsx(Badge, { variant: "secondary", children: "Klant haalt zelf op" })] })) : (_jsxs(_Fragment, { children: [_jsx(Truck, { className: "h-4 w-4 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: carrierName(loc.carrier_id) }), loc.carrier_assignment_source === "auto" && loc.carrier_id && (_jsxs(Badge, { variant: "secondary", className: "gap-1", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "Automatisch"] })), loc.carrier_assignment_source === "manual" && (_jsx(Badge, { variant: "outline", children: "Handmatig" })), !loc.carrier_id && (_jsx(Badge, { variant: "outline", className: "text-amber-600 border-amber-300", children: "Geen match" }))] })), loc.is_primary && _jsx(Badge, { children: "Vaste locatie" })] })] }) }, loc.id))) })), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "max-w-2xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: form.id ? "Locatie bewerken" : "Nieuwe locatie" }), _jsx(DialogDescription, { children: "De vervoerder wordt automatisch gekozen op basis van plaats, provincie of land." })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "md:col-span-2", children: [_jsx(Label, { children: "Locatienaam (optioneel)" }), _jsx(Input, { value: form.name, onChange: (e) => setForm({ ...form, name: e.target.value }) })] }), _jsxs("div", { className: "md:col-span-2 grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "col-span-2", children: [_jsx(Label, { children: "Straat" }), _jsx(Input, { value: form.street, onChange: (e) => setForm({ ...form, street: e.target.value }) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Huisnummer" }), _jsx(Input, { value: form.house_number, onChange: (e) => setForm({ ...form, house_number: e.target.value }) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Postcode" }), _jsx(Input, { value: form.postal_code, onChange: (e) => setForm({ ...form, postal_code: e.target.value }) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Plaats" }), _jsx(Input, { value: form.city, onChange: (e) => setForm({ ...form, city: e.target.value }) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Land" }), _jsxs(Select, { value: findCountry(form.country)?.name ?? "", onValueChange: (v) => setForm({ ...form, country: v, province: "" }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies een land" }) }), _jsx(SelectContent, { children: EU_COUNTRIES.map((c) => (_jsx(SelectItem, { value: c.name, children: c.name }, c.code))) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Provincie" }), (() => {
+                                            const provinces = findCountry(form.country)?.provinces ?? [];
+                                            return provinces.length > 0 ? (_jsxs(Select, { value: form.province || "", onValueChange: (v) => setForm({ ...form, province: v }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies een provincie" }) }), _jsx(SelectContent, { children: provinces.map((p) => (_jsx(SelectItem, { value: p, children: p }, p))) })] })) : (_jsx(Input, { value: form.province, onChange: (e) => setForm({ ...form, province: e.target.value }), placeholder: "Kies eerst een land", disabled: !form.country }));
+                                        })()] }), _jsxs("div", { className: "md:col-span-2 space-y-2", children: [_jsx(Label, { children: "Vervoerder" }), _jsxs(Select, { value: form.self_pickup ? "__self__" : (form.carrier_id ?? "__none__"), onValueChange: (v) => {
+                                                if (v === "__self__") {
+                                                    setForm({ ...form, self_pickup: true, carrier_id: null, carrier_assignment_source: "manual" });
+                                                }
+                                                else if (v === "__none__") {
+                                                    setForm({ ...form, self_pickup: false, carrier_id: null, carrier_assignment_source: "manual" });
+                                                }
+                                                else {
+                                                    setForm({ ...form, self_pickup: false, carrier_id: v, carrier_assignment_source: "manual" });
+                                                }
+                                            }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies een vervoerder" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__self__", children: "Eigen vervoer (klant haalt zelf op)" }), _jsx(SelectItem, { value: "__none__", children: "\u2014 Geen vervoerder \u2014" }), carriers.map((c) => (_jsx(SelectItem, { value: c.id, children: c.name }, c.id)))] })] }), form.self_pickup ? (_jsx("div", { className: "text-xs text-muted-foreground", children: "De klant komt zelf de karren ophalen \u2014 er wordt geen vervoerder gekoppeld." })) : form.carrier_assignment_source === "manual" ? (_jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [_jsx("span", { children: "Handmatig overschreven." }), _jsx(Button, { variant: "link", size: "sm", className: "h-auto p-0", onClick: () => setForm({ ...form, carrier_assignment_source: "auto" }), children: "Terug naar automatisch" })] })) : autoSuggested?.carrier_id ? (_jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "Automatisch geselecteerd op basis van ", autoSuggested.matched_on === "city"
+                                                    ? "plaats" : autoSuggested.matched_on === "province" ? "provincie" : "land", "."] })) : (_jsx("div", { className: "text-xs text-amber-600", children: "Geen vervoerder gevonden voor dit bedieningsgebied \u2014 selecteer er handmatig \u00E9\u00E9n." }))] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), children: "Annuleren" }), _jsx(Button, { onClick: () => saveMut.mutate(), disabled: saveMut.isPending, children: form.id ? "Opslaan" : "Toevoegen" })] })] }) })] }));
+}

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

@@ -0,0 +1,75 @@
+import { type ReactNode } from "react";
+import type { ExternalCustomer, GroupedCustomer } from "../../lib/external-customers.functions";
+export type CustomerProfile = {
+    logo_url: string | null;
+    company_name: string;
+    commercial_name: string | null;
+    is_active: boolean;
+    class_badge: string | null;
+    email: string | null;
+    phone: string | null;
+    website: string | null;
+    street: string | null;
+    house_number: string | null;
+    postal_code: string | null;
+    city: string | null;
+    country: string | null;
+    vat_number: string | null;
+    gln: string | null;
+    rfh_id: string | null;
+    organization_type: string | null;
+    primary_contact_name: string | null;
+    email_from_contact: boolean;
+    phone_from_contact: boolean;
+    has_contacts: boolean;
+};
+export declare function formatCountry(value: string | null | undefined): string | null;
+export declare function adaptLocalToProfile(c: any, contacts?: any[]): CustomerProfile;
+export declare function adaptGroupedToProfile(g: GroupedCustomer): CustomerProfile;
+export declare function adaptExternalToProfile(c: ExternalCustomer): CustomerProfile;
+export declare function ProfileCard({ profile: p }: {
+    profile: CustomerProfile;
+}): import("react").JSX.Element;
+export declare function SectionLabel({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function QuickAction({ icon, label, href, external }: {
+    icon: ReactNode;
+    label: string;
+    href?: string;
+    external?: boolean;
+}): import("react").JSX.Element;
+export declare function InfoRow({ icon, label, value, href, external, mono, hint, }: {
+    icon: ReactNode;
+    label?: string;
+    value: string | null | undefined;
+    href?: string;
+    external?: boolean;
+    mono?: boolean;
+    hint?: string;
+}): import("react").JSX.Element;
+export declare function KpiStrip({ counts, onSelect, }: {
+    counts: {
+        contacts: number;
+        locations: number;
+        assortment: number;
+        orders: number;
+        lastSync: string | null | undefined;
+    };
+    onSelect: (tab: string) => void;
+}): import("react").JSX.Element;
+export declare function ActivityItem({ entry }: {
+    entry: {
+        id?: string;
+        action: string;
+        created_at: string;
+    };
+}): import("react").JSX.Element;
+export declare function BadgeList({ label, items }: {
+    label: string;
+    items: string[] | null | undefined;
+}): import("react").JSX.Element;
+export declare function EmptyState({ message }: {
+    message: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=KlantDetailLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KlantDetailLayout.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/KlantDetailLayout.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Card, CardContent, Badge, Separator, } from "@flowselections/core";
+import { Mail, Phone, Globe, MapPin, Hash, Building2, ChevronDown, ChevronRight, Users, Truck, Package, ShoppingCart, Clock, } from "lucide-react";
+import { CustomerAvatar } from "../CustomerAvatar";
+function firstNonEmpty(values) {
+    for (const v of values) {
+        if (v != null && (typeof v !== "string" || v.trim() !== ""))
+            return v;
+    }
+    return null;
+}
+const COUNTRY_NAMES = {
+    NL: "Nederland", BE: "België", DE: "Duitsland", FR: "Frankrijk",
+    ES: "Spanje", IT: "Italië", GB: "Verenigd Koninkrijk", UK: "Verenigd Koninkrijk",
+    PL: "Polen", DK: "Denemarken", SE: "Zweden", NO: "Noorwegen",
+    AT: "Oostenrijk", CH: "Zwitserland", PT: "Portugal", IE: "Ierland",
+    LU: "Luxemburg", CZ: "Tsjechië", FI: "Finland", US: "Verenigde Staten",
+};
+export function formatCountry(value) {
+    if (!value)
+        return null;
+    const trimmed = value.trim();
+    if (trimmed.length === 2)
+        return COUNTRY_NAMES[trimmed.toUpperCase()] ?? trimmed;
+    return trimmed;
+}
+export function adaptLocalToProfile(c, contacts = []) {
+    const primary = contacts.find((x) => x.is_active !== false) ?? contacts[0] ?? null;
+    const email = c.email ?? primary?.email ?? null;
+    const phone = c.phone ?? primary?.phone ?? null;
+    const rfh = c.custom_fields?.rfh_relation_id ??
+        c.floriday_raw?.rfhRelationId ??
+        c.floriday_raw?.rfhCompanyAccountId ??
+        null;
+    return {
+        logo_url: c.logo_url ?? null,
+        company_name: c.company_name,
+        commercial_name: c.commercial_name ?? null,
+        is_active: !!c.is_active,
+        class_badge: c.customer_class ?? null,
+        email,
+        phone,
+        website: c.website ?? null,
+        street: c.street ?? null,
+        house_number: c.house_number ?? null,
+        postal_code: c.postal_code ?? null,
+        city: c.city ?? null,
+        country: formatCountry(c.country ?? null),
+        vat_number: c.vat_number ?? null,
+        gln: c.gln ?? null,
+        rfh_id: rfh ? String(rfh) : null,
+        organization_type: c.organization_type ?? null,
+        primary_contact_name: primary?.full_name ?? null,
+        email_from_contact: !c.email && !!primary?.email,
+        phone_from_contact: !c.phone && !!primary?.phone,
+        has_contacts: contacts.length > 0,
+    };
+}
+export function adaptGroupedToProfile(g) {
+    const sources = g.sources ?? [];
+    const pick = (k) => firstNonEmpty(sources.map((s) => s[k]));
+    const rfh = firstNonEmpty(sources.map((s) => s.raw?.custom_fields?.rfh_relation_id ??
+        s.raw?.custom_fields?.rfh_company_account_id ??
+        s.raw?.rfhRelationId ??
+        s.raw?.rfhCompanyAccountId)) ?? null;
+    const orgType = firstNonEmpty(sources.map((s) => s.raw?.organization_type ?? s.raw?.organizationType));
+    return {
+        logo_url: g.logo_url ?? pick("logo_url") ?? null,
+        company_name: g.display_name,
+        commercial_name: g.commercial_name ?? pick("commercial_name") ?? null,
+        is_active: !!g.is_active,
+        class_badge: null,
+        email: g.email ?? pick("email"),
+        phone: g.phone ?? pick("phone"),
+        website: g.website ?? pick("website"),
+        street: pick("street"),
+        house_number: pick("house_number"),
+        postal_code: pick("postal_code"),
+        city: g.city ?? pick("city"),
+        country: formatCountry(g.country ?? pick("country")),
+        vat_number: g.vat_number ?? pick("vat_number"),
+        gln: g.gln ?? pick("gln"),
+        rfh_id: rfh ? String(rfh) : null,
+        organization_type: orgType ? String(orgType) : null,
+        primary_contact_name: g.contact_person ?? pick("contact_person"),
+        email_from_contact: false,
+        phone_from_contact: false,
+        has_contacts: !!(g.contact_person || pick("contact_person")),
+    };
+}
+export function adaptExternalToProfile(c) {
+    const rfh = c.raw?.custom_fields?.rfh_relation_id ??
+        c.raw?.custom_fields?.rfh_company_account_id ??
+        c.raw?.rfhRelationId ??
+        c.raw?.rfhCompanyAccountId ??
+        null;
+    const orgType = c.raw?.organization_type ?? c.raw?.organizationType ?? null;
+    return {
+        logo_url: c.logo_url,
+        company_name: c.company_name,
+        commercial_name: c.commercial_name,
+        is_active: !!c.is_active,
+        class_badge: null,
+        email: c.email,
+        phone: c.phone,
+        website: c.website,
+        street: c.street,
+        house_number: c.house_number,
+        postal_code: c.postal_code,
+        city: c.city,
+        country: formatCountry(c.country),
+        vat_number: c.vat_number,
+        gln: c.gln,
+        rfh_id: rfh ? String(rfh) : null,
+        organization_type: orgType ? String(orgType) : null,
+        primary_contact_name: c.contact_person,
+        email_from_contact: false,
+        phone_from_contact: false,
+        has_contacts: !!c.contact_person,
+    };
+}
+export function ProfileCard({ profile: p }) {
+    const address = [p.street, p.house_number].filter(Boolean).join(" ");
+    const cityLine = [p.postal_code, p.city].filter(Boolean).join(" ");
+    const fullAddress = [address, cityLine, p.country].filter(Boolean).join(", ");
+    const [showTech, setShowTech] = useState(false);
+    const hasTech = !!(p.gln || p.rfh_id || p.organization_type);
+    return (_jsx(Card, { className: "lg:sticky lg:top-6 self-start", children: _jsxs(CardContent, { className: "pt-6 space-y-5", children: [_jsxs("div", { className: "flex flex-col items-center text-center", children: [_jsx(CustomerAvatar, { logoUrl: p.logo_url, name: p.company_name, size: "lg", className: "h-24 w-24 text-2xl" }), _jsx("h1", { className: "mt-3 text-xl font-bold leading-tight", children: p.company_name }), p.commercial_name && p.commercial_name !== p.company_name && (_jsx("p", { className: "text-sm text-muted-foreground", children: p.commercial_name })), _jsxs("div", { className: "mt-3 flex flex-wrap items-center justify-center gap-1.5", children: [p.is_active ? _jsx(Badge, { children: "Actief" }) : _jsx(Badge, { variant: "destructive", children: "Inactief" }), p.class_badge && _jsx(Badge, { variant: "secondary", children: p.class_badge })] })] }), (p.email || p.phone || p.website) && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { children: [_jsx(SectionLabel, { children: "Snelle acties" }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsx(QuickAction, { icon: _jsx(Mail, { className: "h-4 w-4" }), label: "E-mail", href: p.email ? `mailto:${p.email}` : undefined }), _jsx(QuickAction, { icon: _jsx(Phone, { className: "h-4 w-4" }), label: "Bellen", href: p.phone ? `tel:${p.phone}` : undefined }), _jsx(QuickAction, { icon: _jsx(Globe, { className: "h-4 w-4" }), label: "Website", href: p.website ?? undefined, external: true })] })] })] })), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx(SectionLabel, { children: "Contact" }), _jsx(InfoRow, { icon: _jsx(MapPin, { className: "h-4 w-4" }), value: fullAddress || null }), _jsx(InfoRow, { icon: _jsx(Mail, { className: "h-4 w-4" }), value: p.email, href: p.email ? `mailto:${p.email}` : undefined, hint: p.email_from_contact ? `via ${p.primary_contact_name ?? "contactpersoon"}` : undefined }), _jsx(InfoRow, { icon: _jsx(Phone, { className: "h-4 w-4" }), value: p.phone, href: p.phone ? `tel:${p.phone}` : undefined, hint: p.phone_from_contact ? `via ${p.primary_contact_name ?? "contactpersoon"}` : undefined }), _jsx(InfoRow, { icon: _jsx(Globe, { className: "h-4 w-4" }), value: p.website, href: p.website ?? undefined, external: true }), !p.email && !p.phone && !p.has_contacts && (_jsxs("p", { className: "text-xs text-muted-foreground leading-relaxed", children: ["Voeg e-mail of telefoon toe via ", _jsx("strong", { children: "Bewerken" }), "."] }))] }), p.vat_number && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx(SectionLabel, { children: "Identificatie" }), _jsx(InfoRow, { icon: _jsx(Hash, { className: "h-4 w-4" }), label: "BTW", value: p.vat_number, mono: true })] })] })), hasTech && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("button", { type: "button", onClick: () => setShowTech((v) => !v), className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground", children: [showTech ? _jsx(ChevronDown, { className: "h-3 w-3" }) : _jsx(ChevronRight, { className: "h-3 w-3" }), "Technische gegevens"] }), showTech && (_jsxs("div", { className: "space-y-3", children: [p.rfh_id && _jsx(InfoRow, { icon: _jsx(Hash, { className: "h-4 w-4" }), label: "RFH-relatienr.", value: p.rfh_id, mono: true }), _jsx(InfoRow, { icon: _jsx(Hash, { className: "h-4 w-4" }), label: "GLN", value: p.gln, mono: true }), _jsx(InfoRow, { icon: _jsx(Building2, { className: "h-4 w-4" }), label: "Type", value: p.organization_type })] }))] }))] }) }));
+}
+export function SectionLabel({ children }) {
+    return _jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground font-medium mb-2", children: children });
+}
+export function QuickAction({ icon, label, href, external }) {
+    const disabled = !href;
+    const cls = "flex flex-col items-center justify-center gap-1 rounded-md border border-border bg-background p-2.5 text-xs transition-colors hover:bg-muted disabled:opacity-40 disabled:hover:bg-background";
+    if (disabled) {
+        return _jsxs("button", { type: "button", disabled: true, className: cls, children: [icon, _jsx("span", { children: label })] });
+    }
+    return (_jsxs("a", { href: href, target: external ? "_blank" : undefined, rel: external ? "noopener noreferrer" : undefined, className: cls, children: [icon, _jsx("span", { children: label })] }));
+}
+export function InfoRow({ icon, label, value, href, external, mono, hint, }) {
+    const content = value ?? "—";
+    return (_jsxs("div", { className: "flex items-start gap-3 text-sm", children: [_jsx("span", { className: "text-muted-foreground mt-0.5 shrink-0", children: icon }), _jsxs("div", { className: "min-w-0 flex-1", children: [label && _jsx("div", { className: "text-xs text-muted-foreground", children: label }), href && value ? (_jsx("a", { href: href, target: external ? "_blank" : undefined, rel: external ? "noopener noreferrer" : undefined, className: `hover:underline break-words ${mono ? "font-mono text-xs" : ""}`, children: content })) : (_jsx("div", { className: `break-words ${mono ? "font-mono text-xs" : ""} ${!value ? "text-muted-foreground" : ""}`, children: content })), hint && value && (_jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: hint }))] })] }));
+}
+export function KpiStrip({ counts, onSelect, }) {
+    const items = [
+        { key: "contacts", icon: _jsx(Users, { className: "h-4 w-4" }), label: "Contacten", value: counts.contacts },
+        { key: "locations", icon: _jsx(Truck, { className: "h-4 w-4" }), label: "Locaties", value: counts.locations },
+        { key: "assortment", icon: _jsx(Package, { className: "h-4 w-4" }), label: "Assortiment", value: counts.assortment },
+        { key: "orders", icon: _jsx(ShoppingCart, { className: "h-4 w-4" }), label: "Bestellingen", value: counts.orders },
+    ];
+    return (_jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-5 divide-y md:divide-y-0 md:divide-x divide-border", children: [items.map((it) => (_jsxs("button", { type: "button", onClick: () => onSelect(it.key), className: "flex flex-col items-start gap-1 p-4 text-left transition-colors hover:bg-muted/50", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [it.icon, " ", it.label] }), _jsx("span", { className: "text-2xl font-bold", children: it.value })] }, it.key))), _jsxs("div", { className: "flex flex-col items-start gap-1 p-4 col-span-2 md:col-span-1", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(Clock, { className: "h-4 w-4" }), " Laatste sync"] }), _jsx("span", { className: "text-sm font-medium", children: counts.lastSync ? new Date(counts.lastSync).toLocaleString("nl-NL", { dateStyle: "short", timeStyle: "short" }) : "—" })] })] }) }) }));
+}
+export function ActivityItem({ entry }) {
+    const actionLabels = {
+        create: "Aangemaakt",
+        insert: "Aangemaakt",
+        update: "Bijgewerkt",
+        delete: "Verwijderd",
+        sync: "Bijgewerkt vanuit extern systeem",
+    };
+    const label = actionLabels[entry.action] ?? "Wijziging";
+    return (_jsx("div", { className: "border-l-2 border-primary pl-3 py-1", children: _jsxs("div", { className: "flex justify-between items-center text-sm", children: [_jsx("strong", { children: label }), _jsx("span", { className: "text-xs text-muted-foreground", children: new Date(entry.created_at).toLocaleString("nl-NL") })] }) }));
+}
+export function BadgeList({ label, items }) {
+    const list = items ?? [];
+    return (_jsxs("div", { children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground mb-1", children: label }), list.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground", children: "\u2014" })) : (_jsx("div", { className: "flex flex-wrap gap-1", children: list.map((s) => (_jsx(Badge, { variant: "secondary", children: s }, s))) }))] }));
+}
+export function EmptyState({ message }) {
+    return (_jsx(Card, { children: _jsx(CardContent, { className: "pt-6 text-center text-sm text-muted-foreground", children: message }) }));
+}

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