@flowselections/floriday-klanten-module 1.0.14 → 1.0.16

package/dist-lib/components/klanten/pricegroups/PriceGroupFormPage.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { useNavigate } from "@tanstack/react-router";
+import { Button, Input, Label, Separator, Card, CardContent, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Checkbox, } from "@flowselections/core";
+import { ArrowRight, Check, ChevronDown, PencilLine, Calculator, Users, Globe2, Circle, CheckCircle2, Info, ChevronLeft, ChevronRight, ImageIcon } from "lucide-react";
+import { BackLink } from "../BackLink";
+import { createCustomerPriceGroup, updateCustomerPriceGroup, getCustomerPriceGroup, setPriceGroupMembers, } from "../../../lib/price-groups-local.functions";
+import { computePrice } from "../../../lib/pricing";
+import { listTradeItemsForPreview } from "../../../lib/floriday-trade-items.functions";
+import { ProductPickerDialog } from "./ProductPickerDialog";
+import { CustomerPickerDialog } from "./CustomerPickerDialog";
+import { UserPlus, Users2 } from "lucide-react";
+import { listExternalCustomers } from "../../../lib/external-customers.functions";
+import { Badge } from "@flowselections/core";
+import { toast } from "sonner";
+const emptyInput = {
+    name: "",
+    currency: "EUR",
+    pricing_mode: "manual",
+    group_type: "customer_specific",
+    price_scope: "incl_delivery",
+    include_stickers: false,
+    unit: "per_fust",
+    calc_type: "discount",
+    calc_value_type: "fixed",
+    calc_value: 0,
+    handling_fee: 0,
+    distribute_over: "ladingdrager",
+    rounding: "none",
+    rounding_step: 0.05,
+    is_active: true,
+};
+const STEP_TITLES = [
+    "Prijsgroep",
+    "Levering, diensten en afname hoeveelheid",
+    "Prijsberekening",
+    "Doelgroep",
+];
+function OptionCard({ selected, onClick, icon, title, description, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: "text-left rounded-lg border p-4 transition flex gap-3 items-start " +
+            (selected
+                ? "border-primary ring-2 ring-primary/30 bg-primary/5"
+                : "hover:border-primary/50 hover:bg-muted/40"), children: [_jsx("div", { className: "mt-0.5 " + (selected ? "text-primary" : "text-muted-foreground"), children: icon }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium text-sm", children: title }), _jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: description })] })] }));
+}
+function RadioBanner({ selected, onClick, title, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: "w-full text-left rounded-lg border px-4 py-3 flex items-center gap-3 transition " +
+            (selected
+                ? "bg-primary text-primary-foreground border-primary"
+                : "bg-background hover:border-primary/50 hover:bg-muted/40"), children: [selected
+                ? _jsx(CheckCircle2, { className: "h-5 w-5 shrink-0" })
+                : _jsx(Circle, { className: "h-5 w-5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "font-medium text-sm", children: title })] }));
+}
+function BulletList({ items }) {
+    return (_jsx("ul", { className: "space-y-1.5 pl-1", children: items.map((t, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm", children: [_jsx(Check, { className: "h-4 w-4 mt-0.5 text-primary shrink-0" }), _jsx("span", { children: t })] }, i))) }));
+}
+function StepSection({ index, title, subtitle, open, completed, disabled, onToggle, children, }) {
+    return (_jsxs(Card, { className: open ? "ring-1 ring-primary/40" : "", children: [_jsxs("button", { type: "button", onClick: disabled ? undefined : onToggle, disabled: disabled, className: "w-full flex items-center gap-3 px-6 py-4 text-left " +
+                    (disabled ? "cursor-not-allowed opacity-60" : "hover:bg-muted/40"), children: [_jsx("div", { className: "h-8 w-8 rounded-full flex items-center justify-center text-sm font-medium shrink-0 " +
+                            (completed
+                                ? "bg-primary/15 text-primary border border-primary/30"
+                                : open
+                                    ? "bg-primary text-primary-foreground"
+                                    : "bg-muted text-muted-foreground border"), children: completed && !open ? _jsx(Check, { className: "h-4 w-4" }) : index + 1 }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-base " + (open ? "font-semibold" : "font-medium"), children: title }), !open && subtitle && (_jsx("div", { className: "text-xs text-muted-foreground truncate mt-0.5", children: subtitle }))] }), !disabled && (_jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground transition-transform " + (open ? "rotate-180" : "") }))] }), open && (_jsx(CardContent, { className: "pt-0 pb-6 px-6 space-y-4 border-t", children: _jsx("div", { className: "pt-6", children: children }) }))] }));
+}
+export function PriceGroupFormPage({ editingId }) {
+    const qc = useQueryClient();
+    const navigate = useNavigate();
+    const createFn = useServerFn(createCustomerPriceGroup);
+    const updateFn = useServerFn(updateCustomerPriceGroup);
+    const getFn = useServerFn(getCustomerPriceGroup);
+    const setMembersFn = useServerFn(setPriceGroupMembers);
+    const listCustomersFn = useServerFn(listExternalCustomers);
+    const [openStep, setOpenStep] = useState(0);
+    const [maxReached, setMaxReached] = useState(0);
+    const [form, setForm] = useState(emptyInput);
+    const [error, setError] = useState(null);
+    const [basePrice, setBasePrice] = useState(10);
+    const [selectedItemId, setSelectedItemId] = useState(null);
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [customerPickerOpen, setCustomerPickerOpen] = useState(false);
+    const [selectedCustomerKeys, setSelectedCustomerKeys] = useState([]);
+    const listTradeItemsFn = useServerFn(listTradeItemsForPreview);
+    const { data: tradeItemsData } = useQuery({
+        queryKey: ["trade-items-preview"],
+        queryFn: () => listTradeItemsFn(),
+        enabled: form.pricing_mode === "calculated",
+        staleTime: 5 * 60000,
+    });
+    const items = tradeItemsData?.items ?? [];
+    const selectedItem = useMemo(() => {
+        if (items.length === 0)
+            return null;
+        return items.find((i) => i.id === selectedItemId) ?? items[0];
+    }, [items, selectedItemId]);
+    useEffect(() => {
+        if (!selectedItemId && items[0])
+            setSelectedItemId(items[0].id);
+    }, [items, selectedItemId]);
+    const cycleItem = (dir) => {
+        if (items.length === 0 || !selectedItem)
+            return;
+        const idx = items.findIndex((i) => i.id === selectedItem.id);
+        const next = (idx + dir + items.length) % items.length;
+        setSelectedItemId(items[next].id);
+    };
+    const { data: existing, isLoading: loadingExisting } = useQuery({
+        queryKey: ["customer-price-group", editingId],
+        queryFn: () => getFn({ data: { id: editingId } }),
+        enabled: !!editingId,
+    });
+    useEffect(() => {
+        if (editingId && existing) {
+            const g = existing.group;
+            setForm({
+                name: g.name, currency: g.currency, pricing_mode: g.pricing_mode,
+                group_type: g.group_type ?? "customer_specific",
+                price_scope: g.price_scope, include_stickers: g.include_stickers,
+                unit: g.unit, calc_type: g.calc_type, calc_value_type: g.calc_value_type,
+                calc_value: g.calc_value, handling_fee: g.handling_fee,
+                distribute_over: g.distribute_over ?? "ladingdrager",
+                rounding: g.rounding ?? "none",
+                rounding_step: g.rounding_step != null ? Number(g.rounding_step) : 0.05,
+                is_active: g.is_active,
+            });
+            setSelectedCustomerKeys(existing.customerKeys ?? []);
+            setMaxReached(STEP_TITLES.length - 1);
+        }
+    }, [editingId, existing]);
+    const { data: allCustomersData } = useQuery({
+        queryKey: ["external-customers-picker"],
+        queryFn: () => listCustomersFn({ data: { search: "", status: "all", limit: 2000 } }),
+    });
+    const customersByKey = useMemo(() => {
+        const map = new Map();
+        for (const c of allCustomersData?.customers ?? [])
+            map.set(c.group_key, c);
+        return map;
+    }, [allCustomersData]);
+    const patch = (p) => setForm((f) => ({ ...f, ...p }));
+    const preview = useMemo(() => {
+        const calc = {
+            pricing_mode: form.pricing_mode,
+            calc_type: form.calc_type ?? null,
+            calc_value_type: form.calc_value_type ?? null,
+            calc_value: form.calc_value ?? null,
+            handling_fee: form.handling_fee ?? null,
+            distribute_over: form.distribute_over ?? null,
+            rounding: form.rounding,
+            rounding_step: form.rounding_step ?? 0.05,
+        };
+        return computePrice(basePrice, calc, {
+            unitsPerFust: selectedItem?.units_per_fust ?? 1,
+            packagesPerLayer: selectedItem?.packages_per_layer ?? 1,
+            layersPerCarrier: selectedItem?.layers_per_carrier ?? 1,
+        });
+    }, [form, basePrice, selectedItem]);
+    const handlingSuffix = useMemo(() => {
+        if (!selectedItem)
+            return "";
+        const upf = selectedItem.units_per_fust;
+        const ppl = selectedItem.packages_per_layer;
+        const lpc = selectedItem.layers_per_carrier;
+        switch (form.distribute_over) {
+            case "fust": return `/${upf}`;
+            case "laag": return `/(${upf}×${ppl})`;
+            case "ladingdrager": return `/(${upf}×${ppl}×${lpc})`;
+            default: return "";
+        }
+    }, [selectedItem, form.distribute_over]);
+    const goBack = () => navigate({ to: "/klanten/prijsgroepen" });
+    const saveMut = useMutation({
+        mutationFn: async () => {
+            if (form.group_type === "customer_specific" && selectedCustomerKeys.length === 0) {
+                throw new Error("Selecteer minimaal één organisatie in stap 4 voordat je een klantspecifieke prijsgroep opslaat.");
+            }
+            const row = editingId
+                ? await updateFn({ data: { id: editingId, input: form } })
+                : await createFn({ data: form });
+            const id = row?.id ?? editingId;
+            if (id) {
+                const keys = form.group_type === "customer_specific" ? selectedCustomerKeys : [];
+                await setMembersFn({ data: { id, customerKeys: keys } });
+            }
+            return row;
+        },
+        onSuccess: () => {
+            qc.invalidateQueries({ queryKey: ["customer-price-groups"] });
+            qc.invalidateQueries({ queryKey: ["customer-price-group", editingId] });
+            goBack();
+        },
+        onError: (e) => {
+            const msg = e?.message ?? "Opslaan mislukt";
+            setError(msg);
+            toast.error(msg);
+        },
+    });
+    const canProceed = (s) => (s === 0 ? form.name.trim().length > 0 : true);
+    const goToStep = (i) => {
+        if (i > maxReached)
+            return;
+        setOpenStep((cur) => (cur === i ? -1 : i));
+    };
+    const nextStep = (i) => {
+        if (!canProceed(i))
+            return;
+        // Van stap 2 naar stap 4 wanneer prijzen handmatig zijn (skip prijsberekening).
+        let target = i + 1;
+        if (i === 1 && form.pricing_mode === "manual")
+            target = 3;
+        // Skip stap 4 (Doelgroep) voor algemene prijsgroepen.
+        if (target === 3 && form.group_type !== "customer_specific") {
+            setMaxReached((m) => Math.max(m, 3));
+            setOpenStep(-1);
+            return;
+        }
+        const next = Math.min(target, STEP_TITLES.length - 1);
+        setMaxReached((m) => Math.max(m, next));
+        setOpenStep(next);
+    };
+    const summaries = [
+        form.name
+            ? `${form.name} · ${form.pricing_mode === "manual" ? "Handmatig" : "Berekend"} · ${form.group_type === "general" ? "Algemeen" : "Klantspecifiek"} · ${form.currency}`
+            : undefined,
+        `${form.price_scope === "incl_delivery" ? "Incl. levering" : "Excl. levering"} · ${form.unit === "per_fust" ? "Per fust" : form.unit === "per_laag" ? "Per laag" : "Per ladingdrager"}${form.include_stickers ? " · incl. stickers" : ""}`,
+        form.pricing_mode !== "calculated"
+            ? "Handmatige prijzen — niet van toepassing"
+            : (() => {
+                const typ = form.calc_type === "surcharge" ? "Opslag" : "Korting";
+                const val = form.calc_value_type === "percentage"
+                    ? `${form.calc_value ?? 0}%`
+                    : `€ ${(form.calc_value ?? 0).toFixed(3)}`;
+                const rnd = form.rounding === "none"
+                    ? "niet afronden"
+                    : `${form.rounding === "up" ? "omhoog" : form.rounding === "down" ? "omlaag" : "dichtstbijzijnde"} op € ${(form.rounding_step ?? 0.05).toFixed(2)}`;
+                return `${typ} ${val} · afhandelingskosten € ${(form.handling_fee ?? 0).toFixed(2)} · ${rnd}`;
+            })(),
+        form.group_type !== "customer_specific"
+            ? "Algemene prijsgroep — geen doelgroep"
+            : selectedCustomerKeys.length === 0
+                ? "Nog geen klanten"
+                : `${selectedCustomerKeys.length} klant${selectedCustomerKeys.length === 1 ? "" : "en"}`,
+    ];
+    if (editingId && loadingExisting) {
+        return _jsx("div", { className: "p-6 text-sm text-muted-foreground", children: "Laden\u2026" });
+    }
+    return (_jsxs("main", { className: "min-h-screen bg-muted/30 pb-28", children: [_jsxs("div", { className: "max-w-6xl mx-auto px-6 pt-6 space-y-4", children: [_jsx(BackLink, { to: "/klanten/prijsgroepen", label: "Terug naar prijsgroepen" }), _jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold", children: editingId ? "Prijsgroep bewerken" : "Nieuwe prijsgroep" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Stel prijsafspraken en berekening in. Klanten koppel je op het overzicht." })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-[1fr_340px] items-start", children: [_jsxs("div", { className: "space-y-4 min-w-0", children: [_jsx(StepSection, { index: 0, title: STEP_TITLES[0], subtitle: summaries[0], open: openStep === 0, completed: maxReached > 0, disabled: false, onToggle: () => goToStep(0), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { children: "Naam van de prijsgroep" }), _jsx("div", { className: "text-xs text-muted-foreground mb-1.5", children: "Alleen zichtbaar voor jou." }), _jsx(Input, { value: form.name, onChange: (e) => patch({ name: e.target.value }), placeholder: "Bijvoorbeeld: trouwe klanten" })] }), _jsxs("div", { className: "max-w-sm", children: [_jsx(Label, { children: "Valuta" }), _jsxs(Select, { value: form.currency, onValueChange: (v) => patch({ currency: v }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "EUR", children: "Euro" }), _jsx(SelectItem, { value: "USD", children: "Amerikaanse dollar" })] })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Prijsbepaling" }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-3 mt-2", children: [_jsx(OptionCard, { selected: form.pricing_mode === "manual", onClick: () => patch({ pricing_mode: "manual" }), icon: _jsx(PencilLine, { className: "h-5 w-5" }), title: "Prijzen handmatig invoeren", description: "Geef per prijsgroep handmatig een prijs in bij het aanbieden van artikelen." }), _jsx(OptionCard, { selected: form.pricing_mode === "calculated", onClick: () => patch({ pricing_mode: "calculated" }), icon: _jsx(Calculator, { className: "h-5 w-5" }), title: "Prijzen berekenen", description: "Bereken prijzen automatisch op basis van een basisprijs met een door jou samen te stellen berekening." })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Type prijsgroep" }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-3 mt-2", children: [_jsx(OptionCard, { selected: form.group_type === "general", onClick: () => patch({ group_type: "general" }), icon: _jsx(Globe2, { className: "h-5 w-5" }), title: "Algemene prijsgroep", description: "Zichtbaar voor alle klanten (alleen voor partijprijzen)." }), _jsx(OptionCard, { selected: form.group_type === "customer_specific", onClick: () => patch({ group_type: "customer_specific" }), icon: _jsx(Users, { className: "h-5 w-5" }), title: "Klantspecifieke prijsgroep", description: "Zichtbaar voor klanten die zijn ingedeeld in deze prijsgroep." })] })] }), _jsx("div", { className: "pt-2 flex justify-end", children: _jsxs(Button, { onClick: () => nextStep(0), disabled: !canProceed(0), children: ["Volgende stap ", _jsx(ArrowRight, { className: "h-4 w-4 ml-1" })] }) })] }) }), _jsx(StepSection, { index: 1, title: STEP_TITLES[1], subtitle: summaries[1], open: openStep === 1, completed: maxReached > 1, disabled: maxReached < 1, onToggle: () => goToStep(1), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(RadioBanner, { selected: form.price_scope === "incl_delivery", onClick: () => patch({ price_scope: "incl_delivery" }), title: "Prijzen inclusief levering en transport" }), form.price_scope === "incl_delivery" && (_jsx(BulletList, { items: [
+                                                                "Prijzen zichtbaar voor klanten die direct inkopen op Floriday",
+                                                                "Prijzen zijn inclusief levering en transport, ongeacht het bestelvolume",
+                                                            ] })), _jsx(RadioBanner, { selected: form.price_scope === "excl_delivery", onClick: () => patch({ price_scope: "excl_delivery" }), title: "Prijzen exclusief levering en transport" }), form.price_scope === "excl_delivery" && (_jsx(BulletList, { items: [
+                                                                "Prijzen zichtbaar voor klanten die direct inkopen op Floriday",
+                                                                "De ingestelde transport- en afleverkosten in de levervoorwaarden worden in rekening gebracht",
+                                                            ] }))] }), _jsxs("div", { className: "pt-2", children: [_jsx("div", { className: "text-sm text-muted-foreground mb-2", children: "Diensten" }), _jsx(Separator, { className: "mb-3" }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [_jsx(Checkbox, { checked: form.include_stickers, onCheckedChange: (v) => patch({ include_stickers: v === true }) }), _jsx("span", { className: "text-sm font-medium", children: "Inclusief stickeren" })] })] }), _jsxs("div", { className: "pt-2", children: [_jsx("div", { className: "text-sm text-muted-foreground mb-2", children: "Afname" }), _jsx(Separator, { className: "mb-3" }), _jsxs("div", { className: "max-w-sm", children: [_jsx(Label, { children: "Afname-eenheid" }), _jsxs(Select, { value: form.unit, onValueChange: (v) => patch({ unit: v }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "- Selecteer een eenheid -" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "per_fust", children: "Per fust" }), _jsx(SelectItem, { value: "per_laag", children: "Per laag" }), _jsx(SelectItem, { value: "per_ladingdrager", children: "Per ladingdrager" })] })] })] }), _jsxs("div", { className: "text-xs text-muted-foreground mt-2 leading-relaxed", children: ["Afname-eenheid per aangeboden artikel.", _jsx("br", {}), "Deze instelling geldt voor alle klanten in deze prijsgroep, per aangeboden artikel, niet per bestelling."] })] }), _jsx("div", { className: "pt-2 flex justify-end", children: _jsxs(Button, { onClick: () => nextStep(1), children: ["Volgende stap ", _jsx(ArrowRight, { className: "h-4 w-4 ml-1" })] }) })] }) }), _jsx(StepSection, { index: 2, title: STEP_TITLES[2], subtitle: summaries[2], open: openStep === 2, completed: form.pricing_mode === "calculated" && maxReached >= 2 && openStep !== 2, disabled: maxReached < 2 || form.pricing_mode !== "calculated", onToggle: () => goToStep(2), children: _jsx("div", { className: "space-y-4", children: form.pricing_mode !== "calculated" ? (_jsx("div", { className: "text-sm text-muted-foreground p-4 border rounded-md bg-muted/30", children: "Deze prijsgroep gebruikt handmatige prijzen. Prijsberekening is niet van toepassing." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx(Label, { children: "Korting/opslag per stuk" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-3 mt-1.5", children: [_jsxs(Select, { value: form.calc_type ?? "discount", onValueChange: (v) => patch({ calc_type: v }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "discount", children: "Korting" }), _jsx(SelectItem, { value: "surcharge", children: "Opslag" })] })] }), _jsxs(Select, { value: form.calc_value_type ?? "fixed", onValueChange: (v) => patch({ calc_value_type: v }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "percentage", children: "Percentage" }), _jsx(SelectItem, { value: "fixed", children: "Vast bedrag" })] })] }), _jsxs("div", { className: "relative", children: [form.calc_value_type !== "percentage" && (_jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none", children: "\u20AC" })), _jsx(Input, { type: "number", step: form.calc_value_type === "percentage" ? "1" : "0.001", value: form.calc_value ?? 0, onChange: (e) => patch({ calc_value: Number(e.target.value) }), className: form.calc_value_type === "percentage" ? "pr-8" : "pl-7" }), form.calc_value_type === "percentage" && (_jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none", children: "%" }))] })] })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsxs(Label, { className: "flex items-center gap-1.5", children: ["Afhandelingskosten (optioneel)", _jsx(Info, { className: "h-3.5 w-3.5 text-muted-foreground", "aria-label": "Extra kosten die bovenop de prijs komen. Kies hoe deze verdeeld worden." })] }), _jsxs("div", { className: "relative mt-1.5", children: [_jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none", children: "\u20AC" }), _jsx(Input, { type: "number", step: "0.01", value: form.handling_fee ?? 0, onChange: (e) => patch({ handling_fee: Number(e.target.value) }), className: "pl-7" })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Verdeeld over het aantal planten of bloemen op een" }), _jsxs(Select, { value: form.distribute_over ?? "ladingdrager", onValueChange: (v) => patch({ distribute_over: v }), children: [_jsx(SelectTrigger, { className: "mt-1.5", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "ladingdrager", children: "Ladingdrager" }), _jsx(SelectItem, { value: "laag", children: "Laag" }), _jsx(SelectItem, { value: "fust", children: "Fust" })] })] })] })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx(Label, { children: "Prijs afronden" }), _jsxs(Select, { value: form.rounding, onValueChange: (v) => patch({ rounding: v }), children: [_jsx(SelectTrigger, { className: "mt-1.5", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "none", children: "Niet afronden" }), _jsx(SelectItem, { value: "up", children: "Omhoog" }), _jsx(SelectItem, { value: "down", children: "Omlaag" }), _jsx(SelectItem, { value: "nearest", children: "Dichtstbijzijnde" })] })] })] }), form.rounding !== "none" && (_jsxs("div", { children: [_jsx(Label, { children: "Op" }), _jsxs(Select, { value: String(form.rounding_step ?? 0.05), onValueChange: (v) => patch({ rounding_step: Number(v) }), children: [_jsx(SelectTrigger, { className: "mt-1.5", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "0.01", children: "\u20AC 0,01" }), _jsx(SelectItem, { value: "0.05", children: "\u20AC 0,05" }), _jsx(SelectItem, { value: "0.1", children: "\u20AC 0,10" })] })] })] }))] }), _jsx("div", { className: "pt-2 flex justify-end", children: _jsxs(Button, { onClick: () => nextStep(2), children: ["Volgende stap ", _jsx(ArrowRight, { className: "h-4 w-4 ml-1" })] }) })] })) }) }), _jsxs(StepSection, { index: 3, title: STEP_TITLES[3], subtitle: summaries[3], open: openStep === 3, completed: form.group_type === "customer_specific" && maxReached >= 3 && openStep !== 3 && selectedCustomerKeys.length > 0, disabled: maxReached < 3 || form.group_type !== "customer_specific", onToggle: () => goToStep(3), children: [form.group_type !== "customer_specific" ? (_jsx("div", { className: "text-sm text-muted-foreground p-4 border rounded-md bg-muted/30", children: "Algemene prijsgroepen zijn zichtbaar voor alle klanten \u2014 een doelgroep is niet van toepassing." })) : selectedCustomerKeys.length === 0 ? (_jsxs("div", { className: "rounded-lg border bg-muted/20 p-8", children: [_jsxs("div", { className: "flex flex-col items-center text-center gap-3", children: [_jsxs("div", { className: "relative h-16 w-16 rounded-full bg-muted flex items-center justify-center", children: [_jsx(Users2, { className: "h-8 w-8 text-muted-foreground/60" }), _jsx("span", { className: "absolute -top-1 -right-1 h-6 w-6 rounded-full bg-background border flex items-center justify-center", children: _jsx(UserPlus, { className: "h-3.5 w-3.5 text-muted-foreground" }) })] }), _jsx("div", { children: _jsx("div", { className: "font-medium text-sm", children: "Nog geen klanten toegevoegd" }) })] }), _jsx("div", { className: "flex justify-end mt-4", children: _jsxs(Button, { variant: "outline", onClick: () => setCustomerPickerOpen(true), children: [_jsx(UserPlus, { className: "h-4 w-4 mr-1.5" }), " Organisaties wijzigen"] }) })] })) : (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: [_jsx("strong", { className: "text-foreground", children: selectedCustomerKeys.length }), " ", "klant", selectedCustomerKeys.length === 1 ? "" : "en", " gekoppeld"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setCustomerPickerOpen(true), children: [_jsx(UserPlus, { className: "h-4 w-4 mr-1.5" }), " Organisaties wijzigen"] })] }), _jsx("div", { className: "max-h-[320px] overflow-y-auto border rounded-md divide-y", children: selectedCustomerKeys.map((k) => {
+                                                            const c = customersByKey.get(k);
+                                                            return (_jsxs("div", { className: "flex items-center gap-3 p-2.5", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm font-medium truncate", children: c?.display_name ?? k }), _jsx("div", { className: "text-xs text-muted-foreground truncate", children: c ? [c.city, c.country].filter(Boolean).join(" · ") || "—" : "Niet in cache" })] }), _jsx("div", { className: "flex gap-1", children: (c?.providers ?? []).slice(0, 3).map((p) => (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: p }, p))) })] }, k));
+                                                        }) })] })), _jsx(CustomerPickerDialog, { open: customerPickerOpen, onOpenChange: setCustomerPickerOpen, value: selectedCustomerKeys, onChange: setSelectedCustomerKeys })] }), error && _jsx("div", { className: "text-sm text-destructive", children: error })] }), form.pricing_mode === "calculated" && (_jsxs("aside", { className: "lg:sticky lg:top-4 space-y-3", children: [_jsx(Card, { children: _jsxs(CardContent, { className: "p-4 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-sm font-medium", children: "Voorbeeld prijscalculatie" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "icon", className: "h-7 w-7", onClick: () => cycleItem(-1), disabled: items.length < 2, "aria-label": "Vorige product", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", className: "h-7 w-7", onClick: () => cycleItem(1), disabled: items.length < 2, "aria-label": "Volgend product", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })] }), _jsxs("button", { type: "button", onClick: () => setPickerOpen(true), className: "w-full flex items-center gap-3 text-left hover:bg-muted/30 rounded-md p-2 -m-2", children: [_jsx("div", { className: "h-14 w-14 rounded bg-muted flex items-center justify-center overflow-hidden shrink-0", children: selectedItem?.image_url
+                                                                ? _jsx("img", { src: selectedItem.image_url, alt: "", className: "h-full w-full object-contain" })
+                                                                : _jsx(ImageIcon, { className: "h-6 w-6 text-muted-foreground" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-medium truncate", children: selectedItem?.name ?? "Geen product beschikbaar" }), _jsx("div", { className: "text-xs text-muted-foreground truncate", children: selectedItem
+                                                                        ? [selectedItem.packaging_code,
+                                                                            `${selectedItem.units_per_fust}×${selectedItem.packages_per_layer}×${selectedItem.layers_per_carrier}`,
+                                                                            selectedItem.carrier_code]
+                                                                            .filter(Boolean).join(" - ")
+                                                                        : "Wacht op Floriday-cache" })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: "Basisprijs" }), _jsxs("div", { className: "relative mt-1.5", children: [_jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none", children: "\u20AC" }), _jsx(Input, { type: "number", step: "0.01", value: basePrice, onChange: (e) => setBasePrice(Number(e.target.value)), className: "pl-7" })] })] }), _jsxs("div", { children: [_jsx("div", { className: "flex justify-end text-xs text-muted-foreground mb-1", children: "Prijzen" }), _jsxs("div", { className: "space-y-1.5 text-sm tabular-nums border-t pt-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Basisprijs" }), _jsxs("span", { children: ["\u20AC ", basePrice.toFixed(2)] })] }), Math.abs(preview.discountAmount) > 0 && (_jsxs("div", { className: "flex justify-between", children: [_jsxs("span", { className: "text-muted-foreground", children: [form.calc_type === "surcharge" ? "Opslag" : "Korting", " ", form.calc_value_type === "percentage"
+                                                                                    ? `${(form.calc_value ?? 0).toLocaleString("nl-NL")}%`
+                                                                                    : `€ ${(form.calc_value ?? 0).toFixed(3)}`] }), _jsxs("span", { children: [preview.discountAmount < 0 ? "− " : "", "\u20AC ", Math.abs(preview.discountAmount).toFixed(2)] })] })), preview.handlingPerUnit > 0 && (_jsxs("div", { className: "flex justify-between items-baseline gap-2", children: [_jsxs("span", { className: "text-muted-foreground truncate", children: ["Afhandelingskosten (optioneel)", " ", _jsxs("span", { className: "italic text-muted-foreground/80", children: ["\u20AC ", (form.handling_fee ?? 0).toFixed(2).replace(".", ","), handlingSuffix] })] }), _jsxs("span", { children: ["\u20AC ", preview.handlingPerUnit.toFixed(3)] })] })), _jsxs("div", { className: "flex justify-between border-t pt-1.5", children: [_jsx("span", { className: form.rounding === "none" ? "font-medium" : "text-muted-foreground", children: "Berekende prijs" }), _jsxs("span", { className: form.rounding === "none" ? "font-medium" : "", children: ["\u20AC ", preview.adjusted.toFixed(3)] })] }), form.rounding !== "none" && (_jsxs("div", { className: "flex justify-between font-medium border-t pt-1.5", children: [_jsx("span", { children: "Afgeronde prijs" }), _jsxs("span", { children: ["\u20AC ", preview.rounded.toFixed(2)] })] }))] })] })] }) }), _jsx(ProductPickerDialog, { open: pickerOpen, onOpenChange: setPickerOpen, items: items, onSelect: (i) => setSelectedItemId(i.id) })] }))] })] }), _jsx("div", { className: "fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur border-t z-10", children: _jsxs("div", { className: "max-w-6xl mx-auto px-6 py-3 flex items-center justify-between", children: [_jsx(Button, { variant: "ghost", onClick: goBack, children: "Annuleren" }), _jsx(Button, { onClick: () => saveMut.mutate(), disabled: saveMut.isPending ||
+                                !form.name.trim() ||
+                                (form.group_type === "customer_specific" && selectedCustomerKeys.length === 0), children: saveMut.isPending ? "Opslaan…" : "Opslaan" })] }) })] }));
+}

