@flowselections/floriday-klanten-module 1.0.11 → 1.0.13

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Button, Input, Label, toast, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
+import { upsertLocalAgreement, upsertLocalSalesStrategy, upsertLocalPriceGroup, listLocalProducts, } from "../../lib/local-discounts.functions";
+export function LocalDiscountFormDialog({ open, onOpenChange, customerId, editing }) {
+    const qc = useQueryClient();
+    const listProducts = useServerFn(listLocalProducts);
+    const saveAgreement = useServerFn(upsertLocalAgreement);
+    const saveSalesStrategy = useServerFn(upsertLocalSalesStrategy);
+    const savePriceGroup = useServerFn(upsertLocalPriceGroup);
+    const { data: prodData } = useQuery({
+        queryKey: ["local-products"],
+        queryFn: () => listProducts(),
+        enabled: open,
+    });
+    const products = prodData?.products ?? [];
+    const [source, setSource] = useState("agreement");
+    const [productId, setProductId] = useState("");
+    const [basePrice, setBasePrice] = useState("");
+    const [netPrice, setNetPrice] = useState("");
+    const [discountType, setDiscountType] = useState("percentage");
+    const [discountValue, setDiscountValue] = useState("");
+    const [minQuantity, setMinQuantity] = useState("0");
+    const [validFrom, setValidFrom] = useState("");
+    const [validUntil, setValidUntil] = useState("");
+    const [notes, setNotes] = useState("");
+    const [currency] = useState("EUR");
+    useEffect(() => {
+        if (!open)
+            return;
+        if (editing) {
+            setSource(editing.source);
+            setProductId(editing.product_id ?? "");
+            setBasePrice(editing.base_price != null ? String(editing.base_price) : "");
+            setNetPrice(editing.net_price != null ? String(editing.net_price) : "");
+            setDiscountType(editing.discount_type ?? "percentage");
+            setDiscountValue(editing.discount_value != null ? String(editing.discount_value) : "");
+            setMinQuantity(String(editing.min_quantity ?? 0));
+            setValidFrom(editing.valid_from ?? "");
+            setValidUntil(editing.valid_until ?? "");
+            setNotes("");
+        }
+        else {
+            setSource("agreement");
+            setProductId("");
+            setBasePrice("");
+            setNetPrice("");
+            setDiscountValue("");
+            setDiscountType("percentage");
+            setMinQuantity("0");
+            setValidFrom("");
+            setValidUntil("");
+            setNotes("");
+        }
+    }, [open, editing]);
+    const save = useMutation({
+        mutationFn: async () => {
+            const common = {
+                id: editing?.source_id,
+                customer_id: customerId,
+                product_id: productId || null,
+                currency,
+                valid_from: validFrom || null,
+                valid_until: validUntil || null,
+                notes: notes || null,
+            };
+            if (source === "agreement") {
+                return saveAgreement({
+                    data: {
+                        ...common,
+                        base_price: basePrice ? Number(basePrice) : null,
+                        net_price: Number(netPrice),
+                        min_quantity: Number(minQuantity || 0),
+                    },
+                });
+            }
+            if (source === "sales_strategy") {
+                return saveSalesStrategy({
+                    data: {
+                        ...common,
+                        discount_type: discountType,
+                        discount_value: Number(discountValue),
+                        min_quantity: Number(minQuantity || 0),
+                    },
+                });
+            }
+            return savePriceGroup({
+                data: {
+                    ...common,
+                    discount_type: discountType,
+                    discount_value: Number(discountValue),
+                    min_quantity: Number(minQuantity || 0),
+                },
+            });
+        },
+        onSuccess: () => {
+            toast.success(editing ? "Korting bijgewerkt" : "Korting toegevoegd");
+            qc.invalidateQueries({ queryKey: ["local-discounts", customerId] });
+            onOpenChange(false);
+        },
+        onError: (err) => toast.error(err.message),
+    });
+    const canSave = (source === "agreement" ? !!netPrice : !!discountValue) && !save.isPending;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: editing ? "Korting bewerken" : "Nieuwe korting" }) }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Bron" }), _jsxs(Select, { value: source, onValueChange: (v) => setSource(v), disabled: !!editing, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "agreement", children: "Contract (vaste nettoprijs)" }), _jsx(SelectItem, { value: "sales_strategy", children: "Kortingsregel (%/bedrag)" }), _jsx(SelectItem, { value: "price_group", children: "Staffelkorting (o.b.v. hoeveelheid)" })] })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Product" }), _jsxs(Select, { value: productId, onValueChange: setProductId, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies een product" }) }), _jsx(SelectContent, { children: products.map((p) => (_jsxs(SelectItem, { value: p.id, children: [p.product, p.sale_price != null ? ` — € ${Number(p.sale_price).toFixed(2)}` : ""] }, p.id))) })] })] }), source === "agreement" ? (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Basisprijs (optioneel)" }), _jsx(Input, { type: "number", step: "0.01", value: basePrice, onChange: (e) => setBasePrice(e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Nettoprijs *" }), _jsx(Input, { type: "number", step: "0.01", value: netPrice, onChange: (e) => setNetPrice(e.target.value) })] })] })) : (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Type" }), _jsxs(Select, { value: discountType, onValueChange: (v) => setDiscountType(v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "percentage", children: "Percentage (%)" }), _jsx(SelectItem, { value: "amount", children: "Vast bedrag" })] })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Waarde *" }), _jsx(Input, { type: "number", step: "0.01", value: discountValue, onChange: (e) => setDiscountValue(e.target.value) })] })] })), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Min. hoeveelheid" }), _jsx(Input, { type: "number", step: "1", value: minQuantity, onChange: (e) => setMinQuantity(e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Geldig van" }), _jsx(Input, { type: "date", value: validFrom, onChange: (e) => setValidFrom(e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Geldig tot" }), _jsx(Input, { type: "date", value: validUntil, onChange: (e) => setValidUntil(e.target.value) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Notities" }), _jsx(Input, { value: notes, onChange: (e) => setNotes(e.target.value) })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Annuleren" }), _jsx(Button, { disabled: !canSave, onClick: () => save.mutate(), children: save.isPending ? "Opslaan…" : "Opslaan" })] })] }) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"LocalDiscountsTab.d.ts","sourceRoot":"","sources":["../../../src/components/klanten/LocalDiscountsTab.tsx"],"names":[],"mappings":"AAiDA,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,+BA2JvE"}

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

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Card, CardContent, Badge, Input, Button, toast, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
+import { Percent, FileText, Users, Plus, Pencil, Trash2 } from "lucide-react";
+import { listLocalCustomerDiscounts, deleteLocalDiscount, } from "../../lib/local-discounts.functions";
+import { LocalDiscountFormDialog } from "./LocalDiscountFormDialog";
+const SOURCE_LABEL = {
+    agreement: "Contract",
+    sales_strategy: "Kortingsregel",
+    price_group: "Staffel",
+};
+const SOURCE_ICON = {
+    agreement: _jsx(FileText, { className: "h-3 w-3" }),
+    sales_strategy: _jsx(Percent, { className: "h-3 w-3" }),
+    price_group: _jsx(Users, { className: "h-3 w-3" }),
+};
+function fmtMoney(v, currency = "EUR") {
+    if (v == null)
+        return "—";
+    try {
+        return new Intl.NumberFormat("nl-NL", { style: "currency", currency }).format(v);
+    }
+    catch {
+        return `${v.toFixed(2)} ${currency}`;
+    }
+}
+function fmtDiscount(row) {
+    if (row.discount_type == null || row.discount_value == null)
+        return "—";
+    return row.discount_type === "percentage"
+        ? `${row.discount_value}%`
+        : fmtMoney(row.discount_value, row.currency);
+}
+function fmtDate(v) {
+    if (!v)
+        return "—";
+    try {
+        return new Date(v).toLocaleDateString("nl-NL");
+    }
+    catch {
+        return v;
+    }
+}
+function isActiveOn(row, date) {
+    if (row.valid_from && row.valid_from > date)
+        return false;
+    if (row.valid_until && row.valid_until < date)
+        return false;
+    return true;
+}
+export function LocalDiscountsTab({ customerId }) {
+    const qc = useQueryClient();
+    const fn = useServerFn(listLocalCustomerDiscounts);
+    const del = useServerFn(deleteLocalDiscount);
+    const { data, isLoading, error } = useQuery({
+        queryKey: ["local-discounts", customerId],
+        queryFn: () => fn({ data: { customerId } }),
+    });
+    const [source, setSource] = useState("all");
+    const [search, setSearch] = useState("");
+    const [onlyActive, setOnlyActive] = useState(true);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editing, setEditing] = useState(null);
+    const today = new Date().toISOString().slice(0, 10);
+    const delMut = useMutation({
+        mutationFn: (row) => del({ data: { source: row.source, id: row.source_id } }),
+        onSuccess: () => {
+            toast.success("Korting verwijderd");
+            qc.invalidateQueries({ queryKey: ["local-discounts", customerId] });
+        },
+        onError: (err) => toast.error(err.message),
+    });
+    const filtered = useMemo(() => {
+        const rows = data?.rows ?? [];
+        return rows.filter((r) => {
+            if (source !== "all" && r.source !== source)
+                return false;
+            if (onlyActive && !isActiveOn(r, today))
+                return false;
+            if (search) {
+                const q = search.toLowerCase();
+                const hay = [r.product_name, r.product_id].filter(Boolean).join(" ").toLowerCase();
+                if (!hay.includes(q))
+                    return false;
+            }
+            return true;
+        });
+    }, [data, source, search, onlyActive, today]);
+    if (isLoading)
+        return _jsx(Card, { children: _jsx(CardContent, { className: "pt-6", children: "Kortingen laden\u2026" }) });
+    if (error) {
+        return (_jsx(Card, { children: _jsxs(CardContent, { className: "pt-6 text-sm text-destructive", children: ["Kortingen konden niet worden geladen: ", error.message] }) }));
+    }
+    const s = data?.summary;
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsx(SummaryCard, { label: "Contracten", value: s?.agreements ?? 0, icon: _jsx(FileText, { className: "h-4 w-4" }) }), _jsx(SummaryCard, { label: "Kortingsregels", value: s?.sales_strategies ?? 0, icon: _jsx(Percent, { className: "h-4 w-4" }) }), _jsx(SummaryCard, { label: "Staffels", value: s?.price_groups ?? 0, icon: _jsx(Users, { className: "h-4 w-4" }) })] }), _jsx(Card, { children: _jsxs(CardContent, { className: "pt-6 space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Input, { placeholder: "Zoek op product\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "max-w-xs" }), _jsxs(Select, { value: source, onValueChange: (v) => setSource(v), children: [_jsx(SelectTrigger, { className: "w-44", children: _jsx(SelectValue, { placeholder: "Bron" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle bronnen" }), _jsx(SelectItem, { value: "agreement", children: "Contract" }), _jsx(SelectItem, { value: "sales_strategy", children: "Kortingsregel" }), _jsx(SelectItem, { value: "price_group", children: "Staffel" })] })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: onlyActive, onChange: (e) => setOnlyActive(e.target.checked) }), "Alleen actief vandaag"] }), _jsxs(Button, { className: "ml-auto", size: "sm", onClick: () => { setEditing(null); setDialogOpen(true); }, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), " Nieuwe korting"] })] }), _jsx("div", { className: "rounded-md border overflow-x-auto", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Product" }), _jsx(TableHead, { children: "Bron" }), _jsx(TableHead, { className: "text-right", children: "Basisprijs" }), _jsx(TableHead, { className: "text-right", children: "Korting" }), _jsx(TableHead, { className: "text-right", children: "Netto" }), _jsx(TableHead, { children: "Geldig" }), _jsx(TableHead, { className: "text-right", children: "Min. hvh" }), _jsx(TableHead, { className: "w-20" })] }) }), _jsx(TableBody, { children: filtered.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "text-center text-muted-foreground py-6", children: "Nog geen kortingen voor deze klant." }) })) : filtered.map((r) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: r.product_name ?? "—" }), _jsx(TableCell, { children: _jsxs(Badge, { variant: "secondary", className: "gap-1", children: [SOURCE_ICON[r.source], SOURCE_LABEL[r.source]] }) }), _jsx(TableCell, { className: "text-right tabular-nums", children: fmtMoney(r.base_price, r.currency) }), _jsx(TableCell, { className: "text-right tabular-nums", children: fmtDiscount(r) }), _jsx(TableCell, { className: "text-right tabular-nums font-medium", children: fmtMoney(r.net_price, r.currency) }), _jsxs(TableCell, { className: "text-sm text-muted-foreground", children: [fmtDate(r.valid_from), " \u2013 ", fmtDate(r.valid_until)] }), _jsx(TableCell, { className: "text-right tabular-nums", children: r.min_quantity || "—" }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex gap-1 justify-end", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => { setEditing(r); setDialogOpen(true); }, children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => delMut.mutate(r), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }) })] }, `${r.source}-${r.source_id}`))) })] }) })] }) }), _jsx(LocalDiscountFormDialog, { open: dialogOpen, onOpenChange: setDialogOpen, customerId: customerId, editing: editing })] }));
+}
+function SummaryCard({ label, value, icon, }) {
+    return (_jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs uppercase text-muted-foreground", children: [icon, label] }), _jsx("div", { className: "text-2xl font-semibold mt-1", children: value })] }) }));
+}