@flowselections/offertes-installatie-techniek 1.0.2

package/README.md

@@ -0,0 +1,24 @@
+# Offertes - Installatie Techniek
+
+blank project start
+
+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.
+- **Full ownership**: this code is yours. Push to `main` on GitHub and your changes sync back into Lovable, ready for your next prompt.
+
+## Development
+
+Prefer working locally? You need Node.js and npm — [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating).
+
+```sh
+git clone <this-repository-url>
+cd <repository-name>
+npm i
+npm run dev
+```

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

@@ -0,0 +1,6 @@
+interface Props {
+    offerteId: string;
+}
+export declare function OfferteDetailPage({ offerteId }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=OfferteDetailPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OfferteDetailPage.d.ts","sourceRoot":"","sources":["../../src/components/OfferteDetailPage.tsx"],"names":[],"mappings":"AAwBA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,EAAE,KAAK,+BAgPrD"}

package/dist-lib/components/OfferteDetailPage.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ============================================================================
+// src/components/OfferteDetailPage.tsx — detailpagina van één offerte
+// Geen eigen <Header /> — die levert de shell via staticData.title
+// ============================================================================
+import { useNavigate } from "@tanstack/react-router";
+import { Button, Card, CardContent, CardHeader, CardTitle, Separator, Textarea, cn, toast, } from "@flowselections/core";
+import { ArrowLeft, CheckCircle2, Send, ShieldCheck, XCircle } from "lucide-react";
+import { useOfferte } from "../hooks/useOfferte";
+import { useWerkbonPakketten } from "../hooks/useWerkbonPakketten";
+import { OfferteRegelsEditor } from "./offertes/OfferteRegelsEditor";
+import { OfferteStatusBadge } from "./offertes/OfferteStatusBadge";
+import { effectieveStatus, formatDatum, formatEuro } from "../lib/offertes";
+export function OfferteDetailPage({ offerteId }) {
+    const navigate = useNavigate();
+    const { offerte, klantNaam, werkbonNummer, regels, events, restantMandaat, loading, updateOfferte, addRegel, updateRegel, deleteRegel, naarWerkbon, } = useOfferte(offerteId);
+    const { pakketten } = useWerkbonPakketten();
+    if (loading) {
+        return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Laden\u2026" });
+    }
+    if (!offerte) {
+        return (_jsxs("main", { className: "space-y-4 p-6", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Deze offerte bestaat niet (meer)." }), _jsx(Button, { variant: "outline", onClick: () => navigate({ to: "/offertes" }), children: "Terug naar overzicht" })] }));
+    }
+    const status = effectieveStatus(offerte);
+    const bewerkbaar = ["concept", "mandaat"].includes(status);
+    const binnenMandaat = offerte.total_cents > 0 && offerte.total_cents <= restantMandaat;
+    const isOmgezet = Boolean(offerte.follow_up_werkbon_id);
+    const markeerMandaat = async () => {
+        await updateOfferte({ status: "mandaat", binnen_mandaat: true, mandaat_restant_cents: restantMandaat }, "mandaat_bevestigd", "Binnen mandaat — geen verzending naar klant nodig");
+    };
+    const verzenden = () => updateOfferte({ status: "verzonden", sent_at: new Date().toISOString() }, "verzonden", "Offerte verzonden naar de klant");
+    const goedkeuren = () => updateOfferte({ status: "goedgekeurd", approved_at: new Date().toISOString() }, "goedgekeurd", "Offerte goedgekeurd");
+    const afwijzen = () => updateOfferte({ status: "afgewezen", rejected_at: new Date().toISOString() }, "afgewezen", "Offerte afgewezen");
+    const omzetten = async () => {
+        const ok = await naarWerkbon();
+        if (ok)
+            toast.success("Vervolgwerkbon staat klaar in de werkbonnenmodule");
+    };
+    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs(Button, { variant: "ghost", size: "sm", className: "-ml-2", onClick: () => navigate({ to: "/offertes" }), children: [_jsx(ArrowLeft, { className: "mr-1 h-4 w-4" }), " Offertes"] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h1", { className: "font-mono text-2xl font-semibold text-foreground", children: offerte.offerte_number }), _jsx(OfferteStatusBadge, { status: status })] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [klantNaam ?? "Onbekende klant", werkbonNummer ? ` · vanuit ${werkbonNummer}` : ""] })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [bewerkbaar && !binnenMandaat && (_jsxs(Button, { variant: "outline", onClick: verzenden, children: [_jsx(Send, { className: "mr-1 h-4 w-4" }), " Verzenden"] })), bewerkbaar && binnenMandaat && status !== "mandaat" && (_jsxs(Button, { variant: "outline", onClick: markeerMandaat, children: [_jsx(ShieldCheck, { className: "mr-1 h-4 w-4" }), " Binnen mandaat"] })), ["verzonden", "bekeken"].includes(status) && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", onClick: afwijzen, children: [_jsx(XCircle, { className: "mr-1 h-4 w-4" }), " Afwijzen"] }), _jsxs(Button, { onClick: goedkeuren, children: [_jsx(CheckCircle2, { className: "mr-1 h-4 w-4" }), " Goedkeuren"] })] })), !isOmgezet && (status === "goedgekeurd" || (status === "mandaat" && binnenMandaat)) && (_jsx(Button, { onClick: omzetten, children: "Omzetten naar werkbon" }))] })] }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-3", children: [_jsxs("div", { className: "space-y-6 lg:col-span-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Offerteregels" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(OfferteRegelsEditor, { regels: regels, pakketten: pakketten, readOnly: !bewerkbaar, onAdd: addRegel, onUpdate: updateRegel, onDelete: deleteRegel }), _jsx(Separator, {}), _jsxs("div", { className: "ml-auto w-full max-w-xs space-y-1 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Subtotaal" }), _jsx("span", { children: formatEuro(offerte.subtotal_cents) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsxs("span", { className: "text-muted-foreground", children: ["Btw (", offerte.vat_rate, "%)"] }), _jsx("span", { children: formatEuro(offerte.vat_cents) })] }), _jsxs("div", { className: "flex justify-between text-base font-semibold", children: [_jsx("span", { children: "Totaal" }), _jsx("span", { children: formatEuro(offerte.total_cents) })] })] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Omschrijving" }) }), _jsx(CardContent, { children: _jsx(Textarea, { rows: 4, defaultValue: offerte.omschrijving, disabled: !bewerkbaar, onBlur: (e) => e.target.value !== offerte.omschrijving &&
+                                                updateOfferte({ omschrijving: e.target.value }) }) })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Mandaat" }) }), _jsxs(CardContent, { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Resterend mandaat" }), _jsx("span", { className: "font-medium", children: formatEuro(restantMandaat) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Offertetotaal" }), _jsx("span", { className: "font-medium", children: formatEuro(offerte.total_cents) })] }), _jsx("p", { className: cn("rounded-md px-3 py-2 text-sm", binnenMandaat
+                                                    ? "bg-primary/10 text-foreground"
+                                                    : "bg-muted text-muted-foreground"), children: binnenMandaat
+                                                    ? "Binnen mandaat — deze offerte mag direct worden omgezet in een werkbon zonder verzending naar de klant."
+                                                    : "Buiten mandaat — de klant moet deze offerte eerst goedkeuren." }), isOmgezet && (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Vervolgwerkbon aangemaakt op ", formatDatum(offerte.converted_at), "."] }))] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Gegevens" }) }), _jsxs(CardContent, { className: "space-y-2 text-sm", children: [_jsx(Rij, { label: "Geldig t/m", value: formatDatum(offerte.valid_until) }), _jsx(Rij, { label: "Aangemaakt", value: formatDatum(offerte.created_at) }), _jsx(Rij, { label: "Verzonden", value: formatDatum(offerte.sent_at) }), _jsx(Rij, { label: "Goedgekeurd", value: formatDatum(offerte.approved_at) })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Activiteit" }) }), _jsxs(CardContent, { className: "space-y-3", children: [(Array.isArray(events) ? events : []).length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen activiteit." })), (Array.isArray(events) ? events : []).map((event) => (_jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-medium", children: event.omschrijving || event.event_type }), _jsx("p", { className: "text-xs text-muted-foreground", children: formatDatum(event.created_at) })] }, event.id)))] })] })] })] })] }));
+}
+function Rij({ label, value }) {
+    return (_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { children: value })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"OffertesOverzichtPage.d.ts","sourceRoot":"","sources":["../../src/components/OffertesOverzichtPage.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,qBAAqB,gCAiJpC"}

package/dist-lib/components/OffertesOverzichtPage.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/OffertesOverzichtPage.tsx — offerteoverzicht
+// Geen eigen <Header /> — die levert de shell via staticData.title
+// ============================================================================
+import { useMemo, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Button, Card, CardContent, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsTrigger, cn, } from "@flowselections/core";
+import { Building2, Plus, Search } from "lucide-react";
+import { useOffertes } from "../hooks/useOffertes";
+import { OfferteKpiCards } from "./offertes/OfferteKpiCards";
+import { OfferteStatusBadge } from "./offertes/OfferteStatusBadge";
+import { NieuweOfferteDialog } from "./offertes/NieuweOfferteDialog";
+import { OFFERTE_TABS, effectieveStatus, formatDatum, formatEuro } from "../lib/offertes";
+export function OffertesOverzichtPage() {
+    const { offertes, loading, reload } = useOffertes();
+    const navigate = useNavigate();
+    const [tab, setTab] = useState("alle");
+    const [zoek, setZoek] = useState("");
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const zichtbaar = useMemo(() => {
+        const lijst = Array.isArray(offertes) ? offertes : [];
+        const tabDef = OFFERTE_TABS.find((t) => t.key === tab);
+        const term = zoek.trim().toLowerCase();
+        return lijst.filter((o) => {
+            const status = effectieveStatus(o);
+            if (tabDef?.statuses && !tabDef.statuses.includes(status))
+                return false;
+            if (!term)
+                return true;
+            return [o.offerte_number, o.klant_naam, o.omschrijving, o.werkbon_nummer]
+                .filter(Boolean)
+                .some((v) => String(v).toLowerCase().includes(term));
+        });
+    }, [offertes, tab, zoek]);
+    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold text-foreground", children: "Offertes" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Offertes vanuit werkbonnen, klantgoedkeuring en vervolgwerk" })] }), _jsxs(Button, { onClick: () => setDialogOpen(true), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), " Nieuwe offerte"] })] }), _jsx(OfferteKpiCards, { offertes: offertes }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(Tabs, { value: tab, onValueChange: setTab, children: _jsx(TabsList, { children: OFFERTE_TABS.map((t) => (_jsx(TabsTrigger, { value: t.key, children: t.label }, t.key))) }) }), _jsxs("div", { className: "relative w-full max-w-xs", 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 op klant, nummer, omschrijving", value: zoek, onChange: (e) => setZoek(e.target.value) })] })] }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-36", children: "Nr." }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Omschrijving" }), _jsx(TableHead, { className: "text-right", children: "Totaal" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Geldig t/m" }), _jsx(TableHead, { children: "Aangemaakt" })] }) }), _jsxs(TableBody, { children: [loading && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "text-sm text-muted-foreground", children: "Laden\u2026" }) })), !loading && zichtbaar.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "text-sm text-muted-foreground", children: "Geen offertes gevonden." }) })), zichtbaar.map((o) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => navigate({ to: "/offertes/$offerteId", params: { offerteId: o.id } }), children: [_jsx(TableCell, { className: "font-mono text-xs font-semibold", children: o.offerte_number }), _jsx(TableCell, { children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-primary/10", children: _jsx(Building2, { className: "h-3.5 w-3.5 text-primary" }) }), _jsx("span", { className: "font-medium", children: o.klant_naam ?? "—" })] }) }), _jsx(TableCell, { className: "max-w-xs truncate text-muted-foreground", children: o.omschrijving || "—" }), _jsx(TableCell, { className: "text-right font-medium", children: formatEuro(o.total_cents) }), _jsx(TableCell, { children: _jsx(OfferteStatusBadge, { status: effectieveStatus(o) }) }), _jsx(TableCell, { className: cn("text-sm", !o.valid_until && "text-muted-foreground"), children: formatDatum(o.valid_until) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: formatDatum(o.created_at) })] }, o.id)))] })] }) }) }), _jsx(NieuweOfferteDialog, { open: dialogOpen, onOpenChange: setDialogOpen, onCreated: (id) => {
+                    reload();
+                    navigate({ to: "/offertes/$offerteId", params: { offerteId: id } });
+                } }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Werkbonnen, monteurnotities en pakketten worden beheerd in de module Werkbonnen." })] }));
+}

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

@@ -0,0 +1,8 @@
+interface Props {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCreated: (offerteId: string) => void;
+}
+export declare function NieuweOfferteDialog({ open, onOpenChange, onCreated }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=NieuweOfferteDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NieuweOfferteDialog.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/NieuweOfferteDialog.tsx"],"names":[],"mappings":"AAsBA,UAAU,KAAK;IACb,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAsBD,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,KAAK,+BAkH3E"}

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { supabase, toast, Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@flowselections/core";
+import { formatEuro } from "../../lib/offertes";
+const db = supabase;
+const AFGEROND_STATUSSEN = ["completed", "invoicing"];
+function bronStatusLabel(status) {
+    switch (status) {
+        case "completed":
+            return "Gereed";
+        case "invoicing":
+            return "Te factureren";
+        case "in_progress":
+            return "In behandeling";
+        case "planned_visible":
+        case "planned_hidden":
+            return "Gepland";
+        case "unassigned":
+            return "Niet toegewezen";
+        default:
+            return status ?? "Onbekend";
+    }
+}
+export function NieuweOfferteDialog({ open, onOpenChange, onCreated }) {
+    const [bronnen, setBronnen] = useState([]);
+    const [bronId, setBronId] = useState("");
+    const [omschrijving, setOmschrijving] = useState("");
+    const [saving, setSaving] = useState(false);
+    useEffect(() => {
+        if (!open)
+            return;
+        (async () => {
+            const { data } = await db.rpc("quote_list_sources", {
+                _source_type: "work_order",
+                _limit: 100,
+            });
+            const rows = Array.isArray(data) ? data : [];
+            const sorted = [...rows].sort((a, b) => {
+                const aDone = AFGEROND_STATUSSEN.includes(a.status ?? "") ? 1 : 0;
+                const bDone = AFGEROND_STATUSSEN.includes(b.status ?? "") ? 1 : 0;
+                return bDone - aDone;
+            });
+            setBronnen(sorted);
+        })();
+    }, [open]);
+    const geselecteerd = bronnen.find((w) => w.id === bronId) ?? null;
+    useEffect(() => {
+        if (!geselecteerd)
+            return;
+        const bron = geselecteerd.description?.trim() ?? "";
+        setOmschrijving(bron ? `Vervolgwerk n.a.v. werkbon: ${bron}` : "");
+    }, [bronId]);
+    const maakOfferte = async () => {
+        if (!geselecteerd) {
+            toast.error("Kies eerst een werkbon");
+            return;
+        }
+        setSaving(true);
+        try {
+            const { data, error } = await db.rpc("quote_create_from_source", {
+                _source_type: "work_order",
+                _source_id: geselecteerd.id,
+                _payload: { omschrijving },
+            });
+            if (error || !data)
+                throw error ?? new Error("geen id");
+            toast.success("Offerte aangemaakt");
+            onOpenChange(false);
+            setBronId("");
+            setOmschrijving("");
+            onCreated(data);
+        }
+        catch {
+            toast.error("Offerte aanmaken mislukt");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Nieuwe offerte vanuit werkbon" }) }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "werkbon", children: "Werkbon" }), _jsxs(Select, { value: bronId, onValueChange: setBronId, children: [_jsx(SelectTrigger, { id: "werkbon", children: _jsx(SelectValue, { placeholder: "Kies een werkbon" }) }), _jsx(SelectContent, { className: "max-h-72", children: bronnen.map((w) => (_jsxs(SelectItem, { value: w.id, children: [_jsx("span", { className: "font-medium", children: w.number }), _jsx("span", { className: "mx-2 text-muted-foreground", children: "\u00B7" }), _jsx("span", { className: "text-muted-foreground", children: bronStatusLabel(w.status) }), _jsx("span", { className: "mx-2 text-muted-foreground", children: "\u00B7" }), (w.description ?? "").slice(0, 40)] }, w.id))) })] })] }), geselecteerd && (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Mandaat op deze werkbon: ", formatEuro(geselecteerd.budget_mandate_cents ?? 0)] })), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "omschrijving", children: "Omschrijving" }), _jsx(Textarea, { id: "omschrijving", rows: 4, value: omschrijving, onChange: (e) => setOmschrijving(e.target.value), placeholder: "Wat wordt er aangeboden?" })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Annuleren" }), _jsx(Button, { onClick: maakOfferte, disabled: saving || !bronId, children: "Offerte aanmaken" })] })] }) }));
+}

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

