@flowselections/dashboard-planner-installatie-techniek 1.0.2 → 1.0.37

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/74cd71d5-b2ff-473a-8ed5-9a68ede2ca92).
 
 - **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.

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

@@ -0,0 +1,11 @@
+import type { DashboardData } from "../lib/dashboard-planner-installatie-techniek.types";
+import type { FlowModule } from "@flowselections/core";
+/** `modules`: optioneel door de shell meegegeven, voor de paginakeuze bij snelkoppelingen. */
+export declare function DashboardPlannerInstallatieTechniekPage({ modules }?: {
+    modules?: FlowModule[];
+}): import("react").JSX.Element;
+export declare function DashboardModuleNavigatie({ kpis, loading }: {
+    kpis: DashboardData["kpis"];
+    loading: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DashboardPlannerInstallatieTechniekPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardPlannerInstallatieTechniekPage.d.ts","sourceRoot":"","sources":["../../src/components/DashboardPlannerInstallatieTechniekPage.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qDAAqD,CAAC;AAIzF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AA0FvD,8FAA8F;AAC9F,wBAAgB,uCAAuC,CAAC,EAAE,OAAO,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,UAAU,EAAE,CAAA;CAAO,+BAyGnG;AAED,wBAAgB,wBAAwB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,+BAiF5G"}

package/dist-lib/components/DashboardPlannerInstallatieTechniekPage.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/DashboardPlannerInstallatieTechniekPage.tsx
+// ============================================================================
+// Dashboard: één tegel per Installatie Techniek-module, met een telling uit
+// de database. GEEN <Header /> — de shell levert die.
+// ============================================================================
+import { DASHBOARD_TIJDZONE } from "../lib/dashboard-constanten";
+import { useEffect, useRef, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import { Link } from "@tanstack/react-router";
+import { AlertTriangle, ArrowUpRight, CalendarDays, Clock, FileText, Mail, Receipt, RefreshCw, Wrench, } from "lucide-react";
+import { Button, Card, CardContent, cn, Skeleton, toast, useAuth } from "@flowselections/core";
+import { getDashboardData } from "../lib/dashboard-planner-installatie-techniek.functions";
+import { MODULE_TEGELS } from "../lib/dashboard-planner-installatie-techniek.modules";
+import { DashboardStatistieken, normaliseerStats } from "./DashboardStatistieken";
+import { DashboardSnelkoppelingen } from "./DashboardSnelkoppelingen";
+import { dashboardViewportStyles } from "./dashboard-viewport";
+const ICONEN = {
+    planning: CalendarDays,
+    werkbonnen: Wrench,
+    urenregistratie: Clock,
+    "e-mail": Mail,
+    offertes: FileText,
+    facturen: Receipt,
+};
+const MODULE_KLEUREN = {
+    planning: {
+        badge: "bg-blue-500/10 text-blue-600 dark:text-blue-300",
+        chip: "bg-blue-500/5",
+        tint: "from-blue-500/10",
+        hoverBorder: "group-hover:border-blue-500/45",
+        hoverText: "group-hover:text-blue-600 dark:group-hover:text-blue-300",
+    },
+    werkbonnen: {
+        badge: "bg-orange-500/10 text-orange-600 dark:text-orange-300",
+        chip: "bg-orange-500/5",
+        tint: "from-orange-500/10",
+        hoverBorder: "group-hover:border-orange-500/45",
+        hoverText: "group-hover:text-orange-600 dark:group-hover:text-orange-300",
+    },
+    urenregistratie: {
+        badge: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+        chip: "bg-emerald-500/5",
+        tint: "from-emerald-500/10",
+        hoverBorder: "group-hover:border-emerald-500/45",
+        hoverText: "group-hover:text-emerald-600 dark:group-hover:text-emerald-300",
+    },
+    "e-mail": {
+        badge: "bg-violet-500/10 text-violet-600 dark:text-violet-300",
+        chip: "bg-violet-500/5",
+        tint: "from-violet-500/10",
+        hoverBorder: "group-hover:border-violet-500/45",
+        hoverText: "group-hover:text-violet-600 dark:group-hover:text-violet-300",
+    },
+    offertes: {
+        badge: "bg-slate-500/10 text-slate-600 dark:text-slate-300",
+        chip: "bg-slate-500/5",
+        tint: "from-slate-500/10",
+        hoverBorder: "group-hover:border-slate-500/45",
+        hoverText: "group-hover:text-slate-600 dark:group-hover:text-slate-300",
+    },
+    facturen: {
+        badge: "bg-red-500/10 text-red-600 dark:text-red-300",
+        chip: "bg-red-500/5",
+        tint: "from-red-500/10",
+        hoverBorder: "group-hover:border-red-500/45",
+        hoverText: "group-hover:text-red-600 dark:group-hover:text-red-300",
+    },
+};
+const STANDAARD_KLEUR = MODULE_KLEUREN.planning;
+const EMPTY = {
+    kpis: {
+        planningNietIngepland: null,
+        werkbonnenOpen: null,
+        urenTeBeoordelen: null,
+        mailsTeControleren: null,
+        offertesMeerwerk: null,
+        facturenTeFactureren: null,
+    },
+};
+function normaliseerDashboard(data) {
+    const d = (data ?? {});
+    const raw = (d.kpis && typeof d.kpis === "object" ? d.kpis : {});
+    const kpis = { ...EMPTY.kpis };
+    for (const k of Object.keys(kpis)) {
+        const v = raw[k];
+        kpis[k] = typeof v === "number" && Number.isFinite(v) ? v : null;
+    }
+    return { kpis };
+}
+/** `modules`: optioneel door de shell meegegeven, voor de paginakeuze bij snelkoppelingen. */
+export function DashboardPlannerInstallatieTechniekPage({ modules } = {}) {
+    const { user, profile } = useAuth();
+    const queryClient = useQueryClient();
+    const fetchDashboard = useServerFn(getDashboardData);
+    const [wekenTerug, setWekenTerug] = useState(0);
+    const mainRef = useRef(null);
+    useEffect(() => {
+        const main = mainRef.current;
+        if (!main)
+            return;
+        const measure = () => {
+            const top = main.getBoundingClientRect().top + window.scrollY;
+            main.style.setProperty("--dashboard-height", `${Math.max(0, window.innerHeight - top)}px`);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        if (main.parentElement)
+            observer.observe(main.parentElement);
+        window.addEventListener("resize", measure);
+        return () => { observer.disconnect(); window.removeEventListener("resize", measure); };
+    }, []);
+    const { data, isLoading, isFetching, isError, refetch, error } = useQuery({
+        queryKey: ["dashboard-planner-installatie-techniek", wekenTerug],
+        queryFn: async () => {
+            try {
+                const res = await fetchDashboard({ data: { wekenTerug } });
+                if (res && typeof res === "object" && "error" in res && res.error) {
+                    throw new Error(`Dashboard laden mislukt (${String(res.error)})`);
+                }
+                return res;
+            }
+            catch (err) {
+                if (err instanceof Response) {
+                    const tekst = await err.text().catch(() => "");
+                    throw new Error(`Dashboard laden mislukt (${err.status}) ${tekst}`.trim());
+                }
+                throw err instanceof Error ? err : new Error(String(err));
+            }
+        },
+        staleTime: 30000,
+        retry: false,
+    });
+    useEffect(() => {
+        const formatter = new Intl.DateTimeFormat("en-CA", { timeZone: DASHBOARD_TIJDZONE, year: "numeric", month: "2-digit", day: "2-digit" });
+        let day = formatter.format(new Date());
+        const checkDay = () => {
+            const next = formatter.format(new Date());
+            if (next !== day) {
+                day = next;
+                void queryClient.invalidateQueries({ queryKey: ["dashboard-planner-installatie-techniek"] });
+            }
+        };
+        const timer = window.setInterval(checkDay, 15000);
+        window.addEventListener("focus", checkDay);
+        document.addEventListener("visibilitychange", checkDay);
+        return () => {
+            window.clearInterval(timer);
+            window.removeEventListener("focus", checkDay);
+            document.removeEventListener("visibilitychange", checkDay);
+        };
+    }, [queryClient]);
+    const dashboard = normaliseerDashboard(data);
+    const handleVernieuwen = () => {
+        queryClient.invalidateQueries({ queryKey: ["dashboard-planner-installatie-techniek"] });
+        refetch();
+        toast.success("Dashboard ververst");
+    };
+    return (_jsxs("main", { ref: mainRef, className: "planner-dashboard px-4 pb-6 pt-2 space-y-4 lg:px-6", children: [_jsx("style", { children: dashboardViewportStyles }), _jsxs("div", { className: "dashboard-toolbar flex flex-wrap items-center justify-between gap-3", children: [_jsxs("p", { className: "min-w-0 text-sm text-muted-foreground", children: ["Welkom terug", profile?.display_name || user?.email ? `, ${profile?.display_name ?? user?.email}` : "", ". Kies een module."] }), _jsx(DashboardSnelkoppelingen, { modules: modules }), _jsxs(Button, { onClick: handleVernieuwen, variant: "outline", size: "sm", className: "h-8 shrink-0 gap-2", children: [_jsx(RefreshCw, { className: `w-4 h-4 ${isFetching ? "animate-spin" : ""}` }), "Vernieuwen"] })] }), isError && (_jsxs("div", { className: "flex items-center gap-3 rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-destructive" }), _jsx("span", { className: "text-muted-foreground", children: error instanceof Error && error.message.includes('unauthorized')
+                            ? 'Je sessie is verlopen — log opnieuw in.'
+                            : 'Kon de aantallen niet laden — probeer het opnieuw met Vernieuwen.' })] })), _jsx(DashboardModuleNavigatie, { kpis: dashboard.kpis, loading: isLoading }), _jsx(DashboardStatistieken, { stats: normaliseerStats(data?.stats), wekenTerug: wekenTerug, onWeek: setWekenTerug, loading: isLoading })] }));
+}
+export function DashboardModuleNavigatie({ kpis, loading }) {
+    return (_jsxs("section", { "aria-labelledby": "dashboard-modules", className: "space-y-2", children: [_jsx("h2", { id: "dashboard-modules", className: "text-base font-semibold leading-5", children: "Modules" }), _jsx("div", { className: "dashboard-module-grid grid grid-cols-1 gap-3 min-[380px]:grid-cols-2 md:grid-cols-3 xl:grid-cols-6", children: MODULE_TEGELS.map((tegel) => {
+                    const Icon = ICONEN[tegel.key] ?? FileText;
+                    const kleur = MODULE_KLEUREN[tegel.key] ?? STANDAARD_KLEUR;
+                    const waarde = tegel.kpi ? kpis[tegel.kpi] : null;
+                    return (_jsx(Link, { to: "/dashboard-planner-installatie-techniek/module/$moduleKey", params: { moduleKey: tegel.key }, "aria-label": `${tegel.titel} openen`, className: "group block min-w-0 rounded-2xl focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(Card, { className: cn("relative flex h-full flex-col overflow-hidden rounded-2xl border-border bg-card shadow-sm transition-all duration-200 group-hover:-translate-y-0.5 group-hover:shadow-md", kleur.hoverBorder), children: _jsxs(CardContent, { className: "dashboard-module-content relative flex h-full min-h-56 flex-col px-4 py-4", children: [_jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none absolute inset-0 bg-gradient-to-b to-transparent", kleur.tint) }), _jsx(ArrowUpRight, { "aria-hidden": "true", className: cn("absolute right-3 top-3 h-4 w-4 text-muted-foreground transition-colors", kleur.hoverText) }), _jsx("div", { className: cn("dashboard-module-icon relative flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl transition-transform duration-200 group-hover:scale-105", kleur.badge), children: _jsx(Icon, { "aria-hidden": "true", className: "h-7 w-7" }) }), _jsx("p", { className: "dashboard-module-title relative mt-4 min-h-6 text-center text-base font-semibold leading-6", children: tegel.titel }), _jsx("div", { className: "dashboard-module-count relative mt-auto pt-4", children: tegel.kpi &&
+                                            (loading ? (_jsx(Skeleton, { className: "h-10 w-28 rounded-xl" })) : (_jsxs("div", { className: cn("inline-flex flex-col rounded-xl px-3 py-1.5 leading-tight", kleur.chip), children: [_jsx("span", { className: "text-xl font-semibold tabular-nums", title: waarde === null ? "Dit cijfer kon niet worden geteld" : undefined, children: waarde === null ? "–" : waarde.toLocaleString("nl-NL") }), _jsx("span", { className: "mt-0.5 text-[11px] text-muted-foreground", children: waarde === null ? "Niet beschikbaar" : tegel.getalLabel })] }))) })] }) }) }, tegel.key));
+                }) })] }));
+}

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

