@flowselections/actie-mail-kwekers-erp-mathot 1.0.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AanbiedingsmailtjePage.d.ts","sourceRoot":"","sources":["../../src/components/AanbiedingsmailtjePage.tsx"],"names":[],"mappings":"AAqCA,wBAAgB,sBAAsB,gCA+drC"}

package/dist-lib/components/AanbiedingsmailtjePage.js

@@ -0,0 +1,239 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { useAuth, supabase, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Textarea, Badge, Separator, Skeleton, Switch, toast, } from "@flowselections/core";
+import { useServerFn } from "@tanstack/react-start";
+import { useNavigate } from "@tanstack/react-router";
+import { Mail, Send, Search, X, Package, Users, Percent, Tag, List, BarChart3 } from "lucide-react";
+import { createCampaign, sendCampaign } from "../lib/campaigns.functions";
+export function AanbiedingsmailtjePage() {
+    const { user } = useAuth();
+    const navigate = useNavigate();
+    const createFn = useServerFn(createCampaign);
+    const sendFn = useServerFn(sendCampaign);
+    const [products, setProducts] = useState([]);
+    const [customers, setCustomers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [busy, setBusy] = useState(false);
+    const [name, setName] = useState("Nieuwe aanbieding");
+    const [subject, setSubject] = useState("🌷 Speciale aanbieding voor u!");
+    const [fromName, setFromName] = useState("");
+    const [fromEmail, setFromEmail] = useState(user?.email ?? "");
+    const [intro, setIntro] = useState("Wij hebben een mooie aanbieding voor u geselecteerd.");
+    const [selProducts, setSelProducts] = useState([]);
+    const [selCustomers, setSelCustomers] = useState(new Set());
+    const [showCustomerClasses, setShowCustomerClasses] = useState(true);
+    const [productSearch, setProductSearch] = useState("");
+    const [customerSearch, setCustomerSearch] = useState("");
+    const [bulkPrice, setBulkPrice] = useState("");
+    const BULK_STICKER_PREF_KEY = "aanbiedingsmailtje:bulkStickerOn";
+    const [bulkStickerOn, setBulkStickerOn] = useState(() => {
+        if (typeof window === "undefined")
+            return true;
+        const v = window.localStorage.getItem(BULK_STICKER_PREF_KEY);
+        return v === null ? true : v === "true";
+    });
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            window.localStorage.setItem(BULK_STICKER_PREF_KEY, String(bulkStickerOn));
+        }
+    }, [bulkStickerOn]);
+    useEffect(() => {
+        if (!bulkStickerOn)
+            return;
+        const v = Number((bulkPrice || "").replace(",", "."));
+        if (!Number.isFinite(v) || v < 0)
+            return;
+        setSelProducts((prev) => prev.map((p) => (p.sticker_cost === v ? p : { ...p, sticker_cost: v })));
+    }, [bulkStickerOn, bulkPrice, selProducts.length]);
+    useEffect(() => {
+        (async () => {
+            setLoading(true);
+            const sb = supabase;
+            const [{ data: ps }, { data: cs }, { data: settings }] = await Promise.all([
+                sb.from("products").select("id, product, sale_price, quantity, image_url, barcode").order("product").limit(500),
+                sb.from("customers").select("id, company_name, email, customer_class, country").not("email", "is", null).order("company_name").limit(1000),
+                sb.from("offer_settings").select("from_name, from_email, default_subject, default_intro, default_sticker_cost, show_customer_classes").maybeSingle(),
+            ]);
+            setProducts((ps ?? []));
+            setCustomers((cs ?? []));
+            if (settings) {
+                if (settings.from_name)
+                    setFromName(settings.from_name);
+                if (settings.from_email)
+                    setFromEmail(settings.from_email);
+                if (settings.default_subject)
+                    setSubject(settings.default_subject);
+                if (settings.default_intro)
+                    setIntro(settings.default_intro);
+                if (settings.default_sticker_cost != null && Number(settings.default_sticker_cost) > 0) {
+                    setBulkPrice(String(settings.default_sticker_cost));
+                }
+                if (typeof settings.show_customer_classes === "boolean")
+                    setShowCustomerClasses(settings.show_customer_classes);
+            }
+            setLoading(false);
+        })();
+    }, []);
+    const addProduct = (p) => {
+        if (selProducts.find((sp) => sp.product_id === p.id))
+            return;
+        const price = Number(p.sale_price ?? 0);
+        setSelProducts((prev) => [...prev, {
+                product_id: p.id,
+                product_name: p.product,
+                description: "",
+                image_url: p.image_url,
+                normal_price: price,
+                discount_price: price,
+                available_stock: p.quantity ?? 0,
+                plants_per_crate: 10,
+                belading: "",
+                barcode: p.barcode ?? "",
+                crate_price: 0,
+                sticker_cost: null,
+                sticker_available: true,
+                tiers: [{ min_crates: 1, price_per_crate: price }],
+            }]);
+        setProductSearch("");
+    };
+    const removeProduct = (id) => setSelProducts((prev) => prev.filter((p) => p.product_id !== id));
+    const updateProd = (id, patch) => setSelProducts((prev) => prev.map((p) => (p.product_id === id ? { ...p, ...patch } : p)));
+    const applyDiscount = (pct) => {
+        setSelProducts((prev) => prev.map((p) => ({
+            ...p, discount_price: Number((p.normal_price * (1 - pct / 100)).toFixed(2)),
+        })));
+    };
+    const setAllStickerAvailable = (available) => {
+        setSelProducts((prev) => prev.map((p) => ({ ...p, sticker_available: available })));
+        toast.success(`Stickeropdruk ${available ? "ingeschakeld" : "uitgeschakeld"} voor ${selProducts.length} product(en)`);
+    };
+    const toggleCustomer = (id) => {
+        setSelCustomers((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    const filteredCustomers = customers.filter((c) => c.company_name?.toLowerCase().includes(customerSearch.toLowerCase()) ||
+        c.email?.toLowerCase().includes(customerSearch.toLowerCase()));
+    const allVisibleSelected = filteredCustomers.length > 0 && filteredCustomers.every((c) => selCustomers.has(c.id));
+    const toggleAllVisible = () => {
+        setSelCustomers((prev) => {
+            const next = new Set(prev);
+            if (allVisibleSelected)
+                filteredCustomers.forEach((c) => next.delete(c.id));
+            else
+                filteredCustomers.forEach((c) => next.add(c.id));
+            return next;
+        });
+    };
+    // Klantgroep counts
+    const classGroups = useMemo(() => {
+        const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
+        return letters.map((l) => ({
+            letter: l,
+            customers: customers.filter((c) => (c.customer_class ?? "").toUpperCase() === l),
+        }));
+    }, [customers]);
+    const toggleClass = (letter) => {
+        const group = classGroups.find((g) => g.letter === letter);
+        if (!group || group.customers.length === 0)
+            return;
+        const ids = group.customers.map((c) => c.id);
+        const allSelected = ids.every((id) => selCustomers.has(id));
+        setSelCustomers((prev) => {
+            const next = new Set(prev);
+            if (allSelected)
+                ids.forEach((id) => next.delete(id));
+            else
+                ids.forEach((id) => next.add(id));
+            return next;
+        });
+    };
+    const handleSave = async (andSend) => {
+        if (selProducts.length === 0) {
+            toast.error("Voeg minimaal één product toe");
+            return;
+        }
+        if (selCustomers.size === 0) {
+            toast.error("Selecteer minimaal één klant");
+            return;
+        }
+        if (!fromEmail) {
+            toast.error("Vul een afzender e-mailadres in");
+            return;
+        }
+        setBusy(true);
+        try {
+            const recipients = customers
+                .filter((c) => selCustomers.has(c.id) && c.email)
+                .map((c) => ({
+                customer_id: c.id,
+                recipient_name: c.company_name,
+                recipient_email: c.email,
+            }));
+            const res = await createFn({ data: {
+                    name, subject, from_name: fromName || (user?.email ?? "FlowSelections"),
+                    from_email: fromEmail, intro_message: intro,
+                    products: selProducts.map((p, i) => ({ ...p, sort_order: i })),
+                    recipients,
+                } });
+            if (andSend) {
+                await sendFn({ data: { campaignId: res.campaignId } });
+                toast.success(`Campagne verstuurd naar ${recipients.length} ontvangers`);
+            }
+            else {
+                toast.success("Campagne opgeslagen als concept");
+            }
+            navigate({ to: "/aanbiedingsmailtje/$campaignId", params: { campaignId: res.campaignId } });
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Fout bij opslaan");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const filteredProducts = products.filter((p) => Number(p.quantity ?? 0) > 0 && p.product.toLowerCase().includes(productSearch.toLowerCase()));
+    if (loading)
+        return _jsxs("div", { className: "p-6 space-y-4", children: [_jsx(Skeleton, { className: "h-32 w-full" }), _jsx(Skeleton, { className: "h-64 w-full" })] });
+    return (_jsxs("main", { className: "p-6 pb-28 space-y-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "h-6 w-6 text-primary" }), _jsx("h1", { className: "text-2xl font-bold", children: "Acties & Promoties" })] }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Maak promoties en verstuur naar klanten" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => navigate({ to: "/aanbiedingsmailtje/overzicht" }), children: [_jsx(List, { className: "h-4 w-4 mr-2" }), "Overzicht"] }), _jsxs(Button, { variant: "outline", onClick: () => navigate({ to: "/aanbiedingsmailtje/rapportage" }), children: [_jsx(BarChart3, { className: "h-4 w-4 mr-2" }), "Rapportage"] })] })] }), _jsxs("div", { className: "grid gap-6 xl:grid-cols-2", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "h-5 w-5" }), _jsx(CardTitle, { children: "Producten Selecteren" })] }), _jsx(CardDescription, { children: "Kies producten en stel actieprijzen in" })] }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { className: "pl-9", placeholder: "Zoek product...", value: productSearch, onChange: (e) => setProductSearch(e.target.value) })] }), productSearch && (_jsx("div", { className: "max-h-40 overflow-y-auto border rounded-md", children: filteredProducts.slice(0, 20).map((p) => (_jsxs("button", { onClick: () => addProduct(p), className: "w-full text-left px-3 py-2 hover:bg-muted text-sm", children: [p.product, " ", _jsxs("span", { className: "text-muted-foreground", children: ["\u20AC ", Number(p.sale_price ?? 0).toFixed(2), " \u00B7 voorraad ", p.quantity ?? 0] })] }, p.id))) })), _jsxs("div", { className: "text-sm font-medium", children: ["Geselecteerde producten (", selProducts.length, ")"] }), selProducts.length === 0 ? (_jsx("div", { className: "text-sm text-muted-foreground py-6", children: "Geen producten geselecteerd" })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Snelle korting:" }), [10, 15, 20, 25, 30].map((p) => (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => applyDiscount(p), children: [_jsx(Percent, { className: "h-3 w-3 mr-1" }), p, "%"] }, p)))] }), _jsxs("div", { className: "flex flex-wrap gap-2 items-center rounded-md border bg-muted/30 p-2", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Stickeropdruk \u2014 \u00E9\u00E9n prijs voor \u00E1lle producten: \u20AC" }), _jsx(Input, { type: "number", step: "0.01", placeholder: "0,00", className: "w-28 h-8", value: bulkPrice, onChange: (e) => setBulkPrice(e.target.value) }), _jsxs("div", { className: "flex items-center gap-2 ml-2", children: [_jsx(Switch, { id: "bulk-sticker-toggle", checked: bulkStickerOn, onCheckedChange: (checked) => {
+                                                                            setBulkStickerOn(checked);
+                                                                            if (!checked) {
+                                                                                setSelProducts((prev) => prev.map((p) => ({ ...p, sticker_cost: null })));
+                                                                            }
+                                                                            else {
+                                                                                const v = Number((bulkPrice || "").replace(",", "."));
+                                                                                if (Number.isFinite(v) && v >= 0) {
+                                                                                    setSelProducts((prev) => prev.map((p) => ({ ...p, sticker_cost: v })));
+                                                                                }
+                                                                            }
+                                                                        } }), _jsxs(Label, { htmlFor: "bulk-sticker-toggle", className: "text-xs cursor-pointer", children: ["Toepassen op alle (", selProducts.length, ") \u2014 ", bulkStickerOn ? "Aan" : "Uit"] })] })] }), _jsxs("div", { className: "flex flex-wrap gap-2 items-center rounded-md border bg-muted/30 p-2", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Stickeropdruk voor alle planten:" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => setAllStickerAvailable(true), children: "Aan voor allemaal" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => setAllStickerAvailable(false), children: "Uit voor allemaal" })] })] }), _jsx(Separator, {}), _jsx("div", { className: "space-y-3 max-h-[500px] overflow-y-auto pr-2", children: selProducts.map((p) => {
+                                                    const updateTier = (idx, patch) => {
+                                                        const tiers = [...p.tiers];
+                                                        tiers[idx] = { ...tiers[idx], ...patch };
+                                                        updateProd(p.product_id, { tiers });
+                                                    };
+                                                    const addTier = () => {
+                                                        const last = p.tiers[p.tiers.length - 1];
+                                                        const nextMin = last ? last.min_crates + 5 : 1;
+                                                        updateProd(p.product_id, { tiers: [...p.tiers, { min_crates: nextMin, price_per_crate: p.normal_price }] });
+                                                    };
+                                                    const removeTier = (idx) => {
+                                                        updateProd(p.product_id, { tiers: p.tiers.filter((_, i) => i !== idx) });
+                                                    };
+                                                    return (_jsxs("div", { className: "border rounded-md p-3 space-y-3 bg-muted/30", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium text-sm", children: p.product_name }), _jsxs("div", { className: "text-xs text-muted-foreground", children: ["Originele prijs: \u20AC ", p.normal_price.toFixed(2)] })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeProduct(p.product_id), children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "text-xs w-24 shrink-0", children: "Planten/fust:" }), _jsx(Input, { type: "number", value: p.plants_per_crate, onChange: (e) => updateProd(p.product_id, { plants_per_crate: Number(e.target.value) }) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "text-xs w-20 shrink-0", children: "Belading:" }), _jsx(Input, { placeholder: "AxBxC", value: p.belading, onChange: (e) => updateProd(p.product_id, { belading: e.target.value }) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "text-xs w-24 shrink-0", children: "Barcode:" }), _jsx(Input, { value: p.barcode, onChange: (e) => updateProd(p.product_id, { barcode: e.target.value }) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { className: "text-xs w-20 shrink-0", children: "Fustprijs: \u20AC" }), _jsx(Input, { type: "number", step: "0.01", value: p.crate_price, onChange: (e) => updateProd(p.product_id, { crate_price: Number(e.target.value) }) })] })] }), _jsxs("div", { className: "flex items-center gap-2 border-t pt-2", children: [_jsx(Label, { className: "text-xs", children: "Stickeropdruk beschikbaar:" }), _jsx(Button, { type: "button", size: "sm", variant: p.sticker_available ? "default" : "outline", onClick: () => updateProd(p.product_id, { sticker_available: true }), children: "Ja" }), _jsx(Button, { type: "button", size: "sm", variant: !p.sticker_available ? "default" : "outline", onClick: () => updateProd(p.product_id, { sticker_available: false }), children: "Nee" })] }), _jsxs("div", { className: "space-y-2 border-t pt-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { className: "text-xs font-medium", children: "Prijs aftuin ex. Fust vanaf .." }), _jsx(Button, { variant: "outline", size: "sm", onClick: addTier, children: "+ Staffel" })] }), p.tiers.map((t, idx) => {
+                                                                        const pct = p.normal_price > 0 ? Math.round((1 - t.price_per_crate / p.normal_price) * 100) : 0;
+                                                                        return (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Vanaf" }), _jsx(Input, { type: "number", className: "w-20", value: t.min_crates, onChange: (e) => updateTier(idx, { min_crates: Number(e.target.value) }) }), _jsx("span", { className: "text-xs text-muted-foreground", children: "fust(en): \u20AC" }), _jsx(Input, { type: "number", step: "0.01", className: "w-24", value: t.price_per_crate, onChange: (e) => updateTier(idx, { price_per_crate: Number(e.target.value) }) }), _jsxs("span", { className: `text-xs font-medium ${pct > 0 ? "text-destructive" : "text-muted-foreground"}`, children: ["(", pct, "%)"] }), p.tiers.length > 1 && (_jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7", onClick: () => removeTier(idx), children: _jsx(X, { className: "h-3 w-3" }) }))] }, idx));
+                                                                    })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2 border-t pt-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: "Actieprijs \u20AC" }), _jsx(Input, { type: "number", step: "0.01", value: p.discount_price, onChange: (e) => updateProd(p.product_id, { discount_price: Number(e.target.value) }) })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-xs", children: "Voorraad" }), _jsx(Input, { type: "number", value: p.available_stock, onChange: (e) => updateProd(p.product_id, { available_stock: Number(e.target.value) }) })] })] }), _jsx(Textarea, { placeholder: "Omschrijving (optioneel)", rows: 2, value: p.description, onChange: (e) => updateProd(p.product_id, { description: e.target.value }) })] }, p.product_id));
+                                                }) })] }))] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Users, { className: "h-5 w-5" }), _jsx(CardTitle, { children: "Klanten Selecteren" })] }), _jsx(CardDescription, { children: "Kies klanten om de actie naar te versturen" })] }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { className: "pl-9", placeholder: "Zoek klant...", value: customerSearch, onChange: (e) => setCustomerSearch(e.target.value) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: allVisibleSelected, onChange: toggleAllVisible }), "Selecteer alle klanten met email"] }), _jsxs(Badge, { variant: "secondary", children: [selCustomers.size, " geselecteerd"] })] }), showCustomerClasses && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Selecteer op klantgroep" }), _jsx("div", { className: "flex flex-wrap gap-2", children: classGroups.map((g) => {
+                                                    const allSel = g.customers.length > 0 && g.customers.every((c) => selCustomers.has(c.id));
+                                                    return (_jsxs(Button, { type: "button", variant: allSel ? "default" : "outline", size: "sm", onClick: () => toggleClass(g.letter), className: "gap-2", children: ["Klasse ", g.letter, _jsx(Badge, { variant: "secondary", className: "px-1.5 py-0 text-xs", children: g.customers.length })] }, g.letter));
+                                                }) })] })), _jsx(Separator, {}), _jsx("div", { className: "max-h-[500px] overflow-y-auto space-y-2 pr-1", children: filteredCustomers.slice(0, 500).map((c) => {
+                                            const checked = selCustomers.has(c.id);
+                                            return (_jsxs("button", { onClick: () => toggleCustomer(c.id), className: `w-full text-left p-3 rounded-md border hover:bg-muted text-sm flex items-center gap-3 ${checked ? "bg-primary/5 border-primary/40" : ""}`, children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium truncate", children: c.company_name }), _jsx("div", { className: "text-xs text-muted-foreground truncate", children: c.email })] }), c.customer_class && _jsx(Badge, { variant: "secondary", children: c.customer_class })] }, c.id));
+                                        }) })] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Mail, { className: "h-5 w-5" }), _jsx(CardTitle, { children: "Email Inhoud" })] }), _jsx(CardDescription, { children: "Pas het onderwerp en de boodschap aan" })] }), _jsxs(CardContent, { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Onderwerp" }), _jsx(Input, { value: subject, onChange: (e) => setSubject(e.target.value) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Bericht" }), _jsx(Textarea, { value: intro, onChange: (e) => setIntro(e.target.value), rows: 3 })] }), _jsxs("div", { className: "space-y-2 md:col-span-2 max-w-xs", children: [_jsx(Label, { children: "Kosten opdrukken eigen sticker (\u20AC per stuk)" }), _jsx(Input, { type: "number", step: "0.01", placeholder: "0,00", value: bulkPrice, onChange: (e) => setBulkPrice(e.target.value) })] }), _jsxs("div", { className: "space-y-2 md:col-span-2 hidden", children: [_jsx(Label, { children: "Naam (intern)" }), _jsx(Input, { value: name, onChange: (e) => setName(e.target.value) }), _jsx(Label, { children: "Afzendernaam" }), _jsx(Input, { value: fromName, onChange: (e) => setFromName(e.target.value) }), _jsx(Label, { children: "Afzender e-mail" }), _jsx(Input, { type: "email", value: fromEmail, onChange: (e) => setFromEmail(e.target.value) })] })] })] }), _jsx("div", { className: "fixed bottom-0 left-0 right-0 z-30 border-t bg-background/95 backdrop-blur px-6 py-3", children: _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { children: [_jsx("div", { className: "font-semibold", children: "Samenvatting" }), _jsxs("div", { className: "text-sm text-muted-foreground", children: [selProducts.length, " product(en) \u2022 ", selCustomers.size, " klant(en)"] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", disabled: busy, onClick: () => handleSave(false), children: "Opslaan als concept" }), _jsxs(Button, { disabled: busy || selProducts.length === 0 || selCustomers.size === 0, onClick: () => handleSave(true), children: [_jsx(Send, { className: "h-4 w-4 mr-2" }), busy ? "Bezig..." : "Actie Versturen"] })] })] }) })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActiePage.d.ts","sourceRoot":"","sources":["../../src/components/ActiePage.tsx"],"names":[],"mappings":"AAqCA,wBAAgB,SAAS,gCAqbxB"}

package/dist-lib/components/ActiePage.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useParams } from "@tanstack/react-router";
+import { useServerFn } from "@tanstack/react-start";
+import { Button, Input, Label, Textarea, Skeleton, toast } from "@flowselections/core";
+import { getOfferByLinkCode, trackOfferClick, placeOfferOrder } from "../lib/public-offer.functions";
+import { ShoppingCart, Check, User, Package, Truck, Minus, Plus, Send, Leaf } from "lucide-react";
+function addBusinessDays(start, days) {
+    const d = new Date(start);
+    let added = 0;
+    while (added < days) {
+        d.setDate(d.getDate() + 1);
+        const day = d.getDay();
+        if (day !== 0 && day !== 6)
+            added++;
+    }
+    return d;
+}
+function toDateInput(d) {
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+}
+function formatDateNL(iso) {
+    if (!iso)
+        return "";
+    try {
+        return new Date(iso).toLocaleDateString("nl-NL", {
+            weekday: "long", day: "numeric", month: "long", year: "numeric",
+        });
+    }
+    catch {
+        return iso;
+    }
+}
+const fmtEuro = (n) => `€ ${Number(n ?? 0).toLocaleString("nl-NL", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+export function ActiePage() {
+    const { linkCode } = useParams({ strict: false });
+    const getFn = useServerFn(getOfferByLinkCode);
+    const trackFn = useServerFn(trackOfferClick);
+    const orderFn = useServerFn(placeOfferOrder);
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [qty, setQty] = useState({});
+    const [sticker, setSticker] = useState({});
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [phone, setPhone] = useState("");
+    const [notes, setNotes] = useState("");
+    const [deliveryDate, setDeliveryDate] = useState(() => toDateInput(addBusinessDays(new Date(), 3)));
+    const [placed, setPlaced] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const minDate = useMemo(() => toDateInput(addBusinessDays(new Date(), 3)), []);
+    useEffect(() => {
+        let cancelled = false;
+        const load = async (initial) => {
+            try {
+                const result = await getFn({ data: { code: linkCode } });
+                if (cancelled)
+                    return;
+                setData(result);
+                if (result && initial) {
+                    setName(result.recipient.recipient_name);
+                    setEmail(result.recipient.recipient_email);
+                    trackFn({ data: { code: linkCode } }).catch(() => { });
+                }
+            }
+            finally {
+                if (initial && !cancelled)
+                    setLoading(false);
+            }
+        };
+        load(true);
+        const iv = setInterval(() => load(false), 15000);
+        return () => { cancelled = true; clearInterval(iv); };
+    }, [linkCode]);
+    if (loading) {
+        return (_jsx("div", { className: "min-h-screen bg-[#f0fdf4] p-6", children: _jsx("div", { className: "max-w-6xl mx-auto", children: _jsx(Skeleton, { className: "h-64" }) }) }));
+    }
+    if (!data) {
+        return (_jsx("div", { className: "min-h-screen bg-[#f0fdf4] flex items-center justify-center p-6", children: _jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold text-slate-900", children: "Aanbieding niet gevonden" }), _jsx("p", { className: "text-slate-600 mt-2", children: "Deze link is mogelijk verlopen." })] }) }));
+    }
+    const safeProducts = Array.isArray(data?.products) ? data.products : [];
+    const lineFor = (p) => {
+        const stockPlants = Math.max(0, Number(p.live_stock ?? p.available_stock ?? 0));
+        const ppc = Math.max(1, Math.floor(Number(p.plants_per_crate ?? 1) || 1));
+        const maxCrates = Math.floor(stockPlants / ppc);
+        const soldOut = maxCrates <= 0;
+        const crates = Math.max(0, Math.floor(qty[p.id] ?? 0));
+        const plants = crates * ppc;
+        const unit = Number(p.discount_price ?? 0);
+        const stickerCost = Number(p.sticker_cost ?? 0);
+        const stickerAvail = p.sticker_available !== false;
+        const stickerOn = stickerAvail && !!sticker[p.id];
+        const productSubtotal = plants * unit;
+        const stickerSubtotal = stickerOn ? plants * stickerCost : 0;
+        return { q: crates, plants, ppc, unit, stickerCost, stickerAvail, stickerOn, productSubtotal, stickerSubtotal, total: productSubtotal + stickerSubtotal, stock: stockPlants, maxCrates, soldOut };
+    };
+    const totalAmount = safeProducts.reduce((s, p) => s + lineFor(p).total, 0);
+    const hasItems = safeProducts.some((p) => (qty[p.id] ?? 0) > 0);
+    const setQ = (id, value, maxCrates) => setQty({ ...qty, [id]: Math.max(0, Math.min(maxCrates, Math.floor(Number.isFinite(value) ? value : 0))) });
+    const submit = async () => {
+        const items = safeProducts
+            .filter((p) => (qty[p.id] ?? 0) > 0)
+            .map((p) => {
+            const l = lineFor(p);
+            return {
+                product_id: p.id,
+                product_name: p.product_name,
+                quantity: l.q,
+                unit_price: l.unit,
+                sticker: l.stickerOn,
+                sticker_unit_price: l.stickerOn ? l.stickerCost : 0,
+            };
+        });
+        if (items.length === 0) {
+            toast.error("Voeg minimaal één product toe");
+            return;
+        }
+        if (!deliveryDate) {
+            toast.error("Kies een leverdatum");
+            return;
+        }
+        setBusy(true);
+        try {
+            const r = await orderFn({
+                data: {
+                    code: linkCode,
+                    customer_name: name,
+                    customer_email: email,
+                    customer_phone: phone,
+                    notes: `Gewenste leverdatum: ${formatDateNL(deliveryDate)}${notes ? `\n\n${notes}` : ""}`,
+                    items,
+                },
+            });
+            setPlaced({ id: r.orderId, total: r.total });
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Fout");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    if (placed) {
+        return (_jsx("div", { className: "min-h-screen bg-[#f0fdf4] flex items-center justify-center p-6", children: _jsxs("div", { className: "max-w-md w-full bg-white rounded-2xl shadow-lg border border-green-100 p-8 text-center", children: [_jsx("div", { className: "mx-auto rounded-full bg-green-100 p-3 w-fit", children: _jsx(Check, { className: "h-8 w-8 text-green-600" }) }), _jsx("h2", { className: "mt-4 text-2xl font-bold text-slate-900", children: "Bedankt voor uw bestelling!" }), _jsxs("p", { className: "mt-2 text-slate-600", children: ["Bestelling #", placed.id.slice(0, 8)] }), _jsxs("p", { className: "mt-1 text-lg font-semibold text-green-700", children: ["Totaal: ", fmtEuro(placed.total)] }), _jsx("p", { className: "mt-4 text-sm text-slate-500", children: "We nemen zo spoedig mogelijk contact met u op." })] }) }));
+    }
+    const fromName = data?.campaign?.from_name ?? "";
+    return (_jsxs("div", { className: "min-h-screen bg-[#f0fdf4] flex flex-col", children: [_jsx("header", { className: "bg-gradient-to-r from-green-600 to-green-700 text-white", children: _jsxs("div", { className: "max-w-6xl mx-auto px-6 py-10 text-center", children: [_jsxs("div", { className: "mx-auto mb-4 inline-flex items-center justify-center bg-white rounded-md px-4 py-2 shadow-sm", children: [_jsx(Leaf, { className: "h-5 w-5 text-green-700 mr-2" }), _jsx("span", { className: "font-bold text-slate-900 tracking-tight", children: "Flow Selections" })] }), _jsxs("h1", { className: "text-3xl md:text-4xl font-extrabold tracking-tight", children: ["\uD83C\uDF31 ", data?.campaign?.subject ?? "Speciale Aanbieding"] }), data?.campaign?.intro_message ? (_jsx("p", { className: "mt-3 text-green-50 whitespace-pre-line max-w-2xl mx-auto", children: data.campaign.intro_message })) : (_jsx("p", { className: "mt-3 text-green-50", children: "Wij hebben een mooie aanbieding voor u!" }))] }) }), _jsxs("main", { className: "flex-1 max-w-6xl w-full mx-auto px-4 md:px-6 py-8 space-y-6", children: [_jsxs("div", { className: "bg-green-50 border border-green-200 rounded-xl p-5 flex items-center gap-4", children: [_jsx("div", { className: "rounded-full bg-green-600 p-3 text-white shrink-0", children: _jsx(User, { className: "h-5 w-5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "font-bold text-slate-900", children: ["Welkom, ", data?.recipient?.recipient_name, "!"] }), _jsx("div", { className: "text-green-700 text-sm truncate", children: data?.recipient?.recipient_email })] })] }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]", children: [_jsxs("section", { children: [_jsxs("h2", { className: "flex items-center gap-2 text-xl font-bold text-slate-900 mb-4", children: [_jsx(Package, { className: "h-5 w-5 text-green-700" }), "Selecteer uw producten"] }), safeProducts.some((p) => p.sticker_available !== false) && (_jsxs("div", { className: "mb-4 flex items-center justify-between gap-3 bg-blue-50 border border-blue-200 rounded-xl px-4 py-3", children: [_jsxs("div", { className: "text-sm text-blue-900", children: [_jsx("strong", { children: "Stickeropdruk voor alle planten" }), _jsx("div", { className: "text-xs text-blue-700", children: "Schakel met \u00E9\u00E9n klik in/uit voor alle producten waar het beschikbaar is." })] }), _jsxs("div", { className: "flex gap-2 shrink-0", children: [_jsx("button", { type: "button", onClick: () => {
+                                                            const next = { ...sticker };
+                                                            safeProducts.forEach((p) => { if (p.sticker_available !== false)
+                                                                next[p.id] = true; });
+                                                            setSticker(next);
+                                                        }, className: "text-xs font-semibold bg-blue-600 text-white rounded px-3 py-1.5 hover:bg-blue-700", children: "Alles aan" }), _jsx("button", { type: "button", onClick: () => {
+                                                            const next = { ...sticker };
+                                                            safeProducts.forEach((p) => { next[p.id] = false; });
+                                                            setSticker(next);
+                                                        }, className: "text-xs font-semibold bg-white text-blue-700 border border-blue-300 rounded px-3 py-1.5 hover:bg-blue-50", children: "Alles uit" })] })] })), _jsx("div", { className: "space-y-4", children: safeProducts.map((p) => {
+                                            const normal = Number(p.normal_price ?? 0);
+                                            const price = Number(p.discount_price ?? 0);
+                                            const showStrike = normal > price;
+                                            const l = lineFor(p);
+                                            const currentQty = l.q;
+                                            return (_jsxs("div", { className: `bg-white rounded-xl border shadow-sm overflow-hidden ${l.soldOut ? "border-slate-200 opacity-75" : "border-slate-200"}`, children: [_jsxs("div", { className: "p-4 flex gap-4", children: [_jsxs("div", { className: "shrink-0 relative", children: [p.image_url ? (_jsx("img", { src: p.image_url, alt: p.product_name, className: `w-24 h-24 rounded-lg object-cover border border-slate-200 bg-slate-50 ${l.soldOut ? "grayscale" : ""}` })) : (_jsx("div", { className: `w-24 h-24 rounded-lg border border-slate-200 bg-green-50 grid place-items-center overflow-hidden ${l.soldOut ? "grayscale" : ""}`, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 96 96", className: "w-full h-full", children: [_jsx("path", { d: "M48 60 Q46 75 44 86", stroke: "#16a34a", strokeWidth: "2.5", fill: "none", strokeLinecap: "round" }), _jsx("path", { d: "M48 72 Q40 70 36 64 Q42 66 48 72", fill: "#22c55e" }), _jsx("path", { d: "M48 78 Q56 76 60 70 Q54 72 48 78", fill: "#22c55e" }), _jsxs("g", { transform: "translate(48 40)", children: [_jsx("ellipse", { cx: "0", cy: "-14", rx: "9", ry: "14", fill: "#f9a8d4" }), _jsx("ellipse", { cx: "13.3", cy: "-4.3", rx: "9", ry: "14", fill: "#f472b6", transform: "rotate(72)" }), _jsx("ellipse", { cx: "8.2", cy: "11.3", rx: "9", ry: "14", fill: "#ec4899", transform: "rotate(144)" }), _jsx("ellipse", { cx: "-8.2", cy: "11.3", rx: "9", ry: "14", fill: "#f472b6", transform: "rotate(216)" }), _jsx("ellipse", { cx: "-13.3", cy: "-4.3", rx: "9", ry: "14", fill: "#f9a8d4", transform: "rotate(288)" }), _jsx("circle", { cx: "0", cy: "0", r: "6", fill: "#fbbf24" }), _jsx("circle", { cx: "0", cy: "0", r: "3", fill: "#f59e0b" })] })] }) })), l.soldOut && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "bg-red-600 text-white text-xs font-bold px-2 py-1 rounded rotate-[-8deg] shadow", children: "UITVERKOCHT" }) }))] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-bold text-slate-900 truncate", children: p.product_name }), p.plants_per_crate ? (_jsxs("div", { className: "text-sm text-slate-500", children: [p.plants_per_crate, " planten/fust"] })) : null, _jsxs("div", { className: "mt-2 flex items-baseline gap-2 flex-wrap", children: [showStrike && (_jsx("span", { className: "text-slate-400 line-through text-sm", children: fmtEuro(normal) })), _jsx("span", { className: "text-green-700 font-bold text-lg", children: fmtEuro(price) })] }), _jsx("div", { className: "mt-2", children: l.soldOut ? (_jsx("span", { className: "inline-flex items-center gap-1 text-xs font-semibold bg-red-100 text-red-800 border border-red-200 rounded px-2 py-1", children: "\u25CF Uitverkocht" })) : l.stock <= 10 ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-semibold bg-amber-100 text-amber-800 border border-amber-200 rounded px-2 py-1", children: ["\u25CF Nog ", l.stock, " op voorraad"] })) : (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-semibold bg-green-100 text-green-800 border border-green-200 rounded px-2 py-1", children: ["\u25CF Op voorraad: ", l.stock, " stuks"] })) }), !l.soldOut && l.stickerAvail && (_jsxs("label", { className: "mt-2 flex items-start gap-2 text-xs text-blue-900 bg-blue-50 border-l-4 border-blue-400 rounded px-2 py-2 cursor-pointer select-none", children: [_jsx("input", { type: "checkbox", className: "mt-0.5", checked: l.stickerOn, onChange: (e) => setSticker({ ...sticker, [p.id]: e.target.checked }) }), _jsxs("span", { children: ["Stickeropdruk toevoegen", l.stickerCost > 0 ? _jsxs(_Fragment, { children: [" \u2014 ", _jsx("strong", { children: fmtEuro(l.stickerCost) }), " per stuk"] }) : _jsxs(_Fragment, { children: [" \u2014 ", _jsx("strong", { children: "geen meerprijs" })] })] })] })), !l.soldOut && !l.stickerAvail && (_jsx("div", { className: "mt-2 text-xs text-slate-500 bg-slate-50 border-l-4 border-slate-300 rounded px-2 py-2", children: "Stickeropdruk niet beschikbaar voor dit product" })), !l.soldOut && currentQty > 0 && (_jsxs("div", { className: "mt-3 text-xs text-slate-600 space-y-0.5 border-t border-slate-100 pt-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsxs("span", { children: ["Productprijs (", l.plants, " \u00D7 ", fmtEuro(l.unit), ")"] }), _jsx("span", { children: fmtEuro(l.productSubtotal) })] }), l.stickerOn && (_jsxs("div", { className: "flex justify-between", children: [_jsxs("span", { children: ["Stickeropdruk (", l.plants, " \u00D7 ", fmtEuro(l.stickerCost), ")"] }), _jsx("span", { children: fmtEuro(l.stickerSubtotal) })] })), _jsxs("div", { className: "flex justify-between font-bold text-slate-900 pt-0.5", children: [_jsx("span", { children: "Totaalprijs" }), _jsx("span", { className: "text-green-700", children: fmtEuro(l.total) })] })] }))] })] }), l.soldOut ? (_jsx("div", { className: "border-t border-slate-100 px-4 py-3 text-center text-sm text-red-700 bg-red-50 font-medium", children: "Dit product is niet meer beschikbaar" })) : (_jsxs("div", { className: "border-t border-slate-100 px-4 py-3 flex flex-wrap items-center justify-between gap-2", children: [_jsxs("span", { className: "text-sm text-slate-600", children: ["Aantal fusten:", currentQty > 0 && (_jsxs("span", { className: "ml-1 text-slate-500", children: ["= ", l.plants.toLocaleString("nl-NL"), " planten"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: () => setQ(p.id, currentQty - 1, l.maxCrates), className: "h-9 w-9 rounded-md border border-slate-200 grid place-items-center text-slate-600 hover:bg-slate-50 disabled:opacity-40", disabled: currentQty <= 0, "aria-label": "Minder", children: _jsx(Minus, { className: "h-4 w-4" }) }), _jsx(Input, { type: "number", inputMode: "numeric", step: 1, min: 0, max: l.maxCrates, value: currentQty, onChange: (e) => setQ(p.id, parseInt(e.target.value, 10), l.maxCrates), onKeyDown: (e) => {
+                                                                            if (["e", "E", "+", "-", ".", ","].includes(e.key))
+                                                                                e.preventDefault();
+                                                                        }, className: "w-28 text-center" }), _jsx("button", { type: "button", onClick: () => setQ(p.id, currentQty + 1, l.maxCrates), className: "h-9 w-9 rounded-md border border-slate-200 grid place-items-center text-slate-600 hover:bg-slate-50 disabled:opacity-40", disabled: currentQty >= l.maxCrates, "aria-label": "Meer", children: _jsx(Plus, { className: "h-4 w-4" }) })] })] }))] }, p.id));
+                                        }) })] }), _jsx("aside", { className: "lg:sticky lg:top-6 self-start", children: _jsxs("div", { className: "bg-white rounded-xl border border-slate-200 shadow-sm p-5 space-y-5", children: [_jsxs("h3", { className: "flex items-center gap-2 text-lg font-bold text-slate-900", children: [_jsx(ShoppingCart, { className: "h-5 w-5 text-green-700" }), "Uw bestelling"] }), hasItems ? (_jsxs("div", { className: "space-y-2 text-sm", children: [safeProducts.filter((p) => (qty[p.id] ?? 0) > 0).map((p) => {
+                                                    const l = lineFor(p);
+                                                    return (_jsxs("div", { className: "space-y-0.5", children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsxs("span", { className: "text-slate-700 truncate", children: [p.product_name, " \u00D7 ", l.q, " fust", l.q === 1 ? "" : "en", " (", l.plants.toLocaleString("nl-NL"), " planten)"] }), _jsx("span", { className: "font-medium text-slate-900 shrink-0", children: fmtEuro(l.productSubtotal) })] }), l.stickerOn && (_jsxs("div", { className: "flex justify-between gap-2 text-xs text-blue-800", children: [_jsxs("span", { className: "truncate", children: ["\u21B3 Stickeropdruk \u00D7 ", l.plants.toLocaleString("nl-NL")] }), _jsx("span", { className: "shrink-0", children: fmtEuro(l.stickerSubtotal) })] }))] }, p.id));
+                                                }), _jsxs("div", { className: "border-t border-slate-200 pt-2 flex justify-between font-bold text-slate-900", children: [_jsx("span", { children: "Totaal" }), _jsx("span", { className: "text-green-700", children: fmtEuro(totalAmount) })] })] })) : (_jsx("p", { className: "text-sm text-slate-500 text-center py-2", children: "Selecteer producten om te bestellen" })), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "flex items-center gap-2 text-slate-800", children: [_jsx(Truck, { className: "h-4 w-4 text-green-700" }), "Gewenste leverdatum"] }), _jsx(Input, { type: "date", min: minDate, value: deliveryDate, onChange: (e) => setDeliveryDate(e.target.value) }), _jsx("p", { className: "text-xs text-slate-500", children: "Minimaal 3 werkdagen van tevoren" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-slate-800", children: "Opmerkingen (optioneel)" }), _jsx(Textarea, { placeholder: "Speciale wensen of vragen...", value: notes, onChange: (e) => setNotes(e.target.value), rows: 3 })] }), _jsxs(Button, { onClick: submit, disabled: busy || !hasItems || !name || !email, className: "w-full bg-green-600 hover:bg-green-700 text-white", size: "lg", children: [_jsx(Send, { className: "h-4 w-4 mr-2" }), busy ? "Bezig..." : "Bestelling plaatsen"] })] }) })] })] }), _jsxs("footer", { className: "bg-slate-900 text-slate-300 text-center py-5 text-sm", children: ["\u00A9 ", new Date().getFullYear(), " ", fromName || "Flow Selections"] })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CampagneDetail.d.ts","sourceRoot":"","sources":["../../src/components/CampagneDetail.tsx"],"names":[],"mappings":"AASA,wBAAgB,cAAc,gCA+G7B"}

package/dist-lib/components/CampagneDetail.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useParams } from "@tanstack/react-router";
+import { useServerFn } from "@tanstack/react-start";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, Badge, Button, Skeleton, toast } from "@flowselections/core";
+import { getCampaign, sendCampaign, deleteCampaign } from "../lib/campaigns.functions";
+import { getCampaignStats } from "../lib/stats.functions";
+import { Send, Trash2, Mail, MousePointerClick, ShoppingCart, Eye, ArrowLeft } from "lucide-react";
+import { useNavigate, Link } from "@tanstack/react-router";
+export function CampagneDetail() {
+    const { campaignId } = useParams({ strict: false });
+    const navigate = useNavigate();
+    const getFn = useServerFn(getCampaign);
+    const statsFn = useServerFn(getCampaignStats);
+    const sendFn = useServerFn(sendCampaign);
+    const delFn = useServerFn(deleteCampaign);
+    const [data, setData] = useState(null);
+    const [stats, setStats] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const reload = async () => {
+        const [d, s] = await Promise.all([
+            getFn({ data: { id: campaignId } }),
+            statsFn({ data: { campaignId } }),
+        ]);
+        setData(d);
+        setStats(s);
+    };
+    useEffect(() => { reload(); }, [campaignId]);
+    if (!data?.campaign)
+        return _jsx("div", { className: "p-6", children: _jsx(Skeleton, { className: "h-64" }) });
+    const c = data.campaign;
+    const origin = typeof window !== "undefined" ? window.location.origin : "";
+    const handleSend = async () => {
+        setBusy(true);
+        try {
+            const r = await sendFn({ data: { campaignId } });
+            toast.success(`Verzonden naar ${r.sent} ontvangers`);
+            await reload();
+        }
+        catch (e) {
+            toast.error(e?.message ?? "Fout");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const handleDel = async () => {
+        if (!confirm("Campagne verwijderen?"))
+            return;
+        await delFn({ data: { id: campaignId } });
+        toast.success("Verwijderd");
+        navigate({ to: "/aanbiedingsmailtje/overzicht" });
+    };
+    return (_jsxs("main", { className: "p-6 space-y-6", children: [_jsx(Link, { to: "/aanbiedingsmailtje/overzicht", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "-ml-2", children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-1" }), "Terug"] }) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: c.name }), _jsx(CardDescription, { children: c.subject })] }), _jsx(Badge, { variant: c.status === "sent" ? "default" : "secondary", children: c.status })] }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Van: ", c.from_name, " <", c.from_email, ">"] }), c.intro_message && _jsx("p", { className: "text-sm", children: c.intro_message }), _jsxs("div", { className: "flex gap-2", children: [c.status !== "sent" && (_jsxs(Button, { onClick: handleSend, disabled: busy, children: [_jsx(Send, { className: "h-4 w-4 mr-1" }), "Versturen"] })), _jsxs(Button, { variant: "destructive", onClick: handleDel, children: [_jsx(Trash2, { className: "h-4 w-4 mr-1" }), "Verwijderen"] })] })] })] }), stats && (_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-3", children: [_jsx(StatCard, { icon: _jsx(Mail, {}), label: "Verzonden", value: stats.sent }), _jsx(StatCard, { icon: _jsx(Eye, {}), label: "Geopend", value: stats.opened }), _jsx(StatCard, { icon: _jsx(MousePointerClick, {}), label: "Klikken", value: stats.clicked }), _jsx(StatCard, { icon: _jsx(ShoppingCart, {}), label: "Bestellingen", value: stats.ordered }), _jsx(StatCard, { icon: _jsx("span", { children: "\u20AC" }), label: "Omzet", value: `€ ${Number(stats.revenue).toFixed(2)}` })] })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { children: ["Producten (", data.products.length, ")"] }) }), _jsx(CardContent, { className: "space-y-2", children: data.products.map((p) => (_jsxs("div", { className: "flex justify-between border-b py-2 text-sm", children: [_jsx("span", { children: p.product_name }), _jsxs("span", { children: [_jsxs("span", { className: "line-through text-muted-foreground mr-2", children: ["\u20AC ", Number(p.normal_price).toFixed(2)] }), _jsxs("span", { className: "font-semibold", children: ["\u20AC ", Number(p.discount_price).toFixed(2)] })] })] }, p.id))) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { children: ["Ontvangers (", data.recipients.length, ")"] }), _jsx(CardDescription, { children: "Klik op een rij om de unieke actie-URL te kopi\u00EBren" })] }), _jsx(CardContent, { children: _jsx("div", { className: "max-h-[400px] overflow-y-auto divide-y text-sm", children: data.recipients.map((r) => {
+                                const url = `${origin}/actie/${r.link_code}`;
+                                return (_jsxs("button", { onClick: () => { navigator.clipboard.writeText(url); toast.success("Link gekopieerd"); }, className: "w-full text-left py-2 hover:bg-muted/50 grid grid-cols-12 gap-2 items-center", children: [_jsx("div", { className: "col-span-4 font-medium truncate", children: r.recipient_name }), _jsx("div", { className: "col-span-4 text-muted-foreground truncate", children: r.recipient_email }), _jsxs("div", { className: "col-span-4 flex gap-1 justify-end", children: [r.sent_at && _jsx(Badge, { variant: "outline", children: "verzonden" }), r.opened_at && _jsx(Badge, { variant: "secondary", children: "geopend" }), r.clicked_at && _jsx(Badge, { children: "geklikt" }), r.ordered_at && _jsx(Badge, { variant: "default", children: "besteld" })] })] }, r.id));
+                            }) }) })] })] }));
+}
+function StatCard({ icon, label, value }) {
+    return (_jsx(Card, { children: _jsxs(CardContent, { className: "p-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs mb-1", children: [icon, _jsx("span", { children: label })] }), _jsx("div", { className: "text-2xl font-bold", children: value })] }) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CampagneOverzicht.d.ts","sourceRoot":"","sources":["../../src/components/CampagneOverzicht.tsx"],"names":[],"mappings":"AAOA,wBAAgB,iBAAiB,gCAuChC"}

package/dist-lib/components/CampagneOverzicht.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle, Badge, Button, Skeleton } from "@flowselections/core";
+import { Link } from "@tanstack/react-router";
+import { useServerFn } from "@tanstack/react-start";
+import { listCampaigns } from "../lib/campaigns.functions";
+import { Plus, ArrowLeft } from "lucide-react";
+export function CampagneOverzicht() {
+    const fn = useServerFn(listCampaigns);
+    const [data, setData] = useState(null);
+    useEffect(() => { fn({}).then(setData); }, []);
+    if (!data)
+        return _jsx("div", { className: "p-6", children: _jsx(Skeleton, { className: "h-64" }) });
+    const campaigns = Array.isArray(data.campaigns) ? data.campaigns : [];
+    return (_jsxs("main", { className: "p-6 space-y-4", children: [_jsx(Link, { to: "/aanbiedingsmailtje", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "-ml-2", children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-1" }), "Terug"] }) }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("h2", { className: "text-xl font-semibold", children: "Alle campagnes" }), _jsx(Link, { to: "/aanbiedingsmailtje", children: _jsxs(Button, { children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), "Nieuwe campagne"] }) })] }), campaigns.length === 0 ? (_jsx(Card, { children: _jsx(CardContent, { className: "p-6 text-center text-muted-foreground", children: "Nog geen campagnes" }) })) : (_jsx("div", { className: "grid gap-3", children: campaigns.map((c) => (_jsx(Link, { to: "/aanbiedingsmailtje/$campaignId", params: { campaignId: c.id }, children: _jsxs(Card, { className: "hover:bg-muted/50 transition-colors", children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs("div", { className: "flex justify-between items-start", children: [_jsx(CardTitle, { className: "text-base", children: c.name }), _jsx(Badge, { variant: c.status === "sent" ? "default" : "secondary", children: c.status })] }) }), _jsxs(CardContent, { className: "pt-0 text-sm text-muted-foreground", children: [c.subject, " \u00B7 ", c.sent_at ? `verzonden ${new Date(c.sent_at).toLocaleString("nl-NL")}` : `aangemaakt ${new Date(c.created_at).toLocaleDateString("nl-NL")}`] })] }) }, c.id))) }))] }));
+}