@flowselections/mailbox-orders 1.0.1

package/dist-lib/_core-safelist.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=_core-safelist.d.ts.map

package/dist-lib/_core-safelist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_core-safelist.d.ts","sourceRoot":"","sources":["../src/_core-safelist.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,CAAC"}

package/dist-lib/_core-safelist.js

@@ -0,0 +1,15 @@
+// Forceert Tailwind classes die uit @flowselections/core komen maar niet
+// voorkomen in de eigen broncode van deze module.
+// Zonder dit bestand worden deze classes weggeoptimaliseerd op de
+// Lovable productie build.
+const _safelist = [
+    // Layout — Sidebar en shell structuur
+    'h-full', 'flex-col', 'flex-1', 'min-h-screen', 'ml-64', 'pt-16',
+    'items-start', 'items-center', 'justify-between', 'border-t',
+    'w-64', 'h-screen', 'h-20', 'overflow-y-auto',
+    // Grid — InstellingenPage
+    'grid', 'lg:grid-cols-2', 'gap-6', 'p-6', 'space-y-6',
+    // Toggle/Switch — aan/uit zichtbaarheid
+    'data-[state=checked]:bg-primary', 'data-[state=unchecked]:bg-input',
+];
+export {};

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":"AAmBA,wBAAgB,gBAAgB,gCAoH/B"}

package/dist-lib/components/MailboxInboxPage.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, RefreshCw, Sparkles } from "lucide-react";
+import { listMessages, pollMailbox, parseMessage } from "../lib/mailbox.functions";
+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 fetchPoll = useServerFn(pollMailbox);
+    const fetchParse = useServerFn(parseMessage);
+    const { data, isLoading } = useQuery({
+        queryKey: ["mailbox-messages"],
+        queryFn: () => fetchList(),
+    });
+    const pollMut = useMutation({
+        mutationFn: () => fetchPoll(),
+        onSuccess: (res) => {
+            if (res?.ok) {
+                const ins = res.inserted ?? 0;
+                const app = res.autoApproved ?? 0;
+                if (ins === 0)
+                    toast.success("Geen nieuwe e-mails");
+                else if (app > 0)
+                    toast.success(`${ins} nieuwe e-mail(s) — ${app} automatisch omgezet in bestelling`);
+                else
+                    toast.success(`${ins} nieuwe e-mail(s) opgehaald`);
+                qc.invalidateQueries({ queryKey: ["mailbox-messages"] });
+                qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+            }
+            else {
+                toast.error(res?.error ?? "Ophalen mislukt");
+            }
+        },
+        onError: (e) => toast.error(e?.message ?? "Ophalen mislukt"),
+    });
+    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 : [];
+    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 uit de mailbox" })] }), _jsxs(Button, { onClick: () => pollMut.mutate(), disabled: pollMut.isPending, children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${pollMut.isPending ? "animate-spin" : ""}` }), "Nu ophalen"] })] }), _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. Klik \"Nu ophalen\" om de mailbox te controleren." })) : (_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/MailboxProcessedPage.d.ts

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

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

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

package/dist-lib/components/MailboxProcessedPage.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Badge, Card, CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
+import { listProposals } from "../lib/mailbox.functions";
+export function MailboxProcessedPage() {
+    const fetchList = useServerFn(listProposals);
+    const approved = useQuery({
+        queryKey: ["mailbox-proposals", "approved"],
+        queryFn: () => fetchList({ data: { status: "approved" } }),
+    });
+    const rejected = useQuery({
+        queryKey: ["mailbox-proposals", "rejected"],
+        queryFn: () => fetchList({ data: { status: "rejected" } }),
+    });
+    const items = [
+        ...(Array.isArray(approved.data?.items) ? approved.data.items : []),
+        ...(Array.isArray(rejected.data?.items) ? rejected.data.items : []),
+    ].sort((a, b) => (b.reviewed_at ?? "").localeCompare(a.reviewed_at ?? ""));
+    return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Verwerkt" }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: items.length === 0 ? (_jsx("div", { className: "p-8 text-center text-muted-foreground", children: "Nog geen verwerkte voorstellen." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Afzender" }), _jsx(TableHead, { children: "Onderwerp" }), _jsx(TableHead, { children: "Verwerkt op" })] }) }), _jsx(TableBody, { children: items.map((p) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Badge, { variant: p.status === "approved" ? "default" : "destructive", children: p.status === "approved" ? "Goedgekeurd" : "Afgewezen" }) }), _jsx(TableCell, { children: p.mailbox_messages?.from_email ?? "-" }), _jsx(TableCell, { className: "max-w-md truncate", children: p.mailbox_messages?.subject ?? "-" }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: p.reviewed_at ? new Date(p.reviewed_at).toLocaleString("nl-NL") : "-" })] }, p.id))) })] })) }) })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MailboxProposalsPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxProposalsPage.tsx"],"names":[],"mappings":"AA+BA,wBAAgB,oBAAoB,gCAqKnC"}

