@flowselections/mailbox-orders 1.0.9 → 1.0.10

package/dist-lib/components/MailboxProposalsPage.js

@@ -4,10 +4,66 @@ import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 import { Button, Badge, Card, CardContent, CardHeader, CardTitle, Input, Label, Textarea, Switch, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Dialog, DialogContent, DialogHeader, DialogTitle, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, } from "@flowselections/core";
 import { Check, X, Trash2, Plus, AlertTriangle, RefreshCw } from "lucide-react";
-import { listProposals, approveProposal, rejectProposal, listCustomersForPicker, listProductsForPicker, listDeliveryLocationsForCustomer, listPickupLocations, listCarriersForPicker, getOrderPickDays, getActiveOrdersMailbox, ingestEmailEvent, backfillRecentEvents, } from "../lib/mailbox.functions";
+import { computeEarliestDelivery, isValidDeliveryDate } from "../lib/delivery-date";
+import { listProposals, approveProposal, rejectProposal, listCustomersForPicker, listProductsForPicker, listDeliveryLocationsForCustomer, listPickupLocations, listCarriersForPicker, getOrderPickDays, getActiveOrdersMailbox, syncMailboxNow, getLastIngestRun, refreshProposalsForAgentChange, reparseProposalNow, listBeladingOptionsForProducts, listAllowedLoadCarriers, } from "../lib/mailbox.functions";
+import { enabledLoadCarriers, normalizeAllowedLoadCarriers, EMPTY_LOAD_CARRIERS } from "../lib/load-carriers";
 import { listTemplateFields, listPlantTypesForPicker, listSuppliersForPicker, } from "../lib/mailbox-template.functions";
 import { SearchableSelect } from "./SearchableSelect";
+import { MailboxAuthBanner } from "./MailboxAuthBanner";
 import { supabase } from "../integrations/supabase/client";
