@flowselections/floriday-verkoop-module 1.0.10 → 1.0.12

package/dist-lib/components/verkoop/SalesOrdersTable.js

@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Badge, Checkbox, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@flowselections/core";
-import { MoreVertical, Package, CheckCircle2, XCircle, Truck, FileText, ImageIcon, ArrowDown, } from "lucide-react";
-const eur = new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR" });
+import { MoreVertical, Package, ArrowDown } from "lucide-react";
 function formatDateShort(iso) {
     if (!iso)
         return { date: "—", time: "" };
@@ -30,39 +29,21 @@ function formatDateLong(iso) {
         minute: "2-digit",
     });
 }
-function StatusBadges({ status }) {
-    const items = [
-        {
-            key: "cancelled",
-            active: status.isCancelled,
-            icon: XCircle,
-            label: "Geannuleerd",
-            classes: "bg-destructive/10 text-destructive",
-        },
-        {
-            key: "shipped",
-            active: status.isShipped,
-            icon: Truck,
-            label: "Verzonden",
-            classes: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
-        },
-        {
-            key: "confirmed",
-            active: status.isConfirmed,
-            icon: CheckCircle2,
-            label: "Bevestigd",
-            classes: "bg-primary/10 text-primary",
-        },
-        {
-            key: "invoiced",
-            active: status.isInvoiced,
-            icon: FileText,
-            label: "Gefactureerd",
-            classes: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
-        },
-    ];
-    return (_jsx("div", { className: "flex items-center gap-1", children: items.map((it) => (_jsx("span", { title: it.label, className: "inline-flex h-7 w-7 items-center justify-center rounded-md " +
-                (it.active ? it.classes : "bg-muted text-muted-foreground/40"), children: _jsx(it.icon, { className: "h-4 w-4" }) }, it.key))) }));
+function StatusTag({ status, rawOrder, }) {
+    const rawStatus = String(rawOrder?.status ?? "").toUpperCase();
+    if (status.isCancelled || rawStatus === "CANCELLED") {
+        return (_jsx(Badge, { variant: "outline", className: "border-destructive/30 bg-destructive/10 text-destructive", children: "Geannuleerd" }));
+    }
+    if (rawStatus === "DELIVERED" || (status.isShipped && status.isInvoiced)) {
+        return (_jsx(Badge, { variant: "outline", className: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400", children: "Geleverd" }));
+    }
+    if (rawStatus === "SHIPPED" || status.isShipped) {
+        return (_jsx(Badge, { variant: "outline", className: "border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400", children: "Onderweg" }));
+    }
+    if (rawStatus === "COMMITTED" || status.isConfirmed) {
+        return (_jsx(Badge, { variant: "outline", className: "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400", children: "Verzend klaar" }));
+    }
+    return (_jsx(Badge, { variant: "outline", className: "border-muted-foreground/30 bg-muted text-muted-foreground", children: "Nog picken" }));
 }
 export function SalesOrdersTable({ orders, loading, onSelectOrder, }) {
     const [selected, setSelected] = useState(new Set());
@@ -72,12 +53,10 @@ export function SalesOrdersTable({ orders, loading, onSelectOrder, }) {
         n.has(id) ? n.delete(id) : n.add(id);
         return n;
     });
-    return (_jsx("div", { className: "rounded-lg border border-border bg-card", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { checked: allChecked, onCheckedChange: (v) => setSelected(v === true ? new Set(orders.map((o) => o.id)) : new Set()) }) }), _jsx(TableHead, { children: "Order" }), _jsx(TableHead, { children: _jsxs("span", { className: "inline-flex items-center gap-1", children: ["Bestelmoment ", _jsx(ArrowDown, { className: "h-3 w-3" })] }) }), _jsx(TableHead, { children: "Aantal" }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Levering" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "w-10" })] }) }), _jsxs(TableBody, { children: [loading &&
-                            Array.from({ length: 6 }).map((_, i) => (_jsx(TableRow, { children: Array.from({ length: 8 }).map((__, j) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-6 w-full" }) }, j))) }, `s-${i}`))), !loading && orders.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, className: "py-12 text-center text-muted-foreground", children: "Geen verkooporders gevonden." }) })), !loading &&
+    return (_jsx("div", { className: "rounded-lg border border-border bg-card", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { checked: allChecked, onCheckedChange: (v) => setSelected(v === true ? new Set(orders.map((o) => o.id)) : new Set()) }) }), _jsx(TableHead, { children: "Omzet" }), _jsx(TableHead, { children: _jsxs("span", { className: "inline-flex items-center gap-1", children: ["Bestelmoment ", _jsx(ArrowDown, { className: "h-3 w-3" })] }) }), _jsx(TableHead, { children: "Karren" }), _jsx(TableHead, { children: "Fusten" }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Levering" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "w-10" })] }) }), _jsxs(TableBody, { children: [loading &&
+                            Array.from({ length: 6 }).map((_, i) => (_jsx(TableRow, { children: Array.from({ length: 9 }).map((__, j) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-6 w-full" }) }, j))) }, `s-${i}`))), !loading && orders.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 9, className: "py-12 text-center text-muted-foreground", children: "Geen verkooporders gevonden." }) })), !loading &&
                             orders.map((o) => {
                                 const ordered = formatDateShort(o.orderedAt);
-                                return (_jsxs(TableRow, { className: "align-top cursor-pointer", onClick: () => onSelectOrder?.(o), children: [_jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selected.has(o.id), onCheckedChange: () => toggle(o.id) }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted", children: o.imageUrl ? (
-                                                        // eslint-disable-next-line @next/next/no-img-element
-                                                        _jsx("img", { src: o.imageUrl, alt: "", className: "h-full w-full object-cover" })) : (_jsx(ImageIcon, { className: "h-5 w-5 text-muted-foreground" })) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium text-foreground", children: o.productName }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: o.sku || o.orderNumber })] })] }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "h-4 w-4 text-primary" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-foreground", children: ordered.date }), _jsx("div", { className: "text-xs text-muted-foreground", children: ordered.time })] })] }) }), _jsxs(TableCell, { children: [_jsxs("div", { className: "font-medium text-foreground", children: [o.quantity.multiplier, " \u00D7 ", o.quantity.count, " \u00D7 ", eur.format(o.quantity.unitPrice)] }), _jsx("div", { className: "text-xs text-muted-foreground", children: eur.format(o.revenue) })] }), _jsxs(TableCell, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-foreground", children: o.customer.name }), o.isLocal && (_jsx(Badge, { variant: "outline", className: "border-primary/30 text-primary", children: "Lokaal" }))] }), _jsx("div", { className: "text-xs text-muted-foreground", children: [o.customer.postalCode, o.customer.city].filter(Boolean).join(" ") })] }), _jsx(TableCell, { className: "text-sm text-foreground", children: formatDateLong(o.deliveryAt) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StatusBadges, { status: o.status }), o.orderNumber && (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: o.orderNumber }))] }) }), _jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(MoreVertical, { className: "h-4 w-4" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { children: "Bewerken" }), _jsx(DropdownMenuItem, { children: "Details bekijken" }), _jsx(DropdownMenuItem, { children: "Bevestigen" }), _jsx(DropdownMenuItem, { className: "text-destructive focus:text-destructive", children: "Annuleren" })] })] }) })] }, o.id));
+                                return (_jsxs(TableRow, { className: "align-top cursor-pointer", onClick: () => onSelectOrder?.(o), children: [_jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selected.has(o.id), onCheckedChange: () => toggle(o.id) }) }), _jsxs(TableCell, { children: [_jsxs("div", { className: "font-medium text-foreground", children: ["\u20AC ", o.revenue.toFixed(2)] }), o.orderNumber && (_jsx("div", { className: "text-xs text-muted-foreground", children: o.orderNumber }))] }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "h-4 w-4 text-primary" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-foreground", children: ordered.date }), _jsx("div", { className: "text-xs text-muted-foreground", children: ordered.time })] })] }) }), _jsx(TableCell, { children: _jsx("div", { className: "font-medium text-foreground", children: o.karCount }) }), _jsx(TableCell, { children: _jsx("div", { className: "font-medium text-foreground", children: o.fustCount }) }), _jsxs(TableCell, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-foreground", children: o.customer.name }), o.isLocal && (_jsx(Badge, { variant: "outline", className: "border-primary/30 text-primary", children: "Lokaal" }))] }), _jsx("div", { className: "text-xs text-muted-foreground", children: [o.customer.postalCode, o.customer.city].filter(Boolean).join(" ") })] }), _jsx(TableCell, { className: "text-sm text-foreground", children: formatDateLong(o.deliveryAt) }), _jsx(TableCell, { children: _jsx(StatusTag, { status: o.status, rawOrder: o.raw?.order }) }), _jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(MoreVertical, { className: "h-4 w-4" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { children: "Bewerken" }), _jsx(DropdownMenuItem, { children: "Details bekijken" }), _jsx(DropdownMenuItem, { children: "Bevestigen" }), _jsx(DropdownMenuItem, { className: "text-destructive focus:text-destructive", children: "Annuleren" })] })] }) })] }, o.id));
                             })] })] }) }));
 }

