@flowselections/dashboard-planner-installatie-techniek 1.0.40 → 1.0.41

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

@@ -1 +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"}
+{"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,+BAqF5G"}

package/dist-lib/components/DashboardPlannerInstallatieTechniekPage.js

@@ -9,11 +9,11 @@ import { DASHBOARD_TIJDZONE } from "../lib/dashboard-constanten.js";
 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 { Link, useRouter } 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 { MODULE_TEGELS, kiesModulePad } from "../lib/dashboard-planner-installatie-techniek.modules";
 import { DashboardStatistieken, normaliseerStats } from "./DashboardStatistieken";
 import { DashboardSnelkoppelingen } from "./DashboardSnelkoppelingen";
 import { dashboardViewportStyles } from "./dashboard-viewport";
@@ -163,11 +163,16 @@ export function DashboardPlannerInstallatieTechniekPage({ modules } = {}) {
                             : '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 }) {
+    const router = useRouter();
+    const bekendePaden = Object.keys(router.routesByPath ?? {});
     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 &&
+                    const pad = kiesModulePad(tegel, bekendePaden);
+                    return (_jsx(Link, { ...(pad
+                            ? { to: pad }
+                            : { to: "/dashboard-planner-installatie-techniek/module", search: { module: 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/ModulePlaceholderPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModulePlaceholderPage.d.ts","sourceRoot":"","sources":["../../src/components/ModulePlaceholderPage.tsx"],"names":[],"mappings":"AAQA,wBAAgB,qBAAqB,CAAC,EAAE,SAA+B,EAAE,GAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,+BAqBrG"}
+{"version":3,"file":"ModulePlaceholderPage.d.ts","sourceRoot":"","sources":["../../src/components/ModulePlaceholderPage.tsx"],"names":[],"mappings":"AASA,wBAAgB,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,+BA4B/E"}

package/dist-lib/components/ModulePlaceholderPage.js

@@ -1,12 +1,20 @@
 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";
+// De shell rendert deze pagina zonder props; de module komt uit ?module=<naam>.
+import { Link, useRouterState } 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";
 import { DASHBOARD_MODULE_ID } from "../lib/dashboard-module-id";
-export function ModulePlaceholderPage({ moduleKey = DASHBOARD_MODULE_ID } = {}) {
-    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"] }) })] }) }) }));
+export function ModulePlaceholderPage({ moduleKey } = {}) {
+    const uitAdres = useRouterState({
+        select: (s) => {
+            const m = s.location.search?.module;
+            return typeof m === "string" ? m : undefined;
+        },
+    });
+    const sleutel = moduleKey ?? uitAdres ?? DASHBOARD_MODULE_ID;
+    const titel = vindModuleTegel(sleutel)?.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 staat (nog) niet in deze shell. Zodra hij is toegevoegd, opent het vak op het dashboard de module direct." }), _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/dashboard-viewport.d.ts

@@ -1,2 +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}";
+export declare const dashboardViewportStyles = "\n.planner-dashboard {\n  --dashboard-gap: 12px;\n  --funnel-blue-1: #3b82f6; --funnel-blue-2: #2563eb; --funnel-blue-3: #1d4ed8;\n  --funnel-navy: #1e3a8a;\n  --funnel-gray-1: #1e40af; --funnel-gray-2: #1e3a8a; --funnel-gray-3: #172554; --funnel-gray-4: #172554; --funnel-gray-5: #0f1d4a;\n  --funnel-paid: #1e40af; --funnel-unpaid: #172554;\n  --funnel-extra: #5b21b6;\n}\n.dark .planner-dashboard, .planner-dashboard.dark {\n  --funnel-blue-1: #60a5fa; --funnel-blue-2: #3b82f6; --funnel-blue-3: #2563eb;\n  --funnel-navy: #3b5bdb;\n  --funnel-gray-1: #4f6fe0; --funnel-gray-2: #3b5bdb; --funnel-gray-3: #3451c7; --funnel-gray-4: #2f47b3; --funnel-gray-5: #2a3f9f;\n  --funnel-paid: #4f6fe0; --funnel-unpaid: #3451c7;\n  --funnel-extra: #8b5cf6;\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

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

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

@@ -1,6 +1,18 @@
 export const dashboardViewportStyles = `
 .planner-dashboard {
   --dashboard-gap: 12px;
+  --funnel-blue-1: #3b82f6; --funnel-blue-2: #2563eb; --funnel-blue-3: #1d4ed8;
+  --funnel-navy: #1e3a8a;
+  --funnel-gray-1: #1e40af; --funnel-gray-2: #1e3a8a; --funnel-gray-3: #172554; --funnel-gray-4: #172554; --funnel-gray-5: #0f1d4a;
+  --funnel-paid: #1e40af; --funnel-unpaid: #172554;
+  --funnel-extra: #5b21b6;
+}
+.dark .planner-dashboard, .planner-dashboard.dark {
+  --funnel-blue-1: #60a5fa; --funnel-blue-2: #3b82f6; --funnel-blue-3: #2563eb;
+  --funnel-navy: #3b5bdb;
+  --funnel-gray-1: #4f6fe0; --funnel-gray-2: #3b5bdb; --funnel-gray-3: #3451c7; --funnel-gray-4: #2f47b3; --funnel-gray-5: #2a3f9f;
+  --funnel-paid: #4f6fe0; --funnel-unpaid: #3451c7;
+  --funnel-extra: #8b5cf6;
 }
 .dashboard-shortcuts { max-width: 100%; }
 .dashboard-shortcut-items { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }