@flowselections/klanten-installatie-techniek-planner 0.0.0-stage → 1.0.19

package/dist-lib/_core-safelist.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=_core-safelist.d.ts.map

package/dist-lib/_core-safelist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_core-safelist.d.ts","sourceRoot":"","sources":["../src/_core-safelist.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,CAAC"}

package/dist-lib/_core-safelist.js

@@ -0,0 +1,15 @@
+// Forceert Tailwind classes die uit @flowselections/core komen maar niet
+// voorkomen in de eigen broncode van deze module.
+// Zonder dit bestand worden deze classes weggeoptimaliseerd op de
+// Lovable productie build.
+const _safelist = [
+    // Layout — Sidebar en shell structuur
+    'h-full', 'flex-col', 'flex-1', 'min-h-screen', 'ml-64', 'pt-16',
+    'items-start', 'items-center', 'justify-between', 'border-t',
+    'w-64', 'h-screen', 'h-20', 'overflow-y-auto',
+    // Grid — InstellingenPage
+    'grid', 'lg:grid-cols-2', 'gap-6', 'p-6', 'space-y-6',
+    // Toggle/Switch — aan/uit zichtbaarheid
+    'data-[state=checked]:bg-primary', 'data-[state=unchecked]:bg-input',
+];
+export {};

package/dist-lib/components/KlantenDetailPage.d.ts

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

package/dist-lib/components/KlantenDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KlantenDetailPage.d.ts","sourceRoot":"","sources":["../../src/components/KlantenDetailPage.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,iBAAiB,gCAkLhC"}

package/dist-lib/components/KlantenDetailPage.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useNavigate, useParams, Link } from "@tanstack/react-router";
+import { Button, Card, CardContent, CardHeader, CardTitle, Separator, } from "@flowselections/core";
+import { ArrowLeft, Trash2, Save, MapPin } from "lucide-react";
+import { useKlantForm } from "./klanten/useKlantForm";
+import { SegmentToggle, AlgemeneGegevensFields, ContactenFields, LocatiesFields, DynamicFieldsGrid, } from "./klanten/KlantFormSections";
+import { KlantGeschiedenisCard } from "./klanten/KlantGeschiedenisCard";
+import { KlantNotitiesCard } from "./klanten/KlantNotitiesCard";
+import { KlantStatsCard } from "./klanten/KlantStatsCard";
+export function KlantenDetailPage() {
+    const { id } = useParams({ from: "/_authenticated/installatietechniek-klanten-planner/$id" });
+    const navigate = useNavigate();
+    const { isNew, loading, saving, form, setForm, customerNumber, contacts, addContact, updateContact, removeContact, locations, addLocation, updateLocation, removeLocation, fields, values, setValues, save, remove, reload, } = useKlantForm({
+        customerId: id,
+        onSaved: (newId) => {
+            if (newId !== id) {
+                navigate({ to: "/installatietechniek-klanten-planner/$id", params: { id: newId } });
+            }
+            else {
+                void reload();
+            }
+        },
+        onDeleted: () => navigate({ to: "/installatietechniek-klanten-planner" }),
+        onNotFound: () => navigate({ to: "/installatietechniek-klanten-planner" }),
+    });
+    if (loading) {
+        return (_jsx("main", { className: "p-6", children: _jsx("p", { className: "text-muted-foreground", children: "Laden\u2026" }) }));
+    }
+    return (_jsxs("main", { className: "p-6 space-y-6 max-w-5xl", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Link, { to: "/installatietechniek-klanten-planner", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-2", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), "Terug"] }) }), _jsx("h1", { className: "text-2xl font-bold text-foreground", children: isNew ? "Nieuwe klant" : form.name || "Klant" }), customerNumber && (_jsx("span", { className: "font-mono text-xs text-muted-foreground bg-muted px-2 py-1 rounded", children: customerNumber }))] }), _jsxs("div", { className: "flex gap-2", children: [!isNew && (_jsxs(Button, { variant: "outline", onClick: remove, className: "gap-2 text-destructive", children: [_jsx(Trash2, { className: "w-4 h-4" }), "Verwijderen"] })), _jsxs(Button, { onClick: save, disabled: saving, className: "gap-2", children: [_jsx(Save, { className: "w-4 h-4" }), saving ? "Opslaan…" : "Opslaan"] })] })] }), !isNew && (_jsxs("nav", { className: "flex flex-wrap gap-3 text-xs text-muted-foreground border-b pb-3", children: [_jsx("a", { href: "#gegevens", className: "hover:text-foreground transition-colors", children: "Gegevens" }), form.segment === "Business" && (_jsx("a", { href: "#contactpersonen", className: "hover:text-foreground transition-colors", children: "Contactpersonen" })), _jsx("a", { href: "#werklocaties", className: "hover:text-foreground transition-colors", children: "Werklocaties" }), fields.length > 0 && (_jsx("a", { href: "#aanvullend", className: "hover:text-foreground transition-colors", children: "Aanvullend" })), _jsx("a", { href: "#werkbonnen", className: "hover:text-foreground transition-colors", children: "Werkbonnen" }), _jsx("a", { href: "#notities", className: "hover:text-foreground transition-colors", children: "Notities" })] })), !isNew && _jsx(KlantStatsCard, { customerId: id }), _jsxs(Card, { id: "gegevens", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Segment" }) }), _jsx(CardContent, { children: _jsx(SegmentToggle, { segment: form.segment, onChange: (s) => setForm((f) => ({ ...f, segment: s })) }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Algemene gegevens" }) }), _jsx(CardContent, { children: _jsx(AlgemeneGegevensFields, { form: form, setForm: setForm, isNew: isNew }) })] }), form.segment === "Business" && (_jsxs(Card, { id: "contactpersonen", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Contactpersonen" }) }), _jsx(CardContent, { children: _jsx(ContactenFields, { contacts: contacts, addContact: addContact, updateContact: updateContact, removeContact: removeContact }) })] })), _jsxs(Card, { id: "werklocaties", children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [_jsx(MapPin, { className: "w-4 h-4" }), "Werklocaties"] }) }), _jsx(CardContent, { children: _jsx(LocatiesFields, { locations: locations, addLocation: addLocation, updateLocation: updateLocation, removeLocation: removeLocation }) })] }), fields.length > 0 && (_jsxs(Card, { id: "aanvullend", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Aanvullende velden" }) }), _jsx(CardContent, { children: _jsx(DynamicFieldsGrid, { fields: fields, values: values, setValues: setValues }) })] })), !isNew && (_jsxs(_Fragment, { children: [_jsx(KlantGeschiedenisCard, { customerId: id }), _jsx(KlantNotitiesCard, { customerId: id })] })), _jsx(Separator, {}), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { onClick: save, disabled: saving, className: "gap-2", children: [_jsx(Save, { className: "w-4 h-4" }), saving ? "Opslaan…" : "Opslaan"] }) })] }));
+}

package/dist-lib/components/KlantenListPage.d.ts

@@ -0,0 +1,6 @@
+import { type CustomerSegment } from "../lib/itkClient";
+export declare function KlantenListPage(): import("react").JSX.Element;
+export declare function SegmentBadge({ segment }: {
+    segment: CustomerSegment;
+}): import("react").JSX.Element;
+//# sourceMappingURL=KlantenListPage.d.ts.map

package/dist-lib/components/KlantenListPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KlantenListPage.d.ts","sourceRoot":"","sources":["../../src/components/KlantenListPage.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAU3E,wBAAgB,eAAe,gCAsO9B;AAED,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,eAAe,CAAA;CAAE,+BAkBrE"}

package/dist-lib/components/KlantenListPage.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Button, Card, CardContent, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Badge, toast, } from "@flowselections/core";
+import { Plus, Search, Building2, User } from "lucide-react";
+import { db } from "../lib/itkClient";
+import { fetchKlantStats, fetchTopKlanten, formatEuro } from "../lib/klantStatsClient";
+import { KlantDialog } from "./klanten/KlantDialog";
+import { KlantenPodium } from "./klanten/KlantenPodium";
+const PAGE_SIZE = 50;
+export function KlantenListPage() {
+    const [customers, setCustomers] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState(0);
+    const [stats, setStats] = useState({});
+    const [statsFailed, setStatsFailed] = useState(false);
+    const [top, setTop] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(false);
+    const [search, setSearch] = useState("");
+    const [debounced, setDebounced] = useState("");
+    const [segmentFilter, setSegmentFilter] = useState("all");
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [selectedId, setSelectedId] = useState(null);
+    const reqId = useRef(0);
+    useEffect(() => {
+        const t = setTimeout(() => setDebounced(search.trim()), 300);
+        return () => clearTimeout(t);
+    }, [search]);
+    useEffect(() => setPage(0), [debounced, segmentFilter]);
+    useEffect(() => {
+        void load();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [page, debounced, segmentFilter]);
+    useEffect(() => {
+        void loadTop();
+    }, []);
+    const openCustomer = (id) => {
+        setSelectedId(id);
+        setDialogOpen(true);
+    };
+    const loadTop = async () => {
+        try {
+            setTop(await fetchTopKlanten(3));
+        }
+        catch {
+            setTop([]);
+        }
+    };
+    const load = async () => {
+        const my = ++reqId.current;
+        setLoading(true);
+        setLoadError(false);
+        let query = db
+            .from("itk_customers")
+            .select("*", { count: "exact" })
+            .order("created_at", { ascending: false })
+            .range(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE - 1);
+        if (segmentFilter !== "all")
+            query = query.eq("segment", segmentFilter);
+        if (debounced) {
+            const q = debounced.replace(/[%_,()*\\]/g, " ").trim();
+            if (q) {
+                const p = `%${q}%`;
+                query = query.or(`name.ilike.${p},customer_number.ilike.${p},general_email.ilike.${p},billing_city.ilike.${p}`);
+            }
+        }
+        const { data, error, count } = await query;
+        if (my !== reqId.current)
+            return;
+        if (error) {
+            setLoadError(true);
+            setCustomers([]);
+            toast.error("Klanten konden niet geladen worden");
+            setLoading(false);
+            return;
+        }
+        const list = Array.isArray(data) ? data : [];
+        setCustomers(list);
+        setTotal(typeof count === "number" ? count : list.length);
+        setLoading(false);
+        try {
+            const s = await fetchKlantStats(list.map((c) => c.id));
+            if (my !== reqId.current)
+                return;
+            setStats(s);
+            setStatsFailed(false);
+        }
+        catch {
+            if (my !== reqId.current)
+                return;
+            setStats({});
+            setStatsFailed(true);
+        }
+    };
+    const filtered = customers;
+    const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const statCell = (id, pick) => stats[id] ? pick(stats[id]) : statsFailed ? "n.b." : "—";
+    return (_jsxs("main", { className: "p-6 space-y-6", children: [_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-3 sm:flex sm:flex-wrap sm:items-center sm:gap-6", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "truncate text-2xl font-bold text-foreground", children: "Klanten" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Beheer al je zakelijke en particuliere klanten" })] }), top.length > 0 && (_jsx("div", { className: "col-span-2 justify-self-start sm:col-span-1 sm:self-center sm:justify-self-auto", children: _jsx(KlantenPodium, { items: top, onSelect: openCustomer }) })), _jsxs(Button, { className: "col-start-2 row-start-1 shrink-0 justify-self-end gap-2 sm:col-start-auto sm:row-start-auto sm:ml-auto sm:justify-self-auto", onClick: () => openCustomer(null), children: [_jsx(Plus, { className: "w-4 h-4" }), "Nieuwe klant"] })] }), _jsx(Card, { children: _jsxs(CardContent, { className: "p-4 space-y-4", children: [_jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsxs("div", { className: "relative flex-1 min-w-[240px]", children: [_jsx(Search, { className: "w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: "Zoek op klantnr, naam, e-mail of plaats\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "pl-9" })] }), _jsxs(Select, { value: segmentFilter, onValueChange: (v) => setSegmentFilter(v), children: [_jsx(SelectTrigger, { className: "w-[180px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle segmenten" }), _jsx(SelectItem, { value: "Business", children: "Zakelijk" }), _jsx(SelectItem, { value: "Private", children: "Particulier" })] })] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-[130px]", children: "Klantnr." }), _jsx(TableHead, { className: "w-[30%]", children: "Naam" }), _jsx(TableHead, { children: "Segment" }), _jsx(TableHead, { children: "E-mail" }), _jsx(TableHead, { children: "Telefoon" }), _jsx(TableHead, { children: "Plaats" }), _jsx(TableHead, { className: "text-right", children: "Omzet" }), _jsx(TableHead, { className: "text-right", children: "Klussen" })] }) }), _jsx(TableBody, { children: loading ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "text-center text-muted-foreground py-8", children: "Laden\u2026" }) })) : filtered.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "text-center text-muted-foreground py-8", children: loadError ? "Klanten konden niet geladen worden" : "Geen klanten gevonden" }) })) : (filtered.map((c) => (_jsxs(TableRow, { className: "hover:bg-muted/40 cursor-pointer", onClick: () => openCustomer(c.id), children: [_jsx(TableCell, { className: "font-mono text-xs text-muted-foreground", children: c.customer_number ?? "—" }), _jsx(TableCell, { className: "font-medium text-foreground", children: c.name }), _jsx(TableCell, { children: _jsx(SegmentBadge, { segment: c.segment }) }), _jsx(TableCell, { className: "text-sm", children: c.general_email ?? "—" }), _jsx(TableCell, { className: "text-sm", children: c.general_phone ?? "—" }), _jsx(TableCell, { className: "text-sm", children: c.billing_city ?? "—" }), _jsx(TableCell, { className: "text-sm text-right tabular-nums", children: statCell(c.id, (s) => formatEuro(s.omzetCents)) }), _jsx(TableCell, { className: "text-sm text-right tabular-nums", children: statCell(c.id, (s) => s.klussen) })] }, c.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-3 text-sm text-muted-foreground", children: [_jsxs("span", { children: [total, " ", total === 1 ? "klant" : "klanten", statsFailed && " · omzet/klussen niet beschikbaar"] }), pageCount > 1 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: page === 0 || loading, onClick: () => setPage((p) => p - 1), children: "Vorige" }), _jsxs("span", { className: "tabular-nums", children: [page + 1, " / ", pageCount] }), _jsx(Button, { variant: "outline", size: "sm", disabled: page + 1 >= pageCount || loading, onClick: () => setPage((p) => p + 1), children: "Volgende" })] }))] })] }) }), _jsx(KlantDialog, { open: dialogOpen, onOpenChange: setDialogOpen, customerId: selectedId, onChanged: () => { void load(); void loadTop(); } })] }));
+}
+export function SegmentBadge({ segment }) {
+    if (segment === "Business") {
+        return (_jsxs(Badge, { className: "bg-primary text-primary-foreground gap-1 border-transparent", children: [_jsx(Building2, { className: "w-3 h-3" }), "Zakelijk"] }));
+    }
+    return (_jsxs(Badge, { className: "gap-1 border-transparent text-white", style: { backgroundColor: "hsl(160 84% 39%)" }, children: [_jsx(User, { className: "w-3 h-3" }), "Particulier"] }));
+}

package/dist-lib/components/TemplateModuleLogo.d.ts

@@ -0,0 +1,6 @@
+interface TemplateModuleLogoProps {
+    className?: string;
+}
+export declare function TemplateModuleLogo({ className }: TemplateModuleLogoProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TemplateModuleLogo.d.ts.map

package/dist-lib/components/TemplateModuleLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateModuleLogo.d.ts","sourceRoot":"","sources":["../../src/components/TemplateModuleLogo.tsx"],"names":[],"mappings":"AAQA,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,+BAwBxE"}

package/dist-lib/components/TemplateModuleLogo.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TemplateModuleLogo({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": "true", children: [_jsx("rect", { width: "40", height: "40", rx: "8", fill: "currentColor", opacity: "0.1" }), _jsx("text", { x: "50%", y: "50%", dominantBaseline: "middle", textAnchor: "middle", fontSize: "18", fontWeight: "600", fill: "currentColor", children: "M" })] }));
+}

package/dist-lib/components/TemplatePage.d.ts

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

package/dist-lib/components/TemplatePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplatePage.d.ts","sourceRoot":"","sources":["../../src/components/TemplatePage.tsx"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,gCAS3B"}

package/dist-lib/components/TemplatePage.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TemplatePage() {
+    return (_jsxs("div", { className: "p-6", children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Module pagina" }), _jsx("p", { className: "text-muted-foreground mt-2", children: "Vervang dit component met de pagina's van jouw module." })] }));
+}

package/dist-lib/components/WerkbonDetailPage.d.ts

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

package/dist-lib/components/WerkbonDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WerkbonDetailPage.d.ts","sourceRoot":"","sources":["../../src/components/WerkbonDetailPage.tsx"],"names":[],"mappings":"AAkGA,wBAAgB,iBAAiB,gCAoMhC"}

package/dist-lib/components/WerkbonDetailPage.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useParams, Link } from "@tanstack/react-router";
+import { Button, Card, CardContent, CardHeader, CardTitle, } from "@flowselections/core";
+import { ArrowLeft, Wrench, MapPin, CalendarClock, FileText, Euro, Info, } from "lucide-react";
+import { db } from "../lib/itkClient";
+const STATUS_LABEL = {
+    unassigned: "Niet toegewezen",
+    planned_hidden: "Ingepland",
+    planned_visible: "Ingepland",
+    in_progress: "In uitvoering",
+    completed: "Afgerond",
+    invoicing: "Facturatie",
+};
+const STATUS_STYLE = {
+    unassigned: "bg-muted text-muted-foreground",
+    planned_hidden: "bg-blue-500/15 text-blue-400",
+    planned_visible: "bg-blue-500/15 text-blue-400",
+    in_progress: "bg-amber-500/15 text-amber-400",
+    completed: "bg-emerald-500/15 text-emerald-400",
+    invoicing: "bg-purple-500/15 text-purple-400",
+};
+function formatDate(iso) {
+    if (!iso)
+        return "—";
+    try {
+        return new Date(iso).toLocaleString("nl-NL", {
+            day: "2-digit",
+            month: "short",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+        });
+    }
+    catch {
+        return iso;
+    }
+}
+function formatEuro(cents) {
+    if (cents == null)
+        return "—";
+    return new Intl.NumberFormat("nl-NL", {
+        style: "currency",
+        currency: "EUR",
+    }).format(cents / 100);
+}
+function Veld({ label, value }) {
+    return (_jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: label }), _jsx("dd", { className: "text-sm text-foreground mt-0.5 break-words", children: value && value.trim() !== "" ? value : "—" })] }));
+}
+export function WerkbonDetailPage() {
+    const { id } = useParams({
+        from: "/_authenticated/installatietechniek-klanten-planner/werkbonnen/$id",
+    });
+    const [werkbon, setWerkbon] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [notFound, setNotFound] = useState(false);
+    const [loadError, setLoadError] = useState(false);
+    useEffect(() => {
+        void (async () => {
+            setLoading(true);
+            setNotFound(false);
+            setLoadError(false);
+            const { data, error } = await db
+                .from("werkbonnen")
+                .select("id, project_number, status, customer_id, customer_name, work_address, room_number, complaint_description, technician_task_description, technician_notes, internal_notes, scheduled_start_time, scheduled_end_time, deadline_date, estimated_duration_minutes, estimated_days, budget_mandate_cents, extra_costs_cents, first_time_fix, afgerond_op, externe_referentie, created_at, updated_at")
+                .eq("id", id)
+                .maybeSingle();
+            if (error) {
+                setLoadError(true);
+            }
+            else if (!data) {
+                setNotFound(true);
+            }
+            else {
+                setWerkbon(data);
+            }
+            setLoading(false);
+        })();
+    }, [id]);
+    if (loading) {
+        return (_jsx("main", { className: "p-6", children: _jsx("p", { className: "text-muted-foreground", children: "Laden\u2026" }) }));
+    }
+    if (notFound || loadError || !werkbon) {
+        return (_jsxs("main", { className: "p-6 max-w-3xl space-y-4", children: [_jsx(Link, { to: "/installatietechniek-klanten-planner", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-2", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), "Terug naar overzicht"] }) }), _jsx(Card, { children: _jsxs(CardContent, { className: "py-10 text-center space-y-2", children: [_jsx(Wrench, { className: "w-8 h-8 mx-auto text-muted-foreground" }), _jsx("h1", { className: "text-lg font-semibold text-foreground", children: notFound ? "Werkbon niet gevonden" : "Werkbon kan niet geladen worden" }), _jsx("p", { className: "text-sm text-muted-foreground", children: notFound
+                                    ? "Deze werkbon bestaat niet (meer) of je hebt er geen toegang toe."
+                                    : "Er ging iets mis bij het ophalen van de werkbon. Probeer het later opnieuw." })] }) })] }));
+    }
+    return (_jsxs("main", { className: "p-4 sm:p-6 space-y-6 max-w-5xl", children: [_jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsx(Link, { to: "/installatietechniek-klanten-planner", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-2", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), "Terug"] }) }), _jsx("h1", { className: "text-2xl font-bold text-foreground", children: werkbon.project_number ?? "Werkbon" }), _jsx("span", { className: "text-xs px-2 py-0.5 rounded-full font-medium " +
+                            (STATUS_STYLE[werkbon.status] ?? "bg-muted text-muted-foreground"), children: STATUS_LABEL[werkbon.status] ?? werkbon.status })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [_jsx(Info, { className: "w-4 h-4" }), "Algemeen"] }) }), _jsx(CardContent, { children: _jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsx(Veld, { label: "Werkbonnummer", value: werkbon.project_number }), _jsx(Veld, { label: "Klant", value: werkbon.customer_name }), _jsx(Veld, { label: "Externe referentie", value: werkbon.externe_referentie }), _jsx(Veld, { label: "First time fix", value: werkbon.first_time_fix == null
+                                        ? null
+                                        : werkbon.first_time_fix
+                                            ? "Ja"
+                                            : "Nee" }), _jsx(Veld, { label: "Aangemaakt op", value: formatDate(werkbon.created_at) }), _jsx(Veld, { label: "Laatst bijgewerkt", value: formatDate(werkbon.updated_at) })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [_jsx(MapPin, { className: "w-4 h-4" }), "Werklocatie"] }) }), _jsx(CardContent, { children: _jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsx(Veld, { label: "Adres", value: werkbon.work_address }), _jsx(Veld, { label: "Ruimte", value: werkbon.room_number ? `Ruimte ${werkbon.room_number}` : null })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [_jsx(CalendarClock, { className: "w-4 h-4" }), "Planning"] }) }), _jsx(CardContent, { children: _jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsx(Veld, { label: "Geplande start", value: formatDate(werkbon.scheduled_start_time) }), _jsx(Veld, { label: "Gepland einde", value: formatDate(werkbon.scheduled_end_time) }), _jsx(Veld, { label: "Deadline", value: werkbon.deadline_date }), _jsx(Veld, { label: "Geschatte duur", value: werkbon.estimated_duration_minutes != null
+                                        ? `${werkbon.estimated_duration_minutes} minuten`
+                                        : null }), _jsx(Veld, { label: "Geschatte dagen", value: werkbon.estimated_days != null ? String(werkbon.estimated_days) : null }), _jsx(Veld, { label: "Afgerond op", value: formatDate(werkbon.afgerond_op) })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [_jsx(FileText, { className: "w-4 h-4" }), "Omschrijving & notities"] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(Veld, { label: "Klachtomschrijving", value: werkbon.complaint_description }), _jsx(Veld, { label: "Taakomschrijving monteur", value: werkbon.technician_task_description }), _jsx(Veld, { label: "Notities monteur", value: werkbon.technician_notes }), _jsx(Veld, { label: "Interne notities", value: werkbon.internal_notes })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "text-base flex items-center gap-2", children: [_jsx(Euro, { className: "w-4 h-4" }), "Financieel"] }) }), _jsx(CardContent, { children: _jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsx(Veld, { label: "Budgetmandaat", value: formatEuro(werkbon.budget_mandate_cents) }), _jsx(Veld, { label: "Extra kosten", value: formatEuro(werkbon.extra_costs_cents) })] }) })] })] }));
+}

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

@@ -0,0 +1,10 @@
+interface Props {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** `null` => nieuwe klant */
+    customerId: string | null;
+    onChanged?: () => void;
+}
+export declare function KlantDialog({ open, onOpenChange, customerId, onChanged }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=KlantDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KlantDialog.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/KlantDialog.tsx"],"names":[],"mappings":"AAqCA,UAAU,KAAK;IACb,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,6BAA6B;IAC7B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,KAAK,+BA4L/E"}

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Tabs, TabsContent, TabsList, TabsTrigger, } from "@flowselections/core";
+import { User, Users, MapPin, Wrench, StickyNote, Trash2, Save, ExternalLink, } from "lucide-react";
+import { useKlantForm } from "./useKlantForm";
+import { SegmentToggle, AlgemeneGegevensFields, ContactenFields, LocatiesFields, DynamicFieldsGrid, } from "./KlantFormSections";
+import { KlantGeschiedenisCard } from "./KlantGeschiedenisCard";
+import { KlantNotitiesCard } from "./KlantNotitiesCard";
+import { KlantStatsCard } from "./KlantStatsCard";
+import { SegmentBadge } from "../KlantenListPage";
+export function KlantDialog({ open, onOpenChange, customerId, onChanged }) {
+    const [tab, setTab] = useState("gegevens");
+    const { isNew, loading, saving, form, setForm, customerNumber, contacts, addContact, updateContact, removeContact, locations, addLocation, updateLocation, removeLocation, fields, values, setValues, save, remove, } = useKlantForm({
+        customerId,
+        enabled: open,
+        onSaved: () => {
+            onChanged?.();
+            onOpenChange(false);
+        },
+        onDeleted: () => {
+            onChanged?.();
+            onOpenChange(false);
+        },
+        onNotFound: () => onOpenChange(false),
+    });
+    useEffect(() => {
+        if (open)
+            setTab("gegevens");
+    }, [open, customerId]);
+    useEffect(() => {
+        if (form.segment !== "Business" && tab === "contacten")
+            setTab("gegevens");
+    }, [form.segment, tab]);
+    const isBusiness = form.segment === "Business";
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-[720px] max-h-[85vh] overflow-hidden flex flex-col", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2 pr-8", children: [_jsx(User, { className: "w-5 h-5" }), isNew ? "Nieuwe klant" : form.name || "Klant", customerNumber && (_jsx("span", { className: "font-mono text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded", children: customerNumber })), !isNew && _jsx(SegmentBadge, { segment: form.segment })] }), _jsx(DialogDescription, { className: "sr-only", children: "Klantgegevens bewerken" })] }), loading ? (_jsx("p", { className: "text-sm text-muted-foreground py-8 text-center", children: "Laden\u2026" })) : (_jsxs(Tabs, { value: tab, onValueChange: setTab, className: "flex-1 overflow-hidden flex flex-col", children: [_jsxs(TabsList, { className: `grid w-full ${isBusiness ? "grid-cols-5" : "grid-cols-4"}`, children: [_jsxs(TabsTrigger, { value: "gegevens", title: "Gegevens", className: "gap-1.5 px-1.5 text-xs", children: [_jsx(User, { className: "w-3.5 h-3.5 shrink-0" }), _jsx("span", { className: "hidden lg:inline", children: "Gegevens" })] }), isBusiness && (_jsxs(TabsTrigger, { value: "contacten", title: "Contacten", className: "gap-1.5 px-1.5 text-xs", children: [_jsx(Users, { className: "w-3.5 h-3.5 shrink-0" }), _jsx("span", { className: "hidden lg:inline", children: "Contacten" })] })), _jsxs(TabsTrigger, { value: "locaties", title: "Locaties", className: "gap-1.5 px-1.5 text-xs", children: [_jsx(MapPin, { className: "w-3.5 h-3.5 shrink-0" }), _jsx("span", { className: "hidden lg:inline", children: "Locaties" })] }), _jsxs(TabsTrigger, { value: "werkbonnen", title: "Werkbonnen", disabled: isNew, className: "gap-1.5 px-1.5 text-xs", children: [_jsx(Wrench, { className: "w-3.5 h-3.5 shrink-0" }), _jsx("span", { className: "hidden lg:inline", children: "Werkbonnen" })] }), _jsxs(TabsTrigger, { value: "notities", title: "Notities", disabled: isNew, className: "gap-1.5 px-1.5 text-xs", children: [_jsx(StickyNote, { className: "w-3.5 h-3.5 shrink-0" }), _jsx("span", { className: "hidden lg:inline", children: "Notities" })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto mt-4 pr-1", children: [_jsxs(TabsContent, { value: "gegevens", className: "m-0 space-y-5", children: [!isNew && customerId && _jsx(KlantStatsCard, { customerId: customerId }), _jsx(SegmentToggle, { segment: form.segment, onChange: (s) => setForm((f) => ({ ...f, segment: s })) }), _jsx(AlgemeneGegevensFields, { form: form, setForm: setForm, isNew: isNew }), fields.length > 0 && (_jsxs("div", { className: "space-y-3 pt-2 border-t", children: [_jsx("p", { className: "text-sm font-medium text-foreground pt-3", children: "Aanvullende velden" }), _jsx(DynamicFieldsGrid, { fields: fields, values: values, setValues: setValues })] }))] }), isBusiness && (_jsx(TabsContent, { value: "contacten", className: "m-0", children: _jsx(ContactenFields, { contacts: contacts, addContact: addContact, updateContact: updateContact, removeContact: removeContact }) })), _jsx(TabsContent, { value: "locaties", className: "m-0", children: _jsx(LocatiesFields, { locations: locations, addLocation: addLocation, updateLocation: updateLocation, removeLocation: removeLocation, hideGpsFields: isNew }) }), !isNew && customerId && (_jsxs(_Fragment, { children: [_jsx(TabsContent, { value: "werkbonnen", className: "m-0", children: _jsx(KlantGeschiedenisCard, { customerId: customerId }) }), _jsx(TabsContent, { value: "notities", className: "m-0", children: _jsx(KlantNotitiesCard, { customerId: customerId }) })] }))] }), _jsxs("div", { className: "flex items-center justify-between gap-2 pt-4 border-t mt-4", children: [_jsxs("div", { className: "flex gap-2", children: [!isNew && (_jsxs(Button, { variant: "outline", onClick: remove, className: "gap-2 text-destructive", children: [_jsx(Trash2, { className: "w-4 h-4" }), "Verwijderen"] })), !isNew && customerId && (_jsx(Link, { to: "/installatietechniek-klanten-planner/$id", params: { id: customerId }, children: _jsxs(Button, { variant: "ghost", className: "gap-2", children: [_jsx(ExternalLink, { className: "w-4 h-4" }), _jsx("span", { className: "hidden sm:inline", children: "Volledige pagina" })] }) }))] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Annuleren" }), _jsxs(Button, { onClick: save, disabled: saving, className: "gap-2", children: [_jsx(Save, { className: "w-4 h-4" }), saving ? "Opslaan…" : "Opslaan"] })] })] })] }))] }) }));
+}

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