package/dist-lib/components/klanten/pricegroups/PriceGroupsPage.d.ts

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

package/dist-lib/components/klanten/pricegroups/PriceGroupsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceGroupsPage.d.ts","sourceRoot":"","sources":["../../../../src/components/klanten/pricegroups/PriceGroupsPage.tsx"],"names":[],"mappings":"AAiHA,wBAAgB,eAAe,gCAoO9B"}

package/dist-lib/components/klanten/pricegroups/PriceGroupsPage.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Button, Input, Card, CardContent, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, } from "@flowselections/core";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { Plus, Search, MoreVertical, GripVertical, EyeOff, Eye, Pencil, Users, Copy, Trash2, Tag, ChevronLeft, ChevronRight } from "lucide-react";
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, arrayMove, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { listCustomerPriceGroups, deleteCustomerPriceGroup, reorderCustomerPriceGroups, updateCustomerPriceGroup, createCustomerPriceGroup, } from "../../../lib/price-groups-local.functions";
+import { CustomerPickerDialog } from "./CustomerPickerDialog";
+function unitLabel(u) {
+    switch (u) {
+        case "per_fust": return "Per fust";
+        case "per_stuk": return "Per stuk";
+        case "per_ladingdrager": return "Per ladingdrager";
+        default: return u;
+    }
+}
+function calcSummary(g) {
+    if (g.pricing_mode !== "calculated")
+        return "—";
+    if (!g.calc_type || !g.calc_value_type || !g.calc_value)
+        return "Geen berekening";
+    const verb = g.calc_type === "discount" ? "Korting" : "Opslag";
+    const val = g.calc_value_type === "percentage" ? `${g.calc_value}%` : `€ ${Number(g.calc_value).toFixed(2)}`;
+    return `${verb} — ${val}`;
+}
+function SortableRow({ g, onEdit, onMembers, onDelete, onDuplicate, onToggleActive }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: g.id });
+    const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.6 : 1 };
+    return (_jsxs(TableRow, { ref: setNodeRef, style: style, className: isDragging ? "bg-muted/50" : undefined, children: [_jsx(TableCell, { className: "w-[36px] p-0 pl-2", children: _jsx("button", { type: "button", className: "cursor-grab touch-none text-muted-foreground hover:text-foreground p-2", "aria-label": "Verslepen", ...attributes, ...listeners, children: _jsx(GripVertical, { className: "h-4 w-4" }) }) }), _jsxs(TableCell, { children: [_jsxs("div", { className: "font-medium flex items-center gap-2", children: [g.name, !g.is_active && _jsx(Badge, { variant: "secondary", className: "text-[10px]", children: "Inactief" })] }), _jsxs("div", { className: "text-xs text-muted-foreground", children: ["Laatst gewijzigd: ", new Date(g.updated_at).toLocaleString("nl-NL")] })] }), _jsx(TableCell, { children: _jsx(Badge, { variant: g.pricing_mode === "calculated" ? "default" : "secondary", children: g.pricing_mode === "calculated" ? "Berekende prijzen" : "Handmatige prijzen" }) }), _jsxs(TableCell, { className: "tabular-nums", children: [g.member_count, " klanten"] }), _jsxs(TableCell, { className: "text-sm", children: [g.price_scope === "incl_delivery" ? "Levering en transport" : "Exclusief levering", g.include_stickers && _jsx("div", { className: "text-xs text-muted-foreground", children: "Incl. stickers" })] }), _jsx(TableCell, { className: "text-sm", children: unitLabel(g.unit) }), _jsx(TableCell, { className: "text-sm", children: g.currency }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: calcSummary(g) }), _jsx(TableCell, { className: "w-[52px] text-right pr-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Acties", children: _jsx(MoreVertical, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: onEdit, children: [_jsx(Pencil, { className: "h-4 w-4 mr-2" }), "Bewerken"] }), _jsxs(DropdownMenuItem, { onClick: onMembers, children: [_jsx(Users, { className: "h-4 w-4 mr-2" }), "Klanten toewijzen"] }), _jsxs(DropdownMenuItem, { onClick: onDuplicate, children: [_jsx(Copy, { className: "h-4 w-4 mr-2" }), "Dupliceren"] }), _jsx(DropdownMenuItem, { onClick: onToggleActive, children: g.is_active
+                                        ? (_jsxs(_Fragment, { children: [_jsx(EyeOff, { className: "h-4 w-4 mr-2" }), "Op inactief zetten"] }))
+                                        : (_jsxs(_Fragment, { children: [_jsx(Eye, { className: "h-4 w-4 mr-2" }), "Activeren"] })) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onDelete, className: "text-destructive focus:text-destructive", children: [_jsx(Trash2, { className: "h-4 w-4 mr-2" }), "Verwijderen"] })] })] }) })] }));
+}
+export function PriceGroupsPage() {
+    const qc = useQueryClient();
+    const navigate = useNavigate();
+    const listFn = useServerFn(listCustomerPriceGroups);
+    const delFn = useServerFn(deleteCustomerPriceGroup);
+    const reorderFn = useServerFn(reorderCustomerPriceGroups);
+    const updateFn = useServerFn(updateCustomerPriceGroup);
+    const createFn = useServerFn(createCustomerPriceGroup);
+    const { data: groups = [], isLoading } = useQuery({
+        queryKey: ["customer-price-groups"],
+        queryFn: () => listFn(),
+    });
+    const [search, setSearch] = useState("");
+    const [statusFilter, setStatusFilter] = useState("all");
+    const [membersFor, setMembersFor] = useState(null);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(25);
+    const resetPage = () => setPage(1);
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const filtered = useMemo(() => {
+        const q = search.trim().toLowerCase();
+        return groups.filter((g) => {
+            if (statusFilter === "active" && !g.is_active)
+                return false;
+            if (statusFilter === "inactive" && g.is_active)
+                return false;
+            if (!q)
+                return true;
+            return g.name.toLowerCase().includes(q);
+        });
+    }, [groups, search, statusFilter]);
+    const reorderMut = useMutation({
+        mutationFn: (ids) => reorderFn({ data: { ids } }),
+        onMutate: async (ids) => {
+            await qc.cancelQueries({ queryKey: ["customer-price-groups"] });
+            const prev = qc.getQueryData(["customer-price-groups"]);
+            if (prev) {
+                const map = new Map(prev.map((g) => [g.id, g]));
+                const next = ids.map((id, idx) => ({ ...map.get(id), sort_order: idx + 1 }));
+                qc.setQueryData(["customer-price-groups"], next);
+            }
+            return { prev };
+        },
+        onError: (_e, _v, ctx) => { if (ctx?.prev)
+            qc.setQueryData(["customer-price-groups"], ctx.prev); },
+        onSettled: () => qc.invalidateQueries({ queryKey: ["customer-price-groups"] }),
+    });
+    const deleteMut = useMutation({
+        mutationFn: (id) => delFn({ data: { id } }),
+        onSuccess: () => qc.invalidateQueries({ queryKey: ["customer-price-groups"] }),
+    });
+    const toggleActiveMut = useMutation({
+        mutationFn: async (g) => {
+            const { id, member_count, created_at, updated_at, sort_order, ...rest } = g;
+            return updateFn({ data: { id, input: { ...rest, is_active: !g.is_active } } });
+        },
+        onSuccess: () => qc.invalidateQueries({ queryKey: ["customer-price-groups"] }),
+    });
+    const duplicateMut = useMutation({
+        mutationFn: async (g) => {
+            const { id, member_count, created_at, updated_at, sort_order, ...rest } = g;
+            return createFn({ data: { ...rest, name: `${g.name} (kopie)` } });
+        },
+        onSuccess: () => qc.invalidateQueries({ queryKey: ["customer-price-groups"] }),
+    });
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const ids = filtered.map((g) => g.id);
+        const oldIndex = ids.indexOf(String(active.id));
+        const newIndex = ids.indexOf(String(over.id));
+        if (oldIndex < 0 || newIndex < 0)
+            return;
+        // Reorder only over full list to keep global ordering stable
+        const fullIds = groups.map((g) => g.id);
+        const from = fullIds.indexOf(String(active.id));
+        const to = fullIds.indexOf(String(over.id));
+        const next = arrayMove(fullIds, from, to);
+        reorderMut.mutate(next);
+    };
+    const active = groups.filter((g) => g.is_active).length;
+    const inactive = groups.length - active;
+    const total = filtered.length;
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    const currentPage = Math.min(page, totalPages);
+    const startIdx = total === 0 ? 0 : (currentPage - 1) * pageSize;
+    const endIdx = Math.min(startIdx + pageSize, total);
+    const pageRows = filtered.slice(startIdx, endIdx);
+    return (_jsxs("main", { className: "p-6 space-y-5", 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: "Prijsgroepen" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Beheer prijsafspraken en wijs klanten uit elke bron toe aan een prijsgroep." })] }), _jsx(Button, { asChild: true, children: _jsxs(Link, { to: "/klanten/prijsgroepen/nieuw", children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), "Prijsgroep toevoegen"] }) })] }), _jsxs(Card, { children: [_jsx("div", { className: "border-b px-4 pt-3", children: _jsx(Tabs, { value: statusFilter, onValueChange: (v) => { setStatusFilter(v); resetPage(); }, children: _jsxs(TabsList, { className: "flex-wrap", children: [_jsxs(TabsTrigger, { value: "all", children: ["Alle ", _jsx("span", { className: "ml-1.5 text-xs text-muted-foreground", children: groups.length })] }), _jsxs(TabsTrigger, { value: "active", children: ["Actief ", _jsx("span", { className: "ml-1.5 text-xs text-muted-foreground", children: active })] }), _jsxs(TabsTrigger, { value: "inactive", children: ["Inactief ", _jsx("span", { className: "ml-1.5 text-xs text-muted-foreground", children: inactive })] })] }) }) }), _jsx("div", { className: "flex items-center gap-2 flex-wrap p-4 border-b", 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 naam\u2026", value: search, onChange: (e) => { setSearch(e.target.value); resetPage(); }, className: "pl-9" })] }) }), _jsx(CardContent, { className: "p-0", children: _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-[36px]" }), _jsx(TableHead, { children: "Naam" }), _jsx(TableHead, { children: "Type" }), _jsx(TableHead, { children: "Klanten" }), _jsx(TableHead, { children: "Diensten" }), _jsx(TableHead, { children: "Afname-eenheid" }), _jsx(TableHead, { children: "Valuta" }), _jsx(TableHead, { children: "Berekening" }), _jsx(TableHead, { className: "w-[52px]" })] }) }), _jsx(TableBody, { children: isLoading ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 9, className: "text-center py-8 text-muted-foreground text-sm", children: "Laden\u2026" }) })) : pageRows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 9, children: _jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx("div", { className: "h-12 w-12 rounded-full bg-muted flex items-center justify-center mb-3", children: _jsx(Tag, { className: "h-5 w-5 text-muted-foreground" }) }), _jsx("div", { className: "font-medium", children: "Geen prijsgroepen gevonden" }), _jsx("div", { className: "text-sm text-muted-foreground mt-1", children: groups.length === 0
+                                                                ? "Voeg je eerste prijsgroep toe om te beginnen."
+                                                                : "Pas je filters aan of voeg een nieuwe prijsgroep toe." }), _jsx(Button, { asChild: true, className: "mt-4", children: _jsxs(Link, { to: "/klanten/prijsgroepen/nieuw", children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), "Prijsgroep toevoegen"] }) })] }) }) })) : (_jsx(SortableContext, { items: pageRows.map((g) => g.id), strategy: verticalListSortingStrategy, children: pageRows.map((g) => (_jsx(SortableRow, { g: g, onEdit: () => navigate({ to: "/klanten/prijsgroepen/$id", params: { id: g.id } }), onMembers: () => setMembersFor(g.id), onDelete: () => {
+                                                    if (confirm(`Prijsgroep "${g.name}" verwijderen?`))
+                                                        deleteMut.mutate(g.id);
+                                                }, onDuplicate: () => duplicateMut.mutate(g), onToggleActive: () => toggleActiveMut.mutate(g) }, g.id))) })) })] }) }) }), _jsxs("div", { className: "flex items-center justify-between gap-3 flex-wrap px-4 py-3 border-t text-sm", children: [_jsxs("div", { className: "text-muted-foreground", children: [total, " prijsgroep", total === 1 ? "" : "en"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Per pagina" }), _jsxs(Select, { value: String(pageSize), onValueChange: (v) => { setPageSize(Number(v)); resetPage(); }, children: [_jsx(SelectTrigger, { className: "w-20", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: [10, 25, 50, 100].map((n) => (_jsx(SelectItem, { value: String(n), children: n }, n))) })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: currentPage <= 1, children: [_jsx(ChevronLeft, { className: "h-4 w-4 mr-1" }), "Vorige"] }), _jsxs("span", { className: "text-muted-foreground tabular-nums", children: [currentPage, " / ", totalPages] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setPage((p) => Math.min(totalPages, p + 1)), disabled: currentPage >= totalPages, children: ["Volgende", _jsx(ChevronRight, { className: "h-4 w-4 ml-1" })] })] })] })] }), membersFor && (_jsx(CustomerPickerDialog, { priceGroupId: membersFor, open: !!membersFor, onOpenChange: (o) => { if (!o)
+                    setMembersFor(null); } }))] }));
+}