@@ -0,0 +1,6 @@
+interface Props {
+    offerteId: string;
+}
+export declare function OfferteDetailPage({ offerteId }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=OfferteDetailPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OfferteDetailPage.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/OfferteDetailPage.tsx"],"names":[],"mappings":"AAwBA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,EAAE,KAAK,+BAgPrD"}

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ============================================================================
+// src/components/offertes/OfferteDetailPage.tsx — detailpagina van één offerte
+// Geen eigen <Header /> — die levert de shell via staticData.title
+// ============================================================================
+import { useNavigate } from "@tanstack/react-router";
+import { Button, Card, CardContent, CardHeader, CardTitle, Separator, Textarea, cn, toast, } from "@flowselections/core";
+import { ArrowLeft, CheckCircle2, Send, ShieldCheck, XCircle } from "lucide-react";
+import { useOfferte } from "../../hooks/useOfferte";
+import { useWerkbonPakketten } from "../../hooks/useWerkbonPakketten";
+import { OfferteRegelsEditor } from "./OfferteRegelsEditor";
+import { OfferteStatusBadge } from "./OfferteStatusBadge";
+import { effectieveStatus, formatDatum, formatEuro } from "../../lib/offertes";
+export function OfferteDetailPage({ offerteId }) {
+    const navigate = useNavigate();
+    const { offerte, klantNaam, werkbonNummer, regels, events, restantMandaat, loading, updateOfferte, addRegel, updateRegel, deleteRegel, naarWerkbon, } = useOfferte(offerteId);
+    const { pakketten } = useWerkbonPakketten();
+    if (loading) {
+        return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Laden\u2026" });
+    }
+    if (!offerte) {
+        return (_jsxs("main", { className: "space-y-4 p-6", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Deze offerte bestaat niet (meer)." }), _jsx(Button, { variant: "outline", onClick: () => navigate({ to: "/offertes" }), children: "Terug naar overzicht" })] }));
+    }
+    const status = effectieveStatus(offerte);
+    const bewerkbaar = ["concept", "mandaat"].includes(status);
+    const binnenMandaat = offerte.total_cents > 0 && offerte.total_cents <= restantMandaat;
+    const isOmgezet = Boolean(offerte.follow_up_werkbon_id);
+    const markeerMandaat = async () => {
+        await updateOfferte({ status: "mandaat", binnen_mandaat: true, mandaat_restant_cents: restantMandaat }, "mandaat_bevestigd", "Binnen mandaat — geen verzending naar klant nodig");
+    };
+    const verzenden = () => updateOfferte({ status: "verzonden", sent_at: new Date().toISOString() }, "verzonden", "Offerte verzonden naar de klant");
+    const goedkeuren = () => updateOfferte({ status: "goedgekeurd", approved_at: new Date().toISOString() }, "goedgekeurd", "Offerte goedgekeurd");
+    const afwijzen = () => updateOfferte({ status: "afgewezen", rejected_at: new Date().toISOString() }, "afgewezen", "Offerte afgewezen");
+    const omzetten = async () => {
+        const ok = await naarWerkbon();
+        if (ok)
+            toast.success("Vervolgwerkbon staat klaar in de werkbonnenmodule");
+    };
+    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs(Button, { variant: "ghost", size: "sm", className: "-ml-2", onClick: () => navigate({ to: "/offertes" }), children: [_jsx(ArrowLeft, { className: "mr-1 h-4 w-4" }), " Offertes"] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h1", { className: "font-mono text-2xl font-semibold text-foreground", children: offerte.offerte_number }), _jsx(OfferteStatusBadge, { status: status })] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [klantNaam ?? "Onbekende klant", werkbonNummer ? ` · vanuit ${werkbonNummer}` : ""] })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [bewerkbaar && !binnenMandaat && (_jsxs(Button, { variant: "outline", onClick: verzenden, children: [_jsx(Send, { className: "mr-1 h-4 w-4" }), " Verzenden"] })), bewerkbaar && binnenMandaat && status !== "mandaat" && (_jsxs(Button, { variant: "outline", onClick: markeerMandaat, children: [_jsx(ShieldCheck, { className: "mr-1 h-4 w-4" }), " Binnen mandaat"] })), ["verzonden", "bekeken"].includes(status) && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", onClick: afwijzen, children: [_jsx(XCircle, { className: "mr-1 h-4 w-4" }), " Afwijzen"] }), _jsxs(Button, { onClick: goedkeuren, children: [_jsx(CheckCircle2, { className: "mr-1 h-4 w-4" }), " Goedkeuren"] })] })), !isOmgezet && (status === "goedgekeurd" || (status === "mandaat" && binnenMandaat)) && (_jsx(Button, { onClick: omzetten, children: "Omzetten naar werkbon" }))] })] }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-3", children: [_jsxs("div", { className: "space-y-6 lg:col-span-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Offerteregels" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(OfferteRegelsEditor, { regels: regels, pakketten: pakketten, readOnly: !bewerkbaar, onAdd: addRegel, onUpdate: updateRegel, onDelete: deleteRegel }), _jsx(Separator, {}), _jsxs("div", { className: "ml-auto w-full max-w-xs space-y-1 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Subtotaal" }), _jsx("span", { children: formatEuro(offerte.subtotal_cents) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsxs("span", { className: "text-muted-foreground", children: ["Btw (", offerte.vat_rate, "%)"] }), _jsx("span", { children: formatEuro(offerte.vat_cents) })] }), _jsxs("div", { className: "flex justify-between text-base font-semibold", children: [_jsx("span", { children: "Totaal" }), _jsx("span", { children: formatEuro(offerte.total_cents) })] })] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Omschrijving" }) }), _jsx(CardContent, { children: _jsx(Textarea, { rows: 4, defaultValue: offerte.omschrijving, disabled: !bewerkbaar, onBlur: (e) => e.target.value !== offerte.omschrijving &&
+                                                updateOfferte({ omschrijving: e.target.value }) }) })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Mandaat" }) }), _jsxs(CardContent, { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Resterend mandaat" }), _jsx("span", { className: "font-medium", children: formatEuro(restantMandaat) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Offertetotaal" }), _jsx("span", { className: "font-medium", children: formatEuro(offerte.total_cents) })] }), _jsx("p", { className: cn("rounded-md px-3 py-2 text-sm", binnenMandaat
+                                                    ? "bg-primary/10 text-foreground"
+                                                    : "bg-muted text-muted-foreground"), children: binnenMandaat
+                                                    ? "Binnen mandaat — deze offerte mag direct worden omgezet in een werkbon zonder verzending naar de klant."
+                                                    : "Buiten mandaat — de klant moet deze offerte eerst goedkeuren." }), isOmgezet && (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Vervolgwerkbon aangemaakt op ", formatDatum(offerte.converted_at), "."] }))] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Gegevens" }) }), _jsxs(CardContent, { className: "space-y-2 text-sm", children: [_jsx(Rij, { label: "Geldig t/m", value: formatDatum(offerte.valid_until) }), _jsx(Rij, { label: "Aangemaakt", value: formatDatum(offerte.created_at) }), _jsx(Rij, { label: "Verzonden", value: formatDatum(offerte.sent_at) }), _jsx(Rij, { label: "Goedgekeurd", value: formatDatum(offerte.approved_at) })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Activiteit" }) }), _jsxs(CardContent, { className: "space-y-3", children: [(Array.isArray(events) ? events : []).length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen activiteit." })), (Array.isArray(events) ? events : []).map((event) => (_jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-medium", children: event.omschrijving || event.event_type }), _jsx("p", { className: "text-xs text-muted-foreground", children: formatDatum(event.created_at) })] }, event.id)))] })] })] })] })] }));
+}
+function Rij({ label, value }) {
+    return (_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { children: value })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"OfferteDetailRoute.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/OfferteDetailRoute.tsx"],"names":[],"mappings":"AASA,wBAAgB,kBAAkB,gCAKjC"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// ============================================================================
+// src/components/offertes/OfferteDetailRoute.tsx
+// Route-component voor /offertes/$offerteId — haalt de param op en rendert
+// de detailpagina. Geen eigen <Header /> — die levert de shell.
+// ============================================================================
+import { useParams } from "@tanstack/react-router";
+import { OfferteDetailPage } from "./OfferteDetailPage";
+export function OfferteDetailRoute() {
+    const params = useParams({ strict: false });
+    const offerteId = params.offerteId ?? "";
+    return _jsx(OfferteDetailPage, { offerteId: offerteId });
+}

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

@@ -0,0 +1,7 @@
+import { type OfferteMetKlant } from "../../lib/offertes";
+interface Props {
+    offertes: OfferteMetKlant[];
+}
+export declare function OfferteKpiCards({ offertes }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=OfferteKpiCards.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OfferteKpiCards.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/OfferteKpiCards.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,eAAe,EACrB,MAAM,oBAAoB,CAAC;AAE5B,UAAU,KAAK;IACb,QAAQ,EAAE,eAAe,EAAE,CAAC;CAC7B;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,+BAwDlD"}

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent } from "@flowselections/core";
+import { CheckCircle2, Clock, Euro, TrendingUp } from "lucide-react";
+import { formatEuro, effectieveStatus, OPEN_STATUSES, } from "../../lib/offertes";
+export function OfferteKpiCards({ offertes }) {
+    const veilig = Array.isArray(offertes) ? offertes : [];
+    const openstaand = veilig
+        .filter((o) => OPEN_STATUSES.includes(effectieveStatus(o)))
+        .reduce((sum, o) => sum + (o.total_cents ?? 0), 0);
+    const besloten = veilig.filter((o) => ["goedgekeurd", "omgezet", "afgewezen"].includes(effectieveStatus(o)));
+    const goedgekeurd = veilig.filter((o) => ["goedgekeurd", "omgezet"].includes(effectieveStatus(o)));
+    const conversie = besloten.length
+        ? Math.round((goedgekeurd.length / besloten.length) * 100)
+        : 0;
+    const doorlooptijden = goedgekeurd
+        .filter((o) => o.approved_at)
+        .map((o) => (new Date(o.approved_at).getTime() - new Date(o.created_at).getTime()) /
+        86400000);
+    const gemiddeld = doorlooptijden.length
+        ? doorlooptijden.reduce((a, b) => a + b, 0) / doorlooptijden.length
+        : 0;
+    const items = [
+        { icon: Euro, label: "Openstaand bedrag", value: formatEuro(openstaand) },
+        { icon: TrendingUp, label: "Conversie", value: `${conversie}%` },
+        { icon: Clock, label: "Gem. doorlooptijd", value: `${gemiddeld.toFixed(1)} dgn` },
+        {
+            icon: CheckCircle2,
+            label: "Goedgekeurd",
+            value: `${goedgekeurd.length} / ${veilig.length}`,
+        },
+    ];
+    return (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: items.map(({ icon: Icon, label, value }) => (_jsx(Card, { children: _jsxs(CardContent, { className: "flex items-center gap-3 p-4", children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted", children: _jsx(Icon, { className: "h-5 w-5 text-primary" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-xs text-muted-foreground", children: label }), _jsx("p", { className: "text-xl font-semibold text-foreground", children: value })] })] }) }, label))) }));
+}

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