@@ -0,0 +1,45 @@
+import type { DynamicField } from "../../lib/itkClient";
+import type { KlantFormState, NewContact, NewLocation } from "./useKlantForm";
+export declare function Field({ label, children }: {
+    label: string;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function SegmentButton({ active, onClick, icon, label, }: {
+    active: boolean;
+    onClick: () => void;
+    icon: React.ReactNode;
+    label: string;
+}): import("react").JSX.Element;
+export declare function SegmentToggle({ segment, onChange, }: {
+    segment: KlantFormState["segment"];
+    onChange: (s: KlantFormState["segment"]) => void;
+}): import("react").JSX.Element;
+export declare function AlgemeneGegevensFields({ form, setForm, isNew, }: {
+    form: KlantFormState;
+    setForm: React.Dispatch<React.SetStateAction<KlantFormState>>;
+    isNew?: boolean;
+}): import("react").JSX.Element;
+export declare function ContactenFields({ contacts, addContact, updateContact, removeContact, }: {
+    contacts: NewContact[];
+    addContact: () => void;
+    updateContact: (idx: number, patch: Partial<NewContact>) => void;
+    removeContact: (idx: number) => void;
+}): import("react").JSX.Element;
+export declare function LocatiesFields({ locations, addLocation, updateLocation, removeLocation, hideGpsFields, }: {
+    locations: NewLocation[];
+    addLocation: () => void;
+    updateLocation: (idx: number, patch: Partial<NewLocation>) => void;
+    removeLocation: (idx: number) => void;
+    hideGpsFields?: boolean;
+}): import("react").JSX.Element;
+export declare function DynamicFieldInput({ field, value, onChange, }: {
+    field: DynamicField;
+    value: string;
+    onChange: (v: string) => void;
+}): import("react").JSX.Element;
+export declare function DynamicFieldsGrid({ fields, values, setValues, }: {
+    fields: DynamicField[];
+    values: Record<string, string>;
+    setValues: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+}): import("react").JSX.Element;
+//# sourceMappingURL=KlantFormSections.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KlantFormSections.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/KlantFormSections.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE9E,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,+BAOtF;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,IAAI,EACJ,KAAK,GACN,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,+BAgBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACnC,QAAQ,EAAE,CAAC,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;CAClD,+BAiBA;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,OAAO,EACP,KAAa,GACd,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BAqDA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,UAAU,EACV,aAAa,EACb,aAAa,GACd,EAAE;IACD,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,+BAqDA;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,WAAW,EACX,cAAc,EACd,cAAc,EACd,aAAqB,GACtB,EAAE;IACD,SAAS,EAAE,WAAW,EAAE,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnE,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,+BA8FA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,+BA4CA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CACzE,+BAaA"}

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, Label, Textarea, Checkbox, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
+import { Building2, User, Plus, Trash2 } from "lucide-react";
+export function Field({ label, children }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs font-medium text-muted-foreground", children: label }), children] }));
+}
+export function SegmentButton({ active, onClick, icon, label, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: "flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors " +
+            (active
+                ? "bg-primary text-primary-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground"), children: [icon, label] }));
+}
+export function SegmentToggle({ segment, onChange, }) {
+    return (_jsxs("div", { className: "inline-flex rounded-lg border p-1 bg-muted/40", children: [_jsx(SegmentButton, { active: segment === "Business", onClick: () => onChange("Business"), icon: _jsx(Building2, { className: "w-4 h-4" }), label: "Zakelijk" }), _jsx(SegmentButton, { active: segment === "Private", onClick: () => onChange("Private"), icon: _jsx(User, { className: "w-4 h-4" }), label: "Particulier" })] }));
+}
+export function AlgemeneGegevensFields({ form, setForm, isNew = false, }) {
+    return (_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [isNew && (_jsx("p", { className: "text-xs text-muted-foreground md:col-span-2", children: "Het klantnummer wordt automatisch toegekend na het opslaan." })), _jsx(Field, { label: "Naam *", children: _jsx(Input, { value: form.name, onChange: (e) => setForm((f) => ({ ...f, name: e.target.value })), placeholder: "Bedrijf of persoonsnaam" }) }), _jsx(Field, { label: "Algemeen e-mailadres *", children: _jsx(Input, { type: "email", value: form.general_email ?? "", onChange: (e) => setForm((f) => ({ ...f, general_email: e.target.value })), placeholder: "info@voorbeeld.nl" }) }), _jsx(Field, { label: "Algemeen telefoonnummer *", children: _jsx(Input, { value: form.general_phone ?? "", onChange: (e) => setForm((f) => ({ ...f, general_phone: e.target.value })), placeholder: "+31 \u2026" }) }), _jsx("div", {}), _jsx(Field, { label: "Factuuradres \u2014 straat *", children: _jsx(Input, { value: form.billing_street ?? "", onChange: (e) => setForm((f) => ({ ...f, billing_street: e.target.value })) }) }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Field, { label: "Postcode *", children: _jsx(Input, { value: form.billing_postcode ?? "", onChange: (e) => setForm((f) => ({ ...f, billing_postcode: e.target.value })) }) }), _jsx(Field, { label: "Plaats *", children: _jsx(Input, { value: form.billing_city ?? "", onChange: (e) => setForm((f) => ({ ...f, billing_city: e.target.value })) }) })] })] }));
+}
+export function ContactenFields({ contacts, addContact, updateContact, removeContact, }) {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { size: "sm", variant: "outline", onClick: addContact, className: "gap-2", children: [_jsx(Plus, { className: "w-4 h-4" }), "Toevoegen"] }) }), contacts.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen contactpersonen." })), contacts.map((c, idx) => (_jsxs("div", { className: "border rounded-lg p-4 space-y-3 bg-muted/20", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Field, { label: "Naam", children: _jsx(Input, { value: c.name, onChange: (e) => updateContact(idx, { name: e.target.value }) }) }), _jsx(Field, { label: "Functie", children: _jsx(Input, { value: c.role ?? "", onChange: (e) => updateContact(idx, { role: e.target.value }) }) }), _jsx(Field, { label: "Telefoon", children: _jsx(Input, { value: c.phone ?? "", onChange: (e) => updateContact(idx, { phone: e.target.value }) }) }), _jsx(Field, { label: "E-mail", children: _jsx(Input, { type: "email", value: c.email ?? "", onChange: (e) => updateContact(idx, { email: e.target.value }) }) })] }), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { size: "sm", variant: "ghost", onClick: () => removeContact(idx), className: "text-destructive gap-2", children: [_jsx(Trash2, { className: "w-4 h-4" }), "Verwijderen"] }) })] }, idx)))] }));
+}
+export function LocatiesFields({ locations, addLocation, updateLocation, removeLocation, hideGpsFields = false, }) {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { size: "sm", variant: "outline", onClick: addLocation, className: "gap-2", children: [_jsx(Plus, { className: "w-4 h-4" }), "Toevoegen"] }) }), locations.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen werklocaties." })), locations.map((l, idx) => (_jsxs("div", { className: "border rounded-lg p-4 space-y-3 bg-muted/20", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Field, { label: "Label *", children: _jsx(Input, { value: l.label, onChange: (e) => updateLocation(idx, { label: e.target.value }), placeholder: "Bijv. Hoofdvestiging" }) }), _jsx(Field, { label: "Straat + huisnummer", children: _jsx(Input, { value: l.street ?? "", onChange: (e) => updateLocation(idx, { street: e.target.value }) }) }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Field, { label: "Postcode", children: _jsx(Input, { value: l.postcode ?? "", onChange: (e) => updateLocation(idx, { postcode: e.target.value }) }) }), _jsx(Field, { label: "Plaats", children: _jsx(Input, { value: l.city ?? "", onChange: (e) => updateLocation(idx, { city: e.target.value }) }) })] }), !hideGpsFields && (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Field, { label: "Latitude", children: _jsx(Input, { type: "number", step: "any", value: l.latitude ?? "", onChange: (e) => updateLocation(idx, {
+                                                latitude: e.target.value === "" ? null : Number(e.target.value),
+                                            }) }) }), _jsx(Field, { label: "Longitude", children: _jsx(Input, { type: "number", step: "any", value: l.longitude ?? "", onChange: (e) => updateLocation(idx, {
+                                                longitude: e.target.value === "" ? null : Number(e.target.value),
+                                            }) }) })] }))] }), _jsx(Field, { label: "Specifieke instructies", children: _jsx(Textarea, { value: l.instructions ?? "", onChange: (e) => updateLocation(idx, { instructions: e.target.value }), placeholder: "Bijv. Sleutel onder de mat", rows: 2 }) }), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { size: "sm", variant: "ghost", onClick: () => removeLocation(idx), className: "text-destructive gap-2", children: [_jsx(Trash2, { className: "w-4 h-4" }), "Verwijderen"] }) })] }, idx)))] }));
+}
+export function DynamicFieldInput({ field, value, onChange, }) {
+    const label = field.field_name;
+    if (field.field_type === "text") {
+        return (_jsx(Field, { label: label, children: _jsx(Input, { value: value, onChange: (e) => onChange(e.target.value) }) }));
+    }
+    if (field.field_type === "date") {
+        return (_jsx(Field, { label: label, children: _jsx(Input, { type: "date", value: value, onChange: (e) => onChange(e.target.value) }) }));
+    }
+    if (field.field_type === "checkbox") {
+        return (_jsxs("div", { className: "flex items-center gap-2 pt-6", children: [_jsx(Checkbox, { checked: value === "true", onCheckedChange: (v) => onChange(v ? "true" : "false") }), _jsx(Label, { className: "text-sm", children: label })] }));
+    }
+    const options = Array.isArray(field.options) ? field.options : [];
+    return (_jsx(Field, { label: label, children: _jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies\u2026" }) }), _jsx(SelectContent, { children: options.map((opt) => (_jsx(SelectItem, { value: opt, children: opt }, opt))) })] }) }));
+}
+export function DynamicFieldsGrid({ fields, values, setValues, }) {
+    return (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: fields.map((field) => (_jsx(DynamicFieldInput, { field: field, value: values[field.id] ?? "", onChange: (v) => setValues((prev) => ({ ...prev, [field.id]: v })) }, field.id))) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"KlantGeschiedenisCard.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/KlantGeschiedenisCard.tsx"],"names":[],"mappings":"AASA,UAAU,KAAK;IACb,UAAU,EAAE,MAAM,CAAC;CACpB;AAiDD,wBAAgB,qBAAqB,CAAC,EAAE,UAAU,EAAE,EAAE,KAAK,+BA0I1D"}