@flowselections/mailbox-orders 1.0.53 → 1.0.57

package/dist-lib/components/MailboxProposalsPage.js

@@ -2,18 +2,31 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
 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 { listProposals, getProposalDetail, approveProposal, rejectProposal, getStickerDefaults, listCustomersForPicker, createCustomerFromGroup, listProductsForPicker, listDeliveryLocationsForCustomer, listPickupLocations, listCarriersForPicker, getActiveOrdersMailbox, syncMailboxNow, refreshProposalsForAgentChange, reparseProposalNow, listBeladingOptionsForProducts, listAllowedLoadCarriers, getDeparturePreview, getAgreementPrices, countOutdatedProposals, } from "../lib/mailbox.functions.js";
+import { useNavigate } from "@tanstack/react-router";
+import { Button, Badge, Card, CardContent, CardHeader, CardTitle, Input, Label, Textarea, Switch, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Dialog, DialogContent, DialogHeader, DialogTitle, toast, } from "@flowselections/core";
+import { Check, X, Trash2, Plus, AlertTriangle, RefreshCw, CalendarClock, UserX, Search, Inbox, ClipboardCheck } from "lucide-react";
+import { getProposalDetail, approveProposal, rejectProposal, getStickerDefaults, listCustomersForPicker, createCustomerFromGroup, listProductsForPicker, listDeliveryLocationsForCustomer, listPickupLocations, listCarriersForPicker, getActiveOrdersMailbox, syncMailboxNow, refreshProposalsForAgentChange, reparseProposalNow, listBeladingOptionsForProducts, listAllowedLoadCarriers, getDeparturePreview, getAgreementPrices, countOutdatedProposals, } from "../lib/mailbox.functions.js";
 import { normalizeUnitKind, toPlants, describeConversion, lineTotal, UNIT_KIND_LABEL, } from "../lib/mailbox-units.js";
 import { enabledLoadCarriers, normalizeAllowedLoadCarriers, EMPTY_LOAD_CARRIERS } from "../lib/load-carriers.js";
 import { listTemplateFields, listPlantTypesForPicker, listSuppliersForPicker, } from "../lib/mailbox-template.functions.js";
 import { SearchableSelect } from "./SearchableSelect.js";
-import { MailboxAuthBanner } from "./MailboxAuthBanner.js";
-import { MailboxStatusLine, AI_AUTH_PATH } from "./MailboxStatusLine.js";
+import { AI_AUTH_PATH } from "./MailboxStatusLine.js";
+import { listProposalsPage } from "../lib/mailbox-list.functions.js";
+import { MailboxPageFrame, browserTz } from "./MailboxPageFrame.js";
+import { DataTable, InitialsAvatar, CellText } from "./fs-ui/DataTable.js";
+import { FilterPanel, FilterOptions, PERIOD_OPTIONS } from "./fs-ui/FilterPanel.js";
+import { fmtDayTime } from "../lib/format-date.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 { MobilePrimaryAction } from "./fs-ui/MobilePrimaryAction.js";
+import { useListHotkeys } from "./fs-ui/useListHotkeys.js";
 import { EmailPreview } from "./EmailPreview.js";
 import { TablePagination } from "./TablePagination.js";
-import { MailboxFilterBar, usePersistedState, normalizeText, matchesPeriod } from "./MailboxFilterBar.js";
+import { usePersistedState } from "./MailboxFilterBar.js";
 import { supabase } from "../integrations/supabase/client.js";
 import { canOverrideLateSignup, checkLinePrices } from "../lib/verkoop-order.js";
 const beladingKey = (b) => `${b.plants_per_crate}x${b.crates_per_layer}x${b.layers_per_cart}|${b.crate_code ?? ""}|${b.carrier_code ?? ""}`;
@@ -79,7 +92,7 @@ function resolveCustomerId(raw, customers, fallbackId) {
 }
 export function MailboxProposalsPage() {
     const qc = useQueryClient();
-    const fetchList = useServerFn(listProposals);
+    const fetchList = useServerFn(listProposalsPage);
     const fetchTemplate = useServerFn(listTemplateFields);
     const fetchApprove = useServerFn(approveProposal);
     const fetchReject = useServerFn(rejectProposal);
@@ -91,6 +104,11 @@ export function MailboxProposalsPage() {
     const fetchPickupLocations = useServerFn(listPickupLocations);
     const fetchActive = useServerFn(getActiveOrdersMailbox);
     const fetchSync = useServerFn(syncMailboxNow);
+    const navigate = useNavigate();
+    /** Knop "Open order" in de melding na bevestigen (route van Verkooporders). */
+    const openOrderAction = (orderId) => orderId
+        ? { action: { label: "Open order", onClick: () => void navigate({ to: `/floriday-verkoop/verkooporders/${orderId}` }) } }
+        : undefined;
     // 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.
@@ -106,11 +124,21 @@ export function MailboxProposalsPage() {
     // 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 [pageSize, setPageSize] = useState(50);
     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 = true;
+    const [listFilter, setListFilter] = usePersistedState("mailbox-proposals:filter", null);
+    const [cursor, setCursor] = useState(null);
+    const [helpOpen, setHelpOpen] = useState(false);
+    const [filtersOpen, setFiltersOpen] = useState(false);
+    const searchRef = useRef(null);
+    // Zware keuzelijsten (klanten, artikelen, …) pas laden zodra een voorstel
+    // voor het eerst geopend wordt; daarna blijven ze in de cache.
+    const [refsWanted, setRefsWanted] = useState(false);
+    useEffect(() => { if (activeId)
+        setRefsWanted(true); }, [activeId]);
+    const refsEnabled = refsWanted;
     const refOpts = {
         enabled: refsEnabled,
         staleTime: 5 * 60000,
@@ -120,11 +148,23 @@ export function MailboxProposalsPage() {
     // Bestelvoorstellen toont uitsluitend nieuwe, nog niet gecontroleerde
     // bestellingen ("Te controleren"). Goedgekeurd/afgewezen verschijnt in
     // de module Verwerkt.
-    const { data, isLoading, error: listError, refetch: refetchList } = useQuery({
-        queryKey: ["mailbox-proposals", "pending"],
+    const listParams = {
+        statuses: ["pending"],
+        search,
+        period,
+        sort: sortOrder === "date-asc" ? "asc" : "desc",
+        dateField: "received",
+        tz: browserTz(),
+        filter: listFilter,
+        page,
+        pageSize,
+    };
+    const { data, isLoading, error: listError, refetch: refetchList, dataUpdatedAt } = useQuery({
+        queryKey: ["mailbox-proposals", "pending", listParams],
         // Bewust NIET stilzwijgend opvangen: als de server tijdelijk onbereikbaar is
         // moet de gebruiker dat zien in plaats van een lege lijst ("geen mailtjes").
-        queryFn: () => fetchList({ data: { status: "pending" } }),
+        queryFn: () => fetchList({ data: listParams }),
+        placeholderData: (prev) => prev,
         retry: 3,
         retryDelay: (a) => Math.min(1000 * 2 ** a, 8000),
         refetchInterval: 60000,
@@ -171,6 +211,7 @@ 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-kpis"] });
             }
         },
     });
@@ -221,8 +262,9 @@ export function MailboxProposalsPage() {
         },
         onSuccess: (res) => {
             qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+            qc.invalidateQueries({ queryKey: ["mailbox-kpis"] });
             void refetchOutdated();
-            toast.success(`${res?.reparsed ?? 0} voorstel(len) opnieuw geanalyseerd`);
+            toast.success(`${res?.reparsed ?? 0} bestelling(en) opnieuw uitgelezen`);
         },
     });
     // Handmatig één voorstel opnieuw laten analyseren door de AI-agent.
@@ -237,22 +279,36 @@ export function MailboxProposalsPage() {
             if (res?.ok) {
                 setReparseError(null);
                 qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                qc.invalidateQueries({ queryKey: ["mailbox-kpis"] });
                 qc.invalidateQueries({ queryKey: ["mailbox-proposal-detail"] });
-                toast.success("E-mail opnieuw geanalyseerd — bestelgegevens bijgewerkt");
+                toast.success("Mail opnieuw uitgelezen — gegevens bijgewerkt");
             }
             else {
-                const msg = res?.error ?? "Opnieuw analyseren mislukt";
+                if (res?.error)
+                    console.warn("[mailbox] opnieuw uitlezen", res.error);
+                const msg = "Opnieuw uitlezen lukt niet. Probeer het over een paar minuten opnieuw.";
                 setReparseError(msg);
                 toast.error(msg);
             }
         },
         onError: (e) => {
-            const msg = e?.message ?? "Opnieuw analyseren mislukt";
+            console.warn("[mailbox] opnieuw uitlezen", e);
+            const msg = "Opnieuw uitlezen lukt niet. Probeer het over een paar minuten opnieuw.";
             setReparseError(msg);
             toast.error(msg);
         },
     });
-    const items = Array.isArray(data?.items) ? data.items : [];
+    // Platte rijen uit de server terugzetten naar de vorm die de rest van de
+    // pagina (klantnaam, detailkop) al gebruikt.
+    const items = useMemo(() => (Array.isArray(data?.items) ? data.items : []).map((r) => ({
+        ...r,
+        mailbox_messages: {
+            subject: r.subject, from_email: r.from_email, from_name: r.from_name,
+            received_at: r.received_at, connection_id: r.connection_id,
+            account_email: r.account_email, preview: String(r.preview ?? "").slice(0, 180),
+        },
+    })), [data]);
+    const total = Number(data?.total ?? 0);
     const template = Array.isArray(templateData?.items) ? templateData.items : [];
     const customers = Array.isArray(customersData?.items) ? customersData.items : [];
     const products = Array.isArray(productsData?.items) ? productsData.items : [];
@@ -279,43 +335,99 @@ export function MailboxProposalsPage() {
         }
         return p.mailbox_messages?.from_name || p.mailbox_messages?.from_email || "Onbekend";
     };