@@ -0,0 +1,12 @@
+import { type OfferteRegel, type Pakket } from "../../lib/offertes";
+interface Props {
+    regels: OfferteRegel[];
+    pakketten: Pakket[];
+    readOnly: boolean;
+    onAdd: (regel: Partial<OfferteRegel>) => void;
+    onUpdate: (id: string, patch: Partial<OfferteRegel>) => void;
+    onDelete: (id: string) => void;
+}
+export declare function OfferteRegelsEditor({ regels, pakketten, readOnly, onAdd, onUpdate, onDelete, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=OfferteRegelsEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OfferteRegelsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/OfferteRegelsEditor.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAc,KAAK,YAAY,EAAE,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAEhF,UAAU,KAAK;IACb,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,KAAK,+BA+HP"}

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@flowselections/core";
+import { Plus, Trash2 } from "lucide-react";
+import { formatEuro } from "../../lib/offertes";
+export function OfferteRegelsEditor({ regels, pakketten, readOnly, onAdd, onUpdate, onDelete, }) {
+    const [pakketId, setPakketId] = useState("");
+    const veiligeRegels = Array.isArray(regels) ? regels : [];
+    const veiligePakketten = Array.isArray(pakketten) ? pakketten : [];
+    const voegPakketToe = () => {
+        const pakket = veiligePakketten.find((p) => p.id === pakketId);
+        if (!pakket)
+            return;
+        onAdd({
+            package_id: pakket.id,
+            source: "pakket",
+            omschrijving: pakket.name,
+            quantity: pakket.default_quantity ?? 1,
+            unit_price_cents: pakket.unit_price_cents ?? 0,
+        });
+        setPakketId("");
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Omschrijving" }), _jsx(TableHead, { className: "w-24 text-right", children: "Aantal" }), _jsx(TableHead, { className: "w-32 text-right", children: "Stukprijs" }), _jsx(TableHead, { className: "w-32 text-right", children: "Totaal" }), !readOnly && _jsx(TableHead, { className: "w-12" })] }) }), _jsxs(TableBody, { children: [veiligeRegels.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: readOnly ? 4 : 5, className: "text-sm text-muted-foreground", children: "Nog geen regels toegevoegd." }) })), veiligeRegels.map((regel) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: readOnly ? (_jsx("span", { className: "text-sm", children: regel.omschrijving })) : (_jsx(Input, { defaultValue: regel.omschrijving, onBlur: (e) => e.target.value !== regel.omschrijving &&
+                                                onUpdate(regel.id, { omschrijving: e.target.value }) })) }), _jsx(TableCell, { className: "text-right", children: readOnly ? (Number(regel.quantity)) : (_jsx(Input, { type: "number", step: "0.25", className: "text-right", defaultValue: Number(regel.quantity), onBlur: (e) => onUpdate(regel.id, { quantity: Number(e.target.value) || 0 }) })) }), _jsx(TableCell, { className: "text-right", children: readOnly ? (formatEuro(regel.unit_price_cents)) : (_jsx(Input, { type: "number", step: "0.01", className: "text-right", defaultValue: (regel.unit_price_cents / 100).toFixed(2), onBlur: (e) => onUpdate(regel.id, {
+                                                unit_price_cents: Math.round((Number(e.target.value) || 0) * 100),
+                                            }) })) }), _jsx(TableCell, { className: "text-right font-medium", children: formatEuro(regel.line_total_cents) }), !readOnly && (_jsx(TableCell, { children: _jsx(Button, { variant: "ghost", size: "icon", onClick: () => onDelete(regel.id), children: _jsx(Trash2, { className: "h-4 w-4" }) }) }))] }, regel.id)))] })] }), !readOnly && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Select, { value: pakketId, onValueChange: setPakketId, children: [_jsx(SelectTrigger, { className: "w-72", children: _jsx(SelectValue, { placeholder: "Pakket toevoegen" }) }), _jsx(SelectContent, { children: veiligePakketten.map((p) => (_jsxs(SelectItem, { value: p.id, children: [p.name, " \u2014 ", formatEuro(p.unit_price_cents ?? 0)] }, p.id))) })] }), _jsxs(Button, { variant: "secondary", onClick: voegPakketToe, disabled: !pakketId, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), " Pakket"] }), _jsxs(Button, { variant: "outline", onClick: () => onAdd({ source: "vrij", omschrijving: "Nieuwe regel", quantity: 1, unit_price_cents: 0 }), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), " Vrije regel"] })] }))] }));
+}

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