package/dist-lib/components/klanten/pricegroups/ProductPickerDialog.d.ts

@@ -0,0 +1,8 @@
+import type { TradeItemPreview } from "../../../lib/floriday-trade-items.functions";
+export declare function ProductPickerDialog({ open, onOpenChange, items, onSelect, }: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    items: TradeItemPreview[];
+    onSelect: (item: TradeItemPreview) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ProductPickerDialog.d.ts.map

package/dist-lib/components/klanten/pricegroups/ProductPickerDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/klanten/pricegroups/ProductPickerDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAEpF,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,GACpC,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC5C,+BA0DA"}

package/dist-lib/components/klanten/pricegroups/ProductPickerDialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, Input, } from "@flowselections/core";
+import { ImageIcon, Search } from "lucide-react";
+export function ProductPickerDialog({ open, onOpenChange, items, onSelect, }) {
+    const [q, setQ] = useState("");
+    const filtered = useMemo(() => {
+        const s = q.trim().toLowerCase();
+        if (!s)
+            return items;
+        return items.filter((i) => i.name.toLowerCase().includes(s) ||
+            (i.vbn_code ?? "").toLowerCase().includes(s));
+    }, [items, q]);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Kies een product voor de voorbeeldberekening" }) }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { autoFocus: true, placeholder: "Zoek op naam of VBN-code", value: q, onChange: (e) => setQ(e.target.value), className: "pl-9" })] }), _jsxs("div", { className: "max-h-[420px] overflow-y-auto -mx-2 px-2 divide-y", children: [filtered.length === 0 && (_jsx("div", { className: "text-sm text-muted-foreground py-6 text-center", children: "Geen producten gevonden." })), filtered.map((i) => (_jsxs("button", { type: "button", onClick: () => { onSelect(i); onOpenChange(false); }, className: "w-full flex items-center gap-3 py-2.5 text-left hover:bg-muted/40 rounded-md px-2", children: [_jsx("div", { className: "h-10 w-10 rounded bg-muted flex items-center justify-center overflow-hidden shrink-0", children: i.image_url
+                                        ? _jsx("img", { src: i.image_url, alt: "", className: "h-full w-full object-contain" })
+                                        : _jsx(ImageIcon, { className: "h-5 w-5 text-muted-foreground" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-medium truncate", children: i.name }), _jsxs("div", { className: "text-xs text-muted-foreground truncate", children: [[i.packaging_code, `${i.units_per_fust}×${i.packages_per_layer}×${i.layers_per_carrier}`, i.carrier_code]
+                                                    .filter(Boolean).join(" - "), i.vbn_code ? ` · ${i.vbn_code}` : ""] })] })] }, i.id)))] })] }) }));
+}

