@flowselections/mailbox-orders 1.0.57 → 1.0.59

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

@@ -0,0 +1,6 @@
+export declare function CartAssignmentWizard({ orderId, open, onClose, }: {
+    orderId: string | null;
+    open: boolean;
+    onClose: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=CartAssignmentWizard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CartAssignmentWizard.d.ts","sourceRoot":"","sources":["../../src/components/CartAssignmentWizard.tsx"],"names":[],"mappings":"AA2CA,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EAAE,IAAI,EAAE,OAAO,GACvB,EAAE;IAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,+BAsUhE"}

package/dist-lib/components/CartAssignmentWizard.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Button, Badge, Card, CardContent, CardHeader, CardTitle, Input, Label, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
+import { Plus, Trash2, AlertTriangle, CheckCircle2 } from "lucide-react";
+import { planAndSaveAutoCarts, saveManualCarts } from "../lib/mailbox.functions.js";
+export function CartAssignmentWizard({ orderId, open, onClose, }) {
+    const fetchPlan = useServerFn(planAndSaveAutoCarts);
+    const fetchSave = useServerFn(saveManualCarts);
+    const { data, isLoading, refetch } = useQuery({
+        queryKey: ["cart-plan", orderId],
+        enabled: !!orderId && open,
+        queryFn: async () => {
+            try {
+                return await fetchPlan({ data: { orderId: orderId } });
+            }
+            catch (e) {
+                toast.error(e?.message ?? "Indelen mislukt");
+                return { autoCarts: [], remainders: [], existingManualCarts: [], nextCartNumber: 1 };
+            }
+        },
+    });
+    const autoCarts = Array.isArray(data?.autoCarts) ? data.autoCarts : [];
+    const remainders = Array.isArray(data?.remainders) ? data.remainders : [];
+    const existingManualCarts = Array.isArray(data?.existingManualCarts) ? data.existingManualCarts : [];
+    // Pool met nog in te delen fusten per orderregel
+    const [pool, setPool] = useState({});
+    const [manual, setManual] = useState([]);
+    useEffect(() => {
+        const p = {};
+        remainders.forEach((r) => { p[r.order_item_id] = r.crates_remaining; });
+        setPool(p);
+        // Bestaande handmatige karren herstellen — capaciteitsmeta uit remainders aanvullen.
+        const remMeta = {};
+        remainders.forEach((r) => { remMeta[r.order_item_id] = r; });
+        setManual(existingManualCarts.map((c) => ({
+            id: crypto.randomUUID(),
+            items: c.items.map((i) => {
+                const meta = i.order_item_id ? remMeta[i.order_item_id] : null;
+                return {
+                    ...i,
+                    crates_per_layer: meta?.crates_per_layer ?? i.crates_per_layer ?? 1,
+                    layers_per_cart: meta?.layers_per_cart ?? i.layers_per_cart ?? 1,
+                };
+            }),
+        })));
+    }, [data]);
+    const remByItem = useMemo(() => {
+        const m = {};
+        remainders.forEach((r) => { m[r.order_item_id] = r; });
+        return m;
+    }, [remainders]);
+    const addCart = () => setManual((m) => [...m, { id: crypto.randomUUID(), items: [] }]);
+    const addItemToCart = (cartId, orderItemId, crates) => {
+        const rem = remByItem[orderItemId];
+        if (!rem)
+            return;
+        const available = pool[orderItemId] ?? 0;
+        const take = Math.max(0, Math.min(crates, available));
+        if (take === 0)
+            return;
+        setPool((p) => ({ ...p, [orderItemId]: available - take }));
+        setManual((carts) => carts.map((c) => {
+            if (c.id !== cartId)
+                return c;
+            // merge in plaats van duplicate regel
+            const existingIdx = c.items.findIndex((i) => i.order_item_id === orderItemId);
+            if (existingIdx >= 0) {
+                const next = [...c.items];
+                next[existingIdx] = { ...next[existingIdx], crates: next[existingIdx].crates + take };
+                return { ...c, items: next };
+            }
+            return {
+                ...c,
+                items: [...c.items, {
+                        order_item_id: orderItemId,
+                        product_id: rem.product_id,
+                        product_name: rem.product_name,
+                        crates: take,
+                        plants_per_crate: rem.plants_per_crate,
+                        crates_per_layer: rem.crates_per_layer,
+                        layers_per_cart: rem.layers_per_cart,
+                    }],
+            };
+        }));
+    };
+    const removeItem = (cartId, orderItemId) => {
+        setManual((carts) => carts.map((c) => {
+            if (c.id !== cartId)
+                return c;
+            const item = c.items.find((i) => i.order_item_id === orderItemId);
+            if (!item)
+                return c;
+            setPool((p) => ({ ...p, [orderItemId]: (p[orderItemId] ?? 0) + item.crates }));
+            return { ...c, items: c.items.filter((i) => i.order_item_id !== orderItemId) };
+        }));
+    };
+    const removeCart = (cartId) => {
+        setManual((carts) => {
+            const c = carts.find((x) => x.id === cartId);
+            if (c) {
+                setPool((p) => {
+                    const np = { ...p };
+                    c.items.forEach((i) => {
+                        if (!i.order_item_id)
+                            return;
+                        np[i.order_item_id] = (np[i.order_item_id] ?? 0) + i.crates;
+                    });
+                    return np;
+                });
+            }
+            return carts.filter((x) => x.id !== cartId);
+        });
+    };
+    // Capaciteit per kar = max van betrokken artikelen (gemengde karren toegestaan,
+    // pakken we de hoogste cratesPerCart als bovengrens; waarschuwing toont per item).
+    const cartCapacity = (cart) => cart.items.length === 0
+        ? 0
+        : Math.max(...cart.items.map((i) => i.crates_per_layer * i.layers_per_cart));
+    const cartUsed = (cart) => cart.items.reduce((s, i) => s + i.crates, 0);
+    const totalRemainingInPool = Object.values(pool).reduce((s, n) => s + n, 0);
+    const handleSave = async () => {
+        if (totalRemainingInPool > 0) {
+            toast.error(`Nog ${totalRemainingInPool} fust niet ingedeeld — verdeel alles over een kar voordat je opslaat`);
+            return;
+        }
+        if (manual.some((c) => c.items.length === 0)) {
+            toast.error("Lege karren niet toegestaan");
+            return;
+        }
+        const overfull = manual.find((c) => cartUsed(c) > cartCapacity(c));
+        if (overfull) {
+            toast.error("Een kar overschrijdt de capaciteit");
+            return;
+        }
+        try {
+            await fetchSave({
+                data: {
+                    orderId: orderId,
+                    carts: manual.map((c) => ({
+                        is_complete: cartUsed(c) >= cartCapacity(c),
+                        items: c.items.map((i) => ({
+                            order_item_id: i.order_item_id,
+                            product_id: i.product_id,
+                            product_name: i.product_name,
+                            crates: Math.max(1, Math.trunc(i.crates)),
+                            plants_per_crate: Math.max(1, Math.trunc(i.plants_per_crate || 1)),
+                            crates_per_layer: Math.max(1, Math.trunc(i.crates_per_layer || 1)),
+                        })),
+                    })),
+                },
+            });
+            toast.success("Karindeling opgeslagen");
+            onClose();
+        }
+        catch (e) {
+            // requireSupabaseAuth en input-validatie gooien een Response; toString
+            // daarvan is "[object Response]" — zet om in leesbare melding zodat
+            // de React error-overlay niet wordt getriggerd.
+            let msg = "Opslaan mislukt";
+            if (e instanceof Response) {
+                try {
+                    msg = (await e.text()) || `HTTP ${e.status}`;
+                }
+                catch {
+                    msg = `HTTP ${e.status}`;
+                }
+                if (e.status === 401)
+                    msg = "Sessie verlopen — log opnieuw in";
+            }
+            else if (e?.message) {
+                msg = e.message;
+            }
+            toast.error(msg);
+            console.error("saveManualCarts failed:", e);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: (o) => { if (!o)
+            onClose(); }, children: _jsxs(DialogContent, { className: "max-w-[95vw] w-[95vw] h-[92vh] max-h-[92vh] overflow-y-auto p-6", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Karindeling" }) }), isLoading ? (_jsx("div", { className: "text-muted-foreground", children: "Karren worden berekend..." })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { className: "text-base", children: "Automatisch ingedeelde karren" }), _jsxs(Badge, { variant: "secondary", children: [autoCarts.length, " kar(ren)"] })] }), _jsx(CardContent, { children: autoCarts.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen volledige karren mogelijk." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Kar #" }), _jsx(TableHead, { children: "Artikel" }), _jsx(TableHead, { className: "text-right", children: "Fusten" }), _jsx(TableHead, { className: "text-right", children: "Planten" }), _jsx(TableHead, { className: "text-right", children: "Bezetting" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: autoCarts.map((c) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-mono", children: c.cart_number }), _jsx(TableCell, { children: c.product_name }), _jsx(TableCell, { className: "text-right", children: c.crates }), _jsx(TableCell, { className: "text-right", children: c.plants }), _jsx(TableCell, { className: "text-right", children: "100%" }), _jsx(TableCell, { children: _jsxs(Badge, { className: "gap-1", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), " Volledig"] }) })] }, c.cart_number))) })] })) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Handmatig in te delen fusten" }) }), _jsx(CardContent, { className: "space-y-3", children: remainders.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen restant \u2014 alles past volledig op karren." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Artikel" }), _jsx(TableHead, { className: "text-right", children: "Beschikbaar (fusten)" }), _jsx(TableHead, { className: "text-right", children: "Planten/fust" }), _jsx(TableHead, { className: "text-right", children: "Capaciteit/kar" })] }) }), _jsx(TableBody, { children: remainders.map((r) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: r.product_name }), _jsxs(TableCell, { className: "text-right font-mono", children: [pool[r.order_item_id] ?? 0, " / ", r.crates_remaining] }), _jsx(TableCell, { className: "text-right", children: r.plants_per_crate }), _jsx(TableCell, { className: "text-right", children: r.crates_per_layer * r.layers_per_cart })] }, r.order_item_id))) })] })) })] }), remainders.length > 0 && (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsx(CardTitle, { className: "text-base", children: "Restant-karren samenstellen" }), _jsxs(Button, { size: "sm", onClick: addCart, children: [_jsx(Plus, { className: "h-3 w-3 mr-1" }), " Kar toevoegen"] })] }), _jsxs(CardContent, { className: "space-y-3", children: [manual.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Voeg een kar toe om restant-fusten in te delen." })), manual.map((cart, idx) => {
+                                            const used = cartUsed(cart);
+                                            const cap = cartCapacity(cart);
+                                            const pct = cap > 0 ? Math.round((used / cap) * 100) : 0;
+                                            const over = cap > 0 && used > cap;
+                                            return (_jsxs(Card, { className: over ? "border-destructive" : "", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "font-medium", children: ["Restant-kar ", idx + 1] }), _jsxs(Badge, { variant: over ? "destructive" : "secondary", children: [used, " / ", cap || "?", " fusten (", pct, "%)"] }), over && (_jsxs("span", { className: "text-xs text-destructive flex items-center gap-1", children: [_jsx(AlertTriangle, { className: "h-3 w-3" }), " Capaciteit overschreden"] }))] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeCart(cart.id), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs(CardContent, { className: "space-y-2", children: [cart.items.map((i) => (_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: i.product_name }), _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", i.crates, " fust (", i.crates * i.plants_per_crate, " planten)"] })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => removeItem(cart.id, i.order_item_id), children: _jsx(Trash2, { className: "h-3 w-3" }) })] }, i.order_item_id))), _jsx(AddItemRow, { remainders: remainders, pool: pool, onAdd: (itemId, crates) => addItemToCart(cart.id, itemId, crates) })] })] }, cart.id));
+                                        })] })] }))] })), _jsxs(DialogFooter, { className: "gap-2", children: [_jsx(Button, { variant: "outline", onClick: onClose, children: "Annuleren" }), _jsxs(Button, { onClick: handleSave, disabled: isLoading || totalRemainingInPool > 0, children: ["Karindeling opslaan", totalRemainingInPool > 0 && (_jsxs(Badge, { variant: "destructive", className: "ml-2", children: ["Nog ", totalRemainingInPool, " fust in te delen"] }))] })] })] }) }));
+}
+function AddItemRow({ remainders, pool, onAdd, }) {
+    const available = remainders.filter((r) => (pool[r.order_item_id] ?? 0) > 0);
+    const [sel, setSel] = useState("");
+    const [qty, setQty] = useState(1);
+    if (available.length === 0)
+        return null;
+    return (_jsxs("div", { className: "flex items-end gap-2 pt-2 border-t", children: [_jsxs("div", { className: "flex-1", children: [_jsx(Label, { className: "text-xs", children: "Artikel" }), _jsxs(Select, { value: sel, onValueChange: setSel, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies restant-artikel..." }) }), _jsx(SelectContent, { children: available.map((r) => (_jsxs(SelectItem, { value: r.order_item_id, children: [r.product_name, " (", pool[r.order_item_id], " fust beschikbaar)"] }, r.order_item_id))) })] })] }), _jsxs("div", { className: "w-24", children: [_jsx(Label, { className: "text-xs", children: "Fusten" }), _jsx(Input, { type: "number", min: 1, value: qty, onChange: (e) => setQty(Math.max(1, Number(e.target.value) || 1)) })] }), _jsxs(Button, { size: "sm", disabled: !sel, onClick: () => { if (sel) {
+                    onAdd(sel, qty);
+                    setSel("");
+                    setQty(1);
+                } }, children: [_jsx(Plus, { className: "h-3 w-3 mr-1" }), " Toevoegen"] })] }));
+}

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/MailboxInboxPage.d.ts

@@ -0,0 +1,2 @@
+export declare function MailboxInboxPage(): import("react").JSX.Element;
+//# sourceMappingURL=MailboxInboxPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MailboxInboxPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxInboxPage.tsx"],"names":[],"mappings":"AA6BA,wBAAgB,gBAAgB,gCAuO/B"}

package/dist-lib/components/MailboxInboxPage.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Button, Badge, Card, CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, } from "@flowselections/core";
+import { Mail, Sparkles, AlertCircle, ExternalLink, RefreshCw } from "lucide-react";
+import { listMessages, parseMessage, getActiveOrdersMailbox, ingestEmailEvent, backfillRecentEvents, } from "../lib/mailbox.functions.js";
+import { supabase } from "../integrations/supabase/client.js";
+const AUTH_MODULE_URL = "https://auth.flowselections.com/e-mail-authenticatie";
+const STATUS_VARIANT = {
+    new: "secondary",
+    parsing: "outline",
+    parsed: "default",
+    failed: "destructive",
+    ignored: "outline",
+    converted: "default",
+};
+export function MailboxInboxPage() {
+    const qc = useQueryClient();
+    const fetchList = useServerFn(listMessages);
+    const fetchParse = useServerFn(parseMessage);
+    const fetchActive = useServerFn(getActiveOrdersMailbox);
+    const fetchIngest = useServerFn(ingestEmailEvent);
+    const fetchBackfill = useServerFn(backfillRecentEvents);
+    const { data, isLoading } = useQuery({
+        queryKey: ["mailbox-messages"],
+        queryFn: () => fetchList(),
+    });
+    const { data: active, isSuccess: activeLoaded } = useQuery({
+        queryKey: ["mailbox-active-account"],
+        queryFn: () => fetchActive(),
+        refetchInterval: 60000,
+        retry: 1,
+    });
+    // Realtime: nieuwe events uit gedeelde authenticatiemodule
+    const activeId = active?.connected ? active.id : null;
+    useEffect(() => {
+        if (!activeId)
+            return;
+        const channel = supabase
+            .channel(`email_auth_events:${activeId}`)
+            .on("postgres_changes", {
+            event: "INSERT",
+            schema: "public",
+            table: "email_auth_events",
+            filter: `connection_id=eq.${activeId}`,
+        }, async (payload) => {
+            const evId = payload?.new?.id;
+            if (!evId)
+                return;
+            try {
+                const res = await fetchIngest({ data: { eventId: evId } });
+                if (res?.ok && (res.inserted ?? 0) > 0) {
+                    const app = res.autoApproved ?? 0;
+                    if (app > 0)
+                        toast.success(`Nieuwe e-mail — ${app} automatisch omgezet`);
+                    else
+                        toast.success("Nieuwe e-mail ontvangen");
+                    qc.invalidateQueries({ queryKey: ["mailbox-messages"] });
+                    qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                }
+            }
+            catch {
+                /* stille fout — backfill vangt het later op */
+            }
+        })
+            .subscribe();
+        return () => {
+            void supabase.removeChannel(channel);
+        };
+    }, [activeId, fetchIngest, qc]);
+    // Backfill bij eerste mount + iedere 60s (vangt gemiste events op)
+    const didInitialBackfill = useRef(false);
+    const backfillMut = useMutation({
+        mutationFn: async () => {
+            try {
+                return await fetchBackfill();
+            }
+            catch {
+                // 401's (token verlopen) en tijdelijke fouten stil opvangen
+                return { ok: false, inserted: 0 };
+            }
+        },
+        onSuccess: (res) => {
+            if (res?.ok && (res.inserted ?? 0) > 0) {
+                qc.invalidateQueries({ queryKey: ["mailbox-messages"] });
+                qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+            }
+        },
+        onError: () => {
+            /* stille fout — volgende interval probeert opnieuw */
+        },
+    });
+    useEffect(() => {
+        if (!activeId || didInitialBackfill.current)
+            return;
+        didInitialBackfill.current = true;
+        backfillMut.mutate();
+        const t = setInterval(() => backfillMut.mutate(), 60000);
+        return () => clearInterval(t);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeId]);
+    const parseMut = useMutation({
+        mutationFn: (messageId) => fetchParse({ data: { messageId } }),
+        onSuccess: (res) => {
+            if (res?.ok) {
+                toast.success("E-mail geparsed naar voorstel");
+                qc.invalidateQueries({ queryKey: ["mailbox-messages"] });
+                qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+            }
+            else {
+                toast.error(res?.error ?? "Parsen mislukt");
+            }
+        },
+        onError: (e) => toast.error(e?.message ?? "Parsen mislukt"),
+    });
+    const items = Array.isArray(data?.items) ? data.items : [];
+    const needsReauth = active?.connected && active.needs_reauth;
+    return (_jsxs("div", { className: "p-6 space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsxs("h1", { className: "text-2xl font-semibold flex items-center gap-2", children: [_jsx(Mail, { className: "h-6 w-6 text-primary" }), " Inbox"] }), _jsx("p", { className: "text-muted-foreground text-sm mt-1", children: "Binnenkomende bestel-e-mails \u2014 geleverd door de E-mail Authenticatie module" })] }), _jsxs(Button, { variant: "outline", onClick: () => backfillMut.mutate(), disabled: backfillMut.isPending || !active?.connected, title: "Haal achterstallige events op", children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${backfillMut.isPending ? "animate-spin" : ""}` }), "Synchroniseer"] })] }), activeLoaded && !active?.connected ? (_jsx(Card, { children: _jsxs(CardContent, { className: "p-4 flex items-start gap-3 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-destructive mt-0.5" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium", children: "Nog geen e-mailadres gekoppeld" }), _jsxs("div", { className: "text-muted-foreground", children: ["Koppel in de module ", _jsx("strong", { children: "E-mail Authenticatie" }), " een adres met doeleinde", " ", _jsx("code", { children: "orders" }), " en richting ", _jsx("code", { children: "receive" }), "."] })] }), _jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsxs("a", { href: AUTH_MODULE_URL, target: "_blank", rel: "noreferrer", children: ["Open module ", _jsx(ExternalLink, { className: "h-3 w-3 ml-1" })] }) })] }) })) : needsReauth ? (_jsx(Card, { className: "border-destructive", children: _jsxs(CardContent, { className: "p-4 flex items-start gap-3 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-destructive mt-0.5" }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "font-medium", children: ["Heraanmelding vereist voor ", active.account_email] }), _jsx("div", { className: "text-muted-foreground", children: active.last_error ?? "De koppeling is verlopen. Log opnieuw in via de authenticatiemodule." })] }), _jsx(Button, { asChild: true, variant: "destructive", size: "sm", children: _jsxs("a", { href: `${AUTH_MODULE_URL}?focus=${active.id}`, target: "_blank", rel: "noreferrer", children: ["Opnieuw verbinden ", _jsx(ExternalLink, { className: "h-3 w-3 ml-1" })] }) })] }) })) : active?.connected ? (_jsx(Card, { children: _jsxs(CardContent, { className: "p-4 flex items-center gap-3 text-sm", children: [_jsx(Mail, { className: "h-4 w-4 text-primary" }), _jsx("span", { className: "text-muted-foreground", children: "Actieve mailbox:" }), _jsx("span", { className: "font-medium", children: active.account_email }), _jsx(Badge, { variant: "outline", className: "ml-2", children: active.provider }), active.status && active.status !== "ok" && active.status !== "verified" && (_jsx(Badge, { variant: "secondary", className: "ml-2", children: active.status }))] }) })) : null, _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: isLoading ? (_jsx("div", { className: "p-8 text-center text-muted-foreground", children: "Laden..." })) : items.length === 0 ? (_jsx("div", { className: "p-8 text-center text-muted-foreground", children: "Nog geen e-mails ontvangen. Nieuwe berichten verschijnen automatisch." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Afzender" }), _jsx(TableHead, { children: "Onderwerp" }), _jsx(TableHead, { children: "Ontvangen" }), _jsx(TableHead, { className: "text-right", children: "Actie" })] }) }), _jsx(TableBody, { children: items.map((m) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Badge, { variant: STATUS_VARIANT[m.status] ?? "secondary", children: m.status }) }), _jsxs(TableCell, { children: [_jsx("div", { className: "text-sm font-medium", children: m.from_name || m.from_email }), m.from_name && _jsx("div", { className: "text-xs text-muted-foreground", children: m.from_email })] }), _jsx(TableCell, { className: "max-w-md truncate", children: m.subject || "(geen onderwerp)" }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: m.received_at ? new Date(m.received_at).toLocaleString("nl-NL") : "-" }), _jsx(TableCell, { className: "text-right", children: m.status !== "converted" && (_jsxs(Button, { size: "sm", variant: "outline", disabled: parseMut.isPending, onClick: () => parseMut.mutate(m.id), children: [_jsx(Sparkles, { className: "h-3 w-3 mr-1" }), m.status === "parsed" ? "Opnieuw parsen" : "Parse"] })) })] }, m.id))) })] })) }) })] }));
+}

package/dist-lib/components/MailboxPageFrame.js

@@ -95,7 +95,7 @@ export function MailboxPageFrame({ tab, children, onKpi, activeKpi, notices = []
         if (tab !== "voorstellen")
             go("voorstellen");
     };
-    return (_jsxs("main", { className: "flex h-[calc(100dvh-var(--app-header-height)-var(--core-topbar-h,0px))] max-h-[calc(100dvh-var(--app-header-height)-var(--core-topbar-h,0px))] min-h-0 w-full min-w-0 flex-col gap-4 overflow-hidden overflow-x-clip p-4 pb-24 sm:p-6 md:pb-6", children: [_jsx(PageHeader, { title: "Mailbox bestellingen", meta: _jsx(UpdatedAt, { at: kpiQ.dataUpdatedAt || null, stale: kpiQ.isError, info: statusInfo(status) }) }), _jsx(NoticeBar, { notices: allNotices }), _jsxs(KpiRow, { children: [_jsx(KpiTile, { title: "Te controleren", value: k?.pending ?? 0, sub: "Bestellingen uit e-mail", icon: _jsx(ClipboardCheck, {}), loading: loading, active: activeKpi === "pending", onClick: () => kpi("pending") }), _jsx(KpiTile, { title: "Vandaag binnen", value: k?.pending_today ?? 0, sub: "Nog te controleren", icon: _jsx(CalendarClock, {}), loading: loading, active: activeKpi === "today", onClick: () => kpi("today") }), _jsx(KpiTile, { title: "Vandaag verwerkt", value: k?.approved_today ?? 0, sub: "Orders aangemaakt", icon: _jsx(CheckCircle2, {}), loading: loading, active: activeKpi === "approved_today", onClick: () => kpi("approved_today") }), _jsx(KpiTile, { title: "Klant onbekend", value: k?.customer_unknown ?? 0, sub: (k?.customer_unknown ?? 0) > 0 ? _jsx("span", { className: "text-destructive", children: "Kies of maak de klant" }) : "Alles herkend", icon: _jsx(UserX, {}), tone: "warning", loading: loading, active: activeKpi === "customer_unknown", onClick: () => kpi("customer_unknown") })] }), _jsx(PillTabs, { ariaLabel: "Mailbox", active: tab, onSelect: (t) => go(t), tabs: [
+    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/MailboxProposalsPage.js

@@ -15,7 +15,7 @@ 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 { fmtDay, 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";
@@ -705,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(",");

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

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

package/dist-lib/components/MailboxSkippedPage.js

@@ -19,6 +19,7 @@ import { Toolbar } from "./fs-ui/Toolbar.js";
 import { SearchInput } from "./fs-ui/SearchInput.js";
 import { FilterChips } from "./fs-ui/FilterChips.js";
 import { useListHotkeys } from "./fs-ui/useListHotkeys.js";
+import { RowMenu } from "./fs-ui/RowMenu.js";
 const statusOf = (m) => m.analysis_state === "wacht"
     ? { label: label(ANALYSIS_STATE, "wacht"), tone: "amber" }
     : m.filter_outcome === "te_oud" || m.filter_outcome === "geen_bestelling"
@@ -115,7 +116,7 @@ export function MailboxSkippedPage() {
         onEscape: hasActiveFilters ? clearFilters : undefined,
         onHelp: () => setHelpOpen(true),
     });
-    const actionBtn = (m) => (_jsx(Button, { size: "sm", variant: "outline", className: "h-8", disabled: busyId === m.id, onClick: () => run(m.id), children: busyId === m.id ? "Bezig…" : m.analysis_state === "wacht" ? "Nu uitlezen" : "Toch uitlezen" }));
+    const rowAction = (m) => (_jsx(RowMenu, { label: `Acties voor ${m.from_name || m.from_email || "mail"}`, items: [{ label: busyId === m.id ? "Bezig…" : m.analysis_state === "wacht" ? "Nu uitlezen" : "Toch uitlezen", disabled: busyId === m.id, onSelect: () => void run(m.id) }] }));
     const columns = [
         {
             key: "afzender", header: "Afzender", width: 200,
@@ -136,7 +137,6 @@ export function MailboxSkippedPage() {
                 return (_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(StatusIcon, { tone: st.tone === "amber" ? "busy" : "open", label: st.label, detail: reasonText(m) || undefined }), _jsx(CellText, { primary: st.label, secondary: reasonText(m) })] }));
             },
         },
-        { key: "actie", header: "Actie", width: 136, cell: (m) => actionBtn(m) },
     ];
     const chips = period !== "all" ? [{ key: "period", label: PERIOD_LABEL[period] ?? period, icon: _jsx(CalendarClock, {}), onRemove: () => setPeriod("all") }] : [];
     const notices = waiting > 0 ? [{
@@ -145,7 +145,7 @@ export function MailboxSkippedPage() {
             title: `${waiting} ${waiting === 1 ? "mail wacht" : "mails wachten"} op uitlezen.`,
             details: "De limiet voor vandaag is bereikt of automatisch uitlezen staat uit. Je kunt een mail ook zelf laten uitlezen.",
         }] : [];
-    return (_jsxs(MailboxPageFrame, { tab: "overgeslagen", helpOpen: helpOpen, onHelpOpenChange: setHelpOpen, notices: notices, 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 afzender, onderwerp of reden" }) }), _jsx(FilterPanel, { open: filtersOpen, onOpenChange: setFiltersOpen, onClear: clearFilters, children: _jsx(FilterOptions, { label: "Periode", value: period, options: PERIOD_OPTIONS, onChange: (v) => setPeriod(v) }) }), isLoading && !data ? (_jsx(TableSkeleton, { columns: [200, 300, 132, 200, 136] })) : error && !data ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: _jsx(EmptyState, { icon: _jsx(MailX, { 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" }) }) })) : filtered.length === 0 ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: hasActiveFilters
+    return (_jsxs(MailboxPageFrame, { tab: "overgeslagen", helpOpen: helpOpen, onHelpOpenChange: setHelpOpen, notices: notices, 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 afzender, onderwerp of reden" }) }), _jsx(FilterPanel, { open: filtersOpen, onOpenChange: setFiltersOpen, onClear: clearFilters, children: _jsx(FilterOptions, { label: "Periode", value: period, options: PERIOD_OPTIONS, onChange: (v) => setPeriod(v) }) }), isLoading && !data ? (_jsx(TableSkeleton, { columns: [200, 300, 132, 200] })) : error && !data ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: _jsx(EmptyState, { icon: _jsx(MailX, { 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" }) }) })) : filtered.length === 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 overgeslagen mails die bij je zoekopdracht passen.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: clearFilters, children: "Filters wissen" }) })
-                    : _jsx(EmptyState, { icon: _jsx(MailX, { className: "h-6 w-6" }), title: "Geen overgeslagen mails", text: "Mails die geen bestelling lijken, verschijnen hier met de reden." }) })) : (_jsx(DataTable, { rows: paged, columns: columns, rowKey: (m) => m.id, activeIndex: cursor, sort: { key: "datum", dir: sortOrder === "date-asc" ? "asc" : "desc" }, onSortChange: () => setSortOrder(sortOrder === "date-asc" ? "date-desc" : "date-asc"), mobileCard: (m) => (_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "truncate font-semibold", children: m.from_name || m.from_email || "Onbekend" }), _jsx("div", { className: "truncate text-muted-foreground", children: m.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [fmtDayTime(m.received_at), " \u00B7 ", statusOf(m).label] }), _jsx("div", { className: "pt-1", children: actionBtn(m) })] })), footer: _jsx(TablePagination, { total: filtered.length, page: current, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize }) }))] }));
+                    : _jsx(EmptyState, { icon: _jsx(MailX, { className: "h-6 w-6" }), title: "Geen overgeslagen mails", text: "Mails die geen bestelling lijken, verschijnen hier met de reden." }) })) : (_jsx(DataTable, { rows: paged, columns: columns, rowKey: (m) => m.id, activeIndex: cursor, rowAction: rowAction, sort: { key: "datum", dir: sortOrder === "date-asc" ? "asc" : "desc" }, onSortChange: () => setSortOrder(sortOrder === "date-asc" ? "date-desc" : "date-asc"), mobileCard: (m) => (_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "truncate font-semibold", children: m.from_name || m.from_email || "Onbekend" }), _jsx("div", { className: "truncate text-muted-foreground", children: m.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [fmtDayTime(m.received_at), " \u00B7 ", statusOf(m).label] })] })), footer: _jsx(TablePagination, { total: filtered.length, page: current, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize }) }))] }));
 }

