@flowselections/offertes-installatie-techniek 1.0.3 → 1.21.1

package/README.md

@@ -6,7 +6,6 @@ This project was built with [Lovable](https://lovable.dev).
 
 ## Build with Lovable
 
-Continue developing this project in the [Lovable editor](https://lovable.dev/projects/a26e8dec-7784-4e34-b97e-8cc0cd056ea5).
 
 - **Ship faster**: describe what you want to build and Lovable handles the code.
 - **Stay in sync**: every change made in Lovable is committed straight to this repository.
@@ -22,3 +21,19 @@ cd <repository-name>
 npm i
 npm run dev
 ```
+
+## Benodigde instellingen per omgeving
+
+De module bevat geen vaste adressen, sleutels of klantnamen. Per shell/database nodig:
+
+| Instelling | Waar | Gevolg als het ontbreekt |
+| --- | --- | --- |
+| `SUPABASE_URL`, `SUPABASE_PUBLISHABLE_KEY` | Shell (server) | AI- en reistijdfuncties geven een duidelijke fout |
+| `SERVICE_ROLE_KEY` / service-role-binding | Shell (server) | Publieke offerte-acceptatie en reistijd werken niet |
+| `LOVABLE_API_KEY` | Shell (server) | "AI is niet geconfigureerd" |
+| `MAPS_CRON_URL` | Shell (server), adres van de eigen Google Maps-module | Reistijd toont "Kaarten-module niet ingesteld" |
+| Mailbox-doel voor offertes | Instellingen → Offerte e-mail | Verzenden wordt geweigerd |
+| Opslagmap `artikel-fotos` | Artikelen-module | Artikelen tonen een grijs vak |
+
+Afhankelijke modules (zelfde database): Werkbonnen (`wo_create_from_source`), Planning (bedrijfsadres), Artikelen, Klanten (`itk_customers`), e-mail en Facturen-huisstijl.
+De akkoordlink in mails gebruikt het domein van de shell zelf.

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

@@ -0,0 +1,16 @@
+export interface GekozenArtikel {
+    article_number: string | null;
+    description: string;
+    unit: string;
+    unit_price_cents: number;
+    foto_url: string | null;
+}
+/** Vierkante foto; zonder foto of bij laadfout een effen grijs vak van dezelfde maat. */
+export declare function ArtikelFoto({ url, className }: {
+    url: string | null | undefined;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function ArtikelKiezer({ onKies }: {
+    onKies: (a: GekozenArtikel) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ArtikelKiezer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArtikelKiezer.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/ArtikelKiezer.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,yFAAyF;AACzF,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,SAAc,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAK1G;AAED,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAA;CAAE,+BAmFhF"}

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Plus } from "lucide-react";
+import { Button, Input, Popover, PopoverContent, PopoverTrigger } from "@flowselections/core";
+import { formatEuro } from "../../lib/offertes";
+import { zoekArtikelenContract } from "../../lib/artikelenZoek";
+/** Vierkante foto; zonder foto of bij laadfout een effen grijs vak van dezelfde maat. */
+export function ArtikelFoto({ url, className = "" }) {
+    const [fout, setFout] = useState(false);
+    useEffect(() => setFout(false), [url]);
+    if (!url || fout)
+        return _jsx("div", { className: `aspect-square shrink-0 rounded-sm bg-muted ${className}`, "aria-hidden": true });
+    return _jsx("img", { src: url, alt: "", loading: "lazy", onError: () => setFout(true), className: `aspect-square shrink-0 rounded-sm object-cover ${className}` });
+}
+export function ArtikelKiezer({ onKies }) {
+    const [open, setOpen] = useState(false);
+    const [zoek, setZoek] = useState("");
+    const [artikelen, setArtikelen] = useState([]);
+    const [laden, setLaden] = useState(false);
+    useEffect(() => {
+        if (!open)
+            return;
+        let actief = true;
+        setLaden(true);
+        const t = setTimeout(async () => {
+            try {
+                const res = await zoekArtikelenContract(zoek, 50);
+                if (actief)
+                    setArtikelen(Array.isArray(res) ? res : []);
+            }
+            catch {
+                if (actief)
+                    setArtikelen([]);
+            }
+            finally {
+                if (actief)
+                    setLaden(false);
+            }
+        }, 250);
+        return () => {
+            actief = false;
+            clearTimeout(t);
+        };
+    }, [open, zoek]);
+    const kies = (g) => {
+        onKies(g);
+        setOpen(false);
+        setZoek("");
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", className: "w-full justify-between font-normal", children: ["Materiaal toevoegen", _jsx(Plus, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "min-w-72 max-w-[calc(100vw-1rem)] p-0 [--m-breedte:min(var(--radix-popover-trigger-width),26rem)]", style: { width: "var(--m-breedte)" }, align: "start", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { autoFocus: true, value: zoek, onChange: (e) => setZoek(e.target.value), placeholder: "Zoek op naam, code of EAN\u2026" }) }), _jsxs("div", { className: "overflow-y-auto overscroll-contain p-2 [--kaart:calc((var(--m-breedte)-1.5rem)/2+4.5rem)]", style: { maxHeight: "calc(var(--kaart) * 1.5 + 1.25rem)" }, 
+                        // Het menu staat buiten het offertevenster; dat venster blokkeert anders wiel/veeg-scroll.
+                        onWheel: (e) => e.stopPropagation(), onTouchMove: (e) => e.stopPropagation(), children: [laden && artikelen.length === 0 && _jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "Artikelen laden\u2026" }), !laden && artikelen.length === 0 && _jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "Geen materiaal gevonden." }), _jsx("div", { className: "grid grid-cols-2 gap-2", children: artikelen.map((a) => {
+                                    const p = Number(a.verkoop_prijs_cent) || 0;
+                                    return (_jsxs("button", { type: "button", className: "flex min-w-0 flex-col gap-1 rounded-md border border-border bg-card p-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground", onClick: () => kies({ article_number: a.artikelcode, description: a.naam || a.artikelcode || "Materiaal", unit: a.eenheid || "st", unit_price_cents: p, foto_url: a.foto_url ?? null }), children: [_jsx(ArtikelFoto, { url: a.foto_url, className: "w-full" }), _jsx("span", { className: "line-clamp-2 font-medium leading-tight", children: a.naam || a.artikelcode }), _jsxs("span", { className: "flex justify-between gap-1 text-xs text-muted-foreground", children: [_jsx("span", { className: "truncate", children: a.gtin || "geen EAN" }), _jsx("span", { className: "shrink-0", children: p > 0 ? formatEuro(p) : "geen prijs" })] })] }, a.id));
+                                }) })] }), _jsx("div", { className: "border-t p-1", children: _jsx("button", { type: "button", className: "w-full rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent", onClick: () => kies({ article_number: null, description: "", unit: "st", unit_price_cents: 0, foto_url: null }), children: "Eigen materiaal invoeren" }) })] })] }));
+}

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

@@ -0,0 +1,4 @@
+export declare function ExtraWerkMeldingenLijst({ onOfferteGemaakt }: {
+    onOfferteGemaakt?: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ExtraWerkMeldingenLijst.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExtraWerkMeldingenLijst.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/ExtraWerkMeldingenLijst.tsx"],"names":[],"mappings":"AAOA,wBAAgB,uBAAuB,CAAC,EAAE,gBAAgB,EAAE,EAAE;IAAE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAmF9F"}

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Badge, Card, CardContent, CardHeader, CardTitle, cn } from "@flowselections/core";
+import { Wrench } from "lucide-react";
+import { useExtraWerkMeldingen } from "../../hooks/useExtraWerkMeldingen";
+import { ExtraWerkOffertePaneel } from "./ExtraWerkOffertePaneel";
+import { formatDatum, formatEuro } from "../../lib/offertes";
+export function ExtraWerkMeldingenLijst({ onOfferteGemaakt }) {
+    const { meldingen, loading, reload, logEvent } = useExtraWerkMeldingen();
+    const [actief, setActief] = useState(null);
+    const [navigatieLijst, setNavigatieLijst] = useState([]);
+    const actiefRef = useRef(null);
+    const open = Array.isArray(meldingen) ? meldingen : [];
+    const openen = async (m) => {
+        if (!actiefRef.current)
+            setNavigatieLijst(open);
+        actiefRef.current = m;
+        setActief(m);
+        if (!m.seen_at) {
+            await logEvent(m.offerte_id, "melding_bekeken", "Extra-werkmelding bekeken op kantoor");
+            reload();
+        }
+    };
+    const sluit = () => {
+        actiefRef.current = null;
+        setActief(null);
+    };
+    const basis = actief ? navigatieLijst : open;
+    const index = actief ? Math.max(basis.findIndex((m) => m.offerte_id === actief.offerte_id), 0) : 0;
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(Wrench, { className: "h-4 w-4 text-primary" }), " Extra werk gemeld door monteurs", _jsxs("span", { className: "text-sm font-normal text-muted-foreground", children: ["(", open.length, ")"] })] }) }), _jsxs(CardContent, { className: "space-y-1", children: [loading && _jsx("p", { className: "text-sm text-muted-foreground", children: "Laden\u2026" }), !loading && open.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen openstaande meldingen." })), open.map((m) => (_jsxs("button", { type: "button", onClick: () => openen(m), className: cn("flex w-full items-center gap-3 rounded-md border px-3 py-2 text-left hover:bg-muted", !m.seen_at && "border-primary/40 bg-primary/5"), children: [!m.seen_at && _jsx(Badge, { className: "shrink-0", children: "Nieuw" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-medium", children: m.omschrijving || "Extra werk" }), _jsxs("span", { className: "block truncate text-xs text-muted-foreground", children: [m.werkbon?.project_number ?? "—", " \u00B7 ", m.klant_naam ?? "Onbekende klant", " \u00B7 ", formatDatum(m.created_at)] })] }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["Geschat ", formatEuro(m.geschat_cents)] })] }, m.offerte_id)))] }), actief && (_jsx(ExtraWerkOffertePaneel, { melding: actief, index: index, aantal: basis.length, onNavigate: (i) => {
+                    const doel = basis[i];
+                    if (!doel)
+                        return;
+                    const vers = open.find((o) => o.offerte_id === doel.offerte_id) ?? doel;
+                    openen(vers);
+                }, onClose: sluit, onSaveConcept: (c) => logEvent(actief.offerte_id, "melding_ai_concept", "AI-concept opgesteld", { concept: c }), onSaved: async () => {
+                    await logEvent(actief.offerte_id, "melding_uitgewerkt", "Extra-werkmelding uitgewerkt tot offerte");
+                    sluit();
+                    await reload();
+                    onOfferteGemaakt?.();
+                } }))] }));
+}

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

@@ -0,0 +1,14 @@
+import { type ExtraWerkMelding } from "../../hooks/useExtraWerkMeldingen";
+import type { AiOfferteConcept } from "../../lib/offerteAi.functions";
+interface Props {
+    melding: ExtraWerkMelding;
+    index: number;
+    aantal: number;
+    onNavigate: (index: number) => void;
+    onClose: () => void;
+    onSaved: () => void | Promise<void>;
+    onSaveConcept?: (c: AiOfferteConcept) => void;
+}
+export declare function ExtraWerkOffertePaneel({ melding, index, aantal, onNavigate, onClose, onSaved }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ExtraWerkOffertePaneel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExtraWerkOffertePaneel.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/ExtraWerkOffertePaneel.tsx"],"names":[],"mappings":"AASA,OAAO,EAAyC,KAAK,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACjH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAOtE,UAAU,KAAK;IACb,OAAO,EAAE,gBAAgB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C;AAqBD,wBAAgB,sBAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,KAAK,+BAqLrG"}

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Groot paneel: links de extra-werkmelding + bronwerkbon, rechts het vragenformulier
+// (zelfde als "Nieuwe offerte"), vooringevuld uit melding en bronwerkbon. Na
+// Verzenden: controlevenster met A4 + mail, daarna wordt de bestaande
+// conceptofferte bijgewerkt, genummerd en verstuurd.
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Button, Card, CardContent, CardHeader, CardTitle, supabase } from "@flowselections/core";
+import { Group, Panel, Separator } from "react-resizable-panels";
+import { ChevronLeft, ChevronRight, Send, X } from "lucide-react";
+import { laadBronwerkbonRegels } from "../../hooks/useExtraWerkMeldingen";
+import { formatDatum, formatEuro } from "../../lib/offertes";
+import { NieuweOfferteFormulier } from "./NieuweOfferteFormulier";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const db = supabase;
+function Veld({ label, value }) {
+    if (value === null || value === undefined || value === "")
+        return null;
+    return (_jsxs("div", { className: "space-y-0.5", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: label }), _jsx("div", { className: "whitespace-pre-wrap text-sm", children: value })] }));
+}
+function alsPunten(...teksten) {
+    return teksten
+        .flatMap((t) => (typeof t === "string" ? t.split("\n") : []))
+        .map((l) => l.replace(/^[\s•\-*]+/, "").trim())
+        .filter(Boolean)
+        .map((l) => `• ${l}`)
+        .join("\n");
+}
+export function ExtraWerkOffertePaneel({ melding, index, aantal, onNavigate, onClose, onSaved }) {
+    const navigate = useNavigate();
+    const wb = melding.werkbon ?? {};
+    const [bronRegels, setBronRegels] = useState([]);
+    const [initial, setInitial] = useState(null);
+    const [naastElkaar, setNaastElkaar] = useState(false);
+    useEffect(() => {
+        const media = window.matchMedia("(min-width: 1024px)");
+        const update = () => setNaastElkaar(media.matches);
+        update();
+        media.addEventListener("change", update);
+        return () => media.removeEventListener("change", update);
+    }, []);
+    useEffect(() => {
+        let actief = true;
+        setInitial(null);
+        (async () => {
+            const [lijnen, pl, ml] = await Promise.all([
+                laadBronwerkbonRegels(wb.id),
+                wb.id
+                    ? db.from("werkbon_materials").select("description, quantity, unit, unit_price_cents").eq("werkbon_id", wb.id)
+                    : Promise.resolve({ data: [] }),
+                wb.id
+                    ? db.from("werkbon_package_lines").select("package_id, quantity").eq("werkbon_id", wb.id)
+                    : Promise.resolve({ data: [] }),
+            ]);
+            if (!actief)
+                return;
+            setBronRegels(Array.isArray(lijnen) ? lijnen : []);
+            const pakRows = Array.isArray(pl?.data) ? pl.data : [];
+            const packages = pakRows
+                .filter((r) => r.package_id)
+                .map((r) => ({ package_id: r.package_id, quantity: Number(r.quantity) || 1 }));
+            setInitial({
+                customerId: melding.customer_id ?? wb.customer_id ?? null,
+                werkadres: wb.work_address ?? "",
+                kamer: wb.room_number ?? "",
+                onderwerp: wb.technician_task_description?.split("\n")[0] ?? wb.complaint_description ?? "Extra werkzaamheden",
+                toelichting: alsPunten(melding.omschrijving, wb.complaint_description),
+                bijzonderheden: (wb.technician_notes ?? "").replace(/\s+/g, " ").trim(),
+                packages,
+                materials: (Array.isArray(ml?.data) ? ml.data : []).map((m) => ({
+                    description: m.description ?? "",
+                    unit: m.unit ?? "st",
+                    quantity: Number(m.quantity) || 1,
+                    unit_price_cents: Number(m.unit_price_cents) || 0,
+                })),
+            });
+        })();
+        return () => {
+            actief = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [melding.offerte_id]);
+    const mandaat = melding.mandaat_restant_cents ?? 0;
+    const werkadres = useMemo(() => [wb.work_address, wb.room_number].filter(Boolean).join(" · "), [wb.work_address, wb.room_number]);
+    return (_jsxs("div", { className: "fixed inset-y-0 left-0 right-0 z-50 flex flex-col bg-background shadow-2xl lg:left-[var(--flow-sidebar-width,16rem)]", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-6 py-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Offerte opstellen uit extra-werkmelding" }), _jsx("p", { className: "text-xs text-muted-foreground", children: [wb.project_number, melding.klant_naam].filter(Boolean).join(" · ") })] }), _jsxs("div", { className: "flex items-center gap-2", children: [aantal > 1 && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "icon", disabled: index <= 0, onClick: () => onNavigate(index - 1), "aria-label": "Vorige melding", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsxs("span", { className: "min-w-20 text-center text-sm text-muted-foreground", children: ["Melding ", index + 1, " van ", aantal] }), _jsx(Button, { variant: "outline", size: "icon", disabled: index >= aantal - 1, onClick: () => onNavigate(index + 1), "aria-label": "Volgende melding", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })), _jsx(Button, { variant: "ghost", size: "icon", onClick: onClose, "aria-label": "Sluiten", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsxs(Group, { orientation: naastElkaar ? "horizontal" : "vertical", className: "min-h-0 flex-1 overflow-hidden", children: [_jsx(Panel, { id: "melding", defaultSize: "35%", minSize: naastElkaar ? "300px" : "25%", maxSize: naastElkaar ? "60%" : "50%", children: _jsxs("div", { className: "h-full min-w-0 space-y-4 overflow-y-auto border-r bg-muted/30 p-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Melding van de monteur" }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx(Veld, { label: "Wat is er nog nodig?", value: melding.omschrijving }), _jsx(Veld, { label: "Geschatte kosten (monteur)", value: formatEuro(melding.geschat_cents) }), _jsx(Veld, { label: "Resterend mandaat", value: formatEuro(mandaat) }), _jsx(Veld, { label: "Gemeld op", value: formatDatum(melding.created_at) })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "text-base", children: ["Bronwerkbon ", wb.project_number ?? ""] }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx(Veld, { label: "Klant", value: melding.klant_naam }), _jsx(Veld, { label: "Werkadres", value: werkadres }), _jsx(Veld, { label: "Klacht", value: wb.complaint_description }), _jsx(Veld, { label: "Taak monteur", value: wb.technician_task_description }), _jsx(Veld, { label: "Monteurnotities", value: wb.technician_notes })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Pakketten en materialen op de werkbon" }) }), _jsxs(CardContent, { className: "space-y-2", children: [bronRegels.length === 0 && _jsx("p", { className: "text-sm text-muted-foreground", children: "Geen regels." }), bronRegels.map((r) => (_jsxs("div", { className: "flex justify-between gap-2 text-sm", children: [_jsxs("span", { children: [r.description, _jsx("span", { className: "block text-xs text-muted-foreground", children: r.soort })] }), _jsxs("span", { className: "text-muted-foreground", children: [r.quantity ?? "", " ", r.unit ?? ""] })] }, r.id)))] })] })] }) }), _jsx(Separator, { disabled: !naastElkaar, "aria-label": "Breedte van melding en offerte aanpassen", title: "Breedte van melding en offerte aanpassen", className: naastElkaar
+                            ? "relative z-10 flex w-2 cursor-col-resize items-center justify-center bg-border outline-none hover:bg-primary/40 focus-visible:ring-2 focus-visible:ring-ring"
+                            : "hidden", children: naastElkaar && _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute flex h-8 w-10 select-none items-center justify-center rounded-sm border border-border bg-background text-sm font-medium text-foreground shadow-sm", children: "[<>]" }) }), _jsx(Panel, { id: "offerte", defaultSize: "65%", minSize: naastElkaar ? "480px" : "50%", children: _jsxs("div", { className: "flex h-full min-w-0 flex-col overflow-hidden border-l-2 border-primary/40", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b bg-primary/5 px-6 py-2.5", children: [_jsx(Send, { className: "h-4 w-4 text-primary" }), _jsx("p", { className: "text-sm font-medium text-primary", children: "Dit is de offerte die je verstuurt" })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-6", children: !initial ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Formulier vooraf invullen\u2026" })) : (_jsx(NieuweOfferteFormulier, { open: true, inline: true, initial: initial, bestaandeOfferteId: melding.offerte_id, bronWerkbonNummer: wb.project_number ?? null, meldingKort: melding.omschrijving, onCreated: async (id) => {
+                                            await onSaved();
+                                            navigate({ to: "/offertes/$offerteId", params: { offerteId: id } });
+                                        } })) })] }) })] })] }));
+}

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

@@ -0,0 +1,5 @@
+export declare function MoederWerkbonPaneel({ werkbonId, klantNaam }: {
+    werkbonId: string | null;
+    klantNaam: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=MoederWerkbonPaneel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MoederWerkbonPaneel.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/MoederWerkbonPaneel.tsx"],"names":[],"mappings":"AAoCA,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,+BAmG5G"}

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle, supabase } from "@flowselections/core";
+import { FileText } from "lucide-react";
+const db = supabase;
+const euro = (cents) => new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR" }).format((cents || 0) / 100);
+function Veld({ label, waarde }) {
+    return (_jsxs("div", { className: "space-y-0.5", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: label }), _jsx("p", { className: "whitespace-pre-wrap text-sm", children: waarde && waarde.trim() ? waarde : "—" })] }));
+}
+export function MoederWerkbonPaneel({ werkbonId, klantNaam }) {
+    const [werkbon, setWerkbon] = useState(null);
+    const [regels, setRegels] = useState([]);
+    const [laden, setLaden] = useState(true);
+    useEffect(() => {
+        let actief = true;
+        const load = async () => {
+            setLaden(true);
+            if (!werkbonId) {
+                setWerkbon(null);
+                setRegels([]);
+                setLaden(false);
+                return;
+            }
+            const [wb, pk, mat] = await Promise.all([
+                db.from("werkbonnen")
+                    .select("project_number,status,work_address,room_number,externe_referentie,complaint_description,technician_task_description,budget_mandate_cents")
+                    .eq("id", werkbonId)
+                    .maybeSingle(),
+                db.from("werkbon_package_lines").select("package_id,quantity,unit_price_cents_snapshot").eq("werkbon_id", werkbonId),
+                db.from("werkbon_materials").select("description,quantity,unit,unit_price_cents").eq("werkbon_id", werkbonId),
+            ]);
+            const pakketRegels = Array.isArray(pk.data) ? pk.data : [];
+            const ids = pakketRegels.map((r) => r.package_id).filter(Boolean);
+            let namen = {};
+            if (ids.length) {
+                const { data } = await db.from("werkbon_packages").select("id,name").in("id", ids);
+                const lijst = Array.isArray(data) ? data : [];
+                namen = Object.fromEntries(lijst.map((p) => [p.id, p.name ?? ""]));
+            }
+            const materialen = Array.isArray(mat.data) ? mat.data : [];
+            if (!actief)
+                return;
+            setWerkbon(wb.data ?? null);
+            setRegels([
+                ...pakketRegels.map((r) => ({
+                    omschrijving: namen[r.package_id] ?? "Pakket",
+                    eenheid: "pakket",
+                    aantal: Number(r.quantity ?? 0),
+                    prijs_cents: Number(r.unit_price_cents_snapshot ?? 0),
+                })),
+                ...materialen.map((m) => ({
+                    omschrijving: m.description ?? "",
+                    eenheid: m.unit ?? "st",
+                    aantal: Number(m.quantity ?? 0),
+                    prijs_cents: Number(m.unit_price_cents ?? 0),
+                })),
+            ]);
+            setLaden(false);
+        };
+        void load();
+        return () => {
+            actief = false;
+        };
+    }, [werkbonId]);
+    return (_jsxs(Card, { className: "h-fit min-w-0", children: [_jsxs(CardHeader, { className: "border-b", children: [_jsxs(CardTitle, { className: "flex items-center gap-2 text-lg", children: [_jsx(FileText, { className: "h-5 w-5" }), " Moederwerkbon"] }), _jsx("p", { className: "text-sm text-muted-foreground", children: werkbon?.project_number ?? "—" })] }), _jsx(CardContent, { className: "space-y-3 pt-5", children: laden ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Laden\u2026" })) : !werkbon ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen moederwerkbon gevonden." })) : (_jsxs(_Fragment, { children: [_jsx(Veld, { label: "Klant", waarde: klantNaam }), _jsx(Veld, { label: "Status", waarde: werkbon.status }), _jsx(Veld, { label: "Werkadres", waarde: werkbon.work_address }), _jsx(Veld, { label: "Kamer / ruimte", waarde: werkbon.room_number }), _jsx(Veld, { label: "Referentie", waarde: werkbon.externe_referentie }), _jsx(Veld, { label: "Klacht / aanleiding", waarde: werkbon.complaint_description }), _jsx(Veld, { label: "Opdracht voor monteur", waarde: werkbon.technician_task_description }), _jsx(Veld, { label: "Mandaat", waarde: euro(Number(werkbon.budget_mandate_cents ?? 0)) }), _jsxs("div", { className: "space-y-2 border-t pt-3", children: [_jsx("p", { className: "text-sm font-semibold", children: "Werkbonregels" }), regels.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u2014" })) : (regels.map((r, i) => (_jsxs("div", { className: "rounded-md border p-2 text-sm", children: [_jsx("p", { className: "whitespace-pre-wrap", children: r.omschrijving || "—" }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [r.aantal, " ", r.eenheid, " \u00D7 ", euro(r.prijs_cents)] })] }, i))))] })] })) })] }));
+}

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

@@ -0,0 +1,33 @@
+export interface OfferteFormulierInitieel {
+    customerId?: string | null;
+    werkadres?: string | null;
+    kamer?: string | null;
+    onderwerp?: string | null;
+    toelichting?: string | null;
+    bijzonderheden?: string | null;
+    packages?: {
+        package_id: string;
+        quantity: number;
+    }[];
+    materials?: {
+        description: string;
+        unit: string;
+        quantity: number;
+        unit_price_cents: number;
+    }[];
+}
+interface Props {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onCreated: (offerteId: string) => void;
+    /** Toon het formulier zonder eigen pop-up (bijv. in het extra-werkpaneel). */
+    inline?: boolean;
+    initial?: OfferteFormulierInitieel;
+    /** Bestaande conceptofferte bijwerken in plaats van een nieuwe aanmaken. */
+    bestaandeOfferteId?: string;
+    bronWerkbonNummer?: string | null;
+    meldingKort?: string | null;
+}
+export declare function NieuweOfferteFormulier({ open, onOpenChange: onOpenChangeProp, onCreated, inline, initial, bestaandeOfferteId, bronWerkbonNummer, meldingKort }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=NieuweOfferteFormulier.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NieuweOfferteFormulier.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/NieuweOfferteFormulier.tsx"],"names":[],"mappings":"AAmCA,MAAM,WAAW,wBAAwB;IACvC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtD,SAAS,CAAC,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,gBAAgB,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACjG;AAED,UAAU,KAAK;IACb,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,4EAA4E;IAC5E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAsED,wBAAgB,sBAAsB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,WAAW,EAAE,EAAE,KAAK,+BA8tBrK"}