@flowselections/floriday-klanten-module 1.0.8 → 1.0.10

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

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

@@ -3,18 +3,19 @@ import { useNavigate } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 import { useMemo, useState } from "react";
-import { Button, Input, Card, CardContent, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsList, TabsTrigger, Skeleton, } from "@flowselections/core";
-import { Plus, Search, Network, Users, UserCheck, UserX, Cloud, HardDrive, X, ArrowUpDown, Mail, MapPin, } from "lucide-react";
+import { Button, Input, Card, CardContent, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsList, TabsTrigger, Skeleton, Switch, Label, } from "@flowselections/core";
+import { Plus, Search, Network, Users, UserCheck, X, ArrowUpDown, Mail, MapPin, } from "lucide-react";
 import { listCustomers, listCustomerClasses } from "../../lib/customers.functions";
 import { listExternalCustomers } from "../../lib/external-customers.functions";
 import { CustomerAvatar } from "../CustomerAvatar";
-import { ExternalCacheBanner } from "./ExternalCacheBanner";
+import { formatCountry } from "./KlantDetailLayout";
 export function KlantenOverzicht() {
     const navigate = useNavigate();
     const [search, setSearch] = useState("");
     const [customerClass, setCustomerClass] = useState("__all__");
     const [country, setCountry] = useState("__all__");
     const [view, setView] = useState("all");
+    const [showInactive, setShowInactive] = useState(false);
     const [sort, setSort] = useState({ col: "company_name", dir: "asc" });
     const list = useServerFn(listCustomers);
     const listExternal = useServerFn(listExternalCustomers);
@@ -35,22 +36,13 @@ export function KlantenOverzicht() {
     });
     const isLoading = loadingLocal || loadingExternal;
     const providers = externalData?.providers ?? [];
-    const providerLabel = useMemo(() => {
-        const m = new Map();
-        for (const p of providers)
-            m.set(p.provider, p.label);
-        return m;
-    }, [providers]);
     const allRows = useMemo(() => {
         const local = (localData?.customers ?? []).map((c) => ({
             key: `local-${c.id}`,
             id: c.id,
             group_key: null,
             source: "local",
-            source_label: "Lokaal",
             providers: [],
-            provider_labels: [],
-            source_count: 1,
             company_name: c.company_name,
             commercial_name: c.commercial_name ?? null,
             contact_person: c.contact_person ?? null,
@@ -63,16 +55,12 @@ export function KlantenOverzicht() {
         }));
         const ext = (externalData?.customers ?? []).map((c) => {
             const provs = c.providers ?? [];
-            const labels = provs.map((p) => providerLabel.get(p) ?? p);
             return {
                 key: `grp-${c.group_key}`,
                 id: null,
                 group_key: c.group_key,
                 source: provs[0] ?? "external",
-                source_label: labels[0] ?? "Extern",
                 providers: provs,
-                provider_labels: labels,
-                source_count: c.source_count ?? provs.length,
                 company_name: c.display_name,
                 commercial_name: c.commercial_name,
                 contact_person: c.contact_person,
@@ -85,19 +73,14 @@ export function KlantenOverzicht() {
             };
         });
         return [...local, ...ext];
-    }, [localData, externalData, providerLabel]);
+    }, [localData, externalData]);
     const totals = useMemo(() => {
         const t = {
             all: allRows.length,
             active: allRows.filter((c) => c.is_active).length,
-            inactive: allRows.filter((c) => !c.is_active).length,
-            local: allRows.filter((c) => c.source === "local").length,
         };
-        for (const p of providers) {
-            t[p.provider] = allRows.filter((c) => c.providers.includes(p.provider)).length;
-        }
         return t;
-    }, [allRows, providers]);
+    }, [allRows]);
     const countries = useMemo(() => {
         const set = new Set();
         allRows.forEach((c) => { if (c.country)
@@ -108,12 +91,8 @@ export function KlantenOverzicht() {
         let rows = allRows;
         if (view === "active")
             rows = rows.filter((c) => c.is_active);
-        else if (view === "inactive")
-            rows = rows.filter((c) => !c.is_active);
-        else if (view === "local")
-            rows = rows.filter((c) => c.source === "local");
-        else if (view !== "all")
-            rows = rows.filter((c) => c.providers.includes(view));
+        if (!showInactive && view !== "active")
+            rows = rows.filter((c) => c.is_active);
         if (customerClass !== "__all__")
             rows = rows.filter((c) => c.customer_class === customerClass);
         if (country !== "__all__")
@@ -130,7 +109,7 @@ export function KlantenOverzicht() {
             const cmp = av.localeCompare(bv);
             return sort.dir === "asc" ? cmp : -cmp;
         });
-    }, [allRows, view, customerClass, country, search, sort]);
+    }, [allRows, view, customerClass, country, search, sort, showInactive]);
     const activeFilterChips = [];
     if (search)
         activeFilterChips.push({ key: "s", label: `Zoek: "${search}"`, clear: () => setSearch("") });
