@flowselections/mailbox-orders 1.0.13 → 1.0.14

package/dist-lib/components/MailboxFilterBar.d.ts

@@ -0,0 +1,31 @@
+/** State die bewaard blijft in localStorage (per pagina-sleutel). */
+export declare function usePersistedState<T>(key: string, initial: T): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];
+export type PeriodValue = "all" | "today" | "7d" | "30d";
+export type SortOrderValue = "date-desc" | "date-asc";
+/** Hoofdletter- en accent-ongevoelig normaliseren voor zoeken. */
+export declare function normalizeText(value: unknown): string;
+/** Valt een datum binnen de gekozen periode? */
+export declare function matchesPeriod(date: unknown, period: PeriodValue): boolean;
+interface Props {
+    search: string;
+    onSearchChange: (value: string) => void;
+    period: PeriodValue;
+    onPeriodChange: (value: PeriodValue) => void;
+    sortOrder: SortOrderValue;
+    onSortOrderChange: (value: SortOrderValue) => void;
+    status?: string;
+    onStatusChange?: (value: string) => void;
+    statusOptions?: {
+        value: string;
+        label: string;
+    }[];
+    filteredCount: number;
+    totalCount: number;
+    countLabel?: string;
+    onClear: () => void;
+    hasActiveFilters: boolean;
+    searchPlaceholder?: string;
+}
+export declare function MailboxFilterBar({ search, onSearchChange, period, onPeriodChange, sortOrder, onSortOrderChange, status, onStatusChange, statusOptions, filteredCount, totalCount, countLabel, onClear, hasActiveFilters, searchPlaceholder, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MailboxFilterBar.d.ts.map

package/dist-lib/components/MailboxFilterBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MailboxFilterBar.d.ts","sourceRoot":"","sources":["../../src/components/MailboxFilterBar.tsx"],"names":[],"mappings":"AAOA,qEAAqE;AACrE,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,6EAkB3D;AAED,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAC;AACzD,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,UAAU,CAAC;AAEtD,kEAAkE;AAClE,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAKpD;AAED,gDAAgD;AAChD,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,GAAG,OAAO,CAYzE;AAED,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,WAAW,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnD,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAoBD,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EAAE,cAAc,EACtB,MAAM,EAAE,cAAc,EACtB,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EAAE,cAAc,EAAE,aAAa,EACrC,aAAa,EAAE,UAAU,EAAE,UAA0B,EACrD,OAAO,EAAE,gBAAgB,EACzB,iBAAkE,GACnE,EAAE,KAAK,+BA6FP"}

package/dist-lib/components/MailboxFilterBar.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
+import { Search, X, ArrowDown, ArrowUp } from "lucide-react";
+import { useEffect, useState } from "react";
+/** State die bewaard blijft in localStorage (per pagina-sleutel). */
+export function usePersistedState(key, initial) {
+    const [value, setValue] = useState(initial);
+    const [hydrated, setHydrated] = useState(false);
+    useEffect(() => {
+        try {
+            const raw = window.localStorage.getItem(key);
+            if (raw !== null)
+                setValue(JSON.parse(raw));
+        }
+        catch { /* negeer */ }
+        setHydrated(true);
+    }, [key]);
+    useEffect(() => {
+        if (!hydrated)
+            return;
+        try {
+            window.localStorage.setItem(key, JSON.stringify(value));
+        }
+        catch { /* negeer */ }
+    }, [key, value, hydrated]);
+    return [value, setValue];
+}
+/** Hoofdletter- en accent-ongevoelig normaliseren voor zoeken. */
+export function normalizeText(value) {
+    return String(value ?? "")
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .toLowerCase();
+}
+/** Valt een datum binnen de gekozen periode? */
+export function matchesPeriod(date, period) {
+    if (period === "all")
+        return true;
+    if (!date)
+        return false;
+    const d = new Date(date);
+    if (Number.isNaN(d.getTime()))
+        return false;
+    const now = new Date();
+    if (period === "today") {
+        return d.toDateString() === now.toDateString();
+    }
+    const days = period === "7d" ? 7 : 30;
+    const from = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
+    return d.getTime() >= from.getTime();
+}
+function Chip({ label, onRemove }) {
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border bg-muted/40 px-2.5 py-1 text-xs", children: [label, _jsx("button", { type: "button", "aria-label": `${label} verwijderen`, onClick: onRemove, className: "text-muted-foreground hover:text-foreground", children: _jsx(X, { className: "h-3 w-3" }) })] }));
+}
+const PERIOD_LABELS = {
+    all: "Alle periodes",
+    today: "Vandaag",
+    "7d": "Laatste 7 dagen",
+    "30d": "Laatste 30 dagen",
+};
+export function MailboxFilterBar({ search, onSearchChange, period, onPeriodChange, sortOrder, onSortOrderChange, status, onStatusChange, statusOptions, filteredCount, totalCount, countLabel = "voorstellen", onClear, hasActiveFilters, searchPlaceholder = "Zoek op klant, afzender, onderwerp of tekst…", }) {
+    const sortIcon = sortOrder === "date-desc"
+        ? _jsx(ArrowDown, { className: "h-4 w-4 text-muted-foreground" })
+        : _jsx(ArrowUp, { className: "h-4 w-4 text-muted-foreground" });
+    const statusLabel = statusOptions?.find((o) => o.value === status)?.label;
+    return (_jsxs("div", { className: "flex flex-col gap-2 shrink-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative min-w-[240px] flex-1 max-w-md", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (e) => onSearchChange(e.target.value), placeholder: searchPlaceholder, className: "h-9 pl-8 pr-8" }), search && (_jsx("button", { type: "button", "aria-label": "Zoekopdracht wissen", className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", onClick: () => onSearchChange(""), children: _jsx(X, { className: "h-4 w-4" }) }))] }), _jsxs(Select, { value: period, onValueChange: (v) => onPeriodChange(v), children: [_jsx(SelectTrigger, { className: "h-9 w-[170px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle periodes" }), _jsx(SelectItem, { value: "today", children: "Vandaag" }), _jsx(SelectItem, { value: "7d", children: "Laatste 7 dagen" }), _jsx(SelectItem, { value: "30d", children: "Laatste 30 dagen" })] })] }), _jsxs(Select, { value: sortOrder, onValueChange: (v) => onSortOrderChange(v), children: [_jsxs(SelectTrigger, { className: "h-9 w-[210px] flex items-center gap-2", children: [sortIcon, _jsx(SelectValue, {})] }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "date-desc", children: "Datum: nieuwste eerst" }), _jsx(SelectItem, { value: "date-asc", children: "Datum: oudste eerst" })] })] }), statusOptions && onStatusChange && (_jsxs(Select, { value: status ?? "all", onValueChange: onStatusChange, children: [_jsx(SelectTrigger, { className: "h-9 w-[160px]", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: statusOptions.map((o) => (_jsx(SelectItem, { value: o.value, children: o.label }, o.value))) })] })), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsxs("span", { className: "text-sm text-muted-foreground", children: [filteredCount, " van ", totalCount, " ", countLabel] }), hasActiveFilters && (_jsx(Button, { size: "sm", variant: "ghost", onClick: onClear, children: "Filters wissen" }))] })] }), hasActiveFilters && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [search && _jsx(Chip, { label: `Zoeken: ${search}`, onRemove: () => onSearchChange("") }), period !== "all" && _jsx(Chip, { label: `Periode: ${PERIOD_LABELS[period]}`, onRemove: () => onPeriodChange("all") }), status && status !== "all" && onStatusChange && (_jsx(Chip, { label: `Status: ${statusLabel ?? status}`, onRemove: () => onStatusChange("all") })), sortOrder !== "date-desc" && (_jsx(Chip, { label: "Sortering: oudste eerst", onRemove: () => onSortOrderChange("date-desc") })), _jsx("button", { type: "button", onClick: onClear, className: "text-xs text-primary underline underline-offset-2", children: "Alles wissen" })] }))] }));
+}

package/dist-lib/components/MailboxProcessedPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MailboxProcessedPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxProcessedPage.tsx"],"names":[],"mappings":"AAYA,wBAAgB,oBAAoB,gCA6GnC"}
+{"version":3,"file":"MailboxProcessedPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxProcessedPage.tsx"],"names":[],"mappings":"AAaA,wBAAgB,oBAAoB,gCA4KnC"}

package/dist-lib/components/MailboxProcessedPage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 import { toast } from "sonner";
@@ -7,6 +7,7 @@ import { Badge, Button, Card, CardContent, Table, TableBody, TableCell, TableHea
 import { listProposals, reopenProposal, getActiveOrdersMailbox } from "../lib/mailbox.functions";
 import { MailboxAuthBanner } from "./MailboxAuthBanner";
 import { TablePagination } from "./TablePagination";
+import { MailboxFilterBar, usePersistedState, normalizeText, matchesPeriod } from "./MailboxFilterBar";
 export function MailboxProcessedPage() {
     const fetchList = useServerFn(listProposals);
     const reopen = useServerFn(reopenProposal);
@@ -29,13 +30,44 @@ export function MailboxProcessedPage() {
     const items = [
         ...(Array.isArray(approved.data?.items) ? approved.data.items : []),
         ...(Array.isArray(rejected.data?.items) ? rejected.data.items : []),
-    ].sort((a, b) => (b.reviewed_at ?? "").localeCompare(a.reviewed_at ?? ""));
+    ];
     const [busyId, setBusyId] = useState(null);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(25);
-    const pageCount = Math.max(1, Math.ceil(items.length / pageSize));
+    const [search, setSearch] = usePersistedState("mailbox-processed:search", "");
+    const [period, setPeriod] = usePersistedState("mailbox-processed:period", "all");
+    const [sortOrder, setSortOrder] = usePersistedState("mailbox-processed:sort", "date-desc");
+    const [statusFilter, setStatusFilter] = usePersistedState("mailbox-processed:status", "all");
+    const customerNameFor = (p) => p.mailbox_messages?.from_name || p.mailbox_messages?.from_email || "Onbekend";
+    const filteredItems = useMemo(() => {
+        const q = normalizeText(search).trim();
+        const filtered = items.filter((p) => {
+            if (statusFilter !== "all" && p.status !== statusFilter)
+                return false;
+            if (!matchesPeriod(p.reviewed_at, period))
+                return false;
+            if (!q)
+                return true;
+            const haystack = normalizeText([
+                customerNameFor(p),
+                p.mailbox_messages?.from_email,
+                p.mailbox_messages?.subject,
+                p.mailbox_messages?.preview,
+            ].join(" "));
+            return q.split(/\s+/).every((token) => haystack.includes(token));
+        });
+        return filtered.sort((a, b) => {
+            const aDate = a.reviewed_at ?? "";
+            const bDate = b.reviewed_at ?? "";
+            return sortOrder === "date-desc" ? bDate.localeCompare(aDate) : aDate.localeCompare(bDate);
+        });
+    }, [items, search, period, sortOrder, statusFilter]);
+    const hasActiveFilters = !!search || period !== "all" || sortOrder !== "date-desc" || statusFilter !== "all";
+    const clearFilters = () => { setSearch(""); setPeriod("all"); setSortOrder("date-desc"); setStatusFilter("all"); };
+    useEffect(() => { setPage(1); }, [search, period, sortOrder, statusFilter]);
+    const pageCount = Math.max(1, Math.ceil(filteredItems.length / pageSize));
     const currentPage = Math.min(page, pageCount);
-    const pagedItems = items.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+    const pagedItems = filteredItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
     const handleReopen = async (proposalId) => {
         setBusyId(proposalId);
         try {
@@ -50,5 +82,9 @@ export function MailboxProcessedPage() {
             setBusyId(null);
         }
     };
-    return (_jsxs("div", { className: "p-6 flex flex-col gap-4 flex-1 min-h-0 overflow-hidden", children: [_jsx(MailboxAuthBanner, { active: activeMailbox }), _jsx("h1", { className: "text-2xl font-semibold shrink-0", children: "Verwerkt" }), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]", children: _jsx(Card, { children: _jsxs(CardContent, { className: "p-0", children: [items.length === 0 ? (_jsx("div", { className: "p-8 text-center text-muted-foreground", children: "Nog geen verwerkte voorstellen." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Afzender" }), _jsx(TableHead, { children: "Onderwerp" }), _jsx(TableHead, { children: "Verwerkt op" }), _jsx(TableHead, { className: "text-right", children: "Acties" })] }) }), _jsx(TableBody, { children: pagedItems.map((p) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Badge, { variant: p.status === "approved" ? "default" : "destructive", children: p.status === "approved" ? "Goedgekeurd" : "Afgewezen" }) }), _jsx(TableCell, { children: p.mailbox_messages?.from_email ?? "-" }), _jsx(TableCell, { className: "max-w-md truncate", children: p.mailbox_messages?.subject ?? "-" }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: p.reviewed_at ? new Date(p.reviewed_at).toLocaleString("nl-NL") : "-" }), _jsx(TableCell, { className: "text-right space-x-2", children: p.status === "rejected" && (_jsx(Button, { size: "sm", variant: "outline", disabled: busyId === p.id, onClick: () => handleReopen(p.id), children: busyId === p.id ? "Bezig..." : "Terugzetten" })) })] }, p.id))) })] })), items.length > 0 && (_jsx(TablePagination, { total: items.length, page: currentPage, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize }))] }) }) })] }));
+    return (_jsxs("div", { className: "p-6 flex flex-col gap-4 flex-1 min-h-0 overflow-hidden", children: [_jsx(MailboxAuthBanner, { active: activeMailbox }), _jsx("h1", { className: "text-2xl font-semibold shrink-0", children: "Verwerkt" }), items.length > 0 && (_jsx(MailboxFilterBar, { search: search, onSearchChange: setSearch, period: period, onPeriodChange: setPeriod, sortOrder: sortOrder, onSortOrderChange: setSortOrder, status: statusFilter, onStatusChange: setStatusFilter, statusOptions: [
+                    { value: "all", label: "Alle statussen" },
+                    { value: "approved", label: "Goedgekeurd" },
+                    { value: "rejected", label: "Afgewezen" },
+                ], filteredCount: filteredItems.length, totalCount: items.length, countLabel: "mails", onClear: clearFilters, hasActiveFilters: hasActiveFilters })), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]", children: _jsx(Card, { children: _jsxs(CardContent, { className: "p-0", children: [items.length === 0 ? (_jsx("div", { className: "p-8 text-center text-muted-foreground", children: "Nog geen verwerkte voorstellen." })) : filteredItems.length === 0 ? (_jsx("div", { className: "p-8 text-center text-muted-foreground", children: "Geen mails gevonden voor deze zoekopdracht." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Afzender" }), _jsx(TableHead, { children: "Onderwerp" }), _jsx(TableHead, { children: "Verwerkt op" }), _jsx(TableHead, { className: "text-right", children: "Acties" })] }) }), _jsx(TableBody, { children: pagedItems.map((p) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Badge, { variant: p.status === "approved" ? "default" : "destructive", children: p.status === "approved" ? "Goedgekeurd" : "Afgewezen" }) }), _jsx(TableCell, { children: p.mailbox_messages?.from_email ?? "-" }), _jsxs(TableCell, { className: "max-w-md", children: [_jsx("div", { className: "truncate", children: p.mailbox_messages?.subject ?? "-" }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: p.mailbox_messages?.preview || "" })] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: p.reviewed_at ? new Date(p.reviewed_at).toLocaleString("nl-NL") : "-" }), _jsx(TableCell, { className: "text-right space-x-2", children: p.status === "rejected" && (_jsx(Button, { size: "sm", variant: "outline", disabled: busyId === p.id, onClick: () => handleReopen(p.id), children: busyId === p.id ? "Bezig..." : "Terugzetten" })) })] }, p.id))) })] })), items.length > 0 && (_jsx(TablePagination, { total: filteredItems.length, page: currentPage, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize }))] }) }) })] }));
 }

