@flowselections/mailbox-orders 1.0.53 → 1.0.57

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

@@ -1,3 +1,4 @@
+import type { Notice } from "./fs-ui/NoticeBar.js";
 type ActiveMailbox = {
     connected: null;
     error?: string;
@@ -12,8 +13,7 @@ type ActiveMailbox = {
     display_name: string | null;
     needs_reauth: boolean;
 } | undefined | null;
-export declare function MailboxAuthBanner({ active }: {
-    active: ActiveMailbox;
-}): import("react").JSX.Element | null;
+/** Meldingen over de koppeling van de mailbox (voor de NoticeBar onder de kop). */
+export declare function mailboxAuthNotices(active: ActiveMailbox): Notice[];
 export {};
 //# sourceMappingURL=MailboxAuthBanner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MailboxAuthBanner.d.ts","sourceRoot":"","sources":["../../src/components/MailboxAuthBanner.tsx"],"names":[],"mappings":"AAGA,KAAK,aAAa,GACd;IAAE,SAAS,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,SAAS,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GACpC;IACE,SAAS,EAAE,IAAI,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;CACvB,GACD,SAAS,GACT,IAAI,CAAC;AAET,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,sCAuDtE"}
+{"version":3,"file":"MailboxAuthBanner.d.ts","sourceRoot":"","sources":["../../src/components/MailboxAuthBanner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,KAAK,aAAa,GACd;IAAE,SAAS,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,SAAS,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GACpC;IACE,SAAS,EAAE,IAAI,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;CACvB,GACD,SAAS,GACT,IAAI,CAAC;AAMT,mFAAmF;AACnF,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,EAAE,CAyBlE"}

package/dist-lib/components/MailboxAuthBanner.js

@@ -1,17 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertTriangle } from "lucide-react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { bannerKind } from "../lib/mailbox-active.js";
-export function MailboxAuthBanner({ active }) {
+const settingsLink = (label) => (_jsx("a", { href: "/e-mail-authenticatie", className: "text-sm font-medium underline underline-offset-2", children: label }));
+/** Meldingen over de koppeling van de mailbox (voor de NoticeBar onder de kop). */
+export function mailboxAuthNotices(active) {
     const kind = bannerKind(active);
     if (kind === "unknown") {
-        return (_jsx("div", { className: "shrink-0 text-xs text-muted-foreground", children: "De status van de mailboxkoppeling kon niet worden opgehaald." }));
+        return [{ key: "auth-unknown", tone: "info", title: "De status van de mailbox kon niet worden opgehaald." }];
     }
     if (kind === "no_mailbox") {
-        return (_jsxs("div", { className: "flex items-start gap-3 rounded-md border border-yellow-300 bg-yellow-50 p-3 text-sm text-yellow-900", children: [_jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium", children: "Geen actieve mailbox voor bestellingen" }), _jsxs("div", { className: "text-yellow-800", children: ["Er is nog geen e-mailkoppeling met doeleinde ", _jsx("span", { className: "font-mono", children: "orders / ontvangen" }), " ingesteld."] })] }), _jsx("a", { href: "/e-mail-authenticatie", className: "shrink-0 rounded-md bg-yellow-900 px-3 py-1.5 text-xs font-medium text-yellow-50 hover:bg-yellow-800", children: "Koppeling instellen" })] }));
+        return [{
+                key: "auth-none",
+                tone: "warning",
+                title: "Er is nog geen mailbox gekoppeld voor bestellingen.",
+                details: "Koppel een mailadres voor het ontvangen van bestellingen bij Instellingen.",
+                action: settingsLink("Naar Instellingen"),
+            }];
     }
     if (kind === "reauth") {
         const a = active;
-        return (_jsxs("div", { className: "flex items-start gap-3 rounded-md border border-red-300 bg-red-50 p-3 text-sm text-red-900", children: [_jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "font-medium", children: ["Koppeling met ", a.provider, " (", a.account_email, ") is verlopen"] }), _jsx("div", { className: "text-red-800", children: "Er komen geen nieuwe bestellingen binnen tot je de koppeling opnieuw autoriseert." })] }), _jsx("a", { href: "/e-mail-authenticatie", className: "shrink-0 rounded-md bg-red-900 px-3 py-1.5 text-xs font-medium text-red-50 hover:bg-red-800", children: "Opnieuw verbinden" })] }));
+        return [{
+                key: "auth-reauth",
+                tone: "error",
+                title: `De koppeling met ${a.account_email} is verlopen.`,
+                details: "Er komen geen nieuwe bestellingen binnen tot je de koppeling vernieuwt.",
+                action: settingsLink("Opnieuw koppelen"),
+            }];
     }
-    return null;
+    return [];
 }

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

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+import { type Notice } from "./fs-ui/NoticeBar.js";
+export type MailboxTab = "voorstellen" | "verwerkt" | "overgeslagen";
+export type MailboxKpiKey = "pending" | "today" | "approved_today" | "customer_unknown";
+export declare const browserTz: () => string;
+/** Zet een bewaard filter van de voorstellenlijst vóór het navigeren. */
+export declare function setProposalFilter(key: "period" | "filter", value: unknown): void;
+export declare const SHORTCUTS: Array<[string[], string]>;
+/**
+ * Gezamenlijke opbouw van de drie mailboxpagina's, in de vaste volgorde:
+ * kop → meldingen → 4 KPI's → tabbladen → (children: werkbalk, tabel, paginering).
+ */
+export declare function MailboxPageFrame({ tab, children, onKpi, activeKpi, notices, helpOpen, onHelpOpenChange, }: {
+    tab: MailboxTab;
+    children: ReactNode;
+    /** Pagina handelt een KPI-klik zelf af (bijv. filter zetten); anders navigeren. */
+    onKpi?: (key: MailboxKpiKey) => boolean | void;
+    /** Tegel waarop de gebruiker zelf gefilterd heeft (alleen die krijgt de rand). */
+    activeKpi?: MailboxKpiKey | null;
+    /** Meldingen van de pagina zelf; komen bij de andere meldingen onder de kop. */
+    notices?: Notice[];
+    helpOpen?: boolean;
+    onHelpOpenChange?: (v: boolean) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=MailboxPageFrame.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MailboxPageFrame.d.ts","sourceRoot":"","sources":["../../src/components/MailboxPageFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAe5D,OAAO,EAAa,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,UAAU,GAAG,cAAc,CAAC;AACrE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,gBAAgB,GAAG,kBAAkB,CAAC;AAQxF,eAAO,MAAM,SAAS,cAErB,CAAC;AAEF,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,QAAQ,GAAG,QAAQ,EAAE,KAAK,EAAE,OAAO,QAEzE;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,MAAM,CAAC,CAM/C,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAY,EACZ,QAAQ,EACR,gBAAgB,GACjB,EAAE;IACD,GAAG,EAAE,UAAU,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,mFAAmF;IACnF,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,OAAO,GAAG,IAAI,CAAC;IAC/C,kFAAkF;IAClF,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,+BA+EA"}

package/dist-lib/components/MailboxPageFrame.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { useNavigate } from "@tanstack/react-router";
+import { CalendarClock, CheckCircle2, ClipboardCheck, MailX, UserX, Inbox } from "lucide-react";
+import { ensureMailboxDefaultsFn, getActiveOrdersMailbox } from "../lib/mailbox.functions.js";
+import { getMailboxKpis } from "../lib/mailbox-list.functions.js";
+import { mailboxAuthNotices } from "./MailboxAuthBanner.js";
+import { statusInfo, useMailboxStatus, useMailboxStatusNotices } from "./MailboxStatusLine.js";
+import { PageHeader } from "./fs-ui/PageHeader.js";
+import { UpdatedAt } from "./fs-ui/UpdatedAt.js";
+import { KpiRow } from "./fs-ui/KpiRow.js";
+import { KpiTile } from "./fs-ui/KpiTile.js";
+import { PillTabs } from "./fs-ui/PillTabs.js";
+import { ShortcutHelp } from "./fs-ui/ShortcutHelp.js";
+import { NoticeBar } from "./fs-ui/NoticeBar.js";
+const TAB_PATH = {
+    voorstellen: "/mailbox-orders/voorstellen",
+    verwerkt: "/mailbox-orders/verwerkt",
+    overgeslagen: "/mailbox-orders/overgeslagen",
+};
+export const browserTz = () => {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+    }
+    catch {
+        return "UTC";
+    }
+};
+/** Zet een bewaard filter van de voorstellenlijst vóór het navigeren. */
+export function setProposalFilter(key, value) {
+    try {
+        window.localStorage.setItem(`mailbox-proposals:${key}`, JSON.stringify(value));
+    }
+    catch { /* negeer */ }
+}
+export const SHORTCUTS = [
+    [["/"], "Zoeken"],
+    [["J", "K"], "Volgende / vorige rij"],
+    [["Enter"], "Geselecteerde rij openen"],
+    [["Esc"], "Zoeken wissen / sluiten"],
+    [["?"], "Dit overzicht"],
+];
+/**
+ * Gezamenlijke opbouw van de drie mailboxpagina's, in de vaste volgorde:
+ * kop → meldingen → 4 KPI's → tabbladen → (children: werkbalk, tabel, paginering).
+ */
+export function MailboxPageFrame({ tab, children, onKpi, activeKpi, notices = [], helpOpen, onHelpOpenChange, }) {
+    const navigate = useNavigate();
+    const fetchActive = useServerFn(getActiveOrdersMailbox);
+    const fetchKpis = useServerFn(getMailboxKpis);
+    const ensureDefaults = useServerFn(ensureMailboxDefaultsFn);
+    const [localHelp, setLocalHelp] = useState(false);
+    const help = helpOpen ?? localHelp;
+    const setHelp = onHelpOpenChange ?? setLocalHelp;
+    // Standaardinstellingen één keer per paginabezoek aanvullen (niet bij elke lijstaanvraag).
+    useEffect(() => {
+        void ensureDefaults().catch((e) => console.warn("[mailbox] standaardinstellingen", e));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    const { data: activeMailbox } = useQuery({
+        queryKey: ["mailbox-active-account"],
+        queryFn: () => fetchActive(),
+        refetchInterval: 60000,
+        retry: 1,
+    });
+    const kpiQ = useQuery({
+        queryKey: ["mailbox-kpis"],
+        queryFn: () => fetchKpis({ data: { tz: browserTz() } }),
+        refetchInterval: 60000,
+        placeholderData: (prev) => prev,
+    });
+    const status = useMailboxStatus();
+    const statusNotices = useMailboxStatusNotices(status);
+    const k = (kpiQ.data ?? null);
+    const loading = kpiQ.isLoading;
+    const allNotices = [...mailboxAuthNotices(activeMailbox), ...statusNotices, ...notices];
+    const go = (t) => { if (t !== tab)
+        void navigate({ to: TAB_PATH[t] }); };
+    const kpi = (key) => {
+        if (onKpi && onKpi(key) === true)
+            return;
+        if (key === "approved_today") {
+            go("verwerkt");
+            return;
+        }
+        if (key === "today")
+            setProposalFilter("period", "today");
+        if (key === "customer_unknown")
+            setProposalFilter("filter", "klant_onbekend");
+        if (key === "pending") {
+            setProposalFilter("period", "all");
+            setProposalFilter("filter", null);
+        }
+        if (tab !== "voorstellen")
+            go("voorstellen");
+    };
+    return (_jsxs("main", { className: "flex h-[calc(100dvh-var(--app-header-height)-var(--core-topbar-h,0px))] max-h-[calc(100dvh-var(--app-header-height)-var(--core-topbar-h,0px))] min-h-0 w-full min-w-0 flex-col gap-4 overflow-hidden overflow-x-clip p-4 pb-24 sm:p-6 md:pb-6", children: [_jsx(PageHeader, { title: "Mailbox bestellingen", meta: _jsx(UpdatedAt, { at: kpiQ.dataUpdatedAt || null, stale: kpiQ.isError, info: statusInfo(status) }) }), _jsx(NoticeBar, { notices: allNotices }), _jsxs(KpiRow, { children: [_jsx(KpiTile, { title: "Te controleren", value: k?.pending ?? 0, sub: "Bestellingen uit e-mail", icon: _jsx(ClipboardCheck, {}), loading: loading, active: activeKpi === "pending", onClick: () => kpi("pending") }), _jsx(KpiTile, { title: "Vandaag binnen", value: k?.pending_today ?? 0, sub: "Nog te controleren", icon: _jsx(CalendarClock, {}), loading: loading, active: activeKpi === "today", onClick: () => kpi("today") }), _jsx(KpiTile, { title: "Vandaag verwerkt", value: k?.approved_today ?? 0, sub: "Orders aangemaakt", icon: _jsx(CheckCircle2, {}), loading: loading, active: activeKpi === "approved_today", onClick: () => kpi("approved_today") }), _jsx(KpiTile, { title: "Klant onbekend", value: k?.customer_unknown ?? 0, sub: (k?.customer_unknown ?? 0) > 0 ? _jsx("span", { className: "text-destructive", children: "Kies of maak de klant" }) : "Alles herkend", icon: _jsx(UserX, {}), tone: "warning", loading: loading, active: activeKpi === "customer_unknown", onClick: () => kpi("customer_unknown") })] }), _jsx(PillTabs, { ariaLabel: "Mailbox", active: tab, onSelect: (t) => go(t), tabs: [
+                    { key: "voorstellen", label: "Te controleren", icon: _jsx(Inbox, {}), count: k ? k.pending : null },
+                    { key: "verwerkt", label: "Verwerkt", icon: _jsx(CheckCircle2, {}), count: k ? k.processed : null },
+                    { key: "overgeslagen", label: "Overgeslagen", icon: _jsx(MailX, {}), count: k ? k.skipped : null },
+                ] }), children, _jsx(ShortcutHelp, { open: help, onOpenChange: setHelp, items: SHORTCUTS })] }));
+}

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

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

package/dist-lib/components/MailboxProcessedPage.js

@@ -1,90 +1,131 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
+import { useNavigate } from "@tanstack/react-router";
 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.js";
-import { MailboxAuthBanner } from "./MailboxAuthBanner.js";
+import { CalendarClock, CheckCircle2, Search } from "lucide-react";
+import { Button } from "@flowselections/core";
+import { reopenProposal } from "../lib/mailbox.functions.js";
+import { listProposalsPage } from "../lib/mailbox-list.functions.js";
+import { fmtDayTime } from "../lib/format-date.js";
+import { label, PROPOSAL_STATUS } from "../lib/labels.js";
 import { TablePagination } from "./TablePagination.js";
-import { MailboxFilterBar, usePersistedState, normalizeText, matchesPeriod } from "./MailboxFilterBar.js";
+import { usePersistedState } from "./MailboxFilterBar.js";
+import { MailboxPageFrame, browserTz } from "./MailboxPageFrame.js";
+import { DataTable, InitialsAvatar, CellText } from "./fs-ui/DataTable.js";
+import { StatusIcon } from "./fs-ui/StatusIcon.js";
+import { EmptyState } from "./fs-ui/EmptyState.js";
+import { TableSkeleton } from "./fs-ui/TableSkeleton.js";
+import { Toolbar } from "./fs-ui/Toolbar.js";
+import { SearchInput } from "./fs-ui/SearchInput.js";
+import { FilterChips } from "./fs-ui/FilterChips.js";
+import { FilterPanel, FilterOptions, PERIOD_OPTIONS } from "./fs-ui/FilterPanel.js";
+import { RowMenu } from "./fs-ui/RowMenu.js";
+import { useListHotkeys } from "./fs-ui/useListHotkeys.js";
+const PERIOD_LABEL = { today: "Vandaag", "7d": "Laatste 7 dagen", "30d": "Laatste 30 dagen" };
+const COLS = [220, 300, 130, 140, 120];
 export function MailboxProcessedPage() {
-    const fetchList = useServerFn(listProposals);
+    const fetchList = useServerFn(listProposalsPage);
     const reopen = useServerFn(reopenProposal);
-    const fetchActive = useServerFn(getActiveOrdersMailbox);
     const qc = useQueryClient();
-    const { data: activeMailbox } = useQuery({
-        queryKey: ["mailbox-active-account"],
-        queryFn: () => fetchActive(),
-        refetchInterval: 60000,
-        retry: 1,
-    });
-    const approved = useQuery({
-        queryKey: ["mailbox-proposals", "approved"],
-        queryFn: () => fetchList({ data: { status: "approved" } }),
-    });
-    const rejected = useQuery({
-        queryKey: ["mailbox-proposals", "rejected"],
-        queryFn: () => fetchList({ data: { status: "rejected" } }),
-    });
-    const items = [
-        ...(Array.isArray(approved.data?.items) ? approved.data.items : []),
-        ...(Array.isArray(rejected.data?.items) ? rejected.data.items : []),
-    ];
+    const navigate = useNavigate();
     const [busyId, setBusyId] = useState(null);
     const [page, setPage] = useState(1);
-    const [pageSize, setPageSize] = useState(25);
+    const [pageSize, setPageSize] = useState(50);
     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.customer_name || 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 [cursor, setCursor] = useState(null);
+    const [helpOpen, setHelpOpen] = useState(false);
+    const [filtersOpen, setFiltersOpen] = useState(false);
+    const searchRef = useRef(null);
+    const params = {
+        statuses: statusFilter === "approved" ? ["approved"] : statusFilter === "rejected" ? ["rejected"] : ["approved", "rejected"],
+        search,
+        period,
+        sort: sortOrder === "date-asc" ? "asc" : "desc",
+        dateField: "reviewed",
+        tz: browserTz(),
+        page,
+        pageSize,
+    };
+    const { data, isLoading, error, refetch } = useQuery({
+        queryKey: ["mailbox-proposals", "processed", params],
+        queryFn: () => fetchList({ data: params }),
+        placeholderData: (prev) => prev,
+        refetchInterval: 60000,
+    });
+    const items = Array.isArray(data?.items) ? data.items : [];
+    const total = Number(data?.total ?? 0);
+    const hasActiveFilters = !!search || period !== "all" || 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));
+    useEffect(() => { setPage(1); setCursor(null); }, [search, period, sortOrder, statusFilter]);
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
     const currentPage = Math.min(page, pageCount);
-    const pagedItems = filteredItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+    const openOrder = (p) => {
+        if (p?.created_order_id)
+            void navigate({ to: `/floriday-verkoop/verkooporders/${p.created_order_id}` });
+    };
     const handleReopen = async (proposalId) => {
         setBusyId(proposalId);
         try {
             await reopen({ data: { proposalId } });
-            toast.success("Voorstel teruggezet naar 'Te controleren'.");
+            toast.success("Bestelling teruggezet naar 'Te controleren'.");
             await qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+            await qc.invalidateQueries({ queryKey: ["mailbox-kpis"] });
         }
         catch (e) {
-            toast.error(e?.message ?? "Terugzetten mislukt.");
+            console.warn("[mailbox] terugzetten", e);
+            toast.error("Terugzetten lukt niet. Probeer het opnieuw.");
         }
         finally {
             setBusyId(null);
         }
     };
-    return (_jsxs("div", { className: "flex h-[calc(100dvh-var(--app-header-height)-var(--core-topbar-h,0px))] max-h-[calc(100dvh-var(--app-header-height)-var(--core-topbar-h,0px))] min-h-0 w-full flex-col gap-4 overflow-hidden p-6", 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 }))] }) }) })] }));
+    useListHotkeys({
+        disabled: helpOpen || filtersOpen,
+        onSearch: () => searchRef.current?.focus(),
+        onNext: () => setCursor((c) => (items.length ? Math.min((c ?? -1) + 1, items.length - 1) : null)),
+        onPrev: () => setCursor((c) => (items.length ? Math.max((c ?? 1) - 1, 0) : null)),
+        onOpen: cursor != null && items[cursor]?.created_order_id ? () => openOrder(items[cursor]) : undefined,
+        onEscape: hasActiveFilters ? clearFilters : undefined,
+        onHelp: () => setHelpOpen(true),
+    });
+    const nameOf = (p) => p.customer_name || p.from_name || p.from_email || "Onbekend";
+    const statusText = (p) => label(PROPOSAL_STATUS, p.status);
+    const statusOf = (p) => p.status === "approved"
+        ? _jsx(StatusIcon, { tone: "done", label: statusText(p), detail: p.order_number ? `Order ${p.order_number}` : undefined })
+        : _jsx(StatusIcon, { tone: "rejected", label: statusText(p) });
+    const rowAction = (p) => (_jsx(RowMenu, { label: `Acties voor ${nameOf(p)}`, items: [
+            ...(p.created_order_id ? [{ label: "Open order", onSelect: () => openOrder(p) }] : []),
+            ...(p.status === "rejected" ? [{ label: busyId === p.id ? "Bezig…" : "Terugzetten naar te controleren", disabled: busyId === p.id, onSelect: () => void handleReopen(p.id) }] : []),
+        ] }));
+    const columns = [
+        {
+            key: "klant", header: "Klant", width: COLS[0],
+            cell: (p) => (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(InitialsAvatar, { name: nameOf(p) }), _jsx(CellText, { primary: nameOf(p), secondary: p.from_email ?? "", strong: true })] })),
+        },
+        {
+            key: "bericht", header: "Onderwerp", width: COLS[1],
+            cell: (p) => _jsx(CellText, { primary: p.subject || "(geen onderwerp)", secondary: String(p.preview ?? "").slice(0, 180) }),
+        },
+        { key: "order", header: "Order", width: COLS[2], cell: (p) => _jsx("span", { className: "block truncate tabular-nums", children: p.order_number || "–" }) },
+        {
+            key: "datum", header: "Verwerkt op", width: COLS[3], sortable: true,
+            cell: (p) => _jsx("span", { className: "block truncate tabular-nums", children: fmtDayTime(p.reviewed_at) }),
+        },
+        {
+            key: "status", header: "Status", width: COLS[4],
+            cell: (p) => (_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [statusOf(p), _jsx("span", { className: "truncate text-sm", children: statusText(p) })] })),
+        },
+    ];
+    const chips = [
+        ...(period !== "all" ? [{ key: "period", label: PERIOD_LABEL[period] ?? period, icon: _jsx(CalendarClock, {}), onRemove: () => setPeriod("all") }] : []),
+        ...(statusFilter !== "all" ? [{ key: "status", label: label(PROPOSAL_STATUS, statusFilter), icon: _jsx(CheckCircle2, {}), onRemove: () => setStatusFilter("all") }] : []),
+    ];
+    return (_jsxs(MailboxPageFrame, { tab: "verwerkt", helpOpen: helpOpen, onHelpOpenChange: setHelpOpen, activeKpi: period === "today" ? "approved_today" : null, children: [_jsx(Toolbar, { onOpenFilters: () => setFiltersOpen(true), filterCount: chips.length, chips: _jsx(FilterChips, { chips: chips, onClearAll: clearFilters }), children: _jsx(SearchInput, { ref: searchRef, value: search, onChange: setSearch, placeholder: "Zoek op klant, afzender of onderwerp" }) }), _jsxs(FilterPanel, { open: filtersOpen, onOpenChange: setFiltersOpen, onClear: clearFilters, children: [_jsx(FilterOptions, { label: "Periode", value: period, options: PERIOD_OPTIONS, onChange: (v) => setPeriod(v) }), _jsx(FilterOptions, { label: "Status", value: statusFilter, options: [{ value: "all", label: "Alle statussen" }, { value: "approved", label: "Goedgekeurd" }, { value: "rejected", label: "Afgewezen" }], onChange: setStatusFilter })] }), isLoading && !data ? (_jsx(TableSkeleton, { columns: COLS })) : error && !data ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: _jsx(EmptyState, { icon: _jsx(CheckCircle2, { className: "h-6 w-6" }), title: "De lijst kon niet worden geladen", text: "Probeer het opnieuw.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => void refetch(), children: "Opnieuw proberen" }) }) })) : total === 0 ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: hasActiveFilters
+                    ? _jsx(EmptyState, { icon: _jsx(Search, { className: "h-6 w-6" }), title: "Niets gevonden", text: "Er zijn geen verwerkte bestellingen die bij je zoekopdracht of filters passen.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: clearFilters, children: "Filters wissen" }) })
+                    : _jsx(EmptyState, { icon: _jsx(CheckCircle2, { className: "h-6 w-6" }), title: "Nog niets verwerkt", text: "Bevestigde en afgewezen bestellingen verschijnen hier." }) })) : (_jsx(DataTable, { rows: items, columns: columns, rowKey: (p) => p.id, activeIndex: cursor, rowAction: rowAction, sort: { key: "datum", dir: sortOrder === "date-asc" ? "asc" : "desc" }, onSortChange: () => setSortOrder(sortOrder === "date-asc" ? "date-desc" : "date-asc"), mobileCard: (p) => (_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "truncate font-semibold", children: nameOf(p) }), statusOf(p)] }), _jsx("div", { className: "truncate text-muted-foreground", children: p.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs tabular-nums text-muted-foreground", children: [p.order_number ? `${p.order_number} · ` : "", fmtDayTime(p.reviewed_at)] })] })), footer: _jsx(TablePagination, { total: total, 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":"AAiHA,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,gCAycnC"}
+{"version":3,"file":"MailboxProposalsPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxProposalsPage.tsx"],"names":[],"mappings":"AA8HA,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,gCAsgBnC"}