@@ -0,0 +1,16 @@
+import { type FlowModule } from "@flowselections/core";
+export declare function DashboardSnelkoppelingen({ modules }: {
+    modules?: FlowModule[];
+}): import("react").JSX.Element;
+export declare function SnelkoppelingToevoegenDialog({ open, onOpenChange, modules, bezig, vol, onAanmaken, }: {
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    modules?: FlowModule[];
+    bezig: boolean;
+    vol?: boolean;
+    onAanmaken: (v: {
+        titel: string;
+        pad: string;
+    }) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DashboardSnelkoppelingen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardSnelkoppelingen.d.ts","sourceRoot":"","sources":["../../src/components/DashboardSnelkoppelingen.tsx"],"names":[],"mappings":"AAKA,OAAO,EAiBL,KAAK,UAAU,EAChB,MAAM,sBAAsB,CAAC;AAiB9B,wBAAgB,wBAAwB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,UAAU,EAAE,CAAA;CAAE,+BAmI/E;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,KAAK,EACL,GAAW,EACX,UAAU,GACX,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACzD,+BA6FA"}

package/dist-lib/components/DashboardSnelkoppelingen.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Rij met persoonlijke snelkoppelingen + venster om ze toe te voegen.
+import { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Link, useRouter } from "@tanstack/react-router";
+import { Plus, X } from "lucide-react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Label, Tabs, TabsContent, TabsList, TabsTrigger, supabase, toast, useAuth, useModuleListTransform, } from "@flowselections/core";
+import { isExterneLink, isGeldigeLink, kanToevoegen, MAX_SNELKOPPELINGEN, } from "../lib/dashboard-snelkoppelingen";
+import { maakPlannerCatalogus, leesSnelkoppelingRechten } from "../lib/dashboard-snelkoppelingen.catalogus";
+import { PlannerPaginaKiezer } from "./PlannerPaginaKiezer";
+const KEY = ["dashboard-snelkoppelingen"];
+// De tabel is nieuw; core's client kent hem nog niet in zijn typen.
+const tabel = () => supabase.from("dashboard_snelkoppelingen");
+export function DashboardSnelkoppelingen({ modules }) {
+    const qc = useQueryClient();
+    const [open, setOpen] = useState(false);
+    const [verwijderModus, setVerwijderModus] = useState(false);
+    const { data } = useQuery({
+        queryKey: KEY,
+        queryFn: async () => {
+            const { data, error } = await tabel()
+                .select("id, titel, pad, volgorde")
+                .order("volgorde", { ascending: true })
+                .order("created_at", { ascending: true });
+            if (error)
+                throw error;
+            return data;
+        },
+    });
+    const items = Array.isArray(data) ? data : [];
+    const vol = !kanToevoegen(items.length);
+    // Verwijdermodus sluit vanzelf als er niets meer te verwijderen valt.
+    useEffect(() => {
+        if (verwijderModus && items.length === 0)
+            setVerwijderModus(false);
+    }, [verwijderModus, items.length]);
+    const toevoegen = useMutation({
+        mutationFn: async (v) => {
+            if (!kanToevoegen(items.length))
+                throw new Error(`Maximaal ${MAX_SNELKOPPELINGEN} snelkoppelingen`);
+            const volgorde = items.reduce((m, i) => Math.max(m, i.volgorde), 0) + 1;
+            const { error } = await tabel().insert({ titel: v.titel, pad: v.pad, volgorde });
+            if (error)
+                throw error;
+        },
+        onSuccess: () => {
+            void qc.invalidateQueries({ queryKey: KEY });
+            setOpen(false);
+            toast.success("Snelkoppeling aangemaakt");
+        },
+        onError: (e) => toast.error(e.message || "Aanmaken mislukt"),
+    });
+    const verwijderen = useMutation({
+        mutationFn: async (id) => {
+            // .select() zodat we zien of er echt een rij is verwijderd;
+            // zonder rij geeft de database anders geen fout en lijkt de knop dood.
+            const { data, error } = await tabel().delete().eq("id", id).select("id");
+            if (error)
+                throw error;
+            if (!Array.isArray(data) || data.length === 0) {
+                throw new Error("Kon niet worden verwijderd — ververs de pagina en probeer opnieuw");
+            }
+        },
+        onSuccess: () => {
+            void qc.invalidateQueries({ queryKey: KEY });
+            toast.success("Snelkoppeling verwijderd");
+        },
+        onError: (e) => toast.error(e.message || "Verwijderen mislukt"),
+    });
+    return (_jsxs("div", { className: "dashboard-shortcuts flex min-w-0 flex-1 items-start gap-2 pt-1 pb-6", children: [_jsxs("div", { className: "flex shrink-0 flex-col items-start gap-1", children: [_jsxs(Button, { size: "sm", variant: "outline", className: "h-8 gap-1.5", disabled: vol, title: vol ? `Maximaal ${MAX_SNELKOPPELINGEN} snelkoppelingen` : undefined, onClick: () => setOpen(true), children: ["Snelkoppeling toevoegen", _jsx(Plus, { className: "h-4 w-4" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "sm", variant: verwijderModus ? "destructive" : "outline", className: "h-5 border px-2 text-[10px]", "aria-pressed": verwijderModus, onClick: () => setVerwijderModus((v) => !v), children: "Verwijderen" }), vol && (_jsxs("p", { className: "text-[10px] leading-none text-muted-foreground", children: ["Maximaal ", MAX_SNELKOPPELINGEN, " snelkoppelingen"] }))] })] }), _jsx("div", { className: "dashboard-shortcut-items flex min-w-0 flex-1 flex-wrap items-start gap-x-2 gap-y-1.5", children: items.map((s) => (_jsxs("div", { className: "group relative shrink-0", children: [_jsx(Button, { asChild: true, size: "sm", variant: "secondary", className: "h-8 pr-7", children: isExterneLink(s.pad) ? (_jsx("a", { href: s.pad, target: "_blank", rel: "noopener noreferrer", children: s.titel })) : (_jsx(Link, { to: s.pad, children: s.titel })) }), verwijderModus && (_jsx(Button, { variant: "ghost", size: "icon", "aria-label": `${s.titel} verwijderen`, onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                verwijderen.mutate(s.id);
+                            }, className: "absolute right-1 top-1/2 z-10 h-5 w-5 -translate-y-1/2 rounded bg-background p-0.5 text-muted-foreground transition-colors hover:bg-destructive hover:text-destructive-foreground [&_svg]:size-3.5", children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }, s.id))) }), _jsx(SnelkoppelingToevoegenDialog, { open: open, onOpenChange: setOpen, modules: modules, bezig: toevoegen.isPending, vol: vol, onAanmaken: (v) => toevoegen.mutate(v) })] }));
+}
+export function SnelkoppelingToevoegenDialog({ open, onOpenChange, modules, bezig, vol = false, onAanmaken, }) {
+    const router = useRouter();
+    const { user } = useAuth();
+    const shellModules = useModuleListTransform(Array.isArray(modules) ? modules : []);
+    const rechten = useQuery({
+        queryKey: ["dashboard-snelkoppeling-rechten", user?.id],
+        enabled: open && Boolean(user),
+        retry: false,
+        staleTime: 30000,
+        queryFn: async () => {
+            const { data, error } = await supabase.rpc("my_module_permissions");
+            if (error)
+                throw error;
+            return leesSnelkoppelingRechten(data);
+        },
+    });
+    const urenToegang = useQuery({
+        queryKey: ["dashboard-snelkoppeling-uren-toegang", user?.id],
+        enabled: open && Boolean(user),
+        retry: false,
+        staleTime: 30000,
+        queryFn: async () => {
+            const { data, error } = await supabase.rpc("uren_heeft_pagina_toegang");
+            if (error)
+                throw error;
+            return data === true;
+        },
+    });
+    const kiesbaar = maakPlannerCatalogus({
+        modules: shellModules,
+        geregistreerdePaden: Object.keys(router.routesByPath),
+        rechten: Array.isArray(rechten.data) ? rechten.data : [],
+        rechtenBekend: rechten.isSuccess && !rechten.isFetching,
+        urenToegang: urenToegang.isSuccess ? urenToegang.data : undefined,
+    });
+    const [titel, setTitel] = useState("");
+    const [pad, setPad] = useState("");
+    // Een volledig geplakte link van dezelfde site wordt omgezet naar het pad.
+    const origin = typeof window !== "undefined" ? window.location.origin : "";
+    const schoonPad = origin && pad.trim().startsWith(origin) ? pad.trim().slice(origin.length) || "/" : pad.trim();
+    const padFout = schoonPad !== "" && !isGeldigeLink(schoonPad);
+    const kanAanmaken = titel.trim() !== "" && titel.trim().length <= 60 && isGeldigeLink(schoonPad) && !bezig;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-h-[90dvh] overflow-y-auto sm:max-w-xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Snelkoppeling toevoegen" }), _jsx(DialogDescription, { children: "Plak een link uit het ERP of kies een pagina." })] }), vol && (_jsxs("p", { className: "rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: ["Je hebt maximaal ", MAX_SNELKOPPELINGEN, " snelkoppelingen. Verwijder er een om een nieuwe toe te voegen."] })), _jsxs(Tabs, { defaultValue: "pagina", children: [_jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [_jsx(TabsTrigger, { value: "pagina", children: "Kies een pagina" }), _jsx(TabsTrigger, { value: "link", children: "Link invoegen" })] }), _jsx(TabsContent, { value: "pagina", className: "mt-4", children: _jsx(PlannerPaginaKiezer, { modules: kiesbaar, bezig: bezig || vol, onAanmaken: onAanmaken }) }), _jsxs(TabsContent, { value: "link", className: "mt-4 space-y-3", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "sk-titel", children: "Titel" }), _jsx(Input, { id: "sk-titel", value: titel, maxLength: 60, onChange: (e) => setTitel(e.target.value), placeholder: "Bijv. Uren te beoordelen" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "sk-pad", children: "Link" }), _jsx(Input, { id: "sk-pad", value: pad, onChange: (e) => setPad(e.target.value), placeholder: "/urenregistratie/week of https://..." }), padFout && _jsx("p", { className: "text-xs text-destructive", children: "Gebruik een geldig pad (/...) of een http(s)-link." })] }), _jsx(Button, { disabled: !kanAanmaken || vol, onClick: () => {
+                                        onAanmaken({ titel: titel.trim(), pad: schoonPad });
+                                        setTitel("");
+                                        setPad("");
+                                    }, children: "Aanmaken" })] })] })] }) }));
+}

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

