@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/pages/DashboardsPage.js

@@ -1,55 +1,150 @@
-import { useBigConsoleNavigate as e } from "../context/BigConsoleContext.js";
+import { Section as e, SectionStack as t } from "../components/common/Section.js";
+import "../components/common/index.js";
+import { useBigConsoleNavigate as n } from "../context/BigConsoleContext.js";
 import "../context/index.js";
-import { reportBigConsoleQuotaError as t } from "../utils/quota.js";
-import n from "../hooks/useDashboardOperations.js";
+import { reportBigConsoleQuotaError as r } from "../utils/quota.js";
+import i from "../hooks/useDashboardOperations.js";
 import "../hooks/index.js";
-import { BIGCONSOLE_PERMISSIONS as r } from "../../constants/permissions.js";
-import i from "../components/dashboard/CreateDashboardDialog.js";
-import a from "../components/dashboard/ImportDashboardDialog.js";
-import { isNative as o, nativeConfirm as ee, nativeImpact as s, nativeNotify as c } from "../../utils/nativeBridge.js";
-import { memo as l, useCallback as u, useEffect as d, useState as f } from "react";
-import { AccessDenied as te, PermissionButton as p } from "@burdenoff/fe-libs/shared/components";
+import { BIGCONSOLE_PERMISSIONS as a } from "../../constants/permissions.js";
+import o from "../components/dashboard/CreateDashboardDialog.js";
+import s from "../components/dashboard/ImportDashboardDialog.js";
+import { isNative as c, nativeConfirm as ee, nativeImpact as l, nativeNotify as u } from "../../utils/nativeBridge.js";
+import { memo as d, useCallback as f, useEffect as p, useState as m } from "react";
+import { AccessDenied as te, PermissionButton as h } from "@burdenoff/fe-libs/shared/components";
 import { usePermissions as ne } from "@burdenoff/fe-libs/shared/providers/shell";
-import { Calendar as m, ChevronLeft as re, ChevronRight as ie, Copy as h, FileText as g, Layers as _, LayoutDashboard as v, LayoutGrid as ae, List as oe, Pencil as y, Plus as b, Search as se, Trash2 as x, Upload as S } from "lucide-react";
-import { useI18n as ce } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AuroraBackground as le, Badge as C, Button as w, CTAOverflowMenu as ue, Card as T, CardContent as E, GlassCard as de, GradientText as fe, IllustratedEmptyState as pe, Input as me, PagePurpose as he, Spinner as D } from "@burdenoff/fe-libs/ui";
-import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { Calendar as g, ChevronLeft as re, ChevronRight as ie, Copy as _, FileText as v, Layers as y, LayoutDashboard as b, LayoutGrid as ae, List as oe, Pencil as x, Plus as S, Search as se, Trash2 as ce, Upload as le } from "lucide-react";
+import { useI18n as ue } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AuroraBackground as C, Badge as w, Button as T, CTAOverflowMenu as E, Card as D, CardContent as O, GlassCard as de, GradientText as k, IllustratedEmptyState as fe, Input as pe, PagePurpose as me, Spinner as A } from "@burdenoff/fe-libs/ui";
+import { jsx as j, jsxs as M } from "react/jsx-runtime";
 //#region src/bigconsole/pages/DashboardsPage.tsx
