@flowselections/mailbox-orders 1.0.55 → 1.0.58

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

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

package/dist-lib/components/EmailPreview.js

@@ -1,4 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { fmtDayTime } from "../lib/format-date.js";
 import { useEffect, useMemo, useState } from "react";
 import { Button, Badge } from "@flowselections/core";
 import { Paperclip, Download, Code, FileText, ShieldOff, Shield } from "lucide-react";
@@ -52,5 +53,5 @@ export function EmailPreview({ subject, fromName, fromEmail, receivedAt, to = []
     const rendered = blockRemoteContent ? blockRemote(html) : html;
     const safeAttachments = Array.isArray(attachments) ? attachments : [];
     const inlineOnly = safeAttachments.every((a) => !!a.contentId);
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "shrink-0 space-y-1 border-b pb-3", children: [_jsx("div", { className: "text-base font-semibold leading-snug", children: subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: fromName || fromEmail }), fromName && fromEmail ? ` <${fromEmail}>` : "", receivedAt ? ` · ${new Date(receivedAt).toLocaleString("nl-NL")}` : ""] }), _jsx(AddressLine, { label: "Aan", list: to }), _jsx(AddressLine, { label: "CC", list: cc }), (safeAttachments.length > 0 || hasAttachments) && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-2", children: [safeAttachments.length === 0 ? (_jsxs(Badge, { variant: "outline", className: "gap-1 font-normal", children: [_jsx(Paperclip, { className: "h-3 w-3" }), " Deze mail bevat bijlagen (nog niet opgehaald)"] })) : (safeAttachments.map((a, i) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded border bg-muted/40 px-2 py-1 text-xs", children: [_jsx(Paperclip, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "max-w-[16rem] truncate", children: a.name }), formatSize(a.size) && (_jsx("span", { className: "text-muted-foreground", children: formatSize(a.size) })), a.url && (_jsx("a", { href: a.url, target: "_blank", rel: "noopener noreferrer", className: "text-primary", "aria-label": `Download ${a.name}`, children: _jsx(Download, { className: "h-3 w-3" }) }))] }, `${a.name}-${i}`)))), safeAttachments.length > 0 && inlineOnly && (_jsx("span", { className: "text-[11px] text-muted-foreground", children: "(in de mail ingesloten afbeeldingen)" }))] })), _jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-2", children: [_jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: () => setMode(mode === "html" ? "text" : "html"), disabled: !html, children: mode === "html" ? (_jsxs(_Fragment, { children: [_jsx(FileText, { className: "mr-1 h-3.5 w-3.5" }), " Platte tekst"] })) : (_jsxs(_Fragment, { children: [_jsx(Code, { className: "mr-1 h-3.5 w-3.5" }), " Opgemaakte mail"] })) }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: mode !== "html" || !html, onClick: () => setBlockRemoteContent((v) => !v), children: blockRemoteContent ? (_jsxs(_Fragment, { children: [_jsx(Shield, { className: "mr-1 h-3.5 w-3.5" }), " Externe inhoud tonen"] })) : (_jsxs(_Fragment, { children: [_jsx(ShieldOff, { className: "mr-1 h-3.5 w-3.5" }), " Externe inhoud blokkeren"] })) })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pt-3", children: mode === "html" && html ? (_jsx(EmailFrame, { html: rendered })) : (_jsx("div", { className: "h-full w-full overflow-y-auto overscroll-contain rounded border bg-white p-3", children: _jsx("pre", { className: "whitespace-pre-wrap break-words font-sans text-sm leading-relaxed text-[#111]", children: bodyText || "(geen tekst)" }) })) })] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "shrink-0 space-y-1 border-b pb-3", children: [_jsx("div", { className: "text-base font-semibold leading-snug", children: subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: fromName || fromEmail }), fromName && fromEmail ? ` <${fromEmail}>` : "", receivedAt ? ` · ${fmtDayTime(receivedAt)}` : ""] }), _jsx(AddressLine, { label: "Aan", list: to }), _jsx(AddressLine, { label: "CC", list: cc }), (safeAttachments.length > 0 || hasAttachments) && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-2", children: [safeAttachments.length === 0 ? (_jsxs(Badge, { variant: "outline", className: "gap-1 font-normal", children: [_jsx(Paperclip, { className: "h-3 w-3" }), " Deze mail bevat bijlagen (nog niet opgehaald)"] })) : (safeAttachments.map((a, i) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded border bg-muted/40 px-2 py-1 text-xs", children: [_jsx(Paperclip, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "max-w-[16rem] truncate", children: a.name }), formatSize(a.size) && (_jsx("span", { className: "text-muted-foreground", children: formatSize(a.size) })), a.url && (_jsx("a", { href: a.url, target: "_blank", rel: "noopener noreferrer", className: "text-primary", "aria-label": `Download ${a.name}`, children: _jsx(Download, { className: "h-3 w-3" }) }))] }, `${a.name}-${i}`)))), safeAttachments.length > 0 && inlineOnly && (_jsx("span", { className: "text-[11px] text-muted-foreground", children: "(in de mail ingesloten afbeeldingen)" }))] })), _jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-2", children: [_jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: () => setMode(mode === "html" ? "text" : "html"), disabled: !html, children: mode === "html" ? (_jsxs(_Fragment, { children: [_jsx(FileText, { className: "mr-1 h-3.5 w-3.5" }), " Platte tekst"] })) : (_jsxs(_Fragment, { children: [_jsx(Code, { className: "mr-1 h-3.5 w-3.5" }), " Opgemaakte mail"] })) }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: mode !== "html" || !html, onClick: () => setBlockRemoteContent((v) => !v), children: blockRemoteContent ? (_jsxs(_Fragment, { children: [_jsx(Shield, { className: "mr-1 h-3.5 w-3.5" }), " Externe inhoud tonen"] })) : (_jsxs(_Fragment, { children: [_jsx(ShieldOff, { className: "mr-1 h-3.5 w-3.5" }), " Externe inhoud blokkeren"] })) })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pt-3", children: mode === "html" && html ? (_jsx(EmailFrame, { html: rendered })) : (_jsx("div", { className: "h-full w-full overflow-y-auto overscroll-contain rounded border bg-white p-3", children: _jsx("pre", { className: "whitespace-pre-wrap break-words font-sans text-sm leading-relaxed text-[#111]", children: bodyText || "(geen tekst)" }) })) })] }));
 }

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

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

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

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

