@flowselections/floriday-verkoop-module 1.0.6 → 1.0.8

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Button, Checkbox, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
+import { X } from "lucide-react";
+export function countActiveFilters(f) {
+    let n = 0;
+    if (f.handelsvorm)
+        n++;
+    if (f.klant)
+        n++;
+    if (f.voorraadlocatie)
+        n++;
+    if (f.kanaal)
+        n++;
+    if (f.financieleAfhandeling)
+        n++;
+    if (f.onvolledigVerrekend)
+        n++;
+    if (f.artikel)
+        n++;
+    if (f.daytrade)
+        n++;
+    if (f.orderReferentie)
+        n++;
+    return n;
+}
+export function SalesOrdersFilterPanel({ open, onOpenChange, value, onChange, }) {
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onOpenChange(false);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [open, onOpenChange]);
+    const clearAll = () => {
+        onChange({
+            ...value,
+            handelsvorm: undefined,
+            klant: undefined,
+            voorraadlocatie: undefined,
+            kanaal: undefined,
+            financieleAfhandeling: undefined,
+            onvolledigVerrekend: undefined,
+            artikel: undefined,
+            daytrade: undefined,
+            orderReferentie: undefined,
+        });
+    };
+    const activeCount = countActiveFilters(value);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/30 transition-opacity " +
+                    (open ? "opacity-100" : "pointer-events-none opacity-0"), onClick: () => onOpenChange(false), "aria-hidden": true }), _jsxs("aside", { className: "fixed right-0 top-0 z-50 flex h-full w-full max-w-sm flex-col border-l border-border bg-card shadow-xl transition-transform " +
+                    (open ? "translate-x-0" : "translate-x-full"), role: "dialog", "aria-label": "Filters", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-5 py-4", children: [_jsx("h2", { className: "text-base font-semibold text-foreground", children: "Filters" }), _jsx("button", { type: "button", onClick: () => onOpenChange(false), className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Sluiten", children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: [_jsx("button", { type: "button", onClick: clearAll, disabled: activeCount === 0, className: "mb-4 text-sm " +
+                                    (activeCount === 0
+                                        ? "cursor-not-allowed text-muted-foreground/60"
+                                        : "text-primary hover:underline"), children: "Wis alle filters" }), _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-sm font-semibold", children: "Klant" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("span", { className: "inline-flex h-7 items-center rounded-full border border-border bg-background px-3 text-xs text-muted-foreground", children: "Connecties" }), _jsx("span", { className: "inline-flex h-7 items-center rounded-full border border-primary/40 bg-primary/10 px-3 text-xs font-medium text-primary", children: "Alle klanten" })] }), _jsxs(Select, { value: value.klant ?? "all", onValueChange: (v) => onChange({ ...value, klant: v === "all" ? undefined : v }), children: [_jsx(SelectTrigger, { className: "h-10 w-full", children: _jsx(SelectValue, { placeholder: "Kies een klant" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "all", children: "Kies een klant" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-sm font-semibold", children: "Handelsvorm" }), _jsxs(Select, { value: value.handelsvorm ?? "all", onValueChange: (v) => onChange({ ...value, handelsvorm: v === "all" ? undefined : v }), children: [_jsx(SelectTrigger, { className: "h-10 w-full", children: _jsx(SelectValue, { placeholder: "- Alles -" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "- Alles -" }), _jsx(SelectItem, { value: "klok", children: "Klok" }), _jsx(SelectItem, { value: "direct", children: "Direct" })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-sm font-semibold", children: "Voorraadlocatie" }), _jsxs(Select, { value: value.voorraadlocatie ?? "all", onValueChange: (v) => onChange({ ...value, voorraadlocatie: v === "all" ? undefined : v }), children: [_jsx(SelectTrigger, { className: "h-10 w-full", children: _jsx(SelectValue, { placeholder: "- Alle voorraadlocaties -" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "all", children: "- Alle voorraadlocaties -" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-sm font-semibold", children: "Kanaal" }), _jsxs(Select, { value: value.kanaal ?? "all", onValueChange: (v) => onChange({ ...value, kanaal: v === "all" ? undefined : v }), children: [_jsx(SelectTrigger, { className: "h-10 w-full", children: _jsx(SelectValue, { placeholder: "- Alle verkoopkanalen -" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "all", children: "- Alle verkoopkanalen -" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-sm font-semibold", children: "Financi\u00EBle afhandeling" }), _jsxs(Select, { value: value.financieleAfhandeling ?? "all", onValueChange: (v) => onChange({ ...value, financieleAfhandeling: v === "all" ? undefined : v }), children: [_jsx(SelectTrigger, { className: "h-10 w-full", children: _jsx(SelectValue, { placeholder: "- Financi\u00EBle afhandeling -" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "all", children: "- Financi\u00EBle afhandeling -" }) })] }), _jsxs("label", { className: "flex items-center gap-2 pt-1 text-sm text-foreground", children: [_jsx(Checkbox, { checked: !!value.onvolledigVerrekend, onCheckedChange: (c) => onChange({ ...value, onvolledigVerrekend: c === true ? true : undefined }) }), _jsx("span", { children: "Onvolledig verrekend" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-sm font-semibold", children: "Artikel" }), _jsxs(Select, { value: value.artikel ?? "all", onValueChange: (v) => onChange({ ...value, artikel: v === "all" ? undefined : v }), children: [_jsx(SelectTrigger, { className: "h-10 w-full", children: _jsx(SelectValue, { placeholder: "- Alle artikelen -" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "all", children: "- Alle artikelen -" }) })] }), _jsxs("label", { className: "flex items-center gap-2 pt-1 text-sm text-foreground", children: [_jsx(Checkbox, { checked: !!value.daytrade, onCheckedChange: (c) => onChange({ ...value, daytrade: c === true ? true : undefined }) }), _jsx("span", { children: "Daytrade transacties" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-sm font-semibold", children: "Order-referentie" }), _jsx(Input, { placeholder: "Order-referentie", value: value.orderReferentie ?? "", onChange: (e) => onChange({
+                                                    ...value,
+                                                    orderReferentie: e.target.value ? e.target.value : undefined,
+                                                }), className: "h-10" })] })] })] }), _jsx("div", { className: "border-t border-border px-5 py-3", children: _jsx(Button, { className: "w-full", onClick: () => onOpenChange(false), children: "Toepassen" }) })] })] }));
+}

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