@@ -0,0 +1,9 @@
+import type { DashboardStats } from "../lib/dashboard-planner-installatie-techniek.types";
+export declare function normaliseerStats(raw: unknown): DashboardStats;
+export declare function DashboardStatistieken({ stats, loading, wekenTerug, onWeek }: {
+    stats: DashboardStats;
+    loading: boolean;
+    wekenTerug?: number;
+    onWeek?: (wekenTerug: number) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DashboardStatistieken.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardStatistieken.d.ts","sourceRoot":"","sources":["../../src/components/DashboardStatistieken.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAY1F,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,OAAO,GAAG,cAAc,CAgD7D;AAmCD,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAc,EAAE,MAAM,EAAE,EAAE;IAChF,KAAK,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5D,+BA2EA"}

package/dist-lib/components/DashboardStatistieken.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Statistieken-blok onder de module-vakken: drie kaarten met kerngetallen
+// kerngetallen en een klein ingebouwd grafiekje (geen extra pakket).
+import { CalendarCheck, FileSignature, Wallet } from "lucide-react";
+import { Card, CardContent, Skeleton } from "@flowselections/core";
+import { WerkbonnenFunnel } from "./WerkbonnenFunnel";
+import { WerkurenGrafiek } from "./WerkurenGrafiek";
+const euro = (cents) => cents === null
+    ? "–"
+    : new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(cents / 100);
+const num = (v, suffix = "") => (v === null ? "–" : `${v.toLocaleString("nl-NL")}${suffix}`);
+function num0(v) {
+    return typeof v === "number" && Number.isFinite(v) ? v : null;
+}
+export function normaliseerStats(raw) {
+    const s = (raw && typeof raw === "object" ? raw : {});
+    const o = s.omzetOpen ?? {};
+    const p = s.offertePijplijn ?? {};
+    const w = s.werkUren ?? {};
+    const ws = s.werkbonSoorten ?? {};
+    const wd = s.werkbonDuur ?? {};
+    const fb = s.facturenBetaald ?? {};
+    return {
+        facturenBetaald: { verzondenAantal: num0(fb.verzondenAantal), betaaldAantal: num0(fb.betaaldAantal) },
+        omzetOpen: {
+            bedragCents: num0(o.bedragCents),
+            aantal: num0(o.aantal),
+            vervallenCents: num0(o.vervallenCents),
+            vervallenAantal: num0(o.vervallenAantal),
+        },
+        offertePijplijn: {
+            verzondenCents: num0(p.verzondenCents),
+            verzondenAantal: num0(p.verzondenAantal),
+            conceptCents: num0(p.conceptCents),
+            acceptatiePct: num0(p.acceptatiePct),
+            trechter: Array.isArray(p.trechter)
+                ? p.trechter.map((t) => ({ stap: String(t?.stap ?? ""), aantal: num0(t?.aantal) ?? 0 }))
+                : [],
+        },
+        werkUren: {
+            afgerondDezeMaand: num0(w.afgerondDezeMaand),
+            urenDezeWeek: num0(w.urenDezeWeek),
+            overurenDezeWeek: num0(w.overurenDezeWeek),
+            firstTimeFixPct: num0(w.firstTimeFixPct),
+            firstTimeFixBasis: num0(w.firstTimeFixBasis),
+            urenPerDag: Array.isArray(w.urenPerDag)
+                ? w.urenPerDag.map((d) => ({ dag: String(d?.dag ?? ""), uren: num0(d?.uren) ?? 0 }))
+                : [],
+        },
+        werkbonSoorten: {
+            totaal: num0(ws.totaal),
+            soorten: Array.isArray(ws.soorten)
+                ? ws.soorten.map((x) => ({ soort: String(x?.soort ?? ""), aantal: num0(x?.aantal) ?? 0 }))
+                : [],
+        },
+        werkbonDuur: {
+            basis: num0(wd.basis),
+            onder1: num0(wd.onder1) ?? 0,
+            tussen1en3: num0(wd.tussen1en3) ?? 0,
+            boven3: num0(wd.boven3) ?? 0,
+        },
+    };
+}
+function StatKaart({ titel, icon: Icon, children, regels, loading }) {
+    return (_jsx(Card, { className: "h-full", children: _jsxs(CardContent, { className: "dashboard-stat-content dashboard-hours-content p-4 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: titel }), _jsx("div", { className: "flex items-center justify-center w-8 h-8 rounded-full text-primary bg-primary/10", children: _jsx(Icon, { className: "w-4 h-4" }) })] }), loading ? (_jsx(Skeleton, { className: "h-24 w-full" })) : (_jsxs(_Fragment, { children: [children, _jsx("dl", { className: "grid grid-cols-2 gap-x-4 gap-y-2 border-t pt-3", children: regels.map((r) => (_jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: r.k }), _jsx("dd", { className: "text-sm font-medium", children: r.v })] }, r.k))) })] }))] }) }));
+}
+export function DashboardStatistieken({ stats, loading, wekenTerug = 0, onWeek }) {
+    const { omzetOpen: o, offertePijplijn: p, werkUren: w } = stats;
+    const fb = stats.facturenBetaald;
+    const betaaldPct = fb.verzondenAantal !== null && fb.verzondenAantal > 0 && fb.betaaldAantal !== null
+        ? Math.round((fb.betaaldAantal / fb.verzondenAantal) * 100) : null;
+    return (_jsxs("section", { className: "dashboard-stats space-y-3", children: [_jsx("h2", { className: "text-lg font-semibold tracking-tight", children: "Statistieken" }), _jsxs("div", { className: "dashboard-stats-grid grid items-stretch gap-4 xl:grid-cols-3", children: [_jsx(Card, { className: "h-full min-w-0", children: _jsxs(CardContent, { className: "dashboard-stat-content dashboard-financial space-y-3 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Financieel" }), _jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary", children: _jsx(Wallet, { className: "h-4 w-4" }) })] }), loading ? _jsx(Skeleton, { className: "h-56 w-full" }) : _jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium", children: "Openstaande debiteuren" }), _jsx("p", { className: "dashboard-amount mt-1 text-3xl font-semibold", children: euro(o.bedragCents) }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [num(o.aantal), " verzonden, nog niet betaalde facturen"] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: "Betaald \u00B7 afgelopen 4 weken" }), _jsx("span", { className: "text-sm font-semibold tabular-nums", children: num(betaaldPct, "%") })] }), _jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted", role: "progressbar", "aria-label": "Betaalde facturen afgelopen vier weken", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": betaaldPct ?? undefined, children: _jsx("div", { className: "h-full bg-primary", style: { width: `${betaaldPct ?? 0}%` } }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: fb.verzondenAantal === 0 ? "Geen facturen verzonden" : fb.verzondenAantal === null || fb.betaaldAantal === null ? "–" : `${num(fb.betaaldAantal)} van ${num(fb.verzondenAantal)} verzonden facturen betaald` })] }), _jsxs("div", { className: "flex flex-wrap justify-between gap-2 text-xs", children: [_jsxs("span", { className: "text-muted-foreground", children: ["Vervallen \u00B7 ", num(o.vervallenAantal), " facturen"] }), _jsx("span", { className: "font-medium", children: euro(o.vervallenCents) })] })] }), _jsxs("div", { className: "dashboard-offers space-y-3 border-t-2 border-border pt-4", children: [_jsxs("div", { children: [_jsxs("h3", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(FileSignature, { className: "h-4 w-4 text-primary" }), "Offertes in afwachting"] }), _jsx("p", { className: "dashboard-amount mt-1 text-3xl font-semibold", children: euro(p.verzondenCents) }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [num(p.verzondenAantal), "\u00A0wachten op reactie"] })] }), _jsxs("dl", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: "Acceptatiegraad" }), _jsx("dd", { className: "text-sm font-medium", children: num(p.acceptatiePct, "%") })] }), _jsxs("div", { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: "In concept" }), _jsx("dd", { className: "text-sm font-medium", children: euro(p.conceptCents) })] })] })] })] })] }) }), _jsx(WerkbonnenFunnel, {}), _jsx(StatKaart, { titel: "Werk & uren", icon: CalendarCheck, loading: loading, regels: [
+                            { k: wekenTerug === 0 ? "Uren deze week" : "Uren in deze week", v: num(w.urenDezeWeek, " u") },
+                            { k: wekenTerug === 0 ? "Overuren deze week" : "Overuren in deze week", v: num(w.overurenDezeWeek, " u") },
+                            {
+                                k: "In één keer opgelost",
+                                v: w.firstTimeFixPct === null ? "–" : `${w.firstTimeFixPct}% (van ${w.firstTimeFixBasis})`,
+                            },
+                        ], children: _jsx(WerkurenGrafiek, { dagen: w.urenPerDag, beschikbaar: w.urenDezeWeek !== null, wekenTerug: wekenTerug, onWeek: onWeek }) })] })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModulePlaceholderPage.d.ts","sourceRoot":"","sources":["../../src/components/ModulePlaceholderPage.tsx"],"names":[],"mappings":"AAOA,wBAAgB,qBAAqB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,+BAqBzE"}