package/dist-lib/components/MailboxProposalsPage.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useQuery, useQueryClient } 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 } from "lucide-react";
+import { listProposals, approveProposal, rejectProposal, listCustomersForPicker, listProductsForPicker, } from "../lib/mailbox.functions";
+import { listTemplateFields, listPlantTypesForPicker, listSuppliersForPicker, } from "../lib/mailbox-template.functions";
+import { SearchableSelect } from "./SearchableSelect";
+export function MailboxProposalsPage() {
+    const qc = useQueryClient();
+    const fetchList = useServerFn(listProposals);
+    const fetchTemplate = useServerFn(listTemplateFields);
+    const fetchApprove = useServerFn(approveProposal);
+    const fetchReject = useServerFn(rejectProposal);
+    const fetchCustomers = useServerFn(listCustomersForPicker);
+    const fetchProducts = useServerFn(listProductsForPicker);
+    const fetchPlantTypes = useServerFn(listPlantTypesForPicker);
+    const fetchSuppliers = useServerFn(listSuppliersForPicker);
+    const [status, setStatus] = useState("pending");
+    const { data, isLoading } = useQuery({
+        queryKey: ["mailbox-proposals", status],
+        queryFn: () => fetchList({ data: { status } }),
+    });
+    const { data: templateData } = useQuery({
+        queryKey: ["mailbox-template-fields"],
+        queryFn: () => fetchTemplate(),
+    });
+    const { data: customersData } = useQuery({ queryKey: ["mailbox-customers"], queryFn: () => fetchCustomers() });
+    const { data: productsData } = useQuery({ queryKey: ["mailbox-products"], queryFn: () => fetchProducts() });
+    const { data: plantData } = useQuery({ queryKey: ["mailbox-plant-types"], queryFn: () => fetchPlantTypes() });
+    const { data: supplierData } = useQuery({ queryKey: ["mailbox-suppliers"], queryFn: () => fetchSuppliers() });
+    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 : [];
+    const plantTypes = Array.isArray(plantData?.items) ? plantData.items : [];
+    const suppliers = Array.isArray(supplierData?.items) ? supplierData.items : [];
+    const [activeId, setActiveId] = useState(null);
+    const active = items.find((p) => p.id === activeId) ?? null;
+    const statusLabel = (s) => s === "approved" ? "Goedgekeurd" : s === "rejected" ? "Afgewezen" : "Nieuw";
+    const statusVariant = (s) => s === "approved" ? "default" : s === "rejected" ? "destructive" : "secondary";
+    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;
+        if (id) {
+            const c = customers.find((x) => x.id === id);
+            if (c?.company_name)
+                return c.company_name;
+        }
+        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: [_jsx("h1", { className: "text-2xl font-semibold", children: "Voorstellen" }), _jsxs(Select, { value: status, onValueChange: (v) => setStatus(v), children: [_jsx(SelectTrigger, { className: "w-48", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "pending", children: "Nieuw / In behandeling" }), _jsx(SelectItem, { value: "approved", children: "Goedgekeurd" }), _jsx(SelectItem, { value: "rejected", children: "Afgekeurd" })] })] })] }), isLoading ? (_jsx("div", { className: "text-muted-foreground", children: "Laden..." })) : items.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: "Geen voorstellen in deze categorie." })) : (_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] overflow-y-auto p-6", children: active && (_jsxs(_Fragment, { children: [_jsx(DialogHeader, { children: _jsxs(DialogTitle, { children: [orderNumberFor(active), " \u00B7 ", customerNameFor(active)] }) }), _jsx(ProposalEditor, { proposal: active, template: template, customers: customers, products: products, plantTypes: plantTypes, suppliers: suppliers, onApprove: async (payload) => {
+                                    try {
+                                        await fetchApprove({ data: payload });
+                                        toast.success("Bestelling aangemaakt");
+                                        qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                                        setActiveId(null);
+                                    }
+                                    catch (e) {
+                                        toast.error(e?.message ?? "Goedkeuren mislukt");
+                                    }
+                                }, onReject: async (reason) => {
+                                    try {
+                                        await fetchReject({ data: { proposalId: active.id, reason } });
+                                        toast.success("Voorstel afgewezen");
+                                        qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                                        setActiveId(null);
+                                    }
+                                    catch (e) {
+                                        toast.error(e?.message ?? "Afwijzen mislukt");
+                                    }
+                                } }, active.id)] })) }) })] }));
+}
+function ProposalEditor({ proposal, template, customers, products, plantTypes, suppliers, onApprove, onReject, }) {
+    const msg = proposal.mailbox_messages ?? {};
+    const fieldValues = Array.isArray(proposal.mailbox_proposal_field_values)
+        ? proposal.mailbox_proposal_field_values : [];
+    // Map field_key -> current row
+    const fvMap = useMemo(() => {
+        const m = {};
+        fieldValues.forEach((v) => { m[v.field_key] = v; });
+        return m;
+    }, [fieldValues]);
+    const visibleFields = template.filter((f) => f.visible);
+    const [values, setValues] = useState(() => {
+        const init = {};
+        visibleFields.forEach((f) => {
+            init[f.key] = fvMap[f.key]?.value ?? f.default_value ?? null;
+        });
+        return init;
+    });
+    const initialLines = Array.isArray(proposal.mailbox_proposal_lines)
+        ? proposal.mailbox_proposal_lines.map((l) => ({
+            id: l.id,
+            product_id: l.product_id,
+            raw_product_text: l.raw_product_text ?? "",
+            quantity: l.quantity,
+            unit: l.unit,
+        }))
+        : [];
+    const [lines, setLines] = useState(initialLines.length ? initialLines : [
+        { product_id: null, raw_product_text: "", quantity: 1, unit: "stuks" },
+    ]);
+    const customerVal = values["customer"];
+    const deliveryVal = values["delivery_date"];
+    const notesVal = values["notes"];
+    const setVal = (key, v) => setValues((prev) => ({ ...prev, [key]: v }));
+    const handleApprove = () => {
+        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;
+        }
+        const cust = customers.find((c) => c.id === customerVal);
+        onApprove({
+            proposalId: proposal.id,
+            customerId: customerVal ?? null,
+            customerName: cust?.company_name ?? msg.from_name ?? msg.from_email ?? "Onbekend",
+            deliveryDate: deliveryVal || new Date(Date.now() + 86400000).toISOString().slice(0, 10),
+            notes: notesVal || null,
+            lines: lines.filter((l) => l.raw_product_text.trim() !== ""),
+            fieldValues: Object.entries(values).map(([field_key, value]) => ({ field_key, value })),
+        });
+    };
+    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: [visibleFields.map((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))), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Bestelregels" }), lines.map((line, idx) => (_jsxs("div", { className: "grid grid-cols-12 gap-2 items-start", children: [_jsxs("div", { className: "col-span-6", 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 })), onChange: (v) => {
+                                                            const next = [...lines];
+                                                            if (v === null)
+                                                                next[idx] = { ...next[idx], product_id: null };
+                                                            else {
+                                                                const p = products.find((x) => x.id === v);
+                                                                next[idx] = {
+                                                                    ...next[idx], product_id: v,
+                                                                    raw_product_text: p?.product ?? next[idx].raw_product_text,
+                                                                    unit: next[idx].unit ?? p?.unit ?? "stuks",
+                                                                };
+                                                            }
+                                                            setLines(next);
+                                                        } }), _jsx(Input, { className: "mt-1", value: line.raw_product_text, onChange: (e) => {
+                                                            const next = [...lines];
+                                                            next[idx] = { ...next[idx], raw_product_text: e.target.value };
+                                                            setLines(next);
+                                                        }, placeholder: "Productomschrijving" })] }), _jsx(Input, { className: "col-span-2", type: "number", value: line.quantity ?? "", onChange: (e) => {
+                                                    const next = [...lines];
+                                                    next[idx] = { ...next[idx], quantity: e.target.value ? Number(e.target.value) : null };
+                                                    setLines(next);
+                                                }, placeholder: "Aantal" }), _jsx(Input, { className: "col-span-3", 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"] })] })] })] })] }));
+}
+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" : "";
+    const label = (_jsxs(Label, { className: "flex items-center gap-2", children: [field.label, field.required && _jsx("span", { className: "text-destructive", children: "*" }), meta?.needs_review && (_jsx(Badge, { variant: "outline", className: "text-xs border-yellow-500 text-yellow-700", children: "Controleren" })), typeof meta?.ai_confidence === "number" && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [Math.round(meta.ai_confidence * 100), "%"] }))] }));
+    const renderControl = () => {
+        switch (field.field_type) {
+            case "text":
+                return _jsx(Input, { value: value ?? "", onChange: (e) => onChange(e.target.value) });
+            case "number":
+                return _jsx(Input, { type: "number", value: value ?? "", onChange: (e) => onChange(e.target.value ? Number(e.target.value) : null) });
+            case "date":
+                return _jsx(Input, { type: "date", value: value ?? "", onChange: (e) => onChange(e.target.value || null) });
+            case "boolean":
+                return _jsx("div", { children: _jsx(Switch, { checked: !!value, onCheckedChange: onChange }) });
+            case "note":
+                return _jsx(Textarea, { rows: 2, value: value ?? "", onChange: (e) => onChange(e.target.value) });
+            case "select":
+                return (_jsxs(Select, { value: value ?? "__none", onValueChange: (v) => onChange(v === "__none" ? null : v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies..." }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__none", children: "\u2014" }), (field.options ?? []).map((o) => _jsx(SelectItem, { value: o.value, children: o.label }, o.value))] })] }));
+            case "multiselect": {
+                const arr = Array.isArray(value) ? value : [];
+                return (_jsx("div", { className: "flex flex-wrap gap-1", children: (field.options ?? []).map((o) => {
+                        const on = arr.includes(o.value);
+                        return (_jsx(Badge, { variant: on ? "default" : "outline", className: "cursor-pointer", onClick: () => onChange(on ? arr.filter((x) => x !== o.value) : [...arr, o.value]), children: o.label }, o.value));
+                    }) }));
+            }
+            case "customer":
+                return (_jsx(SearchableSelect, { value: value ?? null, placeholder: "Kies klant...", options: customers.map((c) => ({ value: c.id, label: c.company_name, hint: c.email })), onChange: onChange }));
+            case "product":
+                return (_jsx(SearchableSelect, { value: value ?? null, placeholder: "Kies product...", options: products.map((p) => ({ value: p.id, label: p.product })), onChange: onChange }));
+            case "plant_type":
+                return (_jsx(SearchableSelect, { value: value ?? null, placeholder: "Kies plantsoort...", options: plantTypes.map((p) => ({ value: p.id, label: p.name })), onChange: onChange }));
+            case "supplier":
+                return (_jsx(SearchableSelect, { value: value ?? null, placeholder: "Kies leverancier...", options: suppliers.map((s) => ({ value: s.id, label: s.name })), onChange: onChange }));
+            default:
+                return _jsx(Input, { value: value ?? "", onChange: (e) => onChange(e.target.value) });
+        }
+    };
+    return (_jsxs("div", { className: "space-y-1", children: [label, _jsx("div", { className: reviewClass, children: renderControl() })] }));
+}

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