-    // --- 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));
+    // --- Zoeken, filteren en sorteren gebeurt op de server -----------------
+    const hasActiveFilters = !!search || period !== "all" || !!listFilter;
+    const clearFilters = () => { setSearch(""); setPeriod("all"); setSortOrder("date-desc"); setListFilter(null); };
+    useEffect(() => { setPage(1); setCursor(null); }, [search, period, sortOrder, listFilter]);
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
     const currentPage = Math.min(page, pageCount);
-    const pagedItems = filteredItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
-    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(MailboxStatusLine, {}), _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." })] }) }), outdatedCount > 0 && (_jsxs("div", { className: "shrink-0 flex items-center justify-between gap-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800", children: [_jsxs("span", { children: ["De AI-instelling is gewijzigd. ", outdatedCount, " voorstel(len) zijn nog met de vorige instelling gelezen."] }), _jsx(Button, { size: "sm", variant: "outline", disabled: agentRefreshMut.isPending, onClick: () => agentRefreshMut.mutate(), children: agentRefreshMut.isPending ? "Bezig…" : "Opnieuw analyseren" })] })), 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 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" }), p.mailbox_messages?.account_email && (_jsxs("div", { className: "truncate text-xs text-muted-foreground", children: ["Ontvangen op: ", p.mailbox_messages.account_email] }))] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: date ? new Date(date).toLocaleDateString("nl-NL") : "-" }), _jsx(TableCell, { children: _jsxs("div", { className: "flex flex-wrap gap-1", children: [p.readiness === "klaar" ? (_jsx(Badge, { variant: "outline", className: "border-emerald-300 bg-emerald-50 text-emerald-800", children: "Klaar om te bevestigen" })) : (_jsx(Badge, { variant: "secondary", children: "Controleren" })), p.duplicate && _jsx(Badge, { variant: "outline", className: "border-amber-300 bg-amber-50 text-amber-800", children: "Mogelijk dubbel" })] }) })] }, p.id));
-                                        }) })] }), _jsx(TablePagination, { total: filteredItems.length, page: currentPage, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize })] }) })) }), _jsx(Dialog, { open: !!activeId, onOpenChange: (o) => { if (!o) {
+    // Oudste open voorstel openen (knop "Volgende controleren" op mobiel).
+    const openOldest = async () => {
+        try {
+            const res = await fetchList({ data: { statuses: ["pending"], sort: "asc", page: 1, pageSize: 10, tz: browserTz() } });
+            const first = Array.isArray(res?.items) ? res.items[0] : null;
+            if (first?.id)
+                setActiveId(first.id);
+            else
+                toast.info("Er zijn geen bestellingen meer om te controleren.");
+        }
+        catch {
+            toast.error("Openen lukt niet. Probeer het opnieuw.");
+        }
+    };
+    useListHotkeys({
+        disabled: !!activeId || 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] ? () => setActiveId(items[cursor].id) : undefined,
+        onEscape: hasActiveFilters ? clearFilters : undefined,
+        onHelp: () => setHelpOpen(true),
+    });
+    const periodLabel = { today: "Vandaag", "7d": "Laatste 7 dagen", "30d": "Laatste 30 dagen" };
+    const chips = [
+        ...(period !== "all" ? [{ key: "period", label: periodLabel[period] ?? period, icon: _jsx(CalendarClock, {}), onRemove: () => setPeriod("all") }] : []),
+        ...(listFilter === "klant_onbekend" ? [{ key: "klant", label: "Klant onbekend", icon: _jsx(UserX, {}), onRemove: () => setListFilter(null) }] : []),
+    ];
+    const activeKpi = listFilter === "klant_onbekend" ? "customer_unknown" : period === "today" ? "today" : null;
+    const columns = [
+        {
+            key: "klant", header: "Klant", width: 220,
+            cell: (p) => {
+                const name = customerNameFor(p);
+                return (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(InitialsAvatar, { name: name }), _jsx(CellText, { primary: name, secondary: p.customer_name ? undefined : "Klant nog niet herkend", strong: true })] }));
+            },
+        },
+        {
+            key: "bericht", header: "Bericht", width: 320,
+            cell: (p) => _jsx(CellText, { primary: p.mailbox_messages?.subject || "(geen onderwerp)", secondary: p.mailbox_messages?.preview || "Geen voorbeeldtekst" }),
+        },
+        {
+            key: "ontvangen_op", header: "Mailadres", width: 180,
+            cell: (p) => _jsx(CellText, { primary: p.mailbox_messages?.account_email || "–" }),
+        },
+        {
+            key: "datum", header: "Ontvangen", width: 132, sortable: true,
+            cell: (p) => _jsx("span", { className: "block truncate tabular-nums", children: fmtDayTime(p.mailbox_messages?.received_at ?? p.created_at) }),
+        },
+        {
+            key: "status", header: "Status", width: 120,
+            cell: (p) => (_jsxs("div", { className: "flex items-center gap-2", children: [p.readiness === "klaar"
+                        ? _jsx(StatusIcon, { tone: "done", label: "Klaar om te bevestigen" })
+                        : _jsx(StatusIcon, { tone: "open", label: "Te controleren", detail: "Controleer de gegevens en bevestig de bestelling." }), p.duplicate && _jsx(StatusIcon, { tone: "busy", label: "Mogelijk dubbel", detail: "Deze mail lijkt op een eerdere bestelling." })] })),
+        },
+    ];
+    const pageNotices = outdatedCount > 0 ? [{
+            key: "outdated",
+            tone: "warning",
+            title: `${outdatedCount} ${outdatedCount === 1 ? "bestelling is" : "bestellingen zijn"} met de vorige instelling uitgelezen.`,
+            action: (_jsx(Button, { size: "sm", variant: "outline", disabled: agentRefreshMut.isPending, onClick: () => agentRefreshMut.mutate(), children: agentRefreshMut.isPending ? "Bezig…" : "Opnieuw uitlezen" })),
+        }] : [];
+    return (_jsxs(MailboxPageFrame, { tab: "voorstellen", helpOpen: helpOpen, onHelpOpenChange: setHelpOpen, activeKpi: activeKpi, notices: pageNotices, onKpi: (k) => {
+            if (k === "today") {
+                setListFilter(null);
+                setPeriod("today");
+                return true;
+            }
+            if (k === "customer_unknown") {
+                setPeriod("all");
+                setListFilter("klant_onbekend");
+                return true;
+            }
+            if (k === "pending") {
+                clearFilters();
+                return true;
+            }
+            return false;
+        }, 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: "Klant", value: listFilter ?? "all", options: [{ value: "all", label: "Alle klanten" }, { value: "klant_onbekend", label: "Klant onbekend" }], onChange: (v) => setListFilter(v === "klant_onbekend" ? "klant_onbekend" : null) })] }), isLoading && !data ? (_jsx(TableSkeleton, { columns: [220, 320, 180, 132, 120] })) : listError && !data ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: _jsx(EmptyState, { icon: _jsx(Inbox, { className: "h-6 w-6" }), title: "De lijst kon niet worden geladen", text: "Je bestellingen zijn er nog; ze worden alleen nu niet getoond.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => void refetchList(), 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 bestellingen die bij je zoekopdracht of filters passen.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: clearFilters, children: "Filters wissen" }) })) : (_jsx(EmptyState, { icon: _jsx(Inbox, { className: "h-6 w-6" }), title: "Geen bestellingen om te controleren", text: "Nieuwe bestellingen uit je mailbox verschijnen hier vanzelf." })) })) : (_jsx(DataTable, { rows: items, columns: columns, rowKey: (p) => p.id, activeIndex: cursor, onRowClick: (p, i) => { setCursor(i); setActiveId(p.id); }, sort: { key: "datum", dir: sortOrder === "date-asc" ? "asc" : "desc" }, onSortChange: () => setSortOrder(sortOrder === "date-asc" ? "date-desc" : "date-asc"), mobileCard: (p) => {
+                    const d = p.mailbox_messages?.received_at ?? p.created_at;
+                    return (_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: customerNameFor(p) }), p.readiness === "klaar"
+                                        ? _jsx(StatusIcon, { tone: "done", label: "Klaar om te bevestigen" })
+                                        : _jsx(StatusIcon, { tone: "open", label: "Te controleren" })] }), _jsx("div", { className: "truncate text-muted-foreground", children: p.mailbox_messages?.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs tabular-nums text-muted-foreground", children: [fmtDayTime(d), p.duplicate ? " · mogelijk dubbel" : ""] })] }));
+                }, footer: _jsx(TablePagination, { total: total, page: currentPage, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize }) })), _jsx("span", { className: "sr-only", "aria-live": "polite", children: dataUpdatedAt ? `${total} bestellingen` : "" }), _jsx(MobilePrimaryAction, { label: "Volgende controleren", icon: _jsx(ClipboardCheck, {}), onClick: () => void openOldest(), hidden: !!activeId || total === 0 }), _jsx(Dialog, { open: !!activeId, onOpenChange: (o) => { if (!o) {
                     setActiveId(null);
                     setReparseError(null);
-                } }, children: _jsx(DialogContent, { className: "max-w-[95vw] w-[95vw] h-[92vh] max-h-[92vh] p-0 flex flex-col overflow-hidden", children: !active ? (_jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-2 text-sm text-muted-foreground", children: [_jsx(DialogTitle, { className: "text-base", children: "Bestelling" }), detailLoading ? "Bestelling laden…" : "Bestelling niet gevonden."] })) : (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { className: "px-6 pt-6 pb-3 shrink-0 border-b", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx(DialogTitle, { children: customerNameFor(activeSummary ?? active) }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "mr-8", disabled: reparseMutation.isPending, onClick: () => reparseMutation.mutate(active.id), children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${reparseMutation.isPending ? "animate-spin" : ""}` }), reparseMutation.isPending ? "Analyseren…" : "Mail opnieuw analyseren"] })] }), reparseError && (_jsxs("div", { className: "mt-2 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsx("span", { children: reparseError })] }))] }), _jsx("div", { className: "flex-1 min-h-0 overflow-hidden p-6", children: _jsx(ProposalEditor, { proposal: active, template: template, customers: customers, products: products, allowBackorder: allowBackorder, plantTypes: plantTypes, suppliers: suppliers, carriers: carriers, pickupLocations: pickupLocations, onApprove: async (payload) => {
+                } }, 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 ? "Uitlezen…" : "Mail opnieuw uitlezen"] })] }), 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 });
                                             if (res?.ok === false) {
@@ -323,35 +435,40 @@ export function MailboxProposalsPage() {
                                                 return res;
                                             }
                                             if (res?.alreadyApproved) {
-                                                toast.info(`Er bestaat al een order voor dit voorstel (${res.orderNumber}).`);
+                                                toast.info(`Er bestaat al een order voor deze bestelling (${res.orderNumber}).`, openOrderAction(res.orderId));
                                                 qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                                                qc.invalidateQueries({ queryKey: ["mailbox-kpis"] });
                                                 setActiveId(null);
                                                 return res;
                                             }
                                             const shortages = Array.isArray(res?.shortages) ? res.shortages : [];
-                                            toast.success("Bestelling aangemaakt — karindeling wordt automatisch aangemaakt in de Verkoop-module");
+                                            toast.success(`Order ${res?.orderNumber ?? ""} aangemaakt.`.replace("  ", " "), openOrderAction(res?.orderId));
                                             if (shortages.length > 0) {
                                                 toast.warning(`Tekorten (levering zonder voorraad staat aan): ${shortages
                                                     .map((s) => `${s.product ?? s.productId}: besteld ${s.wanted}, beschikbaar ${s.available}, tekort ${s.missing}`)
                                                     .join(" · ")}`);
                                             }
                                             qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                                            qc.invalidateQueries({ queryKey: ["mailbox-kpis"] });
                                             setActiveId(null);
                                             return res;
                                         }
                                         catch (e) {
-                                            toast.error(e?.message ?? "Goedkeuren mislukt");
-                                            return { ok: false, reason: "other", message: e?.message ?? "Goedkeuren mislukt" };
+                                            console.warn("[mailbox] bevestigen", e);
+                                            toast.error("Bevestigen lukt niet. Probeer het opnieuw.");
+                                            return { ok: false, reason: "other", message: "Bevestigen lukt niet. Probeer het opnieuw." };
                                         }
                                     }, onReject: async (reason) => {
                                         try {
                                             await fetchReject({ data: { proposalId: active.id, reason } });
-                                            toast.success("Voorstel afgewezen");
+                                            toast.success("Bestelling afgewezen");
                                             qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                                            qc.invalidateQueries({ queryKey: ["mailbox-kpis"] });
                                             setActiveId(null);
                                         }
                                         catch (e) {
-                                            toast.error(e?.message ?? "Afwijzen mislukt");
+                                            console.warn("[mailbox] afwijzen", e);
+                                            toast.error("Afwijzen lukt niet. Probeer het opnieuw.");
                                         }
                                     } }, active.id) })] })) }) })] }));
 }