-var A = "bf-bigconsole-dashboards-view", j = 12, M = l(function() {
-	let l = e(), { t: M } = ce(), N = u((e, t) => {
-		let n = M(e);
+var N = "bf-bigconsole-dashboards-view", P = 12, F = 7;
+function he(e, t) {
+	if (t <= F) return Array.from({ length: t }, (e, t) => t + 1);
+	let n = new Set([
+		1,
+		t,
+		e
+	]);
+	e - 1 > 1 && n.add(e - 1), e + 1 < t && n.add(e + 1);
+	let r = Array.from(n).sort((e, t) => e - t), i = [];
+	return r.forEach((e, t) => {
+		t > 0 && e - r[t - 1] > 1 && i.push(null), i.push(e);
+	}), i;
+}
+var ge = d(function({ title: e, subtitle: t, createLabel: n, importLabel: r, onCreate: i, onImport: a, canCreate: o, canImport: s }) {
+	return /* @__PURE__ */ M("div", {
+		className: "relative overflow-hidden border-b border-[var(--color-border-seam)] bg-[image:var(--gradient-gloss-card)]",
+		children: [/* @__PURE__ */ j(C, { intensity: "subtle" }), /* @__PURE__ */ j("div", {
+			style: { padding: "var(--space-pagePadding)" },
+			children: /* @__PURE__ */ M("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					flexWrap: "wrap",
+					gap: "var(--space-formGap)"
+				},
+				children: [/* @__PURE__ */ M("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "var(--space-formGap)",
+						minWidth: 0
+					},
+					children: [/* @__PURE__ */ j("div", {
+						style: {
+							display: "flex",
+							height: "var(--size-controlHeight-lg)",
+							width: "var(--size-controlHeight-lg)",
+							flexShrink: 0,
+							alignItems: "center",
+							justifyContent: "center",
+							borderRadius: "var(--radius-card)",
+							backgroundColor: "var(--color-action-primary-bg)"
+						},
+						children: /* @__PURE__ */ j(b, { style: {
+							height: "var(--size-icon-lg)",
+							width: "var(--size-icon-lg)",
+							color: "var(--color-action-primary-text)"
+						} })
+					}), /* @__PURE__ */ M("div", {
+						style: { minWidth: 0 },
+						children: [/* @__PURE__ */ j("h1", {
+							style: {
+								fontSize: "var(--font-size-heading-h4)",
+								fontWeight: "var(--font-weight-bold)",
+								margin: 0,
+								color: "var(--color-text-primary)"
+							},
+							children: /* @__PURE__ */ j(k, { children: e })
+						}), /* @__PURE__ */ j("p", {
+							style: {
+								fontSize: "var(--font-size-body-sm)",
+								color: "var(--color-text-secondary)",
+								margin: 0
+							},
+							children: t
+						})]
+					})]
+				}), /* @__PURE__ */ j(E, {
+					primary: {
+						label: n,
+						onSelect: i,
+						disabled: !o,
+						icon: /* @__PURE__ */ j(S, { style: {
+							marginRight: "var(--space-iconGap)",
+							height: "var(--size-icon-sm)",
+							width: "var(--size-icon-sm)"
+						} })
+					},
+					actions: [{
+						label: r,
+						onSelect: a,
+						disabled: !s,
+						icon: /* @__PURE__ */ j(le, { style: {
+							height: "var(--size-icon-sm)",
+							width: "var(--size-icon-sm)"
+						} })
+					}]
+				})]
+			})
+		})]
+	});
+}), I = d(function() {
+	let d = n(), { t: C } = ue(), E = f((e, t) => {
+		let n = C(e);
 		return n === e ? t : n;
-	}, [M]), [P, ge] = f(""), [F, I] = f(1), [_e, L] = f(!1), [R, z] = f(!1), [ve, B] = f(!1), [V, ye] = f(() => {
+	}, [C]), [k, F] = m(""), [I, L] = m(1), [_e, R] = m(!1), [z, B] = m(!1), [ve, V] = m(!1), [H, ye] = m(() => {
 		try {
-			return window.localStorage.getItem(A) === "list" ? "list" : "grid";
+			return window.localStorage.getItem(N) === "list" ? "list" : "grid";
 		} catch {
 			return "grid";
 		}
-	}), H = u((e) => {
+	}), U = f((e) => {
 		ye(e);
 		try {
-			window.localStorage.setItem(A, e);
+			window.localStorage.setItem(N, e);
 		} catch {}
-	}, []), { loading: U, error: W, dashboards: G, createDashboard: K, deleteDashboard: q, cloneDashboard: J, refetch: Y } = n(), { hasPermission: X, isLoading: be } = ne(), xe = X(r.DASHBOARD_READ), Se = X(r.DASHBOARD_CREATE), Ce = X(r.DASHBOARD_IMPORT), Z = G.filter((e) => e.name.toLowerCase().includes(P.toLowerCase()) || e.description?.toLowerCase().includes(P.toLowerCase())), Q = Math.max(1, Math.ceil(Z.length / j)), $ = (F - 1) * j, we = Z.slice($, $ + j);
-	d(() => {
-		I(1);
-	}, [P, V]), d(() => {
-		F > Q && I(Q);
-	}, [F, Q]);
-	let Te = u(() => {
-		I((e) => Math.max(1, e - 1));
-	}, []), Ee = u(() => {
-		I((e) => Math.min(Q, e + 1));
-	}, [Q]), De = u((e) => {
-		I(e);
-	}, []), Oe = u(() => {
-		L(!0);
-	}, []), ke = u(({ dashboardId: e }) => {
-		Y(), l(`/dashboards/${e}`);
-	}, [Y, l]), Ae = u(() => {
-		R || L(!1);
-	}, [R]), je = u(async (e) => {
-		z(!0);
+	}, []), { loading: W, error: be, dashboards: G, createDashboard: K, deleteDashboard: q, cloneDashboard: J, refetch: Y } = i(), { hasPermission: X, isLoading: xe } = ne(), Se = X(a.DASHBOARD_READ), Ce = X(a.DASHBOARD_CREATE), we = X(a.DASHBOARD_IMPORT), Z = G.filter((e) => e.name.toLowerCase().includes(k.toLowerCase()) || e.description?.toLowerCase().includes(k.toLowerCase())), Q = Math.max(1, Math.ceil(Z.length / P)), Te = (I - 1) * P, Ee = Z.slice(Te, Te + P);
+	p(() => {
+		L(1);
+	}, [k, H]), p(() => {
+		I > Q && L(Q);
+	}, [I, Q]);
+	let De = f(() => {
+		L((e) => Math.max(1, e - 1));
+	}, []), Oe = f(() => {
+		L((e) => Math.min(Q, e + 1));
+	}, [Q]), ke = f((e) => {
+		L(e);
+	}, []), Ae = f(() => {
+		R(!0);
+	}, []), je = f(({ dashboardId: e }) => {
+		Y(), d(`/dashboards/${e}`);
+	}, [Y, d]), Me = f(() => {
+		z || R(!1);
+	}, [z]), Ne = f(async (e) => {
+		B(!0);
 		try {
 			let t = await K({
 				name: e.name,
@@ -57,613 +152,288 @@ var A = "bf-bigconsole-dashboards-view", j = 12, M = l(function() {
 				category: e.category,
 				tags: e.tags
 			});
-			t && (L(!1), l(`/dashboards/${t.id}/builder`));
+			t && (R(!1), d(`/dashboards/${t.id}/builder`));
 		} catch (e) {
-			if (t(e, "project")) {
-				L(!1);
+			if (r(e, "project")) {
+				R(!1);
 				return;
 			}
-			throw console.error("Failed to create dashboard:", e), o() && c("error"), e;
+			throw console.error("Failed to create dashboard:", e), c() && u("error"), e;
 		} finally {
-			z(!1);
+			B(!1);
 		}
-	}, [K, l]), Me = u((e) => {
-		l(`/dashboards/${e}`);
-	}, [l]), Ne = u((e, t) => {
-		t.stopPropagation(), l(`/dashboards/${e}/builder`);
-	}, [l]), Pe = u(async (e, t) => {
+	}, [K, d]), Pe = f((e) => {
+		d(`/dashboards/${e}`);
+	}, [d]), $ = f((e, t) => {
+		t.stopPropagation(), d(`/dashboards/${e}/builder`);
+	}, [d]), Fe = f(async (e, t) => {
 		t.stopPropagation();
-		let n = N("bigconsole.dashboards.confirmDelete", "Are you sure you want to delete this dashboard?"), r = await ee({
+		let n = E("bigconsole.dashboards.confirmDelete", "Are you sure you want to delete this dashboard?"), r = await ee({
 			title: "Delete dashboard?",
 			message: n,
 			okButtonTitle: "Delete",
 			cancelButtonTitle: "Cancel"
 		});
 		if (r === null ? window.confirm(n) : r) {
-			s("medium");
+			l("medium");
 			try {
-				await q(e), o() && c("success");
+				await q(e), c() && u("success");
 			} catch (e) {
-				throw o() && c("error"), e;
+				throw c() && u("error"), e;
 			}
 		}
-	}, [q, N]), Fe = u(async (e, n, r) => {
-		r.stopPropagation();
-		let i = N("bigconsole.dashboards.clone.defaultSuffix", `${n} (Copy)`), a = window.prompt(N("bigconsole.dashboards.clone.namePrompt", "Name for the cloned dashboard:"), i);
+	}, [q, E]), Ie = f(async (e, t, n) => {
+		n.stopPropagation();
+		let i = C("bigconsole.dashboards.clone.defaultSuffix", "{{sourceName}} (Copy)", { sourceName: t }), a = window.prompt(E("bigconsole.dashboards.clone.namePrompt", "Name for the cloned dashboard:"), i);
 		if (!(!a || !a.trim())) {
-			s("medium");
+			l("medium");
 			try {
 				let t = await J(e, a.trim());
-				t && (o() && c("success"), l(`/dashboards/${t.id}`));
+				t && (c() && u("success"), d(`/dashboards/${t.id}`));
 			} catch (e) {
-				if (t(e, "project")) return;
-				throw o() && c("error"), e;
+				if (r(e, "project")) return;
+				throw c() && u("error"), e;
 			}
 		}
 	}, [
 		J,
-		l,
-		N
-	]), Ie = u(() => {
-		B(!0);
-	}, []), Le = u(() => {
-		B(!1);
-	}, []), Re = u((e, t) => {
+		d,
+		E,
+		C
+	]), Le = f(() => {
+		V(!0);
+	}, []), Re = f(() => {
+		V(!1);
+	}, []), ze = f((e, t) => {
 		Y();
-	}, [Y]), ze = (e) => {
+	}, [Y]), Be = (e) => {
 		let t = new Date(e), n = /* @__PURE__ */ new Date(), r = n.getTime() - t.getTime(), i = Math.floor(r / 6e4), a = Math.floor(r / 36e5), o = Math.floor(r / 864e5);
-		return i < 1 ? N("bigconsole.dashboards.time.justNow", "Just now") : i < 60 ? `${i}${N("bigconsole.dashboards.time.minutesAgoSuffix", "m ago")}` : a < 24 ? `${a}${N("bigconsole.dashboards.time.hoursAgoSuffix", "h ago")}` : o < 7 ? `${o}${N("bigconsole.dashboards.time.daysAgoSuffix", "d ago")}` : new Intl.DateTimeFormat("en-US", {
+		return i < 1 ? E("bigconsole.dashboards.time.justNow", "Just now") : i < 60 ? `${i}${E("bigconsole.dashboards.time.minutesAgoSuffix", "m ago")}` : a < 24 ? `${a}${E("bigconsole.dashboards.time.hoursAgoSuffix", "h ago")}` : o < 7 ? `${o}${E("bigconsole.dashboards.time.daysAgoSuffix", "d ago")}` : new Intl.DateTimeFormat("en-US", {
 			month: "short",
 			day: "numeric",
 			year: t.getFullYear() === n.getFullYear() ? void 0 : "numeric"
 		}).format(t);
-	}, Be = (e) => e.widgetCount ?? 0, Ve = (e) => e.pageCount || 0;
-	return W ? /* @__PURE__ */ O("div", {
-		style: { padding: "var(--space-pagePadding)" },
-		children: /* @__PURE__ */ O(T, {
-			style: {
-				borderColor: "var(--color-status-error-border)",
-				backgroundColor: "var(--color-status-error-bgSubtle)"
-			},
-			children: /* @__PURE__ */ k(E, {
-				style: { padding: "var(--space-pagePadding)" },
-				children: [
-					/* @__PURE__ */ O("h3", {
-						style: {
-							fontSize: "var(--font-size-body-sm)",
-							fontWeight: "var(--font-weight-medium)",
-							color: "var(--color-status-error-text)"
-						},
-						children: N("bigconsole.dashboards.error.title", "Error loading dashboards")
-					}),
-					/* @__PURE__ */ O("p", {
-						style: {
-							fontSize: "var(--font-size-body-sm)",
-							color: "var(--color-text-secondary)",
-							marginTop: "var(--space-controlGap)"
-						},
-						children: W.message
-					}),
-					/* @__PURE__ */ O(w, {
-						size: "sm",
-						onClick: () => Y(),
-						style: { marginTop: "var(--space-formGap)" },
-						children: N("bigconsole.dashboards.error.retry", "Retry")
-					})
-				]
-			})
-		})
-	}) : be ? /* @__PURE__ */ O("div", {
+	}, Ve = (e) => e.widgetCount ?? 0, He = (e) => e.pageCount || 0, Ue = /* @__PURE__ */ j(ge, {
+		title: E("bigconsole.dashboards.title", "Dashboards"),
+		subtitle: E("bigconsole.dashboards.subtitle", "Create and manage your analytics dashboards"),
+		createLabel: E("bigconsole.dashboards.actions.create", "Create Dashboard"),
+		importLabel: E("bigconsole.dashboards.actions.import", "Import"),
+		onCreate: Ae,
+		onImport: Le,
+		canCreate: Ce,
+		canImport: we
+	});
+	if (xe) return /* @__PURE__ */ j("div", {
 		style: {
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
 			padding: "80px 0"
 		},
-		children: /* @__PURE__ */ O(D, { style: {
+		children: /* @__PURE__ */ j(A, { style: {
 			height: "var(--size-icon-xl)",
 			width: "var(--size-icon-xl)"
 		} })
-	}) : xe ? /* @__PURE__ */ k("div", {
+	});
+	if (!Se) return /* @__PURE__ */ j(te, {
+		title: "Access Denied",
+		description: "You don't have permission to view dashboards."
+	});
+	if (be) return /* @__PURE__ */ M("div", {
+		style: {
+			minHeight: "100vh",
+			backgroundColor: "var(--color-bg-canvas)"
+		},
+		children: [Ue, /* @__PURE__ */ j("div", {
+			style: { padding: "var(--space-pagePadding)" },
+			children: /* @__PURE__ */ j(e, {
+				headingLevel: 2,
+				tone: "danger",
+				title: E("bigconsole.dashboards.error.title", "Error loading dashboards"),
+				description: be.message,
+				"data-testid": "dashboards-error",
+				actions: /* @__PURE__ */ j(T, {
+					size: "sm",
+					onClick: () => Y(),
+					children: E("bigconsole.dashboards.error.retry", "Retry")
+				})
+			})
+		})]
+	});
+	let We = Z.length;
+	return /* @__PURE__ */ M("div", {
 		style: {
 			minHeight: "100vh",
 			backgroundColor: "var(--color-bg-canvas)"
 		},
 		children: [
-			/* @__PURE__ */ k("div", {
-				className: "relative overflow-hidden border-b border-border-seam bg-gloss-card",
-				children: [/* @__PURE__ */ O(le, { intensity: "subtle" }), /* @__PURE__ */ O("div", {
-					style: { padding: "var(--space-pagePadding)" },
-					children: /* @__PURE__ */ k("div", {
+			Ue,
+			/* @__PURE__ */ j("div", {
+				style: { padding: "var(--space-pagePadding)" },
+				children: /* @__PURE__ */ M(t, { children: [/* @__PURE__ */ j(e, {
+					emphasis: "muted",
+					padding: "compact",
+					"aria-label": E("bigconsole.dashboards.about", "About dashboards"),
+					children: /* @__PURE__ */ j(me, {
+						className: "max-w-[80ch]",
+						children: "Dashboards are live, shareable views built from widgets that query your data sinks — charts, tables, metrics, and drill-downs in one place. Compose a board to monitor a system, share KPIs with your team, or explore data interactively."
+					})
+				}), /* @__PURE__ */ M(e, {
+					headingLevel: 2,
+					emphasis: "primary",
+					"data-testid": "dashboards-results",
+					title: E("bigconsole.dashboards.results.title", "Your dashboards"),
+					description: E("bigconsole.dashboards.results.description", "Open a board to view it, or use the card actions to edit, duplicate or delete."),
+					meta: /* @__PURE__ */ j(w, {
+						variant: "secondary",
+						"aria-label": E("bigconsole.dashboards.results.count", `${We} dashboards`),
+						children: We
+					}),
+					actions: /* @__PURE__ */ M("div", {
+						role: "group",
+						"aria-label": E("bigconsole.dashboards.view.label", "Result layout"),
 						style: {
 							display: "flex",
 							alignItems: "center",
-							justifyContent: "space-between",
-							flexWrap: "wrap",
-							gap: "var(--space-formGap)"
+							gap: "var(--space-iconGap)",
+							padding: "var(--space-iconGap)",
+							borderRadius: "var(--radius-button)",
+							backgroundColor: "var(--color-bg-sunken)"
 						},
-						children: [/* @__PURE__ */ k("div", {
+						children: [/* @__PURE__ */ j(T, {
+							variant: H === "grid" ? "default" : "ghost",
+							size: "sm",
+							onClick: () => U("grid"),
+							"aria-label": E("bigconsole.dashboards.view.grid", "Grid view"),
+							"aria-pressed": H === "grid",
+							title: E("bigconsole.dashboards.view.grid", "Grid view"),
 							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: "var(--space-formGap)",
-								minWidth: 0
+								height: "var(--size-controlHeight-md)",
+								width: "var(--size-controlHeight-md)",
+								padding: 0,
+								borderRadius: "var(--radius-button)"
 							},
-							children: [/* @__PURE__ */ O("div", {
-								style: {
-									display: "flex",
-									height: "var(--size-controlHeight-lg)",
-									width: "var(--size-controlHeight-lg)",
-									alignItems: "center",
-									justifyContent: "center",
-									borderRadius: "var(--radius-card)",
-									backgroundColor: "var(--color-action-primary-bg)"
-								},
-								children: /* @__PURE__ */ O(v, { style: {
-									height: "var(--size-icon-lg)",
-									width: "var(--size-icon-lg)",
-									color: "var(--color-action-primary-text)"
-								} })
-							}), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("h1", {
-								style: {
-									fontSize: "var(--font-size-heading-h4)",
-									fontWeight: "var(--font-weight-bold)",
-									margin: 0,
-									color: "var(--color-text-primary)"
-								},
-								children: /* @__PURE__ */ O(fe, { children: N("bigconsole.dashboards.title", "Dashboards") })
-							}), /* @__PURE__ */ O("p", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-text-secondary)",
-									margin: 0
-								},
-								children: N("bigconsole.dashboards.subtitle", "Create and manage your analytics dashboards")
-							})] })]
-						}), /* @__PURE__ */ O(ue, {
-							primary: {
-								label: N("bigconsole.dashboards.actions.create", "Create Dashboard"),
-								onSelect: Oe,
-								disabled: !Se,
-								icon: /* @__PURE__ */ O(b, { style: {
-									marginRight: "var(--space-iconGap)",
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} })
+							children: /* @__PURE__ */ j(ae, { style: {
+								height: "var(--size-icon-sm)",
+								width: "var(--size-icon-sm)"
+							} })
+						}), /* @__PURE__ */ j(T, {
+							variant: H === "list" ? "default" : "ghost",
+							size: "sm",
+							onClick: () => U("list"),
+							"aria-label": E("bigconsole.dashboards.view.list", "List view"),
+							"aria-pressed": H === "list",
+							title: E("bigconsole.dashboards.view.list", "List view"),
+							style: {
+								height: "var(--size-controlHeight-md)",
+								width: "var(--size-controlHeight-md)",
+								padding: 0,
+								borderRadius: "var(--radius-button)"
 							},
-							actions: [{
-								label: N("bigconsole.dashboards.actions.import", "Import"),
-								onSelect: Ie,
-								disabled: !Ce,
-								icon: /* @__PURE__ */ O(S, { style: {
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} })
-							}]
+							children: /* @__PURE__ */ j(oe, { style: {
+								height: "var(--size-icon-sm)",
+								width: "var(--size-icon-sm)"
+							} })
 						})]
-					})
-				})]
-			}),
-			/* @__PURE__ */ k("div", {
-				style: { padding: "var(--space-pagePadding)" },
-				children: [
-					/* @__PURE__ */ O(he, {
-						className: "mb-[var(--space-sectionGap)]",
-						children: "Dashboards are live, shareable views built from widgets that query your data sinks — charts, tables, metrics, and drill-downs in one place. Compose a board to monitor a system, share KPIs with your team, or explore data interactively."
 					}),
-					/* @__PURE__ */ k("div", {
-						style: {
-							marginBottom: "var(--space-sectionGap)",
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "space-between",
-							flexWrap: "wrap",
-							gap: "var(--space-formGap)"
-						},
-						children: [/* @__PURE__ */ k("div", {
+					bodyClassName: "flex flex-col gap-form-gap",
+					children: [
+						/* @__PURE__ */ M("div", {
 							style: {
 								position: "relative",
-								flex: 1,
-								minWidth: 0,
-								maxWidth: "400px"
+								width: "100%",
+								maxWidth: "420px"
 							},
-							children: [/* @__PURE__ */ O(se, { style: {
-								position: "absolute",
-								left: "var(--space-controlGap)",
-								top: "50%",
-								transform: "translateY(-50%)",
-								height: "var(--size-icon-sm)",
-								width: "var(--size-icon-sm)",
-								color: "var(--color-text-muted)"
-							} }), /* @__PURE__ */ O(me, {
-								type: "text",
-								placeholder: N("bigconsole.dashboards.search.placeholder", "Search dashboards..."),
-								value: P,
-								onChange: (e) => ge(e.target.value),
+							children: [/* @__PURE__ */ j(se, {
+								"aria-hidden": "true",
+								style: {
+									position: "absolute",
+									left: "var(--space-controlGap)",
+									top: "50%",
+									transform: "translateY(-50%)",
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)",
+									color: "var(--color-text-muted)"
+								}
+							}), /* @__PURE__ */ j(pe, {
+								type: "search",
+								"aria-label": E("bigconsole.dashboards.search.placeholder", "Search dashboards..."),
+								placeholder: E("bigconsole.dashboards.search.placeholder", "Search dashboards..."),
+								value: k,
+								onChange: (e) => F(e.target.value),
 								style: {
 									paddingLeft: "var(--size-controlHeight-md)",
 									height: "var(--size-controlHeight-md)"
 								}
 							})]
-						}), /* @__PURE__ */ k("div", {
+						}),
+						W && G.length === 0 && /* @__PURE__ */ j("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
-								gap: "var(--space-iconGap)",
-								padding: "var(--space-iconGap)",
-								borderRadius: "var(--radius-button)",
-								backgroundColor: "var(--color-bg-sunken)"
+								justifyContent: "center",
+								padding: "80px 0"
 							},
-							children: [/* @__PURE__ */ O(w, {
-								variant: V === "grid" ? "default" : "ghost",
-								size: "sm",
-								onClick: () => H("grid"),
-								"aria-label": N("bigconsole.dashboards.view.grid", "Grid view"),
-								"aria-pressed": V === "grid",
-								title: N("bigconsole.dashboards.view.grid", "Grid view"),
-								style: {
-									height: "var(--size-controlHeight-sm)",
-									width: "var(--size-controlHeight-sm)",
-									padding: 0,
-									borderRadius: "var(--radius-button)"
-								},
-								children: /* @__PURE__ */ O(ae, { style: {
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} })
-							}), /* @__PURE__ */ O(w, {
-								variant: V === "list" ? "default" : "ghost",
-								size: "sm",
-								onClick: () => H("list"),
-								"aria-label": N("bigconsole.dashboards.view.list", "List view"),
-								"aria-pressed": V === "list",
-								title: N("bigconsole.dashboards.view.list", "List view"),
-								style: {
-									height: "var(--size-controlHeight-sm)",
-									width: "var(--size-controlHeight-sm)",
-									padding: 0,
-									borderRadius: "var(--radius-button)"
-								},
-								children: /* @__PURE__ */ O(oe, { style: {
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} })
-							})]
-						})]
-					}),
-					U && G.length === 0 && /* @__PURE__ */ O("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							padding: "80px 0"
-						},
-						children: /* @__PURE__ */ k("div", {
-							style: { textAlign: "center" },
-							children: [/* @__PURE__ */ O(D, { style: {
-								height: "var(--size-icon-xl)",
-								width: "var(--size-icon-xl)",
-								margin: "0 auto var(--space-formGap)"
-							} }), /* @__PURE__ */ O("p", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-text-muted)"
-								},
-								children: N("bigconsole.dashboards.loading", "Loading dashboards...")
-							})]
-						})
-					}),
-					!U && V === "grid" && Z.length > 0 && /* @__PURE__ */ O("div", {
-						style: {
-							display: "grid",
-							gridTemplateColumns: "repeat(auto-fill, minmax(min(320px, 100%), 1fr))",
-							gap: "var(--space-formGap)"
-						},
-						children: we.map((e) => /* @__PURE__ */ O(T, {
-							onClick: () => Me(e.id),
+							children: /* @__PURE__ */ M("div", {
+								style: { textAlign: "center" },
+								children: [/* @__PURE__ */ j(A, { style: {
+									height: "var(--size-icon-xl)",
+									width: "var(--size-icon-xl)",
+									margin: "0 auto var(--space-formGap)"
+								} }), /* @__PURE__ */ j("p", {
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										color: "var(--color-text-muted)"
+									},
+									children: E("bigconsole.dashboards.loading", "Loading dashboards...")
+								})]
+							})
+						}),
+						!W && H === "grid" && Z.length > 0 && /* @__PURE__ */ j("div", {
 							style: {
-								cursor: "pointer",
-								transition: "all 0.2s ease"
+								display: "grid",
+								gridTemplateColumns: "repeat(auto-fill, minmax(min(320px, 100%), 1fr))",
+								gap: "var(--space-formGap)"
 							},
-							className: "hover:shadow-md hover:border-primary/50",
-							children: /* @__PURE__ */ k(E, {
-								style: { padding: "var(--space-cardPadding)" },
-								children: [
-									/* @__PURE__ */ k("div", {
-										style: {
-											display: "flex",
-											alignItems: "center",
-											gap: "var(--space-controlGap)",
-											marginBottom: "var(--space-formGap)"
-										},
-										children: [/* @__PURE__ */ O("div", {
+							children: Ee.map((e) => /* @__PURE__ */ j(D, {
+								onClick: () => Pe(e.id),
+								style: { cursor: "pointer" },
+								className: "motion-safe:transition-[box-shadow,border-color] hover:border-[var(--color-border-hover)] hover:shadow-[var(--shadow-elevation-2)]",
+								children: /* @__PURE__ */ M(O, {
+									style: { padding: "var(--space-cardPadding)" },
+									children: [
+										/* @__PURE__ */ M("div", {
 											style: {
 												display: "flex",
-												height: "var(--size-controlHeight-lg)",
-												width: "var(--size-controlHeight-lg)",
-												flexShrink: 0,
 												alignItems: "center",
-												justifyContent: "center",
-												borderRadius: "var(--radius-button)",
-												backgroundColor: "var(--color-action-primary-bg)"
-											},
-											children: /* @__PURE__ */ O(v, { style: {
-												height: "var(--size-icon-md)",
-												width: "var(--size-icon-md)",
-												color: "var(--color-action-primary-text)"
-											} })
-										}), /* @__PURE__ */ k("div", {
-											style: {
-												flex: 1,
-												minWidth: 0
+												gap: "var(--space-controlGap)",
+												marginBottom: "var(--space-formGap)"
 											},
-											children: [/* @__PURE__ */ O("h3", {
-												style: {
-													fontWeight: "var(--font-weight-bold)",
-													fontSize: "var(--font-size-body-md)",
-													margin: 0,
-													color: "var(--color-text-primary)",
-													overflow: "hidden",
-													textOverflow: "ellipsis",
-													whiteSpace: "nowrap"
-												},
-												children: e.name
-											}), e.category && /* @__PURE__ */ O(C, {
-												variant: "secondary",
-												style: {
-													marginTop: "var(--space-controlGap)",
-													fontSize: "10px",
-													fontWeight: "var(--font-weight-semibold)",
-													textTransform: "uppercase"
-												},
-												children: e.category
-											})]
-										})]
-									}),
-									/* @__PURE__ */ O("p", {
-										style: {
-											fontSize: "var(--font-size-body-sm)",
-											lineHeight: "var(--font-lineHeight-normal)",
-											color: "var(--color-text-secondary)",
-											margin: "0 0 var(--space-formGap) 0",
-											minHeight: "40px",
-											display: "-webkit-box",
-											WebkitLineClamp: 2,
-											WebkitBoxOrient: "vertical",
-											overflow: "hidden"
-										},
-										children: e.description || N("bigconsole.dashboards.card.noDescription", "No description provided")
-									}),
-									/* @__PURE__ */ k("div", {
-										style: {
-											display: "flex",
-											alignItems: "center",
-											gap: "var(--space-formGap)",
-											marginBottom: "var(--space-formGap)",
-											padding: "var(--space-controlGap) var(--space-cardPadding)",
-											backgroundColor: "var(--color-bg-sunken)",
-											borderRadius: "var(--radius-button)"
-										},
-										children: [
-											/* @__PURE__ */ k("div", {
-												style: {
-													display: "flex",
-													alignItems: "center",
-													gap: "var(--space-iconGap)"
-												},
-												children: [
-													/* @__PURE__ */ O(_, { style: {
-														height: "var(--size-icon-sm)",
-														width: "var(--size-icon-sm)",
-														color: "var(--color-action-primary-bg)"
-													} }),
-													/* @__PURE__ */ O("span", {
-														style: {
-															fontSize: "var(--font-size-body-sm)",
-															fontWeight: "var(--font-weight-semibold)",
-															color: "var(--color-text-primary)"
-														},
-														children: Ve(e)
-													}),
-													/* @__PURE__ */ O("span", {
-														style: {
-															fontSize: "var(--font-size-body-sm)",
-															color: "var(--color-text-muted)"
-														},
-														children: N("bigconsole.dashboards.card.pages", "pages")
-													})
-												]
-											}),
-											/* @__PURE__ */ O("div", { style: {
-												width: "1px",
-												height: "var(--size-icon-sm)",
-												backgroundColor: "var(--color-border)"
-											} }),
-											/* @__PURE__ */ k("div", {
+											children: [/* @__PURE__ */ j("div", {
 												style: {
 													display: "flex",
+													height: "var(--size-controlHeight-lg)",
+													width: "var(--size-controlHeight-lg)",
+													flexShrink: 0,
 													alignItems: "center",
-													gap: "var(--space-iconGap)"
+													justifyContent: "center",
+													borderRadius: "var(--radius-button)",
+													backgroundColor: "var(--color-bg-accentSubtle)"
 												},
-												children: [
-													/* @__PURE__ */ O(g, { style: {
-														height: "var(--size-icon-sm)",
-														width: "var(--size-icon-sm)",
+												children: /* @__PURE__ */ j(b, {
+													"aria-hidden": "true",
+													style: {
+														height: "var(--size-icon-md)",
+														width: "var(--size-icon-md)",
 														color: "var(--color-action-primary-bg)"
-													} }),
-													/* @__PURE__ */ O("span", {
-														style: {
-															fontSize: "var(--font-size-body-sm)",
-															fontWeight: "var(--font-weight-semibold)",
-															color: "var(--color-text-primary)"
-														},
-														children: Be(e)
-													}),
-													/* @__PURE__ */ O("span", {
-														style: {
-															fontSize: "var(--font-size-body-sm)",
-															color: "var(--color-text-muted)"
-														},
-														children: N("bigconsole.dashboards.card.widgets", "widgets")
-													})
-												]
-											})
-										]
-									}),
-									/* @__PURE__ */ k("div", {
-										style: {
-											display: "flex",
-											alignItems: "center",
-											justifyContent: "space-between",
-											paddingTop: "var(--space-controlGap)",
-											borderTop: "1px solid var(--color-border)"
-										},
-										children: [/* @__PURE__ */ k("div", {
-											style: {
-												display: "flex",
-												alignItems: "center",
-												gap: "var(--space-iconGap)"
-											},
-											children: [/* @__PURE__ */ O(m, { style: {
-												height: "var(--size-icon-sm)",
-												width: "var(--size-icon-sm)",
-												color: "var(--color-text-muted)"
-											} }), /* @__PURE__ */ O("span", {
-												style: {
-													fontSize: "var(--font-size-body-sm)",
-													fontWeight: "var(--font-weight-medium)",
-													color: "var(--color-text-muted)"
-												},
-												children: ze(e.updatedAt)
-											})]
-										}), /* @__PURE__ */ k("div", {
-											style: {
-												display: "flex",
-												alignItems: "center",
-												gap: "var(--space-controlGap)"
-											},
-											children: [
-												/* @__PURE__ */ O(p, {
-													permission: r.DASHBOARD_UPDATE,
-													deniedBehavior: "hide",
-													children: /* @__PURE__ */ O(w, {
-														variant: "ghost",
-														size: "sm",
-														onClick: (t) => Ne(e.id, t),
-														style: {
-															height: "var(--size-controlHeight-sm)",
-															width: "var(--size-controlHeight-sm)",
-															padding: 0,
-															borderRadius: "var(--radius-button)"
-														},
-														title: N("bigconsole.dashboards.actions.editTitle", "Edit Dashboard"),
-														children: /* @__PURE__ */ O(y, { style: {
-															height: "var(--size-icon-sm)",
-															width: "var(--size-icon-sm)"
-														} })
-													})
-												}),
-												/* @__PURE__ */ O(p, {
-													permission: r.DASHBOARD_CREATE,
-													deniedBehavior: "hide",
-													children: /* @__PURE__ */ O(w, {
-														variant: "ghost",
-														size: "sm",
-														onClick: (t) => Fe(e.id, e.name, t),
-														style: {
-															height: "var(--size-controlHeight-sm)",
-															width: "var(--size-controlHeight-sm)",
-															padding: 0,
-															borderRadius: "var(--radius-button)"
-														},
-														title: N("bigconsole.dashboards.actions.cloneTitle", "Clone Dashboard"),
-														children: /* @__PURE__ */ O(h, { style: {
-															height: "var(--size-icon-sm)",
-															width: "var(--size-icon-sm)"
-														} })
-													})
-												}),
-												/* @__PURE__ */ O(p, {
-													permission: r.DASHBOARD_DELETE,
-													deniedBehavior: "hide",
-													children: /* @__PURE__ */ O(w, {
-														variant: "ghost",
-														size: "sm",
-														onClick: (t) => Pe(e.id, t),
-														style: {
-															height: "var(--size-controlHeight-sm)",
-															width: "var(--size-controlHeight-sm)",
-															padding: 0,
-															borderRadius: "var(--radius-button)"
-														},
-														className: "hover:text-status-error-text hover:bg-status-error-bg/10",
-														title: N("bigconsole.dashboards.actions.deleteTitle", "Delete Dashboard"),
-														children: /* @__PURE__ */ O(x, { style: {
-															height: "var(--size-icon-sm)",
-															width: "var(--size-icon-sm)"
-														} })
-													})
+													}
 												})
-											]
-										})]
-									})
-								]
-							})
-						}, e.id))
-					}),
-					!U && V === "list" && Z.length > 0 && /* @__PURE__ */ O("div", {
-						style: {
-							display: "flex",
-							flexDirection: "column",
-							gap: "var(--space-controlGap)"
-						},
-						children: we.map((e) => /* @__PURE__ */ O(T, {
-							onClick: () => Me(e.id),
-							style: {
-								cursor: "pointer",
-								transition: "all 0.2s ease"
-							},
-							className: "hover:shadow-md hover:border-primary/50",
-							children: /* @__PURE__ */ O(E, {
-								style: { padding: "var(--space-cardPadding)" },
-								children: /* @__PURE__ */ k("div", {
-									style: {
-										display: "flex",
-										alignItems: "center",
-										gap: "var(--space-formGap)",
-										flexWrap: "wrap"
-									},
-									children: [
-										/* @__PURE__ */ O("div", {
-											style: {
-												display: "flex",
-												height: "var(--size-controlHeight-lg)",
-												width: "var(--size-controlHeight-lg)",
-												flexShrink: 0,
-												alignItems: "center",
-												justifyContent: "center",
-												borderRadius: "var(--radius-button)",
-												backgroundColor: "var(--color-action-primary-bg)"
-											},
-											children: /* @__PURE__ */ O(v, { style: {
-												height: "var(--size-icon-md)",
-												width: "var(--size-icon-md)",
-												color: "var(--color-action-primary-text)"
-											} })
-										}),
-										/* @__PURE__ */ k("div", {
-											style: {
-												flex: 1,
-												minWidth: "180px"
-											},
-											children: [/* @__PURE__ */ k("div", {
+											}), /* @__PURE__ */ M("div", {
 												style: {
-													display: "flex",
-													alignItems: "center",
-													gap: "var(--space-controlGap)",
-													flexWrap: "wrap"
+													flex: 1,
+													minWidth: 0
 												},
-												children: [/* @__PURE__ */ O("h3", {
+												children: [/* @__PURE__ */ j("h3", {
 													style: {
 														fontWeight: "var(--font-weight-bold)",
 														fontSize: "var(--font-size-body-md)",
@@ -671,321 +441,593 @@ var A = "bf-bigconsole-dashboards-view", j = 12, M = l(function() {
 														color: "var(--color-text-primary)",
 														overflow: "hidden",
 														textOverflow: "ellipsis",
-														whiteSpace: "nowrap",
-														maxWidth: "100%"
+														whiteSpace: "nowrap"
 													},
 													children: e.name
-												}), e.category && /* @__PURE__ */ O(C, {
+												}), e.category && /* @__PURE__ */ j(w, {
 													variant: "secondary",
 													style: {
+														marginTop: "var(--space-controlGap)",
 														fontSize: "10px",
 														fontWeight: "var(--font-weight-semibold)",
 														textTransform: "uppercase"
 													},
 													children: e.category
 												})]
-											}), /* @__PURE__ */ O("p", {
-												style: {
-													fontSize: "var(--font-size-body-sm)",
-													lineHeight: "var(--font-lineHeight-normal)",
-													color: "var(--color-text-secondary)",
-													margin: "var(--space-controlGap) 0 0 0",
-													overflow: "hidden",
-													textOverflow: "ellipsis",
-													whiteSpace: "nowrap"
-												},
-												children: e.description || N("bigconsole.dashboards.card.noDescription", "No description provided")
 											})]
 										}),
-										/* @__PURE__ */ k("div", {
+										/* @__PURE__ */ j("p", {
+											style: {
+												fontSize: "var(--font-size-body-sm)",
+												lineHeight: "var(--font-lineHeight-normal)",
+												color: "var(--color-text-secondary)",
+												margin: "0 0 var(--space-formGap) 0",
+												minHeight: "40px",
+												display: "-webkit-box",
+												WebkitLineClamp: 2,
+												WebkitBoxOrient: "vertical",
+												overflow: "hidden"
+											},
+											children: e.description || E("bigconsole.dashboards.card.noDescription", "No description provided")
+										}),
+										/* @__PURE__ */ M("div", {
 											style: {
 												display: "flex",
 												alignItems: "center",
 												gap: "var(--space-formGap)",
-												flexWrap: "wrap"
+												marginBottom: "var(--space-formGap)",
+												padding: "var(--space-controlGap) var(--space-cardPadding)",
+												backgroundColor: "var(--color-bg-sunken)",
+												borderRadius: "var(--radius-button)"
 											},
 											children: [
-												/* @__PURE__ */ k("div", {
+												/* @__PURE__ */ M("div", {
 													style: {
 														display: "flex",
 														alignItems: "center",
 														gap: "var(--space-iconGap)"
 													},
 													children: [
-														/* @__PURE__ */ O(_, { style: {
+														/* @__PURE__ */ j(y, { style: {
 															height: "var(--size-icon-sm)",
 															width: "var(--size-icon-sm)",
 															color: "var(--color-action-primary-bg)"
 														} }),
-														/* @__PURE__ */ O("span", {
+														/* @__PURE__ */ j("span", {
 															style: {
 																fontSize: "var(--font-size-body-sm)",
 																fontWeight: "var(--font-weight-semibold)",
 																color: "var(--color-text-primary)"
 															},
-															children: Ve(e)
+															children: He(e)
 														}),
-														/* @__PURE__ */ O("span", {
+														/* @__PURE__ */ j("span", {
 															style: {
 																fontSize: "var(--font-size-body-sm)",
 																color: "var(--color-text-muted)"
 															},
-															children: N("bigconsole.dashboards.card.pages", "pages")
+															children: E("bigconsole.dashboards.card.pages", "pages")
 														})
 													]
 												}),
-												/* @__PURE__ */ k("div", {
+												/* @__PURE__ */ j("div", { style: {
+													width: "1px",
+													height: "var(--size-icon-sm)",
+													backgroundColor: "var(--color-border-subtle)"
+												} }),
+												/* @__PURE__ */ M("div", {
 													style: {
 														display: "flex",
 														alignItems: "center",
 														gap: "var(--space-iconGap)"
 													},
 													children: [
-														/* @__PURE__ */ O(g, { style: {
+														/* @__PURE__ */ j(v, { style: {
 															height: "var(--size-icon-sm)",
 															width: "var(--size-icon-sm)",
 															color: "var(--color-action-primary-bg)"
 														} }),
-														/* @__PURE__ */ O("span", {
+														/* @__PURE__ */ j("span", {
 															style: {
 																fontSize: "var(--font-size-body-sm)",
 																fontWeight: "var(--font-weight-semibold)",
 																color: "var(--color-text-primary)"
 															},
-															children: Be(e)
+															children: Ve(e)
 														}),
-														/* @__PURE__ */ O("span", {
+														/* @__PURE__ */ j("span", {
 															style: {
 																fontSize: "var(--font-size-body-sm)",
 																color: "var(--color-text-muted)"
 															},
-															children: N("bigconsole.dashboards.card.widgets", "widgets")
+															children: E("bigconsole.dashboards.card.widgets", "widgets")
 														})
 													]
-												}),
-												/* @__PURE__ */ k("div", {
-													style: {
-														display: "flex",
-														alignItems: "center",
-														gap: "var(--space-iconGap)"
-													},
-													children: [/* @__PURE__ */ O(m, { style: {
-														height: "var(--size-icon-sm)",
-														width: "var(--size-icon-sm)",
-														color: "var(--color-text-muted)"
-													} }), /* @__PURE__ */ O("span", {
-														style: {
-															fontSize: "var(--font-size-body-sm)",
-															fontWeight: "var(--font-weight-medium)",
-															color: "var(--color-text-muted)"
-														},
-														children: ze(e.updatedAt)
-													})]
 												})
 											]
 										}),
-										/* @__PURE__ */ k("div", {
+										/* @__PURE__ */ M("div", {
 											style: {
 												display: "flex",
 												alignItems: "center",
-												gap: "var(--space-controlGap)"
+												justifyContent: "space-between",
+												flexWrap: "wrap",
+												gap: "var(--space-controlGap)",
+												paddingTop: "var(--space-controlGap)",
+												borderTop: "1px solid var(--color-border-subtle)"
 											},
-											children: [
-												/* @__PURE__ */ O(p, {
-													permission: r.DASHBOARD_UPDATE,
-													deniedBehavior: "hide",
-													children: /* @__PURE__ */ O(w, {
-														variant: "ghost",
-														size: "sm",
-														onClick: (t) => Ne(e.id, t),
+											children: [/* @__PURE__ */ M("div", {
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: "var(--space-iconGap)"
+												},
+												children: [/* @__PURE__ */ j(g, { style: {
+													height: "var(--size-icon-sm)",
+													width: "var(--size-icon-sm)",
+													color: "var(--color-text-muted)"
+												} }), /* @__PURE__ */ j("span", {
+													style: {
+														fontSize: "var(--font-size-body-sm)",
+														fontWeight: "var(--font-weight-medium)",
+														color: "var(--color-text-muted)"
+													},
+													children: Be(e.updatedAt)
+												})]
+											}), /* @__PURE__ */ M("div", {
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: "var(--space-controlGap)"
+												},
+												children: [
+													/* @__PURE__ */ j(h, {
+														permission: a.DASHBOARD_UPDATE,
+														deniedBehavior: "hide",
+														children: /* @__PURE__ */ j(T, {
+															variant: "ghost",
+															size: "sm",
+															onClick: (t) => $(e.id, t),
+															style: {
+																height: "var(--size-controlHeight-md)",
+																width: "var(--size-controlHeight-md)",
+																padding: 0,
+																borderRadius: "var(--radius-button)"
+															},
+															title: E("bigconsole.dashboards.actions.editTitle", "Edit Dashboard"),
+															children: /* @__PURE__ */ j(x, { style: {
+																height: "var(--size-icon-sm)",
+																width: "var(--size-icon-sm)"
+															} })
+														})
+													}),
+													/* @__PURE__ */ j(h, {
+														permission: a.DASHBOARD_CREATE,
+														deniedBehavior: "hide",
+														children: /* @__PURE__ */ j(T, {
+															variant: "ghost",
+															size: "sm",
+															onClick: (t) => Ie(e.id, e.name, t),
+															style: {
+																height: "var(--size-controlHeight-md)",
+																width: "var(--size-controlHeight-md)",
+																padding: 0,
+																borderRadius: "var(--radius-button)"
+															},
+															title: E("bigconsole.dashboards.actions.cloneTitle", "Clone Dashboard"),
+															children: /* @__PURE__ */ j(_, { style: {
+																height: "var(--size-icon-sm)",
+																width: "var(--size-icon-sm)"
+															} })
+														})
+													}),
+													/* @__PURE__ */ j(h, {
+														permission: a.DASHBOARD_DELETE,
+														deniedBehavior: "hide",
+														children: /* @__PURE__ */ j(T, {
+															variant: "ghost",
+															size: "sm",
+															onClick: (t) => Fe(e.id, t),
+															style: {
+																height: "var(--size-controlHeight-md)",
+																width: "var(--size-controlHeight-md)",
+																padding: 0,
+																borderRadius: "var(--radius-button)"
+															},
+															className: "hover:text-status-error-text hover:bg-status-error-bg/10",
+															title: E("bigconsole.dashboards.actions.deleteTitle", "Delete Dashboard"),
+															children: /* @__PURE__ */ j(ce, { style: {
+																height: "var(--size-icon-sm)",
+																width: "var(--size-icon-sm)"
+															} })
+														})
+													})
+												]
+											})]
+										})
+									]
+								})
+							}, e.id))
+						}),
+						!W && H === "list" && Z.length > 0 && /* @__PURE__ */ j("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: "var(--space-controlGap)"
+							},
+							children: Ee.map((e) => /* @__PURE__ */ j(D, {
+								onClick: () => Pe(e.id),
+								style: { cursor: "pointer" },
+								className: "motion-safe:transition-[box-shadow,border-color] hover:border-[var(--color-border-hover)] hover:shadow-[var(--shadow-elevation-2)]",
+								children: /* @__PURE__ */ j(O, {
+									style: { padding: "var(--space-cardPadding)" },
+									children: /* @__PURE__ */ M("div", {
+										style: {
+											display: "flex",
+											alignItems: "center",
+											gap: "var(--space-formGap)",
+											flexWrap: "wrap"
+										},
+										children: [
+											/* @__PURE__ */ j("div", {
+												style: {
+													display: "flex",
+													height: "var(--size-controlHeight-lg)",
+													width: "var(--size-controlHeight-lg)",
+													flexShrink: 0,
+													alignItems: "center",
+													justifyContent: "center",
+													borderRadius: "var(--radius-button)",
+													backgroundColor: "var(--color-bg-accentSubtle)"
+												},
+												children: /* @__PURE__ */ j(b, {
+													"aria-hidden": "true",
+													style: {
+														height: "var(--size-icon-md)",
+														width: "var(--size-icon-md)",
+														color: "var(--color-action-primary-bg)"
+													}
+												})
+											}),
+											/* @__PURE__ */ M("div", {
+												style: {
+													flex: "1 1 12rem",
+													minWidth: 0
+												},
+												children: [/* @__PURE__ */ M("div", {
+													style: {
+														display: "flex",
+														alignItems: "center",
+														gap: "var(--space-controlGap)",
+														flexWrap: "wrap"
+													},
+													children: [/* @__PURE__ */ j("h3", {
 														style: {
-															height: "var(--size-controlHeight-sm)",
-															width: "var(--size-controlHeight-sm)",
-															padding: 0,
-															borderRadius: "var(--radius-button)"
+															fontWeight: "var(--font-weight-bold)",
+															fontSize: "var(--font-size-body-md)",
+															margin: 0,
+															color: "var(--color-text-primary)",
+															overflow: "hidden",
+															textOverflow: "ellipsis",
+															whiteSpace: "nowrap",
+															maxWidth: "100%"
 														},
-														title: N("bigconsole.dashboards.actions.editTitle", "Edit Dashboard"),
-														children: /* @__PURE__ */ O(y, { style: {
-															height: "var(--size-icon-sm)",
-															width: "var(--size-icon-sm)"
-														} })
-													})
-												}),
-												/* @__PURE__ */ O(p, {
-													permission: r.DASHBOARD_CREATE,
-													deniedBehavior: "hide",
-													children: /* @__PURE__ */ O(w, {
-														variant: "ghost",
-														size: "sm",
-														onClick: (t) => Fe(e.id, e.name, t),
+														children: e.name
+													}), e.category && /* @__PURE__ */ j(w, {
+														variant: "secondary",
 														style: {
-															height: "var(--size-controlHeight-sm)",
-															width: "var(--size-controlHeight-sm)",
-															padding: 0,
-															borderRadius: "var(--radius-button)"
+															fontSize: "10px",
+															fontWeight: "var(--font-weight-semibold)",
+															textTransform: "uppercase"
 														},
-														title: N("bigconsole.dashboards.actions.cloneTitle", "Clone Dashboard"),
-														children: /* @__PURE__ */ O(h, { style: {
-															height: "var(--size-icon-sm)",
-															width: "var(--size-icon-sm)"
-														} })
-													})
-												}),
-												/* @__PURE__ */ O(p, {
-													permission: r.DASHBOARD_DELETE,
-													deniedBehavior: "hide",
-													children: /* @__PURE__ */ O(w, {
-														variant: "ghost",
-														size: "sm",
-														onClick: (t) => Pe(e.id, t),
+														children: e.category
+													})]
+												}), /* @__PURE__ */ j("p", {
+													style: {
+														fontSize: "var(--font-size-body-sm)",
+														lineHeight: "var(--font-lineHeight-normal)",
+														color: "var(--color-text-secondary)",
+														margin: "var(--space-controlGap) 0 0 0",
+														overflow: "hidden",
+														textOverflow: "ellipsis",
+														whiteSpace: "nowrap"
+													},
+													children: e.description || E("bigconsole.dashboards.card.noDescription", "No description provided")
+												})]
+											}),
+											/* @__PURE__ */ M("div", {
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: "var(--space-formGap)",
+													flexWrap: "wrap"
+												},
+												children: [
+													/* @__PURE__ */ M("div", {
+														style: {
+															display: "flex",
+															alignItems: "center",
+															gap: "var(--space-iconGap)"
+														},
+														children: [
+															/* @__PURE__ */ j(y, { style: {
+																height: "var(--size-icon-sm)",
+																width: "var(--size-icon-sm)",
+																color: "var(--color-action-primary-bg)"
+															} }),
+															/* @__PURE__ */ j("span", {
+																style: {
+																	fontSize: "var(--font-size-body-sm)",
+																	fontWeight: "var(--font-weight-semibold)",
+																	color: "var(--color-text-primary)"
+																},
+																children: He(e)
+															}),
+															/* @__PURE__ */ j("span", {
+																style: {
+																	fontSize: "var(--font-size-body-sm)",
+																	color: "var(--color-text-muted)"
+																},
+																children: E("bigconsole.dashboards.card.pages", "pages")
+															})
+														]
+													}),
+													/* @__PURE__ */ M("div", {
 														style: {
-															height: "var(--size-controlHeight-sm)",
-															width: "var(--size-controlHeight-sm)",
-															padding: 0,
-															borderRadius: "var(--radius-button)"
+															display: "flex",
+															alignItems: "center",
+															gap: "var(--space-iconGap)"
 														},
-														className: "hover:text-status-error-text hover:bg-status-error-bg/10",
-														title: N("bigconsole.dashboards.actions.deleteTitle", "Delete Dashboard"),
-														children: /* @__PURE__ */ O(x, { style: {
+														children: [
+															/* @__PURE__ */ j(v, { style: {
+																height: "var(--size-icon-sm)",
+																width: "var(--size-icon-sm)",
+																color: "var(--color-action-primary-bg)"
+															} }),
+															/* @__PURE__ */ j("span", {
+																style: {
+																	fontSize: "var(--font-size-body-sm)",
+																	fontWeight: "var(--font-weight-semibold)",
+																	color: "var(--color-text-primary)"
+																},
+																children: Ve(e)
+															}),
+															/* @__PURE__ */ j("span", {
+																style: {
+																	fontSize: "var(--font-size-body-sm)",
+																	color: "var(--color-text-muted)"
+																},
+																children: E("bigconsole.dashboards.card.widgets", "widgets")
+															})
+														]
+													}),
+													/* @__PURE__ */ M("div", {
+														style: {
+															display: "flex",
+															alignItems: "center",
+															gap: "var(--space-iconGap)"
+														},
+														children: [/* @__PURE__ */ j(g, { style: {
 															height: "var(--size-icon-sm)",
-															width: "var(--size-icon-sm)"
-														} })
+															width: "var(--size-icon-sm)",
+															color: "var(--color-text-muted)"
+														} }), /* @__PURE__ */ j("span", {
+															style: {
+																fontSize: "var(--font-size-body-sm)",
+																fontWeight: "var(--font-weight-medium)",
+																color: "var(--color-text-muted)"
+															},
+															children: Be(e.updatedAt)
+														})]
 													})
-												})
-											]
-										})
-									]
+												]
+											}),
+											/* @__PURE__ */ M("div", {
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: "var(--space-controlGap)"
+												},
+												children: [
+													/* @__PURE__ */ j(h, {
+														permission: a.DASHBOARD_UPDATE,
+														deniedBehavior: "hide",
+														children: /* @__PURE__ */ j(T, {
+															variant: "ghost",
+															size: "sm",
+															onClick: (t) => $(e.id, t),
+															style: {
+																height: "var(--size-controlHeight-md)",
+																width: "var(--size-controlHeight-md)",
+																padding: 0,
+																borderRadius: "var(--radius-button)"
+															},
+															title: E("bigconsole.dashboards.actions.editTitle", "Edit Dashboard"),
+															children: /* @__PURE__ */ j(x, { style: {
+																height: "var(--size-icon-sm)",
+																width: "var(--size-icon-sm)"
+															} })
+														})
+													}),
+													/* @__PURE__ */ j(h, {
+														permission: a.DASHBOARD_CREATE,
+														deniedBehavior: "hide",
+														children: /* @__PURE__ */ j(T, {
+															variant: "ghost",
+															size: "sm",
+															onClick: (t) => Ie(e.id, e.name, t),
+															style: {
+																height: "var(--size-controlHeight-md)",
+																width: "var(--size-controlHeight-md)",
+																padding: 0,
+																borderRadius: "var(--radius-button)"
+															},
+															title: E("bigconsole.dashboards.actions.cloneTitle", "Clone Dashboard"),
+															children: /* @__PURE__ */ j(_, { style: {
+																height: "var(--size-icon-sm)",
+																width: "var(--size-icon-sm)"
+															} })
+														})
+													}),
+													/* @__PURE__ */ j(h, {
+														permission: a.DASHBOARD_DELETE,
+														deniedBehavior: "hide",
+														children: /* @__PURE__ */ j(T, {
+															variant: "ghost",
+															size: "sm",
+															onClick: (t) => Fe(e.id, t),
+															style: {
+																height: "var(--size-controlHeight-md)",
+																width: "var(--size-controlHeight-md)",
+																padding: 0,
+																borderRadius: "var(--radius-button)"
+															},
+															className: "hover:text-status-error-text hover:bg-status-error-bg/10",
+															title: E("bigconsole.dashboards.actions.deleteTitle", "Delete Dashboard"),
+															children: /* @__PURE__ */ j(ce, { style: {
+																height: "var(--size-icon-sm)",
+																width: "var(--size-icon-sm)"
+															} })
+														})
+													})
+												]
+											})
+										]
+									})
 								})
-							})
-						}, e.id))
-					}),
-					!U && Z.length > j && /* @__PURE__ */ k("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							gap: "var(--space-controlGap)",
-							flexWrap: "wrap",
-							marginTop: "var(--space-sectionGap)"
-						},
-						children: [
-							/* @__PURE__ */ k(w, {
-								variant: "outline",
-								size: "sm",
-								onClick: Te,
-								disabled: F <= 1,
-								"aria-label": N("bigconsole.dashboards.pagination.previous", "Previous"),
-								children: [/* @__PURE__ */ O(re, { style: {
-									marginRight: "var(--space-iconGap)",
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} }), N("bigconsole.dashboards.pagination.previous", "Previous")]
-							}),
-							/* @__PURE__ */ O("div", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "var(--space-iconGap)",
-									flexWrap: "wrap"
-								},
-								children: Array.from({ length: Q }, (e, t) => t + 1).map((e) => /* @__PURE__ */ O(w, {
-									variant: e === F ? "default" : "ghost",
+							}, e.id))
+						}),
+						!W && Z.length > P && /* @__PURE__ */ M("nav", {
+							"aria-label": E("bigconsole.dashboards.pagination.label", "Dashboard pages"),
+							className: "flex flex-wrap items-center justify-center gap-control-gap border-t border-[var(--color-border-subtle)] pt-control-gap",
+							children: [
+								/* @__PURE__ */ M(T, {
+									variant: "outline",
 									size: "sm",
-									onClick: () => De(e),
-									"aria-current": e === F ? "page" : void 0,
+									onClick: De,
+									disabled: I <= 1,
+									"aria-label": E("bigconsole.dashboards.pagination.previous", "Previous"),
+									style: { minHeight: "var(--size-controlHeight-md)" },
+									children: [/* @__PURE__ */ j(re, { style: {
+										marginRight: "var(--space-iconGap)",
+										height: "var(--size-icon-sm)",
+										width: "var(--size-icon-sm)"
+									} }), E("bigconsole.dashboards.pagination.previous", "Previous")]
+								}),
+								/* @__PURE__ */ j("div", {
 									style: {
-										minWidth: "var(--size-controlHeight-sm)",
-										height: "var(--size-controlHeight-sm)",
-										padding: "0 var(--space-controlGap)",
-										borderRadius: "var(--radius-button)"
+										display: "flex",
+										alignItems: "center",
+										gap: "var(--space-iconGap)",
+										flexWrap: "wrap"
 									},
-									children: e
-								}, e))
-							}),
-							/* @__PURE__ */ k(w, {
-								variant: "outline",
-								size: "sm",
-								onClick: Ee,
-								disabled: F >= Q,
-								"aria-label": N("bigconsole.dashboards.pagination.next", "Next"),
-								children: [N("bigconsole.dashboards.pagination.next", "Next"), /* @__PURE__ */ O(ie, { style: {
-									marginLeft: "var(--space-iconGap)",
-									height: "var(--size-icon-sm)",
-									width: "var(--size-icon-sm)"
-								} })]
-							}),
-							/* @__PURE__ */ O("span", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-text-muted)",
-									marginLeft: "var(--space-controlGap)"
-								},
-								children: N("bigconsole.dashboards.pagination.pageOf", `Page ${F} of ${Q}`)
-							})
-						]
-					}),
-					!U && Z.length === 0 && /* @__PURE__ */ O(de, {
-						treatment: "insight",
-						className: "border-border-seam",
-						children: /* @__PURE__ */ O(pe, {
-							illustration: P ? "empty-search" : "empty-data",
-							title: P ? N("bigconsole.dashboards.empty.filteredTitle", "No dashboards found") : N("bigconsole.dashboards.empty.title", "No dashboards yet"),
-							description: P ? N("bigconsole.dashboards.empty.filteredDescription", "Try adjusting your search terms") : N("bigconsole.dashboards.empty.description", "Get started by creating your first dashboard to visualize your data"),
-							action: P ? void 0 : /* @__PURE__ */ k("div", {
-								style: {
-									display: "flex",
-									gap: "var(--space-controlGap)",
-									flexWrap: "wrap",
-									justifyContent: "center"
-								},
-								children: [/* @__PURE__ */ O(p, {
-									permission: r.DASHBOARD_CREATE,
-									deniedBehavior: "hide",
-									children: /* @__PURE__ */ k(w, {
-										onClick: Oe,
-										children: [/* @__PURE__ */ O(b, { style: {
-											marginRight: "var(--space-iconGap)",
-											height: "var(--size-icon-sm)",
-											width: "var(--size-icon-sm)"
-										} }), N("bigconsole.dashboards.actions.create", "Create Dashboard")]
-									})
-								}), /* @__PURE__ */ O(p, {
-									permission: r.DASHBOARD_IMPORT,
-									deniedBehavior: "hide",
-									children: /* @__PURE__ */ k(w, {
-										variant: "outline",
-										onClick: Ie,
-										children: [/* @__PURE__ */ O(S, { style: {
-											marginRight: "var(--space-iconGap)",
-											height: "var(--size-icon-sm)",
-											width: "var(--size-icon-sm)"
-										} }), N("bigconsole.dashboards.actions.importDashboard", "Import Dashboard")]
+									children: he(I, Q).map((e, t) => e === null ? /* @__PURE__ */ j("span", {
+										"aria-hidden": "true",
+										style: {
+											color: "var(--color-text-muted)",
+											padding: "0 var(--space-iconGap)"
+										},
+										children: "…"
+									}, `gap-${t}`) : /* @__PURE__ */ j(T, {
+										variant: e === I ? "default" : "ghost",
+										size: "sm",
+										onClick: () => ke(e),
+										"aria-current": e === I ? "page" : void 0,
+										"aria-label": E("bigconsole.dashboards.pagination.page", `Page ${e}`),
+										style: {
+											minWidth: "var(--size-controlHeight-md)",
+											height: "var(--size-controlHeight-md)",
+											padding: "0 var(--space-controlGap)",
+											borderRadius: "var(--radius-button)"
+										},
+										children: e
+									}, e))
+								}),
+								/* @__PURE__ */ M(T, {
+									variant: "outline",
+									size: "sm",
+									onClick: Oe,
+									disabled: I >= Q,
+									"aria-label": E("bigconsole.dashboards.pagination.next", "Next"),
+									style: { minHeight: "var(--size-controlHeight-md)" },
+									children: [E("bigconsole.dashboards.pagination.next", "Next"), /* @__PURE__ */ j(ie, { style: {
+										marginLeft: "var(--space-iconGap)",
+										height: "var(--size-icon-sm)",
+										width: "var(--size-icon-sm)"
+									} })]
+								}),
+								/* @__PURE__ */ j("span", {
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										color: "var(--color-text-muted)"
+									},
+									children: C("bigconsole.dashboards.pagination.pageOf", "Page {{currentPage}} of {{totalPages}}", {
+										currentPage: I,
+										totalPages: Q
 									})
-								})]
+								})
+							]
+						}),
+						!W && Z.length === 0 && /* @__PURE__ */ j(de, {
+							treatment: "insight",
+							className: "border-[var(--color-border-seam)]",
+							children: /* @__PURE__ */ j(fe, {
+								illustration: k ? "empty-search" : "empty-data",
+								title: k ? E("bigconsole.dashboards.empty.filteredTitle", "No dashboards found") : E("bigconsole.dashboards.empty.title", "No dashboards yet"),
+								description: k ? E("bigconsole.dashboards.empty.filteredDescription", "Try adjusting your search terms") : E("bigconsole.dashboards.empty.description", "Get started by creating your first dashboard to visualize your data"),
+								action: k ? void 0 : /* @__PURE__ */ M("div", {
+									style: {
+										display: "flex",
+										gap: "var(--space-controlGap)",
+										flexWrap: "wrap",
+										justifyContent: "center"
+									},
+									children: [/* @__PURE__ */ j(h, {
+										permission: a.DASHBOARD_CREATE,
+										deniedBehavior: "hide",
+										children: /* @__PURE__ */ M(T, {
+											onClick: Ae,
+											children: [/* @__PURE__ */ j(S, { style: {
+												marginRight: "var(--space-iconGap)",
+												height: "var(--size-icon-sm)",
+												width: "var(--size-icon-sm)"
+											} }), E("bigconsole.dashboards.actions.create", "Create Dashboard")]
+										})
+									}), /* @__PURE__ */ j(h, {
+										permission: a.DASHBOARD_IMPORT,
+										deniedBehavior: "hide",
+										children: /* @__PURE__ */ M(T, {
+											variant: "outline",
+											onClick: Le,
+											children: [/* @__PURE__ */ j(le, { style: {
+												marginRight: "var(--space-iconGap)",
+												height: "var(--size-icon-sm)",
+												width: "var(--size-icon-sm)"
+											} }), E("bigconsole.dashboards.actions.importDashboard", "Import Dashboard")]
+										})
+									})]
+								})
 							})
 						})
-					})
-				]
+					]
+				})] })
 			}),
-			/* @__PURE__ */ O(i, {
+			/* @__PURE__ */ j(o, {
 				isOpen: _e,
-				isCreating: R,
-				onClose: Ae,
-				onCreate: je,
-				onTemplateInstalled: ke
+				isCreating: z,
+				onClose: Me,
+				onCreate: Ne,
+				onTemplateInstalled: je
 			}),
-			/* @__PURE__ */ O(a, {
+			/* @__PURE__ */ j(s, {
 				isOpen: ve,
-				onClose: Le,
-				onSuccess: Re
+				onClose: Re,
+				onSuccess: ze
 			})
 		]
-	}) : /* @__PURE__ */ O(te, {
-		title: "Access Denied",
-		description: "You don't have permission to view dashboards."
 	});
 });
 //#endregion
-export { M as DashboardsPage, M as default };
+export { I as DashboardsPage, I as default };
 
 //# sourceMappingURL=DashboardsPage.js.map