@@ -0,0 +1,18 @@
+export interface SearchableOption {
+    value: string;
+    label: string;
+    hint?: string | null;
+}
+interface SearchableSelectProps {
+    value: string | null;
+    options: SearchableOption[];
+    placeholder?: string;
+    emptyLabel?: string;
+    allowClear?: boolean;
+    clearLabel?: string;
+    onChange: (value: string | null) => void;
+    className?: string;
+}
+export declare function SearchableSelect({ value, options, placeholder, emptyLabel, allowClear, clearLabel, onChange, className, }: SearchableSelectProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SearchableSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchableSelect.d.ts","sourceRoot":"","sources":["../../src/components/SearchableSelect.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EAAE,OAAO,EAAE,WAAuB,EAAE,UAA6B,EACtE,UAAiB,EAAE,UAAiC,EACpD,QAAQ,EAAE,SAAS,GACpB,EAAE,qBAAqB,+BAsFvB"}

package/dist-lib/components/SearchableSelect.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button, Input, Popover, PopoverContent, PopoverTrigger, } from "@flowselections/core";
+import { Check, ChevronsUpDown, Search } from "lucide-react";
+export function SearchableSelect({ value, options, placeholder = "Kies...", emptyLabel = "Geen resultaat", allowClear = true, clearLabel = "— Geen koppeling —", onChange, className, }) {
+    const [open, setOpen] = useState(false);
+    const [q, setQ] = useState("");
+    const selected = useMemo(() => options.find((o) => o.value === value) ?? null, [options, value]);
+    const filtered = useMemo(() => {
+        const needle = q.trim().toLowerCase();
+        if (!needle)
+            return options.slice(0, 200);
+        return options
+            .filter((o) => o.label.toLowerCase().includes(needle) ||
+            (o.hint ?? "").toLowerCase().includes(needle))
+            .slice(0, 200);
+    }, [options, q]);
+    return (_jsxs(Popover, { open: open, onOpenChange: (o) => { setOpen(o); if (!o)
+            setQ(""); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, className: `w-full justify-between font-normal ${className ?? ""}`, children: [_jsx("span", { className: `truncate ${selected ? "" : "text-muted-foreground"}`, children: selected?.label ?? placeholder }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", align: "start", children: [_jsx("div", { className: "p-2 border-b", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { autoFocus: true, value: q, onChange: (e) => setQ(e.target.value), placeholder: `Zoek in ${options.length} items...`, className: "pl-8 h-9" })] }) }), _jsxs("div", { className: "max-h-64 overflow-y-auto py-1", children: [allowClear && (_jsxs("button", { type: "button", className: "w-full text-left text-sm px-3 py-2 hover:bg-accent flex items-center gap-2", onClick: () => { onChange(null); setOpen(false); }, children: [value === null && _jsx(Check, { className: "h-3 w-3" }), _jsx("span", { className: "text-muted-foreground italic", children: clearLabel })] })), filtered.length === 0 ? (_jsx("div", { className: "px-3 py-6 text-sm text-muted-foreground text-center", children: emptyLabel })) : (filtered.map((o) => (_jsxs("button", { type: "button", className: "w-full text-left text-sm px-3 py-2 hover:bg-accent flex items-start gap-2", onClick: () => { onChange(o.value); setOpen(false); }, children: [_jsx(Check, { className: `h-3 w-3 mt-1 shrink-0 ${value === o.value ? "" : "invisible"}` }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "truncate", children: o.label }), o.hint && _jsx("div", { className: "text-xs text-muted-foreground truncate", children: o.hint })] })] }, o.value)))), filtered.length === 200 && (_jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground text-center border-t", children: "Toon eerste 200 resultaten \u2014 verfijn je zoekopdracht" }))] })] })] }));
+}

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"}