+const beladingKey = (b) => `${b.plants_per_crate}x${b.crates_per_layer}x${b.layers_per_cart}|${b.crate_code ?? ""}|${b.carrier_code ?? ""}`;
+const beladingLabel = (b) => `${b.plants_per_crate} planten/fust · ${b.crates_per_layer} fusten/laag · ${b.layers_per_cart} lagen`;
+// Extra regel onder het label: fusten/kar + fusttype + kartype
+const beladingHint = (b) => [
+    `${b.crates_per_layer * b.layers_per_cart} fusten/kar`,
+    b.crate_name ?? null,
+    b.carrier_name ?? null,
+].filter(Boolean).join(" · ");
+/** Losse tekstvergelijking voor kartypes (code of label). */
+const normCarrierText = (v) => v.toLowerCase().replace(/[^a-z0-9]+/g, "");
+/**
+ * Alleen beladingen tonen waarvan het kartype door de Logistiek Engine is
+ * toegestaan. Beladingen zonder kartype worden niet getoond (behalve de
+ * standaardbelading van het product).
+ */
+const beladingAllowedByEngine = (b, allowed) => {
+    if (allowed.length === 0)
+        return true; // Engine (nog) niet beschikbaar
+    const hay = [b.carrier_code, b.carrier_name].filter(Boolean).map((v) => normCarrierText(String(v)));
+    if (hay.length === 0)
+        return false;
+    return allowed.some((c) => {
+        const keys = [normCarrierText(c.code), normCarrierText(c.label)];
+        return keys.some((k) => k && hay.some((h) => h === k || h.includes(k) || k.includes(h)));
+    });
+};
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+/**
+ * Zet een klantwaarde (id óf door AI geschreven klantnaam) om naar een geldig
+ * klant-id. Valt terug op de automatisch herkende klant van het voorstel.
+ */
+function resolveCustomerId(raw, customers, fallbackId) {
+    const list = Array.isArray(customers) ? customers : [];
+    if (typeof raw === "string" && raw.trim()) {
+        const v = raw.trim();
+        if (UUID_RE.test(v))
+            return v;
+        const norm = v.toLowerCase();
+        const byName = list.find((c) => (c.company_name ?? "").trim().toLowerCase() === norm);
+        if (byName)
+            return byName.id;
+        const byEmail = list.find((c) => (c.email ?? "").trim().toLowerCase() === norm);
+        if (byEmail)
+            return byEmail.id;
+        const partial = list.find((c) => {
+            const n = (c.company_name ?? "").trim().toLowerCase();
+            return n.length > 2 && (n.includes(norm) || norm.includes(n));
+        });
+        if (partial)
+            return partial.id;
+    }
+    return fallbackId ?? null;
+}
 export function MailboxProposalsPage() {
     const qc = useQueryClient();
     const fetchList = useServerFn(listProposals);
@@ -21,8 +77,8 @@ export function MailboxProposalsPage() {
     const fetchCarriers = useServerFn(listCarriersForPicker);
     const fetchPickupLocations = useServerFn(listPickupLocations);
     const fetchActive = useServerFn(getActiveOrdersMailbox);
-    const fetchIngest = useServerFn(ingestEmailEvent);
-    const fetchBackfill = useServerFn(backfillRecentEvents);
+    const fetchSync = useServerFn(syncMailboxNow);
+    const fetchLastRun = useServerFn(getLastIngestRun);
     // Server fns met requireSupabaseAuth gooien een raw Response bij een stale
     // bearer-token. Die bubbelt op als "[object Response]" en blankt het scherm.
     // Vang elke fout en geef een lege fallback terug — UI blijft bruikbaar.
@@ -37,9 +93,15 @@ export function MailboxProposalsPage() {
     // Bestelvoorstellen toont uitsluitend nieuwe, nog niet gecontroleerde
     // bestellingen ("Te controleren"). Goedgekeurd/afgewezen verschijnt in
     // de module Verwerkt.
-    const { data, isLoading } = useQuery({
+    const { data, isLoading, error: listError, refetch: refetchList } = useQuery({
         queryKey: ["mailbox-proposals", "pending"],
-        queryFn: () => safe(() => fetchList({ data: { status: "pending" } })),
+        // Bewust NIET stilzwijgend opvangen: als de server tijdelijk onbereikbaar is
+        // moet de gebruiker dat zien in plaats van een lege lijst ("geen mailtjes").
+        queryFn: () => fetchList({ data: { status: "pending" } }),
+        retry: 3,
+        retryDelay: (a) => Math.min(1000 * 2 ** a, 8000),
+        refetchInterval: 60000,
+        refetchOnWindowFocus: true,
     });
     const { data: templateData } = useQuery({
         queryKey: ["mailbox-template-fields"],
@@ -51,7 +113,6 @@ export function MailboxProposalsPage() {
     const { data: supplierData } = useQuery({ queryKey: ["mailbox-suppliers"], queryFn: () => safe(() => fetchSuppliers()) });
     const { data: carriersData } = useQuery({ queryKey: ["mailbox-carriers"], queryFn: () => safe(() => fetchCarriers()) });
     const { data: pickupLocData } = useQuery({ queryKey: ["mailbox-pickup-locations"], queryFn: () => safe(() => fetchPickupLocations()) });
-    // Realtime ingestie + backfill — voorheen in de Inbox-pagina.
     const { data: activeMailbox } = useQuery({
         queryKey: ["mailbox-active-account"],
         queryFn: () => fetchActive(),
@@ -59,23 +120,27 @@ export function MailboxProposalsPage() {
         retry: 1,
     });
     const activeMailboxId = activeMailbox?.connected ? activeMailbox.id : null;
-    const backfillMut = useMutation({
-        mutationFn: async () => {
+    // Ingest wordt server-side gedreven (pg_cron, elke minuut). Deze knoppen /
+    // triggers hier zijn een extra vangnet zodat de UI direct bijwerkt — de
+    // pipeline is exact dezelfde als die van cron.
+    const syncMut = useMutation({
+        mutationFn: async (trigger) => {
             try {
-                return await fetchBackfill();
+                return await fetchSync({ data: { trigger } });
             }
-            catch {
-                return { ok: false, inserted: 0 };
+            catch (e) {
+                return { ok: false, error: String(e?.message ?? e), inserted: 0, processed: 0, errors: 1 };
             }
         },
         onSuccess: (res) => {
-            if (res?.ok && (res.inserted ?? 0) > 0) {
+            if (res?.ok && ((res.inserted ?? 0) > 0 || (res.processed ?? 0) > 0)) {
                 qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                qc.invalidateQueries({ queryKey: ["mailbox-last-ingest-run"] });
             }
         },
     });
     const handleManualSync = () => {
-        const p = backfillMut.mutateAsync();
+        const p = syncMut.mutateAsync("manual");
         toast.promise(p, {
             loading: "Mailbox synchroniseren...",
             success: (res) => res?.ok
@@ -86,6 +151,8 @@ export function MailboxProposalsPage() {
             error: "Sync mislukt",
         });
     };
+    // Realtime hint: zodra er een nieuw event binnenkomt vragen we de server om
+    // het meteen te verwerken (zelfde pipeline). Cron is de garantiestrook.
     useEffect(() => {
         if (!activeMailboxId)
             return;
@@ -94,36 +161,99 @@ export function MailboxProposalsPage() {
             .on("postgres_changes", {
             event: "INSERT", schema: "public", table: "email_auth_events",
             filter: `connection_id=eq.${activeMailboxId}`,
-        }, 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) {
-                    toast.success("Nieuwe bestelling ontvangen");
-                    qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
-                }
-            }
-            catch { /* backfill vangt op */ }
+        }, () => {
+            syncMut.mutate("realtime");
         })
             .subscribe();
         return () => { void supabase.removeChannel(channel); };
-    }, [activeMailboxId, fetchIngest, qc]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeMailboxId]);
+    // Bij eerste keer openen + elke 5 min extra vangnet naast pg_cron/realtime.
     const didInitialBackfill = useRef(false);
     useEffect(() => {
         if (!activeMailboxId || didInitialBackfill.current)
             return;
         didInitialBackfill.current = true;
-        backfillMut.mutate();
-        const t = setInterval(() => backfillMut.mutate(), 300000);
+        syncMut.mutate("manual");
+        const t = setInterval(() => syncMut.mutate("manual"), 300000);
         return () => clearInterval(t);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeMailboxId]);
+    // Laatste ingest-run tonen voor observability.
+    const { data: lastRunData } = useQuery({
+        queryKey: ["mailbox-last-ingest-run"],
+        queryFn: () => safe(() => fetchLastRun()),
+        refetchInterval: 60000,
+    });
+    const lastRun = lastRunData?.run ?? null;
+    // AI-agent gewijzigd? Dan worden openstaande voorstellen automatisch opnieuw
+    // geanalyseerd met de nieuwste agent. Server-side draait dit ook elke
+    // cron-run; hier reageren we direct op wijzigingen in de AI-module.
+    const fetchAgentRefresh = useServerFn(refreshProposalsForAgentChange);
+    const agentRefreshMut = useMutation({
+        mutationFn: async () => {
+            try {
+                return await fetchAgentRefresh();
+            }
+            catch {
+                return { reparsed: 0 };
+            }
+        },
+        onSuccess: (res) => {
+            if ((res?.reparsed ?? 0) > 0) {
+                qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                toast.success(`${res.reparsed} voorstel(len) opnieuw geanalyseerd met de bijgewerkte AI-agent`);
+            }
+        },
+    });
+    // Handmatig één voorstel opnieuw laten analyseren door de AI-agent.
+    const fetchReparse = useServerFn(reparseProposalNow);
+    const [reparseError, setReparseError] = useState(null);
+    const reparseMutation = useMutation({
+        mutationFn: async (proposalId) => {
+            setReparseError(null);
+            return (await fetchReparse({ data: { proposalId } }));
+        },
+        onSuccess: (res) => {
+            if (res?.ok) {
+                setReparseError(null);
+                qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                toast.success("E-mail opnieuw geanalyseerd — bestelgegevens bijgewerkt");
+            }
+            else {
+                const msg = res?.error ?? "Opnieuw analyseren mislukt";
+                setReparseError(msg);
+                toast.error(msg);
+            }
+        },
+        onError: (e) => {
+            const msg = e?.message ?? "Opnieuw analyseren mislukt";
+            setReparseError(msg);
+            toast.error(msg);
+        },
+    });
+    const didAgentCheck = useRef(false);
+    useEffect(() => {
+        if (didAgentCheck.current)
+            return;
+        didAgentCheck.current = true;
+        agentRefreshMut.mutate();
+        const channel = supabase
+            .channel("ai-agent-changes")
+            .on("postgres_changes", { event: "*", schema: "public", table: "ai_module_bindings" }, () => agentRefreshMut.mutate())
+            .on("postgres_changes", { event: "*", schema: "public", table: "ai_models" }, () => agentRefreshMut.mutate())
+            .on("postgres_changes", { event: "*", schema: "public", table: "ai_credentials" }, () => agentRefreshMut.mutate())
+            .subscribe();
+        const t = setInterval(() => agentRefreshMut.mutate(), 120000);
+        return () => { clearInterval(t); void supabase.removeChannel(channel); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const items = Array.isArray(data?.items) ? data.items : [];
     const template = Array.isArray(templateData?.items) ? templateData.items : [];
     const customers = Array.isArray(customersData?.items) ? customersData.items : [];
     const products = Array.isArray(productsData?.items) ? productsData.items : [];
+    // Rule Engine bepaalt of doorverkopen zonder voorraad mag
+    const allowBackorder = productsData?.allowBackorder === true;
     const plantTypes = Array.isArray(plantData?.items) ? plantData.items : [];
     const suppliers = Array.isArray(supplierData?.items) ? supplierData.items : [];
     const carriers = Array.isArray(carriersData?.items) ? carriersData.items : [];
@@ -135,7 +265,7 @@ export function MailboxProposalsPage() {
     const customerNameFor = (p) => {
         const fvs = Array.isArray(p.mailbox_proposal_field_values) ? p.mailbox_proposal_field_values : [];
         const fv = fvs.find((v) => v.field_key === "customer");
-        const id = fv?.value ?? p.matched_customer_id ?? null;
+        const id = resolveCustomerId(fv?.value, customers, p.matched_customer_id);
         if (id) {
             const c = customers.find((x) => x.id === id);
             if (c?.company_name)
@@ -143,17 +273,24 @@ export function MailboxProposalsPage() {
         }
         return p.mailbox_messages?.from_name || p.mailbox_messages?.from_email || "Onbekend";
     };
-    const orderNumberFor = (p) => `MB-${String(p.id).slice(0, 8).toUpperCase()}`;
-    return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Bestelvoorstellen" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Nieuw binnengekomen bestellingen die nog handmatig gecontroleerd moeten worden." })] }), _jsxs(Button, { onClick: handleManualSync, disabled: backfillMut.isPending, variant: "outline", children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${backfillMut.isPending ? "animate-spin" : ""}` }), "Sync nu"] })] }), isLoading ? (_jsx("div", { className: "text-muted-foreground", children: "Laden..." })) : items.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: "Geen bestellingen te controleren." })) : (_jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Ordernummer" }), _jsx(TableHead, { children: "Klantnaam" }), _jsx(TableHead, { children: "Orderdatum" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "text-right", children: "Orderwaarde" })] }) }), _jsx(TableBody, { children: items.map((p) => {
-                                    const fvs = Array.isArray(p.mailbox_proposal_field_values) ? p.mailbox_proposal_field_values : [];
-                                    const needsReview = fvs.some((v) => v.needs_review);
-                                    const date = p.mailbox_messages?.received_at ?? p.created_at;
-                                    return (_jsxs(TableRow, { className: "cursor-pointer hover:bg-muted/50", onClick: () => setActiveId(p.id), children: [_jsx(TableCell, { className: "font-mono text-xs", children: orderNumberFor(p) }), _jsx(TableCell, { className: "font-medium", children: customerNameFor(p) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: date ? new Date(date).toLocaleDateString("nl-NL") : "-" }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Badge, { variant: statusVariant(p.status), children: statusLabel(p.status) }), needsReview && (_jsxs(Badge, { variant: "outline", className: "text-xs border-yellow-500 text-yellow-700", children: [_jsx(AlertTriangle, { className: "h-3 w-3 mr-1" }), "Controleren"] }))] }) }), _jsx(TableCell, { className: "text-right text-sm text-muted-foreground", children: "\u2014" })] }, p.id));
-                                }) })] }) }) })), _jsx(Dialog, { open: !!active, onOpenChange: (o) => { if (!o)
-                    setActiveId(null); }, children: _jsx(DialogContent, { className: "max-w-[95vw] w-[95vw] h-[92vh] max-h-[92vh] p-0 flex flex-col overflow-hidden", children: active && (_jsxs(_Fragment, { children: [_jsx(DialogHeader, { className: "px-6 pt-6 pb-3 shrink-0 border-b", children: _jsxs(DialogTitle, { children: [orderNumberFor(active), " \u00B7 ", customerNameFor(active)] }) }), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain p-6", children: _jsx(ProposalEditor, { proposal: active, template: template, customers: customers, products: products, plantTypes: plantTypes, suppliers: suppliers, carriers: carriers, pickupLocations: pickupLocations, onApprove: async (payload) => {
+    return (_jsxs("div", { className: "p-6 flex flex-col gap-4 flex-1 min-h-0 overflow-hidden", children: [_jsx(MailboxAuthBanner, { active: activeMailbox }), _jsxs("div", { className: "flex items-center justify-between shrink-0", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Bestelvoorstellen" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Nieuw binnengekomen bestellingen die nog handmatig gecontroleerd moeten worden." })] }), _jsxs("div", { className: "flex items-center gap-3", children: [lastRun?.finished_at && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["Laatste sync: ", new Date(lastRun.finished_at).toLocaleTimeString("nl-NL"), " \u2014 ", lastRun.processed, " verwerkt", lastRun.errors > 0 ? `, ${lastRun.errors} fouten` : ""] })), _jsxs(Button, { onClick: handleManualSync, disabled: syncMut.isPending, variant: "outline", children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${syncMut.isPending ? "animate-spin" : ""}` }), "Sync nu"] })] })] }), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]", children: isLoading ? (_jsx("div", { className: "text-muted-foreground", children: "Laden..." })) : listError ? (_jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-4 text-sm", children: [_jsx("p", { className: "font-medium text-destructive", children: "Bestellingen konden niet worden opgehaald." }), _jsxs("p", { className: "text-muted-foreground mt-1", children: [listError?.message ?? "Onbekende fout", " \u2014 de lijst is niet leeg, alleen niet geladen."] }), _jsx(Button, { size: "sm", variant: "outline", className: "mt-3", onClick: () => void refetchList(), children: "Opnieuw proberen" })] })) : items.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: "Geen bestellingen te controleren." })) : (_jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Klantnaam" }), _jsx(TableHead, { children: "Orderdatum" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { className: "text-right", children: "Orderwaarde" })] }) }), _jsx(TableBody, { children: items.map((p) => {
+                                        const fvs = Array.isArray(p.mailbox_proposal_field_values) ? p.mailbox_proposal_field_values : [];
+                                        const needsReview = fvs.some((v) => v.needs_review);
+                                        const date = p.mailbox_messages?.received_at ?? p.created_at;
+                                        return (_jsxs(TableRow, { className: "cursor-pointer hover:bg-muted/50", onClick: () => setActiveId(p.id), children: [_jsx(TableCell, { className: "font-medium", children: customerNameFor(p) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: date ? new Date(date).toLocaleDateString("nl-NL") : "-" }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Badge, { variant: statusVariant(p.status), children: statusLabel(p.status) }), p.parsed_payload?.ai?.ok === true && (_jsx(Badge, { variant: "outline", className: "text-xs border-sky-500 text-sky-700", children: "AI" })), needsReview && (_jsxs(Badge, { variant: "outline", className: "text-xs border-yellow-500 text-yellow-700", children: [_jsx(AlertTriangle, { className: "h-3 w-3 mr-1" }), "Controleren"] }))] }) }), _jsx(TableCell, { className: "text-right text-sm text-muted-foreground", children: "\u2014" })] }, p.id));
+                                    }) })] }) }) })) }), _jsx(Dialog, { open: !!active, onOpenChange: (o) => { if (!o) {
+                    setActiveId(null);
+                    setReparseError(null);
+                } }, children: _jsx(DialogContent, { className: "max-w-[95vw] w-[95vw] h-[92vh] max-h-[92vh] p-0 flex flex-col overflow-hidden", children: active && (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { className: "px-6 pt-6 pb-3 shrink-0 border-b", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx(DialogTitle, { children: customerNameFor(active) }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "mr-8", disabled: reparseMutation.isPending, onClick: () => reparseMutation.mutate(active.id), children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${reparseMutation.isPending ? "animate-spin" : ""}` }), reparseMutation.isPending ? "Analyseren…" : "Mail opnieuw analyseren"] })] }), reparseError && (_jsxs("div", { className: "mt-2 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsx("span", { children: reparseError })] }))] }), _jsx("div", { className: "flex-1 min-h-0 overflow-hidden p-6", children: _jsx(ProposalEditor, { proposal: active, template: template, customers: customers, products: products, allowBackorder: allowBackorder, plantTypes: plantTypes, suppliers: suppliers, carriers: carriers, pickupLocations: pickupLocations, onApprove: async (payload) => {
                                         try {
-                                            await fetchApprove({ data: payload });
+                                            const res = await fetchApprove({ data: payload });
+                                            const shortages = Array.isArray(res?.shortages) ? res.shortages : [];
                                             toast.success("Bestelling aangemaakt — karindeling wordt automatisch aangemaakt in de Verkoop-module");
+                                            if (shortages.length > 0) {
+                                                toast.warning(`Tekorten (levering zonder voorraad staat aan): ${shortages
+                                                    .map((s) => `${s.product ?? s.productId}: besteld ${s.wanted}, beschikbaar ${s.available}, tekort ${s.missing}`)
+                                                    .join(" · ")}`);
+                                            }
                                             qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
                                             setActiveId(null);
                                         }
@@ -175,7 +312,7 @@ export function MailboxProposalsPage() {
 function ReadOnlyField({ label, value }) {
     return (_jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted-foreground", children: label }), _jsx("div", { className: "text-sm", children: value && String(value).trim() !== "" ? value : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }) })] }));
 }
-function ProposalEditor({ proposal, template, customers, products, plantTypes, suppliers, carriers, pickupLocations, onApprove, onReject, }) {
+function ProposalEditor({ proposal, template, customers, products, allowBackorder, plantTypes, suppliers, carriers, pickupLocations, onApprove, onReject, }) {
     const msg = proposal.mailbox_messages ?? {};
     const fieldValues = Array.isArray(proposal.mailbox_proposal_field_values)
         ? proposal.mailbox_proposal_field_values : [];
@@ -191,12 +328,23 @@ function ProposalEditor({ proposal, template, customers, products, plantTypes, s
         visibleFields.forEach((f) => {
             init[f.key] = fvMap[f.key]?.value ?? f.default_value ?? null;
         });
-        // Vul de auto-herkende klant in als er nog geen waarde uit het template komt
-        if (!init["customer"] && proposal.matched_customer_id) {
-            init["customer"] = proposal.matched_customer_id;
-        }
+        // De AI schrijft soms een klantnaam i.p.v. een id — altijd omzetten naar een
+        // geldig klant-id, met de automatisch herkende klant als terugval.
+        init["customer"] = resolveCustomerId(init["customer"], customers, proposal.matched_customer_id);
         return init;
     });
+    // Klantenlijst kan later binnenkomen: alsnog omzetten zodra dat kan.
+    useEffect(() => {
+        setValues((prev) => {
+            const resolved = resolveCustomerId(prev["customer"], customers, proposal.matched_customer_id);
+            return resolved === prev["customer"] ? prev : { ...prev, customer: resolved };
+        });
+    }, [customers, proposal.matched_customer_id]);
+    const defaultBelading = (p) => p ? {
+        plants_per_crate: Math.max(1, Number(p.plants_per_crate ?? 1)),
+        crates_per_layer: Math.max(1, Number(p.crates_per_layer ?? 1)),
+        layers_per_cart: Math.max(1, Number(p.layers_per_cart ?? 1)),
+    } : null;
     const initialLines = Array.isArray(proposal.mailbox_proposal_lines)
         ? proposal.mailbox_proposal_lines.map((l) => {
             const p = products.find((x) => x.id === l.product_id);
@@ -207,14 +355,34 @@ function ProposalEditor({ proposal, template, customers, products, plantTypes, s
                 id: l.id,
                 product_id: l.product_id,
                 raw_product_text: l.raw_product_text ?? "",
+                plant_type: l.plant_type ?? null,
                 quantity: normalized || null,
                 unit: l.unit,
+                // Geen belading bekend uit de mail → altijd de standaardbelading.
+                belading: defaultBelading(p),
             };
         })
         : [];
     const [lines, setLines] = useState(initialLines.length ? initialLines : [
-        { product_id: null, raw_product_text: "", quantity: null, unit: "stuks" },
+        { product_id: null, raw_product_text: "", quantity: null, unit: "stuks", belading: null },
     ]);
+    // Beschikbare beladingen per gekozen product (zelfde bron als Verkoop-module).
+    const fetchBeladingen = useServerFn(listBeladingOptionsForProducts);
+    const lineProductIds = useMemo(() => Array.from(new Set(lines.map((l) => l.product_id).filter(Boolean))), [lines]);
+    const { data: beladingData, isFetching: loadingBeladingen } = useQuery({
+        queryKey: ["mailbox-beladingen", lineProductIds.join(",")],
+        enabled: lineProductIds.length > 0,
+        queryFn: async () => {
+            try {
+                return await fetchBeladingen({ data: { productIds: lineProductIds } });
+            }
+            catch {
+                return { byProduct: {} };
+            }
+        },
+    });
+    const beladingByProduct = beladingData?.byProduct && typeof beladingData.byProduct === "object"
+        ? beladingData.byProduct : {};
     const customerVal = values["customer"];
     const deliveryVal = values["delivery_date"];
     const notesVal = values["notes"];
@@ -242,6 +410,15 @@ function ProposalEditor({ proposal, template, customers, products, plantTypes, s
         // schedule reset via microtask om setState-in-render te vermijden
         queueMicrotask(() => setVal("delivery_location", null));
     }
+    // Geen locatie uit de mail/AI? Val terug op de hoofdafleverlocatie van de klant.
+    useEffect(() => {
+        if (deliveryLocationVal || deliveryLocations.length === 0)
+            return;
+        const primary = deliveryLocations.find((l) => l.is_primary === true) ?? deliveryLocations[0];
+        if (primary?.id)
+            setVal("delivery_location", primary.id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [deliveryLocationVal, deliveryLocations.length, customerVal]);
     // Auto-vul vervoerder zodra een nieuwe locatie wordt gekozen (één keer per wissel).
     const lastLocRef = useRef(deliveryLocationVal);
     useEffect(() => {
@@ -272,57 +449,119 @@ function ProposalEditor({ proposal, template, customers, products, plantTypes, s
     const selectedCarrier = carriers.find((c) => c.id === carrierVal) ?? null;
     const carrierDeliveryDays = Math.max(0, Number(selectedCarrier?.delivery_days ?? 0));
     const pickupLocationVal = values["pickup_location"];
+    // ─── Ladingdragers uit de Rule Engine (nooit cachen) ──────────────────────
+    const fetchLoadCarriers = useServerFn(listAllowedLoadCarriers);
+    const { data: lcData } = useQuery({
+        queryKey: ["mailbox-load-carriers"],
+        staleTime: 0,
+        gcTime: 0,
+        refetchOnMount: "always",
+        refetchOnWindowFocus: true,
+        queryFn: async () => {
+            try {
+                return await fetchLoadCarriers();
+            }
+            catch {
+                return EMPTY_LOAD_CARRIERS;
+            }
+        },
+    });
+    const loadCarrierList = useMemo(() => normalizeAllowedLoadCarriers(lcData), [lcData]);
+    const loadCarrierOptions = enabledLoadCarriers(loadCarrierList);
+    const loadCarrierVal = values["load_carrier"];
+    const loadCarrierBlocked = proposal.parsed_payload?.load_carrier_blocked === true
+        ? (proposal.parsed_payload?.load_carrier_detected ?? "onbekend")
+        : null;
+    // Onbekende of uitgeschakelde drager wissen; niets herkend → standaard van de Engine.
+    useEffect(() => {
+        if (loadCarrierOptions.length === 0)
+            return;
+        if (loadCarrierVal && !loadCarrierOptions.some((c) => c.code === loadCarrierVal)) {
+            setVal("load_carrier", null);
+            return;
+        }
+        if (!loadCarrierVal) {
+            const def = loadCarrierOptions.find((c) => c.code === loadCarrierList.default) ?? loadCarrierOptions[0];
+            if (def)
+                setVal("load_carrier", def.code);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loadCarrierVal, loadCarrierOptions.length, loadCarrierList.default]);
+    // Geen afhaallocatie uit de mail/AI? Val terug op de hoofd-afhaallocatie (isDefault).
+    useEffect(() => {
+        if (pickupLocations.length === 0)
+            return;
+        const known = pickupLocationVal && pickupLocations.some((l) => l.id === pickupLocationVal);
+        if (known)
+            return;
+        const main = pickupLocations.find((l) => l.is_default === true) ?? pickupLocations[0];
+        if (main?.id)
+            setVal("pickup_location", main.id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pickupLocationVal, pickupLocations.length]);
     const canPickDate = !!customerVal && !!deliveryLocationVal && !!pickupLocationVal && !!carrierVal;
     const fmtISO = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-    const earliestDate = useMemo(() => {
-        const base = new Date();
-        base.setHours(0, 0, 0, 0);
-        base.setDate(base.getDate() + pickDays + carrierDeliveryDays);
-        return base;
-    }, [pickDays, carrierDeliveryDays]);
-    const earliestISO = fmtISO(earliestDate);
+    const earliest = useMemo(() => computeEarliestDelivery(selectedCarrier, pickDays), [selectedCarrier, pickDays]);
+    const earliestDate = earliest.date;
+    const earliestISO = earliest.iso;
     const earliestLabel = earliestDate.toLocaleDateString("nl-NL", {
         day: "numeric", month: "long", year: "numeric",
     });
-    // Synchroniseer delivery_date wanneer de eerst mogelijke datum verandert.
+    // Bij wisselen van vervoerder: bezorgdatum altijd opnieuw bepalen.
+    const lastCarrierRef = useRef(carrierVal);
+    useEffect(() => {
+        if (carrierVal === lastCarrierRef.current)
+            return;
+        lastCarrierRef.current = carrierVal;
+        if (!carrierVal)
+            return;
+        setVal("delivery_date", earliestISO);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [carrierVal, earliestISO]);
+    // Synchroniseer delivery_date wanneer de eerst mogelijke datum verandert of
+    // de huidige datum niet geldig is voor de gekozen vervoerder.
     useEffect(() => {
         if (!canPickDate)
             return;
-        if (!deliveryVal || deliveryVal < earliestISO) {
+        if (!deliveryVal || !isValidDeliveryDate(selectedCarrier, deliveryVal, pickDays)) {
             setVal("delivery_date", earliestISO);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [canPickDate, earliestISO]);
-    const handleApprove = () => {
+    }, [canPickDate, earliestISO, deliveryVal, carrierVal]);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    const [checkedOk, setCheckedOk] = useState(false);
+    const buildPayload = () => {
         const missing = template.filter((f) => f.required && (values[f.key] === null || values[f.key] === undefined || values[f.key] === ""));
         if (missing.length > 0) {
             toast.error(`Verplichte velden ontbreken: ${missing.map((m) => m.label).join(", ")}`);
-            return;
+            return null;
         }
         if (!deliveryLocationVal) {
             toast.error("Selecteer een afleverlocatie.");
-            return;
+            return null;
         }
         if (!pickupLocationVal) {
             toast.error("Selecteer een afhaallocatie (eigen locatie / tuin).");
-            return;
+            return null;
         }
         const validLines = lines.filter((l) => l.product_id && (l.quantity ?? 0) > 0);
         if (validLines.length === 0) {
             toast.error("Voeg minimaal één product toe aan de bestelling.");
-            return;
+            return null;
         }
         for (const l of validLines) {
             const p = products.find((x) => x.id === l.product_id);
-            const ppc = Math.max(1, Number(p?.plants_per_crate ?? 1));
+            const b = l.belading ?? defaultBelading(p);
+            const ppc = Math.max(1, Number(b?.plants_per_crate ?? 1));
             const qty = l.quantity ?? 0;
             if (qty < ppc || qty % ppc !== 0) {
                 toast.error(`"${p?.product ?? l.raw_product_text}" moet per hele fust besteld worden (minimaal 1 fust = ${ppc} planten).`);
-                return;
+                return null;
             }
         }
         const cust = customers.find((c) => c.id === customerVal);
-        onApprove({
+        return {
             proposalId: proposal.id,
             customerId: customerVal ?? null,
             customerName: cust?.company_name ?? msg.from_name ?? msg.from_email ?? "Onbekend",
@@ -330,17 +569,46 @@ function ProposalEditor({ proposal, template, customers, products, plantTypes, s
             notes: notesVal || null,
             lines: validLines,
             fieldValues: Object.entries(values).map(([field_key, value]) => ({ field_key, value })),
-        });
+        };
+    };
+    // Stap 1: controleren → bevestigingsdialoog. Pas na bevestigen wordt de
+    // bestelling daadwerkelijk aangemaakt in Bestellingen.
+    const handleApprove = () => {
+        if (!buildPayload())
+            return;
+        setConfirmOpen(true);
     };
-    return (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-base", children: msg.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [msg.from_name, " <", msg.from_email, "> \u00B7", " ", msg.received_at ? new Date(msg.received_at).toLocaleString("nl-NL") : ""] })] }), _jsx(CardContent, { children: _jsx("pre", { className: "text-sm whitespace-pre-wrap font-sans max-h-[60vh] overflow-y-auto", children: msg.body_text || "(geen tekst)" }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Bestelvoorstel" }) }), _jsxs(CardContent, { className: "space-y-4", children: [(() => {
-                                const customerField = visibleFields.find((f) => f.key === "customer");
+    const handleConfirm = async () => {
+        const payload = buildPayload();
+        if (!payload)
+            return;
+        setSubmitting(true);
+        try {
+            await onApprove(payload);
+            setConfirmOpen(false);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-4 h-full min-h-0", children: [_jsxs(Card, { className: "flex flex-col min-h-0 overflow-hidden", children: [_jsxs(CardHeader, { className: "shrink-0", children: [_jsx(CardTitle, { className: "text-base", children: msg.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [msg.from_name, " <", msg.from_email, "> \u00B7", " ", msg.received_at ? new Date(msg.received_at).toLocaleString("nl-NL") : ""] })] }), _jsx(CardContent, { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain", children: _jsx("pre", { className: "text-sm whitespace-pre-wrap font-sans", children: msg.body_text || "(geen tekst)" }) })] }), _jsxs(Card, { className: "flex flex-col min-h-0 overflow-hidden", children: [_jsx(CardHeader, { className: "shrink-0", children: _jsx(CardTitle, { className: "text-base", children: "Bestelvoorstel" }) }), _jsxs(CardContent, { className: "space-y-4 flex-1 min-h-0 overflow-y-auto overscroll-contain", children: [(() => {
+                                // Klantveld staat altijd bovenaan, ook als het template (nog) leeg is.
+                                const customerField = visibleFields.find((f) => f.key === "customer") ?? {
+                                    id: "customer",
+                                    key: "customer",
+                                    label: "Klant",
+                                    field_type: "customer",
+                                    required: true,
+                                    visible: true,
+                                };
                                 const deliveryDateField = visibleFields.find((f) => f.key === "delivery_date");
                                 const otherFields = visibleFields.filter((f) => f.key !== "customer" && f.key !== "delivery_date");
                                 const renderField = (field) => (_jsx(DynamicField, { field: field, value: values[field.key], meta: fvMap[field.key], onChange: (v) => setVal(field.key, v), customers: customers, products: products, plantTypes: plantTypes, suppliers: suppliers }, field.key));
                                 const payload = (proposal.parsed_payload ?? {});
                                 const autoMatched = payload.auto_matched_customer === true;
                                 const matchWarning = typeof payload.auto_match_warning === "string" ? payload.auto_match_warning : null;
-                                return (_jsxs(_Fragment, { children: [autoMatched && (_jsxs("div", { className: "rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-800", children: ["Klant automatisch herkend op basis van het e-mailadres van de afzender", payload.auto_match_email ? ` (${payload.auto_match_email})` : "", "."] })), matchWarning && (_jsx("div", { className: "rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800", children: matchWarning })), customerField && renderField(customerField), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Locatie" }), _jsx(SearchableSelect, { value: deliveryLocationVal, placeholder: !customerVal
+                                const ai = (payload.ai ?? null);
+                                return (_jsxs(_Fragment, { children: [ai && ai.ok === false && (_jsxs("div", { className: "rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800", children: ["AI kon deze mail niet uitlezen \u2014 vul de velden handmatig in.", ai.error ? ` (${ai.error})` : ""] })), matchWarning && (_jsx("div", { className: "rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800", children: matchWarning })), customerField && renderField(customerField), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Locatie" }), _jsx(SearchableSelect, { value: deliveryLocationVal, placeholder: !customerVal
                                                         ? "Selecteer eerst een klant"
                                                         : deliveryLocations.length
                                                             ? "Kies locatie..."
@@ -355,14 +623,14 @@ function ProposalEditor({ proposal, template, customers, products, plantTypes, s
                                                             label: (l.name || addr || "Locatie") + (l.is_primary ? " ★" : ""),
                                                             hint: l.name && addr ? addr : undefined,
                                                         };
-                                                    }), onChange: (v) => setVal("delivery_location", v) })] }), selectedLocation && (_jsxs("div", { className: "rounded-md border bg-muted/30 p-3 space-y-2", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Adresgegevens" }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(ReadOnlyField, { label: "Straat", value: selectedLocation.street }), _jsx(ReadOnlyField, { label: "Huisnummer", value: selectedLocation.house_number }), _jsx(ReadOnlyField, { label: "Postcode", value: selectedLocation.postal_code }), _jsx(ReadOnlyField, { label: "Plaats", value: selectedLocation.city }), _jsx(ReadOnlyField, { label: "Provincie", value: selectedLocation.province }), _jsx(ReadOnlyField, { label: "Land", value: selectedLocation.country })] })] })), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "flex items-center gap-2", children: ["Afhaallocatie / Tuin ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(SearchableSelect, { value: pickupLocationVal, placeholder: pickupLocations.length ? "Kies eigen locatie..." : "Geen eigen locaties bekend", clearLabel: "\u2014 Geen \u2014", allowClear: false, disabled: pickupLocations.length === 0, options: pickupLocations.map((l) => ({ value: l.id, label: l.name })), onChange: (v) => setVal("pickup_location", v) }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Locatie van waaruit de bestelling wordt geleverd of opgehaald." })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Vervoerder" }), _jsx(SearchableSelect, { value: carrierVal, placeholder: !customerVal
+                                                    }), onChange: (v) => setVal("delivery_location", v) })] }), selectedLocation && (_jsxs("div", { className: "rounded-md border bg-muted/30 p-3 space-y-2", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Adresgegevens" }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(ReadOnlyField, { label: "Straat", value: selectedLocation.street }), _jsx(ReadOnlyField, { label: "Huisnummer", value: selectedLocation.house_number }), _jsx(ReadOnlyField, { label: "Postcode", value: selectedLocation.postal_code }), _jsx(ReadOnlyField, { label: "Plaats", value: selectedLocation.city }), _jsx(ReadOnlyField, { label: "Provincie", value: selectedLocation.province }), _jsx(ReadOnlyField, { label: "Land", value: selectedLocation.country })] })] })), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "flex items-center gap-2", children: ["Afhaallocatie / Tuin ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(SearchableSelect, { value: pickupLocationVal, placeholder: pickupLocations.length ? "Kies eigen locatie..." : "Geen eigen locaties bekend", clearLabel: "\u2014 Geen \u2014", allowClear: false, disabled: pickupLocations.length === 0, options: pickupLocations.map((l) => ({ value: l.id, label: l.name + (l.is_default ? " ★" : "") })), onChange: (v) => setVal("pickup_location", v) }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Locatie van waaruit de bestelling wordt geleverd of opgehaald." })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Vervoerder" }), _jsx(SearchableSelect, { value: carrierVal, placeholder: !customerVal
                                                         ? "Selecteer eerst een klant"
                                                         : !deliveryLocationVal
                                                             ? "Selecteer eerst een locatie"
                                                             : "Kies vervoerder...", clearLabel: "\u2014 Geen \u2014", disabled: !deliveryLocationVal, options: carriers.map((c) => ({
                                                         value: c.id,
                                                         label: c.name + (c.is_default ? " (standaard)" : ""),
-                                                    })), onChange: (v) => setVal("carrier", v) }), selectedLocation?.carrier_id && carrierVal !== selectedLocation.carrier_id && (_jsx("div", { className: "text-xs text-muted-foreground", children: "Wijkt af van standaard vervoerder van deze locatie \u2014 geldt alleen voor deze bestelling." }))] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "flex items-center gap-2", children: [deliveryDateField?.label ?? "Verzenddatum", deliveryDateField?.required && _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Input, { type: "date", value: canPickDate ? (deliveryVal ?? "") : "", min: canPickDate ? earliestISO : undefined, disabled: !canPickDate, onChange: (e) => {
+                                                    })), onChange: (v) => setVal("carrier", v) }), selectedLocation?.carrier_id && carrierVal !== selectedLocation.carrier_id && (_jsx("div", { className: "text-xs text-muted-foreground", children: "Wijkt af van standaard vervoerder van deze locatie \u2014 geldt alleen voor deze bestelling." }))] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "flex items-center gap-2", children: ["Bezorgdatum", deliveryDateField?.required && _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Input, { type: "date", value: canPickDate ? (deliveryVal ?? "") : "", min: canPickDate ? earliestISO : undefined, disabled: !canPickDate, onChange: (e) => {
                                                         const v = e.target.value || null;
                                                         if (v && v < earliestISO) {
                                                             toast.error(`Eerst mogelijke leverdatum is ${earliestLabel}.`);
@@ -370,10 +638,39 @@ function ProposalEditor({ proposal, template, customers, products, plantTypes, s
                                                             return;
                                                         }
                                                         setVal("delivery_date", v);
-                                                    } }), !canPickDate ? (_jsx("div", { className: "text-xs text-muted-foreground", children: "Selecteer eerst klant, afleverlocatie, afhaallocatie en vervoerder." })) : (_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Eerst beschikbare leverdatum is ", earliestLabel, ", op basis van orderpicktijd (", pickDays, "d) en levertijd vervoerder (", carrierDeliveryDays, "d)."] }))] }), otherFields.map(renderField)] }));
-                            })(), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Bestelregels" }), _jsxs("div", { className: "grid grid-cols-12 gap-2 text-xs text-muted-foreground px-1", children: [_jsx("div", { className: "col-span-5", children: "Product" }), _jsx("div", { className: "col-span-2", children: "Planten" }), _jsx("div", { className: "col-span-2", children: "Fusten" }), _jsx("div", { className: "col-span-2", children: "Eenheid" }), _jsx("div", { className: "col-span-1" })] }), lines.map((line, idx) => {
+                                                    } }), !canPickDate ? (_jsx("div", { className: "text-xs text-muted-foreground", children: "Selecteer eerst klant, afleverlocatie, afhaallocatie en vervoerder." })) : (_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Eerst beschikbare leverdatum is ", earliestLabel, earliest.signupAt
+                                                            ? `, o.b.v. het eerstvolgende aanmeldmoment bij de vervoerder (${earliest.signupAt.toLocaleString("nl-NL", { weekday: "long", day: "numeric", month: "long", hour: "2-digit", minute: "2-digit" })})`
+                                                            : `, op basis van orderpicktijd (${pickDays}d) en levertijd vervoerder (${carrierDeliveryDays}d)`, "."] }))] }), otherFields.map(renderField)] }));
+                            })(), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Bestelregels" }), _jsxs("div", { className: "grid grid-cols-12 gap-2 text-xs text-muted-foreground px-1", children: [_jsx("div", { className: "col-span-4", children: "Product" }), _jsx("div", { className: "col-span-3", children: "Belading" }), _jsx("div", { className: "col-span-4", children: "Fusten" }), _jsx("div", { className: "col-span-1" })] }), lines.map((line, idx) => {
                                         const product = line.product_id ? products.find((p) => p.id === line.product_id) : null;
-                                        const ppc = Math.max(1, Number(product?.plants_per_crate ?? 1));
+                                        const stdBelading = defaultBelading(product);
+                                        const available = (line.product_id ? (Array.isArray(beladingByProduct[line.product_id]) ? beladingByProduct[line.product_id] : []) : []).map((b) => ({
+                                            plants_per_crate: Math.max(1, Number(b.plants_per_crate ?? 1)),
+                                            crates_per_layer: Math.max(1, Number(b.crates_per_layer ?? 1)),
+                                            layers_per_cart: Math.max(1, Number(b.layers_per_cart ?? 1)),
+                                            crate_code: b.crate_code ?? null,
+                                            crate_name: b.crate_name ?? null,
+                                            carrier_code: b.carrier_code ?? null,
+                                            carrier_name: b.carrier_name ?? null,
+                                        })).filter((b) => beladingAllowedByEngine(b, loadCarrierOptions));
+                                        // Standaardbelading: gebruik de variant mét fust-/kartype als die bestaat.
+                                        const sameDims = (a, b) => a.plants_per_crate === b.plants_per_crate &&
+                                            a.crates_per_layer === b.crates_per_layer &&
+                                            a.layers_per_cart === b.layers_per_cart;
+                                        const richDefault = stdBelading ? available.find((b) => sameDims(b, stdBelading)) ?? null : null;
+                                        const effDefault = richDefault ?? stdBelading;
+                                        const optionMap = new Map();
+                                        for (const b of available)
+                                            optionMap.set(beladingKey(b), b);
+                                        if (effDefault)
+                                            optionMap.set(beladingKey(effDefault), effDefault);
+                                        const defaultKey = effDefault ? beladingKey(effDefault) : null;
+                                        // Geen belading in de mail → altijd de standaardbelading van het product.
+                                        const chosenBelading = line.belading ?? effDefault;
+                                        const effBelading = chosenBelading && !optionMap.has(beladingKey(chosenBelading))
+                                            ? (available.find((b) => sameDims(b, chosenBelading)) ?? chosenBelading)
+                                            : chosenBelading;
+                                        const ppc = Math.max(1, Number(effBelading?.plants_per_crate ?? product?.plants_per_crate ?? 1));
                                         const plants = line.quantity ?? null;
                                         const cratesExact = plants !== null ? plants / ppc : null;
                                         const cratesDisplay = cratesExact === null ? "" : String(Math.ceil(cratesExact));
@@ -382,46 +679,70 @@ function ProposalEditor({ proposal, template, customers, products, plantTypes, s
                                                 e.preventDefault();
                                             }
                                         };
-                                        return (_jsxs("div", { className: "grid grid-cols-12 gap-2 items-start", children: [_jsx("div", { className: "col-span-5", children: _jsx(SearchableSelect, { value: line.product_id, placeholder: "Kies product...", clearLabel: "\u2014 Handmatig \u2014", options: products.map((p) => ({
-                                                            value: p.id,
-                                                            label: p.product,
-                                                            hint: `${p.unit ?? ""}${p.available_stock != null ? ` · voorraad: ${p.available_stock}` : ""}`.trim(),
-                                                        })), onChange: (v) => {
-                                                            const next = [...lines];
-                                                            if (v === null)
-                                                                next[idx] = { ...next[idx], product_id: null };
-                                                            else {
-                                                                const p = products.find((x) => x.id === v);
-                                                                const newPpc = Math.max(1, Number(p?.plants_per_crate ?? 1));
-                                                                const currentQ = Number(next[idx].quantity ?? 0);
-                                                                const normalizedQ = currentQ > 0 ? Math.ceil(currentQ / newPpc) * newPpc : newPpc;
+                                        return (_jsxs("div", { className: "grid grid-cols-12 gap-2 items-start", children: [_jsxs("div", { className: "col-span-4", children: [_jsx(SearchableSelect, { value: line.product_id, placeholder: "Kies product...", clearLabel: "\u2014 Handmatig \u2014", options: products.map((p) => {
+                                                                const stock = Number(p.available_stock ?? 0);
+                                                                const out = stock <= 0;
+                                                                return {
+                                                                    value: p.id,
+                                                                    label: p.product,
+                                                                    hint: `${p.unit ?? ""}${p.available_stock != null ? ` · voorraad: ${p.available_stock}` : ""}${out ? (allowBackorder ? " · niet op voorraad (doorverkoop toegestaan)" : " · niet op voorraad") : ""}`.trim(),
+                                                                    disabled: out && !allowBackorder && p.id !== line.product_id,
+                                                                };
+                                                            }), onChange: (v) => {
+                                                                const next = [...lines];
+                                                                if (v === null)
+                                                                    next[idx] = { ...next[idx], product_id: null, belading: null };
+                                                                else {
+                                                                    const p = products.find((x) => x.id === v);
+                                                                    const b = defaultBelading(p);
+                                                                    const newPpc = Math.max(1, Number(b?.plants_per_crate ?? 1));
+                                                                    const currentQ = Number(next[idx].quantity ?? 0);
+                                                                    const normalizedQ = currentQ > 0 ? Math.ceil(currentQ / newPpc) * newPpc : newPpc;
+                                                                    next[idx] = {
+                                                                        ...next[idx], product_id: v,
+                                                                        raw_product_text: p?.product ?? next[idx].raw_product_text,
+                                                                        unit: next[idx].unit ?? p?.unit ?? "stuks",
+                                                                        quantity: normalizedQ,
+                                                                        belading: b,
+                                                                    };
+                                                                }
+                                                                setLines(next);
+                                                            } }), (line.plant_type || line.raw_product_text) && (_jsx("div", { className: "mt-1 truncate text-[11px] text-muted-foreground", children: line.plant_type ? `Plantsoort: ${line.plant_type}` : `Uit mail: ${line.raw_product_text}` }))] }), _jsxs("div", { className: "col-span-3", children: [_jsx(SearchableSelect, { value: effBelading ? beladingKey(effBelading) : null, placeholder: !line.product_id ? "Kies eerst product"
+                                                                : loadingBeladingen ? "Beladingen laden..."
+                                                                    : "Kies belading...", disabled: !line.product_id, allowClear: false, emptyLabel: "Geen belading gekoppeld aan dit product", options: Array.from(optionMap.entries()).map(([key, b]) => ({
+                                                                value: key,
+                                                                label: beladingLabel(b),
+                                                                hint: (key === defaultKey ? "Standaard van product · " : "") +
+                                                                    beladingHint(b),
+                                                            })), onChange: (v) => {
+                                                                if (!v)
+                                                                    return;
+                                                                const b = optionMap.get(v);
+                                                                if (!b)
+                                                                    return;
+                                                                const next = [...lines];
+                                                                const crates = Math.max(1, Math.ceil(Number(next[idx].quantity ?? 0) / ppc));
                                                                 next[idx] = {
-                                                                    ...next[idx], product_id: v,
-                                                                    raw_product_text: p?.product ?? next[idx].raw_product_text,
-                                                                    unit: next[idx].unit ?? p?.unit ?? "stuks",
-                                                                    quantity: normalizedQ,
+                                                                    ...next[idx],
+                                                                    belading: b,
+                                                                    // Fusten behouden, planten herrekenen op de nieuwe belading.
+                                                                    quantity: crates * b.plants_per_crate,
                                                                 };
-                                                            }
-                                                            setLines(next);
-                                                        } }) }), _jsx(Input, { className: "col-span-2", type: "number", min: ppc, step: ppc, inputMode: "numeric", onKeyDown: blockDecimal, value: plants ?? "", onChange: (e) => {
-                                                        const next = [...lines];
-                                                        const raw = e.target.value.replace(/[.,]/g, "");
-                                                        const v = raw ? Number(raw) : null;
-                                                        const rounded = v === null ? null : Math.max(1, Math.ceil(v / ppc)) * ppc;
-                                                        next[idx] = { ...next[idx], quantity: rounded };
-                                                        setLines(next);
-                                                    }, placeholder: "Planten", title: `Verkoop per hele fust van ${ppc} planten` }), _jsx(Input, { className: "col-span-2", type: "number", min: 1, step: 1, inputMode: "numeric", onKeyDown: blockDecimal, value: cratesDisplay, onChange: (e) => {
+                                                                setLines(next);
+                                                            } }), effBelading && (_jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: [plants ?? 0, " planten", defaultKey && beladingKey(effBelading) !== defaultKey ? " · afwijkend van standaard" : ""] }))] }), _jsx(Input, { className: "col-span-4", type: "number", min: 1, step: 1, inputMode: "numeric", onKeyDown: blockDecimal, value: cratesDisplay, onChange: (e) => {
                                                         const next = [...lines];
                                                         const raw = e.target.value.replace(/[.,]/g, "");
                                                         const cr = raw ? Math.max(1, Math.floor(Number(raw))) : null;
                                                         next[idx] = { ...next[idx], quantity: cr === null ? null : cr * ppc };
                                                         setLines(next);
-                                                    }, placeholder: "Fusten", title: `${ppc} planten per fust — verkoop per hele fust` }), _jsx(Input, { className: "col-span-2", value: line.unit ?? "", onChange: (e) => {
-                                                        const next = [...lines];
-                                                        next[idx] = { ...next[idx], unit: e.target.value };
-                                                        setLines(next);
-                                                    }, placeholder: "Eenheid" }), _jsx(Button, { variant: "ghost", size: "icon", className: "col-span-1", onClick: () => setLines(lines.filter((_, i) => i !== idx)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, idx));
-                                    }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setLines([...lines, { product_id: null, raw_product_text: "", quantity: 1, unit: "stuks" }]), children: [_jsx(Plus, { className: "h-3 w-3 mr-1" }), " Regel toevoegen"] })] }), _jsxs("div", { className: "flex gap-2 pt-2", children: [_jsxs(Button, { className: "flex-1", onClick: handleApprove, children: [_jsx(Check, { className: "h-4 w-4 mr-1" }), " Goedkeuren"] }), _jsxs(Button, { variant: "destructive", onClick: () => onReject(notesVal || ""), children: [_jsx(X, { className: "h-4 w-4 mr-1" }), " Afwijzen"] })] })] })] })] }));
+                                                    }, placeholder: "Fusten", title: `${ppc} planten per fust — verkoop per hele fust` }), _jsx(Button, { variant: "ghost", size: "icon", className: "col-span-1", onClick: () => setLines(lines.filter((_, i) => i !== idx)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, idx));
+                                    }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setLines([...lines, { product_id: null, raw_product_text: "", quantity: 1, unit: "stuks", belading: null }]), children: [_jsx(Plus, { className: "h-3 w-3 mr-1" }), " Regel toevoegen"] })] }), _jsxs("div", { className: "flex gap-2 pt-2", children: [_jsxs(Button, { className: "flex-1", onClick: handleApprove, children: [_jsx(Check, { className: "h-4 w-4 mr-1" }), " Controleren & bevestigen"] }), _jsxs(Button, { variant: "destructive", onClick: () => onReject(notesVal || ""), children: [_jsx(X, { className: "h-4 w-4 mr-1" }), " Afwijzen"] })] }), _jsx(Dialog, { open: confirmOpen, onOpenChange: (o) => {
+                                    if (submitting)
+                                        return;
+                                    setConfirmOpen(o);
+                                    if (!o)
+                                        setCheckedOk(false);
+                                }, children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Bestelling bevestigen" }) }), _jsxs("div", { className: "space-y-3 text-sm", children: [_jsx("p", { className: "text-muted-foreground", children: "De bestelling wordt pas aangemaakt in Bestellingen nadat je hem hebt gecontroleerd en bevestigd." }), _jsxs("div", { className: "rounded-md border p-3 space-y-1", children: [_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Klant:" }), " ", customers.find((c) => c.id === customerVal)?.company_name ?? "-"] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Bezorgdatum:" }), " ", deliveryVal || "-"] }), _jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "Bestelregels:" }), " ", lines.filter((l) => l.product_id && (l.quantity ?? 0) > 0).length] })] }), _jsxs("label", { className: "flex items-start gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", className: "mt-1", checked: checkedOk, onChange: (e) => setCheckedOk(e.target.checked) }), _jsx("span", { children: "Ik heb deze bestelling gecontroleerd en de gegevens kloppen." })] })] }), _jsxs("div", { className: "flex gap-2 pt-2", children: [_jsxs(Button, { className: "flex-1", disabled: !checkedOk || submitting, onClick: handleConfirm, children: [_jsx(Check, { className: "h-4 w-4 mr-1" }), submitting ? "Bezig…" : "Bevestigen en bestelling aanmaken"] }), _jsx(Button, { variant: "outline", disabled: submitting, onClick: () => setConfirmOpen(false), children: "Annuleren" })] })] }) })] })] })] }));
 }
 function DynamicField({ field, value, meta, onChange, customers, products, plantTypes, suppliers, }) {
     const reviewClass = meta?.needs_review ? "border-yellow-500 ring-1 ring-yellow-500/40 rounded-md p-2" : "";