@@ -678,11 +795,11 @@ function ProposalEditor({ proposal, template, customers, products, allowBackorde
             return null;
         }
         if (!deliveryLocationVal) {
-            toast.error("Selecteer een afleverlocatie.");
+            toast.error("Kies een afleverlocatie.");
             return null;
         }
         if (!pickupLocationVal) {
-            toast.error("Selecteer een afhaallocatie (eigen locatie / tuin).");
+            toast.error("Kies een afhaallocatie (eigen locatie of tuin).");
             return null;
         }
         const validLines = lines.filter((l) => l.product_id && (l.quantity ?? 0) > 0);
@@ -773,7 +890,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: [_jsx(Card, { className: "flex flex-col min-h-0 overflow-hidden", children: _jsxs(CardContent, { className: "flex-1 min-h-0 p-4 flex flex-col gap-2", children: [msg.account_email && (_jsxs("div", { className: "shrink-0 text-xs text-muted-foreground", children: ["Ontvangen op: ", msg.account_email] })), proposal.parsed_payload?.reason === "geen_ai_agent" && (_jsxs("div", { className: "shrink-0 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800", children: ["Automatisch uitlezen staat uit: koppel een AI-agent bij Instellingen \u203A AI-Authenticatie.", " ", _jsx("a", { href: AI_AUTH_PATH, className: "underline font-medium", children: "Naar AI-Authenticatie" })] })), _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: [(() => {
+    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: _jsxs(CardContent, { className: "flex-1 min-h-0 p-4 flex flex-col gap-2", children: [msg.account_email && (_jsxs("div", { className: "shrink-0 text-xs text-muted-foreground", children: ["Ontvangen op: ", msg.account_email] })), proposal.parsed_payload?.reason === "geen_ai_agent" && (_jsxs("div", { className: "shrink-0 rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-soft-foreground", children: ["Automatisch uitlezen staat uit. Vul de gegevens zelf in; een beheerder kan dit aanzetten bij Instellingen.", " ", _jsx("a", { href: AI_AUTH_PATH, className: "underline font-medium", children: "Naar Instellingen" })] })), _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",
@@ -800,9 +917,9 @@ function ProposalEditor({ proposal, template, customers, products, allowBackorde
                                 const metaFor = (key) => fieldMeta[key] ?? (key === "customer" && proposal.matched_customer_id
                                     ? { confidence: payload.auto_match_warning ? 0.6 : 1, source: payload.auto_match_forwarded ? "afgeleid" : "uit mail" }
                                     : null);
-                                return (_jsxs(_Fragment, { children: [dup && (_jsxs("div", { className: "rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-800", children: [_jsx("strong", { children: "Mogelijk dubbel:" }), " ", dup.kind === "referentie" ? "dezelfde referentie" : "vrijwel dezelfde regels", " als ", dup.label, "."] })), payload.attachment_unread && (_jsx("div", { className: "rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800", children: "Deze mail heeft een bijlage. De bijlage is niet automatisch gelezen; controleer hem zelf." })), (missingList.length > 0 || uncertainList.length > 0) && (_jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [missingList.length > 0 && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs", children: [_jsx("div", { className: "font-medium text-destructive mb-1", children: "Ontbreekt" }), _jsx("ul", { className: "list-disc pl-4 space-y-0.5", children: missingList.map((m) => _jsx("li", { children: m }, m)) })] })), uncertainList.length > 0 && (_jsxs("div", { className: "rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800", children: [_jsx("div", { className: "font-medium mb-1", children: "Twijfel" }), _jsx("ul", { className: "list-disc pl-4 space-y-0.5", children: uncertainList.map((m) => _jsx("li", { children: m }, m)) })] }))] })), ai && ai.ok === false && (_jsx("div", { className: "rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800", children: ai.retry_pending
+                                return (_jsxs(_Fragment, { children: [dup && (_jsxs("div", { className: "rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-soft-foreground", children: [_jsx("strong", { children: "Mogelijk dubbel:" }), " ", dup.kind === "referentie" ? "dezelfde referentie" : "vrijwel dezelfde regels", " als ", dup.label, "."] })), payload.attachment_unread && (_jsx("div", { className: "rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-soft-foreground", children: "Deze mail heeft een bijlage. De bijlage is niet automatisch gelezen; controleer hem zelf." })), (missingList.length > 0 || uncertainList.length > 0) && (_jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [missingList.length > 0 && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs", children: [_jsx("div", { className: "font-medium text-destructive mb-1", children: "Ontbreekt" }), _jsx("ul", { className: "list-disc pl-4 space-y-0.5", children: missingList.map((m) => _jsx("li", { children: m }, m)) })] })), uncertainList.length > 0 && (_jsxs("div", { className: "rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-soft-foreground", children: [_jsx("div", { className: "font-medium mb-1", children: "Twijfel" }), _jsx("ul", { className: "list-disc pl-4 space-y-0.5", children: uncertainList.map((m) => _jsx("li", { children: m }, m)) })] }))] })), ai && ai.ok === false && (_jsx("div", { className: "rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-soft-foreground", children: ai.retry_pending
                                                 ? "De AI-dienst was even bezet — we proberen deze mail automatisch opnieuw. Je kunt de velden intussen zelf invullen."
-                                                : "Deze mail is niet automatisch uitgelezen — vul de velden handmatig in." })), matchWarning && (_jsx("div", { className: "rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800", children: matchWarning })), customerField && renderField(customerField), _jsx(ConfBadge, { meta: metaFor("customer"), thresholds: thresholds }), customerNotLocal && (_jsxs("div", { className: "rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800 flex items-center justify-between gap-2", children: [_jsx("span", { children: "Deze klant bestaat nog niet lokaal. Maak de klant eerst aan." }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => setNewCustomer(customers.find((c) => c.id === customerVal) ?? null), children: "Klant aanmaken" })] })), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Locatie" }), _jsx(SearchableSelect, { value: deliveryLocationVal, placeholder: !customerVal
+                                                : "Deze mail is niet automatisch uitgelezen — vul de velden handmatig in." })), matchWarning && (_jsx("div", { className: "rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-soft-foreground", children: matchWarning })), customerField && renderField(customerField), _jsx(ConfBadge, { meta: metaFor("customer"), thresholds: thresholds }), customerNotLocal && (_jsxs("div", { className: "rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-soft-foreground flex items-center justify-between gap-2", children: [_jsx("span", { children: "Deze klant bestaat nog niet lokaal. Maak de klant eerst aan." }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => setNewCustomer(customers.find((c) => c.id === customerVal) ?? null), children: "Klant aanmaken" })] })), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Locatie" }), _jsx(SearchableSelect, { value: deliveryLocationVal, placeholder: !customerVal
                                                         ? "Selecteer eerst een klant"
                                                         : deliveryLocations.length
                                                             ? "Kies locatie..."
@@ -824,7 +941,7 @@ function ProposalEditor({ proposal, template, customers, products, allowBackorde
                                                             : "Kies vervoerder...", clearLabel: "\u2014 Geen \u2014", disabled: !deliveryLocationVal, options: carriers.map((c) => ({
                                                         value: c.id,
                                                         label: c.name + (c.is_default ? " (standaard)" : ""),
-                                                    })), onChange: (v) => setVal("carrier", v) }), selectedLocation?.carrier_id && carrierVal !== selectedLocation.carrier_id && (_jsx("div", { className: "text-xs text-muted-foreground", children: "Wijkt af van standaard vervoerder van deze locatie \u2014 geldt alleen voor deze bestelling." }))] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "flex items-center gap-2", children: ["Bezorgdatum ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Input, { type: "date", value: deliveryVal ?? "", onChange: (e) => setVal("delivery_date", e.target.value || null) }), _jsx(ConfBadge, { meta: metaFor("delivery_date"), thresholds: thresholds }), !carrierVal || !deliveryLocationVal ? (_jsx("div", { className: "text-xs text-muted-foreground", children: "Kies een afleverlocatie en vervoerder; daarna controleren we of deze datum haalbaar is." })) : !deliveryVal ? (_jsx("div", { className: "text-xs text-muted-foreground", children: "De mail noemt geen datum. Kies zelf een datum." })) : previewLoading ? (_jsx("div", { className: "text-xs text-muted-foreground", children: "Haalbaarheid controleren\u2026" })) : previewError ? (_jsxs("div", { className: "text-xs text-destructive", children: ["De haalbaarheid kon niet worden gecontroleerd: ", previewError] })) : dateFeasible ? (_jsxs("div", { className: "rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-800", children: [fmtDate(deliveryVal), " is haalbaar.", preview?.chosen?.departureAt ? ` Ophaalmoment: ${fmtDateTime(preview.chosen.departureAt)}` : "", preview?.chosen?.signupDeadline ? ` (aanmelden tot ${fmtDateTime(preview.chosen.signupDeadline)}).` : "."] })) : (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs space-y-2", children: [_jsxs("div", { className: "text-destructive", children: [fmtDate(deliveryVal), " is niet haalbaar", preview?.reason ? `: ${preview.reason}` : "."] }), preview?.firstFeasibleDeliveryDate && preview.firstFeasibleDeliveryDate !== deliveryVal && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setVal("delivery_date", preview.firstFeasibleDeliveryDate), children: ["Gebruik ", fmtDate(preview.firstFeasibleDeliveryDate)] })), preview?.ok === true && previewKind === "late_signup" && (_jsx(LateSignupChoice, { open: lateOpen, setOpen: setLateOpen, reason: lateReason, setReason: setLateReason }))] }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Referentie klant" }), _jsx(Input, { value: typeof values["reference"] === "string" ? values["reference"] : "", placeholder: "Bijv. ordernummer van de klant", onChange: (e) => setVal("reference", e.target.value) }), _jsx(ConfBadge, { meta: metaFor("reference"), thresholds: thresholds })] }), otherFields.map(renderField)] }));
+                                                    })), onChange: (v) => setVal("carrier", v) }), selectedLocation?.carrier_id && carrierVal !== selectedLocation.carrier_id && (_jsx("div", { className: "text-xs text-muted-foreground", children: "Wijkt af van standaard vervoerder van deze locatie \u2014 geldt alleen voor deze bestelling." }))] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "flex items-center gap-2", children: ["Bezorgdatum ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Input, { type: "date", value: deliveryVal ?? "", onChange: (e) => setVal("delivery_date", e.target.value || null) }), _jsx(ConfBadge, { meta: metaFor("delivery_date"), thresholds: thresholds }), !carrierVal || !deliveryLocationVal ? (_jsx("div", { className: "text-xs text-muted-foreground", children: "Kies een afleverlocatie en vervoerder; daarna controleren we of deze datum haalbaar is." })) : !deliveryVal ? (_jsx("div", { className: "text-xs text-muted-foreground", children: "De mail noemt geen datum. Kies zelf een datum." })) : previewLoading ? (_jsx("div", { className: "text-xs text-muted-foreground", children: "Haalbaarheid controleren\u2026" })) : previewError ? (_jsxs("div", { className: "text-xs text-destructive", children: ["De haalbaarheid kon niet worden gecontroleerd: ", previewError] })) : dateFeasible ? (_jsxs("div", { className: "rounded-md border border-primary/30 bg-primary/10 px-3 py-2 text-xs text-primary", children: [fmtDate(deliveryVal), " is haalbaar.", preview?.chosen?.departureAt ? ` Ophaalmoment: ${fmtDateTime(preview.chosen.departureAt)}` : "", preview?.chosen?.signupDeadline ? ` (aanmelden tot ${fmtDateTime(preview.chosen.signupDeadline)}).` : "."] })) : (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs space-y-2", children: [_jsxs("div", { className: "text-destructive", children: [fmtDate(deliveryVal), " is niet haalbaar", preview?.reason ? `: ${preview.reason}` : "."] }), preview?.firstFeasibleDeliveryDate && preview.firstFeasibleDeliveryDate !== deliveryVal && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setVal("delivery_date", preview.firstFeasibleDeliveryDate), children: ["Gebruik ", fmtDate(preview.firstFeasibleDeliveryDate)] })), preview?.ok === true && previewKind === "late_signup" && (_jsx(LateSignupChoice, { open: lateOpen, setOpen: setLateOpen, reason: lateReason, setReason: setLateReason }))] }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Referentie klant" }), _jsx(Input, { value: typeof values["reference"] === "string" ? values["reference"] : "", placeholder: "Bijv. ordernummer van de klant", onChange: (e) => setVal("reference", e.target.value) }), _jsx(ConfBadge, { meta: metaFor("reference"), thresholds: thresholds })] }), otherFields.map(renderField)] }));
                             })(), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Bestelregels" }), _jsxs("div", { className: "grid grid-cols-12 gap-2 text-xs text-muted-foreground px-1", children: [_jsx("div", { className: "col-span-4", children: "Product" }), _jsx("div", { className: "col-span-3", children: "Belading" }), _jsx("div", { className: "col-span-2", children: "Fusten" }), _jsx("div", { className: "col-span-2", children: "Prijs per stuk" }), _jsx("div", { className: "col-span-1 text-center", children: stickerAvailable ? "Sticker" : "" })] }), lines.map((line, idx) => {
                                         const product = line.product_id ? products.find((p) => p.id === line.product_id) : null;
                                         const stdBelading = defaultBelading(product);
@@ -924,7 +1041,7 @@ function ProposalEditor({ proposal, template, customers, products, allowBackorde
                                                                         const pl = toPlants(next[idx].qty_in_mail, kind, effBelading);
                                                                         next[idx] = { ...next[idx], unit_kind: kind, quantity: pl ?? next[idx].quantity };
                                                                         setLines(next);
-                                                                    }, children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, { placeholder: "Kies eenheid" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__none", disabled: true, children: "Kies eenheid" }), ["fust", "laag", "kar", "stuk"].map((k) => (_jsx(SelectItem, { value: k, children: UNIT_KIND_LABEL[k] }, k)))] })] })] })), (line.warnings ?? []).filter((w) => !w.startsWith("Onbekend artikel") && !w.startsWith("Eenheid onbekend")).map((w) => (_jsx("div", { className: "mt-1 text-[11px] text-amber-700", children: w }, w)))] }), _jsx(Input, { className: "col-span-2", type: "number", min: 1, step: 1, inputMode: "numeric", onKeyDown: blockDecimal, value: cratesDisplay, onChange: (e) => {
+                                                                    }, children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, { placeholder: "Kies eenheid" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__none", disabled: true, children: "Kies eenheid" }), ["fust", "laag", "kar", "stuk"].map((k) => (_jsx(SelectItem, { value: k, children: UNIT_KIND_LABEL[k] }, k)))] })] })] })), (line.warnings ?? []).filter((w) => !w.startsWith("Onbekend artikel") && !w.startsWith("Eenheid onbekend")).map((w) => (_jsx("div", { className: "mt-1 text-[11px] text-warning-soft-foreground", children: w }, w)))] }), _jsx(Input, { className: "col-span-2", type: "number", min: 1, step: 1, inputMode: "numeric", onKeyDown: blockDecimal, value: cratesDisplay, onChange: (e) => {
                                                         const next = [...lines];
                                                         const raw = e.target.value.replace(/[.,]/g, "");
                                                         const cr = raw ? Math.max(1, Math.floor(Number(raw))) : null;
@@ -938,7 +1055,7 @@ function ProposalEditor({ proposal, template, customers, products, allowBackorde
                                                             } }), (() => {
                                                             const ag = line.product_id ? agreements[line.product_id] : null;
                                                             const src = line.price_source;
-                                                            return (_jsxs("div", { className: "text-[11px] text-muted-foreground space-y-0.5", children: [line.unit_price === null || line.unit_price === undefined ? (_jsx("div", { className: "text-amber-700", children: "Geen prijs bekend" })) : (_jsxs("div", { children: [src === "uit mail" ? "Uit mail" : src === "afspraak" ? "Prijsafspraak" : "Zelf ingevuld", line.mail_price && line.price_per === "eenheid" ? ` (${euro(line.mail_price)} per ${UNIT_KIND_LABEL[(line.unit_kind ?? "fust")]})` : "", line.quantity ? ` · ${euro(lineTotal(line.quantity, line.unit_price))}` : ""] })), ag && Math.abs(ag.net_price - Number(line.unit_price ?? -1)) > 0.0001 && (_jsxs("div", { className: "text-amber-700", children: ["Afspraak: ", euro(ag.net_price), " ", _jsx("button", { type: "button", className: "underline", onClick: () => {
+                                                            return (_jsxs("div", { className: "text-[11px] text-muted-foreground space-y-0.5", children: [line.unit_price === null || line.unit_price === undefined ? (_jsx("div", { className: "text-warning-soft-foreground", children: "Geen prijs bekend" })) : (_jsxs("div", { children: [src === "uit mail" ? "Uit mail" : src === "afspraak" ? "Prijsafspraak" : "Zelf ingevuld", line.mail_price && line.price_per === "eenheid" ? ` (${euro(line.mail_price)} per ${UNIT_KIND_LABEL[(line.unit_kind ?? "fust")]})` : "", line.quantity ? ` · ${euro(lineTotal(line.quantity, line.unit_price))}` : ""] })), ag && Math.abs(ag.net_price - Number(line.unit_price ?? -1)) > 0.0001 && (_jsxs("div", { className: "text-warning-soft-foreground", children: ["Afspraak: ", euro(ag.net_price), " ", _jsx("button", { type: "button", className: "underline", onClick: () => {
                                                                                     const next = [...lines];
                                                                                     next[idx] = { ...next[idx], unit_price: ag.net_price, price_source: "afspraak" };
                                                                                     setLines(next);
@@ -948,13 +1065,13 @@ function ProposalEditor({ proposal, template, customers, products, allowBackorde
                                                                         next[idx] = { ...next[idx], needs_sticker: e.target.checked };
                                                                         setLines(next);
                                                                     } }), "Sticker"] })), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setLines(lines.filter((_, i) => i !== idx)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }, idx));
-                                    }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setLines([...lines, { product_id: null, raw_product_text: "", quantity: 1, unit: "stuks", belading: null }]), children: [_jsx(Plus, { className: "h-3 w-3 mr-1" }), " Regel toevoegen"] }), _jsxs("div", { className: "flex justify-between border-t pt-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Totaal" }), _jsx("span", { className: "font-medium", children: euro(orderTotal) })] }), linesWithoutPrice > 0 && (_jsxs("div", { className: "rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800", children: ["Geen prijs bekend voor ", linesWithoutPrice, " regel(s). Vul een prijs in; zonder prijs kan de bestelling niet worden aangemaakt."] })), zeroPriceLines > 0 && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive space-y-1", children: [_jsxs("div", { children: [zeroPriceLines, " regel(s) met prijs \u20AC 0. Vul de prijs in, of bevestig dat \u20AC 0 klopt."] }), _jsxs("label", { className: "flex items-center gap-2 text-foreground", children: [_jsx("input", { type: "checkbox", className: "h-4 w-4 accent-primary", checked: zeroConfirmed, onChange: (e) => setZeroConfirmed(e.target.checked) }), _jsx("span", { children: "Prijs \u20AC 0 klopt" }), "Prijs \u20AC 0 klopt"] })] }))] }), refusal && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm space-y-2", children: [_jsx("div", { className: "font-medium text-destructive", children: "Bestelling niet aangemaakt \u2014 het voorstel blijft open." }), _jsx("div", { className: "text-destructive", children: refusal.message }), _jsx("div", { className: "flex flex-wrap gap-2", children: refusal.nextDeliveryDate && refusal.nextDeliveryDate !== deliveryVal && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setVal("delivery_date", refusal.nextDeliveryDate), children: ["Volgend haalbaar moment: ", fmtDate(refusal.nextDeliveryDate)] })) }), refusal.kind === "late_signup" && (_jsx(LateSignupChoice, { open: lateOpen, setOpen: setLateOpen, reason: lateReason, setReason: setLateReason }))] })), _jsxs("div", { className: "flex gap-2 pt-2", children: [_jsxs(Button, { className: "flex-1", onClick: handleApprove, children: [_jsx(Check, { className: "h-4 w-4 mr-1" }), " Controleren & bevestigen"] }), _jsxs(Button, { variant: "destructive", onClick: () => onReject(notesVal || ""), children: [_jsx(X, { className: "h-4 w-4 mr-1" }), " Afwijzen"] })] }), _jsx(Dialog, { open: confirmOpen, onOpenChange: (o) => {
+                                    }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setLines([...lines, { product_id: null, raw_product_text: "", quantity: 1, unit: "stuks", belading: null }]), children: [_jsx(Plus, { className: "h-3 w-3 mr-1" }), " Regel toevoegen"] }), _jsxs("div", { className: "flex justify-between border-t pt-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Totaal" }), _jsx("span", { className: "font-medium", children: euro(orderTotal) })] }), linesWithoutPrice > 0 && (_jsxs("div", { className: "rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-soft-foreground", children: ["Geen prijs bekend voor ", linesWithoutPrice, " regel(s). Vul een prijs in; zonder prijs kan de bestelling niet worden aangemaakt."] })), zeroPriceLines > 0 && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive space-y-1", children: [_jsxs("div", { children: [zeroPriceLines, " regel(s) met prijs \u20AC 0. Vul de prijs in, of bevestig dat \u20AC 0 klopt."] }), _jsxs("label", { className: "flex items-center gap-2 text-foreground", children: [_jsx("input", { type: "checkbox", className: "h-4 w-4 accent-primary", checked: zeroConfirmed, onChange: (e) => setZeroConfirmed(e.target.checked) }), _jsx("span", { children: "Prijs \u20AC 0 klopt" }), "Prijs \u20AC 0 klopt"] })] }))] }), refusal && (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm space-y-2", children: [_jsx("div", { className: "font-medium text-destructive", children: "Bestelling niet aangemaakt \u2014 het voorstel blijft open." }), _jsx("div", { className: "text-destructive", children: refusal.message }), _jsx("div", { className: "flex flex-wrap gap-2", children: refusal.nextDeliveryDate && refusal.nextDeliveryDate !== deliveryVal && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setVal("delivery_date", refusal.nextDeliveryDate), children: ["Volgend haalbaar moment: ", fmtDate(refusal.nextDeliveryDate)] })) }), refusal.kind === "late_signup" && (_jsx(LateSignupChoice, { open: lateOpen, setOpen: setLateOpen, reason: lateReason, setReason: setLateReason }))] })), _jsxs("div", { className: "flex gap-2 pt-2", children: [_jsxs(Button, { className: "flex-1", onClick: handleApprove, children: [_jsx(Check, { className: "h-4 w-4 mr-1" }), " Controleren & bevestigen"] }), _jsxs(Button, { variant: "destructive", onClick: () => onReject(notesVal || ""), children: [_jsx(X, { className: "h-4 w-4 mr-1" }), " Afwijzen"] })] }), _jsx(Dialog, { open: confirmOpen, onOpenChange: (o) => {
                                     if (submitting)
                                         return;
                                     setConfirmOpen(o);
                                     if (!o)
                                         setCheckedOk(false);
-                                }, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Bestelling bevestigen" }) }), _jsxs("div", { className: "space-y-3 text-sm", children: [_jsx("p", { className: "text-muted-foreground", children: "De bestelling wordt pas aangemaakt in Bestellingen nadat je hem hebt gecontroleerd en bevestigd." }), _jsxs("div", { className: "rounded-md border p-3 space-y-1", children: [_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Klant:" }), " ", customers.find((c) => c.id === customerVal)?.company_name ?? "-"] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Bezorgdatum:" }), " ", deliveryVal || "-"] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Bestelregels:" }), " ", lines.filter((l) => l.product_id && (l.quantity ?? 0) > 0).length] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Referentie:" }), " ", values["reference"] || "-"] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Totaal:" }), " ", euro(orderTotal)] })] }), lateOverride && (_jsxs("div", { className: "rounded-md border border-amber-200 bg-amber-50 p-2 text-amber-800", children: ["Je maakt de order toch aan na de aanmeldtijd. Reden: ", lateReason.trim()] })), _jsxs("label", { className: "flex items-start gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", className: "mt-1", checked: checkedOk, onChange: (e) => setCheckedOk(e.target.checked) }), _jsx("span", { children: "Ik heb deze bestelling gecontroleerd en de gegevens kloppen." })] })] }), _jsxs("div", { className: "flex gap-2 pt-2", children: [_jsxs(Button, { className: "flex-1", disabled: !checkedOk || submitting, onClick: handleConfirm, children: [_jsx(Check, { className: "h-4 w-4 mr-1" }), submitting ? "Bezig…" : "Bevestigen en bestelling aanmaken"] }), _jsx(Button, { variant: "outline", disabled: submitting, onClick: () => setConfirmOpen(false), children: "Annuleren" })] })] }) }), _jsx(NewCustomerDialog, { candidate: newCustomer, onClose: () => setNewCustomer(null), onCreated: (id) => { setNewCustomer(null); setVal("customer", id); } })] })] })] }));
+                                }, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Bestelling bevestigen" }) }), _jsxs("div", { className: "space-y-3 text-sm", children: [_jsx("p", { className: "text-muted-foreground", children: "De bestelling wordt pas aangemaakt in Bestellingen nadat je hem hebt gecontroleerd en bevestigd." }), _jsxs("div", { className: "rounded-md border p-3 space-y-1", children: [_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Klant:" }), " ", customers.find((c) => c.id === customerVal)?.company_name ?? "-"] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Bezorgdatum:" }), " ", deliveryVal || "-"] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Bestelregels:" }), " ", lines.filter((l) => l.product_id && (l.quantity ?? 0) > 0).length] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Referentie:" }), " ", values["reference"] || "-"] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Totaal:" }), " ", euro(orderTotal)] })] }), lateOverride && (_jsxs("div", { className: "rounded-md border border-warning/30 bg-warning-soft p-2 text-warning-soft-foreground", children: ["Je maakt de order toch aan na de aanmeldtijd. Reden: ", lateReason.trim()] })), _jsxs("label", { className: "flex items-start gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", className: "mt-1", checked: checkedOk, onChange: (e) => setCheckedOk(e.target.checked) }), _jsx("span", { children: "Ik heb deze bestelling gecontroleerd en de gegevens kloppen." })] })] }), _jsxs("div", { className: "flex gap-2 pt-2", children: [_jsxs(Button, { className: "flex-1", disabled: !checkedOk || submitting, onClick: handleConfirm, children: [_jsx(Check, { className: "h-4 w-4 mr-1" }), submitting ? "Bezig…" : "Bevestigen en bestelling aanmaken"] }), _jsx(Button, { variant: "outline", disabled: submitting, onClick: () => setConfirmOpen(false), children: "Annuleren" })] })] }) }), _jsx(NewCustomerDialog, { candidate: newCustomer, onClose: () => setNewCustomer(null), onCreated: (id) => { setNewCustomer(null); setVal("customer", id); } })] })] })] }));
 }
 /** Verplichte bevestiging: externe klant eerst als lokale klant aanmaken. */
 function NewCustomerDialog({ candidate, onClose, onCreated, }) {
@@ -1009,7 +1126,8 @@ function NewCustomerDialog({ candidate, onClose, onCreated, }) {
             onCreated(res.id);
         }
         catch (e) {
-            toast.error(e?.message ?? "Aanmaken mislukt.");
+            console.warn("[mailbox] klant aanmaken", e);
+            toast.error("Klant aanmaken lukt niet. Probeer het opnieuw.");
         }
         finally {
             setBusy(false);
@@ -1019,8 +1137,8 @@ function NewCustomerDialog({ candidate, onClose, onCreated, }) {
             onClose(); }, children: _jsxs(DialogContent, { className: "max-w-xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Nieuwe klant aanmaken" }) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["Deze klant bestaat alleen in ", (candidate?.providers ?? []).map(providerLabel).join(" + ") || "een externe bron", ". Controleer de gegevens en maak de klant aan voordat je de bestelling verwerkt."] }), _jsxs("div", { className: "grid grid-cols-2 gap-3 py-2", children: [field("companyName", "Bedrijfsnaam", true), field("email", "E-mail"), field("street", "Straat"), field("houseNumber", "Huisnummer"), field("postalCode", "Postcode"), field("city", "Plaats"), field("country", "Land"), field("gln", "GLN"), field("phone", "Telefoon")] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { className: "flex-1", disabled: busy, onClick: submit, children: busy ? "Bezig…" : "Klant aanmaken en koppelen" }), _jsx(Button, { variant: "outline", disabled: busy, onClick: onClose, children: "Annuleren" })] })] }) }));
 }
 function DynamicField({ field, value, meta, onChange, customers, products, plantTypes, suppliers, onSelectCustomer, }) {
-    const reviewClass = meta?.needs_review ? "border-yellow-500 ring-1 ring-yellow-500/40 rounded-md p-2" : "";
-    const label = (_jsxs(Label, { className: "flex items-center gap-2", children: [field.label, field.required && _jsx("span", { className: "text-destructive", children: "*" }), meta?.needs_review && (_jsx(Badge, { variant: "outline", className: "text-xs border-yellow-500 text-yellow-700", children: "Controleren" })), typeof meta?.ai_confidence === "number" && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [Math.round(meta.ai_confidence * 100), "%"] }))] }));
+    const reviewClass = meta?.needs_review ? "border-warning/30 ring-1 ring-warning/40 rounded-md p-2" : "";
+    const label = (_jsxs(Label, { className: "flex items-center gap-2", children: [field.label, field.required && _jsx("span", { className: "text-destructive", children: "*" }), meta?.needs_review && (_jsx(StatusIcon, { tone: "busy", label: "Controleren", detail: "Dit veld is niet zeker uit de mail gehaald." })), typeof meta?.ai_confidence === "number" && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [Math.round(meta.ai_confidence * 100), "%"] }))] }));
     const renderControl = () => {
         switch (field.field_type) {
             case "text":
@@ -1065,12 +1183,9 @@ function ConfBadge({ meta, thresholds, }) {
     if (!meta)
         return null;
     const c = Math.max(0, Math.min(1, Number(meta.confidence ?? 0)));
-    const cls = c >= thresholds.green
-        ? "border-emerald-300 bg-emerald-50 text-emerald-800"
-        : c >= thresholds.orange
-            ? "border-amber-300 bg-amber-50 text-amber-800"
-            : "border-destructive/40 bg-destructive/5 text-destructive";
-    return (_jsxs("span", { className: `inline-flex items-center rounded border px-1.5 py-0.5 text-[11px] ${cls}`, children: [Math.round(c * 100), "% \u00B7 ", meta.source] }));
+    const tone = c >= thresholds.green ? "done" : c >= thresholds.orange ? "busy" : "error";
+    const text = c >= thresholds.green ? "Zeker" : c >= thresholds.orange ? "Controleren" : "Onzeker";
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 text-[11px] font-normal text-muted-foreground", children: [_jsx(StatusIcon, { tone: tone, label: text, detail: `${Math.round(c * 100)}% zeker · ${meta.source}` }), text] }));
 }
 function LateSignupChoice({ open, setOpen, reason, setReason }) {
     if (!open) {

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

@@ -1 +1 @@
-{"version":3,"file":"MailboxSkippedPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxSkippedPage.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,kBAAkB,gCAoJjC"}
+{"version":3,"file":"MailboxSkippedPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxSkippedPage.tsx"],"names":[],"mappings":"AAyCA,wBAAgB,kBAAkB,gCAoKjC"}