package/dist-lib/components/settings/ImapAccountsCard.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, Button, Input, Label, Switch, Badge, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, } from "@flowselections/core";
+import { Server, Plus, Pencil, Trash2, TestTube2, RefreshCw, CheckCircle2, PlayCircle } from "lucide-react";
+import { listImapAccounts, upsertImapAccount, deleteImapAccount, testImapAccount, listImapProfiles, activateImapAccount, pollImapProfile, } from "../../lib/imap.functions";
+const emptyAccount = {
+    id: undefined,
+    name: "",
+    email: "",
+    host: "",
+    port: 993,
+    username: "",
+    use_tls: true,
+    password: "",
+    is_active: true,
+};
+export function ImapAccountsCard() {
+    const [items, setItems] = useState([]);
+    const [activeAccountId, setActiveAccountId] = useState(null);
+    const [activeProfileId, setActiveProfileId] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [editing, setEditing] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [testingId, setTestingId] = useState(null);
+    const [pollingId, setPollingId] = useState(null);
+    const reload = async () => {
+        setLoading(true);
+        try {
+            const [accRes, profRes] = await Promise.all([listImapAccounts(), listImapProfiles()]);
+            setItems(Array.isArray(accRes?.items) ? accRes.items : []);
+            const profs = Array.isArray(profRes?.items) ? profRes.items : [];
+            const orders = profs.find((p) => p.profile_key === "mailbox_orders") ?? profs[0] ?? null;
+            setActiveAccountId(orders?.account_id ?? null);
+            setActiveProfileId(orders?.id ?? null);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => { reload(); }, []);
+    const handleSave = async () => {
+        if (!editing)
+            return;
+        setSaving(true);
+        try {
+            const saved = await upsertImapAccount({
+                data: {
+                    id: editing.id,
+                    name: editing.name,
+                    email: editing.email || null,
+                    host: editing.host,
+                    port: Number(editing.port),
+                    username: editing.username,
+                    use_tls: editing.use_tls,
+                    password: editing.password || undefined,
+                    is_active: editing.is_active,
+                },
+            });
+            toast.success("Account opgeslagen");
+            // Nieuw account direct als actief markeren als er nog geen is
+            if (!editing.id && saved?.id && !activeAccountId) {
+                await activateImapAccount({ data: { account_id: saved.id } });
+            }
+            setEditing(null);
+            reload();
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Opslaan mislukt");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const handleDelete = async (id) => {
+        if (!confirm("Account verwijderen?"))
+            return;
+        try {
+            await deleteImapAccount({ data: { id } });
+            toast.success("Verwijderd");
+            reload();
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Verwijderen mislukt");
+        }
+    };
+    const handleTest = async (id) => {
+        setTestingId(id);
+        try {
+            const res = await testImapAccount({ data: { id } });
+            if (res?.ok)
+                toast.success("Verbinding OK");
+            else
+                toast.error(res?.error ?? "Verbinding mislukt");
+            reload();
+        }
+        finally {
+            setTestingId(null);
+        }
+    };
+    const handleActivate = async (id) => {
+        try {
+            await activateImapAccount({ data: { account_id: id } });
+            toast.success("Account geactiveerd");
+            reload();
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Activeren mislukt");
+        }
+    };
+    const handlePoll = async () => {
+        if (!activeProfileId)
+            return;
+        setPollingId(activeProfileId);
+        try {
+            const res = await pollImapProfile({ data: { profile_id: activeProfileId } });
+            if (res?.ok)
+                toast.success(`${res.inserted ?? 0} nieuwe e-mail(s) opgehaald`);
+            else
+                toast.error(res?.error ?? "Ophalen mislukt");
+        }
+        finally {
+            setPollingId(null);
+        }
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Server, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "IMAP Account" })] }), _jsx(CardDescription, { children: "Beheer je e-mailaccounts en kies eenvoudig welke nu actief is voor de mailbox-bestellingen." })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: handlePoll, disabled: !activeProfileId || !!pollingId, children: [_jsx(PlayCircle, { className: `h-4 w-4 mr-2 ${pollingId ? "animate-pulse" : ""}` }), "Nu ophalen"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: reload, disabled: loading, children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}` }), "Vernieuwen"] }), _jsxs(Button, { size: "sm", onClick: () => setEditing({ ...emptyAccount }), children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), "Account toevoegen"] })] })] }), _jsx(CardContent, { children: loading ? (_jsx("div", { className: "text-sm text-muted-foreground", children: "Laden..." })) : items.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground", children: "Nog geen accounts. Klik op \"Account toevoegen\"." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-[80px]", children: "Actief" }), _jsx(TableHead, { children: "Naam" }), _jsx(TableHead, { children: "E-mail" }), _jsx(TableHead, { children: "Server" }), _jsx(TableHead, { children: "Laatste test" }), _jsx(TableHead, { className: "text-right", children: "Acties" })] }) }), _jsx(TableBody, { children: items.map((a) => {
+                                const isActive = a.id === activeAccountId;
+                                return (_jsxs(TableRow, { className: isActive ? "bg-primary/5" : "", children: [_jsx(TableCell, { children: isActive ? (_jsxs(Badge, { variant: "default", className: "gap-1", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), "Actief"] })) : (_jsx(Button, { variant: "outline", size: "sm", onClick: () => handleActivate(a.id), children: "Activeer" })) }), _jsx(TableCell, { className: "font-medium", children: a.name }), _jsx(TableCell, { className: "text-muted-foreground", children: a.email ?? a.username }), _jsxs(TableCell, { className: "text-muted-foreground", children: [a.host, ":", a.port, a.use_tls ? " · TLS" : ""] }), _jsx(TableCell, { children: a.last_tested_at ? (a.last_test_ok
+                                                ? _jsx(Badge, { variant: "default", children: "OK" })
+                                                : _jsx(Badge, { variant: "destructive", title: a.last_test_error ?? "", children: "Fout" })) : _jsx("span", { className: "text-xs text-muted-foreground", children: "\u2014" }) }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex gap-1 justify-end", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleTest(a.id), disabled: testingId === a.id, title: "Test verbinding", children: _jsx(TestTube2, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setEditing({
+                                                            id: a.id, name: a.name, email: a.email ?? "", host: a.host, port: a.port,
+                                                            username: a.username, use_tls: a.use_tls,
+                                                            password: "",
+                                                            is_active: a.is_active,
+                                                        }), title: "Bewerken", children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleDelete(a.id), title: "Verwijderen", children: _jsx(Trash2, { className: "h-4 w-4 text-destructive" }) })] }) })] }, a.id));
+                            }) })] })) }), _jsx(Dialog, { open: !!editing, onOpenChange: (o) => !o && setEditing(null), children: _jsxs(DialogContent, { className: "max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: editing?.id ? "Account bewerken" : "Nieuw account" }) }), editing && (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-1 col-span-2", children: [_jsx(Label, { children: "Naam" }), _jsx(Input, { value: editing.name, onChange: (e) => setEditing({ ...editing, name: e.target.value }), placeholder: "bv. Orders Mailbox" })] }), _jsxs("div", { className: "space-y-1 col-span-2", children: [_jsx(Label, { children: "E-mailadres" }), _jsx(Input, { type: "email", value: editing.email, onChange: (e) => setEditing({ ...editing, email: e.target.value }), placeholder: "bestellingen@example.com" })] }), _jsxs("div", { className: "space-y-1 col-span-2", children: [_jsx(Label, { children: "IMAP-server" }), _jsx(Input, { value: editing.host, onChange: (e) => setEditing({ ...editing, host: e.target.value }), placeholder: "imap.example.com" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Poort" }), _jsx(Input, { type: "number", value: editing.port, onChange: (e) => setEditing({ ...editing, port: Number(e.target.value) }) })] }), _jsxs("div", { className: "space-y-1 flex flex-col", children: [_jsx(Label, { children: "TLS / SSL" }), _jsx(Switch, { checked: editing.use_tls, onCheckedChange: (v) => setEditing({ ...editing, use_tls: v }) })] }), _jsxs("div", { className: "space-y-1 col-span-2", children: [_jsx(Label, { children: "Gebruikersnaam" }), _jsx(Input, { value: editing.username, onChange: (e) => setEditing({ ...editing, username: e.target.value }) })] }), _jsxs("div", { className: "space-y-1 col-span-2", children: [_jsx(Label, { children: "Wachtwoord" }), _jsx(Input, { type: "password", value: editing.password, onChange: (e) => setEditing({ ...editing, password: e.target.value }), placeholder: editing.id ? "Laat leeg om huidig wachtwoord te behouden" : "Voer wachtwoord in", autoComplete: "new-password" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Wachtwoord wordt versleuteld opgeslagen en alleen gebruikt voor de IMAP-verbinding." })] }), _jsxs("div", { className: "col-span-2 flex items-center justify-between", children: [_jsx(Label, { children: "Actief" }), _jsx(Switch, { checked: editing.is_active, onCheckedChange: (v) => setEditing({ ...editing, is_active: v }) })] })] })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setEditing(null), children: "Annuleren" }), _jsx(Button, { onClick: handleSave, disabled: saving, children: saving ? "Opslaan..." : "Opslaan" })] })] }) })] }));
+}

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

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

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

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