@@ -0,0 +1,4 @@
+export declare function OfferteStatusBadge({ status }: {
+    status: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=OfferteStatusBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OfferteStatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/OfferteStatusBadge.tsx"],"names":[],"mappings":"AAcA,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,+BAShE"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge, cn } from "@flowselections/core";
+import { OFFERTE_STATUS_LABELS } from "../../lib/offertes";
+const STYLES = {
+    concept: "bg-muted text-muted-foreground border-transparent",
+    mandaat: "bg-accent text-accent-foreground border-transparent",
+    verzonden: "bg-secondary text-secondary-foreground border-transparent",
+    bekeken: "bg-secondary text-secondary-foreground border-transparent",
+    goedgekeurd: "bg-primary text-primary-foreground border-transparent",
+    omgezet: "bg-primary text-primary-foreground border-transparent",
+    afgewezen: "bg-destructive text-destructive-foreground border-transparent",
+    verlopen: "bg-background text-muted-foreground border-border",
+};
+export function OfferteStatusBadge({ status }) {
+    return (_jsx(Badge, { variant: "outline", className: cn("rounded-full px-3 font-medium", STYLES[status] ?? STYLES.concept), children: OFFERTE_STATUS_LABELS[status] ?? status }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"OffertesOverzichtPage.d.ts","sourceRoot":"","sources":["../../../src/components/offertes/OffertesOverzichtPage.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,qBAAqB,gCAiJpC"}

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/offertes/OffertesOverzichtPage.tsx — offerteoverzicht
+// Geen eigen <Header /> — die levert de shell via staticData.title
+// ============================================================================
+import { useMemo, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Button, Card, CardContent, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsTrigger, cn, } from "@flowselections/core";
+import { Building2, Plus, Search } from "lucide-react";
+import { useOffertes } from "../../hooks/useOffertes";
+import { OfferteKpiCards } from "./OfferteKpiCards";
+import { OfferteStatusBadge } from "./OfferteStatusBadge";
+import { NieuweOfferteDialog } from "./NieuweOfferteDialog";
+import { OFFERTE_TABS, effectieveStatus, formatDatum, formatEuro } from "../../lib/offertes";
+export function OffertesOverzichtPage() {
+    const { offertes, loading, reload } = useOffertes();
+    const navigate = useNavigate();
+    const [tab, setTab] = useState("alle");
+    const [zoek, setZoek] = useState("");
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const zichtbaar = useMemo(() => {
+        const lijst = Array.isArray(offertes) ? offertes : [];
+        const tabDef = OFFERTE_TABS.find((t) => t.key === tab);
+        const term = zoek.trim().toLowerCase();
+        return lijst.filter((o) => {
+            const status = effectieveStatus(o);
+            if (tabDef?.statuses && !tabDef.statuses.includes(status))
+                return false;
+            if (!term)
+                return true;
+            return [o.offerte_number, o.klant_naam, o.omschrijving, o.werkbon_nummer]
+                .filter(Boolean)
+                .some((v) => String(v).toLowerCase().includes(term));
+        });
+    }, [offertes, tab, zoek]);
+    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold text-foreground", children: "Offertes" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Offertes vanuit werkbonnen, klantgoedkeuring en vervolgwerk" })] }), _jsxs(Button, { onClick: () => setDialogOpen(true), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), " Nieuwe offerte"] })] }), _jsx(OfferteKpiCards, { offertes: offertes }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(Tabs, { value: tab, onValueChange: setTab, children: _jsx(TabsList, { children: OFFERTE_TABS.map((t) => (_jsx(TabsTrigger, { value: t.key, children: t.label }, t.key))) }) }), _jsxs("div", { className: "relative w-full max-w-xs", 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 op klant, nummer, omschrijving", value: zoek, onChange: (e) => setZoek(e.target.value) })] })] }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-36", children: "Nr." }), _jsx(TableHead, { children: "Klant" }), _jsx(TableHead, { children: "Omschrijving" }), _jsx(TableHead, { className: "text-right", children: "Totaal" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Geldig t/m" }), _jsx(TableHead, { children: "Aangemaakt" })] }) }), _jsxs(TableBody, { children: [loading && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "text-sm text-muted-foreground", children: "Laden\u2026" }) })), !loading && zichtbaar.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 7, className: "text-sm text-muted-foreground", children: "Geen offertes gevonden." }) })), zichtbaar.map((o) => (_jsxs(TableRow, { className: "cursor-pointer", onClick: () => navigate({ to: "/offertes/$offerteId", params: { offerteId: o.id } }), children: [_jsx(TableCell, { className: "font-mono text-xs font-semibold", children: o.offerte_number }), _jsx(TableCell, { children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-primary/10", children: _jsx(Building2, { className: "h-3.5 w-3.5 text-primary" }) }), _jsx("span", { className: "font-medium", children: o.klant_naam ?? "—" })] }) }), _jsx(TableCell, { className: "max-w-xs truncate text-muted-foreground", children: o.omschrijving || "—" }), _jsx(TableCell, { className: "text-right font-medium", children: formatEuro(o.total_cents) }), _jsx(TableCell, { children: _jsx(OfferteStatusBadge, { status: effectieveStatus(o) }) }), _jsx(TableCell, { className: cn("text-sm", !o.valid_until && "text-muted-foreground"), children: formatDatum(o.valid_until) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: formatDatum(o.created_at) })] }, o.id)))] })] }) }) }), _jsx(NieuweOfferteDialog, { open: dialogOpen, onOpenChange: setDialogOpen, onCreated: (id) => {
+                    reload();
+                    navigate({ to: "/offertes/$offerteId", params: { offerteId: id } });
+                } }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Werkbonnen, monteurnotities en pakketten worden beheerd in de module Werkbonnen." })] }));
+}

