@flowselections/mailbox-orders 1.0.53 → 1.0.55

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":"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;AAMT,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,sCA6BtE"}

package/dist-lib/components/MailboxAuthBanner.js

@@ -1,17 +1,18 @@
-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";
+import { InlineAlert } from "./fs-ui/InlineAlert.js";
+const settingsLink = (label) => (_jsx("a", { href: "/e-mail-authenticatie", className: "text-sm font-medium underline underline-offset-2", children: label }));
 export function MailboxAuthBanner({ 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 (_jsx("div", { className: "shrink-0 text-xs text-muted-foreground", children: "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 (_jsx(InlineAlert, { tone: "warning", title: "Er is nog geen mailbox gekoppeld voor bestellingen.", action: settingsLink("Naar Instellingen"), children: "Koppel een mailadres voor het ontvangen van bestellingen bij 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 (_jsx(InlineAlert, { tone: "error", title: `De koppeling met ${a.account_email} is verlopen.`, action: settingsLink("Opnieuw koppelen"), children: "Er komen geen nieuwe bestellingen binnen tot je de koppeling vernieuwt." }));
     }
     return null;
 }

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

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export type MailboxTab = "voorstellen" | "verwerkt" | "overgeslagen";
+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: kop, meldingen, KPI's en
+ * tabbladen. De lijst zelf komt als children.
+ */
+export declare function MailboxPageFrame({ tab, children, onKpi, helpOpen, onHelpOpenChange, }: {
+    tab: MailboxTab;
+    children: ReactNode;
+    /** Pagina handelt een KPI-klik zelf af (bijv. filter zetten); anders navigeren. */
+    onKpi?: (key: "pending" | "today" | "approved_today" | "customer_unknown") => boolean | void;
+    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,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBjD,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,UAAU,GAAG,cAAc,CAAC;AAQrE,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,MAAM,CAAC,CAO7C,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,gBAAgB,GACjB,EAAE;IACD,GAAG,EAAE,UAAU,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,mFAAmF;IACnF,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,OAAO,GAAG,gBAAgB,GAAG,kBAAkB,KAAK,OAAO,GAAG,IAAI,CAAC;IAC7F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,+BA2EA"}

package/dist-lib/components/MailboxPageFrame.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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, Keyboard, MailX, UserX, Inbox } from "lucide-react";
+import { Button } from "@flowselections/core";
+import { getActiveOrdersMailbox } from "../lib/mailbox.functions.js";
+import { getMailboxKpis } from "../lib/mailbox-list.functions.js";
+import { MailboxAuthBanner } from "./MailboxAuthBanner.js";
+import { MailboxStatusLine, MailboxStatusMeta } from "./MailboxStatusLine.js";
+import { PageHeader } from "./fs-ui/PageHeader.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";
+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", "Volgende rij"],
+    ["K", "Vorige rij"],
+    ["Enter", "Openen"],
+    ["Esc", "Sluiten of wissen"],
+    ["?", "Dit overzicht"],
+];
+/**
+ * Gezamenlijke opbouw van de drie mailboxpagina's: kop, meldingen, KPI's en
+ * tabbladen. De lijst zelf komt als children.
+ */
+export function MailboxPageFrame({ tab, children, onKpi, helpOpen, onHelpOpenChange, }) {
+    const navigate = useNavigate();
+    const fetchActive = useServerFn(getActiveOrdersMailbox);
+    const fetchKpis = useServerFn(getMailboxKpis);
+    const [localHelp, setLocalHelp] = useState(false);
+    const help = helpOpen ?? localHelp;
+    const setHelp = onHelpOpenChange ?? setLocalHelp;
+    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 k = (kpiQ.data ?? null);
+    const loading = kpiQ.isLoading;
+    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("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-4 pb-24 sm:p-6 md:pb-6", children: [_jsx(PageHeader, { title: "Mailbox bestellingen", meta: _jsx(MailboxStatusMeta, {}), actions: _jsxs(Button, { variant: "outline", size: "sm", className: "hidden h-9 gap-2 md:inline-flex", onClick: () => setHelp(true), "aria-label": "Sneltoetsen", children: [_jsx(Keyboard, { className: "h-4 w-4" }), _jsx("kbd", { className: "rounded-sm border border-border px-1 text-[11px]", children: "?" })] }) }), _jsx(MailboxAuthBanner, { active: activeMailbox }), _jsx(MailboxStatusLine, {}), _jsxs(KpiRow, { children: [_jsx(KpiTile, { title: "Te controleren", value: k?.pending ?? 0, sub: "Bestellingen uit e-mail", icon: _jsx(ClipboardCheck, {}), loading: loading, onClick: () => kpi("pending") }), _jsx(KpiTile, { title: "Vandaag binnen", value: k?.pending_today ?? 0, sub: "Nog te controleren", icon: _jsx(CalendarClock, {}), loading: loading, onClick: () => kpi("today") }), _jsx(KpiTile, { title: "Vandaag verwerkt", value: k?.approved_today ?? 0, sub: "Orders aangemaakt", icon: _jsx(CheckCircle2, {}), loading: loading, 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, 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":"AAwBA,wBAAgB,oBAAoB,gCAuMnC"}

package/dist-lib/components/MailboxProcessedPage.js

@@ -1,90 +1,122 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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, Filter, Search, Undo2 } from "lucide-react";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@flowselections/core";
+import { reopenProposal } from "../lib/mailbox.functions.js";
+import { listProposalsPage } from "../lib/mailbox-list.functions.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 } from "./fs-ui/DataTable.js";
+import { StatusIcon } from "./fs-ui/StatusIcon.js";
+import { EmptyState } from "./fs-ui/EmptyState.js";
+import { InlineAlert } from "./fs-ui/InlineAlert.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 { useListHotkeys } from "./fs-ui/useListHotkeys.js";
+const PERIOD_LABEL = { today: "Vandaag", "7d": "Laatste 7 dagen", "30d": "Laatste 30 dagen" };
 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 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,
+        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 statusOf = (p) => p.status === "approved"
+        ? _jsx(StatusIcon, { tone: "done", label: "Goedgekeurd", detail: p.order_number ? `Order ${p.order_number}` : undefined })
+        : _jsx(StatusIcon, { tone: "rejected", label: "Afgewezen" });
+    const rowAction = (p) => p.status === "rejected" ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "h-8 gap-1", disabled: busyId === p.id, onClick: () => handleReopen(p.id), "aria-label": "Terugzetten naar te controleren", children: [_jsx(Undo2, { className: "h-4 w-4" }), _jsx("span", { className: "hidden lg:inline", children: busyId === p.id ? "Bezig…" : "Terugzetten" })] })) : p.created_order_id ? (_jsx(Button, { size: "sm", variant: "ghost", className: "h-8", onClick: () => openOrder(p), children: "Open order" })) : null;
+    const columns = [
+        {
+            key: "klant", header: "Klant", width: "minmax(180px,1.4fr)",
+            cell: (p) => (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(InitialsAvatar, { name: nameOf(p) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium", children: nameOf(p) }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: p.from_email ?? "" })] })] })),
+        },
+        {
+            key: "bericht", header: "Onderwerp", width: "minmax(240px,2.2fr)",
+            cell: (p) => (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate", children: p.subject || "(geen onderwerp)" }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: String(p.preview ?? "").slice(0, 180) })] })),
+        },
+        { key: "order", header: "Order", width: "130px", cell: (p) => _jsx("span", { className: "tabular-nums", children: p.order_number || "–" }) },
+        {
+            key: "datum", header: "Verwerkt op", width: "150px", sortable: true,
+            cell: (p) => _jsx("span", { className: "tabular-nums text-muted-foreground", children: p.reviewed_at ? new Date(p.reviewed_at).toLocaleString("nl-NL", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" }) : "–" }),
+        },
+        {
+            key: "status", header: "Status", width: "120px",
+            cell: (p) => (_jsxs("div", { className: "flex items-center gap-2", children: [statusOf(p), _jsx("span", { className: "text-xs text-muted-foreground", children: p.status === "approved" ? "Goedgekeurd" : "Afgewezen" })] })),
+        },
+    ];
+    const chips = [
+        ...(period !== "all" ? [{ key: "period", label: PERIOD_LABEL[period] ?? period, icon: _jsx(CalendarClock, {}), onRemove: () => setPeriod("all") }] : []),
+        ...(statusFilter !== "all" ? [{ key: "status", label: statusFilter === "approved" ? "Goedgekeurd" : "Afgewezen", icon: _jsx(CheckCircle2, {}), onRemove: () => setStatusFilter("all") }] : []),
+    ];
+    return (_jsxs(MailboxPageFrame, { tab: "verwerkt", helpOpen: helpOpen, onHelpOpenChange: setHelpOpen, children: [_jsx(Toolbar, { chips: _jsx(FilterChips, { chips: chips, onClearAll: clearFilters }), right: _jsxs(_Fragment, { children: [_jsxs(Select, { value: statusFilter, onValueChange: setStatusFilter, children: [_jsx(SelectTrigger, { className: "h-9 w-[150px]", "aria-label": "Status", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle statussen" }), _jsx(SelectItem, { value: "approved", children: "Goedgekeurd" }), _jsx(SelectItem, { value: "rejected", children: "Afgewezen" })] })] }), _jsxs(Select, { value: period, onValueChange: (v) => setPeriod(v), children: [_jsxs(SelectTrigger, { className: "h-9 w-[150px]", "aria-label": "Periode", children: [_jsx(Filter, { className: "mr-1 h-4 w-4" }), _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" })] })] })] }), children: _jsx(SearchInput, { ref: searchRef, value: search, onChange: setSearch, placeholder: "Zoek op klant, afzender of onderwerp" }) }), isLoading && !data ? (_jsx(TableSkeleton, { columns: ["1.4fr", "2.2fr", "130px", "150px", "120px"] })) : error && !data ? (_jsx(InlineAlert, { tone: "error", title: "De lijst kon niet worden geladen.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => void refetch(), children: "Opnieuw proberen" }), children: "Probeer het opnieuw." })) : 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} · ` : "", p.reviewed_at ? new Date(p.reviewed_at).toLocaleDateString("nl-NL") : "–"] })] })), 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":"AA6HA,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,gCA+gBnC"}