package/dist-lib/components/MailboxProposalsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MailboxProposalsPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxProposalsPage.tsx"],"names":[],"mappings":"AA2FA,6EAA6E;AAC7E,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AA2CD,wBAAgB,oBAAoB,gCAqbnC"}
+{"version":3,"file":"MailboxProposalsPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxProposalsPage.tsx"],"names":[],"mappings":"AA6FA,6EAA6E;AAC7E,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AA2CD,wBAAgB,oBAAoB,gCA8bnC"}

package/dist-lib/components/MailboxProposalsPage.js

@@ -5,13 +5,14 @@ import { useServerFn } from "@tanstack/react-start";
 import { Button, Badge, Card, CardContent, CardHeader, CardTitle, Input, Label, Textarea, Switch, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Dialog, DialogContent, DialogHeader, DialogTitle, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, } from "@flowselections/core";
 import { Check, X, Trash2, Plus, AlertTriangle, RefreshCw } from "lucide-react";
 import { computeEarliestDelivery, isValidDeliveryDate } from "../lib/delivery-date";
-import { listProposals, getProposalDetail, approveProposal, rejectProposal, listCustomersForPicker, createCustomerFromGroup, listProductsForPicker, listDeliveryLocationsForCustomer, listPickupLocations, listCarriersForPicker, getOrderPickDays, getActiveOrdersMailbox, syncMailboxNow, getLastIngestRun, refreshProposalsForAgentChange, reparseProposalNow, listBeladingOptionsForProducts, listAllowedLoadCarriers, } from "../lib/mailbox.functions";
+import { listProposals, getProposalDetail, approveProposal, rejectProposal, listCustomersForPicker, createCustomerFromGroup, listProductsForPicker, listDeliveryLocationsForCustomer, listPickupLocations, listCarriersForPicker, getOrderPickDays, getActiveOrdersMailbox, syncMailboxNow, refreshProposalsForAgentChange, reparseProposalNow, listBeladingOptionsForProducts, listAllowedLoadCarriers, } from "../lib/mailbox.functions";
 import { enabledLoadCarriers, normalizeAllowedLoadCarriers, EMPTY_LOAD_CARRIERS } from "../lib/load-carriers";
 import { listTemplateFields, listPlantTypesForPicker, listSuppliersForPicker, } from "../lib/mailbox-template.functions";
 import { SearchableSelect } from "./SearchableSelect";
 import { MailboxAuthBanner } from "./MailboxAuthBanner";
 import { EmailPreview } from "./EmailPreview";
 import { TablePagination } from "./TablePagination";
