@flowselections/floriday-klanten-module 1.0.8 → 1.0.10

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

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

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

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

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

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNavigate } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { useState } from "react";
+import { Card, CardContent, Badge, Button, Tabs, TabsList, TabsTrigger, TabsContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
+import { ArrowLeft, Mail, Phone } from "lucide-react";
+import { getGroupedCustomerDetail, } from "../../lib/external-customers.functions";
+import { ProfileCard, KpiStrip, BadgeList, EmptyState, adaptGroupedToProfile, } from "../../components/klanten/KlantDetailLayout";
+export function GroupedKlantDetail({ groupKey }) {
+    const navigate = useNavigate();
+    const get = useServerFn(getGroupedCustomerDetail);
+    const [tab, setTab] = useState("overview");
+    const { data, isLoading, error } = useQuery({
+        queryKey: ["grouped-customer", groupKey],
+        queryFn: () => get({ data: { groupKey } }),
+    });
+    if (isLoading)
+        return _jsx("main", { className: "p-6", children: "Laden..." });
+    if (error || !data) {
+        return (_jsxs("main", { className: "p-6 space-y-3", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate({ to: "/klanten" }), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), " Terug naar klanten"] }), _jsx("p", { className: "text-sm text-destructive", children: error instanceof Error ? error.message : "Klant niet gevonden." })] }));
+    }
+    const g = data.group;
+    const providerMap = new Map(data.providers.map((p) => [p.provider, p]));
+    const sources = g.sources ?? [];
+    const profile = adaptGroupedToProfile(g);
+    const contacts = collectContacts(sources, providerMap);
+    const locations = collectLocations(sources, providerMap);
+    const segments = collectArray(sources, ["segments"]);
+    const tradeForms = collectArray(sources, ["trade_forms", "tradeForms"]);
+    const markets = collectArray(sources, ["markets"]);
+    const productGroups = collectArray(sources, ["product_groups", "productGroups"]);
+    const paymentMethods = collectArray(sources, ["payment_methods", "paymentMethods"]);
+    const activity = sources
+        .filter((s) => s.fetched_at)
+        .map((s) => ({
+        id: `${s.provider}-${s.external_id}`,
+        action: "sync",
+        created_at: s.fetched_at,
+        provider: providerMap.get(s.provider)?.label ?? s.provider,
+    }))
+        .sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at));
+    return (_jsxs("main", { className: "p-6 max-w-7xl mx-auto space-y-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate({ to: "/klanten" }), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), " Terug naar klanten"] }) }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-[340px_1fr]", children: [_jsx(ProfileCard, { profile: profile }), _jsxs("div", { className: "space-y-4 min-w-0", children: [_jsx(KpiStrip, { counts: {
+                                    contacts: contacts.length,
+                                    locations: locations.length,
+                                    assortment: 0,
+                                    orders: 0,
+                                    lastSync: g.fetched_at,
+                                }, onSelect: setTab }), _jsxs(Tabs, { value: tab, onValueChange: setTab, children: [_jsxs(TabsList, { className: "flex-wrap", children: [_jsx(TabsTrigger, { value: "overview", children: "Overzicht" }), _jsxs(TabsTrigger, { value: "contacts", children: ["Contacten (", contacts.length, ")"] }), _jsxs(TabsTrigger, { value: "locations", children: ["Locaties (", locations.length, ")"] }), _jsx(TabsTrigger, { value: "assortment", children: "Assortiment (0)" }), _jsx(TabsTrigger, { value: "orders", children: "Bestellingen (0)" }), _jsx(TabsTrigger, { value: "trade", children: "Handel" }), _jsx(TabsTrigger, { value: "activity", children: "Activiteit" }), g.is_merged && sources.length > 1 && (_jsxs(TabsTrigger, { value: "sources", children: ["Bronnen (", sources.length, ")"] }))] }), _jsxs(TabsContent, { value: "overview", className: "space-y-4", children: [(segments.length || tradeForms.length || markets.length || productGroups.length) ? (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-6 grid gap-4 md:grid-cols-2", children: [_jsx(BadgeList, { label: "Segmenten", items: segments }), _jsx(BadgeList, { label: "Handelsvorm", items: tradeForms }), _jsx(BadgeList, { label: "Afzetmarkten", items: markets }), _jsx(BadgeList, { label: "Productgroepen", items: productGroups })] }) })) : null, paymentMethods.length > 0 && (_jsx(Card, { children: _jsx(CardContent, { className: "pt-6", children: _jsx(BadgeList, { label: "Betaalmethoden", items: paymentMethods }) }) })), !segments.length && !tradeForms.length && !markets.length && !productGroups.length && !paymentMethods.length && (_jsx(EmptyState, { message: "Geen extra profielinformatie beschikbaar voor deze klant." }))] }), _jsx(TabsContent, { value: "contacts", children: contacts.length === 0 ? (_jsx(EmptyState, { message: "Geen contactpersonen beschikbaar via de koppeling." })) : (_jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: contacts.map((p, i) => (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-6 space-y-2", children: [_jsx("div", { className: "font-semibold", children: p.full_name }), p.job_title && _jsx("div", { className: "text-sm text-muted-foreground", children: p.job_title }), p.phone && (_jsxs("a", { href: `tel:${p.phone}`, className: "text-sm flex items-center gap-2 hover:underline", children: [_jsx(Phone, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", p.phone] })), p.email && (_jsxs("a", { href: `mailto:${p.email}`, className: "text-sm flex items-center gap-2 hover:underline", children: [_jsx(Mail, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", p.email] })), _jsx(Badge, { variant: "secondary", children: p.source_label })] }) }, i))) })) }), _jsx(TabsContent, { value: "locations", children: locations.length === 0 ? (_jsx(EmptyState, { message: "Geen afleverlocaties beschikbaar via de koppeling." })) : (_jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Adres" }), _jsx(TableHead, { children: "GLN" }), _jsx(TableHead, { children: "Postcode" }), _jsx(TableHead, { children: "Bron" })] }) }), _jsx(TableBody, { children: locations.map((l, i) => (_jsxs(TableRow, { children: [_jsxs(TableCell, { children: [_jsx("div", { className: "font-medium", children: l.name || l.address_line || "—" }), l.name && l.address_line && (_jsxs("div", { className: "text-xs text-muted-foreground", children: [l.address_line, ", ", l.city ?? ""] }))] }), _jsx(TableCell, { className: "font-mono text-sm", children: l.gln || "—" }), _jsx(TableCell, { className: "text-sm", children: [l.postal_code, l.country].filter(Boolean).join(" · ") }), _jsx(TableCell, { children: _jsx(Badge, { variant: "secondary", children: l.source_label }) })] }, i))) })] }) }) })) }), _jsx(TabsContent, { value: "assortment", children: _jsx(EmptyState, { message: "Assortiment is beschikbaar zodra de koppeling dit levert." }) }), _jsx(TabsContent, { value: "orders", children: _jsx(EmptyState, { message: "Bestellingen zijn beschikbaar zodra de koppeling dit levert." }) }), _jsx(TabsContent, { value: "trade", children: _jsx(EmptyState, { message: "Handelsinstellingen zijn niet beschikbaar via deze koppeling." }) }), _jsx(TabsContent, { value: "activity", children: _jsx(Card, { children: _jsx(CardContent, { className: "pt-6 space-y-2", children: activity.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen activiteit voor deze klant." })) : (activity.map((a) => (_jsxs("div", { className: "flex items-center justify-between text-sm border-l-2 border-primary pl-3 py-1", children: [_jsxs("span", { children: ["Bijgewerkt via ", _jsx("strong", { children: a.provider })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: new Date(a.created_at).toLocaleString("nl-NL") })] }, a.id)))) }) }) }), g.is_merged && sources.length > 1 && (_jsx(TabsContent, { value: "sources", children: _jsx(CompareCard, { sources: sources, providerMap: providerMap }) }))] })] })] })] }));
+}
+function collectContacts(sources, providerMap) {
+    const out = [];
+    for (const s of sources) {
+        const label = providerMap.get(s.provider)?.label ?? s.provider;
+        const raw = s.raw ?? {};
+        const candidates = [];
+        if (raw.primaryContact)
+            candidates.push(raw.primaryContact);
+        if (Array.isArray(raw.contactPersons))
+            candidates.push(...raw.contactPersons);
+        if (Array.isArray(raw.contacts))
+            candidates.push(...raw.contacts);
+        if (candidates.length === 0 && s.contact_person) {
+            candidates.push({ name: s.contact_person, email: s.email, phone: s.phone });
+        }
+        for (const c of candidates) {
+            const full_name = c.fullName ?? c.name ?? [c.firstName, c.lastName].filter(Boolean).join(" ");
+            if (!full_name)
+                continue;
+            out.push({
+                full_name,
+                job_title: c.jobTitle ?? c.role ?? null,
+                email: c.email ?? c.emailAddress ?? null,
+                phone: c.phone ?? c.phoneNumber ?? null,
+                source_label: label,
+            });
+        }
+    }
+    return out;
+}
+function collectLocations(sources, providerMap) {
+    const out = [];
+    for (const s of sources) {
+        const label = providerMap.get(s.provider)?.label ?? s.provider;
+        const raw = s.raw ?? {};
+        const rawLocs = Array.isArray(raw.deliveryLocations)
+            ? raw.deliveryLocations
+            : Array.isArray(raw.locations) ? raw.locations : [];
+        if (rawLocs.length > 0) {
+            for (const l of rawLocs) {
+                out.push({
+                    name: l.name ?? null,
+                    address_line: [l.street, l.houseNumber].filter(Boolean).join(" ") || l.addressLine || null,
+                    city: l.city ?? null,
+                    postal_code: l.postalCode ?? l.zipCode ?? null,
+                    country: l.country ?? l.countryCode ?? null,
+                    gln: l.gln ?? null,
+                    source_label: label,
+                });
+            }
+        }
+        else if (s.street || s.city || s.postal_code) {
+            out.push({
+                name: null,
+                address_line: [s.street, s.house_number].filter(Boolean).join(" ") || null,
+                city: s.city,
+                postal_code: s.postal_code,
+                country: s.country,
+                gln: s.gln,
+                source_label: label,
+            });
+        }
+    }
+    return out;
+}
+function collectArray(sources, keys) {
+    const set = new Set();
+    for (const s of sources) {
+        for (const key of keys) {
+            const v = s.raw?.[key];
+            if (Array.isArray(v))
+                for (const x of v)
+                    if (x)
+                        set.add(String(x));
+        }
+    }
+    return Array.from(set);
+}
+function CompareCard({ sources, providerMap, }) {
+    const fields = [
+        { key: "company_name", label: "Bedrijfsnaam" },
+        { key: "commercial_name", label: "Handelsnaam" },
+        { key: "contact_person", label: "Contactpersoon" },
+        { key: "email", label: "E-mail" },
+        { key: "phone", label: "Telefoon" },
+        { key: "street", label: "Straat" },
+        { key: "postal_code", label: "Postcode" },
+        { key: "city", label: "Plaats" },
+        { key: "country", label: "Land" },
+        { key: "website", label: "Website" },
+        { key: "vat_number", label: "BTW" },
+        { key: "gln", label: "GLN" },
+    ];
+    return (_jsx(Card, { children: _jsx(CardContent, { className: "pt-6 overflow-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b", children: [_jsx("th", { className: "text-left py-2 pr-3 text-xs font-medium uppercase text-muted-foreground", children: "Veld" }), sources.map((s) => (_jsx("th", { className: "text-left py-2 px-3 text-xs font-medium", children: providerMap.get(s.provider)?.label ?? s.provider }, s.provider)))] }) }), _jsx("tbody", { children: fields.map((f) => {
+                            const values = sources.map((s) => s[f.key] ?? null);
+                            const firstNonEmpty = values.find((v) => v != null && v !== "");
+                            return (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "py-2 pr-3 text-muted-foreground align-top", children: f.label }), values.map((v, i) => {
+                                        const differs = v != null && v !== "" && firstNonEmpty != null && v !== firstNonEmpty;
+                                        return (_jsx("td", { className: `py-2 px-3 align-top ${differs ? "bg-muted/40 rounded" : ""}`, children: v && v !== "" ? v : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }, i));
+                                    })] }, String(f.key)));
+                        }) })] }) }) }));
+}

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

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

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

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

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