package/dist-lib/components/MailboxAuthBanner.js

@@ -1,18 +1,30 @@
 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 }) {
+/** Meldingen over de koppeling van de mailbox (voor de NoticeBar onder de kop). */
+export function mailboxAuthNotices(active) {
     const kind = bannerKind(active);
     if (kind === "unknown") {
-        return (_jsx("div", { className: "shrink-0 text-xs text-muted-foreground", children: "De status van de mailbox kon niet worden opgehaald." }));
+        return [{ key: "auth-unknown", tone: "info", title: "De status van de mailbox kon niet worden opgehaald." }];
     }
     if (kind === "no_mailbox") {
-        return (_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." }));
+        return [{
+                key: "auth-none",
+                tone: "warning",
+                title: "Er is nog geen mailbox gekoppeld voor bestellingen.",
+                details: "Koppel een mailadres voor het ontvangen van bestellingen bij Instellingen.",
+                action: settingsLink("Naar Instellingen"),
+            }];
     }
     if (kind === "reauth") {
         const a = active;
-        return (_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 [{
+                key: "auth-reauth",
+                tone: "error",
+                title: `De koppeling met ${a.account_email} is verlopen.`,
+                details: "Er komen geen nieuwe bestellingen binnen tot je de koppeling vernieuwt.",
+                action: settingsLink("Opnieuw koppelen"),
+            }];
     }
-    return null;
+    return [];
 }

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

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

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

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

package/dist-lib/components/MailboxPageFrame.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 import { useNavigate } from "@tanstack/react-router";
-import { CalendarClock, CheckCircle2, ClipboardCheck, Keyboard, MailX, UserX, Inbox } from "lucide-react";
-import { Button } from "@flowselections/core";
-import { getActiveOrdersMailbox } from "../lib/mailbox.functions.js";
+import { CalendarClock, CheckCircle2, ClipboardCheck, MailX, UserX, Inbox } from "lucide-react";
+import { ensureMailboxDefaultsFn, getActiveOrdersMailbox } from "../lib/mailbox.functions.js";
 import { getMailboxKpis } from "../lib/mailbox-list.functions.js";
-import { MailboxAuthBanner } from "./MailboxAuthBanner.js";
-import { MailboxStatusLine, MailboxStatusMeta } from "./MailboxStatusLine.js";
+import { mailboxAuthNotices } from "./MailboxAuthBanner.js";
+import { statusInfo, useMailboxStatus, useMailboxStatusNotices } from "./MailboxStatusLine.js";
 import { PageHeader } from "./fs-ui/PageHeader.js";
+import { UpdatedAt } from "./fs-ui/UpdatedAt.js";
 import { KpiRow } from "./fs-ui/KpiRow.js";
 import { KpiTile } from "./fs-ui/KpiTile.js";
 import { PillTabs } from "./fs-ui/PillTabs.js";
 import { ShortcutHelp } from "./fs-ui/ShortcutHelp.js";
+import { NoticeBar } from "./fs-ui/NoticeBar.js";
 const TAB_PATH = {
     voorstellen: "/mailbox-orders/voorstellen",
     verwerkt: "/mailbox-orders/verwerkt",
@@ -35,24 +36,28 @@ export function setProposalFilter(key, value) {
     catch { /* negeer */ }
 }
 export const SHORTCUTS = [
-    ["/", "Zoeken"],
-    ["J", "Volgende rij"],
-    ["K", "Vorige rij"],
-    ["Enter", "Openen"],
-    ["Esc", "Sluiten of wissen"],
-    ["?", "Dit overzicht"],
+    [["/"], "Zoeken"],
+    [["J", "K"], "Volgende / vorige rij"],
+    [["Enter"], "Geselecteerde rij openen"],
+    [["Esc"], "Zoeken wissen / sluiten"],
+    [["?"], "Dit overzicht"],
 ];
 /**
- * Gezamenlijke opbouw van de drie mailboxpagina's: kop, meldingen, KPI's en
- * tabbladen. De lijst zelf komt als children.
+ * Gezamenlijke opbouw van de drie mailboxpagina's, in de vaste volgorde:
+ * kop → meldingen → 4 KPI's → tabbladen → (children: werkbalk, tabel, paginering).
  */
-export function MailboxPageFrame({ tab, children, onKpi, helpOpen, onHelpOpenChange, }) {
+export function MailboxPageFrame({ tab, children, onKpi, activeKpi, notices = [], helpOpen, onHelpOpenChange, }) {
     const navigate = useNavigate();
     const fetchActive = useServerFn(getActiveOrdersMailbox);
     const fetchKpis = useServerFn(getMailboxKpis);
+    const ensureDefaults = useServerFn(ensureMailboxDefaultsFn);
     const [localHelp, setLocalHelp] = useState(false);
     const help = helpOpen ?? localHelp;
     const setHelp = onHelpOpenChange ?? setLocalHelp;
+    // Standaardinstellingen één keer per paginabezoek aanvullen (niet bij elke lijstaanvraag).
+    useEffect(() => {
+        void ensureDefaults().catch((e) => console.warn("[mailbox] standaardinstellingen", e));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
     const { data: activeMailbox } = useQuery({
         queryKey: ["mailbox-active-account"],
         queryFn: () => fetchActive(),
@@ -65,8 +70,11 @@ export function MailboxPageFrame({ tab, children, onKpi, helpOpen, onHelpOpenCha
         refetchInterval: 60000,
         placeholderData: (prev) => prev,
     });
+    const status = useMailboxStatus();
+    const statusNotices = useMailboxStatusNotices(status);
     const k = (kpiQ.data ?? null);
     const loading = kpiQ.isLoading;
+    const allNotices = [...mailboxAuthNotices(activeMailbox), ...statusNotices, ...notices];
     const go = (t) => { if (t !== tab)
         void navigate({ to: TAB_PATH[t] }); };
     const kpi = (key) => {
@@ -87,7 +95,7 @@ export function MailboxPageFrame({ tab, children, onKpi, helpOpen, onHelpOpenCha
         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: [
+    return (_jsxs("main", { className: "flex w-full min-w-0 flex-col gap-4 overflow-x-clip p-4 pb-24 sm:p-6 md:pb-6", children: [_jsx(PageHeader, { title: "Mailbox bestellingen", meta: _jsx(UpdatedAt, { at: kpiQ.dataUpdatedAt || null, stale: kpiQ.isError, info: statusInfo(status) }) }), _jsx(NoticeBar, { notices: allNotices }), _jsxs(KpiRow, { children: [_jsx(KpiTile, { title: "Te controleren", value: k?.pending ?? 0, sub: "Bestellingen uit e-mail", icon: _jsx(ClipboardCheck, {}), loading: loading, active: activeKpi === "pending", onClick: () => kpi("pending") }), _jsx(KpiTile, { title: "Vandaag binnen", value: k?.pending_today ?? 0, sub: "Nog te controleren", icon: _jsx(CalendarClock, {}), loading: loading, active: activeKpi === "today", onClick: () => kpi("today") }), _jsx(KpiTile, { title: "Vandaag verwerkt", value: k?.approved_today ?? 0, sub: "Orders aangemaakt", icon: _jsx(CheckCircle2, {}), loading: loading, active: activeKpi === "approved_today", onClick: () => kpi("approved_today") }), _jsx(KpiTile, { title: "Klant onbekend", value: k?.customer_unknown ?? 0, sub: (k?.customer_unknown ?? 0) > 0 ? _jsx("span", { className: "text-destructive", children: "Kies of maak de klant" }) : "Alles herkend", icon: _jsx(UserX, {}), tone: "warning", loading: loading, active: activeKpi === "customer_unknown", onClick: () => kpi("customer_unknown") })] }), _jsx(PillTabs, { ariaLabel: "Mailbox", active: tab, onSelect: (t) => go(t), tabs: [
                     { key: "voorstellen", label: "Te controleren", icon: _jsx(Inbox, {}), count: k ? k.pending : null },
                     { key: "verwerkt", label: "Verwerkt", icon: _jsx(CheckCircle2, {}), count: k ? k.processed : null },
                     { key: "overgeslagen", label: "Overgeslagen", icon: _jsx(MailX, {}), count: k ? k.skipped : null },

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

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

package/dist-lib/components/MailboxProcessedPage.js

@@ -1,26 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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 { CalendarClock, CheckCircle2, Filter, Search, Undo2 } from "lucide-react";
-import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@flowselections/core";
+import { CalendarClock, CheckCircle2, Search } from "lucide-react";
+import { Button } from "@flowselections/core";
 import { reopenProposal } from "../lib/mailbox.functions.js";
 import { listProposalsPage } from "../lib/mailbox-list.functions.js";
+import { fmtDayTime } from "../lib/format-date.js";
+import { label, PROPOSAL_STATUS } from "../lib/labels.js";
 import { TablePagination } from "./TablePagination.js";
 import { usePersistedState } from "./MailboxFilterBar.js";
 import { MailboxPageFrame, browserTz } from "./MailboxPageFrame.js";
-import { DataTable, InitialsAvatar } from "./fs-ui/DataTable.js";
+import { DataTable, InitialsAvatar, CellText } from "./fs-ui/DataTable.js";
 import { StatusIcon } from "./fs-ui/StatusIcon.js";
 import { EmptyState } from "./fs-ui/EmptyState.js";
-import { 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 { FilterPanel, FilterOptions, PERIOD_OPTIONS } from "./fs-ui/FilterPanel.js";
+import { RowMenu } from "./fs-ui/RowMenu.js";
 import { useListHotkeys } from "./fs-ui/useListHotkeys.js";
 const PERIOD_LABEL = { today: "Vandaag", "7d": "Laatste 7 dagen", "30d": "Laatste 30 dagen" };
+const COLS = [220, 300, 130, 140, 120];
 export function MailboxProcessedPage() {
     const fetchList = useServerFn(listProposalsPage);
     const reopen = useServerFn(reopenProposal);
@@ -35,6 +39,7 @@ export function MailboxProcessedPage() {
     const [statusFilter, setStatusFilter] = usePersistedState("mailbox-processed:status", "all");
     const [cursor, setCursor] = useState(null);
     const [helpOpen, setHelpOpen] = useState(false);
+    const [filtersOpen, setFiltersOpen] = useState(false);
     const searchRef = useRef(null);
     const params = {
         statuses: statusFilter === "approved" ? ["approved"] : statusFilter === "rejected" ? ["rejected"] : ["approved", "rejected"],
@@ -80,7 +85,7 @@ export function MailboxProcessedPage() {
         }
     };
     useListHotkeys({
-        disabled: helpOpen,
+        disabled: helpOpen || filtersOpen,
         onSearch: () => searchRef.current?.focus(),
         onNext: () => setCursor((c) => (items.length ? Math.min((c ?? -1) + 1, items.length - 1) : null)),
         onPrev: () => setCursor((c) => (items.length ? Math.max((c ?? 1) - 1, 0) : null)),
@@ -89,34 +94,38 @@ export function MailboxProcessedPage() {
         onHelp: () => setHelpOpen(true),
     });
     const nameOf = (p) => p.customer_name || p.from_name || p.from_email || "Onbekend";
+    const statusText = (p) => label(PROPOSAL_STATUS, p.status);
     const statusOf = (p) => p.status === "approved"
-        ? _jsx(StatusIcon, { tone: "done", label: "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;
+        ? _jsx(StatusIcon, { tone: "done", label: statusText(p), detail: p.order_number ? `Order ${p.order_number}` : undefined })
+        : _jsx(StatusIcon, { tone: "rejected", label: statusText(p) });
+    const rowAction = (p) => (_jsx(RowMenu, { label: `Acties voor ${nameOf(p)}`, items: [
+            ...(p.created_order_id ? [{ label: "Open order", onSelect: () => openOrder(p) }] : []),
+            ...(p.status === "rejected" ? [{ label: busyId === p.id ? "Bezig…" : "Terugzetten naar te controleren", disabled: busyId === p.id, onSelect: () => void handleReopen(p.id) }] : []),
+        ] }));
     const columns = [
         {
-            key: "klant", header: "Klant", width: "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: "klant", header: "Klant", width: COLS[0],
+            cell: (p) => (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(InitialsAvatar, { name: nameOf(p) }), _jsx(CellText, { primary: nameOf(p), secondary: p.from_email ?? "", strong: true })] })),
         },
         {
-            key: "bericht", header: "Onderwerp", width: "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: "bericht", header: "Onderwerp", width: COLS[1],
+            cell: (p) => _jsx(CellText, { primary: p.subject || "(geen onderwerp)", secondary: String(p.preview ?? "").slice(0, 180) }),
         },
-        { key: "order", header: "Order", width: "130px", cell: (p) => _jsx("span", { className: "tabular-nums", children: p.order_number || "–" }) },
+        { key: "order", header: "Order", width: COLS[2], cell: (p) => _jsx("span", { className: "block truncate tabular-nums", children: p.order_number || "–" }) },
         {
-            key: "datum", header: "Verwerkt op", width: "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: "datum", header: "Verwerkt op", width: COLS[3], sortable: true,
+            cell: (p) => _jsx("span", { className: "block truncate tabular-nums", children: fmtDayTime(p.reviewed_at) }),
         },
         {
-            key: "status", header: "Status", width: "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" })] })),
+            key: "status", header: "Status", width: COLS[4],
+            cell: (p) => (_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [statusOf(p), _jsx("span", { className: "truncate text-sm", children: statusText(p) })] })),
         },
     ];
     const chips = [
         ...(period !== "all" ? [{ key: "period", label: PERIOD_LABEL[period] ?? period, icon: _jsx(CalendarClock, {}), onRemove: () => setPeriod("all") }] : []),
-        ...(statusFilter !== "all" ? [{ key: "status", label: statusFilter === "approved" ? "Goedgekeurd" : "Afgewezen", icon: _jsx(CheckCircle2, {}), onRemove: () => setStatusFilter("all") }] : []),
+        ...(statusFilter !== "all" ? [{ key: "status", label: label(PROPOSAL_STATUS, statusFilter), icon: _jsx(CheckCircle2, {}), onRemove: () => setStatusFilter("all") }] : []),
     ];
-    return (_jsxs(MailboxPageFrame, { tab: "verwerkt", helpOpen: helpOpen, onHelpOpenChange: setHelpOpen, 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
+    return (_jsxs(MailboxPageFrame, { tab: "verwerkt", helpOpen: helpOpen, onHelpOpenChange: setHelpOpen, activeKpi: period === "today" ? "approved_today" : null, children: [_jsx(Toolbar, { onOpenFilters: () => setFiltersOpen(true), filterCount: chips.length, chips: _jsx(FilterChips, { chips: chips, onClearAll: clearFilters }), children: _jsx(SearchInput, { ref: searchRef, value: search, onChange: setSearch, placeholder: "Zoek op klant, afzender of onderwerp" }) }), _jsxs(FilterPanel, { open: filtersOpen, onOpenChange: setFiltersOpen, onClear: clearFilters, children: [_jsx(FilterOptions, { label: "Periode", value: period, options: PERIOD_OPTIONS, onChange: (v) => setPeriod(v) }), _jsx(FilterOptions, { label: "Status", value: statusFilter, options: [{ value: "all", label: "Alle statussen" }, { value: "approved", label: "Goedgekeurd" }, { value: "rejected", label: "Afgewezen" }], onChange: setStatusFilter })] }), isLoading && !data ? (_jsx(TableSkeleton, { columns: COLS })) : error && !data ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: _jsx(EmptyState, { icon: _jsx(CheckCircle2, { className: "h-6 w-6" }), title: "De lijst kon niet worden geladen", text: "Probeer het opnieuw.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => void refetch(), children: "Opnieuw proberen" }) }) })) : total === 0 ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: hasActiveFilters
                     ? _jsx(EmptyState, { icon: _jsx(Search, { className: "h-6 w-6" }), title: "Niets gevonden", text: "Er zijn geen verwerkte bestellingen die bij je zoekopdracht of filters passen.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: clearFilters, children: "Filters wissen" }) })
-                    : _jsx(EmptyState, { icon: _jsx(CheckCircle2, { className: "h-6 w-6" }), title: "Nog niets verwerkt", text: "Bevestigde en afgewezen bestellingen verschijnen hier." }) })) : (_jsx(DataTable, { rows: items, columns: columns, rowKey: (p) => p.id, activeIndex: cursor, rowAction: rowAction, sort: { key: "datum", dir: sortOrder === "date-asc" ? "asc" : "desc" }, onSortChange: () => setSortOrder(sortOrder === "date-asc" ? "date-desc" : "date-asc"), mobileCard: (p) => (_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "truncate font-semibold", children: nameOf(p) }), statusOf(p)] }), _jsx("div", { className: "truncate text-muted-foreground", children: p.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs tabular-nums text-muted-foreground", children: [p.order_number ? `${p.order_number} · ` : "", p.reviewed_at ? new Date(p.reviewed_at).toLocaleDateString("nl-NL") : "–"] })] })), footer: _jsx(TablePagination, { total: total, page: currentPage, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize }) }))] }));
+                    : _jsx(EmptyState, { icon: _jsx(CheckCircle2, { className: "h-6 w-6" }), title: "Nog niets verwerkt", text: "Bevestigde en afgewezen bestellingen verschijnen hier." }) })) : (_jsx(DataTable, { rows: items, columns: columns, rowKey: (p) => p.id, activeIndex: cursor, rowAction: rowAction, sort: { key: "datum", dir: sortOrder === "date-asc" ? "asc" : "desc" }, onSortChange: () => setSortOrder(sortOrder === "date-asc" ? "date-desc" : "date-asc"), mobileCard: (p) => (_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "truncate font-semibold", children: nameOf(p) }), statusOf(p)] }), _jsx("div", { className: "truncate text-muted-foreground", children: p.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs tabular-nums text-muted-foreground", children: [p.order_number ? `${p.order_number} · ` : "", fmtDayTime(p.reviewed_at)] })] })), footer: _jsx(TablePagination, { total: total, page: currentPage, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize }) }))] }));
 }

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

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

package/dist-lib/components/MailboxProposalsPage.js

@@ -4,7 +4,7 @@ import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 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, Filter, Search, Inbox, ClipboardCheck } from "lucide-react";
+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";
@@ -13,10 +13,11 @@ import { SearchableSelect } from "./SearchableSelect.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 } from "./fs-ui/DataTable.js";
+import { DataTable, InitialsAvatar, CellText } from "./fs-ui/DataTable.js";
+import { FilterPanel, FilterOptions, PERIOD_OPTIONS } from "./fs-ui/FilterPanel.js";
+import { fmtDay, fmtDayTime } from "../lib/format-date.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";
@@ -130,8 +131,14 @@ export function MailboxProposalsPage() {
     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);
-    const refsEnabled = true;
+    // 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,
@@ -349,7 +356,7 @@ export function MailboxProposalsPage() {
         }
     };
     useListHotkeys({
-        disabled: !!activeId || helpOpen,
+        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)),
@@ -362,37 +369,41 @@ export function MailboxProposalsPage() {
         ...(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: "minmax(180px,1.4fr)",
+            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 }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium", children: name }), !p.customer_name && _jsx("div", { className: "truncate text-xs text-muted-foreground", children: "Klant nog niet herkend" })] })] }));
+                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: "minmax(240px,2.2fr)",
-            cell: (p) => (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate 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" })] })),
+            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: "Ontvangen op", width: "minmax(140px,1fr)",
-            cell: (p) => _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: p.mailbox_messages?.account_email || "–" }),
+            key: "ontvangen_op", header: "Mailadres", width: 180,
+            cell: (p) => _jsx(CellText, { primary: p.mailbox_messages?.account_email || "–" }),
         },
         {
-            key: "datum", header: "Ontvangen", width: "120px", sortable: true,
-            cell: (p) => {
-                const d = p.mailbox_messages?.received_at ?? p.created_at;
-                return _jsx("span", { className: "tabular-nums text-muted-foreground", children: d ? new Date(d).toLocaleDateString("nl-NL") : "–" });
-            },
+            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: "150px",
+            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." }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: p.readiness === "klaar" ? "Klaar" : "Controleren" }), p.duplicate && _jsx(StatusIcon, { tone: "busy", label: "Mogelijk dubbel", detail: "Deze mail lijkt op een eerdere bestelling." })] })),
+                        : _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." })] })),
         },
     ];
-    return (_jsxs(MailboxPageFrame, { tab: "voorstellen", helpOpen: helpOpen, onHelpOpenChange: setHelpOpen, onKpi: (k) => {
+    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");
@@ -408,11 +419,11 @@ export function MailboxProposalsPage() {
                 return true;
             }
             return false;
-        }, children: [outdatedCount > 0 && (_jsx(InlineAlert, { tone: "warning", title: `${outdatedCount} bestelling(en) 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" }) })), _jsx(Toolbar, { chips: _jsx(FilterChips, { chips: chips, onClearAll: clearFilters }), right: _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", "1fr", "120px", "150px"] })) : listError && !data ? (_jsx(InlineAlert, { tone: "error", title: "De lijst kon niet worden geladen.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => void refetchList(), children: "Opnieuw proberen" }), children: "Je bestellingen zijn er nog; ze worden alleen nu niet getoond. 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 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) => {
+        }, 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: [d ? new Date(d).toLocaleDateString("nl-NL") : "–", p.duplicate ? " · mogelijk dubbel" : ""] })] }));
+                                        : _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);
@@ -694,8 +705,8 @@ function ProposalEditor({ proposal, template, customers, products, allowBackorde
     const preview = (previewData?.ok ? previewData.preview : null);
     const previewError = previewData?.ok === false ? String(previewData.error ?? "") : null;
     const dateFeasible = preview?.ok === true && preview?.deliveryDateFeasible === true;
-    const fmtDate = (iso) => iso ? new Date(`${iso}T12:00:00`).toLocaleDateString("nl-NL", { weekday: "long", day: "numeric", month: "long", year: "numeric" }) : "";
-    const fmtDateTime = (iso) => iso ? new Date(iso).toLocaleString("nl-NL", { weekday: "short", day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" }) : "";
+    const fmtDate = (iso) => iso ? fmtDay(iso) : "";
+    const fmtDateTime = (iso) => iso ? fmtDayTime(iso) : "";
     // ─── Prijsafspraak ter vergelijking ───────────────────────────────────────
     const fetchAgreement = useServerFn(getAgreementPrices);
     const agreementKey = lines.map((l) => `${l.product_id}:${l.quantity}`).join(",");
@@ -1127,7 +1138,7 @@ function NewCustomerDialog({ candidate, onClose, onCreated, }) {
 }
 function DynamicField({ field, value, meta, onChange, customers, products, plantTypes, suppliers, onSelectCustomer, }) {
     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(Badge, { variant: "outline", className: "text-xs border-warning/30 text-warning-soft-foreground", children: "Controleren" })), typeof meta?.ai_confidence === "number" && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [Math.round(meta.ai_confidence * 100), "%"] }))] }));
+    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":
@@ -1172,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-primary/30 bg-primary/10 text-primary"
-        : c >= thresholds.orange
-            ? "border-warning/30 bg-warning-soft text-warning-soft-foreground"
-            : "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":"AAuCA,wBAAgB,kBAAkB,gCAyLjC"}
+{"version":3,"file":"MailboxSkippedPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxSkippedPage.tsx"],"names":[],"mappings":"AA0CA,wBAAgB,kBAAkB,gCAoKjC"}