@flowselections/floriday-klanten-module 1.0.12 → 1.0.13

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 })] }) }));
+}