@flowselections/offertes-installatie-techniek 1.0.3 → 1.21.2

package/dist-lib/components/offertes/NieuweOfferteFormulier.js

@@ -0,0 +1,523 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useServerFn } from "@tanstack/react-start";
+import { ChevronsUpDown, Clock3, Loader2, Minus, Plus, Send, Sparkles, Trash2, UserPlus } from "lucide-react";
+import { supabase, toast, Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@flowselections/core";
+import { formatEuro } from "../../lib/offertes";
+import { genereerOfferteTeksten } from "../../lib/offerteAi.functions";
+import { berekenOfferteReistijd } from "../../lib/offerteReistijd.functions";
+import { adresLijktCompleet } from "../../lib/offerteAdres";
+import { OfferteA4 } from "./OfferteA4";
+import { a4NaarPdfBase64, haalOfferteVoorwaarden, verstuurOfferteEmail } from "../../lib/offerteMail";
+import { useHuisstijl } from "../../hooks/useHuisstijl";
+import { ArtikelKiezer, ArtikelFoto } from "./ArtikelKiezer";
+const db = supabase;
+const SOORTEN = ["Storing / reparatie", "Onderhoud", "Vervanging", "Nieuwe installatie", "Overig"];
+const VAKGEBIEDEN = ["Verwarming", "Sanitair", "Ventilatie", "Elektra", "Koeling", "Overig"];
+const LEGE_KLANT = {
+    name: "",
+    general_email: "",
+    general_phone: "",
+    billing_street: "",
+    billing_postcode: "",
+    billing_city: "",
+    kvk_number: "",
+    vat_number: "",
+};
+function adresVan(k) {
+    if (!k)
+        return "";
+    const pc = [k.billing_postcode, k.billing_city].filter(Boolean).join(" ");
+    return [k.billing_street, pc].filter(Boolean).join(", ");
+}
+function geldigEmail(e) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.trim());
+}
+function Sectie({ nr, titel, fout, children }) {
+    return (_jsxs("section", { className: `space-y-3 rounded-lg border p-4${fout ? " border-destructive" : ""}`, children: [_jsxs("h3", { className: `text-sm font-semibold${fout ? " text-destructive" : ""}`, children: [nr, ". ", titel] }), children] }));
+}
+function Veld({ label, verplicht, fout, children, }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { children: [label, verplicht ? " *" : ""] }), children, fout && _jsx("p", { className: "text-xs text-destructive", children: fout })] }));
+}
+export function NieuweOfferteFormulier({ open, onOpenChange: onOpenChangeProp, onCreated, inline, initial, bestaandeOfferteId, bronWerkbonNummer, meldingKort }) {
+    const onOpenChange = (o) => onOpenChangeProp?.(o);
+    const overslaanAutofill = useRef(false);
+    const genereer = useServerFn(genereerOfferteTeksten);
+    const berekenReistijd = useServerFn(berekenOfferteReistijd);
+    const [klanten, setKlanten] = useState([]);
+    const [pakketten, setPakketten] = useState([]);
+    const [klantId, setKlantId] = useState("");
+    const [klantOpen, setKlantOpen] = useState(false);
+    const [nieuweKlant, setNieuweKlant] = useState({ ...LEGE_KLANT });
+    const [klantFouten, setKlantFouten] = useState({});
+    const [klantSaving, setKlantSaving] = useState(false);
+    const [email, setEmail] = useState("");
+    const [werkadres, setWerkadres] = useState("");
+    const [kamer, setKamer] = useState("");
+    const [contactpersoon, setContactpersoon] = useState("");
+    const [contactTel, setContactTel] = useState("");
+    const [onderwerp, setOnderwerp] = useState("");
+    const [soort, setSoort] = useState("");
+    const [vakgebied, setVakgebied] = useState("");
+    const [toelichting, setToelichting] = useState("");
+    const [bijzTekst, setBijzTekst] = useState("");
+    const [gekozen, setGekozen] = useState([]);
+    const [materialen, setMaterialen] = useState([]);
+    const [automatischReisPakket, setAutomatischReisPakket] = useState(null);
+    const [reistijd, setReistijd] = useState(null);
+    const [reistijdBezig, setReistijdBezig] = useState(false);
+    const [reistijdPoging, setReistijdPoging] = useState(0);
+    const [pakketKeuze, setPakketKeuze] = useState("");
+    const [pakketOpen, setPakketOpen] = useState(false);
+    const [pakketZoek, setPakketZoek] = useState("");
+    const pakkettenGefilterd = useMemo(() => {
+        const q = pakketZoek.trim().toLowerCase();
+        if (!q)
+            return pakketten;
+        return pakketten.filter((p) => `${p.code ?? ""} ${p.name}`.toLowerCase().includes(q));
+    }, [pakketten, pakketZoek]);
+    const [btw, setBtw] = useState(21);
+    const [geldig, setGeldig] = useState(30);
+    const [klantTekst, setKlantTekst] = useState("");
+    const [monteurTekst, setMonteurTekst] = useState("");
+    const [voorwaarden, setVoorwaarden] = useState("");
+    const [aiBezig, setAiBezig] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [controleOpen, setControleOpen] = useState(false);
+    const [voorbeeld, setVoorbeeld] = useState(null);
+    const [mailAan, setMailAan] = useState("");
+    const [mailOnderwerp, setMailOnderwerp] = useState("");
+    const [mailBericht, setMailBericht] = useState("");
+    const [defNummer, setDefNummer] = useState(null);
+    const pdfRef = useRef(null);
+    const { huisstijl } = useHuisstijl();
+    useEffect(() => {
+        if (!open)
+            return;
+        (async () => {
+            const [k, p] = await Promise.all([
+                db.from("itk_customers")
+                    .select("id, name, general_email, general_phone, billing_street, billing_postcode, billing_city")
+                    .order("name")
+                    .limit(1000),
+                db.rpc("quote_list_packages"),
+            ]);
+            setKlanten(Array.isArray(k.data) ? k.data : []);
+            setPakketten((Array.isArray(p.data) ? p.data : []).filter((x) => x.active !== false));
+            haalOfferteVoorwaarden().then((v) => setVoorwaarden((huidig) => (huidig.trim() ? huidig : v))).catch(() => { });
+        })();
+    }, [open]);
+    useEffect(() => {
+        if (!initial)
+            return;
+        overslaanAutofill.current = Boolean(initial.customerId);
+        setKlantId(initial.customerId ?? "");
+        setWerkadres(initial.werkadres ?? "");
+        setKamer(initial.kamer ?? "");
+        setOnderwerp(initial.onderwerp ?? "");
+        setToelichting(initial.toelichting ?? "");
+        setBijzTekst(initial.bijzonderheden ?? "");
+        setGekozen(Array.isArray(initial.packages) ? initial.packages : []);
+        setMaterialen(Array.isArray(initial.materials) ? initial.materials.map((m, i) => ({ key: `init-${i}-${Date.now()}`, description: m.description ?? "", unit: m.unit || "st", quantity: Number(m.quantity) > 0 ? Number(m.quantity) : 1, unit_price_cents: Number(m.unit_price_cents) || 0 })) : []);
+        setKlantTekst("");
+        setMonteurTekst("");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [bestaandeOfferteId, initial]);
+    const klant = klanten.find((k) => k.id === klantId) ?? null;
+    useEffect(() => {
+        if (klant) {
+            setEmail(klant.general_email ?? "");
+            if (overslaanAutofill.current && werkadres.trim())
+                overslaanAutofill.current = false;
+            else
+                setWerkadres(adresVan(klant));
+            setContactTel(klant.general_phone ?? "");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [klantId, klanten.length]);
+    useEffect(() => {
+        const bestemming = werkadres.trim();
+        if (!open || bestemming.length < 3 || pakketten.length === 0 || !adresLijktCompleet(bestemming)) {
+            setReistijd(open && bestemming.length >= 3 && pakketten.length > 0
+                ? { status: "onbekend", minuten: null, pakket: null, melding: "Vul een volledig werkadres in (straat, huisnummer, plaats)." }
+                : null);
+            setGekozen((huidig) => automatischReisPakket ? huidig.filter((regel) => regel.package_id !== automatischReisPakket) : huidig);
+            setAutomatischReisPakket(null);
+            return;
+        }
+        let actief = true;
+        let timer;
+        let pogingen = 0;
+        const uitvoeren = async () => {
+            pogingen += 1;
+            setReistijdBezig(true);
+            try {
+                const { data: sessie } = await supabase.auth.getSession();
+                const token = sessie?.session?.access_token;
+                if (!token)
+                    throw new Error("Niet ingelogd");
+                const resultaat = await berekenReistijd({ data: { accessToken: token, destination: bestemming } });
+                if (!actief)
+                    return;
+                if (resultaat.status === "wacht" && pogingen >= 12) {
+                    setReistijd({ status: "onbekend", minuten: null, pakket: null, melding: "Reistijd kon niet berekend worden." });
+                    return;
+                }
+                setReistijd(resultaat);
+                setGekozen((huidig) => {
+                    const zonderVorige = automatischReisPakket
+                        ? huidig.filter((regel) => regel.package_id !== automatischReisPakket)
+                        : huidig;
+                    if (resultaat.status !== "ok" || !resultaat.pakket || resultaat.pakket.aantal < 1)
+                        return zonderVorige;
+                    return [
+                        ...zonderVorige.filter((regel) => regel.package_id !== resultaat.pakket?.id),
+                        { package_id: resultaat.pakket.id, quantity: resultaat.pakket.aantal },
+                    ];
+                });
+                setAutomatischReisPakket(resultaat.status === "ok" ? resultaat.pakket?.id ?? null : null);
+                if (resultaat.status === "wacht" && actief)
+                    timer = window.setTimeout(uitvoeren, 4000);
+            }
+            catch {
+                if (actief) {
+                    setReistijd({ status: "onbekend", minuten: null, pakket: null, melding: "Reistijd berekenen is mislukt. Probeer het opnieuw." });
+                }
+            }
+            finally {
+                if (actief)
+                    setReistijdBezig(false);
+            }
+        };
+        timer = window.setTimeout(uitvoeren, 1500);
+        return () => {
+            actief = false;
+            if (timer !== undefined)
+                window.clearTimeout(timer);
+        };
+    }, [open, werkadres, pakketten.length, berekenReistijd, reistijdPoging]);
+    const regels = useMemo(() => gekozen.map((g) => {
+        const p = pakketten.find((x) => x.id === g.package_id);
+        return { ...g, naam: p?.name ?? "Pakket", prijs: Number(p?.unit_price_cents ?? 0) };
+    }), [gekozen, pakketten]);
+    const subtotaal = regels.reduce((s, r) => s + Math.round(r.quantity * r.prijs), 0) +
+        materialen.reduce((s, m) => s + Math.round(m.quantity * m.unit_price_cents), 0);
+    const materialenPayload = () => materialen.map((m) => ({ description: m.description.trim(), unit: m.unit.trim() || "st", quantity: m.quantity, unit_price_cents: m.unit_price_cents, article_number: m.article_number ?? null }));
+    const materialenOngeldig = materialen.some((m) => !m.description.trim() || !(m.quantity > 0));
+    const voegPakketToe = (id) => {
+        if (!id)
+            return;
+        setGekozen((g) => (g.some((x) => x.package_id === id) ? g.map((x) => (x.package_id === id ? { ...x, quantity: x.quantity + 1 } : x)) : [...g, { package_id: id, quantity: 1 }]));
+        setPakketKeuze("");
+    };
+    const formulierData = () => ({
+        klant: klant?.name,
+        werkadres, kamer, contactpersoon_op_locatie: contactpersoon,
+        onderwerp, soort_werk: soort, vakgebied, toelichting_eigenaar: toelichting,
+        bijzonderheden: [bijzTekst].filter(Boolean),
+        pakketten: regels.map((r) => ({ naam: r.naam, aantal: r.quantity })),
+    });
+    const stelTekstenOp = async () => {
+        if (!toelichting.trim()) {
+            toast.error("Vul eerst een korte toelichting in");
+            return;
+        }
+        setAiBezig(true);
+        try {
+            const { data: s } = await supabase.auth.getSession();
+            const token = s?.session?.access_token;
+            if (!token)
+                throw new Error("Niet ingelogd");
+            const res = await genereer({ data: { accessToken: token, formulier: formulierData() } });
+            if (res.error || !res.teksten) {
+                toast.error(res.error ?? "AI kon geen teksten opstellen");
+                return;
+            }
+            setKlantTekst(res.teksten.klant_tekst);
+            setMonteurTekst(res.teksten.monteur_instructies);
+        }
+        catch {
+            toast.error("Teksten opstellen mislukt");
+        }
+        finally {
+            setAiBezig(false);
+        }
+    };
+    // Elke regel in de toelichting begint met een punt; dit normaliseert ook
+    // geplakte tekst met meerdere regels.
+    const normalizeBullets = (raw) => raw
+        .split("\n")
+        .map((line) => {
+        if (line.startsWith("•")) {
+            return "• " + line.slice(1).replace(/^\s+/, "");
+        }
+        const stripped = line.replace(/^\s+/, "");
+        return stripped ? "• " + stripped : "";
+    })
+        .join("\n");
+    const toelichtingKeyDown = (e) => {
+        const ta = e.currentTarget;
+        const s = ta.selectionStart;
+        const t = ta.selectionEnd;
+        if (e.key === "Enter") {
+            e.preventDefault();
+            setToelichting((v) => v.slice(0, s) + "\n• " + v.slice(t));
+            requestAnimationFrame(() => { ta.selectionStart = ta.selectionEnd = s + 3; });
+            return;
+        }
+        if (e.key === "Backspace" && s === t) {
+            if (toelichting === "• " && s === 2) {
+                e.preventDefault();
+                setToelichting("");
+            }
+            else if (toelichting.slice(0, s).endsWith("\n• ")) {
+                e.preventDefault();
+                const n = s - 3;
+                setToelichting((v) => v.slice(0, n) + v.slice(t));
+                requestAnimationFrame(() => { ta.selectionStart = ta.selectionEnd = n; });
+            }
+        }
+    };
+    const reset = () => {
+        setKlantId("");
+        setOnderwerp("");
+        setToelichting("");
+        setGekozen([]);
+        setMaterialen([]);
+        setKlantTekst("");
+        setMonteurTekst("");
+        setKamer("");
+        setWerkadres("");
+        setEmail("");
+        setBijzTekst("");
+        setSoort("");
+        setVakgebied("");
+        setContactpersoon("");
+        setContactTel("");
+        setAutomatischReisPakket(null);
+        setReistijd(null);
+        setReistijdBezig(false);
+    };
+    const nk = (veld) => ({
+        value: nieuweKlant[veld],
+        onChange: (e) => {
+            setNieuweKlant((s) => ({ ...s, [veld]: e.target.value }));
+            setKlantFouten((f) => ({ ...f, [veld]: "" }));
+        },
+    });
+    const openKlantDialoog = () => {
+        setNieuweKlant({ ...LEGE_KLANT });
+        setKlantFouten({});
+        setKlantOpen(true);
+    };
+    const slaKlantOp = async () => {
+        const fouten = {};
+        if (!nieuweKlant.name.trim())
+            fouten.name = "Naam is verplicht";
+        if (!nieuweKlant.general_email.trim())
+            fouten.general_email = "E-mailadres is verplicht";
+        else if (!geldigEmail(nieuweKlant.general_email))
+            fouten.general_email = "Vul een geldig e-mailadres in";
+        if (!nieuweKlant.general_phone.trim())
+            fouten.general_phone = "Telefoonnummer is verplicht";
+        if (!nieuweKlant.billing_street.trim())
+            fouten.billing_street = "Straat en huisnummer zijn verplicht";
+        if (!nieuweKlant.billing_postcode.trim())
+            fouten.billing_postcode = "Postcode is verplicht";
+        if (!nieuweKlant.billing_city.trim())
+            fouten.billing_city = "Plaats is verplicht";
+        setKlantFouten(fouten);
+        if (Object.keys(fouten).length > 0)
+            return;
+        setKlantSaving(true);
+        try {
+            const ins = Object.fromEntries(Object.entries(nieuweKlant).map(([k, v]) => [k, String(v).trim() || null]));
+            const { data, error } = await db.from("itk_customers").insert(ins).select("id, name, general_email, general_phone, billing_street, billing_postcode, billing_city").single();
+            if (error || !data)
+                throw error ?? new Error("klant");
+            const nieuw = data;
+            setKlanten((ks) => [...ks, nieuw].sort((a, b) => a.name.localeCompare(b.name)));
+            setKlantId(nieuw.id);
+            setEmail(nieuw.general_email ?? "");
+            setWerkadres(adresVan(nieuw));
+            setContactTel(nieuw.general_phone ?? "");
+            setKlantOpen(false);
+            toast.success(`Klant ${nieuw.name} aangemaakt`);
+        }
+        catch (e) {
+            toast.error(e?.message ? `Klant opslaan mislukt: ${e.message}` : "Klant opslaan mislukt");
+        }
+        finally {
+            setKlantSaving(false);
+        }
+    };
+    const tekstenCompleet = Boolean(klantTekst.trim() && monteurTekst.trim());
+    const a4Waarden = () => ({
+        klantNaam: klant?.name ?? "",
+        werkadres: [werkadres.trim(), kamer.trim()].filter(Boolean).join(" · "),
+        onderwerp: onderwerp.trim(),
+        aanleiding: "",
+        omschrijving: klantTekst.trim(),
+        aandachtspunten: aandachtspuntenTekst(),
+        voorwaarden: voorwaarden.trim(),
+        geldigTot: new Date(Date.now() + geldig * 86400000).toISOString().slice(0, 10),
+        vatRate: btw,
+        regels: [
+            ...regels.map((r) => ({ description: r.naam, unit: "st", quantity: r.quantity, unit_price_cents: r.prijs })),
+            ...materialenPayload(),
+        ],
+    });
+    const aandachtspuntenTekst = () => [
+        bijzTekst.trim(),
+        contactpersoon.trim() ? `Contactpersoon op locatie: ${contactpersoon.trim()}${contactTel.trim() ? ` (${contactTel.trim()})` : ""}` : "",
+    ].filter(Boolean).join("\n");
+    const openControle = () => {
+        if (!klantTekst.trim() || !monteurTekst.trim())
+            return toast.error("Stel eerst de teksten op met Teksten opstellen");
+        if (!klantId || !klant)
+            return toast.error("Kies een klant");
+        if (!onderwerp.trim())
+            return toast.error("Vul het onderwerp in");
+        if (reistijdBezig || reistijd?.status === "wacht")
+            return toast.error("Wacht tot de exacte reistijd is berekend");
+        if (!reistijd || reistijd.status !== "ok")
+            return toast.error(reistijd?.melding ?? "Vul een volledig werkadres in om de reistijd te berekenen");
+        if (gekozen.length === 0)
+            return toast.error("Kies minimaal één pakket");
+        if (materialenOngeldig)
+            return toast.error("Vul bij elk materiaal een omschrijving en aantal in");
+        setVoorbeeld(a4Waarden());
+        setMailAan(email.trim() || klant.general_email || "");
+        setMailOnderwerp(`Offerte – ${onderwerp.trim()}`);
+        if (bronWerkbonNummer) {
+            const kort = (meldingKort ?? "").trim().replace(/\s+/g, " ");
+            setMailBericht(`Beste ${klant.name || "klant"},\n\n` +
+                `Tijdens de werkzaamheden van werkbon ${bronWerkbonNummer} is gebleken dat er nog aanvullend werk nodig is${kort ? `: ${kort}` : ""}. ` +
+                `Omdat dit buiten het afgesproken mandaat valt, hebben wij hiervoor een aanvullende offerte opgesteld. Deze vindt u in de bijlage.\n\n` +
+                `Wij horen graag of u akkoord gaat met deze offerte.\n\n\n\n` +
+                `Met vriendelijke groet,\n\n${huisstijl?.company_name ?? ""}`);
+            setControleOpen(true);
+            return;
+        }
+        setMailBericht(`Beste ${klant.name || "klant"},\n\n` +
+            `Voor ${onderwerp.trim() || "de werkzaamheden"} sturen wij u onderstaande offerte. In de offerte leest u precies welke werkzaamheden moeten worden uitgevoerd en wat deze kosten. De offerte vindt u als bijlage bij deze e-mail.\n\n` +
+            `Wij horen graag of u akkoord gaat met deze offerte.\n\n\n\n` +
+            `Met vriendelijke groet,\n\n${huisstijl?.company_name ?? ""}`);
+        setControleOpen(true);
+    };
+    const slaOp = async (payload) => {
+        if (bestaandeOfferteId) {
+            const { error } = await db.rpc("quote_fill_from_form", { _offerte_id: bestaandeOfferteId, _payload: payload });
+            if (error)
+                throw error;
+            return bestaandeOfferteId;
+        }
+        const { data, error } = await db.rpc("quote_create_from_scratch", { _payload: payload });
+        if (error || !data?.offerte_id)
+            throw error ?? new Error("Offerte opslaan mislukt");
+        return data.offerte_id;
+    };
+    const opslaanAlsConcept = async () => {
+        if (!klant)
+            return toast.error("Kies een klant");
+        if (reistijdBezig || reistijd?.status === "wacht")
+            return toast.error("Wacht tot de exacte reistijd is berekend");
+        if (!reistijd || reistijd.status !== "ok")
+            return toast.error(reistijd?.melding ?? "Vul een volledig werkadres in om de reistijd te berekenen");
+        if (gekozen.length === 0)
+            return toast.error("Kies minimaal één pakket");
+        if (materialenOngeldig)
+            return toast.error("Vul bij elk materiaal een omschrijving en aantal in");
+        setSaving(true);
+        try {
+            const id = await slaOp({
+                customer_id: klant.id, onderwerp: onderwerp.trim(), klant_tekst: klantTekst.trim(),
+                monteur_instructies: monteurTekst.trim(), aandachtspunten: aandachtspuntenTekst(),
+                work_address: werkadres.trim(), room_number: kamer.trim(), vat_rate: btw, geldig_dagen: geldig,
+                notities: [soort, vakgebied].filter(Boolean).join(" · "), packages: gekozen, materials: materialenPayload(),
+            });
+            toast.success("Offerte als concept opgeslagen");
+            onCreated(id);
+        }
+        catch (e) {
+            toast.error(`Opslaan mislukt: ${e?.message ?? ""}`);
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const bevestigVersturen = async () => {
+        if (!klant || !voorbeeld)
+            return;
+        const aan = mailAan.trim();
+        if (!geldigEmail(aan))
+            return toast.error("Vul een geldig e-mailadres in");
+        setSaving(true);
+        let offerteId = null;
+        try {
+            if (aan !== (klant.general_email ?? "")) {
+                await db.from("itk_customers").update({ general_email: aan }).eq("id", klant.id);
+            }
+            const payload = {
+                customer_id: klant.id,
+                onderwerp: onderwerp.trim(),
+                klant_tekst: voorbeeld.omschrijving,
+                monteur_instructies: monteurTekst.trim(),
+                aandachtspunten: aandachtspuntenTekst(),
+                voorwaarden: voorwaarden.trim(),
+                work_address: werkadres.trim(),
+                room_number: kamer.trim(),
+                vat_rate: btw,
+                geldig_dagen: geldig,
+                notities: [soort, vakgebied].filter(Boolean).join(" · "),
+                packages: gekozen, materials: materialenPayload(),
+            };
+            offerteId = await slaOp(payload);
+            const { data: nr, error: nrErr } = await db.rpc("quote_assign_number", { _offerte_id: offerteId });
+            if (nrErr || typeof nr !== "string")
+                throw new Error(nrErr?.message ?? "Offertenummer toekennen mislukt");
+            setDefNummer(nr);
+            await new Promise((r) => setTimeout(r, 200));
+            const paginas = Array.from(pdfRef.current?.querySelectorAll("[data-offerte-pagina]") ?? []);
+            const pdfBase64 = await a4NaarPdfBase64(paginas);
+            const subject = mailOnderwerp.startsWith("Offerte") && !mailOnderwerp.includes(nr)
+                ? mailOnderwerp.replace(/^Offerte/, `Offerte ${nr}`)
+                : mailOnderwerp;
+            await verstuurOfferteEmail({ offerteId, to: aan, subject, message: mailBericht, pdfBase64, filename: `Offerte-${nr}.pdf` });
+            toast.success(`Offerte ${nr} verzonden naar ${aan}. De werkbon wacht op goedkeuring.`);
+            setControleOpen(false);
+            onOpenChange(false);
+            if (!inline)
+                reset();
+            onCreated(offerteId);
+        }
+        catch (e) {
+            const msg = e?.message ?? "Verzenden mislukt";
+            if (offerteId) {
+                toast.error(`Offerte als concept bewaard, maar niet verzonden: ${msg}`);
+                setControleOpen(false);
+                onOpenChange(false);
+                reset();
+                onCreated(offerteId);
+            }
+            else {
+                toast.error(`Verzenden mislukt: ${msg}`);
+            }
+        }
+        finally {
+            setSaving(false);
+            setDefNummer(null);
+        }
+    };
+    const velden = (_jsxs("div", { className: "space-y-4", children: [_jsxs(Sectie, { nr: 1, titel: "Klant", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { value: klantId, onValueChange: setKlantId, children: [_jsx(SelectTrigger, { className: "flex-1", children: _jsx(SelectValue, { placeholder: "Kies een klant" }) }), _jsx(SelectContent, { className: "max-h-72", children: klanten.map((k) => _jsx(SelectItem, { value: k.id, children: k.name }, k.id)) })] }), _jsxs(Button, { type: "button", variant: "outline", onClick: openKlantDialoog, children: [_jsx(UserPlus, { className: "mr-1 h-4 w-4" }), "Nieuwe klant aanmaken"] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "E-mailadres voor de offerte" }), _jsx(Input, { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "klant@voorbeeld.nl" })] })] }), _jsx(Sectie, { nr: 2, titel: "Locatie", children: _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1 sm:col-span-2", children: [_jsx(Label, { children: "Werkadres" }), _jsx(Input, { value: werkadres, onChange: (e) => setWerkadres(e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Kamer / ruimte" }), _jsx(Input, { value: kamer, onChange: (e) => setKamer(e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Contactpersoon op locatie" }), _jsx(Input, { value: contactpersoon, onChange: (e) => setContactpersoon(e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Telefoon contactpersoon" }), _jsx(Input, { value: contactTel, onChange: (e) => setContactTel(e.target.value) })] })] }) }), _jsxs(Sectie, { nr: 3, titel: "Het werk", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Onderwerp / klus *" }), _jsx(Input, { value: onderwerp, onChange: (e) => setOnderwerp(e.target.value), placeholder: "Bijv. vervangen cv-ketel" })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Soort werk" }), _jsxs(Select, { value: soort, onValueChange: setSoort, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies" }) }), _jsx(SelectContent, { children: SOORTEN.map((s) => _jsx(SelectItem, { value: s, children: s }, s)) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Vakgebied" }), _jsxs(Select, { value: vakgebied, onValueChange: setVakgebied, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies" }) }), _jsx(SelectContent, { children: VAKGEBIEDEN.map((s) => _jsx(SelectItem, { value: s, children: s }, s)) })] })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Korte toelichting" }), _jsx(Textarea, { rows: 3, value: toelichting, onChange: (e) => setToelichting(normalizeBullets(e.target.value)), onKeyDown: toelichtingKeyDown, onFocus: () => setToelichting((v) => (v ? v : "• ")), placeholder: "Geef de punten die aangepakt gaan worden" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Bijzonderheden" }), _jsx(Input, { value: bijzTekst, onChange: (e) => setBijzTekst(e.target.value), placeholder: "Overige bijzonderheden" })] })] }), _jsxs(Sectie, { nr: 4, titel: "Prijs (pakketten en materialen)", children: [_jsxs("div", { className: `flex items-start gap-2 rounded-md border p-3 text-sm ${reistijd && reistijd.status !== "ok" ? "border-destructive text-destructive" : "bg-muted/40"}`, children: [reistijdBezig || reistijd?.status === "wacht" ? _jsx(Loader2, { className: "mt-0.5 h-4 w-4 shrink-0 animate-spin" }) : _jsx(Clock3, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Reistijd vanaf de zaak" }), _jsx("p", { className: reistijd && reistijd.status !== "ok" ? "" : "text-muted-foreground", children: reistijdBezig ? "Reistijd wordt exact berekend…" : reistijd?.pakket
+                                            ? `${reistijd.enkeleRitMinuten ?? reistijd.minuten} min heen + ${reistijd.enkeleRitMinuten ?? reistijd.minuten} min terug = ${reistijd.minuten} min · ${reistijd.pakket.aantal}× ${reistijd.pakket.naam} automatisch toegevoegd`
+                                            : reistijd?.melding ?? "Vul een werkadres in om de reistijd te berekenen." }), !reistijdBezig && (reistijd?.status === "kaarten_fout" || (reistijd?.status === "onbekend" && !reistijd.melding.startsWith("Vul "))) && (_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "mt-2", onClick: () => setReistijdPoging((n) => n + 1), children: "Opnieuw proberen" }))] })] }), _jsxs("div", { className: "grid gap-2", children: [_jsxs(Popover, { open: pakketOpen, onOpenChange: setPakketOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", className: "w-full justify-between font-normal", children: ["Pakket toevoegen", _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { autoFocus: true, value: pakketZoek, onChange: (e) => setPakketZoek(e.target.value), placeholder: "Zoek een pakket\u2026" }) }), _jsxs("div", { className: "max-h-72 overflow-y-auto p-1", children: [pakkettenGefilterd.length === 0 && (_jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "Geen pakket gevonden." })), pakkettenGefilterd.filter((p) => !(Number(p.travel_minutes) > 0 && Number(p.labor_minutes ?? 0) === 0)).map((p) => (_jsxs("button", { type: "button", className: "relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground", onClick: () => {
+                                                            voegPakketToe(p.id);
+                                                            setPakketOpen(false);
+                                                            setPakketZoek("");
+                                                        }, children: [p.code ? `${p.code} · ` : "", p.name, " \u2014 ", formatEuro(Number(p.unit_price_cents ?? 0))] }, p.id)))] })] })] }), _jsx(ArtikelKiezer, { onKies: (a) => setMaterialen((m) => [...m, { key: crypto.randomUUID(), description: a.description, unit: a.unit, quantity: 1, unit_price_cents: a.unit_price_cents, article_number: a.article_number, foto_url: a.foto_url }]) })] }), materialen.length > 0 && (_jsx("div", { className: "divide-y rounded-md border", children: materialen.map((m) => {
+                            const upd = (patch) => setMaterialen((lijst) => lijst.map((x) => (x.key === m.key ? { ...x, ...patch } : x)));
+                            return (_jsxs("div", { className: "flex flex-wrap items-center gap-2 p-2 text-sm", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "materiaal" }), _jsx(Input, { className: "min-w-40 flex-1", placeholder: "Omschrijving", value: m.description, onChange: (e) => upd({ description: e.target.value }) }), _jsx(Input, { className: "w-20 text-right", type: "number", step: "1", min: 0, value: m.quantity, onChange: (e) => upd({ quantity: Number(e.target.value) || 0 }) }), _jsx(Input, { className: "w-16", placeholder: "st", value: m.unit, onChange: (e) => upd({ unit: e.target.value }) }), _jsx(Input, { className: "w-24 text-right", type: "number", step: "0.01", min: 0, placeholder: "Prijs invullen", value: m.unit_price_cents ? m.unit_price_cents / 100 : "", onChange: (e) => upd({ unit_price_cents: Math.round((Number(e.target.value) || 0) * 100) }) }), _jsx("span", { className: "w-24 text-right", children: formatEuro(Math.round(m.quantity * m.unit_price_cents)) }), _jsx(ArtikelFoto, { url: m.foto_url, className: "size-8" }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => setMaterialen((lijst) => lijst.filter((x) => x.key !== m.key)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, m.key));
+                        }) })), (regels.length > 0 || materialen.length > 0) && (_jsxs("div", { className: "divide-y rounded-md border", children: [regels.map((r) => (_jsxs("div", { className: "flex items-center gap-2 p-2 text-sm", children: [_jsxs("span", { className: "flex-1", children: [r.naam, r.package_id === automatischReisPakket && _jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: "automatisch" })] }), _jsx(Button, { size: "icon", variant: "ghost", disabled: r.package_id === automatischReisPakket, onClick: () => setGekozen((g) => g.map((x) => (x.package_id === r.package_id ? { ...x, quantity: Math.max(1, x.quantity - 1) } : x))), children: _jsx(Minus, { className: "h-4 w-4" }) }), _jsx("span", { className: "w-6 text-center", children: r.quantity }), _jsx(Button, { size: "icon", variant: "ghost", disabled: r.package_id === automatischReisPakket, onClick: () => setGekozen((g) => g.map((x) => (x.package_id === r.package_id ? { ...x, quantity: x.quantity + 1 } : x))), children: _jsx(Plus, { className: "h-4 w-4" }) }), _jsx("span", { className: "w-24 text-right", children: formatEuro(Math.round(r.quantity * r.prijs)) }), _jsx(Button, { size: "icon", variant: "ghost", disabled: r.package_id === automatischReisPakket, onClick: () => setGekozen((g) => g.filter((x) => x.package_id !== r.package_id)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, r.package_id))), _jsxs("div", { className: "flex justify-between p-2 text-sm font-medium", children: [_jsx("span", { children: "Subtotaal excl. btw" }), _jsx("span", { children: formatEuro(subtotaal) })] })] })), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Btw %" }), _jsx(Input, { type: "number", value: btw, onChange: (e) => setBtw(Number(e.target.value) || 0) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Geldig (dagen)" }), _jsx(Input, { type: "number", value: geldig, onChange: (e) => setGeldig(Math.max(1, Number(e.target.value) || 30)) })] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "De duur van de werkbon komt uit de pakketten; het mandaat uit de pakketten en materialen samen." })] }), _jsxs(Sectie, { nr: 5, titel: "Teksten *", fout: !tekstenCompleet, children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Verplicht: klik op Teksten opstellen voordat je kunt verzenden." }), _jsxs(Button, { variant: "outline", onClick: stelTekstenOp, disabled: aiBezig, children: [aiBezig ? _jsx(Loader2, { className: "mr-1 h-4 w-4 animate-spin" }) : _jsx(Sparkles, { className: "mr-1 h-4 w-4" }), "Teksten opstellen"] }), (klantTekst || monteurTekst) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Tekst voor de klant (in de offerte)" }), _jsx(Textarea, { rows: 5, value: klantTekst, onChange: (e) => setKlantTekst(e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Instructies voor de monteur (in de werkbon)" }), _jsx(Textarea, { rows: 6, value: monteurTekst, onChange: (e) => setMonteurTekst(e.target.value) })] })] }))] })] }));
+    return (_jsxs(_Fragment, { children: [inline ? (_jsxs("div", { className: "space-y-4", children: [velden, _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2 border-t pt-4", children: [!tekstenCompleet && (_jsx("p", { className: "mr-auto text-xs text-destructive", children: "Stel eerst de teksten op met Teksten opstellen." })), _jsx(Button, { variant: "outline", onClick: opslaanAlsConcept, disabled: saving, children: "Opslaan als concept" }), _jsxs(Button, { onClick: openControle, disabled: saving || !tekstenCompleet, children: [_jsx(Send, { className: "mr-1 h-4 w-4" }), "Verzenden"] })] })] })) : (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-h-[92vh] overflow-y-auto sm:max-w-3xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Nieuwe offerte" }) }), velden, _jsxs(DialogFooter, { className: "items-center", children: [!tekstenCompleet && (_jsx("p", { className: "text-xs text-destructive", children: "Stel eerst de teksten op met Teksten opstellen." })), _jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Annuleren" }), _jsxs(Button, { onClick: openControle, disabled: saving || !tekstenCompleet, children: [_jsx(Send, { className: "mr-1 h-4 w-4" }), "Verzenden"] })] })] }) })), _jsx(Dialog, { open: controleOpen, onOpenChange: (o) => !saving && setControleOpen(o), children: _jsxs(DialogContent, { className: "z-[80] max-h-[92vh] overflow-y-auto sm:max-w-[1200px]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Controleer offerte en e-mail" }) }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-[minmax(0,1fr)_380px]", children: [_jsx("div", { className: "max-h-[75vh] overflow-auto rounded-md border bg-muted/30 p-4", children: voorbeeld && (_jsx("div", { ref: pdfRef, children: _jsx(OfferteA4, { waarden: voorbeeld, offerteNummer: defNummer, werkbonNummer: bronWerkbonNummer ?? null }) })) }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Aan" }), _jsx(Input, { type: "email", value: mailAan, onChange: (e) => setMailAan(e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Onderwerp" }), _jsx(Input, { value: mailOnderwerp, onChange: (e) => setMailOnderwerp(e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Bericht" }), _jsx(Textarea, { rows: 16, value: mailBericht, onChange: (e) => setMailBericht(e.target.value) })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "De offerte gaat als PDF-bijlage mee. De werkbon wordt klaargezet en gaat pas naar Werkbonnen zodra de offerte is goedgekeurd." })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setControleOpen(false), disabled: saving, children: "Terug" }), _jsxs(Button, { onClick: bevestigVersturen, disabled: saving, children: [saving && _jsx(Loader2, { className: "mr-1 h-4 w-4 animate-spin" }), "Bevestig versturen"] })] })] }) }), _jsx(Dialog, { open: klantOpen, onOpenChange: setKlantOpen, children: _jsxs(DialogContent, { className: "z-[80] sm:max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Nieuwe klant aanmaken" }) }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx("div", { className: "sm:col-span-2", children: _jsx(Veld, { label: "Naam", verplicht: true, fout: klantFouten.name, children: _jsx(Input, { ...nk("name") }) }) }), _jsx(Veld, { label: "E-mailadres", verplicht: true, fout: klantFouten.general_email, children: _jsx(Input, { type: "email", ...nk("general_email") }) }), _jsx(Veld, { label: "Telefoon", verplicht: true, fout: klantFouten.general_phone, children: _jsx(Input, { ...nk("general_phone") }) }), _jsx("div", { className: "sm:col-span-2", children: _jsx(Veld, { label: "Straat + huisnummer", verplicht: true, fout: klantFouten.billing_street, children: _jsx(Input, { ...nk("billing_street") }) }) }), _jsx(Veld, { label: "Postcode", verplicht: true, fout: klantFouten.billing_postcode, children: _jsx(Input, { ...nk("billing_postcode") }) }), _jsx(Veld, { label: "Plaats", verplicht: true, fout: klantFouten.billing_city, children: _jsx(Input, { ...nk("billing_city") }) }), _jsx(Veld, { label: "KvK (optioneel)", children: _jsx(Input, { ...nk("kvk_number") }) }), _jsx(Veld, { label: "Btw-nummer (optioneel)", children: _jsx(Input, { ...nk("vat_number") }) })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setKlantOpen(false), children: "Annuleren" }), _jsxs(Button, { onClick: slaKlantOp, disabled: klantSaving, children: [klantSaving && _jsx(Loader2, { className: "mr-1 h-4 w-4 animate-spin" }), "Klant opslaan"] })] })] }) })] }));
+}

package/dist-lib/components/offertes/OfferteA4.d.ts

@@ -0,0 +1,28 @@
+export interface OfferteA4Regel {
+    description: string;
+    unit: string;
+    quantity: number;
+    unit_price_cents: number;
+}
+export interface OfferteA4Waarden {
+    klantNaam: string;
+    werkadres: string;
+    onderwerp: string;
+    aanleiding: string;
+    omschrijving: string;
+    aandachtspunten: string;
+    voorwaarden: string;
+    geldigTot: string;
+    vatRate: number;
+    regels: OfferteA4Regel[];
+}
+interface Props {
+    waarden: OfferteA4Waarden;
+    offerteNummer: string | null;
+    werkbonNummer: string | null;
+    editable?: boolean;
+    onChange?: (w: OfferteA4Waarden) => void;
+}
+export declare const OfferteA4: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=OfferteA4.d.ts.map

package/dist-lib/components/offertes/OfferteA4.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OfferteA4.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/OfferteA4.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B;AAED,UAAU,KAAK;IACb,OAAO,EAAE,gBAAgB,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC1C;AAyED,eAAO,MAAM,SAAS,kGAqIpB,CAAC"}