package/dist-lib/hooks/useOfferte.d.ts

@@ -0,0 +1,17 @@
+import type { Offerte, OfferteEvent, OfferteRegel } from "../lib/offertes";
+export declare function useOfferte(offerteId: string): {
+    offerte: Offerte | null;
+    klantNaam: string | null;
+    werkbonNummer: string | null;
+    regels: OfferteRegel[];
+    events: OfferteEvent[];
+    restantMandaat: number;
+    loading: boolean;
+    reload: () => Promise<void>;
+    updateOfferte: (patch: Record<string, unknown>, eventType?: string, eventTekst?: string) => Promise<boolean>;
+    addRegel: (regel: Partial<OfferteRegel>) => Promise<void>;
+    updateRegel: (id: string, patch: Partial<OfferteRegel>) => Promise<void>;
+    deleteRegel: (id: string) => Promise<void>;
+    naarWerkbon: () => Promise<boolean>;
+};
+//# sourceMappingURL=useOfferte.d.ts.map

package/dist-lib/hooks/useOfferte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOfferte.d.ts","sourceRoot":"","sources":["../../src/hooks/useOfferte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAI3E,wBAAgB,UAAU,CAAC,SAAS,EAAE,MAAM;;;;;;;;;2BAuE1B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,cAAc,MAAM,eAAe,MAAM;sBAchE,OAAO,CAAC,YAAY,CAAC;sBAgBxB,MAAM,SAAS,OAAO,CAAC,YAAY,CAAC;sBAYpC,MAAM;;EAqCpB"}