@@ -139,7 +118,8 @@ export function KlantenOverzicht() {
     if (country !== "__all__")
         activeFilterChips.push({ key: "co", label: `Land: ${country}`, clear: () => setCountry("__all__") });
     const toggleSort = (col) => setSort((s) => (s.col === col ? { col, dir: s.dir === "asc" ? "desc" : "asc" } : { col, dir: "asc" }));
-    return (_jsxs("main", { className: "p-6 space-y-5 max-w-[1400px] mx-auto", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Klanten" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Beheer je lokale relaties en bekijk Floriday-klanten uit de cache." })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => navigate({ to: "/klanten/netwerk" }), children: [_jsx(Network, { className: "h-4 w-4 mr-2" }), " Floriday-netwerk"] }), _jsxs(Button, { onClick: () => navigate({ to: "/klanten/nieuw" }), children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), " Nieuwe klant"] })] })] }), _jsx(ExternalCacheBanner, { lastFetchedAt: externalData?.last_fetched_at ?? null, providers: providers }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-3", children: [_jsx(StatCard, { icon: _jsx(Users, { className: "h-4 w-4" }), label: "Totaal", value: totals.all ?? 0, active: view === "all", onClick: () => setView("all") }), _jsx(StatCard, { icon: _jsx(UserCheck, { className: "h-4 w-4" }), label: "Actief", value: totals.active ?? 0, active: view === "active", onClick: () => setView("active") }), _jsx(StatCard, { icon: _jsx(UserX, { className: "h-4 w-4" }), label: "Inactief", value: totals.inactive ?? 0, active: view === "inactive", onClick: () => setView("inactive") }), _jsx(StatCard, { icon: _jsx(HardDrive, { className: "h-4 w-4" }), label: "Lokaal", value: totals.local ?? 0, active: view === "local", onClick: () => setView("local") }), providers.filter((p) => p.is_enabled).map((p) => (_jsx(StatCard, { icon: _jsx(Cloud, { className: "h-4 w-4" }), label: p.label, value: totals[p.provider] ?? 0, active: view === p.provider, onClick: () => setView(p.provider) }, p.provider)))] }), _jsx(Tabs, { value: view, onValueChange: (v) => setView(v), children: _jsxs(TabsList, { className: "flex-wrap", children: [_jsxs(TabsTrigger, { value: "all", children: ["Alle (", totals.all ?? 0, ")"] }), _jsxs(TabsTrigger, { value: "active", children: ["Actief (", totals.active ?? 0, ")"] }), _jsxs(TabsTrigger, { value: "inactive", children: ["Inactief (", totals.inactive ?? 0, ")"] }), _jsxs(TabsTrigger, { value: "local", children: ["Lokaal (", totals.local ?? 0, ")"] }), providers.filter((p) => p.is_enabled).map((p) => (_jsxs(TabsTrigger, { value: p.provider, children: [p.label, " (", totals[p.provider] ?? 0, ")"] }, p.provider)))] }) }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs("div", { className: "relative flex-1 min-w-[240px] max-w-md", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoek op bedrijf, contactpersoon of e-mail...", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9" })] }), _jsxs(Select, { value: customerClass, onValueChange: setCustomerClass, children: [_jsx(SelectTrigger, { className: "w-40", children: _jsx(SelectValue, { placeholder: "Klasse" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "Alle klassen" }), (classData?.classes ?? []).map((c) => (_jsx(SelectItem, { value: c, children: c }, c)))] })] }), _jsxs(Select, { value: country, onValueChange: setCountry, children: [_jsx(SelectTrigger, { className: "w-36", children: _jsx(SelectValue, { placeholder: "Land" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "Alle landen" }), countries.map((c) => (_jsx(SelectItem, { value: c, children: c }, c)))] })] })] }), activeFilterChips.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [activeFilterChips.map((chip) => (_jsxs("button", { type: "button", onClick: chip.clear, className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-muted/50 px-3 py-1 text-xs hover:bg-muted", children: [chip.label, " ", _jsx(X, { className: "h-3 w-3" })] }, chip.key))), _jsx("button", { type: "button", onClick: () => { setSearch(""); setCustomerClass("__all__"); setCountry("__all__"); }, className: "text-xs text-muted-foreground hover:text-foreground underline", children: "Alles wissen" })] })), _jsx("div", { className: "text-sm text-muted-foreground", children: isLoading ? "Laden..." : `${customers.length} ${customers.length === 1 ? "klant" : "klanten"} gevonden` }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(SortHeader, { label: "Bedrijf", col: "company_name", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: "Contact" }), _jsx(TableHead, { children: _jsx(SortHeader, { label: "Klasse", col: "customer_class", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: "Land", col: "country", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: "Bron" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: isLoading ? (Array.from({ length: 6 }).map((_, i) => (_jsx(TableRow, { children: Array.from({ length: 6 }).map((__, j) => (_jsx(TableCell, { className: "py-4", children: _jsx(Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, j))) }, i)))) : customers.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, children: _jsx(EmptyState, { onAdd: () => navigate({ to: "/klanten/nieuw" }) }) }) })) : customers.map((c) => {
+    const lastUpdated = externalData?.last_fetched_at ?? null;
+    return (_jsxs("main", { className: "p-6 space-y-5 max-w-[1400px] mx-auto", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Klanten" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: ["Beheer en doorzoek al je klanten.", lastUpdated && (_jsxs("span", { className: "ml-2 text-xs", children: ["\u00B7 Bijgewerkt ", relativeTime(lastUpdated)] }))] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => navigate({ to: "/klanten/netwerk" }), children: [_jsx(Network, { className: "h-4 w-4 mr-2" }), " Klanten toevoegen uit netwerk"] }), _jsxs(Button, { onClick: () => navigate({ to: "/klanten/nieuw" }), children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), " Nieuwe klant"] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3 max-w-md", children: [_jsx(StatCard, { icon: _jsx(Users, { className: "h-4 w-4" }), label: "Totaal", value: totals.all ?? 0, active: view === "all", onClick: () => setView("all") }), _jsx(StatCard, { icon: _jsx(UserCheck, { className: "h-4 w-4" }), label: "Actief", value: totals.active ?? 0, active: view === "active", onClick: () => setView("active") })] }), _jsx(Tabs, { value: view, onValueChange: (v) => setView(v), children: _jsxs(TabsList, { className: "flex-wrap", children: [_jsxs(TabsTrigger, { value: "all", children: ["Alle (", totals.all ?? 0, ")"] }), _jsxs(TabsTrigger, { value: "active", children: ["Actief (", totals.active ?? 0, ")"] })] }) }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs("div", { className: "relative flex-1 min-w-[240px] max-w-md", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoek op bedrijf, contactpersoon of e-mail...", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9" })] }), _jsxs(Select, { value: customerClass, onValueChange: setCustomerClass, children: [_jsx(SelectTrigger, { className: "w-40", children: _jsx(SelectValue, { placeholder: "Klasse" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "Alle klassen" }), (classData?.classes ?? []).map((c) => (_jsx(SelectItem, { value: c, children: c }, c)))] })] }), _jsxs(Select, { value: country, onValueChange: setCountry, children: [_jsx(SelectTrigger, { className: "w-36", children: _jsx(SelectValue, { placeholder: "Land" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "Alle landen" }), countries.map((c) => (_jsx(SelectItem, { value: c, children: c }, c)))] })] }), _jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [_jsx(Switch, { id: "show-inactive", checked: showInactive, onCheckedChange: setShowInactive }), _jsx(Label, { htmlFor: "show-inactive", className: "text-sm cursor-pointer", children: "Toon inactieve klanten" })] })] }), activeFilterChips.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [activeFilterChips.map((chip) => (_jsxs("button", { type: "button", onClick: chip.clear, className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-muted/50 px-3 py-1 text-xs hover:bg-muted", children: [chip.label, " ", _jsx(X, { className: "h-3 w-3" })] }, chip.key))), _jsx("button", { type: "button", onClick: () => { setSearch(""); setCustomerClass("__all__"); setCountry("__all__"); }, className: "text-xs text-muted-foreground hover:text-foreground underline", children: "Alles wissen" })] })), _jsx("div", { className: "text-sm text-muted-foreground", children: isLoading ? "Laden..." : `${customers.length} ${customers.length === 1 ? "klant" : "klanten"} gevonden` }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(SortHeader, { label: "Bedrijf", col: "company_name", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: "Contact" }), _jsx(TableHead, { children: _jsx(SortHeader, { label: "Klasse", col: "customer_class", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: "Land", col: "country", sort: sort, onClick: toggleSort }) }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: isLoading ? (Array.from({ length: 6 }).map((_, i) => (_jsx(TableRow, { children: Array.from({ length: 5 }).map((__, j) => (_jsx(TableCell, { className: "py-4", children: _jsx(Skeleton, { className: "h-4 w-full max-w-[160px]" }) }, j))) }, i)))) : customers.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, children: _jsx(EmptyState, { onAdd: () => navigate({ to: "/klanten/nieuw" }) }) }) })) : customers.map((c) => {
                                     const secondary = c.commercial_name && c.commercial_name !== c.company_name
                                         ? c.commercial_name
                                         : c.city ?? c.email ?? null;
@@ -148,7 +128,7 @@ export function KlantenOverzicht() {
                                             : navigate({
                                                 to: "/klanten/groep/$groupKey",
                                                 params: { groupKey: c.group_key },
-                                            }), children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(CustomerAvatar, { logoUrl: c.logo_url, name: c.company_name, size: "sm" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium truncate", children: c.company_name }), secondary && _jsx("div", { className: "text-xs text-muted-foreground truncate", children: secondary })] })] }) }), _jsx(TableCell, { className: "py-3", children: c.contact_person || c.email ? (_jsxs("div", { className: "min-w-0", children: [c.contact_person && _jsx("div", { className: "text-sm truncate", children: c.contact_person }), c.email && (_jsxs("a", { href: `mailto:${c.email}`, onClick: (e) => e.stopPropagation(), className: "text-xs text-muted-foreground inline-flex items-center gap-1 hover:underline truncate", children: [_jsx(Mail, { className: "h-3 w-3" }), " ", c.email] }))] })) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3", children: c.customer_class ? _jsx(Badge, { variant: "secondary", children: c.customer_class }) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3 text-sm", children: c.country ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(MapPin, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", c.country] })) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3", children: c.source === "local" ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs", children: [_jsx(HardDrive, { className: "h-3.5 w-3.5 text-muted-foreground" }), c.source_label] })) : (_jsx("div", { className: "flex flex-wrap gap-1", children: c.provider_labels.map((lbl) => (_jsxs(Badge, { variant: "outline", className: "text-[10px] font-normal", children: [_jsx(Cloud, { className: "h-3 w-3 mr-1" }), lbl] }, lbl))) })) }), _jsx(TableCell, { className: "py-3", children: _jsx(StatusPill, { active: c.is_active }) })] }, c.key));
+                                            }), children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(CustomerAvatar, { logoUrl: c.logo_url, name: c.company_name, size: "sm" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium truncate", children: c.company_name }), secondary && _jsx("div", { className: "text-xs text-muted-foreground truncate", children: secondary })] })] }) }), _jsx(TableCell, { className: "py-3", children: c.contact_person || c.email ? (_jsxs("div", { className: "min-w-0", children: [c.contact_person && _jsx("div", { className: "text-sm truncate", children: c.contact_person }), c.email && (_jsxs("a", { href: `mailto:${c.email}`, onClick: (e) => e.stopPropagation(), className: "text-xs text-muted-foreground inline-flex items-center gap-1 hover:underline truncate", children: [_jsx(Mail, { className: "h-3 w-3" }), " ", c.email] }))] })) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3", children: c.customer_class ? _jsx(Badge, { variant: "secondary", children: c.customer_class }) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3 text-sm", children: c.country ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(MapPin, { className: "h-3.5 w-3.5 text-muted-foreground" }), " ", formatCountry(c.country)] })) : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "py-3", children: _jsx(StatusPill, { active: c.is_active }) })] }, c.key));
                                 }) })] }) }) })] }));
 }
 function StatCard({ icon, label, value, active, onClick, }) {

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetwerkPagina.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/NetwerkPagina.tsx"],"names":[],"mappings":"AAqBA,wBAAgB,aAAa,gCAyH5B"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { useState } from "react";
+import { Input, Card, CardContent, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Switch, Label, } from "@flowselections/core";
+import { ArrowLeft, Search } from "lucide-react";
+import { listFloridayNetwork } from "../../lib/customers.functions";
+export function NetwerkPagina() {
+    const [search, setSearch] = useState("");
+    const [hideUnknown, setHideUnknown] = useState(true);
+    const list = useServerFn(listFloridayNetwork);
+    const { data, isLoading } = useQuery({
+        queryKey: ["floriday-network", search],
+        queryFn: () => list({ data: { search } }),
+    });
+    const all = data?.organizations ?? [];
+    const orgs = hideUnknown
+        ? all.filter((o) => o.organization_name && o.organization_name.trim() !== "")
+        : all;
+    const hiddenCount = all.length - orgs.length;
+    return (_jsxs("main", { className: "p-6 space-y-4", children: [_jsx("div", { className: "flex items-center justify-between gap-4", children: _jsxs("div", { children: [_jsxs(Link, { to: "/klanten", className: "text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1", children: [_jsx(ArrowLeft, { className: "h-3 w-3" }), " Terug naar klanten"] }), _jsx("h1", { className: "text-2xl font-semibold mt-1", children: "Klanten toevoegen uit netwerk" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Doorzoek alle organisaties die via het netwerk beschikbaar zijn." })] }) }), _jsxs("div", { className: "relative 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 organisatienaam of GLN...", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9" })] }), _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Switch, { id: "hide-unknown", checked: hideUnknown, onCheckedChange: setHideUnknown }), _jsx(Label, { htmlFor: "hide-unknown", className: "cursor-pointer", children: "Verberg organisaties zonder naam" }), hideUnknown && hiddenCount > 0 ? (_jsxs("span", { className: "text-muted-foreground", children: ["(", hiddenCount, " verborgen)"] })) : null] }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Organisatie" }), _jsx(TableHead, { children: "GLN" }), _jsx(TableHead, { children: "Plaats" }), _jsx(TableHead, { children: "Land" }), _jsx(TableHead, { children: "Bijgewerkt" })] }) }), _jsx(TableBody, { children: isLoading ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "text-center py-8 text-muted-foreground", children: "Laden..." }) })) : orgs.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "text-center py-8 text-muted-foreground", children: "Geen organisaties gevonden." }) })) : (orgs.map((o) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: o.organization_name && o.organization_name.trim() !== "" ? (o.organization_name) : (_jsx("span", { className: "italic text-muted-foreground", children: "Onbekende organisatie" })) }), _jsx(TableCell, { children: o.gln ? (_jsx(Badge, { variant: "outline", children: o.gln })) : ("—") }), _jsx(TableCell, { children: o.city ?? "—" }), _jsx(TableCell, { children: o.country ?? "—" }), _jsx(TableCell, { className: "text-muted-foreground text-sm", children: new Date(o.fetched_at).toLocaleDateString("nl-NL") })] }, `${o.connection_id}-${o.organization_id}`)))) })] }) }) })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NieuweKlant.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/NieuweKlant.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,WAAW,gCA4H1B"}

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Textarea, toast, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@flowselections/core";
+import { ArrowLeft } from "lucide-react";
+import { createCustomer, listCustomerClasses } from "../../lib/customers.functions";
+import { customerCreateSchema } from "../../lib/customer-schemas";
+export function NieuweKlant() {
+    const navigate = useNavigate();
+    const create = useServerFn(createCustomer);
+    const classesFn = useServerFn(listCustomerClasses);
+    const [dupes, setDupes] = useState([]);
+    const [pendingData, setPendingData] = useState(null);
+    const { data: classData } = useQuery({
+        queryKey: ["customer-classes"],
+        queryFn: () => classesFn({ data: undefined }),
+    });
+    const form = useForm({
+        resolver: zodResolver(customerCreateSchema),
+        defaultValues: {
+            company_name: "", vat_number: "", contact_person: "", email: "", phone: "",
+            street: "", house_number: "", postal_code: "", city: "", country: "Nederland",
+            customer_class: "", notes: "", is_active: true, force: false,
+        },
+    });
+    const mut = useMutation({
+        mutationFn: (data) => create({ data }),
+        onSuccess: (r) => {
+            if (!r.customer && r.duplicates?.length) {
+                setDupes(r.duplicates);
+                return;
+            }
+            toast.success("Klant aangemaakt");
+            navigate({ to: "/klanten/$id", params: { id: r.customer.id } });
+        },
+        onError: (e) => toast.error(e instanceof Error ? e.message : "Fout"),
+    });
+    const onSubmit = (values) => {
+        setPendingData(values);
+        mut.mutate(values);
+    };
+    const forceCreate = () => {
+        if (!pendingData)
+            return;
+        setDupes([]);
+        mut.mutate({ ...pendingData, force: true });
+    };
+    const fieldErr = (k) => form.formState.errors[k]?.message;
+    return (_jsxs("main", { className: "p-6 max-w-3xl mx-auto space-y-4", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate({ to: "/klanten" }), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), " Terug"] }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Nieuwe klant" }) }), _jsxs(CardContent, { className: "grid grid-cols-2 gap-4", children: [_jsx(Field, { label: "Bedrijfsnaam *", error: fieldErr("company_name"), children: _jsx(Input, { ...form.register("company_name") }) }), _jsx(Field, { label: "BTW-nummer", error: fieldErr("vat_number"), children: _jsx(Input, { ...form.register("vat_number") }) }), _jsx(Field, { label: "Contactpersoon", error: fieldErr("contact_person"), children: _jsx(Input, { ...form.register("contact_person") }) }), _jsx(Field, { label: "E-mail *", error: fieldErr("email"), children: _jsx(Input, { type: "email", ...form.register("email") }) }), _jsx(Field, { label: "Telefoon", error: fieldErr("phone"), children: _jsx(Input, { ...form.register("phone") }) }), _jsx(Field, { label: "Klantklasse", children: _jsxs(Select, { onValueChange: (v) => form.setValue("customer_class", v), defaultValue: "", children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies klasse..." }) }), _jsx(SelectContent, { children: (classData?.classes ?? []).map((c) => _jsx(SelectItem, { value: c, children: c }, c)) })] }) }), _jsx(Field, { label: "Straat *", error: fieldErr("street"), children: _jsx(Input, { ...form.register("street") }) }), _jsx(Field, { label: "Huisnummer *", error: fieldErr("house_number"), children: _jsx(Input, { ...form.register("house_number") }) }), _jsx(Field, { label: "Postcode", error: fieldErr("postal_code"), children: _jsx(Input, { ...form.register("postal_code") }) }), _jsx(Field, { label: "Stad", error: fieldErr("city"), children: _jsx(Input, { ...form.register("city") }) }), _jsx(Field, { label: "Land *", error: fieldErr("country"), children: _jsx(Input, { ...form.register("country") }) }), _jsxs("div", { className: "col-span-2", children: [_jsx(Label, { children: "Notities" }), _jsx(Textarea, { ...form.register("notes") })] })] })] }), _jsxs("div", { className: "flex justify-end gap-2 mt-4", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => navigate({ to: "/klanten" }), children: "Annuleren" }), _jsx(Button, { type: "submit", disabled: mut.isPending, children: mut.isPending ? "Opslaan..." : "Klant aanmaken" })] })] }), _jsx(AlertDialog, { open: dupes.length > 0, onOpenChange: (o) => !o && setDupes([]), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Mogelijke duplicaten gevonden" }), _jsx(AlertDialogDescription, { children: _jsx("ul", { className: "list-disc pl-5 space-y-1 mt-2", children: dupes.map((d) => _jsxs("li", { children: [_jsx("strong", { children: d.company_name }), " \u2014 ", d.reason] }, d.id + d.reason)) }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: forceCreate, children: "Toch aanmaken" })] })] }) })] }));
+}
+function Field({ label, error, children }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: label }), children, error && _jsx("p", { className: "text-xs text-destructive", children: error })] }));
+}