package/dist-lib/components/ModulePlaceholderPage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Tijdelijke pagina voor een Installatie Techniek-module. Verdwijnt zodra alle
+// modules in één shell draaien en de tegels direct naar de module wijzen.
+import { Link } from "@tanstack/react-router";
+import { ArrowLeft, Construction } from "lucide-react";
+import { Button, Card, CardContent } from "@flowselections/core";
+import { vindModuleTegel } from "../lib/dashboard-planner-installatie-techniek.modules";
+export function ModulePlaceholderPage({ moduleKey }) {
+    const titel = vindModuleTegel(moduleKey)?.titel ?? "Module";
+    return (_jsx("main", { className: "p-6", children: _jsx(Card, { className: "max-w-xl", children: _jsxs(CardContent, { className: "p-8 space-y-4", children: [_jsx(Construction, { className: "w-10 h-10 text-primary" }), _jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: titel }), _jsx("p", { className: "text-muted-foreground", children: "Deze module komt hier beschikbaar zodra alle Installatie Techniek-modules in de shell staan." }), _jsx(Button, { asChild: true, variant: "outline", className: "gap-2", children: _jsxs(Link, { to: "/dashboard-planner-installatie-techniek", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), "Terug naar dashboard"] }) })] }) }) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlannerInstallatieTechniekLogo.d.ts","sourceRoot":"","sources":["../../src/components/PlannerInstallatieTechniekLogo.tsx"],"names":[],"mappings":"AAKA,UAAU,mCAAmC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,8BAA8B,CAAC,EAAE,SAAS,EAAE,EAAE,mCAAmC,+BAsBhG"}