@@ -6,8 +6,21 @@ export interface Filters {
     handelsvorm?: string;
     klant?: string;
     voorraadlocatie?: string;
+    kanaal?: string;
+    financieleAfhandeling?: string;
+    onvolledigVerrekend?: boolean;
+    artikel?: string;
+    daytrade?: boolean;
+    orderReferentie?: string;
     week?: number;
     year?: number;
+    month?: number;
+    monthYear?: number;
+    day?: string;
+    customFrom?: string;
+    customTo?: string;
+    dateField?: "ordered" | "delivery";
+    period?: "week" | "month" | "day" | "last7" | "last30" | "custom";
 }
 export declare function SalesOrdersFilters({ value, onChange, }: {
     value: Filters;

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

@@ -1 +1 @@
-{"version":3,"file":"SalesOrdersFilters.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersFilters.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,OAAO;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAcD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,2CAkLA"}
+{"version":3,"file":"SalesOrdersFilters.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersFilters.tsx"],"names":[],"mappings":"AA8BA,MAAM,WAAW,OAAO;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;CACnE;AAoCD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,2CA4PA"}

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

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
-import { ChevronLeft, ChevronRight, MoreVertical, ShoppingCart, Truck, Filter, Search, } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
+import { ChevronDown, ChevronLeft, ChevronRight, MoreVertical, ShoppingCart, Truck, Search, } from "lucide-react";
+import { WeekCalendar } from "./WeekCalendar";
 function getCurrentWeek() {
     const now = new Date();
     const target = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
@@ -12,29 +13,128 @@ function getCurrentWeek() {
         Math.round(((target.getTime() - firstThursday.getTime()) / 86400000 - 3 + ((firstThursday.getUTCDay() + 6) % 7)) / 7);
     return { week, year: target.getUTCFullYear() };
 }
+function getCurrentMonth() {
+    const now = new Date();
+    return { month: now.getMonth(), year: now.getFullYear() };
+}
+const MONTHS_NL = [
+    "januari", "februari", "maart", "april", "mei", "juni",
+    "juli", "augustus", "september", "oktober", "november", "december",
+];
+function generateMonthOptions() {
+    const now = new Date();
+    const currentYear = now.getFullYear();
+    const options = [];
+    for (let y = currentYear - 2; y <= currentYear + 2; y++) {
+        for (let m = 0; m < 12; m++) {
+            options.push({ label: `${MONTHS_NL[m]} ${y}`, value: `${y}-${m}` });
+        }
+    }
+    return options;
+}
 export function SalesOrdersFilters({ value, onChange, }) {
-    const current = getCurrentWeek();
-    const week = value.week ?? current.week;
-    const year = value.year ?? current.year;
+    const currentWeek = getCurrentWeek();
+    const week = value.week ?? currentWeek.week;
+    const year = value.year ?? currentWeek.year;
+    const currentMonth = getCurrentMonth();
+    const month = value.month ?? currentMonth.month;
+    const monthYear = value.monthYear ?? currentMonth.year;
+    const period = value.period ?? "week";
+    const todayYmd = (() => {
+        const n = new Date();
+        return `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, "0")}-${String(n.getDate()).padStart(2, "0")}`;
+    })();
+    const day = value.day ?? todayYmd;
     const [search, setSearch] = useState(value.search ?? "");
-    const shiftWeek = (delta) => {
-        let w = week + delta;
-        let y = year;
-        if (w < 1) {
-            w = 52;
-            y -= 1;
-        }
-        else if (w > 53) {
-            w = 1;
-            y += 1;
-        }
-        onChange({ ...value, week: w, year: y });
+    const monthOptions = generateMonthOptions();
+    const formatDayNL = (ymd) => {
+        const [y, m, d] = ymd.split("-").map(Number);
+        const dt = new Date(Date.UTC(y, (m ?? 1) - 1, d ?? 1));
+        return `${String(dt.getUTCDate()).padStart(2, "0")} ${MONTHS_NL[dt.getUTCMonth()]} ${dt.getUTCFullYear()}`;
+    };
+    const shiftPeriod = (delta) => {
+        if (period === "month") {
+            let m = month + delta;
+            let y = monthYear;
+            if (m < 0) {
+                m = 11;
+                y -= 1;
+            }
+            else if (m > 11) {
+                m = 0;
+                y += 1;
+            }
+            onChange({ ...value, month: m, monthYear: y });
+        }
+        else if (period === "day") {
+            const [y, m, d] = day.split("-").map(Number);
+            const dt = new Date(Date.UTC(y, m - 1, d));
+            dt.setUTCDate(dt.getUTCDate() + delta);
+            const ymd = `${dt.getUTCFullYear()}-${String(dt.getUTCMonth() + 1).padStart(2, "0")}-${String(dt.getUTCDate()).padStart(2, "0")}`;
+            onChange({ ...value, day: ymd });
+        }
+        else if (period === "week") {
+            let w = week + delta;
+            let y = year;
+            if (w < 1) {
+                w = 52;
+                y -= 1;
+            }
+            else if (w > 53) {
+                w = 1;
+                y += 1;
+            }
+            onChange({ ...value, week: w, year: y });
+        }
+    };
+    const handlePeriodChange = (nextPeriod) => {
+        const base = { ...value, period: nextPeriod };
+        if (nextPeriod === "month" && (base.month === undefined || base.monthYear === undefined)) {
+            const cm = getCurrentMonth();
+            base.month = cm.month;
+            base.monthYear = cm.year;
+        }
+        if (nextPeriod === "week" && (base.week === undefined || base.year === undefined)) {
+            const cw = getCurrentWeek();
+            base.week = cw.week;
+            base.year = cw.year;
+        }
+        if (nextPeriod === "day" && !base.day) {
+            base.day = todayYmd;
+        }
+        if (nextPeriod === "custom") {
+            if (!base.customFrom)
+                base.customFrom = todayYmd;
+            if (!base.customTo)
+                base.customTo = todayYmd;
+        }
+        onChange(base);
+    };
+    const periodLabel = () => {
+        if (period === "month")
+            return `${MONTHS_NL[month]} ${monthYear}`;
+        if (period === "day")
+            return formatDayNL(day);
+        if (period === "last7")
+            return "Afgelopen 7 dagen";
+        if (period === "last30")
+            return "Afgelopen 30 dagen";
+        if (period === "custom")
+            return "Aangepast tijdsbestek";
+        return `Week ${week}, ${year}`;
     };
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "flex h-9 items-center gap-1 rounded-md border border-border bg-card px-1", children: [_jsx("button", { type: "button", onClick: () => shiftWeek(-1), className: "inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Vorige week", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => shiftWeek(1), className: "inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Volgende week", children: _jsx(ChevronRight, { className: "h-4 w-4" }) }), _jsxs("div", { className: "px-2 text-sm font-medium text-foreground whitespace-nowrap", children: ["Week ", week, " - ", year] }), _jsx("button", { type: "button", className: "inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Meer", children: _jsx(MoreVertical, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex h-9 items-center rounded-md border border-border bg-card", children: [_jsx("button", { type: "button", className: "inline-flex h-9 w-9 items-center justify-center rounded-l-md border-r border-border bg-accent text-foreground", "aria-label": "Bestellingen", children: _jsx(ShoppingCart, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", className: "inline-flex h-9 w-9 items-center justify-center border-r border-border text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Leveringen", children: _jsx(Truck, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", className: "inline-flex h-9 w-9 items-center justify-center rounded-r-md text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Filter", children: _jsx(Filter, { className: "h-4 w-4" }) })] }), _jsxs(Select, { value: value.handelsvorm ?? "all", onValueChange: (v) => onChange({ ...value, handelsvorm: v === "all" ? undefined : v }), children: [_jsx(SelectTrigger, { className: "h-9 w-40", children: _jsx(SelectValue, { placeholder: "- Handelsvorm -" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "- Handelsvorm -" }), _jsx(SelectItem, { value: "klok", children: "Klok" }), _jsx(SelectItem, { value: "direct", children: "Direct" })] })] }), _jsxs(Select, { value: value.klant ?? "all", onValueChange: (v) => onChange({ ...value, klant: v === "all" ? undefined : v }), children: [_jsx(SelectTrigger, { className: "h-9 w-44", children: _jsx(SelectValue, { placeholder: "- Alle klanten -" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "all", children: "- Alle klanten -" }) })] }), _jsxs(Select, { value: value.voorraadlocatie ?? "all", onValueChange: (v) => onChange({ ...value, voorraadlocatie: v === "all" ? undefined : v }), children: [_jsx(SelectTrigger, { className: "h-9 w-52", children: _jsx(SelectValue, { placeholder: "- Alle voorraadlocaties -" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "all", children: "- Alle voorraadlocaties -" }) })] }), _jsxs(Select, { value: value.status ?? "all", onValueChange: (v) => onChange({ ...value, status: v === "all" ? undefined : v }), children: [_jsx(SelectTrigger, { className: "h-9 w-36", children: _jsx(SelectValue, { placeholder: "Status" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle statussen" }), _jsx(SelectItem, { value: "open", children: "Open" }), _jsx(SelectItem, { value: "shipped", children: "Verzonden" }), _jsx(SelectItem, { value: "invoiced", children: "Gefactureerd" }), _jsx(SelectItem, { value: "cancelled", children: "Geannuleerd" })] })] }), _jsxs("div", { className: "flex h-9 items-center overflow-hidden rounded-md border border-border bg-card", children: [_jsx(Input, { placeholder: "Op briefnummer zoeken", value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
+    const showArrows = period === "week" || period === "month" || period === "day";
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "flex h-9 items-center gap-1 rounded-md border border-border bg-card px-1", children: [showArrows && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => shiftPeriod(-1), className: "inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Vorige", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => shiftPeriod(1), className: "inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Volgende", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })), period === "month" ? (_jsxs(Select, { value: `${monthYear}-${month}`, onValueChange: (v) => {
+                            const [y, m] = v.split("-").map(Number);
+                            onChange({ ...value, month: m, monthYear: y });
+                        }, children: [_jsx(SelectTrigger, { className: "h-7 w-36 border-0 bg-transparent px-2 text-sm font-medium text-foreground shadow-none focus:ring-0", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: monthOptions.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })) : period === "day" ? (_jsx(Input, { type: "date", value: day, onChange: (e) => onChange({ ...value, day: e.target.value }), className: "h-7 w-40 border-0 bg-transparent px-2 text-sm font-medium text-foreground shadow-none focus-visible:ring-0" })) : period === "custom" ? (_jsxs("div", { className: "flex items-center gap-1 px-2", children: [_jsx(Input, { type: "date", value: value.customFrom ?? todayYmd, onChange: (e) => onChange({ ...value, customFrom: e.target.value }), className: "h-7 w-36 border-0 bg-transparent px-1 text-sm font-medium text-foreground shadow-none focus-visible:ring-0" }), _jsx("span", { className: "text-muted-foreground", children: "\u2013" }), _jsx(Input, { type: "date", value: value.customTo ?? todayYmd, onChange: (e) => onChange({ ...value, customTo: e.target.value }), className: "h-7 w-36 border-0 bg-transparent px-1 text-sm font-medium text-foreground shadow-none focus-visible:ring-0" })] })) : period === "last7" || period === "last30" ? (_jsx("span", { className: "px-2 text-sm font-medium text-foreground whitespace-nowrap", children: period === "last7" ? "Afgelopen 7 dagen" : "Afgelopen 30 dagen" })) : (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "px-2 text-sm font-medium text-foreground whitespace-nowrap rounded hover:bg-accent h-7", "aria-label": "Kies week", children: ["Week ", week, " - ", year] }) }), _jsx(PopoverContent, { className: "w-auto p-0 pointer-events-auto", align: "start", children: _jsx(WeekCalendar, { week: week, year: year, onSelect: (w, y) => onChange({ ...value, week: w, year: y }) }) })] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Periode-opties", children: _jsx(MoreVertical, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsxs(DropdownMenuRadioGroup, { value: period, onValueChange: (v) => handlePeriodChange(v), children: [_jsx(DropdownMenuRadioItem, { value: "day", children: "Dag" }), _jsx(DropdownMenuRadioItem, { value: "week", children: "Week" }), _jsx(DropdownMenuRadioItem, { value: "month", children: "Maand" }), _jsx(DropdownMenuRadioItem, { value: "last7", children: "Afgelopen 7 dagen" }), _jsx(DropdownMenuRadioItem, { value: "last30", children: "Afgelopen 30 dagen" }), _jsx(DropdownMenuRadioItem, { value: "custom", children: "Aangepast tijdsbestek" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs("div", { className: "px-2 py-1.5 text-sm text-muted-foreground inline-flex items-center gap-1", children: [periodLabel(), _jsx(ChevronDown, { className: "h-3.5 w-3.5" })] })] })] })] }), _jsxs("div", { className: "flex h-9 items-center rounded-md border border-border bg-card", children: [_jsx("button", { type: "button", onClick: () => onChange({ ...value, dateField: "ordered" }), className: "inline-flex h-9 w-9 items-center justify-center rounded-l-md border-r border-border " +
+                            ((value.dateField ?? "ordered") === "ordered"
+                                ? "bg-accent text-foreground"
+                                : "text-muted-foreground hover:bg-accent hover:text-foreground"), "aria-label": "Filter op besteldatum", title: "Filter op besteldatum", "aria-pressed": (value.dateField ?? "ordered") === "ordered", children: _jsx(ShoppingCart, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onChange({ ...value, dateField: "delivery" }), className: "inline-flex h-9 w-9 items-center justify-center rounded-r-md " +
+                            (value.dateField === "delivery"
+                                ? "bg-accent text-foreground"
+                                : "text-muted-foreground hover:bg-accent hover:text-foreground"), "aria-label": "Filter op transportdatum", title: "Filter op transportdatum", "aria-pressed": value.dateField === "delivery", children: _jsx(Truck, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex h-9 items-center overflow-hidden rounded-md border border-border bg-card", children: [_jsx(Input, { placeholder: "Op briefnummer zoeken", value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
                             if (e.key === "Enter")
                                 onChange({ ...value, search });
-                        }, onBlur: () => onChange({ ...value, search }), className: "h-9 w-56 border-0 shadow-none focus-visible:ring-0" }), _jsx("button", { type: "button", onClick: () => onChange({ ...value, search }), className: "inline-flex h-9 w-10 items-center justify-center bg-primary text-primary-foreground hover:opacity-90", "aria-label": "Zoeken", children: _jsx(Search, { className: "h-4 w-4" }) })] }), (value.search || value.status || value.handelsvorm || value.klant || value.voorraadlocatie) && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
-                    setSearch("");
-                    onChange({ week, year });
-                }, children: "Wissen" }))] }));
+                        }, onBlur: () => onChange({ ...value, search }), className: "h-9 w-56 border-0 shadow-none focus-visible:ring-0" }), _jsx("button", { type: "button", onClick: () => onChange({ ...value, search }), className: "inline-flex h-9 w-10 items-center justify-center bg-primary text-primary-foreground hover:opacity-90", "aria-label": "Zoeken", children: _jsx(Search, { className: "h-4 w-4" }) })] })] }));
 }

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

