@flowselections/floriday-klanten-module 1.0.2 → 1.0.4

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

@@ -0,0 +1,2 @@
+export declare function KlantenOverzicht(): import("react").JSX.Element;
+//# sourceMappingURL=KlantenOverzicht.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KlantenOverzicht.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/KlantenOverzicht.tsx"],"names":[],"mappings":"AAiBA,wBAAgB,gBAAgB,gCAmT/B"}

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

@@ -0,0 +1,153 @@
+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 { useEffect, useMemo, useRef, useState } from "react";
+import { Button, Input, Card, CardContent, Badge, toast, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsList, TabsTrigger, Skeleton, } from "@flowselections/core";
+import { Plus, RefreshCw, Search, Network, Users, UserCheck, UserX, Cloud, HardDrive, Clock, X, ArrowUpDown, Mail, MapPin, } from "lucide-react";
+import { listCustomers, syncFloridayCustomers, listCustomerClasses } from "../../lib/customers.functions";
+import { CustomerAvatar } from "../CustomerAvatar";
+export function KlantenOverzicht() {
+    const navigate = useNavigate();
+    const qc = useQueryClient();
+    const [search, setSearch] = useState("");
+    const [customerClass, setCustomerClass] = useState("__all__");
+    const [country, setCountry] = useState("__all__");
+    const [view, setView] = useState("all");
+    const [sort, setSort] = useState({ col: "company_name", dir: "asc" });
+    const list = useServerFn(listCustomers);
+    const sync = useServerFn(syncFloridayCustomers);
+    const classesFn = useServerFn(listCustomerClasses);
+    const activeFilter = view === "active" ? "active" : view === "inactive" ? "inactive" : "all";
+    const source = view === "floriday" ? "floriday" : view === "local" ? "local" : "all";
+    const { data: classData } = useQuery({
+        queryKey: ["customer-classes"],
+        queryFn: () => classesFn({ data: undefined }),
+    });
+    const { data: totalsData } = useQuery({
+        queryKey: ["customers", "totals"],
+        queryFn: () => list({
+            data: { search: "", customer_class: "", country: "", is_active: "all", source: "all" },
+        }),
+    });
+    const { data, isLoading } = useQuery({
+        queryKey: ["customers", { search, customerClass, activeFilter, source }],
+        queryFn: () => list({
+            data: {
+                search,
+                customer_class: customerClass === "__all__" ? "" : customerClass,
+                country: "",
+                is_active: activeFilter,
+                source,
+            },
+        }),
+    });
+    const syncMut = useMutation({
+        mutationFn: (_variables) => sync({ data: undefined }),
+        onSuccess: (r, variables) => {
+            const showToast = variables?.showToast ?? true;
+            if (showToast) {
+                if (r.errors.length) {
+                    const firstError = r.errors[0]?.message ?? "Onbekende Floriday-fout";
+                    toast.error(r.errors.length === 1 ? firstError : `${r.errors.length} fouten bij sync. Eerste fout: ${firstError}`);
+                }
+                else {
+                    toast.success(`Floriday gesynchroniseerd (${r.synced} klanten)`);
+                }
+            }
+            qc.invalidateQueries({ queryKey: ["customers"] });
+        },
+        onError: (e, variables) => {
+            if (variables?.showToast ?? true)
+                toast.error(e instanceof Error ? e.message : "Sync mislukt");
+        },
+    });
+    const autoSyncedRef = useRef(false);
+    useEffect(() => {
+        if (autoSyncedRef.current)
+            return;
+        autoSyncedRef.current = true;
+        syncMut.mutate({ showToast: false });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const all = totalsData?.customers ?? [];
+    const totals = useMemo(() => ({
+        all: all.length,
+        active: all.filter((c) => c.is_active).length,
+        inactive: all.filter((c) => !c.is_active).length,
+        floriday: all.filter((c) => c.source === "floriday").length,
+        local: all.filter((c) => c.source === "local").length,
+        lastSync: all.reduce((acc, c) => {
+            if (!c.last_synced_at)
+                return acc;
+            if (!acc || new Date(c.last_synced_at) > new Date(acc))
+                return c.last_synced_at;
+            return acc;
+        }, null),
+    }), [all]);
+    const countries = useMemo(() => {
+        const set = new Set();
+        all.forEach((c) => { if (c.country)
+            set.add(c.country); });
+        return Array.from(set).sort();
+    }, [all]);
+    const baseCustomers = data?.customers ?? [];
+    const customers = useMemo(() => {
+        let rows = baseCustomers;
+        if (country !== "__all__")
+            rows = rows.filter((c) => c.country === country);
+        const sorted = [...rows].sort((a, b) => {
+            const av = (a[sort.col] ?? "").toString().toLowerCase();
+            const bv = (b[sort.col] ?? "").toString().toLowerCase();
+            const cmp = av.localeCompare(bv);
+            return sort.dir === "asc" ? cmp : -cmp;
+        });
+        return sorted;
+    }, [baseCustomers, country, sort]);
+    const activeFilterChips = [];
+    if (search)
+        activeFilterChips.push({ key: "s", label: `Zoek: "${search}"`, clear: () => setSearch("") });
+    if (customerClass !== "__all__")
+        activeFilterChips.push({ key: "c", label: `Klasse: ${customerClass}`, clear: () => setCustomerClass("__all__") });
+    if (country !== "__all__")
+        activeFilterChips.push({ key: "co", label: `Land: ${country}`, clear: () => setCountry("__all__") });
+    const toggleSort = (col) => setSort((s) => (s.col === col ? { col, dir: s.dir === "asc" ? "desc" : "asc" } : { col, dir: "asc" }));
+    return (_jsxs("main", { className: "p-6 space-y-5 max-w-[1400px] mx-auto", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Klanten" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Beheer je relaties en synchroniseer ze met Floriday." })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => navigate({ to: "/klanten/netwerk" }), children: [_jsx(Network, { className: "h-4 w-4 mr-2" }), " Floriday-netwerk"] }), _jsxs(Button, { variant: "outline", onClick: () => syncMut.mutate({ showToast: true }), disabled: syncMut.isPending, children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${syncMut.isPending ? "animate-spin" : ""}` }), "Synchroniseer"] }), _jsxs(Button, { onClick: () => navigate({ to: "/klanten/nieuw" }), children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), " Nieuwe klant"] })] })] }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-3", children: [_jsx(StatCard, { icon: _jsx(Users, { className: "h-4 w-4" }), label: "Totaal", value: totals.all, active: view === "all", onClick: () => setView("all") }), _jsx(StatCard, { icon: _jsx(UserCheck, { className: "h-4 w-4" }), label: "Actief", value: totals.active, active: view === "active", onClick: () => setView("active") }), _jsx(StatCard, { icon: _jsx(UserX, { className: "h-4 w-4" }), label: "Inactief", value: totals.inactive, active: view === "inactive", onClick: () => setView("inactive") }), _jsx(StatCard, { icon: _jsx(Cloud, { className: "h-4 w-4" }), label: "Floriday", value: totals.floriday, active: view === "floriday", onClick: () => setView("floriday") }), _jsx(StatCard, { icon: _jsx(HardDrive, { className: "h-4 w-4" }), label: "Lokaal", value: totals.local, active: view === "local", onClick: () => setView("local") })] }), _jsx(Tabs, { value: view, onValueChange: (v) => setView(v), children: _jsxs(TabsList, { className: "flex-wrap", children: [_jsxs(TabsTrigger, { value: "all", children: ["Alle (", totals.all, ")"] }), _jsxs(TabsTrigger, { value: "active", children: ["Actief (", totals.active, ")"] }), _jsxs(TabsTrigger, { value: "inactive", children: ["Inactief (", totals.inactive, ")"] }), _jsxs(TabsTrigger, { value: "floriday", children: ["Floriday (", totals.floriday, ")"] }), _jsxs(TabsTrigger, { value: "local", children: ["Lokaal (", totals.local, ")"] })] }) }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs("div", { className: "relative flex-1 min-w-[240px] max-w-md", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoek op bedrijf, contactpersoon of e-mail...", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9" })] }), _jsxs(Select, { value: customerClass, onValueChange: setCustomerClass, children: [_jsx(SelectTrigger, { className: "w-40", children: _jsx(SelectValue, { placeholder: "Klasse" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "Alle klassen" }), (classData?.classes ?? []).map((c) => (_jsx(SelectItem, { value: c, children: c }, c)))] })] }), _jsxs(Select, { value: country, onValueChange: setCountry, children: [_jsx(SelectTrigger, { className: "w-36", children: _jsx(SelectValue, { placeholder: "Land" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "Alle landen" }), countries.map((c) => (_jsx(SelectItem, { value: c, children: c }, c)))] })] }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(Clock, { className: "h-3.5 w-3.5" }), "Laatste sync: ", totals.lastSync ? relativeTime(totals.lastSync) : "nog niet"] })] }), activeFilterChips.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [activeFilterChips.map((chip) => (_jsxs("button", { type: "button", onClick: chip.clear, className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-muted/50 px-3 py-1 text-xs hover:bg-muted", children: [chip.label, " ", _jsx(X, { className: "h-3 w-3" })] }, chip.key))), _jsx("button", { type: "button", onClick: () => { setSearch(""); setCustomerClass("__all__"); setCountry("__all__"); }, className: "text-xs text-muted-foreground hover:text-foreground underline", children: "Alles wissen" })] })), _jsx("div", { className: "text-sm text-muted-foreground", children: isLoading ? "Laden..." : `${customers.length} ${customers.length === 1 ? "klant" : "klanten"} gevonden` }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(SortHeader, { label: "Bedrijf", col: "company_name", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: "Contact" }), _jsx(TableHead, { children: _jsx(SortHeader, { label: "Klasse", col: "customer_class", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: "Land", col: "country", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: "Bron" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: isLoading ? (Array.from({ length: 6 }).map((_, i) => (_jsx(TableRow, { children: Array.from({ length: 6 }).map((__, j) => (_jsx(TableCell, { className: "py-4", children: _jsx(Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, j))) }, i)))) : customers.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, children: _jsx(EmptyState, { onSync: () => syncMut.mutate({ showToast: true }), onAdd: () => navigate({ to: "/klanten/nieuw" }) }) }) })) : customers.map((c) => {
+                                    const secondary = c.commercial_name && c.commercial_name !== c.company_name
+                                        ? c.commercial_name
+                                        : c.city ?? c.email ?? null;
+                                    return (_jsxs(TableRow, { className: "cursor-pointer hover:bg-muted/50", onClick: () => navigate({ to: "/klanten/$id", params: { id: c.id } }), children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(CustomerAvatar, { logoUrl: c.logo_url, name: c.company_name, size: "sm" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium truncate", children: c.company_name }), secondary && _jsx("div", { className: "text-xs text-muted-foreground truncate", children: secondary })] })] }) }), _jsx(TableCell, { className: "py-3", children: c.contact_person || c.email ? (_jsxs("div", { className: "min-w-0", children: [c.contact_person && _jsx("div", { className: "text-sm truncate", children: c.contact_person }), c.email && (_jsxs("a", { href: `mailto:${c.email}`, onClick: (e) => e.stopPropagation(), className: "text-xs text-muted-foreground inline-flex items-center gap-1 hover:underline truncate", children: [_jsx(Mail, { className: "h-3 w-3" }), " ", c.email] }))] })) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3", children: c.customer_class ? _jsx(Badge, { variant: "secondary", children: c.customer_class }) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3 text-sm", children: c.country ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(MapPin, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", c.country] })) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3", children: _jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs", children: [c.source === "floriday" ? _jsx(Cloud, { className: "h-3.5 w-3.5 text-muted-foreground" }) : _jsx(HardDrive, { className: "h-3.5 w-3.5 text-muted-foreground" }), c.source === "floriday" ? "Floriday" : "Lokaal"] }) }), _jsx(TableCell, { className: "py-3", children: _jsx(StatusPill, { active: c.is_active }) })] }, c.id));
+                                }) })] }) }) })] }));
+}
+function StatCard({ icon, label, value, active, onClick, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: `rounded-lg border bg-card p-4 text-left transition-all hover:shadow-sm ${active ? "border-primary ring-1 ring-primary/30" : "border-border"}`, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [icon, " ", label] }), _jsx("div", { className: "mt-1 text-2xl font-bold", children: value })] }));
+}
+function SortHeader({ label, col, sort, onClick, }) {
+    const isActive = sort.col === col;
+    return (_jsxs("button", { type: "button", onClick: () => onClick(col), className: `inline-flex items-center gap-1 hover:text-foreground ${isActive ? "text-foreground" : ""}`, children: [label, _jsx(ArrowUpDown, { className: "h-3 w-3 opacity-60" })] }));
+}
+function StatusPill({ active }) {
+    return (_jsxs("span", { className: `inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${active
+            ? "bg-primary/10 text-primary"
+            : "bg-muted text-muted-foreground"}`, children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${active ? "bg-primary" : "bg-muted-foreground"}` }), active ? "Actief" : "Inactief"] }));
+}
+function EmptyState({ onSync, onAdd }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center gap-3", children: [_jsx("div", { className: "h-12 w-12 rounded-full bg-muted flex items-center justify-center", children: _jsx(Users, { className: "h-6 w-6 text-muted-foreground" }) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Geen klanten gevonden" }), _jsx("div", { className: "text-sm text-muted-foreground mt-0.5", children: "Pas je filters aan, synchroniseer met Floriday of voeg er handmatig \u00E9\u00E9n toe." })] }), _jsxs("div", { className: "flex gap-2 mt-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: onSync, children: [_jsx(RefreshCw, { className: "h-4 w-4 mr-2" }), " Synchroniseer Floriday"] }), _jsxs(Button, { size: "sm", onClick: onAdd, children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), " Nieuwe klant"] })] })] }));
+}
+function relativeTime(iso) {
+    const d = new Date(iso);
+    const diff = Date.now() - d.getTime();
+    const sec = Math.floor(diff / 1000);
+    if (sec < 60)
+        return "zojuist";
+    const min = Math.floor(sec / 60);
+    if (min < 60)
+        return `${min} min geleden`;
+    const hr = Math.floor(min / 60);
+    if (hr < 24)
+        return `${hr} uur geleden`;
+    const day = Math.floor(hr / 24);
+    if (day < 7)
+        return `${day} dag${day === 1 ? "" : "en"} geleden`;
+    return d.toLocaleDateString("nl-NL");
+}

package/dist-lib/index.d.ts

@@ -1,5 +1,5 @@
 import type { FlowModule } from "@flowselections/core";
 export * from "./_core-safelist";
-export * from "./components/TemplatePage";
+export { KlantenOverzicht } from "./components/klanten/KlantenOverzicht";
 export declare const myModule: FlowModule;
 //# sourceMappingURL=index.d.ts.map

package/dist-lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAE1C,eAAO,MAAM,QAAQ,EAAE,UAYtB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAEzE,eAAO,MAAM,QAAQ,EAAE,UAYtB,CAAC"}

package/dist-lib/index.js

@@ -16,14 +16,14 @@
 import { Users } from "lucide-react";
 import { CustomerFieldsCard } from "./components/settings/CustomerFieldsCard";
 export * from "./_core-safelist";
-export * from "./components/TemplatePage";
+export { KlantenOverzicht } from "./components/klanten/KlantenOverzicht";
 export const myModule = {
     id: "customers",
     name: "Klanten",
     version: "1.0.0",
     nav: {
         label: "Klanten",
-        href: "/klanten",
+        href: "/floriday-klanten",
         icon: Users,
     },
     settingsCards: [

package/dist-lib/lib/customer-schemas.d.ts

@@ -45,8 +45,8 @@ export declare const listFiltersSchema: z.ZodObject<{
     }>>>;
     source: z.ZodDefault<z.ZodOptional<z.ZodEnum<{
         local: "local";
-        floriday: "floriday";
         all: "all";
+        floriday: "floriday";
     }>>>;
 }, z.core.$strip>;
 export type ListFiltersInput = z.infer<typeof listFiltersSchema>;

package/dist-lib/lib/customers.functions.d.ts

@@ -1561,7 +1561,7 @@ export declare const listCustomers: import("@tanstack/start-client-core").Requir
     customer_class: string;
     country: string;
     is_active: "active" | "all" | "inactive";
-    source: "local" | "floriday" | "all";
+    source: "local" | "all" | "floriday";
 }, Promise<{
     customers: {
         address: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowselections/floriday-klanten-module",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "private": false,
   "sideEffects": false,
   "type": "module",