package/dist-lib/components/PlannerInstallatieTechniekLogo.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PlannerInstallatieTechniekLogo({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": "true", children: [_jsx("rect", { width: "40", height: "40", rx: "8", fill: "currentColor", opacity: "0.1" }), _jsx("path", { d: "M12 28 L20 20 M24 16 a4 4 0 1 0 -2.8 -1.2 L19 17 a1.4 1.4 0 0 0 0 2 L22 22 a1.4 1.4 0 0 0 2 0 l2.2 -2.2 A4 4 0 0 0 24 16 Z", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", fill: "currentColor", fillOpacity: "0.15" })] }));
+}

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

@@ -0,0 +1,10 @@
+import type { KiesbareModule } from "../lib/dashboard-snelkoppelingen";
+export declare function PlannerPaginaKiezer({ modules, bezig, onAanmaken }: {
+    modules: KiesbareModule[];
+    bezig: boolean;
+    onAanmaken: (waarde: {
+        titel: string;
+        pad: string;
+    }) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PlannerPaginaKiezer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlannerPaginaKiezer.d.ts","sourceRoot":"","sources":["../../src/components/PlannerPaginaKiezer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAEvE,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE;IAClE,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9D,+BA4CA"}

package/dist-lib/components/PlannerPaginaKiezer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, cn } from "@flowselections/core";
+import { ChevronRight, LockKeyhole } from "lucide-react";
+export function PlannerPaginaKiezer({ modules, bezig, onAanmaken }) {
+    const [actief, setActief] = useState(null);
+    const actieveModule = modules.find((m) => m.key === actief) ?? modules[0];
+    if (modules.length === 0)
+        return _jsx("p", { className: "text-sm text-muted-foreground", children: "Geen modules beschikbaar." });
+    return (_jsxs("div", { className: "grid min-w-0 grid-cols-2 gap-3", children: [_jsx("ul", { "aria-label": "Plannermodules", className: "max-h-80 min-w-0 space-y-1 overflow-y-auto border-r pr-3", children: modules.map((m) => (_jsx("li", { children: _jsxs(Button, { variant: "ghost", onMouseEnter: () => setActief(m.key), onFocus: () => setActief(m.key), onClick: () => setActief(m.key), "aria-pressed": actieveModule?.key === m.key, className: cn("h-auto min-h-9 w-full justify-between gap-1 whitespace-normal px-2 py-2 text-left text-sm", actieveModule?.key === m.key && "bg-muted font-medium"), children: [_jsx("span", { className: "min-w-0 break-words", children: m.titel }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0 text-muted-foreground" })] }) }, m.key))) }), _jsx("ul", { "aria-label": `Pagina’s van ${actieveModule?.titel ?? "module"}`, className: "max-h-80 min-w-0 space-y-1 overflow-y-auto", children: actieveModule?.paginas.map((p) => (_jsx("li", { children: _jsxs(Button, { variant: "ghost", disabled: bezig || p.beschikbaar === false, title: p.reden, onClick: () => {
+                            if (!p.pad || p.beschikbaar === false)
+                                return;
+                            onAanmaken({ titel: `${actieveModule.titel.replace(/ \(planner\)$/, "")} · ${p.titel}`.slice(0, 60), pad: p.pad });
+                        }, className: "h-auto min-h-9 w-full justify-start gap-2 whitespace-normal px-2 py-2 text-left text-sm", children: [p.beschikbaar === false && _jsx(LockKeyhole, { className: "h-3.5 w-3.5 shrink-0" }), _jsxs("span", { className: "min-w-0 break-words", children: [p.titel, p.reden && _jsx("span", { className: "mt-0.5 block text-xs font-normal", children: p.reden })] })] }) }, `${p.titel}:${p.pad}`))) })] }));
+}

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

@@ -0,0 +1,8 @@
+import { type WerkbonFunnelData } from '../lib/dashboard-werkbon-funnel';
+import { type FunnelIndeling } from '../lib/funnel-indeling';
+export declare function WerkbonnenFunnelInhoud({ data, indeling }: {
+    data: WerkbonFunnelData;
+    indeling?: FunnelIndeling;
+}): import("react").JSX.Element;
+export declare function WerkbonnenFunnel(): import("react").JSX.Element;
+//# sourceMappingURL=WerkbonnenFunnel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WerkbonnenFunnel.d.ts","sourceRoot":"","sources":["../../src/components/WerkbonnenFunnel.tsx"],"names":[],"mappings":"AAOA,OAAO,EAA6E,KAAK,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEpJ,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAkBjF,wBAAgB,sBAAsB,CAAC,EAAE,IAAI,EAAE,QAA6B,EAAE,EAAE;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,QAAQ,CAAC,EAAE,cAAc,CAAA;CAAE,+BAarI;AAED,wBAAgB,gBAAgB,gCA0C/B"}

package/dist-lib/components/WerkbonnenFunnel.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DASHBOARD_TIJDZONE } from "../lib/dashboard-constanten";
+import { useEffect, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useServerFn } from '@tanstack/react-start';
+import { Clipboard, LogIn, RefreshCw } from 'lucide-react';
+import { Button, Card, CardContent, Skeleton, useAuth } from '@flowselections/core';
+import { getWerkbonFunnel } from '../lib/dashboard-planner-installatie-techniek.functions';
+import { maakFunnelStromen, funnelFoutMelding, FUNNEL_HERKOMST } from '../lib/dashboard-werkbon-funnel';
+import { SankeyChart } from './ui/sankey-chart';
+import { STANDAARD_INDELING } from '../lib/funnel-indeling';
+const aantal = (n) => n.toLocaleString('nl-NL');
+const datum = (value) => new Intl.DateTimeFormat('nl-NL', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' }).format(new Date(`${value}T12:00:00Z`));
+const LEGENDA = ['standby', 'mail', 'extra_werk', 'handmatig'].map(soort => ({ soort, ...FUNNEL_HERKOMST[soort] }));
+// Rustige melding als de cijfers niet opgevraagd kunnen worden: de server-function
+// geeft een status terug in plaats van te gooien, dus het scherm valt niet leeg.
+// 'sessie' vraagt om opnieuw in te loggen, 'data' biedt de opvraging opnieuw aan.
+function FunnelMelding({ tekst, actie, opNieuw, opInloggen }) {
+    return _jsxs("div", { role: "alert", className: "space-y-3 py-8 text-center text-sm text-muted-foreground", children: [_jsx("p", { children: tekst }), actie === 'inloggen'
+                ? _jsxs(Button, { size: "sm", onClick: opInloggen, children: [_jsx(LogIn, { className: "mr-2 h-3.5 w-3.5" }), "Inloggen"] })
+                : _jsxs(Button, { variant: "outline", size: "sm", onClick: opNieuw, children: [_jsx(RefreshCw, { className: "mr-2 h-3.5 w-3.5" }), "Opnieuw proberen"] })] });
+}
+export function WerkbonnenFunnelInhoud({ data, indeling = STANDAARD_INDELING }) {
+    const [tip, setTip] = useState(null);
+    return _jsxs(_Fragment, { children: [_jsxs("p", { className: "text-xs text-muted-foreground", children: [datum(data.vanaf), " \u2013 ", datum(data.tot)] }), data.totaal > 0 ? _jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-4 gap-1 text-center text-[10px] text-muted-foreground", children: [_jsx("span", { children: "Herkomst" }), _jsx("span", { children: "Aangemaakt" }), _jsx("span", { children: "Afgerond" }), _jsx("span", { children: "Betaling / extra werk" })] }), _jsx(SankeyChart, { data: maakFunnelStromen(data), total: data.totaal, onTip: setTip, indeling: indeling }), _jsx("div", { role: "status", "aria-live": "polite", className: "dashboard-funnel-tip min-h-[3rem] rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground", children: tip ? _jsxs(_Fragment, { children: [_jsx("div", { className: "font-medium", children: tip.titel }), _jsx("div", { className: "text-muted-foreground", children: tip.tekst })] }) : _jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1 text-muted-foreground", children: LEGENDA.map(s => _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full", style: { backgroundColor: s.kleur }, "aria-hidden": "true" }), s.label] }, s.soort)) }) })] }) : _jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "Geen werkbonnen aangemaakt in deze periode." }), data.onbekend > 0 && _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Van ", aantal(data.onbekend), " eerder getelde werkbonnen is het verdere verloop onbekend."] })] });
+}
+export function WerkbonnenFunnel() {
+    const [periode, setPeriode] = useState('jaar');
+    const { user, signOut } = useAuth();
+    const fetchFunnel = useServerFn(getWerkbonFunnel);
+    const queryClient = useQueryClient();
+    const query = useQuery({ queryKey: ['dashboard-planner-installatie-techniek', 'funnel', user?.id, periode], queryFn: () => fetchFunnel({ data: { periode } }), enabled: Boolean(user?.id), staleTime: 30000, retry: false });
+    useEffect(() => {
+        let dag = new Intl.DateTimeFormat('en-CA', { timeZone: DASHBOARD_TIJDZONE }).format(new Date());
+        const check = () => {
+            const nieuw = new Intl.DateTimeFormat('en-CA', { timeZone: DASHBOARD_TIJDZONE }).format(new Date());
+            if (nieuw !== dag) {
+                dag = nieuw;
+                void queryClient.invalidateQueries({ queryKey: ['dashboard-planner-installatie-techniek', 'funnel'] });
+            }
+        };
+        const timer = window.setInterval(check, 15000);
+        window.addEventListener('focus', check);
+        return () => { window.clearInterval(timer); window.removeEventListener('focus', check); };
+    }, [queryClient]);
+    // Eerst uitloggen en dan het inlogscherm laden. De app stuurt iemand die volgens
+    // de eigen inlogstatus nog ingelogd is direct terug naar het dashboard, dus een
+    // interne sprong kan je meteen weer terugslingeren; een nieuwe pagina-lading na
+    // het uitloggen doet dat niet.
+    const logIn = async () => {
+        try {
+            await signOut();
+        }
+        catch { /* een mislukte uitlog mag het inlogscherm niet blokkeren */ }
+        window.location.assign('/login');
+    };
+    const status = query.isError ? 'data' : query.data?.status;
+    const fout = status === 'sessie' || status === 'data' ? funnelFoutMelding(status) : null;
+    return _jsx(Card, { className: "h-full min-w-0", children: _jsxs(CardContent, { className: "dashboard-stat-content space-y-3 p-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("h3", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(Clipboard, { className: "h-4 w-4 text-primary" }), "Werkbonnen"] }), _jsx("div", { role: "group", "aria-label": "Werkbonnenperiode", className: "flex rounded-md bg-muted p-0.5", children: ['week', 'maand', 'jaar'].map(p => _jsx(Button, { size: "sm", variant: p === periode ? 'secondary' : 'ghost', "aria-pressed": p === periode, onClick: () => setPeriode(p), className: "h-7 px-2 text-xs", children: p === 'week' ? 'Week' : p === 'maand' ? 'Maand' : 'Jaar' }, p)) })] }), !user?.id
+                    ? _jsx(FunnelMelding, { tekst: "Log in om werkbonstatistieken te bekijken.", actie: "inloggen", opNieuw: () => void query.refetch(), opInloggen: () => void logIn() })
+                    : query.isPending
+                        ? _jsx(Skeleton, { className: "dashboard-funnel-loading h-80 w-full" })
+                        : fout
+                            ? _jsx(FunnelMelding, { tekst: fout.tekst, actie: fout.actie, opNieuw: () => void query.refetch(), opInloggen: () => void logIn() })
+                            : query.data && query.data.status === 'ok'
+                                ? _jsx(WerkbonnenFunnelInhoud, { data: query.data.funnel })
+                                : null] }) });
+}