package/dist-lib/components/verkoop/SearchableSelect.d.ts

@@ -0,0 +1,19 @@
+export interface SearchableOption {
+    value: string;
+    label: string;
+    hint?: string | null;
+}
+interface SearchableSelectProps {
+    value: string | null;
+    options: SearchableOption[];
+    placeholder?: string;
+    emptyLabel?: string;
+    allowClear?: boolean;
+    clearLabel?: string;
+    onChange: (value: string | null) => void;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function SearchableSelect({ value, options, placeholder, emptyLabel, allowClear, clearLabel, onChange, className, disabled, }: SearchableSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SearchableSelect.d.ts.map

package/dist-lib/components/verkoop/SearchableSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SearchableSelect.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EAAE,OAAO,EAAE,WAAuB,EAAE,UAA6B,EACtE,UAAiB,EAAE,UAAiC,EACpD,QAAQ,EAAE,SAAS,EAAE,QAAgB,GACtC,EAAE,qBAAqB,2CAuFvB"}

package/dist-lib/components/verkoop/SearchableSelect.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button, Input, Popover, PopoverContent, PopoverTrigger, } from "@flowselections/core";
+import { Check, ChevronsUpDown, Search } from "lucide-react";
+export function SearchableSelect({ value, options, placeholder = "Kies...", emptyLabel = "Geen resultaat", allowClear = true, clearLabel = "— Geen koppeling —", onChange, className, disabled = false, }) {
+    const [open, setOpen] = useState(false);
+    const [q, setQ] = useState("");
+    const selected = useMemo(() => options.find((o) => o.value === value) ?? null, [options, value]);
+    const filtered = useMemo(() => {
+        const needle = q.trim().toLowerCase();
+        if (!needle)
+            return options.slice(0, 200);
+        return options
+            .filter((o) => o.label.toLowerCase().includes(needle) ||
+            (o.hint ?? "").toLowerCase().includes(needle))
+            .slice(0, 200);
+    }, [options, q]);
+    return (_jsxs(Popover, { open: open, onOpenChange: (o) => { if (disabled)
+            return; setOpen(o); if (!o)
+            setQ(""); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, disabled: disabled, className: `w-full justify-between font-normal ${className ?? ""}`, children: [_jsx("span", { className: `truncate ${selected ? "" : "text-muted-foreground"}`, children: selected?.label ?? placeholder }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", align: "start", children: [_jsx("div", { className: "p-2 border-b", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { autoFocus: true, value: q, onChange: (e) => setQ(e.target.value), placeholder: `Zoek in ${options.length} items...`, className: "pl-8 h-9" })] }) }), _jsxs("div", { className: "max-h-64 overflow-y-auto py-1", children: [allowClear && (_jsxs("button", { type: "button", className: "w-full text-left text-sm px-3 py-2 hover:bg-accent flex items-center gap-2", onClick: () => { onChange(null); setOpen(false); }, children: [value === null && _jsx(Check, { className: "h-3 w-3" }), _jsx("span", { className: "text-muted-foreground italic", children: clearLabel })] })), filtered.length === 0 ? (_jsx("div", { className: "px-3 py-6 text-sm text-muted-foreground text-center", children: emptyLabel })) : (filtered.map((o) => (_jsxs("button", { type: "button", className: "w-full text-left text-sm px-3 py-2 hover:bg-accent flex items-start gap-2", onClick: () => { onChange(o.value); setOpen(false); }, children: [_jsx(Check, { className: `h-3 w-3 mt-1 shrink-0 ${value === o.value ? "" : "invisible"}` }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "truncate", children: o.label }), o.hint && _jsx("div", { className: "text-xs text-muted-foreground truncate", children: o.hint })] })] }, o.value)))), filtered.length === 200 && (_jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground text-center border-t", children: "Toon eerste 200 resultaten \u2014 verfijn je zoekopdracht" }))] })] })] }));
+}