package/dist-lib/components/fs-ui/DataTable.js

@@ -3,7 +3,7 @@ import { useEffect, useRef } from "react";
 import { ArrowDown, ArrowUp, ChevronRight } from "lucide-react";
 const TABLE_CLS = "w-full [&_thead_th]:h-10 [&_thead_th]:text-[11px] [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-wide [&_thead_th]:text-muted-foreground min-w-[900px] table-fixed caption-bottom text-sm [&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-card [&_tbody_tr]:transition-colors";
 /** Kop- en celruimte zijn gelijk, zodat koptekst en celtekst op dezelfde x beginnen. */
-const PAD = "px-4";
+const PAD = "px-2";
 /**
  * Tabel exact als Verkooporders: eigen <table> met table-fixed en colgroup in px,
  * kop 40 px die plakt, rij 60 px, geselecteerde rij met 3 px groene streep.
@@ -13,7 +13,7 @@ export function DataTable({ rows, columns, rowKey, onRowClick, activeIndex, mobi
     const hasEnd = !!(rowAction || onRowClick);
     const activeRef = useRef(null);
     useEffect(() => { activeRef.current?.scrollIntoView({ block: "nearest" }); }, [activeIndex]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-clip rounded-xl border border-border bg-card shadow-sm", children: [_jsx("div", { className: "hidden min-h-0 flex-1 overflow-auto overscroll-contain md:block", children: _jsxs("table", { className: TABLE_CLS, children: [_jsxs("colgroup", { children: [columns.map((c) => _jsx("col", { style: { width: `${c.width}px` } }, c.key)), hasEnd && _jsx("col", { style: { width: "56px" } })] }), _jsx("thead", { className: "[&_tr]:border-b", children: _jsxs("tr", { className: "border-b border-border", children: [columns.map((c) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full min-w-0 flex-col overflow-clip rounded-xl border border-border bg-card shadow-sm", children: [_jsx("div", { className: "hidden md:block", children: _jsxs("table", { className: TABLE_CLS, children: [_jsxs("colgroup", { children: [columns.map((c) => _jsx("col", { style: { width: `${c.width}px` } }, c.key)), hasEnd && _jsx("col", { style: { width: "56px" } })] }), _jsx("thead", { className: "[&_tr]:border-b", children: _jsxs("tr", { className: "border-b border-border", children: [columns.map((c) => {
                                                 const active = sort?.key === c.key;
                                                 return (_jsx("th", { scope: "col", className: PAD + " text-left align-middle", "aria-sort": active ? (sort.dir === "asc" ? "ascending" : "descending") : undefined, children: c.sortable && onSortChange ? (_jsxs("button", { type: "button", onClick: () => onSortChange(c.key), className: "inline-flex max-w-full items-center gap-1 rounded-sm uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": `Sorteer op ${c.header}`, children: [_jsx("span", { className: "truncate", children: c.header }), active && (sort.dir === "asc" ? _jsx(ArrowUp, { className: "h-3 w-3 shrink-0", "aria-hidden": true }) : _jsx(ArrowDown, { className: "h-3 w-3 shrink-0", "aria-hidden": true }))] })) : _jsx("span", { className: "block truncate", children: c.header }) }, c.key));
                                             }), hasEnd && _jsx("th", { scope: "col", className: PAD, children: _jsx("span", { className: "sr-only", children: "Acties" }) })] }) }), _jsx("tbody", { children: rows.map((r, i) => {
@@ -24,7 +24,7 @@ export function DataTable({ rows, columns, rowKey, onRowClick, activeIndex, mobi
                                             } } : undefined, style: { height: 60 }, className: "group border-b border-border text-foreground last:border-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring " +
                                                 (onRowClick ? "cursor-pointer hover:bg-muted/50 " : "") +
                                                 (active ? "bg-muted/60" : ""), children: [columns.map((c, ci) => (_jsxs("td", { className: PAD + " relative overflow-hidden py-0 align-middle", children: [ci === 0 && active && _jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-[3px] bg-primary" }), c.cell(r)] }, c.key))), hasEnd && (_jsx("td", { className: PAD + " py-0 text-right align-middle", onClick: rowAction ? (e) => e.stopPropagation() : undefined, children: rowAction ? rowAction(r) : (_jsx(ChevronRight, { className: "ml-auto h-4 w-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100", "aria-hidden": true })) }))] }, rowKey(r)));
-                                    }) })] }) }), _jsx("div", { className: "min-h-0 flex-1 divide-y divide-border overflow-y-auto overscroll-contain md:hidden", children: rows.map((r, i) => (_jsxs("div", { role: onRowClick ? "button" : undefined, tabIndex: onRowClick ? 0 : undefined, onClick: onRowClick ? () => onRowClick(r, i) : undefined, className: "relative min-h-11 p-4 text-sm transition-colors active:bg-muted " + (activeIndex === i ? "bg-muted/60" : ""), children: [activeIndex === i && _jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-[3px] bg-primary" }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: mobileCard(r) }), rowAction && _jsx("div", { onClick: (e) => e.stopPropagation(), children: rowAction(r) })] })] }, rowKey(r)))) })] }), footer] }));
+                                    }) })] }) }), _jsx("div", { className: "divide-y divide-border md:hidden", children: rows.map((r, i) => (_jsxs("div", { role: onRowClick ? "button" : undefined, tabIndex: onRowClick ? 0 : undefined, onClick: onRowClick ? () => onRowClick(r, i) : undefined, className: "relative min-h-11 p-4 text-sm transition-colors active:bg-muted " + (activeIndex === i ? "bg-muted/60" : ""), children: [activeIndex === i && _jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-[3px] bg-primary" }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: mobileCard(r) }), rowAction && _jsx("div", { onClick: (e) => e.stopPropagation(), children: rowAction(r) })] })] }, rowKey(r)))) })] }), footer] }));
 }
 /** Cel met hooguit twee regels: 14 px en 12 px grijs; afkappen met volledige tekst als infoballon. */
 export function CellText({ primary, secondary, strong }) {

package/dist-lib/components/settings/ImapAccountsCard.d.ts

@@ -0,0 +1,2 @@
+export declare function ImapAccountsCard(): import("react").JSX.Element;
+//# sourceMappingURL=ImapAccountsCard.d.ts.map

package/dist-lib/components/settings/ImapAccountsCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImapAccountsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/ImapAccountsCard.tsx"],"names":[],"mappings":"AAyCA,wBAAgB,gBAAgB,gCAwP/B"}