@@ -0,0 +1,43 @@
+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 { useServerFn } from "@tanstack/react-start";
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle, Badge, Button, toast, Tabs, TabsContent, TabsList, TabsTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@flowselections/core";
+import { ArrowLeft, Trash2, Mail, Phone, Power, } from "lucide-react";
+import { getCustomer, deleteCustomer, updateCustomer } from "../../lib/customers.functions";
+import { ProfileCard, KpiStrip, BadgeList, EmptyState, ActivityItem, adaptLocalToProfile, } from "../../components/klanten/KlantDetailLayout";
+import { DeliveryLocationsTab } from "../../components/klanten/DeliveryLocationsTab";
+import { CustomerAnalyticsTab } from "../../components/klanten/CustomerAnalyticsTab";
+export function KlantDetail({ id }) {
+    const navigate = useNavigate();
+    const qc = useQueryClient();
+    const get = useServerFn(getCustomer);
+    const del = useServerFn(deleteCustomer);
+    const upd = useServerFn(updateCustomer);
+    const [tab, setTab] = useState("overview");
+    const { data, isLoading } = useQuery({
+        queryKey: ["customer", id],
+        queryFn: () => get({ data: { id } }),
+    });
+    const delMut = useMutation({
+        mutationFn: () => del({ data: { id } }),
+        onSuccess: () => { toast.success("Verwijderd"); navigate({ to: "/klanten" }); },
+    });
+    const toggleActive = useMutation({
+        mutationFn: (active) => upd({ data: { id, is_active: active } }),
+        onSuccess: () => qc.invalidateQueries({ queryKey: ["customer", id] }),
+    });
+    if (isLoading)
+        return _jsx("main", { className: "p-6", children: "Laden..." });
+    if (!data)
+        return _jsx("main", { className: "p-6", children: "Klant niet gevonden" });
+    const c = data.customer;
+    return (_jsxs("main", { className: "p-6 max-w-7xl mx-auto space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate({ to: "/klanten" }), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), " Terug naar klanten"] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => toggleActive.mutate(!c.is_active), children: [_jsx(Power, { className: "h-4 w-4 mr-2" }), c.is_active ? "Op inactief zetten" : "Activeren"] }), _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Trash2, { className: "h-4 w-4 mr-2" }), " Verwijderen"] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Klant verwijderen?" }), _jsxs(AlertDialogDescription, { children: ["Weet je zeker dat je ", _jsx("strong", { children: c.company_name }), " wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: () => delMut.mutate(), children: "Verwijderen" })] })] })] })] })] }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-[340px_1fr]", children: [_jsx(ProfileCard, { profile: adaptLocalToProfile(c, data.contacts) }), _jsxs("div", { className: "space-y-4 min-w-0", children: [_jsx(KpiStrip, { counts: {
+                                    contacts: data.contacts.length,
+                                    locations: data.delivery_locations.length,
+                                    assortment: data.assortment.length,
+                                    orders: data.orders.length,
+                                    lastSync: c.last_synced_at,
+                                }, onSelect: setTab }), _jsxs(Tabs, { value: tab, onValueChange: setTab, children: [_jsxs(TabsList, { className: "flex flex-wrap h-auto gap-1 mb-4", children: [_jsx(TabsTrigger, { value: "overview", children: "Overzicht" }), _jsx(TabsTrigger, { value: "dashboard", children: "Analyses" }), _jsxs(TabsTrigger, { value: "contacts", children: ["Contacten (", data.contacts.length, ")"] }), _jsxs(TabsTrigger, { value: "locations", children: ["Locaties (", data.delivery_locations.length, ")"] }), _jsxs(TabsTrigger, { value: "assortment", children: ["Assortiment (", data.assortment.length, ")"] }), _jsxs(TabsTrigger, { value: "orders", children: ["Bestellingen (", data.orders.length, ")"] }), _jsx(TabsTrigger, { value: "trade", children: "Handel" }), _jsx(TabsTrigger, { value: "activity", children: "Activiteit" })] }), _jsxs(TabsContent, { value: "overview", className: "space-y-4", children: [c.bio && (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Bio" }) }), _jsx(CardContent, { className: "text-sm whitespace-pre-wrap", children: c.bio })] })), (c.segments?.length || c.trade_forms?.length || c.markets?.length || c.product_groups?.length) ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Profiel" }) }), _jsxs(CardContent, { className: "grid gap-4 md:grid-cols-2", children: [_jsx(BadgeList, { label: "Segmenten", items: c.segments }), _jsx(BadgeList, { label: "Handelsvorm", items: c.trade_forms }), _jsx(BadgeList, { label: "Afzetmarkten", items: c.markets }), _jsx(BadgeList, { label: "Productgroepen", items: c.product_groups })] })] })) : null, (c.payment_methods?.length ?? 0) > 0 && (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Financi\u00EBle afhandeling" }) }), _jsx(CardContent, { children: _jsx(BadgeList, { label: "Betaalmethoden", items: c.payment_methods }) })] })), c.notes && (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Notities" }) }), _jsx(CardContent, { className: "text-sm whitespace-pre-wrap", children: c.notes })] })), !c.bio && !c.notes && !(c.segments?.length || c.trade_forms?.length || c.markets?.length || c.product_groups?.length) && !(c.payment_methods?.length) && (_jsx(EmptyState, { message: "Geen extra profielinformatie beschikbaar voor deze klant." }))] }), _jsx(TabsContent, { value: "contacts", children: data.contacts.length === 0 ? (_jsx(EmptyState, { message: "Geen contactpersonen gesynchroniseerd." })) : (_jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: data.contacts.map((p) => (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-6 space-y-2", children: [_jsx("div", { className: "font-semibold", children: p.full_name }), p.job_title && _jsx("div", { className: "text-sm text-muted-foreground", children: p.job_title }), p.phone && (_jsxs("a", { href: `tel:${p.phone}`, className: "text-sm flex items-center gap-2 hover:underline", children: [_jsx(Phone, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", p.phone] })), p.email && (_jsxs("a", { href: `mailto:${p.email}`, className: "text-sm flex items-center gap-2 hover:underline", children: [_jsx(Mail, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", p.email] })), p.is_active ? _jsx(Badge, { children: "Actief" }) : _jsx(Badge, { variant: "secondary", children: "Inactief" })] }) }, p.id))) })) }), _jsx(TabsContent, { value: "trade", children: data.trade_settings.length === 0 ? (_jsx(EmptyState, { message: "Handelsinstellingen zijn (nog) niet beschikbaar via de Suppliers API voor deze klant." })) : (_jsx(Card, { children: _jsx(CardContent, { className: "pt-6 space-y-2", children: data.trade_settings.map((s) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Badge, { variant: s.is_active ? "default" : "secondary", children: s.is_active ? "Actief" : "Niet actief" }), _jsx("span", { className: "text-sm", children: s.setting_label })] }, s.id))) }) })) }), _jsx(TabsContent, { value: "locations", children: _jsx(DeliveryLocationsTab, { customerId: id }) }), _jsx(TabsContent, { value: "dashboard", children: _jsx(CustomerAnalyticsTab, { customerId: id }) }), _jsx(TabsContent, { value: "assortment", children: data.assortment.length === 0 ? (_jsx(EmptyState, { message: "Geen geselecteerd assortiment voor deze klant." })) : (_jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Artikelnummer" }), _jsx(TableHead, { children: "Product" }), _jsx(TableHead, { children: "Groep" }), _jsx(TableHead, { children: "Prijs" })] }) }), _jsx(TableBody, { children: data.assortment.map((a) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-mono text-xs", children: a.article_number || "—" }), _jsx(TableCell, { children: a.product_name }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: a.product_group || "—" }), _jsx(TableCell, { children: a.price != null ? `€ ${Number(a.price).toFixed(2)}${a.unit ? ` / ${a.unit}` : ""}` : "—" })] }, a.id))) })] }) }) })) }), _jsx(TabsContent, { value: "orders", children: _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Ordernummer" }), _jsx(TableHead, { children: "Datum" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Totaal" })] }) }), _jsx(TableBody, { children: data.orders.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 4, className: "text-center py-6 text-muted-foreground", children: "Geen bestellingen" }) })) : data.orders.map((o) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: o.order_number }), _jsx(TableCell, { children: o.order_date }), _jsx(TableCell, { children: _jsx(Badge, { children: o.status }) }), _jsx(TableCell, { children: o.total })] }, o.id))) })] }) }) }) }), _jsx(TabsContent, { value: "activity", children: _jsx(Card, { children: _jsx(CardContent, { className: "pt-6 space-y-2", children: data.audit.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen activiteit voor deze klant." })) : (data.audit.map((a) => _jsx(ActivityItem, { entry: a }, a.id))) }) }) })] })] })] })] }));
+}

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