package/dist-lib/index.d.ts

@@ -8,5 +8,6 @@ export { NieuweKlant } from "./components/klanten/NieuweKlant";
 export { ImportKlanten } from "./components/klanten/ImportKlanten";
 export { KlantDetailRoute } from "./components/klanten/KlantDetailRoute";
 export { GroupedKlantDetailRoute } from "./components/klanten/GroupedKlantDetailRoute";
+export { PriceGroupsPage } from "./components/klanten/pricegroups/PriceGroupsPage";
 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;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;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAEvF,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;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,eAAO,MAAM,qBAAqB,EAAE,UAgBnC,CAAC"}

package/dist-lib/index.js

@@ -13,7 +13,7 @@
 //   3. Add your nav item — use `children` if you need a dropdown
 //   4. Done! You don't need to touch any other file for registration.
 // ============================================================================
-import { Users } from "lucide-react";
+import { Users, Tag } from "lucide-react";
 import { CustomerFieldsCard } from "./components/settings/CustomerFieldsCard";
 export * from "./_core-safelist";
 export { KlantenOverzicht } from "./components/klanten/KlantenOverzicht";
@@ -24,6 +24,7 @@ export { NieuweKlant } from "./components/klanten/NieuweKlant";
 export { ImportKlanten } from "./components/klanten/ImportKlanten";
 export { KlantDetailRoute } from "./components/klanten/KlantDetailRoute";
 export { GroupedKlantDetailRoute } from "./components/klanten/GroupedKlantDetailRoute";
+export { PriceGroupsPage } from "./components/klanten/pricegroups/PriceGroupsPage";
 export const floridayKlantenModule = {
     id: "customers",
     name: "Klanten",
@@ -32,6 +33,10 @@ export const floridayKlantenModule = {
         label: "Klanten",
         href: "/klanten",
         icon: Users,
+        children: [
+            { label: "Overzicht", href: "/klanten", icon: Users },
+            { label: "Prijsgroepen", href: "/klanten/prijsgroepen", icon: Tag },
+        ],
     },
     settingsCards: [
         { component: CustomerFieldsCard, order: 10 },