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

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

@@ -0,0 +1,26 @@
+export declare const MAX_WEKEN_TERUG = 6;
+/** Maandag (NL) van de week waarin `nu` valt, als YYYY-MM-DD. */
+export declare function maandagVanWeek(nu: Date): string;
+/** ISO-weeknummer van een YYYY-MM-DD datum. */
+export declare function isoWeek(dag: string): number;
+/** "Week 42 · 12–18 okt" voor de week die op deze maandag begint. */
+export declare function weekLabel(maandag: string): string;
+export declare function werkurenWeek(dagen: {
+    dag: string;
+    uren: number;
+}[], nu: Date, wekenTerug?: number): {
+    dag: string;
+    uren: number;
+    toekomst: boolean;
+    label: string;
+}[];
+export declare function WerkurenGrafiek({ dagen, beschikbaar, wekenTerug, onWeek }: {
+    dagen: {
+        dag: string;
+        uren: number;
+    }[];
+    beschikbaar: boolean;
+    wekenTerug?: number;
+    onWeek?: (wekenTerug: number) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=WerkurenGrafiek.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WerkurenGrafiek.d.ts","sourceRoot":"","sources":["../../src/components/WerkurenGrafiek.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,IAAI,CAAC;AAWjC,iEAAiE;AACjE,wBAAgB,cAAc,CAAC,EAAE,EAAE,IAAI,GAAG,MAAM,CAI/C;AAED,+CAA+C;AAC/C,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO3C;AAID,qEAAqE;AACrE,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAWjD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,SAAI;;;;;IAc5F;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,UAAc,EAAE,MAAM,EAAE,EAAE;IAC9E,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,+BAyCA"}

package/dist-lib/components/WerkurenGrafiek.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '@flowselections/core';
+export const MAX_WEKEN_TERUG = 6;
+import { DASHBOARD_TIJDZONE } from '../lib/dashboard-constanten';
+const TZ = DASHBOARD_TIJDZONE;
+function nlDatum(nu) {
+    const parts = new Intl.DateTimeFormat('en-CA', { timeZone: TZ, year: 'numeric', month: '2-digit', day: '2-digit' }).formatToParts(nu);
+    const value = (type) => parts.find(p => p.type === type)?.value ?? '';
+    return `${value('year')}-${value('month')}-${value('day')}`;
+}
+/** Maandag (NL) van de week waarin `nu` valt, als YYYY-MM-DD. */
+export function maandagVanWeek(nu) {
+    const maandag = new Date(`${nlDatum(nu)}T12:00:00Z`);
+    maandag.setUTCDate(maandag.getUTCDate() - ((maandag.getUTCDay() + 6) % 7));
+    return maandag.toISOString().slice(0, 10);
+}
+/** ISO-weeknummer van een YYYY-MM-DD datum. */
+export function isoWeek(dag) {
+    const d = new Date(`${dag}T12:00:00Z`);
+    const donderdag = new Date(d);
+    donderdag.setUTCDate(d.getUTCDate() + 3 - ((d.getUTCDay() + 6) % 7));
+    const eersteDonderdag = new Date(Date.UTC(donderdag.getUTCFullYear(), 0, 4));
+    eersteDonderdag.setUTCDate(eersteDonderdag.getUTCDate() + 3 - ((eersteDonderdag.getUTCDay() + 6) % 7));
+    return 1 + Math.round((donderdag.getTime() - eersteDonderdag.getTime()) / (7 * 86400000));
+}
+const MAANDEN = ['jan', 'feb', 'mrt', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'];
+/** "Week 42 · 12–18 okt" voor de week die op deze maandag begint. */
+export function weekLabel(maandag) {
+    const dag = (d) => {
+        const [, m, dd] = d.split('-').map(Number);
+        return { dag: dd, maand: MAANDEN[m - 1] };
+    };
+    const zondag = new Date(`${maandag}T12:00:00Z`);
+    zondag.setUTCDate(zondag.getUTCDate() + 6);
+    const a = dag(maandag);
+    const b = dag(zondag.toISOString().slice(0, 10));
+    const bereik = a.maand === b.maand ? `${a.dag}–${b.dag} ${b.maand}` : `${a.dag} ${a.maand}–${b.dag} ${b.maand}`;
+    return `Week ${isoWeek(maandag)} · ${bereik}`;
+}
+export function werkurenWeek(dagen, nu, wekenTerug = 0) {
+    const vandaag = nlDatum(nu);
+    const offset = Math.min(Math.max(wekenTerug, 0), MAX_WEKEN_TERUG);
+    const doel = new Date(nu.getTime() - offset * 7 * 86400000);
+    const maandag = new Date(`${maandagVanWeek(doel)}T12:00:00Z`);
+    return Array.from({ length: 7 }, (_, i) => {
+        const datum = new Date(maandag);
+        datum.setUTCDate(datum.getUTCDate() + i);
+        const dag = datum.toISOString().slice(0, 10);
+        // Toekomst-markering alleen in de huidige week; oude weken zijn volledig voorbij.
+        const toekomst = offset === 0 && dag > vandaag;
+        const uren = toekomst ? 0 : Math.max(0, dagen.find(d => d.dag === dag)?.uren ?? 0);
+        return { dag, uren, toekomst, label: ['ma', 'di', 'wo', 'do', 'vr', 'za', 'zo'][i] };
+    });
+}
+export function WerkurenGrafiek({ dagen, beschikbaar, wekenTerug = 0, onWeek }) {
+    const [nu, setNu] = useState(null);
+    useEffect(() => {
+        setNu(new Date());
+        const timer = window.setInterval(() => setNu(new Date()), 60000);
+        return () => window.clearInterval(timer);
+    }, []);
+    const week = nu ? werkurenWeek(Array.isArray(dagen) ? dagen : [], nu, wekenTerug) : [];
+    const max = Math.max(1, ...week.map(d => d.uren));
+    const urenLabel = (uren) => `${uren.toLocaleString('nl-NL', { maximumFractionDigits: 1 })} u`;
+    const maandag = week[0]?.dag ?? '';
+    const knop = 'inline-flex h-7 w-7 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40';
+    return _jsxs("div", { className: "dashboard-hours space-y-3", children: [_jsxs("div", { className: "dashboard-hours-heading flex items-center justify-between gap-2", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Tot gewerkt" }), onWeek && _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", variant: "outline", size: "icon", className: knop, "aria-label": "Een week terug", disabled: wekenTerug >= MAX_WEKEN_TERUG, onClick: () => onWeek(wekenTerug + 1), children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsx("span", { className: "min-w-32 text-center text-xs font-medium tabular-nums", "aria-live": "polite", children: maandag ? weekLabel(maandag) : '' }), _jsx(Button, { type: "button", variant: "outline", size: "icon", className: knop, "aria-label": "Een week vooruit", disabled: wekenTerug <= 0, onClick: () => onWeek(wekenTerug - 1), children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })] }), !beschikbaar ? _jsx("p", { className: "text-xs text-muted-foreground", children: "Uren konden niet worden geladen." }) :
+                _jsxs("div", { className: "dashboard-hours-chart relative h-56", role: "img", "aria-label": `Gewerkte uren van alle monteurs, ${maandag ? weekLabel(maandag) : 'deze week'}, maandag tot zondag`, children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 bottom-6 top-7 flex flex-col justify-between", children: [0, 1, 2, 3].map(n => _jsx("div", { className: "border-t border-border/60" }, n)) }), _jsx("div", { className: "relative grid h-full grid-cols-7 gap-2", children: week.map(d => _jsxs("div", { className: "flex min-w-0 flex-col", "aria-label": `${d.label}: ${d.toekomst ? 'nog niet gewerkt' : urenLabel(d.uren)}`, children: [_jsxs("div", { className: "flex min-h-0 flex-1 flex-col justify-end", children: [_jsx("span", { className: "mb-1.5 text-center text-[10px] font-medium tabular-nums", children: d.toekomst ? '-' : urenLabel(d.uren) }), _jsx("div", { className: `mx-auto w-full max-w-10 shrink-0 rounded-t-md ${d.toekomst ? 'bg-muted' : 'bg-primary/80'}`, style: { height: d.uren > 0 ? `${(d.uren / max) * 78}%` : '3px' } })] }), _jsx("span", { className: "h-6 pt-1.5 text-center text-xs font-medium text-muted-foreground", children: d.label })] }, d.dag)) })] })] });
+}

package/dist-lib/components/dashboard-viewport.d.ts

@@ -0,0 +1,2 @@
+export declare const dashboardViewportStyles = "\n.planner-dashboard {\n  --dashboard-gap: 12px;\n}\n.dashboard-shortcuts { max-width: 100%; }\n.dashboard-shortcut-items { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }\n.dashboard-shortcut-items > div { display: flex; min-width: 0; max-width: 100%; }\n.dashboard-shortcut-items a { width: 100%; height: 100%; min-height: 32px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding: 5px 28px 5px 10px; line-height: 16px; border: 1px dashed color-mix(in oklab, var(--muted-foreground) 45%, transparent); }\n.dashboard-shortcut-items a:hover { border-color: color-mix(in oklab, var(--muted-foreground) 85%, transparent); }\n.dashboard-hours-heading { flex-wrap: wrap; }\n@media (max-width: 1023px) {\n  .dashboard-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }\n  .dashboard-toolbar > p { grid-column: 1; grid-row: 1; }\n  .dashboard-toolbar > .dashboard-shortcuts { grid-column: 1 / -1; grid-row: 2; }\n  .dashboard-toolbar > button { grid-column: 2; grid-row: 1; }\n  .dashboard-shortcuts { grid-column: 1 / -1; flex-wrap: wrap; }\n  .dashboard-shortcut-items { flex-basis: 100%; }\n}\n\n@media (min-width: 1024px) {\n  .planner-dashboard {\n    display: flex;\n    flex-direction: column;\n    gap: var(--dashboard-gap);\n    min-height: var(--dashboard-height, auto);\n    padding-bottom: 12px;\n  }\n  .planner-dashboard > * { margin-block: 0; }\n  .dashboard-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }\n  .dashboard-toolbar > p { grid-column: 1; grid-row: 1; }\n  .dashboard-toolbar > .dashboard-shortcuts { grid-column: 1 / -1; grid-row: 2; }\n  .dashboard-toolbar > button { grid-column: 2; grid-row: 1; }\n  .dashboard-shortcuts { padding-block: 0; }\n  .dashboard-shortcut-items a { font-size: 11px; line-height: 14px; }\n  .dashboard-module-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }\n  .dashboard-module-content { min-height: 156px; padding: 12px; }\n  .dashboard-module-icon { width: 40px; height: 40px; border-radius: 12px; }\n  .dashboard-module-icon svg { width: 24px; height: 24px; }\n  .dashboard-module-title { margin-top: 8px; font-size: 14px; overflow-wrap: anywhere; }\n  .dashboard-module-count { padding-top: 8px; }\n  .dashboard-stats { flex: 1; display: flex; flex-direction: column; gap: 8px; }\n  .dashboard-stats > * { margin-block: 0; }\n  .dashboard-stats-grid { flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }\n  .dashboard-stat-content { padding: 12px; }\n  .dashboard-stat-content > * { margin-block: 0; }\n  .dashboard-stat-content > * + * { margin-top: 8px; }\n  .dashboard-financial > div > * { margin-block: 0; }\n  .dashboard-financial > div > * + * { margin-top: 8px; }\n  .dashboard-financial > div > div > * { margin-block: 0; }\n  .dashboard-financial > div > div > * + * { margin-top: 4px; }\n  .dashboard-financial .dashboard-offers { padding-top: 10px; }\n  .dashboard-financial .dashboard-amount { font-size: 26px; line-height: 32px; }\n  .dashboard-hours-content { height: 100%; display: flex; flex-direction: column; gap: 8px; }\n  .dashboard-hours-content > * { margin-block: 0; }\n  .dashboard-hours-content > dl { flex-shrink: 0; padding-top: 8px; gap: 8px; }\n  .dashboard-hours { flex: 1; display: flex; flex-direction: column; gap: 8px; }\n  .dashboard-hours > * { margin-block: 0; }\n  .dashboard-hours-heading { flex-wrap: wrap; }\n  .dashboard-hours-chart { height: 160px; flex: 1; min-height: 130px; }\n  .dashboard-funnel-chart { max-height: 200px; }\n  .dashboard-funnel-tip { min-height: 48px; }\n  .dashboard-stats h2 { font-size: 16px; line-height: 20px; }\n  .dashboard-funnel-loading { height: 240px; }\n}\n\n@media (min-width: 1024px) and (max-height: 800px) {\n  .planner-dashboard { --dashboard-gap: 8px; }\n  .dashboard-module-content { min-height: 112px; padding: 8px; }\n  .dashboard-module-icon { width: 32px; height: 32px; }\n  .dashboard-module-icon svg { width: 20px; height: 20px; }\n  .dashboard-module-title { margin-top: 0; }\n  .dashboard-module-count { padding-top: 4px; }\n  .dashboard-module-count > div { padding: 3px 8px; }\n  .dashboard-module-count > div > span:first-child { font-size: 18px; line-height: 20px; }\n  .dashboard-stat-content { padding: 10px; }\n  .dashboard-stat-content > * + * { margin-top: 4px; }\n  .dashboard-stat-content > div:first-child { min-height: 28px; }\n  .dashboard-financial > div > * + * { margin-top: 4px; }\n  .dashboard-financial > div:first-child > div { width: 28px; height: 28px; }\n  .dashboard-financial .dashboard-amount { font-size: 24px; line-height: 28px; }\n  .dashboard-financial .dashboard-offers { padding-top: 8px; }\n  .dashboard-funnel-chart { max-height: 130px; }\n  .dashboard-hours-chart { height: 140px; }\n}\n\n@media (min-width: 1024px) and (max-height: 740px) {\n  .dashboard-module-icon { width: 24px; height: 24px; }\n  .dashboard-module-icon svg { width: 16px; height: 16px; }\n  .dashboard-module-content { min-height: 104px; }\n  .dashboard-financial .dashboard-offers dl { gap: 4px; }\n  .dashboard-stat-content { padding: 8px; }\n  .dashboard-financial > div > * + * { margin-top: 2px; }\n  .dashboard-financial > div > div > * + * { margin-top: 2px; }\n  .dashboard-hours-content { gap: 4px; }\n  .dashboard-hours-chart { min-height: 116px; }\n  .dashboard-funnel-chart { max-height: 118px; }\n}";
+//# sourceMappingURL=dashboard-viewport.d.ts.map

package/dist-lib/components/dashboard-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-viewport.d.ts","sourceRoot":"","sources":["../../src/components/dashboard-viewport.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,sxKAgGlC,CAAC"}

package/dist-lib/components/dashboard-viewport.js

@@ -0,0 +1,97 @@
+export const dashboardViewportStyles = `
+.planner-dashboard {
+  --dashboard-gap: 12px;
+}
+.dashboard-shortcuts { max-width: 100%; }
+.dashboard-shortcut-items { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
+.dashboard-shortcut-items > div { display: flex; min-width: 0; max-width: 100%; }
+.dashboard-shortcut-items a { width: 100%; height: 100%; min-height: 32px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding: 5px 28px 5px 10px; line-height: 16px; border: 1px dashed color-mix(in oklab, var(--muted-foreground) 45%, transparent); }
+.dashboard-shortcut-items a:hover { border-color: color-mix(in oklab, var(--muted-foreground) 85%, transparent); }
+.dashboard-hours-heading { flex-wrap: wrap; }
+@media (max-width: 1023px) {
+  .dashboard-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
+  .dashboard-toolbar > p { grid-column: 1; grid-row: 1; }
+  .dashboard-toolbar > .dashboard-shortcuts { grid-column: 1 / -1; grid-row: 2; }
+  .dashboard-toolbar > button { grid-column: 2; grid-row: 1; }
+  .dashboard-shortcuts { grid-column: 1 / -1; flex-wrap: wrap; }
+  .dashboard-shortcut-items { flex-basis: 100%; }
+}
+
+@media (min-width: 1024px) {
+  .planner-dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dashboard-gap);
+    min-height: var(--dashboard-height, auto);
+    padding-bottom: 12px;
+  }
+  .planner-dashboard > * { margin-block: 0; }
+  .dashboard-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
+  .dashboard-toolbar > p { grid-column: 1; grid-row: 1; }
+  .dashboard-toolbar > .dashboard-shortcuts { grid-column: 1 / -1; grid-row: 2; }
+  .dashboard-toolbar > button { grid-column: 2; grid-row: 1; }
+  .dashboard-shortcuts { padding-block: 0; }
+  .dashboard-shortcut-items a { font-size: 11px; line-height: 14px; }
+  .dashboard-module-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .dashboard-module-content { min-height: 156px; padding: 12px; }
+  .dashboard-module-icon { width: 40px; height: 40px; border-radius: 12px; }
+  .dashboard-module-icon svg { width: 24px; height: 24px; }
+  .dashboard-module-title { margin-top: 8px; font-size: 14px; overflow-wrap: anywhere; }
+  .dashboard-module-count { padding-top: 8px; }
+  .dashboard-stats { flex: 1; display: flex; flex-direction: column; gap: 8px; }
+  .dashboard-stats > * { margin-block: 0; }
+  .dashboard-stats-grid { flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+  .dashboard-stat-content { padding: 12px; }
+  .dashboard-stat-content > * { margin-block: 0; }
+  .dashboard-stat-content > * + * { margin-top: 8px; }
+  .dashboard-financial > div > * { margin-block: 0; }
+  .dashboard-financial > div > * + * { margin-top: 8px; }
+  .dashboard-financial > div > div > * { margin-block: 0; }
+  .dashboard-financial > div > div > * + * { margin-top: 4px; }
+  .dashboard-financial .dashboard-offers { padding-top: 10px; }
+  .dashboard-financial .dashboard-amount { font-size: 26px; line-height: 32px; }
+  .dashboard-hours-content { height: 100%; display: flex; flex-direction: column; gap: 8px; }
+  .dashboard-hours-content > * { margin-block: 0; }
+  .dashboard-hours-content > dl { flex-shrink: 0; padding-top: 8px; gap: 8px; }
+  .dashboard-hours { flex: 1; display: flex; flex-direction: column; gap: 8px; }
+  .dashboard-hours > * { margin-block: 0; }
+  .dashboard-hours-heading { flex-wrap: wrap; }
+  .dashboard-hours-chart { height: 160px; flex: 1; min-height: 130px; }
+  .dashboard-funnel-chart { max-height: 200px; }
+  .dashboard-funnel-tip { min-height: 48px; }
+  .dashboard-stats h2 { font-size: 16px; line-height: 20px; }
+  .dashboard-funnel-loading { height: 240px; }
+}
+
+@media (min-width: 1024px) and (max-height: 800px) {
+  .planner-dashboard { --dashboard-gap: 8px; }
+  .dashboard-module-content { min-height: 112px; padding: 8px; }
+  .dashboard-module-icon { width: 32px; height: 32px; }
+  .dashboard-module-icon svg { width: 20px; height: 20px; }
+  .dashboard-module-title { margin-top: 0; }
+  .dashboard-module-count { padding-top: 4px; }
+  .dashboard-module-count > div { padding: 3px 8px; }
+  .dashboard-module-count > div > span:first-child { font-size: 18px; line-height: 20px; }
+  .dashboard-stat-content { padding: 10px; }
+  .dashboard-stat-content > * + * { margin-top: 4px; }
+  .dashboard-stat-content > div:first-child { min-height: 28px; }
+  .dashboard-financial > div > * + * { margin-top: 4px; }
+  .dashboard-financial > div:first-child > div { width: 28px; height: 28px; }
+  .dashboard-financial .dashboard-amount { font-size: 24px; line-height: 28px; }
+  .dashboard-financial .dashboard-offers { padding-top: 8px; }
+  .dashboard-funnel-chart { max-height: 130px; }
+  .dashboard-hours-chart { height: 140px; }
+}
+
+@media (min-width: 1024px) and (max-height: 740px) {
+  .dashboard-module-icon { width: 24px; height: 24px; }
+  .dashboard-module-icon svg { width: 16px; height: 16px; }
+  .dashboard-module-content { min-height: 104px; }
+  .dashboard-financial .dashboard-offers dl { gap: 4px; }
+  .dashboard-stat-content { padding: 8px; }
+  .dashboard-financial > div > * + * { margin-top: 2px; }
+  .dashboard-financial > div > div > * + * { margin-top: 2px; }
+  .dashboard-hours-content { gap: 4px; }
+  .dashboard-hours-chart { min-height: 116px; }
+  .dashboard-funnel-chart { max-height: 118px; }
+}`;

package/dist-lib/components/ui/sankey-chart.d.ts

@@ -0,0 +1,30 @@
+import { type FunnelIndeling } from '../../lib/funnel-indeling';
+interface Node {
+    name: string;
+    value: number;
+    kleur: string;
+    paars?: boolean;
+    aantal?: number;
+}
+interface Link {
+    source: number;
+    target: number;
+    value: number;
+    echt?: number;
+}
+export interface SankeyChartData {
+    nodes: Node[];
+    links: Link[];
+}
+export declare function SankeyChart({ data, total, onKleuren, indeling, onTip }: {
+    data: SankeyChartData;
+    total: number;
+    onKleuren?: (k: Record<string, string>) => void;
+    indeling?: FunnelIndeling;
+    onTip?: (t: {
+        titel: string;
+        tekst: string;
+    } | null) => void;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=sankey-chart.d.ts.map

package/dist-lib/components/ui/sankey-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sankey-chart.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sankey-chart.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAsC,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEpG,UAAU,IAAI;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE;AAC/F,UAAU,IAAI;IAAG,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE;AAC/E,MAAM,WAAW,eAAe;IAAG,KAAK,EAAE,IAAI,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE;AA0TjE,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,QAA6B,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAA;CAAE,+BA6B/Q"}

package/dist-lib/components/ui/sankey-chart.js

@@ -0,0 +1,292 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Sankey, sankeyLeft } from '@visx/sankey';
+import { ParentSize } from '@visx/responsive';
+import { useEffect, useId, useRef, useState } from 'react';
+import { doekPunt, doekProfiel, doekNabijheid, stapDoekVeer } from '../../lib/sankey-doek';
+import { rangFunnelNode, FUNNEL_EXTRA } from '../../lib/dashboard-werkbon-funnel';
+import { plaatsIndeling, STANDAARD_INDELING } from '../../lib/funnel-indeling';
+// Duidelijk verschillende stappen: boven Aangemaakt steeds lichter blauw, eronder steeds grijzer.
+const BLAUW = ['var(--funnel-blue-1)', 'var(--funnel-blue-2)', 'var(--funnel-blue-3)'];
+const GRIJS = ['var(--funnel-gray-1)', 'var(--funnel-gray-2)', 'var(--funnel-gray-3)', 'var(--funnel-gray-4)', 'var(--funnel-gray-5)'];
+const NAVY = 'var(--funnel-navy)';
+// De extra-werk-tak is bewust veel dunner dan de hoofdstromen: dezelfde afgevlakte
+// schaal, maar met een eigen factor zodat de verhoudingen binnen de tak gelijk blijven.
+const EXTRA_SCHAAL = 0.3;
+function kleurNodes(nodes) {
+    const midden = (n) => ((n.y0 ?? 0) + (n.y1 ?? 0)) / 2;
+    const basis = nodes.find(n => n.name === 'Aangemaakt');
+    const basisY = basis ? midden(basis) : 0;
+    const kleuren = nodes.map(n => {
+        if ((n.depth ?? 0) === 0 || n.paars)
+            return n.kleur;
+        if (n.name === 'Aangemaakt')
+            return NAVY;
+        if (n.name === 'Betaald')
+            return 'var(--funnel-paid)';
+        if (n.name === 'Nog niet betaald')
+            return 'var(--funnel-unpaid)';
+        return '';
+    });
+    const boven = nodes.map((n, i) => ({ n, i })).filter(({ n, i }) => !kleuren[i] && midden(n) <= basisY).sort((a, b) => midden(b.n) - midden(a.n));
+    const onder = nodes.map((n, i) => ({ n, i })).filter(({ n, i }) => !kleuren[i] && midden(n) > basisY).sort((a, b) => midden(a.n) - midden(b.n));
+    boven.forEach(({ i }, k) => { kleuren[i] = BLAUW[Math.min(k, BLAUW.length - 1)]; });
+    onder.forEach(({ i }, k) => { kleuren[i] = GRIJS[Math.min(k, GRIJS.length - 1)]; });
+    return kleuren;
+}
+function useMarkering() {
+    const [doek, setDoek] = useState({});
+    const toestanden = useRef({});
+    const doel = useRef(null);
+    const raf = useRef(null);
+    const tijd = useRef(null);
+    const stil = useRef(false);
+    useEffect(() => {
+        const media = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const wijzig = () => {
+            stil.current = media.matches;
+            if (media.matches) {
+                if (raf.current !== null)
+                    cancelAnimationFrame(raf.current);
+                raf.current = null;
+                tijd.current = null;
+                doel.current = null;
+                toestanden.current = {};
+                setDoek({});
+            }
+        };
+        wijzig();
+        media.addEventListener('change', wijzig);
+        return () => {
+            media.removeEventListener('change', wijzig);
+            if (raf.current !== null)
+                cancelAnimationFrame(raf.current);
+        };
+    }, []);
+    const lus = (nu) => {
+        const dt = tijd.current === null ? 1 / 60 : Math.min(0.05, (nu - tijd.current) / 1000);
+        tijd.current = nu;
+        const d = doel.current, volgende = {};
+        let beweegt = false;
+        for (const [key, vorige] of Object.entries(toestanden.current)) {
+            const i = Number(key), target = d?.index === i ? d : null;
+            const t = stapDoekVeer(vorige.t, target?.t ?? vorige.t.positie, dt, 100, 20);
+            const sterkte = stapDoekVeer(vorige.sterkte, target?.kracht ?? 0, dt);
+            const onrust = Math.abs(sterkte.snelheid) > 0.01 || Math.abs(sterkte.positie - (target?.kracht ?? 0)) > 0.002
+                || Math.abs(t.snelheid) > 0.0001 || Math.abs(t.positie - (target?.t ?? t.positie)) > 0.0001;
+            if (target || Math.abs(sterkte.positie) > 0.002 || onrust)
+                volgende[i] = { t, sterkte };
+            beweegt || (beweegt = onrust);
+        }
+        toestanden.current = volgende;
+        setDoek(volgende);
+        raf.current = beweegt ? requestAnimationFrame(lus) : null;
+        if (!beweegt)
+            tijd.current = null;
+    };
+    const start = () => { if (raf.current === null)
+        raf.current = requestAnimationFrame(lus); };
+    return {
+        doek,
+        beweeg: (index, t, kracht) => {
+            if (stil.current) {
+                // Verminderde beweging: markering direct op de muis, zonder animatie.
+                toestanden.current = { [index]: { t: { positie: t, snelheid: 0 }, sterkte: { positie: kracht, snelheid: 0 } } };
+                doel.current = { index, t, kracht };
+                setDoek(toestanden.current);
+                return;
+            }
+            doel.current = { index, t, kracht };
+            if (!toestanden.current[index])
+                toestanden.current[index] = {
+                    t: { positie: t, snelheid: 0 }, sterkte: { positie: 0, snelheid: 0 },
+                };
+            start();
+        },
+        los: () => {
+            doel.current = null;
+            if (stil.current) {
+                toestanden.current = {};
+                setDoek({});
+                return;
+            }
+            start();
+        },
+    };
+}
+function Grafiek({ graph, createPath, total, onKleuren, setTip, indeling, hoogte, onInhoud, textScale }) {
+    const [actief, setActief] = useState(null);
+    const effectId = useId().replace(/[^a-zA-Z0-9_-]/g, '');
+    const kleuren = kleurNodes(graph.nodes);
+    const sleutel = graph.nodes.map((n, i) => `${n.name}=${kleuren[i]}`).join('|');
+    useEffect(() => { onKleuren?.(Object.fromEntries(graph.nodes.map((n, i) => [n.name, kleuren[i]]))); }, [sleutel]); // eslint-disable-line react-hooks/exhaustive-deps
+    const idx = (n) => graph.nodes.indexOf(n);
+    const pct = (v) => `${Math.round(v / total * 100)}%`;
+    const linkAan = (i) => {
+        if (!actief)
+            return true;
+        if (actief.soort === 'link')
+            return actief.index === i;
+        const l = graph.links[i];
+        return idx(l.source) === actief.index || idx(l.target) === actief.index;
+    };
+    const nodeAan = (i) => {
+        if (!actief)
+            return true;
+        if (actief.soort === 'node')
+            return actief.index === i;
+        const l = graph.links[actief.index];
+        return idx(l.source) === i || idx(l.target) === i;
+    };
+    const { doek, beweeg, los } = useMarkering();
+    const uit = () => { setActief(null); setTip(null); };
+    // One display layout for nodes, links and cloth hit testing. The extra branch
+    // shares the payment endpoint column, with its own space beneath the main flow.
+    const betaaldNode = graph.nodes.find(n => n.name === 'Betaald');
+    const nnbNode = graph.nodes.find(n => n.name === 'Nog niet betaald');
+    const afgerondNode = graph.nodes.find(n => n.name === 'Afgerond');
+    const paarsEinden = graph.nodes.filter(n => n.paars && n.name !== FUNNEL_EXTRA);
+    const heeftExtra = paarsEinden.length > 0;
+    const linksX = Math.min(...graph.nodes.map(n => n.x0 ?? 0));
+    const rechtsX = Math.max(...graph.nodes.map(n => n.x0 ?? 0));
+    const betalingX = betaaldNode?.x0 ?? nnbNode?.x0 ?? rechtsX;
+    const xSchaal = heeftExtra && betalingX > linksX ? (rechtsX - linksX) / (betalingX - linksX) : 1;
+    const plaatsX = (x) => linksX + (x - linksX) * xSchaal;
+    // Lijnen iets dunner dan de ruimte die de indeling biedt.
+    const ySchaal = 0.75;
+    const aangemaakt = graph.nodes.find(n => n.name === 'Aangemaakt');
+    // Afgevlakte schaal: dikte groeit met aantal^0,75 zodat verhoudingen zachter
+    // worden (een lijn van 50 is duidelijk dikker dan 10, maar niet exact 5×).
+    const DRUK = 0.75;
+    const druk = (v) => Math.pow(Math.max(0, v), DRUK);
+    const k = aangemaakt && (aangemaakt.aantal ?? 0) > 0 ? ((aangemaakt.y1 ?? 0) - (aangemaakt.y0 ?? 0)) / druk(aangemaakt.aantal ?? 1) : 1;
+    const dikte = (v) => Math.max(2, k * druk(v));
+    const diktePaars = (v) => Math.max(1.5, k * druk(v) * EXTRA_SCHAAL);
+    const aantalVan = (n) => n.aantal ?? n.value ?? 0;
+    const plaatsY = (y) => 14 + (y - 14) * ySchaal;
+    const posities = new Map();
+    graph.nodes.forEach(n => posities.set(n, {
+        x: plaatsX(n.x0 ?? 0), y0: plaatsY(n.y0 ?? 0), y1: plaatsY(n.y1 ?? 0),
+    }));
+    if (heeftExtra) {
+        const hoofdbodem = Math.max(...graph.nodes.filter(n => !n.paars).map(n => plaatsY(n.y1 ?? 0)));
+        const startY = hoofdbodem + 18, gat = 8;
+        let y = startY;
+        for (const n of paarsEinden) {
+            const h = diktePaars(aantalVan(n));
+            posities.set(n, { x: rechtsX, y0: y, y1: y + h });
+            y += h + gat;
+        }
+        const extra = graph.nodes.find(n => n.name === FUNNEL_EXTRA);
+        if (extra) {
+            const h = diktePaars(aantalVan(extra));
+            const midden = (startY + y - gat) / 2;
+            posities.set(extra, { x: (plaatsX(afgerondNode?.x0 ?? linksX) + rechtsX) / 2,
+                y0: midden - h / 2, y1: midden + h / 2 });
+        }
+    }
+    const basisPosities = new Map(posities);
+    // De paarse extra-werklijn sluit aan onder de Afgerond-balk. Maak die balk
+    // aan de onderkant precies zo lang als de paarse lijn dik is, zodat de lijn
+    // aansluit op het verlengde van de balk in plaats van eraf te hangen, en
+    // schuif de balken eronder in dezelfde kolom met dezelfde afstand mee.
+    if (afgerondNode) {
+        const extraLinkNaarExtra = graph.links.find(l => l.target.name === FUNNEL_EXTRA && l.source === afgerondNode);
+        const extraLang = extraLinkNaarExtra ? diktePaars(extraLinkNaarExtra.echt ?? 0) : 0;
+        const balk = posities.get(afgerondNode);
+        if (extraLang > 0 && balk) {
+            posities.set(afgerondNode, { ...balk, y1: balk.y1 + extraLang });
+            graph.nodes.forEach(n => {
+                if (n === afgerondNode || n.paars)
+                    return;
+                const q = posities.get(n);
+                if (q && q.x === balk.x && q.y0 >= balk.y1 - 0.5)
+                    posities.set(n, { ...q, y0: q.y0 + extraLang, y1: q.y1 + extraLang });
+            });
+        }
+    }
+    if (Object.keys(indeling).length > 0) {
+        const geplaatst = plaatsIndeling(graph.nodes.map(n => {
+            const p = posities.get(n);
+            return { naam: n.name, x: p?.x ?? 0, y0: p?.y0 ?? 0, y1: p?.y1 ?? 0, paars: n.paars };
+        }), indeling, hoogte);
+        graph.nodes.forEach((n, i) => { const p = geplaatst[i]; posities.set(n, { x: p.x, y0: p.y0, y1: p.y1 }); });
+    }
+    // Onderkant van wat er echt getekend wordt; het omringende vak krimpt hierop
+    // zodat er geen lege strook tussen funnel en pop-up blijft.
+    const bodem = Math.max(40, ...[...posities.values()].map(p => p.y1));
+    useEffect(() => { onInhoud?.(bodem); }, [bodem]); // eslint-disable-line react-hooks/exhaustive-deps
+    const geometrie = graph.links.map(link => {
+        const s = link.source, t = link.target;
+        const sp = posities.get(s), tp = posities.get(t);
+        return { x0: (sp?.x ?? s.x0 ?? 0) + 10, x1: tp?.x ?? t.x0 ?? 0,
+            y0: s.paars && sp ? (sp.y0 + sp.y1) / 2 : t.name === FUNNEL_EXTRA && sp ? sp.y1 - diktePaars(link.echt ?? 0) / 2 : plaatsY(link.y0 ?? 0) + (sp?.y0 ?? 0) - (basisPosities.get(s)?.y0 ?? 0),
+            y1: t.paars && tp ? (tp.y0 + tp.y1) / 2 : plaatsY(link.y1 ?? 0) + (tp?.y0 ?? 0) - (basisPosities.get(t)?.y0 ?? 0),
+            breedte: t.paars && t.name !== FUNNEL_EXTRA && tp ? tp.y1 - tp.y0 : t.name === FUNNEL_EXTRA ? diktePaars(link.echt ?? 0) : (link.width ?? 0) * ySchaal };
+    });
+    const muis = (e) => {
+        const svg = e.currentTarget.ownerSVGElement, matrix = svg?.getScreenCTM();
+        if (!svg || !matrix)
+            return;
+        const punt = svg.createSVGPoint();
+        punt.x = e.clientX;
+        punt.y = e.clientY;
+        const lokaal = punt.matrixTransform(matrix.inverse());
+        let beste = null;
+        geometrie.forEach((g, index) => {
+            if (lokaal.x <= g.x0 + 3 || lokaal.x >= g.x1 - 3)
+                return;
+            const nabij = doekNabijheid(g, lokaal.x, lokaal.y);
+            if (nabij.kracht > 0 && (!beste || nabij.afstand < beste.afstand))
+                beste = { index, ...nabij };
+        });
+        if (beste) {
+            const gevonden = beste;
+            beweeg(gevonden.index, gevonden.t, gevonden.kracht);
+        }
+        else
+            los();
+    };
+    return _jsxs("g", { onMouseMove: muis, onMouseLeave: () => { uit(); los(); }, children: [_jsxs("defs", { children: [_jsx("filter", { id: `${effectId}-glow`, x: "-60%", y: "-150%", width: "220%", height: "400%", colorInterpolationFilters: "sRGB", children: _jsx("feGaussianBlur", { stdDeviation: 3 }) }), _jsxs("filter", { id: `${effectId}-shadow`, x: "-60%", y: "-150%", width: "220%", height: "400%", colorInterpolationFilters: "sRGB", children: [_jsx("feGaussianBlur", { stdDeviation: 2.5 }), _jsx("feOffset", { dy: 3 })] }), _jsx("filter", { id: `${effectId}-soft-mask`, x: "-50%", y: "-50%", width: "200%", height: "200%", children: _jsx("feGaussianBlur", { stdDeviation: 5 }) })] }), _jsx("rect", { x: 0, y: 0, width: "100%", height: "100%", fill: "transparent", pointerEvents: "all" }), graph.links.map((link, i) => {
+                const s = link.source, t = link.target;
+                const kleur = (s.depth ?? 0) === 0 ? kleuren[idx(s)] : kleuren[idx(t)];
+                const titel = `${s.name} → ${t.name}`, tekst = `${link.echt ?? link.value} ${t.paars ? 'meldingen' : 'werkbonnen'} · ${pct(link.echt ?? link.value)}`;
+                const toon = () => { setActief({ soort: 'link', index: i }); setTip({ titel, tekst }); };
+                const g = geometrie[i];
+                const w = g.breedte;
+                const markering = doek[i];
+                const d = createPath({ ...link, source: { ...s, x1: g.x0 }, target: { ...t, x0: g.x1 }, y0: g.y0, y1: g.y1, width: w }) ?? '';
+                const profiel = doekProfiel(g);
+                const sterkte = Math.min(1, Math.max(0, markering?.sterkte.positie ?? 0));
+                const midden = doekPunt(g, markering?.t.positie ?? 0.5);
+                const maskId = `${effectId}-local-${i}`;
+                return _jsxs("g", { children: [sterkte > 0.002 && _jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: g.x0 - 30, y: Math.min(g.y0, g.y1) - w - 40, width: g.x1 - g.x0 + 60, height: Math.abs(g.y1 - g.y0) + 2 * w + 80, style: { maskType: 'alpha' }, children: _jsx("ellipse", { cx: midden.x, cy: midden.y, rx: profiel.radius * 0.8, ry: w / 2 + 16, fill: kleur, filter: `url(#${effectId}-soft-mask)` }) }) }), _jsxs("g", { pointerEvents: "none", "aria-hidden": "true", mask: `url(#${maskId})`, children: [_jsx("path", { d: d, fill: "none", stroke: "var(--foreground)", strokeWidth: Math.max(1, w), strokeOpacity: sterkte * 0.18, filter: `url(#${effectId}-shadow)` }), _jsx("path", { d: d, fill: "none", stroke: kleur, strokeWidth: Math.max(1, w) + 5, strokeOpacity: sterkte * 0.55, filter: `url(#${effectId}-glow)` })] })] }), _jsx("path", { d: d, fill: "none", stroke: kleur, tabIndex: 0, "aria-label": `${titel}: ${tekst}`, strokeOpacity: actief ? (linkAan(i) ? 0.8 : 0.07) : 0.35, strokeWidth: Math.max(1, w), style: { transition: 'stroke-opacity 150ms' }, className: "cursor-pointer outline-none", onMouseEnter: toon, onMouseLeave: uit, onFocus: toon, onBlur: uit }), sterkte > 0.002 && _jsx("path", { d: d, fill: "none", stroke: kleur, strokeWidth: Math.max(1, w), strokeOpacity: sterkte * 0.25, mask: `url(#${maskId})`, pointerEvents: "none", "aria-hidden": "true" })] }, i);
+            }), graph.nodes.map((node, i) => {
+                const positie = posities.get(node);
+                const x = positie?.x ?? node.x0 ?? 0;
+                const y = positie?.y0 ?? node.y0 ?? 0;
+                const h = Math.max(2, (positie?.y1 ?? node.y1 ?? y) - y);
+                const tekst = `${aantalVan(node)} ${node.paars ? 'meldingen' : 'werkbonnen'}${node.paars ? '' : ` · ${pct(aantalVan(node))} van aangemaakt`}`;
+                const toon = () => { setActief({ soort: 'node', index: i }); setTip({ titel: node.name, tekst }); };
+                return _jsxs("g", { tabIndex: 0, role: "img", "aria-label": `${node.name}: ${tekst}`, className: "cursor-pointer outline-none", opacity: nodeAan(i) ? 1 : 0.3, style: { transition: 'opacity 150ms' }, onMouseEnter: toon, onMouseLeave: uit, onFocus: toon, onBlur: uit, children: [_jsx("rect", { x: x - 4, y: y - 4, width: 24, height: Math.max(12, h + 8), fill: "transparent" }), _jsx("rect", { x: x, y: y, width: 10, height: h, rx: 3, fill: kleuren[i] }), _jsx("text", { x: x + 14, y: y + h / 2, dominantBaseline: "central", textAnchor: "start", fill: "var(--foreground)", stroke: "var(--background)", strokeWidth: 4, paintOrder: "stroke", strokeLinejoin: "round", fontSize: 11 * textScale, fontWeight: 600, children: aantalVan(node) })] }, i);
+            })] });
+}
+export function SankeyChart({ data, total, onKleuren, indeling = STANDAARD_INDELING, onTip }) {
+    const setTip = (t) => onTip?.(t);
+    const extraNode = data.nodes.findIndex(n => n.name === FUNNEL_EXTRA);
+    const extraAantal = extraNode >= 0 ? data.nodes[extraNode].value : 0;
+    const eindAantal = data.nodes.filter(n => n.paars && n.name !== FUNNEL_EXTRA).length;
+    const [inhoud, setInhoud] = useState(288);
+    // De Sankey-layout rekent op een vaste hoogte; het zichtbare vak krimpt op de
+    // getekende funnel zodat de pop-up direct onder de funnel komt te staan.
+    const LAYOUT = 288;
+    return _jsx("div", { className: "dashboard-funnel-chart relative w-full", style: { height: inhoud }, "aria-label": "Werkbonnen van herkomst tot betaald", children: _jsx(ParentSize, { debounceTime: 30, children: ({ width, height }) => {
+                if (width < 40 || height < 40 || total <= 0)
+                    return null;
+                // Ruimte onder de hoofdstroom voor de paarse tak, op de afgevlakte schaal
+                // met de extra dunne factor van de extra-werk-tak.
+                const druk = (v) => Math.pow(Math.max(0, v), 0.75);
+                const extraDruk = druk(extraAantal) * EXTRA_SCHAAL;
+                const reserve = extraAantal > 0 ? (LAYOUT - 28 - 18 - 8 * Math.max(0, eindAantal - 1)) * (extraDruk / (druk(total) + extraDruk)) + 18 + 8 * Math.max(0, eindAantal - 1) : 0;
+                return _jsx("svg", { "data-sankey": true, width: width, height: height, viewBox: `0 0 ${width} ${inhoud}`, preserveAspectRatio: "none", role: "img", "aria-label": "Werkbonnenfunnel", children: _jsx(Sankey, { root: { nodes: data.nodes.map(n => ({ ...n, aantal: n.value, value: Math.pow(Math.max(0, n.value), 0.75) })), links: data.links.map(l => l.target === extraNode ? { ...l, echt: l.value, value: 1e-4 } : { ...l, echt: l.value, value: Math.pow(Math.max(0, l.value), 0.75) }) }, nodeWidth: 10, nodePadding: 12, nodeAlign: sankeyLeft, nodeSort: (a, b) => rangFunnelNode(a.name) - rangFunnelNode(b.name), extent: [[8, 14], [width - 28, LAYOUT - 14 - reserve]], children: ({ graph, createPath }) => _jsx(Grafiek, { graph: graph, createPath: createPath, total: total, onKleuren: onKleuren, setTip: setTip, indeling: indeling, hoogte: LAYOUT, textScale: inhoud / height, onInhoud: h => setInhoud(h + 8) }) }) });
+            } }) });
+}

package/dist-lib/index.d.ts

@@ -1,6 +1,12 @@
 import type { FlowModule } from "@flowselections/core";
 export * from "./_core-safelist";
-export { DashboardInstallatieTechniekPage } from "./components/DashboardInstallatieTechniekPage";
-export { InstallatieTechniekLogo } from "./components/InstallatieTechniekLogo";
-export declare const dashboardInstallatieTechniekModule: FlowModule;
+export { DashboardPlannerInstallatieTechniekPage } from "./components/DashboardPlannerInstallatieTechniekPage";
+export { DashboardSnelkoppelingen, SnelkoppelingToevoegenDialog } from "./components/DashboardSnelkoppelingen";
+export { PlannerPaginaKiezer } from "./components/PlannerPaginaKiezer";
+export { ModulePlaceholderPage } from "./components/ModulePlaceholderPage";
+export { PlannerInstallatieTechniekLogo } from "./components/PlannerInstallatieTechniekLogo";
+export { WerkbonnenFunnel, WerkbonnenFunnelInhoud } from './components/WerkbonnenFunnel';
+export type { WerkbonFunnelData, FunnelPeriode } from './lib/dashboard-werkbon-funnel';
+export type { FunnelIndeling } from './lib/funnel-indeling';
+export declare const dashboardPlannerInstallatieTechniekModule: FlowModule;
 //# sourceMappingURL=index.d.ts.map

package/dist-lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,gCAAgC,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,eAAO,MAAM,kCAAkC,EAAE,UAYhD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,uCAAuC,EAAE,MAAM,sDAAsD,CAAC;AAC/G,OAAO,EAAE,wBAAwB,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAC;AAC/G,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,8BAA8B,EAAE,MAAM,6CAA6C,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACzF,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACvF,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAO,MAAM,yCAAyC,EAAE,UAYvD,CAAC"}

package/dist-lib/index.js

@@ -5,15 +5,19 @@
 // ============================================================================
 import { Gauge } from "lucide-react";
 export * from "./_core-safelist";
-export { DashboardInstallatieTechniekPage } from "./components/DashboardInstallatieTechniekPage";
-export { InstallatieTechniekLogo } from "./components/InstallatieTechniekLogo";
-export const dashboardInstallatieTechniekModule = {
-    id: "dashboard-installatietechniek",
+export { DashboardPlannerInstallatieTechniekPage } from "./components/DashboardPlannerInstallatieTechniekPage";
+export { DashboardSnelkoppelingen, SnelkoppelingToevoegenDialog } from "./components/DashboardSnelkoppelingen";
+export { PlannerPaginaKiezer } from "./components/PlannerPaginaKiezer";
+export { ModulePlaceholderPage } from "./components/ModulePlaceholderPage";
+export { PlannerInstallatieTechniekLogo } from "./components/PlannerInstallatieTechniekLogo";
+export { WerkbonnenFunnel, WerkbonnenFunnelInhoud } from './components/WerkbonnenFunnel';
+export const dashboardPlannerInstallatieTechniekModule = {
+    id: "dashboard-planner-installatie-techniek",
     name: "Installatietechniek",
     version: "1.0.0",
     nav: {
         label: "Installatietechniek",
-        href: "/dashboard-installatietechniek",
+        href: "/dashboard-planner-installatie-techniek",
         icon: Gauge,
     },
     settingsCards: [],