@burdenoff/microfe-subscriberbot 2026.706.2 → 2026.706.3

package/dist/subscriberbot/pages/DashboardPage.js

@@ -5,13 +5,15 @@ import { formatCurrency as r, formatEnumLabel as i, formatRelativeTime as a } fr
 import { StatusBadge as o } from "../components/StatusBadge.js";
 import { EmptyState as s } from "../components/EmptyState.js";
 import { ErrorView as c, LoadingView as l, Section as u } from "../components/StateViews.js";
-import { useInboxMessages as d, useInvoices as f, useRelationships as p, useRenewalEvents as m } from "../hooks/useSubscriberBotApi.js";
-import { useMemo as h } from "react";
-import { AlertTriangle as g, ArrowRight as _, Bot as v, CalendarClock as y, Inbox as b, Repeat2 as x, Sparkles as S, Wallet as C } from "lucide-react";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
-import { PagePurpose as E } from "@burdenoff/fe-libs/ui";
+import { Donut as d, Legend as f, Timeline as p } from "../components/viz.js";
+import "../components/index.js";
+import { useInboxMessages as m, useInvoices as h, useRelationships as g, useRenewalEvents as _ } from "../hooks/useSubscriberBotApi.js";
+import { useMemo as v } from "react";
+import { AlertTriangle as y, ArrowRight as b, ArrowUpRight as x, Bot as S, CalendarClock as C, Inbox as w, Repeat2 as T, ShieldCheck as E, Sparkles as D, Wallet as O } from "lucide-react";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
+import { GlassCard as j, PagePurpose as M } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/DashboardPage.tsx
-var D = {
+var N = {
 	DAILY: 30,
 	WEEKLY: 4.345,
 	MONTHLY: 1,
@@ -20,250 +22,321 @@ var D = {
 	LIFETIME: 0,
 	FREE: 0,
 	USAGE_BASED: 1
-};
-function O() {
-	let { navigateTo: O, currentUser: k } = e(), A = p({ pagination: {
+}, P = 1e3 * 60 * 60 * 24;
+function F() {
+	let { navigateTo: F, currentUser: I } = e(), L = g({ pagination: {
 		limit: 100,
 		offset: 0
-	} }), j = f({ pagination: {
+	} }), R = h({ pagination: {
 		limit: 50,
 		offset: 0
-	} }), M = d({ pagination: {
+	} }), z = m({ pagination: {
 		limit: 50,
 		offset: 0
-	} }), N = m({ upcomingOnly: !0 }), P = h(() => A.data?.items ?? [], [A.data]), F = h(() => j.data?.items ?? [], [j.data]), I = h(() => M.data?.items ?? [], [M.data]), L = N.data ?? [], R = h(() => {
-		let e = P.filter((e) => e.status === "ACTIVE" || e.status === "TRIAL"), t = e.reduce((e, t) => e + t.amount * (D[t.interval] ?? 1), 0), n = P.filter((e) => e.status === "TRIAL").length, r = P.filter((e) => e.status === "PAST_DUE").length, i = e[0]?.currency ?? "USD", a = I.filter((e) => e.actionRequired && !e.isRead).length, o = F.filter((e) => e.status === "ISSUED" || e.status === "OVERDUE" || e.status === "FAILED"), s = o.reduce((e, t) => e + t.total, 0);
+	} }), B = _({ upcomingOnly: !0 }), V = v(() => L.data?.items ?? [], [L.data]), H = v(() => R.data?.items ?? [], [R.data]), U = v(() => z.data?.items ?? [], [z.data]), W = v(() => B.data ?? [], [B.data]), G = v(() => {
+		let e = /* @__PURE__ */ new Map();
+		return V.forEach((t) => e.set(t.id, t)), e;
+	}, [V]), K = v(() => {
+		let e = V.filter((e) => e.status === "ACTIVE" || e.status === "TRIAL"), t = e.reduce((e, t) => e + t.amount * (N[t.interval] ?? 1), 0), n = e[0]?.currency ?? V[0]?.currency ?? "USD", r = U.filter((e) => e.actionRequired && !e.isRead).length, i = H.filter((e) => e.status === "ISSUED" || e.status === "OVERDUE" || e.status === "FAILED"), a = i.reduce((e, t) => e + t.total, 0), o = V.filter((e) => e.status === "PAST_DUE" || e.status === "LAPSED").length;
 		return {
 			activeCount: e.length,
+			totalCount: V.length,
 			monthlySpend: t,
-			primaryCurrency: i,
-			trials: n,
-			pastDue: r,
-			unreadActionRequired: a,
-			openInvoiceCount: o.length,
-			openInvoiceTotal: s
+			primaryCurrency: n,
+			unreadActionRequired: r,
+			openInvoiceCount: i.length,
+			openInvoiceTotal: a,
+			atRisk: o
 		};
 	}, [
-		P,
-		I,
-		F
-	]), z = h(() => {
+		V,
+		U,
+		H
+	]), q = v(() => {
 		let e = /* @__PURE__ */ new Map();
-		return P.forEach((t) => e.set(t.status, (e.get(t.status) ?? 0) + 1)), Array.from(e.entries()).sort((e, t) => t[1] - e[1]);
-	}, [P]), B = A.isLoading || j.isLoading || M.isLoading || N.isLoading, V = A.isError && j.isError && M.isError && N.isError;
-	if (B) return /* @__PURE__ */ w(t, {
+		return V.forEach((t) => e.set(t.status, (e.get(t.status) ?? 0) + 1)), Array.from(e.entries()).sort((e, t) => t[1] - e[1]).map(([e, t]) => ({
+			label: i(e),
+			value: t
+		}));
+	}, [V]), J = v(() => {
+		let e = Date.now(), t = W.map((t) => {
+			let n = G.get(t.relationshipId), r = new Date(t.occursAt).getTime();
+			return {
+				id: t.id,
+				relationshipId: t.relationshipId,
+				title: n?.label ?? i(t.eventType),
+				when: t.occursAt,
+				amount: t.amount ?? n?.amount ?? null,
+				currency: t.currency ?? n?.currency ?? null,
+				soon: !Number.isNaN(r) && r - e <= 7 * P
+			};
+		});
+		return t.length > 0 ? t.filter((e) => !Number.isNaN(new Date(e.when).getTime())).sort((e, t) => new Date(e.when).getTime() - new Date(t.when).getTime()) : V.filter((t) => {
+			if (!t.renewsAt) return !1;
+			let n = new Date(t.renewsAt).getTime();
+			return !Number.isNaN(n) && n >= e;
+		}).map((t) => {
+			let n = new Date(t.renewsAt).getTime();
+			return {
+				id: t.id,
+				relationshipId: t.id,
+				title: t.label,
+				when: t.renewsAt,
+				amount: t.amount,
+				currency: t.currency,
+				soon: n - e <= 7 * P
+			};
+		}).sort((e, t) => new Date(e.when).getTime() - new Date(t.when).getTime());
+	}, [
+		W,
+		V,
+		G
+	]), Y = v(() => J.slice(0, 6).map((e) => ({
+		title: e.title,
+		sub: a(e.when),
+		tone: e.soon ? "warning" : "default",
+		meta: e.amount == null ? void 0 : r(e.amount, e.currency ?? K.primaryCurrency, { maximumFractionDigits: 0 })
+	})), [J, K.primaryCurrency]), X = v(() => U.filter((e) => e.actionRequired), [U]), Z = L.isLoading || R.isLoading || z.isLoading || B.isLoading, Q = L.isError && R.isError && z.isError && B.isError;
+	if (Z) return /* @__PURE__ */ k(t, {
 		title: "Overview",
 		description: "Your recurring digital relationships at a glance",
-		children: /* @__PURE__ */ w(l, { label: "Loading your subscription portfolio…" })
+		children: /* @__PURE__ */ k(l, { label: "Loading your subscription portfolio…" })
 	});
-	if (V) return /* @__PURE__ */ w(t, {
+	if (Q) return /* @__PURE__ */ k(t, {
 		title: "Overview",
 		description: "Your recurring digital relationships at a glance",
-		children: /* @__PURE__ */ w(c, {
+		children: /* @__PURE__ */ k(c, {
 			message: "We couldn't reach the Subscriber Bot service. Please try again.",
 			onRetry: () => {
-				A.refetch(), j.refetch(), M.refetch(), N.refetch();
+				L.refetch(), R.refetch(), z.refetch(), B.refetch();
 			}
 		})
 	});
-	let H = k?.firstName || k?.name?.split(" ")[0];
-	return /* @__PURE__ */ T(t, {
-		title: H ? `Welcome back, ${H}` : "Overview",
+	let $ = I?.firstName || I?.name?.split(" ")[0], ee = [
+		{
+			label: "Add a relationship",
+			description: "Track a new subscription",
+			icon: /* @__PURE__ */ k(T, { className: "h-5 w-5" }),
+			path: "/relationships/new"
+		},
+		{
+			label: "Discover providers",
+			description: "Browse the registry",
+			icon: /* @__PURE__ */ k(D, { className: "h-5 w-5" }),
+			path: "/providers"
+		},
+		{
+			label: "Open inbox",
+			description: "Merged communications",
+			icon: /* @__PURE__ */ k(w, { className: "h-5 w-5" }),
+			path: "/inbox"
+		},
+		{
+			label: "Configure agents",
+			description: "Automate your portfolio",
+			icon: /* @__PURE__ */ k(S, { className: "h-5 w-5" }),
+			path: "/agents"
+		}
+	];
+	return /* @__PURE__ */ A(t, {
+		title: $ ? `Welcome back, ${$}` : "Overview",
 		description: "Everything you pay for on repeat — in one intelligent console.",
 		children: [
-			/* @__PURE__ */ w(E, {
+			/* @__PURE__ */ k(M, {
 				className: "mb-6",
 				children: "Subscriber Bot is your system of record for every recurring digital relationship. See total recurring spend, what renews next, what needs action, and what to optimize — all from real data across your providers."
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ A("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ w(n, {
+					/* @__PURE__ */ k(n, {
 						featured: !0,
-						icon: /* @__PURE__ */ w(C, {}),
-						value: r(R.monthlySpend, R.primaryCurrency, { maximumFractionDigits: 0 }),
+						icon: /* @__PURE__ */ k(O, {}),
+						value: r(K.monthlySpend, K.primaryCurrency, { maximumFractionDigits: 0 }),
 						label: "Recurring spend / month"
 					}),
-					/* @__PURE__ */ w(n, {
-						icon: /* @__PURE__ */ w(x, {}),
-						value: R.activeCount,
+					/* @__PURE__ */ k(n, {
+						icon: /* @__PURE__ */ k(T, {}),
+						value: K.activeCount,
 						label: "Active relationships"
 					}),
-					/* @__PURE__ */ w(n, {
-						icon: /* @__PURE__ */ w(y, {}),
-						value: L.length,
+					/* @__PURE__ */ k(n, {
+						icon: /* @__PURE__ */ k(C, {}),
+						value: J.length,
 						label: "Upcoming renewals"
 					}),
-					/* @__PURE__ */ w(n, {
-						icon: /* @__PURE__ */ w(g, {}),
-						value: R.unreadActionRequired,
-						label: "Need your action"
+					/* @__PURE__ */ k(n, {
+						icon: /* @__PURE__ */ k(y, {}),
+						value: K.unreadActionRequired,
+						label: "Need your action",
+						trend: K.unreadActionRequired > 0 ? "down" : void 0
 					})
 				]
 			}),
-			/* @__PURE__ */ w("div", {
-				className: "mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4",
-				children: [
-					{
-						label: "Add a relationship",
-						description: "Track a new subscription",
-						icon: /* @__PURE__ */ w(x, { className: "h-5 w-5" }),
-						path: "/relationships/new"
-					},
-					{
-						label: "Discover providers",
-						description: "Browse the registry",
-						icon: /* @__PURE__ */ w(S, { className: "h-5 w-5" }),
-						path: "/providers"
-					},
-					{
-						label: "Open inbox",
-						description: "Merged communications",
-						icon: /* @__PURE__ */ w(b, { className: "h-5 w-5" }),
-						path: "/inbox"
-					},
-					{
-						label: "Configure agents",
-						description: "Automate your portfolio",
-						icon: /* @__PURE__ */ w(v, { className: "h-5 w-5" }),
-						path: "/agents"
-					}
-				].map((e) => /* @__PURE__ */ T("button", {
-					type: "button",
-					onClick: () => O(e.path),
-					className: "flex items-center gap-3 rounded-lg border border-border-subtle bg-bg-surface p-4 text-left transition-shadow hover:shadow-md",
-					children: [
-						/* @__PURE__ */ w("span", {
-							className: "flex size-10 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-							children: e.icon
-						}),
-						/* @__PURE__ */ T("span", {
-							className: "min-w-0 flex-1",
-							children: [/* @__PURE__ */ w("span", {
-								className: "block text-sm font-medium text-text-primary",
-								children: e.label
-							}), /* @__PURE__ */ w("span", {
-								className: "block text-xs text-text-secondary",
-								children: e.description
-							})]
-						}),
-						/* @__PURE__ */ w(_, { className: "h-4 w-4 shrink-0 text-text-secondary" })
-					]
-				}, e.path))
-			}),
-			/* @__PURE__ */ T("div", {
-				className: "grid grid-cols-1 gap-8 lg:grid-cols-2",
-				children: [/* @__PURE__ */ w(u, {
-					title: "Upcoming renewals",
-					description: "What's charging next",
-					action: /* @__PURE__ */ w("button", {
-						type: "button",
-						onClick: () => O("/relationships"),
-						className: "text-sm font-medium text-text-link hover:underline",
-						children: "View all"
-					}),
-					children: L.length === 0 ? /* @__PURE__ */ w(s, {
-						illustration: "empty-calendar",
-						title: "No upcoming renewals",
-						description: "Renewals you track will appear here ahead of time."
-					}) : /* @__PURE__ */ w("div", {
-						className: "divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface",
-						children: L.slice(0, 6).map((e) => /* @__PURE__ */ T("button", {
+			/* @__PURE__ */ A("div", {
+				className: "mt-8 grid grid-cols-1 gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ k("div", {
+					className: "lg:col-span-2",
+					children: /* @__PURE__ */ k(u, {
+						title: "Upcoming renewals",
+						description: "What's charging next across your portfolio",
+						className: "mt-0",
+						action: /* @__PURE__ */ A("button", {
 							type: "button",
-							onClick: () => O(`/relationships/${e.relationshipId}`),
-							className: "flex w-full items-center justify-between gap-3 p-3 text-left hover:bg-bg-sunken",
-							children: [/* @__PURE__ */ T("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ w("p", {
-									className: "truncate text-sm font-medium text-text-primary",
-									children: i(e.eventType)
-								}), /* @__PURE__ */ T("p", {
-									className: "text-xs text-text-secondary",
-									children: [a(e.occursAt), e.detail ? ` · ${e.detail}` : ""]
-								})]
-							}), e.amount != null && /* @__PURE__ */ w("span", {
-								className: "shrink-0 text-sm font-semibold tabular-nums text-text-primary",
-								children: r(e.amount, e.currency ?? R.primaryCurrency)
-							})]
-						}, e.id))
+							onClick: () => F("/relationships"),
+							className: "inline-flex items-center gap-1 text-sm font-medium text-text-link hover:underline",
+							children: ["View all ", /* @__PURE__ */ k(x, { className: "h-3.5 w-3.5" })]
+						}),
+						children: /* @__PURE__ */ k(j, {
+							treatment: "plain",
+							className: "p-5",
+							children: Y.length === 0 ? /* @__PURE__ */ k(s, {
+								illustration: "empty-calendar",
+								title: "No upcoming renewals",
+								description: "Renewals you track will appear here ahead of time."
+							}) : /* @__PURE__ */ k(p, { items: Y })
+						})
 					})
-				}), /* @__PURE__ */ w(u, {
-					title: "Needs your attention",
-					description: "Required actions from the Universal Inbox",
-					action: /* @__PURE__ */ w("button", {
-						type: "button",
-						onClick: () => O("/inbox"),
-						className: "text-sm font-medium text-text-link hover:underline",
-						children: "Open inbox"
-					}),
-					children: I.filter((e) => e.actionRequired).length === 0 ? /* @__PURE__ */ w(s, {
-						illustration: "empty-inbox",
-						title: "You're all caught up",
-						description: "Required actions across all your channels will surface here."
-					}) : /* @__PURE__ */ w("div", {
-						className: "divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface",
-						children: I.filter((e) => e.actionRequired).slice(0, 6).map((e) => /* @__PURE__ */ T("button", {
+				}), /* @__PURE__ */ A("div", {
+					className: "flex flex-col gap-6",
+					children: [/* @__PURE__ */ k(u, {
+						title: "Portfolio by status",
+						description: "Where your relationships stand",
+						className: "mt-0",
+						children: /* @__PURE__ */ k(j, {
+							treatment: "glass",
+							className: "p-5",
+							children: q.length === 0 ? /* @__PURE__ */ k(s, {
+								illustration: "empty-data",
+								title: "No relationships yet",
+								description: "Add your first subscription to see the breakdown.",
+								action: /* @__PURE__ */ k("button", {
+									type: "button",
+									onClick: () => F("/relationships/new"),
+									className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
+									children: "Add relationship"
+								})
+							}) : /* @__PURE__ */ A("div", {
+								className: "flex flex-col items-center gap-5 sm:flex-row sm:items-center lg:flex-col xl:flex-row",
+								children: [/* @__PURE__ */ k(d, {
+									data: q,
+									size: 148,
+									thickness: 20,
+									centerLabel: String(K.totalCount),
+									centerSub: K.totalCount === 1 ? "relationship" : "relationships",
+									className: "shrink-0"
+								}), /* @__PURE__ */ k(f, {
+									data: q,
+									className: "w-full min-w-0 flex-1"
+								})]
+							})
+						})
+					}), /* @__PURE__ */ k(u, {
+						title: "Needs attention",
+						description: "Required actions from the Universal Inbox",
+						className: "mt-0",
+						action: /* @__PURE__ */ k("button", {
 							type: "button",
-							onClick: () => O("/inbox"),
-							className: "flex w-full items-start justify-between gap-3 p-3 text-left hover:bg-bg-sunken",
-							children: [/* @__PURE__ */ T("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ w("p", {
-									className: "truncate text-sm font-medium text-text-primary",
-									children: e.subject || "(no subject)"
-								}), e.preview && /* @__PURE__ */ w("p", {
-									className: "truncate text-xs text-text-secondary",
-									children: e.preview
+							onClick: () => F("/inbox"),
+							className: "text-sm font-medium text-text-link hover:underline",
+							children: "Open inbox"
+						}),
+						children: /* @__PURE__ */ k(j, {
+							treatment: "plain",
+							className: "p-3",
+							children: X.length === 0 ? /* @__PURE__ */ A("div", {
+								className: "flex items-center gap-3 px-2 py-4",
+								children: [/* @__PURE__ */ k("span", {
+									className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-status-success-bg-subtle text-status-success-text",
+									children: /* @__PURE__ */ k(E, { className: "h-5 w-5" })
+								}), /* @__PURE__ */ A("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ k("p", {
+										className: "text-sm font-medium text-text-primary",
+										children: "You're all caught up"
+									}), /* @__PURE__ */ k("p", {
+										className: "text-xs text-text-secondary",
+										children: "Required actions across your channels will surface here."
+									})]
 								})]
-							}), /* @__PURE__ */ w(o, {
-								status: e.category,
-								className: "shrink-0"
-							})]
-						}, e.id))
-					})
+							}) : /* @__PURE__ */ k("ul", {
+								className: "space-y-1",
+								children: X.slice(0, 5).map((e) => /* @__PURE__ */ k("li", { children: /* @__PURE__ */ A("button", {
+									type: "button",
+									onClick: () => F("/inbox"),
+									className: "flex w-full items-center gap-3 rounded-lg border-l-2 border-status-warning-text/60 bg-status-warning-bg-subtle/50 p-3 text-left transition-colors hover:bg-status-warning-bg-subtle",
+									children: [/* @__PURE__ */ A("div", {
+										className: "min-w-0 flex-1",
+										children: [/* @__PURE__ */ k("p", {
+											className: "truncate text-sm font-medium text-text-primary",
+											children: e.subject || "(no subject)"
+										}), e.preview && /* @__PURE__ */ k("p", {
+											className: "truncate text-xs text-text-secondary",
+											children: e.preview
+										})]
+									}), /* @__PURE__ */ k(o, {
+										status: e.category,
+										className: "shrink-0"
+									})]
+								}) }, e.id))
+							})
+						})
+					})]
 				})]
 			}),
-			/* @__PURE__ */ w(u, {
-				title: "Portfolio by lifecycle",
-				description: "Where your relationships stand",
-				children: z.length === 0 ? /* @__PURE__ */ w(s, {
-					illustration: "empty-data",
-					title: "No relationships yet",
-					description: "Add your first subscription to see your portfolio breakdown.",
-					action: /* @__PURE__ */ w("button", {
-						type: "button",
-						onClick: () => O("/relationships/new"),
-						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
-						children: "Add relationship"
-					})
-				}) : /* @__PURE__ */ T("div", {
-					className: "flex flex-wrap gap-3",
-					children: [z.map(([e, t]) => /* @__PURE__ */ T("div", {
-						className: "flex items-center gap-2 rounded-lg border border-border-subtle bg-bg-surface px-4 py-3",
-						children: [/* @__PURE__ */ w(o, { status: e }), /* @__PURE__ */ w("span", {
-							className: "text-lg font-semibold tabular-nums text-text-primary",
-							children: t
-						})]
-					}, e)), R.openInvoiceCount > 0 && /* @__PURE__ */ w("div", {
-						className: "flex items-center gap-2 rounded-lg border border-status-warning-text/30 bg-status-warning-bg-subtle px-4 py-3",
-						children: /* @__PURE__ */ T("span", {
-							className: "text-sm font-medium text-status-warning-text",
-							children: [
-								R.openInvoiceCount,
-								" open invoice",
-								R.openInvoiceCount === 1 ? "" : "s",
-								" ·",
-								" ",
-								r(R.openInvoiceTotal, R.primaryCurrency)
-							]
-						})
+			K.openInvoiceCount > 0 && /* @__PURE__ */ A("button", {
+				type: "button",
+				onClick: () => F("/invoices"),
+				className: "mt-6 flex w-full items-center justify-between gap-3 rounded-xl border border-status-warning-text/30 bg-status-warning-bg-subtle px-5 py-4 text-left transition-shadow hover:shadow-md",
+				children: [/* @__PURE__ */ A("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ k(y, { className: "h-5 w-5 shrink-0 text-status-warning-text" }), /* @__PURE__ */ A("span", {
+						className: "text-sm font-medium text-status-warning-text",
+						children: [
+							K.openInvoiceCount,
+							" open invoice",
+							K.openInvoiceCount === 1 ? "" : "s",
+							" ·",
+							" ",
+							r(K.openInvoiceTotal, K.primaryCurrency),
+							" outstanding"
+						]
 					})]
+				}), /* @__PURE__ */ k(b, { className: "h-4 w-4 shrink-0 text-status-warning-text" })]
+			}),
+			/* @__PURE__ */ k(u, {
+				title: "Quick actions",
+				description: "Jump straight into your workflow",
+				children: /* @__PURE__ */ k("div", {
+					className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4",
+					children: ee.map((e) => /* @__PURE__ */ A("button", {
+						type: "button",
+						onClick: () => F(e.path),
+						className: "group flex items-center gap-3 rounded-xl border border-border-subtle bg-bg-surface p-4 text-left transition-all hover:-translate-y-0.5 hover:border-border-seam hover:shadow-md",
+						children: [
+							/* @__PURE__ */ k("span", {
+								className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
+								children: e.icon
+							}),
+							/* @__PURE__ */ A("span", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ k("span", {
+									className: "block text-sm font-medium text-text-primary",
+									children: e.label
+								}), /* @__PURE__ */ k("span", {
+									className: "block text-xs text-text-secondary",
+									children: e.description
+								})]
+							}),
+							/* @__PURE__ */ k(b, { className: "h-4 w-4 shrink-0 text-text-secondary transition-transform group-hover:translate-x-0.5" })
+						]
+					}, e.path))
 				})
 			})
 		]
 	});
 }
 //#endregion
-export { O as DashboardPage };
+export { F as DashboardPage };
 
 //# sourceMappingURL=DashboardPage.js.map