@@ -1,6 +1,7 @@
-import type { SalesOrderDTO } from "../../lib/floriday/sales-orders.functions";
-export declare function SalesOrdersTable({ orders, loading, }: {
+import type { SalesOrderDTO } from "../../lib/salesorders-mapping";
+export declare function SalesOrdersTable({ orders, loading, onSelectOrder, }: {
     orders: SalesOrderDTO[];
     loading?: boolean;
+    onSelectOrder?: (order: SalesOrderDTO) => void;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SalesOrdersTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SalesOrdersTable.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersTable.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AA6E/E,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,GACR,EAAE;IACD,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAkJA"}
+{"version":3,"file":"SalesOrdersTable.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/SalesOrdersTable.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AA6EnE,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE;IACD,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAChD,2CA6JA"}

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

@@ -64,7 +64,7 @@ function StatusBadges({ status }) {
     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))) }));
 }
-export function SalesOrdersTable({ orders, loading, }) {
+export function SalesOrdersTable({ orders, loading, onSelectOrder, }) {
     const [selected, setSelected] = useState(new Set());
     const allChecked = orders.length > 0 && selected.size === orders.length;
     const toggle = (id) => setSelected((s) => {
@@ -76,8 +76,8 @@ export function SalesOrdersTable({ orders, 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 &&
                             orders.map((o) => {
                                 const ordered = formatDateShort(o.orderedAt);
-                                return (_jsxs(TableRow, { className: "align-top", children: [_jsx(TableCell, { 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 ? (
+                                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: [_jsx("div", { className: "font-medium text-foreground", children: o.customer.name }), _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, { 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));
+                                                        _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));
                             })] })] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"VerkoopOrdersPage.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/VerkoopOrdersPage.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,iBAAiB,4CAwGhC"}
+{"version":3,"file":"VerkoopOrdersPage.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/VerkoopOrdersPage.tsx"],"names":[],"mappings":"AA4DA,wBAAgB,iBAAiB,4CAwRhC"}

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

@@ -1,40 +1,101 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
+import { Download, Plus, AlertTriangle, RefreshCw, ChevronLeft, ChevronRight, Filter, } from "lucide-react";
 import { useServerFn } from "@tanstack/react-start";
-import { Button, toast } from "@flowselections/core";
-import { Download, Plus, AlertTriangle } from "lucide-react";
-import { listSalesOrders, exportSalesOrders, } from "../../lib/floriday/sales-orders.functions";
+import { useNavigate } from "@tanstack/react-router";
+import { runSalesOrdersSync } from "../../lib/salesorders.functions";
+import { runTradeItemsSync } from "../../lib/tradeitems.functions";
+import { applyFilters, computeTotals, ordersToCsv, } from "../../lib/salesorders-mapping";
+import { useSalesOrdersQuery } from "../../lib/useSalesOrdersQuery";
 import { AnalyticsCards } from "./AnalyticsCards";
-import { SalesOrdersFilters, } from "./SalesOrdersFilters";
+import { SalesOrdersFilters } from "./SalesOrdersFilters";
+import { SalesOrdersFilterPanel, countActiveFilters, } from "./SalesOrdersFilterPanel";
 import { SalesOrdersTable } from "./SalesOrdersTable";
-import { CreateOrderDialog } from "./CreateOrderDialog";
-const TABS = [
-    { id: "overzicht", label: "Overzicht" },
-    { id: "correcties", label: "Correcties" },
-    { id: "geplande", label: "Geplande orders", badge: 2 },
+const STATUS_TABS = [
+    { id: "all", label: "Alle" },
+    { id: "open", label: "Open" },
+    { id: "shipped", label: "Verzonden" },
+    { id: "invoiced", label: "Gefactureerd" },
+    { id: "cancelled", label: "Geannuleerd" },
 ];
+function matchesStatus(o, tab) {
+    if (tab === "all")
+        return true;
+    if (tab === "cancelled")
+        return o.status.isCancelled;
+    if (tab === "shipped")
+        return o.status.isShipped;
+    if (tab === "invoiced")
+        return o.status.isInvoiced;
+    if (tab === "open")
+        return !o.status.isCancelled && !o.status.isShipped;
+    return true;
+}
 export function VerkoopOrdersPage() {
-    const [tab, setTab] = useState("overzicht");
-    const [filters, setFilters] = useState({});
-    const [createOpen, setCreateOpen] = useState(false);
-    const fetchOrders = useServerFn(listSalesOrders);
-    const exportFn = useServerFn(exportSalesOrders);
-    const apiFilters = useMemo(() => ({
-        search: filters.search,
-        status: filters.status,
-        from: filters.from,
-        to: filters.to,
-    }), [filters]);
-    const { data, isLoading, error, refetch, isFetching } = useQuery({
-        queryKey: ["floriday", "sales-orders", apiFilters],
-        queryFn: () => fetchOrders({ data: apiFilters }),
-        staleTime: 30000,
+    const [tab, setTab] = useState("all");
+    const [filterPanelOpen, setFilterPanelOpen] = useState(false);
+    const [filters, setFilters] = useState(() => {
+        const now = new Date();
+        const target = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+        const dayNr = (target.getUTCDay() + 6) % 7;
+        target.setUTCDate(target.getUTCDate() - dayNr + 3);
+        const firstThursday = new Date(Date.UTC(target.getUTCFullYear(), 0, 4));
+        const week = 1 +
+            Math.round(((target.getTime() - firstThursday.getTime()) / 86400000 -
+                3 +
+                ((firstThursday.getUTCDay() + 6) % 7)) /
+                7);
+        return { week, year: target.getUTCFullYear(), dateField: "ordered", period: "week" };
     });
-    const handleExport = async () => {
+    const [syncing, setSyncing] = useState(false);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(20);
+    const navigate = useNavigate();
+    const triggerSync = useServerFn(runSalesOrdersSync);
+    const triggerTradeItemsSync = useServerFn(runTradeItemsSync);
+    const { data, isLoading, error, refetch, isFetching } = useSalesOrdersQuery();
+    const orders = data?.orders ?? [];
+    const statusFiltered = useMemo(() => orders.filter((o) => matchesStatus(o, tab)), [orders, tab]);
+    const filtered = useMemo(() => applyFilters(statusFiltered, filters), [statusFiltered, filters]);
+    const totals = useMemo(() => computeTotals(filtered), [filtered]);
+    const statusCounts = useMemo(() => {
+        const base = applyFilters(orders, filters);
+        const counts = {
+            all: base.length,
+            open: 0,
+            shipped: 0,
+            invoiced: 0,
+            cancelled: 0,
+        };
+        for (const o of base) {
+            if (o.status.isCancelled)
+                counts.cancelled++;
+            else if (o.status.isShipped)
+                counts.shipped++;
+            else
+                counts.open++;
+            if (o.status.isInvoiced)
+                counts.invoiced++;
+        }
+        return counts;
+    }, [orders, filters]);
+    const activeFilterCount = countActiveFilters(filters);
+    const totalCount = filtered.length;
+    const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+    useEffect(() => {
+        if (page > totalPages)
+            setPage(totalPages);
+    }, [page, totalPages]);
+    // Reset naar pagina 1 als filters wijzigen
+    useEffect(() => {
+        setPage(1);
+    }, [filters, pageSize]);
+    const paged = useMemo(() => filtered.slice((page - 1) * pageSize, page * pageSize), [filtered, page, pageSize]);
+    const handleExport = () => {
         try {
-            const { csv, filename } = await exportFn({ data: apiFilters });
-            const blob = new Blob(["" + csv], { type: "text/csv;charset=utf-8" });
+            const { csv, filename } = ordersToCsv(filtered);
+            const blob = new Blob(["\ufeff" + csv], { type: "text/csv;charset=utf-8" });
             const url = URL.createObjectURL(blob);
             const a = document.createElement("a");
             a.href = url;
@@ -47,11 +108,41 @@ export function VerkoopOrdersPage() {
             toast.error(e?.message ?? "Export mislukt");
         }
     };
-    return (_jsxs("main", { className: "space-y-5 p-6", children: [_jsx("div", { className: "flex items-center justify-between border-b border-border", children: _jsx("div", { className: "flex items-center gap-6", children: TABS.map((t) => {
+    const handleSync = async () => {
+        try {
+            setSyncing(true);
+            const [orders, items] = await Promise.all([
+                triggerSync(),
+                triggerTradeItemsSync(),
+            ]);
+            const syncedOrders = orders.results.reduce((s, x) => s + x.synced, 0);
+            const syncedItems = items.results.reduce((s, x) => s + x.synced, 0);
+            toast.success(`Sync klaar — ${syncedOrders} order(s), ${syncedItems} artikel(en) bijgewerkt`);
+            await refetch();
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Sync mislukt");
+        }
+        finally {
+            setSyncing(false);
+        }
+    };
+    return (_jsxs("main", { className: "space-y-5 p-6", children: [_jsx("div", { className: "flex items-center justify-between border-b border-border", children: _jsx("div", { className: "flex items-center gap-6 overflow-x-auto", children: STATUS_TABS.map((t) => {
                         const active = tab === t.id;
-                        return (_jsxs("button", { type: "button", onClick: () => setTab(t.id), className: "relative -mb-px flex items-center gap-2 border-b-2 px-1 pb-3 pt-1 text-sm transition-colors " +
+                        const count = statusCounts[t.id];
+                        return (_jsxs("button", { type: "button", onClick: () => setTab(t.id), className: "relative -mb-px flex items-center gap-2 whitespace-nowrap border-b-2 px-1 pb-3 pt-1 text-sm transition-colors " +
                                 (active
                                     ? "border-primary font-semibold text-foreground"
-                                    : "border-transparent text-muted-foreground hover:text-foreground"), children: [_jsx("span", { children: t.label }), t.badge ? (_jsx("span", { className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground", children: t.badge })) : null] }, t.id));
-                    }) }) }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(SalesOrdersFilters, { value: filters, onChange: setFilters }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: handleExport, children: [_jsx(Download, { className: "mr-2 h-4 w-4" }), " Exporteren"] }), _jsxs(Button, { size: "sm", onClick: () => setCreateOpen(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Bestelling aanmaken"] })] })] }), _jsx(AnalyticsCards, { totals: data?.totals, loading: isLoading }), error && (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-5 w-5 shrink-0 text-destructive" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium text-destructive", children: "Floriday gegevens konden niet geladen worden" }), _jsx("div", { className: "mt-1 text-muted-foreground", children: error.message })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => refetch(), disabled: isFetching, children: "Opnieuw proberen" })] })), _jsx(SalesOrdersTable, { orders: data?.orders ?? [], loading: isLoading }), _jsx(CreateOrderDialog, { open: createOpen, onOpenChange: setCreateOpen })] }));
+                                    : "border-transparent text-muted-foreground hover:text-foreground"), children: [_jsx("span", { children: t.label }), _jsx("span", { className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] font-semibold " +
+                                        (active
+                                            ? "bg-primary text-primary-foreground"
+                                            : "bg-muted text-muted-foreground"), children: count })] }, t.id));
+                    }) }) }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(SalesOrdersFilters, { value: filters, onChange: setFilters }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setFilterPanelOpen(true), "aria-label": "Filters", children: [_jsx(Filter, { className: "mr-2 h-4 w-4" }), "Filters", activeFilterCount > 0 && (_jsx("span", { className: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground", children: activeFilterCount }))] }), _jsx(Button, { variant: "outline", size: "icon", onClick: handleSync, disabled: syncing, "aria-label": "Synchroniseren", title: "Synchroniseren", children: _jsx(RefreshCw, { className: "h-4 w-4 " + (syncing ? "animate-spin" : "") }) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleExport, children: [_jsx(Download, { className: "mr-2 h-4 w-4" }), " Exporteren"] }), _jsxs(Button, { size: "sm", onClick: () => navigate({ to: "/floriday-verkoop/verkooporders/nieuw" }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Bestelling aanmaken"] })] })] }), _jsx(AnalyticsCards, { totals: totals, loading: isLoading }), error && (_jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-5 w-5 shrink-0 text-destructive" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium text-destructive", children: "Floriday gegevens konden niet geladen worden" }), _jsx("div", { className: "mt-1 text-muted-foreground", children: error.message })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => refetch(), disabled: isFetching, children: "Opnieuw proberen" })] })), _jsx(SalesOrdersTable, { orders: paged, loading: isLoading, onSelectOrder: (o) => navigate({
+                    to: "/floriday-verkoop/verkooporders/$salesOrderId",
+                    params: { salesOrderId: o.id },
+                }) }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground", children: [_jsx("div", { children: totalCount === 0
+                            ? "Geen resultaten"
+                            : totalCount === 1
+                                ? "1 resultaat"
+                                : `${totalCount} resultaten` }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Resultaten per pagina" }), _jsxs(Select, { value: String(pageSize), onValueChange: (v) => setPageSize(Number(v)), children: [_jsx(SelectTrigger, { className: "h-8 w-20", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: [10, 20, 50, 100].map((n) => (_jsx(SelectItem, { value: String(n), children: n }, n))) })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1, "aria-label": "Vorige pagina", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "px-2 text-foreground", children: [page, " / ", totalPages] }), _jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => setPage((p) => Math.min(totalPages, p + 1)), disabled: page >= totalPages, "aria-label": "Volgende pagina", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })] })] }), _jsx(SalesOrdersFilterPanel, { open: filterPanelOpen, onOpenChange: setFilterPanelOpen, value: filters, onChange: setFilters })] }));
 }

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

@@ -0,0 +1,6 @@
+export declare function WeekCalendar({ week, year, onSelect, }: {
+    week: number;
+    year: number;
+    onSelect: (week: number, year: number) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WeekCalendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WeekCalendar.d.ts","sourceRoot":"","sources":["../../../src/components/verkoop/WeekCalendar.tsx"],"names":[],"mappings":"AAiDA,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,2CAqJA"}