@flowselections/mailbox-orders 1.0.12 → 1.0.14

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

@@ -0,0 +1,26 @@
+export type PreviewAddress = {
+    name?: string | null;
+    email?: string | null;
+};
+export type PreviewAttachment = {
+    name: string;
+    contentType?: string | null;
+    size?: number | null;
+    contentId?: string | null;
+    url?: string | null;
+};
+type Props = {
+    subject?: string | null;
+    fromName?: string | null;
+    fromEmail?: string | null;
+    receivedAt?: string | null;
+    to?: PreviewAddress[];
+    cc?: PreviewAddress[];
+    bodyHtml?: string | null;
+    bodyText?: string | null;
+    attachments?: PreviewAttachment[];
+    hasAttachments?: boolean;
+};
+export declare function EmailPreview({ subject, fromName, fromEmail, receivedAt, to, cc, bodyHtml, bodyText, attachments, hasAttachments, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=EmailPreview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailPreview.d.ts","sourceRoot":"","sources":["../../src/components/EmailPreview.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAC7E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC;IACtB,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAsEF,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAU,EACV,EAAO,EACP,EAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAAgB,EAChB,cAAc,GACf,EAAE,KAAK,+BAsHP"}

package/dist-lib/components/EmailPreview.js

@@ -0,0 +1,56 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Button, Badge } from "@flowselections/core";
+import { Paperclip, Download, Code, FileText, ShieldOff, Shield } from "lucide-react";
+function addrLabel(a) {
+    if (a.name && a.email && a.name !== a.email)
+        return `${a.name} <${a.email}>`;
+    return a.email || a.name || "";
+}
+function AddressLine({ label, list }) {
+    const [expanded, setExpanded] = useState(false);
+    if (!list.length)
+        return null;
+    const shown = expanded ? list : list.slice(0, 3);
+    return (_jsxs("div", { className: "flex gap-1 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 font-medium", children: [label, ":"] }), _jsxs("span", { className: "break-all", children: [shown.map(addrLabel).filter(Boolean).join(", "), !expanded && list.length > 3 && (_jsxs("button", { type: "button", className: "ml-1 underline", onClick: () => setExpanded(true), children: ["en ", list.length - 3, " meer"] }))] })] }));
+}
+function formatSize(n) {
+    if (!n || n <= 0)
+        return "";
+    if (n < 1024)
+        return `${n} B`;
+    if (n < 1024 * 1024)
+        return `${Math.round(n / 1024)} kB`;
+    return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+/** Blokkeert externe requests door remote src/href-bronnen te neutraliseren. */
+function blockRemote(html) {
+    return html
+        .replace(/\ssrc\s*=\s*(["'])https?:\/\/[^"']*\1/gi, ' data-blocked-src=""')
+        .replace(/\sbackground\s*=\s*(["'])https?:\/\/[^"']*\1/gi, "")
+        .replace(/url\((["']?)https?:\/\/[^)]*\)/gi, "none");
+}
+function EmailFrame({ html }) {
+    const doc = useMemo(() => `<!doctype html><html><head><meta charset="utf-8">` +
+        `<base target="_blank">` +
+        `<style>html,body{margin:0;padding:12px;background:#fff;color:#111;` +
+        `font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;}` +
+        `img{max-width:100%;height:auto;}table{max-width:100%;}` +
+        `*{word-break:break-word;}</style></head><body>${html}</body></html>`, [html]);
+    return (_jsx("iframe", { title: "E-mailweergave", srcDoc: doc, 
+        // Geen allow-scripts en geen allow-same-origin: de mail kan niets uitvoeren
+        // en niet bij de applicatie. Popups blijven werken voor links.
+        sandbox: "allow-popups allow-popups-to-escape-sandbox", referrerPolicy: "no-referrer", className: "h-full w-full rounded border bg-white" }));
+}
+export function EmailPreview({ subject, fromName, fromEmail, receivedAt, to = [], cc = [], bodyHtml, bodyText, attachments = [], hasAttachments, }) {
+    const html = (bodyHtml ?? "").trim();
+    const [mode, setMode] = useState(html ? "html" : "text");
+    const [blockRemoteContent, setBlockRemoteContent] = useState(false);
+    useEffect(() => {
+        setMode(html ? "html" : "text");
+    }, [html]);
+    const rendered = blockRemoteContent ? blockRemote(html) : html;
+    const safeAttachments = Array.isArray(attachments) ? attachments : [];
+    const inlineOnly = safeAttachments.every((a) => !!a.contentId);
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "shrink-0 space-y-1 border-b pb-3", children: [_jsx("div", { className: "text-base font-semibold leading-snug", children: subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: fromName || fromEmail }), fromName && fromEmail ? ` <${fromEmail}>` : "", receivedAt ? ` · ${new Date(receivedAt).toLocaleString("nl-NL")}` : ""] }), _jsx(AddressLine, { label: "Aan", list: to }), _jsx(AddressLine, { label: "CC", list: cc }), (safeAttachments.length > 0 || hasAttachments) && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-2", children: [safeAttachments.length === 0 ? (_jsxs(Badge, { variant: "outline", className: "gap-1 font-normal", children: [_jsx(Paperclip, { className: "h-3 w-3" }), " Deze mail bevat bijlagen (nog niet opgehaald)"] })) : (safeAttachments.map((a, i) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded border bg-muted/40 px-2 py-1 text-xs", children: [_jsx(Paperclip, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "max-w-[16rem] truncate", children: a.name }), formatSize(a.size) && (_jsx("span", { className: "text-muted-foreground", children: formatSize(a.size) })), a.url && (_jsx("a", { href: a.url, target: "_blank", rel: "noopener noreferrer", className: "text-primary", "aria-label": `Download ${a.name}`, children: _jsx(Download, { className: "h-3 w-3" }) }))] }, `${a.name}-${i}`)))), safeAttachments.length > 0 && inlineOnly && (_jsx("span", { className: "text-[11px] text-muted-foreground", children: "(in de mail ingesloten afbeeldingen)" }))] })), _jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-2", children: [_jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: () => setMode(mode === "html" ? "text" : "html"), disabled: !html, children: mode === "html" ? (_jsxs(_Fragment, { children: [_jsx(FileText, { className: "mr-1 h-3.5 w-3.5" }), " Platte tekst"] })) : (_jsxs(_Fragment, { children: [_jsx(Code, { className: "mr-1 h-3.5 w-3.5" }), " Opgemaakte mail"] })) }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: mode !== "html" || !html, onClick: () => setBlockRemoteContent((v) => !v), children: blockRemoteContent ? (_jsxs(_Fragment, { children: [_jsx(Shield, { className: "mr-1 h-3.5 w-3.5" }), " Externe inhoud tonen"] })) : (_jsxs(_Fragment, { children: [_jsx(ShieldOff, { className: "mr-1 h-3.5 w-3.5" }), " Externe inhoud blokkeren"] })) })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pt-3", children: mode === "html" && html ? (_jsx(EmailFrame, { html: rendered })) : (_jsx("div", { className: "h-full w-full overflow-y-auto overscroll-contain rounded border bg-white p-3", children: _jsx("pre", { className: "whitespace-pre-wrap break-words font-sans text-sm leading-relaxed text-[#111]", children: bodyText || "(geen tekst)" }) })) })] }));
+}

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":"AAWA,wBAAgB,oBAAoB,gCA+FnC"}
+{"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,11 +1,13 @@
 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";
 import { Badge, Button, Card, CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
 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);
@@ -28,8 +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 [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 = filteredItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
     const handleReopen = async (proposalId) => {
         setBusyId(proposalId);
         try {
@@ -44,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: _jsx(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: items.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))) })] })) }) }) })] }));
+    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":"AAyFA,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,gCAwYnC"}
+{"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,11 +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, 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`;
@@ -86,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.
@@ -98,6 +100,23 @@ export function MailboxProposalsPage() {
             return { items: [] };
         }
     };