package/dist-lib/index.d.ts

@@ -1,5 +1,9 @@
 import type { FlowModule } from "@flowselections/core";
 export * from "./_core-safelist";
 export { KlantenOverzicht } from "./components/klanten/KlantenOverzicht";
+export { KlantDetail } from "./components/klanten/KlantDetail";
+export { GroupedKlantDetail } from "./components/klanten/GroupedKlantDetail";
+export { NetwerkPagina } from "./components/klanten/NetwerkPagina";
+export { NieuweKlant } from "./components/klanten/NieuweKlant";
 export declare const floridayKlantenModule: 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,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAEzE,eAAO,MAAM,qBAAqB,EAAE,UAYnC,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;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAE/D,eAAO,MAAM,qBAAqB,EAAE,UAYnC,CAAC"}

package/dist-lib/index.js

@@ -17,13 +17,17 @@ import { Users } from "lucide-react";
 import { CustomerFieldsCard } from "./components/settings/CustomerFieldsCard";
 export * from "./_core-safelist";
 export { KlantenOverzicht } from "./components/klanten/KlantenOverzicht";
+export { KlantDetail } from "./components/klanten/KlantDetail";
+export { GroupedKlantDetail } from "./components/klanten/GroupedKlantDetail";
+export { NetwerkPagina } from "./components/klanten/NetwerkPagina";
+export { NieuweKlant } from "./components/klanten/NieuweKlant";
 export const floridayKlantenModule = {
     id: "customers",
     name: "Klanten",
     version: "1.0.0",
     nav: {
         label: "Klanten",
-        href: "/floriday-klanten",
+        href: "/klanten",
         icon: Users,
     },
     settingsCards: [