@flowselections/dashboard-planner-installatie-techniek 1.0.40 → 1.0.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-lib/components/DashboardDagNotities.d.ts +2 -0
- package/dist-lib/components/DashboardDagNotities.d.ts.map +1 -0
- package/dist-lib/components/DashboardDagNotities.js +65 -0
- package/dist-lib/components/DashboardPlannerInstallatieTechniekPage.d.ts.map +1 -1
- package/dist-lib/components/DashboardPlannerInstallatieTechniekPage.js +10 -4
- package/dist-lib/components/ModulePlaceholderPage.d.ts.map +1 -1
- package/dist-lib/components/ModulePlaceholderPage.js +12 -4
- package/dist-lib/components/dashboard-viewport.d.ts +1 -1
- package/dist-lib/components/dashboard-viewport.d.ts.map +1 -1
- package/dist-lib/components/dashboard-viewport.js +18 -4
- package/dist-lib/integrations/supabase/types.d.ts +10171 -405
- package/dist-lib/integrations/supabase/types.d.ts.map +1 -1
- package/dist-lib/integrations/supabase/types.js +1 -0
- package/dist-lib/lib/dashboard-dagnotities.d.ts +10 -0
- package/dist-lib/lib/dashboard-dagnotities.d.ts.map +1 -0
- package/dist-lib/lib/dashboard-dagnotities.js +32 -0
- package/dist-lib/lib/dashboard-planner-installatie-techniek.modules.d.ts +4 -0
- package/dist-lib/lib/dashboard-planner-installatie-techniek.modules.d.ts.map +1 -1
- package/dist-lib/lib/dashboard-planner-installatie-techniek.modules.js +15 -6
- package/package.json +2 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DashboardDagNotities.d.ts","sourceRoot":"","sources":["../../src/components/DashboardDagNotities.tsx"],"names":[],"mappings":"AAYA,wBAAgB,oBAAoB,gCA2EnC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
|
3
|
+
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
4
|
+
import { ChevronLeft, ChevronRight, StickyNote } from "lucide-react";
|
|
5
|
+
import { supabase, toast } from "@flowselections/core";
|
|
6
|
+
import { dashboardDatum } from "../lib/dashboard-constanten";
|
|
7
|
+
import { dagNaam, knipNotitie, verschuifDag, metPunten, PUNT, MAX_NOTITIE_LENGTE } from "../lib/dashboard-dagnotities";
|
|
8
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
9
|
+
const db = supabase;
|
|
10
|
+
export function DashboardDagNotities() {
|
|
11
|
+
const [datum, setDatum] = useState(null);
|
|
12
|
+
const [tekst, setTekst] = useState("");
|
|
13
|
+
const [bewaren, setBewaren] = useState("");
|
|
14
|
+
const vuil = useRef(false);
|
|
15
|
+
const queryClient = useQueryClient();
|
|
16
|
+
useEffect(() => { setDatum(dashboardDatum()); }, []);
|
|
17
|
+
const { data, isLoading } = useQuery({
|
|
18
|
+
queryKey: ["dashboard-dagnotitie", datum],
|
|
19
|
+
enabled: !!datum,
|
|
20
|
+
queryFn: async () => {
|
|
21
|
+
const { data, error } = await db.from("dashboard_dagnotities").select("tekst, updated_at").eq("datum", datum).maybeSingle();
|
|
22
|
+
if (error)
|
|
23
|
+
throw error;
|
|
24
|
+
return { tekst: typeof data?.tekst === "string" ? data.tekst : "", updated_at: data?.updated_at ?? null };
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
if (data && !vuil.current)
|
|
29
|
+
setTekst(metPunten(data.tekst));
|
|
30
|
+
}, [data]);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (!vuil.current || !datum)
|
|
33
|
+
return;
|
|
34
|
+
const d = datum;
|
|
35
|
+
const t = window.setTimeout(async () => {
|
|
36
|
+
setBewaren("bezig");
|
|
37
|
+
const { error } = await db.from("dashboard_dagnotities").upsert({ datum: d, tekst }, { onConflict: "datum" });
|
|
38
|
+
if (error) {
|
|
39
|
+
setBewaren("");
|
|
40
|
+
toast.error("Notitie kon niet worden bewaard");
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
vuil.current = false;
|
|
44
|
+
setBewaren("bewaard");
|
|
45
|
+
queryClient.setQueryData(["dashboard-dagnotitie", d], { tekst, updated_at: new Date().toISOString() });
|
|
46
|
+
}, 800);
|
|
47
|
+
return () => window.clearTimeout(t);
|
|
48
|
+
}, [tekst, datum, queryClient]);
|
|
49
|
+
const wissel = (n) => { vuil.current = false; setBewaren(""); setTekst(""); setDatum(n); };
|
|
50
|
+
const naam = datum ? dagNaam(datum) : "vandaag";
|
|
51
|
+
const vandaag = datum ? dashboardDatum() : "";
|
|
52
|
+
const knop = "inline-flex h-6 w-6 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-accent hover:text-foreground";
|
|
53
|
+
return (_jsxs("div", { className: "dashboard-notes flex w-full max-w-sm flex-col gap-1 rounded-xl border border-border bg-card p-2 shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("p", { className: "flex items-center gap-1.5 whitespace-nowrap text-xs font-semibold", children: [_jsx(StickyNote, { className: "h-3.5 w-3.5 text-muted-foreground" }), "Notities voor ", naam] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", className: knop, "aria-label": "Vorige dag", onClick: () => datum && wissel(verschuifDag(datum, -1)), children: _jsx(ChevronLeft, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", className: "h-6 rounded-md border border-border px-2 text-[11px] hover:bg-accent disabled:opacity-50", disabled: datum === vandaag, onClick: () => wissel(vandaag), children: "Vandaag" }), _jsx("button", { type: "button", className: "h-6 rounded-md border border-border px-2 text-[11px] hover:bg-accent disabled:opacity-50", disabled: !!datum && datum === verschuifDag(vandaag, 1), onClick: () => wissel(verschuifDag(vandaag, 1)), children: "Morgen" }), _jsx("button", { type: "button", className: knop, "aria-label": "Volgende dag", onClick: () => datum && wissel(verschuifDag(datum, 1)), children: _jsx(ChevronRight, { className: "h-3.5 w-3.5" }) })] })] }), _jsx("textarea", { "aria-label": `Notities voor ${naam}`, value: tekst, disabled: isLoading || !datum, maxLength: MAX_NOTITIE_LENGTE, onChange: (e) => {
|
|
54
|
+
const el = e.target;
|
|
55
|
+
const oud = el.value;
|
|
56
|
+
const pos = el.selectionStart ?? oud.length;
|
|
57
|
+
const nieuw = knipNotitie(oud.replace(/^• ?$/, "") === "" ? "" : metPunten(oud));
|
|
58
|
+
const extra = metPunten(oud.slice(0, pos)).length - oud.slice(0, pos).length;
|
|
59
|
+
vuil.current = true;
|
|
60
|
+
setBewaren("");
|
|
61
|
+
setTekst(nieuw);
|
|
62
|
+
requestAnimationFrame(() => { const c = Math.min(nieuw.length, pos + (nieuw === "" ? -pos : extra)); el.setSelectionRange(c, c); });
|
|
63
|
+
}, onFocus: () => { if (tekst === "")
|
|
64
|
+
setTekst(PUNT); }, placeholder: isLoading ? "Laden…" : `Schrijf een notitie voor ${naam}…`, className: "h-[108px] w-full resize-none overflow-auto rounded-md border border-input bg-background px-2 py-1 text-xs focus:outline-none focus-visible:ring-1 focus-visible:ring-ring" }), _jsx("p", { className: "h-3 text-[10px] leading-3 text-muted-foreground", children: bewaren === "bezig" ? "Bewaren…" : bewaren === "bewaard" ? "Bewaard" : "Gedeeld met alle planners" })] }));
|
|
65
|
+
}
|
|
@@ -1 +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;
|
|
1
|
+
{"version":3,"file":"DashboardPlannerInstallatieTechniekPage.d.ts","sourceRoot":"","sources":["../../src/components/DashboardPlannerInstallatieTechniekPage.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qDAAqD,CAAC;AAKzF,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,+BA0GnG;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"}
|
|
@@ -9,13 +9,14 @@ import { DASHBOARD_TIJDZONE } from "../lib/dashboard-constanten.js";
|
|
|
9
9
|
import { useEffect, useRef, useState } from "react";
|
|
10
10
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
11
11
|
import { useServerFn } from "@tanstack/react-start";
|
|
12
|
-
import { Link } from "@tanstack/react-router";
|
|
12
|
+
import { Link, useRouter } from "@tanstack/react-router";
|
|
13
13
|
import { AlertTriangle, ArrowUpRight, CalendarDays, Clock, FileText, Mail, Receipt, RefreshCw, Wrench, } from "lucide-react";
|
|
14
14
|
import { Button, Card, CardContent, cn, Skeleton, toast, useAuth } from "@flowselections/core";
|
|
15
15
|
import { getDashboardData } from "../lib/dashboard-planner-installatie-techniek.functions";
|
|
16
|
-
import { MODULE_TEGELS } from "../lib/dashboard-planner-installatie-techniek.modules";
|
|
16
|
+
import { MODULE_TEGELS, kiesModulePad } from "../lib/dashboard-planner-installatie-techniek.modules";
|
|
17
17
|
import { DashboardStatistieken, normaliseerStats } from "./DashboardStatistieken";
|
|
18
18
|
import { DashboardSnelkoppelingen } from "./DashboardSnelkoppelingen";
|
|
19
|
+
import { DashboardDagNotities } from "./DashboardDagNotities";
|
|
19
20
|
import { dashboardViewportStyles } from "./dashboard-viewport";
|
|
20
21
|
const ICONEN = {
|
|
21
22
|
planning: CalendarDays,
|
|
@@ -158,16 +159,21 @@ export function DashboardPlannerInstallatieTechniekPage({ modules } = {}) {
|
|
|
158
159
|
refetch();
|
|
159
160
|
toast.success("Dashboard ververst");
|
|
160
161
|
};
|
|
161
|
-
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')
|
|
162
|
+
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"] }), _jsx(DashboardDagNotities, {})] }), 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')
|
|
162
163
|
? 'Je sessie is verlopen — log opnieuw in.'
|
|
163
164
|
: '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 })] }));
|
|
164
165
|
}
|
|
165
166
|
export function DashboardModuleNavigatie({ kpis, loading }) {
|
|
167
|
+
const router = useRouter();
|
|
168
|
+
const bekendePaden = Object.keys(router.routesByPath ?? {});
|
|
166
169
|
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) => {
|
|
167
170
|
const Icon = ICONEN[tegel.key] ?? FileText;
|
|
168
171
|
const kleur = MODULE_KLEUREN[tegel.key] ?? STANDAARD_KLEUR;
|
|
169
172
|
const waarde = tegel.kpi ? kpis[tegel.kpi] : null;
|
|
170
|
-
|
|
173
|
+
const pad = kiesModulePad(tegel, bekendePaden);
|
|
174
|
+
return (_jsx(Link, { ...(pad
|
|
175
|
+
? { to: pad }
|
|
176
|
+
: { 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 &&
|
|
171
177
|
(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));
|
|
172
178
|
}) })] }));
|
|
173
179
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModulePlaceholderPage.d.ts","sourceRoot":"","sources":["../../src/components/ModulePlaceholderPage.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"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"}
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
// Tijdelijke pagina voor een Installatie Techniek-module. Verdwijnt zodra alle
|
|
3
3
|
// modules in één shell draaien en de tegels direct naar de module wijzen.
|
|
4
|
-
|
|
4
|
+
// De shell rendert deze pagina zonder props; de module komt uit ?module=<naam>.
|
|
5
|
+
import { Link, useRouterState } from "@tanstack/react-router";
|
|
5
6
|
import { ArrowLeft, Construction } from "lucide-react";
|
|
6
7
|
import { Button, Card, CardContent } from "@flowselections/core";
|
|
7
8
|
import { vindModuleTegel } from "../lib/dashboard-planner-installatie-techniek.modules";
|
|
8
9
|
import { DASHBOARD_MODULE_ID } from "../lib/dashboard-module-id";
|
|
9
|
-
export function ModulePlaceholderPage({ moduleKey
|
|
10
|
-
const
|
|
11
|
-
|
|
10
|
+
export function ModulePlaceholderPage({ moduleKey } = {}) {
|
|
11
|
+
const uitAdres = useRouterState({
|
|
12
|
+
select: (s) => {
|
|
13
|
+
const m = s.location.search?.module;
|
|
14
|
+
return typeof m === "string" ? m : undefined;
|
|
15
|
+
},
|
|
16
|
+
});
|
|
17
|
+
const sleutel = moduleKey ?? uitAdres ?? DASHBOARD_MODULE_ID;
|
|
18
|
+
const titel = vindModuleTegel(sleutel)?.titel ?? "Module";
|
|
19
|
+
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"] }) })] }) }) }));
|
|
12
20
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
+
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-toolbar > .dashboard-notes { grid-column: 1 / -1; grid-row: 3; max-width: none; }\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 auto; gap: 6px 12px; align-items: start; }\n .dashboard-toolbar > p { grid-column: 1; grid-row: 1; }\n .dashboard-toolbar > .dashboard-shortcuts { grid-column: 1; grid-row: 2; }\n .dashboard-toolbar > button { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: start; }\n .dashboard-toolbar > .dashboard-notes { grid-column: 3; grid-row: 1 / span 2; width: 380px; max-width: none; }\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: 116px; }\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}";
|
|
2
2
|
//# sourceMappingURL=dashboard-viewport.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard-viewport.d.ts","sourceRoot":"","sources":["../../src/components/dashboard-viewport.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,
|
|
1
|
+
{"version":3,"file":"dashboard-viewport.d.ts","sourceRoot":"","sources":["../../src/components/dashboard-viewport.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,uuMA8GlC,CAAC"}
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
export const dashboardViewportStyles = `
|
|
2
2
|
.planner-dashboard {
|
|
3
3
|
--dashboard-gap: 12px;
|
|
4
|
+
--funnel-blue-1: #3b82f6; --funnel-blue-2: #2563eb; --funnel-blue-3: #1d4ed8;
|
|
5
|
+
--funnel-navy: #1e3a8a;
|
|
6
|
+
--funnel-gray-1: #1e40af; --funnel-gray-2: #1e3a8a; --funnel-gray-3: #172554; --funnel-gray-4: #172554; --funnel-gray-5: #0f1d4a;
|
|
7
|
+
--funnel-paid: #1e40af; --funnel-unpaid: #172554;
|
|
8
|
+
--funnel-extra: #5b21b6;
|
|
9
|
+
}
|
|
10
|
+
.dark .planner-dashboard, .planner-dashboard.dark {
|
|
11
|
+
--funnel-blue-1: #60a5fa; --funnel-blue-2: #3b82f6; --funnel-blue-3: #2563eb;
|
|
12
|
+
--funnel-navy: #3b5bdb;
|
|
13
|
+
--funnel-gray-1: #4f6fe0; --funnel-gray-2: #3b5bdb; --funnel-gray-3: #3451c7; --funnel-gray-4: #2f47b3; --funnel-gray-5: #2a3f9f;
|
|
14
|
+
--funnel-paid: #4f6fe0; --funnel-unpaid: #3451c7;
|
|
15
|
+
--funnel-extra: #8b5cf6;
|
|
4
16
|
}
|
|
5
17
|
.dashboard-shortcuts { max-width: 100%; }
|
|
6
18
|
.dashboard-shortcut-items { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
|
|
@@ -13,6 +25,7 @@ export const dashboardViewportStyles = `
|
|
|
13
25
|
.dashboard-toolbar > p { grid-column: 1; grid-row: 1; }
|
|
14
26
|
.dashboard-toolbar > .dashboard-shortcuts { grid-column: 1 / -1; grid-row: 2; }
|
|
15
27
|
.dashboard-toolbar > button { grid-column: 2; grid-row: 1; }
|
|
28
|
+
.dashboard-toolbar > .dashboard-notes { grid-column: 1 / -1; grid-row: 3; max-width: none; }
|
|
16
29
|
.dashboard-shortcuts { grid-column: 1 / -1; flex-wrap: wrap; }
|
|
17
30
|
.dashboard-shortcut-items { flex-basis: 100%; }
|
|
18
31
|
}
|
|
@@ -26,10 +39,11 @@ export const dashboardViewportStyles = `
|
|
|
26
39
|
padding-bottom: 12px;
|
|
27
40
|
}
|
|
28
41
|
.planner-dashboard > * { margin-block: 0; }
|
|
29
|
-
.dashboard-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
|
|
42
|
+
.dashboard-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: start; }
|
|
30
43
|
.dashboard-toolbar > p { grid-column: 1; grid-row: 1; }
|
|
31
|
-
.dashboard-toolbar > .dashboard-shortcuts { grid-column: 1
|
|
32
|
-
.dashboard-toolbar > button { grid-column: 2; grid-row: 1; }
|
|
44
|
+
.dashboard-toolbar > .dashboard-shortcuts { grid-column: 1; grid-row: 2; }
|
|
45
|
+
.dashboard-toolbar > button { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: start; }
|
|
46
|
+
.dashboard-toolbar > .dashboard-notes { grid-column: 3; grid-row: 1 / span 2; width: 380px; max-width: none; }
|
|
33
47
|
.dashboard-shortcuts { padding-block: 0; }
|
|
34
48
|
.dashboard-shortcut-items a { font-size: 11px; line-height: 14px; }
|
|
35
49
|
.dashboard-module-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
|
@@ -56,7 +70,7 @@ export const dashboardViewportStyles = `
|
|
|
56
70
|
.dashboard-hours { flex: 1; display: flex; flex-direction: column; gap: 8px; }
|
|
57
71
|
.dashboard-hours > * { margin-block: 0; }
|
|
58
72
|
.dashboard-hours-heading { flex-wrap: wrap; }
|
|
59
|
-
.dashboard-hours-chart { height: 160px; flex: 1; min-height:
|
|
73
|
+
.dashboard-hours-chart { height: 160px; flex: 1; min-height: 116px; }
|
|
60
74
|
.dashboard-funnel-chart { max-height: 200px; }
|
|
61
75
|
.dashboard-funnel-tip { min-height: 48px; }
|
|
62
76
|
.dashboard-stats h2 { font-size: 16px; line-height: 20px; }
|