+    // Welk voorstel staat open? De zware referentielijsten worden pas geladen
+    // zodra de dialoog voor het eerst opengaat, en blijven daarna gecachet.
+    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]);
+    const refOpts = {
+        enabled: refsEnabled,
+        staleTime: 5 * 60000,
+        gcTime: 30 * 60000,
+        refetchOnWindowFocus: false,
+    };
     // Bestelvoorstellen toont uitsluitend nieuwe, nog niet gecontroleerde
     // bestellingen ("Te controleren"). Goedgekeurd/afgewezen verschijnt in
     // de module Verwerkt.
@@ -111,16 +130,25 @@ export function MailboxProposalsPage() {
         refetchInterval: 60000,
         refetchOnWindowFocus: true,
     });
+    // Detail (mailtekst, bestelregels, veldwaarden) pas ophalen bij openen.
+    const fetchDetail = useServerFn(getProposalDetail);
+    const { data: detailData, isFetching: detailLoading } = useQuery({
+        queryKey: ["mailbox-proposal-detail", activeId],
+        enabled: !!activeId,
+        staleTime: 60000,
+        queryFn: () => fetchDetail({ data: { proposalId: activeId } }),
+    });
     const { data: templateData } = useQuery({
         queryKey: ["mailbox-template-fields"],
         queryFn: () => safe(() => fetchTemplate()),
+        ...refOpts,
     });
-    const { data: customersData } = useQuery({ queryKey: ["mailbox-customers"], queryFn: () => safe(() => fetchCustomers()) });
-    const { data: productsData } = useQuery({ queryKey: ["mailbox-products"], queryFn: () => safe(() => fetchProducts()) });
-    const { data: plantData } = useQuery({ queryKey: ["mailbox-plant-types"], queryFn: () => safe(() => fetchPlantTypes()) });
-    const { data: supplierData } = useQuery({ queryKey: ["mailbox-suppliers"], queryFn: () => safe(() => fetchSuppliers()) });
-    const { data: carriersData } = useQuery({ queryKey: ["mailbox-carriers"], queryFn: () => safe(() => fetchCarriers()) });
-    const { data: pickupLocData } = useQuery({ queryKey: ["mailbox-pickup-locations"], queryFn: () => safe(() => fetchPickupLocations()) });
+    const { data: customersData } = useQuery({ queryKey: ["mailbox-customers"], queryFn: () => safe(() => fetchCustomers()), ...refOpts });
+    const { data: productsData } = useQuery({ queryKey: ["mailbox-products"], queryFn: () => safe(() => fetchProducts()), ...refOpts });
+    const { data: plantData } = useQuery({ queryKey: ["mailbox-plant-types"], queryFn: () => safe(() => fetchPlantTypes()), ...refOpts });
+    const { data: supplierData } = useQuery({ queryKey: ["mailbox-suppliers"], queryFn: () => safe(() => fetchSuppliers()), ...refOpts });
+    const { data: carriersData } = useQuery({ queryKey: ["mailbox-carriers"], queryFn: () => safe(() => fetchCarriers()), ...refOpts });
+    const { data: pickupLocData } = useQuery({ queryKey: ["mailbox-pickup-locations"], queryFn: () => safe(() => fetchPickupLocations()), ...refOpts });
     const { data: activeMailbox } = useQuery({
         queryKey: ["mailbox-active-account"],
         queryFn: () => fetchActive(),
@@ -143,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(() => {
@@ -187,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.
@@ -226,6 +234,7 @@ export function MailboxProposalsPage() {
             if (res?.ok) {
                 setReparseError(null);
                 qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                qc.invalidateQueries({ queryKey: ["mailbox-proposal-detail"] });
                 toast.success("E-mail opnieuw geanalyseerd — bestelgegevens bijgewerkt");
             }
             else {
@@ -266,8 +275,8 @@ export function MailboxProposalsPage() {
     const suppliers = Array.isArray(supplierData?.items) ? supplierData.items : [];
     const carriers = Array.isArray(carriersData?.items) ? carriersData.items : [];
     const pickupLocations = Array.isArray(pickupLocData?.items) ? pickupLocData.items : [];
-    const [activeId, setActiveId] = useState(null);
-    const active = items.find((p) => p.id === activeId) ?? null;
+    const activeSummary = items.find((p) => p.id === activeId) ?? null;
+    const active = (detailData?.item ?? null);
     const statusLabel = (_s) => "Te controleren";
     const statusVariant = (_s) => "secondary";
     const customerNameFor = (p) => {
@@ -281,15 +290,45 @@ 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: _jsx(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: items.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) }), p.parsed_payload?.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(Dialog, { open: !!active, onOpenChange: (o) => { if (!o) {
+    // --- 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) }), _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(_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(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) => {
+                } }, 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) => {
                                         try {
                                             const res = await fetchApprove({ data: payload });
                                             const shortages = Array.isArray(res?.shortages) ? res.shortages : [];
@@ -613,7 +652,7 @@ function ProposalEditor({ proposal, template, customers, products, allowBackorde
             setSubmitting(false);
         }
     };
-    return (_jsxs("div", { className: "grid grid-cols-2 gap-4 h-full min-h-0", children: [_jsxs(Card, { className: "flex flex-col min-h-0 overflow-hidden", children: [_jsxs(CardHeader, { className: "shrink-0", children: [_jsx(CardTitle, { className: "text-base", children: msg.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [msg.from_name, " <", msg.from_email, "> \u00B7", " ", msg.received_at ? new Date(msg.received_at).toLocaleString("nl-NL") : ""] })] }), _jsx(CardContent, { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain", children: _jsx("pre", { className: "text-sm whitespace-pre-wrap font-sans", children: msg.body_text || "(geen tekst)" }) })] }), _jsxs(Card, { className: "flex flex-col min-h-0 overflow-hidden", children: [_jsx(CardHeader, { className: "shrink-0", children: _jsx(CardTitle, { className: "text-base", children: "Bestelvoorstel" }) }), _jsxs(CardContent, { className: "space-y-4 flex-1 min-h-0 overflow-y-auto overscroll-contain", children: [(() => {
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-4 h-full min-h-0", children: [_jsx(Card, { className: "flex flex-col min-h-0 overflow-hidden", children: _jsx(CardContent, { className: "flex-1 min-h-0 p-4", children: _jsx(EmailPreview, { subject: msg.subject, fromName: msg.from_name, fromEmail: msg.from_email, receivedAt: msg.received_at, to: Array.isArray(msg.to_recipients) ? msg.to_recipients : [], cc: Array.isArray(msg.cc_recipients) ? msg.cc_recipients : [], bodyHtml: msg.body_html, bodyText: msg.body_text, attachments: Array.isArray(msg.attachments) ? msg.attachments : [], hasAttachments: msg.has_attachments === true }) }) }), _jsxs(Card, { className: "flex flex-col min-h-0 overflow-hidden", children: [_jsx(CardHeader, { className: "shrink-0", children: _jsx(CardTitle, { className: "text-base", children: "Bestelvoorstel" }) }), _jsxs(CardContent, { className: "space-y-4 flex-1 min-h-0 overflow-y-auto overscroll-contain", children: [(() => {
                                 // Klantveld staat altijd bovenaan, ook als het template (nog) leeg is.
                                 const customerField = visibleFields.find((f) => f.key === "customer") ?? {
                                     id: "customer",

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

@@ -0,0 +1,12 @@
+export declare const PAGE_SIZE_OPTIONS: number[];
+type Props = {
+    total: number;
+    page: number;
+    pageSize: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+};
+/** Paginering onderaan een tabel: "1–14 van 14 · Per pagina · Vorige/Volgende". */
+export declare function TablePagination({ total, page, pageSize, onPageChange, onPageSizeChange, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TablePagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../src/components/TablePagination.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB,UAAoB,CAAC;AAEnD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,mFAAmF;AACnF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,gBAAgB,GACjB,EAAE,KAAK,+BAqDP"}

package/dist-lib/components/TablePagination.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
+export const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+/** Paginering onderaan een tabel: "1–14 van 14 · Per pagina · Vorige/Volgende". */
+export function TablePagination({ total, page, pageSize, onPageChange, onPageSizeChange, }) {
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
+    const current = Math.min(Math.max(1, page), pageCount);
+    const from = total === 0 ? 0 : (current - 1) * pageSize + 1;
+    const to = Math.min(current * pageSize, total);
+    return (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-t px-4 py-2 text-sm", children: [_jsxs("span", { className: "text-muted-foreground", children: [from, "\u2013", to, " van ", total] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-muted-foreground", children: "Per pagina" }), _jsxs(Select, { value: String(pageSize), onValueChange: (v) => {
+                            onPageSizeChange(Number(v));
+                            onPageChange(1);
+                        }, children: [_jsx(SelectTrigger, { className: "h-8 w-[80px]", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: PAGE_SIZE_OPTIONS.map((n) => (_jsx(SelectItem, { value: String(n), children: n }, n))) })] }), _jsx(Button, { size: "sm", variant: "outline", disabled: current <= 1, onClick: () => onPageChange(current - 1), children: "Vorige" }), _jsxs("span", { className: "text-muted-foreground", children: [current, " / ", pageCount] }), _jsx(Button, { size: "sm", variant: "outline", disabled: current >= pageCount, onClick: () => onPageChange(current + 1), children: "Volgende" })] })] }));
+}

package/dist-lib/index.d.ts

@@ -3,5 +3,8 @@ export * from "./_core-safelist";
 export { MailboxProposalsPage } from "./components/MailboxProposalsPage";
 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;AAEzE,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

@@ -8,6 +8,9 @@ export * from "./_core-safelist";
 export { MailboxProposalsPage } from "./components/MailboxProposalsPage";
 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",