+import { MailboxFilterBar, usePersistedState, normalizeText, matchesPeriod } from "./MailboxFilterBar";
 import { supabase } from "../integrations/supabase/client";
 const beladingKey = (b) => `${b.plants_per_crate}x${b.crates_per_layer}x${b.layers_per_cart}|${b.crate_code ?? ""}|${b.carrier_code ?? ""}`;
 const beladingLabel = (b) => `${b.plants_per_crate} planten/fust · ${b.crates_per_layer} fusten/laag · ${b.layers_per_cart} lagen`;
@@ -88,7 +89,6 @@ export function MailboxProposalsPage() {
     const fetchPickupLocations = useServerFn(listPickupLocations);
     const fetchActive = useServerFn(getActiveOrdersMailbox);
     const fetchSync = useServerFn(syncMailboxNow);
-    const fetchLastRun = useServerFn(getLastIngestRun);
     // Server fns met requireSupabaseAuth gooien een raw Response bij een stale
     // bearer-token. Die bubbelt op als "[object Response]" en blankt het scherm.
     // Vang elke fout en geef een lege fallback terug — UI blijft bruikbaar.
@@ -105,6 +105,9 @@ export function MailboxProposalsPage() {
     const [activeId, setActiveId] = useState(null);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(25);
+    const [search, setSearch] = usePersistedState("mailbox-proposals:search", "");
+    const [period, setPeriod] = usePersistedState("mailbox-proposals:period", "all");
+    const [sortOrder, setSortOrder] = usePersistedState("mailbox-proposals:sort", "date-desc");
     const [refsEnabled, setRefsEnabled] = useState(false);
     useEffect(() => { if (activeId)
         setRefsEnabled(true); }, [activeId]);
@@ -168,22 +171,9 @@ export function MailboxProposalsPage() {
         onSuccess: (res) => {
             if (res?.ok && ((res.inserted ?? 0) > 0 || (res.processed ?? 0) > 0)) {
                 qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
-                qc.invalidateQueries({ queryKey: ["mailbox-last-ingest-run"] });
             }
         },
     });
-    const handleManualSync = () => {
-        const p = syncMut.mutateAsync("manual");
-        toast.promise(p, {
-            loading: "Mailbox synchroniseren...",
-            success: (res) => res?.ok
-                ? (res.inserted ?? 0) > 0
-                    ? `${res.inserted} nieuwe bestelling(en) opgehaald`
-                    : "Geen nieuwe bestellingen"
-                : `Sync mislukt: ${res?.error ?? "onbekende fout"}`,
-            error: "Sync mislukt",
-        });
-    };
     // Realtime hint: zodra er een nieuw event binnenkomt vragen we de server om
     // het meteen te verwerken (zelfde pipeline). Cron is de garantiestrook.
     useEffect(() => {
@@ -212,13 +202,6 @@ export function MailboxProposalsPage() {
         return () => clearInterval(t);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeMailboxId]);
-    // Laatste ingest-run tonen voor observability.
-    const { data: lastRunData } = useQuery({
-        queryKey: ["mailbox-last-ingest-run"],
-        queryFn: () => safe(() => fetchLastRun()),
-        refetchInterval: 60000,
-    });
-    const lastRun = lastRunData?.run ?? null;
     // AI-agent gewijzigd? Dan worden openstaande voorstellen automatisch opnieuw
     // geanalyseerd met de nieuwste agent. Server-side draait dit ook elke
     // cron-run; hier reageren we direct op wijzigingen in de AI-module.
@@ -283,9 +266,6 @@ export function MailboxProposalsPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const items = Array.isArray(data?.items) ? data.items : [];
-    const pageCount = Math.max(1, Math.ceil(items.length / pageSize));
-    const currentPage = Math.min(page, pageCount);
-    const pagedItems = items.slice((currentPage - 1) * pageSize, currentPage * pageSize);
     const template = Array.isArray(templateData?.items) ? templateData.items : [];
     const customers = Array.isArray(customersData?.items) ? customersData.items : [];
     const products = Array.isArray(productsData?.items) ? productsData.items : [];
@@ -310,12 +290,42 @@ export function MailboxProposalsPage() {
         }
         return p.mailbox_messages?.from_name || p.mailbox_messages?.from_email || "Onbekend";
     };
-    return (_jsxs("div", { className: "p-6 flex flex-col gap-4 flex-1 min-h-0 overflow-hidden", children: [_jsx(MailboxAuthBanner, { active: activeMailbox }), _jsxs("div", { className: "flex items-center justify-between shrink-0", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Bestelvoorstellen" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Nieuw binnengekomen bestellingen die nog handmatig gecontroleerd moeten worden." })] }), _jsxs("div", { className: "flex items-center gap-3", children: [lastRun?.finished_at && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["Laatste sync: ", new Date(lastRun.finished_at).toLocaleTimeString("nl-NL"), " \u2014 ", lastRun.processed, " verwerkt", lastRun.errors > 0 ? `, ${lastRun.errors} fouten` : ""] })), _jsxs(Button, { onClick: handleManualSync, disabled: syncMut.isPending, variant: "outline", children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${syncMut.isPending ? "animate-spin" : ""}` }), "Sync nu"] })] })] }), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]", children: isLoading ? (_jsx("div", { className: "text-muted-foreground", children: "Laden..." })) : listError ? (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-4 text-sm", children: [_jsx("p", { className: "font-medium text-destructive", children: "Bestellingen konden niet worden opgehaald." }), _jsxs("p", { className: "text-muted-foreground mt-1", children: [listError?.message ?? "Onbekende fout", " \u2014 de lijst is niet leeg, alleen niet geladen."] }), _jsx(Button, { size: "sm", variant: "outline", className: "mt-3", onClick: () => void refetchList(), children: "Opnieuw proberen" })] })) : items.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: "Geen bestellingen te controleren." })) : (_jsx(Card, { children: _jsxs(CardContent, { className: "p-0", children: [_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Klantnaam" }), _jsx(TableHead, { children: "Orderdatum" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "text-right", children: "Orderwaarde" })] }) }), _jsx(TableBody, { children: pagedItems.map((p) => {
+    // --- Zoeken, filteren en sorteren --------------------------------------
+    const filteredItems = useMemo(() => {
+        const q = normalizeText(search).trim();
+        const filtered = items.filter((p) => {
+            const name = customerNameFor(p);
+            if (!matchesPeriod(p.mailbox_messages?.received_at ?? p.created_at, period))
+                return false;
+            if (!q)
+                return true;
+            const haystack = normalizeText([
+                name,
+                p.mailbox_messages?.from_email,
+                p.mailbox_messages?.from_name,
+                p.mailbox_messages?.subject,
+                p.mailbox_messages?.preview,
+            ].join(" "));
+            return q.split(/\s+/).every((token) => haystack.includes(token));
+        });
+        return filtered.sort((a, b) => {
+            const aDate = a.mailbox_messages?.received_at ?? a.created_at ?? "";
+            const bDate = b.mailbox_messages?.received_at ?? b.created_at ?? "";
+            return sortOrder === "date-desc" ? bDate.localeCompare(aDate) : aDate.localeCompare(bDate);
+        });
+    }, [items, customers, search, sortOrder, period]);
+    const hasActiveFilters = !!search || period !== "all" || sortOrder !== "date-desc";
+    const clearFilters = () => { setSearch(""); setPeriod("all"); setSortOrder("date-desc"); };
+    useEffect(() => { setPage(1); }, [search, period, sortOrder]);
+    const pageCount = Math.max(1, Math.ceil(filteredItems.length / pageSize));
+    const currentPage = Math.min(page, pageCount);
+    const pagedItems = filteredItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+    return (_jsxs("div", { className: "p-6 flex flex-col gap-4 flex-1 min-h-0 overflow-hidden", children: [_jsx(MailboxAuthBanner, { active: activeMailbox }), _jsx("div", { className: "flex items-center justify-between shrink-0", children: _jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Bestelvoorstellen" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Nieuw binnengekomen bestellingen die nog handmatig gecontroleerd moeten worden." })] }) }), items.length > 0 && (_jsx(MailboxFilterBar, { search: search, onSearchChange: setSearch, period: period, onPeriodChange: setPeriod, sortOrder: sortOrder, onSortOrderChange: setSortOrder, filteredCount: filteredItems.length, totalCount: items.length, countLabel: "voorstellen", onClear: clearFilters, hasActiveFilters: hasActiveFilters })), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]", children: isLoading ? (_jsx("div", { className: "text-muted-foreground", children: "Laden..." })) : listError ? (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-4 text-sm", children: [_jsx("p", { className: "font-medium text-destructive", children: "Bestellingen konden niet worden opgehaald." }), _jsxs("p", { className: "text-muted-foreground mt-1", children: [listError?.message ?? "Onbekende fout", " \u2014 de lijst is niet leeg, alleen niet geladen."] }), _jsx(Button, { size: "sm", variant: "outline", className: "mt-3", onClick: () => void refetchList(), children: "Opnieuw proberen" })] })) : items.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: "Geen bestellingen te controleren." })) : filteredItems.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: "Geen voorstellen gevonden voor deze zoekopdracht." })) : (_jsx(Card, { children: _jsxs(CardContent, { className: "p-0", children: [_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Klantnaam" }), _jsx(TableHead, { children: "Bericht" }), _jsx(TableHead, { children: "Orderdatum" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: pagedItems.map((p) => {
                                             const fvs = Array.isArray(p.mailbox_proposal_field_values) ? p.mailbox_proposal_field_values : [];
                                             const needsReview = fvs.some((v) => v.needs_review);
                                             const date = p.mailbox_messages?.received_at ?? p.created_at;
-                                            return (_jsxs(TableRow, { className: "cursor-pointer hover:bg-muted/50", onClick: () => setActiveId(p.id), children: [_jsx(TableCell, { className: "font-medium", children: customerNameFor(p) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: date ? new Date(date).toLocaleDateString("nl-NL") : "-" }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Badge, { variant: statusVariant(p.status), children: statusLabel(p.status) }), String(p.ai_ok) === "true" && (_jsx(Badge, { variant: "outline", className: "text-xs border-sky-500 text-sky-700", children: "AI" })), needsReview && (_jsxs(Badge, { variant: "outline", className: "text-xs border-yellow-500 text-yellow-700", children: [_jsx(AlertTriangle, { className: "h-3 w-3 mr-1" }), "Controleren"] }))] }) }), _jsx(TableCell, { className: "text-right text-sm text-muted-foreground", children: "\u2014" })] }, p.id));
-                                        }) })] }), _jsx(TablePagination, { total: items.length, page: currentPage, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize })] }) })) }), _jsx(Dialog, { open: !!activeId, onOpenChange: (o) => { if (!o) {
+                                            return (_jsxs(TableRow, { className: "cursor-pointer hover:bg-muted/50", onClick: () => setActiveId(p.id), children: [_jsx(TableCell, { className: "font-medium", children: customerNameFor(p) }), _jsxs(TableCell, { className: "max-w-sm", children: [_jsx("div", { className: "truncate text-sm font-medium", children: p.mailbox_messages?.subject || "(geen onderwerp)" }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: p.mailbox_messages?.preview || "Geen voorbeeldtekst" })] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: date ? new Date(date).toLocaleDateString("nl-NL") : "-" }), _jsx(TableCell, { children: _jsx(Badge, { variant: "secondary", children: "Te controleren" }) })] }, p.id));
+                                        }) })] }), _jsx(TablePagination, { total: filteredItems.length, page: currentPage, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize })] }) })) }), _jsx(Dialog, { open: !!activeId, onOpenChange: (o) => { if (!o) {
                     setActiveId(null);
                     setReparseError(null);
                 } }, children: _jsx(DialogContent, { className: "max-w-[95vw] w-[95vw] h-[92vh] max-h-[92vh] p-0 flex flex-col overflow-hidden", children: !active ? (_jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-2 text-sm text-muted-foreground", children: [_jsx(DialogTitle, { className: "text-base", children: "Bestelling" }), detailLoading ? "Bestelling laden…" : "Bestelling niet gevonden."] })) : (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { className: "px-6 pt-6 pb-3 shrink-0 border-b", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx(DialogTitle, { children: customerNameFor(activeSummary ?? active) }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "mr-8", disabled: reparseMutation.isPending, onClick: () => reparseMutation.mutate(active.id), children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${reparseMutation.isPending ? "animate-spin" : ""}` }), reparseMutation.isPending ? "Analyseren…" : "Mail opnieuw analyseren"] })] }), reparseError && (_jsxs("div", { className: "mt-2 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsx("span", { children: reparseError })] }))] }), _jsx("div", { className: "flex-1 min-h-0 overflow-hidden p-6", children: _jsx(ProposalEditor, { proposal: active, template: template, customers: customers, products: products, allowBackorder: allowBackorder, plantTypes: plantTypes, suppliers: suppliers, carriers: carriers, pickupLocations: pickupLocations, onApprove: async (payload) => {

package/dist-lib/index.d.ts

@@ -5,5 +5,6 @@ export { SearchableSelect } from "./components/SearchableSelect";
 export { MailboxProcessedPage } from "./components/MailboxProcessedPage";
 export { EmailPreview } from "./components/EmailPreview";
 export { TablePagination } from "./components/TablePagination";
+export { MailboxFilterBar } from "./components/MailboxFilterBar";
 export declare const mailboxOrdersModule: FlowModule;
 //# sourceMappingURL=index.d.ts.map

package/dist-lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIvD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,eAAO,MAAM,mBAAmB,EAAE,UAmBjC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIvD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEjE,eAAO,MAAM,mBAAmB,EAAE,UAmBjC,CAAC"}

package/dist-lib/index.js

@@ -10,6 +10,7 @@ export { SearchableSelect } from "./components/SearchableSelect";
 export { MailboxProcessedPage } from "./components/MailboxProcessedPage";
 export { EmailPreview } from "./components/EmailPreview";
 export { TablePagination } from "./components/TablePagination";
+export { MailboxFilterBar } from "./components/MailboxFilterBar";
 export const mailboxOrdersModule = {
     id: "mailbox_orders",
     name: "Mailbox bestellingen",

package/dist-lib/integrations/supabase/client.d.ts

@@ -18588,6 +18588,10 @@ export declare const supabase: import("@supabase/supabase-js").SupabaseClient<Da
             Args: never;
             Returns: undefined;
         };
+        cleanup_voorraad_module_history: {
+            Args: never;
+            Returns: undefined;
+        };
         complete_floriday_stock_queue: {
             Args: {
                 p_attempt_id?: string;
@@ -20312,6 +20316,12 @@ export declare const supabase: import("@supabase/supabase-js").SupabaseClient<Da
             };
             Returns: undefined;
         };
+        reset_stalled_floriday_stock_queue: {
+            Args: {
+                p_include_failed?: boolean;
+            };
+            Returns: number;
+        };
         resolve_group_allocation: {
             Args: {
                 _needed: number;
@@ -20366,6 +20376,10 @@ export declare const supabase: import("@supabase/supabase-js").SupabaseClient<Da
             Args: never;
             Returns: undefined;
         };
+        run_floriday_stock_queue_process: {
+            Args: never;
+            Returns: undefined;
+        };
         run_logistics_tasks_dispatch: {
             Args: never;
             Returns: undefined;