@burdenoff/microfe-bigconsole 2026.610.1 → 2026.612.2

package/dist/bigconsole/pages/DashboardsPage.js

@@ -6,41 +6,52 @@ import n from "../components/dashboard/CreateDashboardDialog.js";
 import r from "../components/dashboard/ImportDashboardDialog.js";
 import { isNative as i, nativeConfirm as a, nativeImpact as o, nativeNotify as s } from "../../utils/nativeBridge.js";
 import { memo as c, useCallback as l, useState as u } from "react";
-import { Calendar as d, FileText as f, FolderOpen as p, Layers as m, LayoutDashboard as h, Pencil as g, Plus as _, Search as v, Trash2 as y, Upload as b } from "lucide-react";
-import { useI18n as x } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
-import { Badge as w, Button as T, Card as E, CardContent as D, Input as O, Spinner as k } from "@burdenoff/fe-libs/ui";
+import { Calendar as d, Copy as f, FileText as p, FolderOpen as ee, Layers as m, LayoutDashboard as h, LayoutGrid as te, List as ne, Pencil as g, Plus as _, Search as v, Trash2 as y, Upload as b } from "lucide-react";
+import { useI18n as re } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { Badge as C, Button as w, Card as T, CardContent as E, Input as ie, Spinner as ae } from "@burdenoff/fe-libs/ui";
 //#region src/bigconsole/pages/DashboardsPage.tsx
-var A = c(function() {
-	let c = e(), { t: A } = x(), j = l((e, t) => {
-		let n = A(e);
+var D = "bf-bigconsole-dashboards-view", O = c(function() {
+	let c = e(), { t: O } = re(), k = l((e, t) => {
+		let n = O(e);
 		return n === e ? t : n;
-	}, [A]), [M, N] = u(""), [P, F] = u(!1), [I, L] = u(!1), [R, z] = u(!1), { loading: B, error: V, dashboards: H, createDashboard: U, deleteDashboard: W, refetch: G } = t(), K = H.filter((e) => e.name.toLowerCase().includes(M.toLowerCase()) || e.description?.toLowerCase().includes(M.toLowerCase())), q = l(() => {
-		F(!0);
-	}, []), J = l(() => {
-		I || F(!1);
-	}, [I]), Y = l(async (e) => {
-		L(!0);
+	}, [O]), [A, oe] = u(""), [se, j] = u(!1), [M, N] = u(!1), [ce, P] = u(!1), [F, le] = u(() => {
 		try {
-			let t = await U({
+			return window.localStorage.getItem(D) === "list" ? "list" : "grid";
+		} catch {
+			return "grid";
+		}
+	}), I = l((e) => {
+		le(e);
+		try {
+			window.localStorage.setItem(D, e);
+		} catch {}
+	}, []), { loading: L, error: R, dashboards: z, createDashboard: B, deleteDashboard: V, cloneDashboard: H, refetch: U } = t(), W = z.filter((e) => e.name.toLowerCase().includes(A.toLowerCase()) || e.description?.toLowerCase().includes(A.toLowerCase())), G = l(() => {
+		j(!0);
+	}, []), ue = l(() => {
+		M || j(!1);
+	}, [M]), de = l(async (e) => {
+		N(!0);
+		try {
+			let t = await B({
 				name: e.name,
 				description: e.description,
 				category: e.category,
 				tags: e.tags
 			});
-			t && (F(!1), c(`/dashboards/${t.id}/builder`));
+			t && (j(!1), c(`/dashboards/${t.id}/builder`));
 		} catch (e) {
 			throw console.error("Failed to create dashboard:", e), i() && s("error"), e;
 		} finally {
-			L(!1);
+			N(!1);
 		}
-	}, [U, c]), X = l((e) => {
+	}, [B, c]), K = l((e) => {
 		c(`/dashboards/${e}`);
-	}, [c]), Z = l((e, t) => {
+	}, [c]), q = l((e, t) => {
 		t.stopPropagation(), c(`/dashboards/${e}/builder`);
-	}, [c]), Q = l(async (e, t) => {
+	}, [c]), J = l(async (e, t) => {
 		t.stopPropagation();
-		let n = j("bigconsole.dashboards.confirmDelete", "Are you sure you want to delete this dashboard?"), r = await a({
+		let n = k("bigconsole.dashboards.confirmDelete", "Are you sure you want to delete this dashboard?"), r = await a({
 			title: "Delete dashboard?",
 			message: n,
 			okButtonTitle: "Delete",
@@ -49,74 +60,90 @@ var A = c(function() {
 		if (r === null ? window.confirm(n) : r) {
 			o("medium");
 			try {
-				await W(e), i() && s("success");
+				await V(e), i() && s("success");
 			} catch (e) {
 				throw i() && s("error"), e;
 			}
 		}
-	}, [W, j]), $ = l(() => {
-		z(!0);
-	}, []), ee = l(() => {
-		z(!1);
-	}, []), te = l((e, t) => {
-		G();
-	}, [G]), ne = (e) => {
+	}, [V, k]), Y = l(async (e, t, n) => {
+		n.stopPropagation();
+		let r = k("bigconsole.dashboards.clone.defaultSuffix", `${t} (Copy)`), a = window.prompt(k("bigconsole.dashboards.clone.namePrompt", "Name for the cloned dashboard:"), r);
+		if (!(!a || !a.trim())) {
+			o("medium");
+			try {
+				let t = await H(e, a.trim());
+				t && (i() && s("success"), c(`/dashboards/${t.id}`));
+			} catch (e) {
+				throw i() && s("error"), e;
+			}
+		}
+	}, [
+		H,
+		c,
+		k
+	]), X = l(() => {
+		P(!0);
+	}, []), fe = l(() => {
+		P(!1);
+	}, []), pe = l((e, t) => {
+		U();
+	}, [U]), Z = (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 ? j("bigconsole.dashboards.time.justNow", "Just now") : i < 60 ? `${i}${j("bigconsole.dashboards.time.minutesAgoSuffix", "m ago")}` : a < 24 ? `${a}${j("bigconsole.dashboards.time.hoursAgoSuffix", "h ago")}` : o < 7 ? `${o}${j("bigconsole.dashboards.time.daysAgoSuffix", "d ago")}` : new Intl.DateTimeFormat("en-US", {
+		return i < 1 ? k("bigconsole.dashboards.time.justNow", "Just now") : i < 60 ? `${i}${k("bigconsole.dashboards.time.minutesAgoSuffix", "m ago")}` : a < 24 ? `${a}${k("bigconsole.dashboards.time.hoursAgoSuffix", "h ago")}` : o < 7 ? `${o}${k("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);
-	}, re = (e) => e.widgetCount ?? 0, ie = (e) => e.pages?.length || 0;
-	return V ? /* @__PURE__ */ S("div", {
+	}, Q = (e) => e.widgetCount ?? 0, $ = (e) => e.pages?.length || 0;
+	return R ? /* @__PURE__ */ x("div", {
 		style: { padding: "var(--space-pagePadding)" },
-		children: /* @__PURE__ */ S(E, {
+		children: /* @__PURE__ */ x(T, {
 			style: {
 				borderColor: "var(--color-status-error-border)",
 				backgroundColor: "var(--color-status-error-bgSubtle)"
 			},
-			children: /* @__PURE__ */ C(D, {
+			children: /* @__PURE__ */ S(E, {
 				style: { padding: "var(--space-pagePadding)" },
 				children: [
-					/* @__PURE__ */ S("h3", {
+					/* @__PURE__ */ x("h3", {
 						style: {
 							fontSize: "var(--font-size-body-sm)",
 							fontWeight: "var(--font-weight-medium)",
 							color: "var(--color-status-error-text)"
 						},
-						children: j("bigconsole.dashboards.error.title", "Error loading dashboards")
+						children: k("bigconsole.dashboards.error.title", "Error loading dashboards")
 					}),
-					/* @__PURE__ */ S("p", {
+					/* @__PURE__ */ x("p", {
 						style: {
 							fontSize: "var(--font-size-body-sm)",
 							color: "var(--color-text-secondary)",
 							marginTop: "var(--space-controlGap)"
 						},
-						children: V.message
+						children: R.message
 					}),
-					/* @__PURE__ */ S(T, {
+					/* @__PURE__ */ x(w, {
 						size: "sm",
-						onClick: () => G(),
+						onClick: () => U(),
 						style: { marginTop: "var(--space-formGap)" },
-						children: j("bigconsole.dashboards.error.retry", "Retry")
+						children: k("bigconsole.dashboards.error.retry", "Retry")
 					})
 				]
 			})
 		})
-	}) : /* @__PURE__ */ C("div", {
+	}) : /* @__PURE__ */ S("div", {
 		style: {
 			minHeight: "100vh",
 			backgroundColor: "var(--color-bg-canvas)"
 		},
 		children: [
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ x("div", {
 				style: {
 					borderBottom: "1px solid var(--color-border)",
 					backgroundColor: "var(--color-bg-surface)"
 				},
-				children: /* @__PURE__ */ S("div", {
+				children: /* @__PURE__ */ x("div", {
 					style: { padding: "var(--space-pagePadding)" },
-					children: /* @__PURE__ */ C("div", {
+					children: /* @__PURE__ */ S("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
@@ -124,14 +151,14 @@ var A = c(function() {
 							flexWrap: "wrap",
 							gap: "var(--space-formGap)"
 						},
-						children: [/* @__PURE__ */ C("div", {
+						children: [/* @__PURE__ */ S("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								gap: "var(--space-formGap)",
 								minWidth: 0
 							},
-							children: [/* @__PURE__ */ S("div", {
+							children: [/* @__PURE__ */ x("div", {
 								style: {
 									display: "flex",
 									height: "var(--size-controlHeight-lg)",
@@ -141,65 +168,74 @@ var A = c(function() {
 									borderRadius: "var(--radius-card)",
 									backgroundColor: "var(--color-action-primary-bg)"
 								},
-								children: /* @__PURE__ */ S(h, { style: {
+								children: /* @__PURE__ */ x(h, { style: {
 									height: "var(--size-icon-lg)",
 									width: "var(--size-icon-lg)",
 									color: "var(--color-action-primary-text)"
 								} })
-							}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h1", {
+							}), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("h1", {
 								style: {
 									fontSize: "var(--font-size-heading-h4)",
 									fontWeight: "var(--font-weight-bold)",
 									margin: 0,
 									color: "var(--color-text-primary)"
 								},
-								children: j("bigconsole.dashboards.title", "Dashboards")
-							}), /* @__PURE__ */ S("p", {
+								children: k("bigconsole.dashboards.title", "Dashboards")
+							}), /* @__PURE__ */ x("p", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-text-secondary)",
 									margin: 0
 								},
-								children: j("bigconsole.dashboards.subtitle", "Create and manage your analytics dashboards")
+								children: k("bigconsole.dashboards.subtitle", "Create and manage your analytics dashboards")
 							})] })]
-						}), /* @__PURE__ */ C("div", {
+						}), /* @__PURE__ */ S("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								gap: "var(--space-controlGap)",
 								flexWrap: "wrap"
 							},
-							children: [/* @__PURE__ */ C(T, {
+							children: [/* @__PURE__ */ S(w, {
 								variant: "outline",
-								onClick: $,
-								children: [/* @__PURE__ */ S(b, { style: {
+								onClick: X,
+								children: [/* @__PURE__ */ x(b, { style: {
 									marginRight: "var(--space-iconGap)",
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
-								} }), j("bigconsole.dashboards.actions.import", "Import")]
-							}), /* @__PURE__ */ C(T, {
-								onClick: q,
-								children: [/* @__PURE__ */ S(_, { style: {
+								} }), k("bigconsole.dashboards.actions.import", "Import")]
+							}), /* @__PURE__ */ S(w, {
+								onClick: G,
+								children: [/* @__PURE__ */ x(_, { style: {
 									marginRight: "var(--space-iconGap)",
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
-								} }), j("bigconsole.dashboards.actions.create", "Create Dashboard")]
+								} }), k("bigconsole.dashboards.actions.create", "Create Dashboard")]
 							})]
 						})]
 					})
 				})
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ S("div", {
 				style: { padding: "var(--space-pagePadding)" },
 				children: [
 					/* @__PURE__ */ S("div", {
-						style: { marginBottom: "var(--space-sectionGap)" },
-						children: /* @__PURE__ */ C("div", {
+						style: {
+							marginBottom: "var(--space-sectionGap)",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							flexWrap: "wrap",
+							gap: "var(--space-formGap)"
+						},
+						children: [/* @__PURE__ */ S("div", {
 							style: {
 								position: "relative",
+								flex: 1,
+								minWidth: 0,
 								maxWidth: "400px"
 							},
-							children: [/* @__PURE__ */ S(v, { style: {
+							children: [/* @__PURE__ */ x(v, { style: {
 								position: "absolute",
 								left: "var(--space-controlGap)",
 								top: "50%",
@@ -207,64 +243,108 @@ var A = c(function() {
 								height: "var(--size-icon-sm)",
 								width: "var(--size-icon-sm)",
 								color: "var(--color-text-muted)"
-							} }), /* @__PURE__ */ S(O, {
+							} }), /* @__PURE__ */ x(ie, {
 								type: "text",
-								placeholder: j("bigconsole.dashboards.search.placeholder", "Search dashboards..."),
-								value: M,
-								onChange: (e) => N(e.target.value),
+								placeholder: k("bigconsole.dashboards.search.placeholder", "Search dashboards..."),
+								value: A,
+								onChange: (e) => oe(e.target.value),
 								style: {
 									paddingLeft: "var(--size-controlHeight-md)",
 									height: "var(--size-controlHeight-md)"
 								}
 							})]
-						})
+						}), /* @__PURE__ */ S("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "var(--space-iconGap)",
+								padding: "var(--space-iconGap)",
+								borderRadius: "var(--radius-button)",
+								backgroundColor: "var(--color-bg-sunken)"
+							},
+							children: [/* @__PURE__ */ x(w, {
+								variant: F === "grid" ? "default" : "ghost",
+								size: "sm",
+								onClick: () => I("grid"),
+								"aria-label": k("bigconsole.dashboards.view.grid", "Grid view"),
+								"aria-pressed": F === "grid",
+								title: k("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__ */ x(te, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} })
+							}), /* @__PURE__ */ x(w, {
+								variant: F === "list" ? "default" : "ghost",
+								size: "sm",
+								onClick: () => I("list"),
+								"aria-label": k("bigconsole.dashboards.view.list", "List view"),
+								"aria-pressed": F === "list",
+								title: k("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__ */ x(ne, { style: {
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} })
+							})]
+						})]
 					}),
-					B && H.length === 0 && /* @__PURE__ */ S("div", {
+					L && z.length === 0 && /* @__PURE__ */ x("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "center",
 							padding: "80px 0"
 						},
-						children: /* @__PURE__ */ C("div", {
+						children: /* @__PURE__ */ S("div", {
 							style: { textAlign: "center" },
-							children: [/* @__PURE__ */ S(k, { style: {
+							children: [/* @__PURE__ */ x(ae, { style: {
 								height: "var(--size-icon-xl)",
 								width: "var(--size-icon-xl)",
 								margin: "0 auto var(--space-formGap)"
-							} }), /* @__PURE__ */ S("p", {
+							} }), /* @__PURE__ */ x("p", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-text-muted)"
 								},
-								children: j("bigconsole.dashboards.loading", "Loading dashboards...")
+								children: k("bigconsole.dashboards.loading", "Loading dashboards...")
 							})]
 						})
 					}),
-					!B && K.length > 0 && /* @__PURE__ */ S("div", {
+					!L && F === "grid" && W.length > 0 && /* @__PURE__ */ x("div", {
 						style: {
 							display: "grid",
 							gridTemplateColumns: "repeat(auto-fill, minmax(min(320px, 100%), 1fr))",
 							gap: "var(--space-formGap)"
 						},
-						children: K.map((e) => /* @__PURE__ */ S(E, {
-							onClick: () => X(e.id),
+						children: W.map((e) => /* @__PURE__ */ x(T, {
+							onClick: () => K(e.id),
 							style: {
 								cursor: "pointer",
 								transition: "all 0.2s ease"
 							},
 							className: "hover:shadow-md hover:border-primary/50",
-							children: /* @__PURE__ */ C(D, {
+							children: /* @__PURE__ */ S(E, {
 								style: { padding: "var(--space-cardPadding)" },
 								children: [
-									/* @__PURE__ */ C("div", {
+									/* @__PURE__ */ S("div", {
 										style: {
 											display: "flex",
 											alignItems: "center",
 											gap: "var(--space-controlGap)",
 											marginBottom: "var(--space-formGap)"
 										},
-										children: [/* @__PURE__ */ S("div", {
+										children: [/* @__PURE__ */ x("div", {
 											style: {
 												display: "flex",
 												height: "var(--size-controlHeight-lg)",
@@ -275,17 +355,17 @@ var A = c(function() {
 												borderRadius: "var(--radius-button)",
 												backgroundColor: "var(--color-action-primary-bg)"
 											},
-											children: /* @__PURE__ */ S(h, { style: {
+											children: /* @__PURE__ */ x(h, { style: {
 												height: "var(--size-icon-md)",
 												width: "var(--size-icon-md)",
 												color: "var(--color-action-primary-text)"
 											} })
-										}), /* @__PURE__ */ C("div", {
+										}), /* @__PURE__ */ S("div", {
 											style: {
 												flex: 1,
 												minWidth: 0
 											},
-											children: [/* @__PURE__ */ S("h3", {
+											children: [/* @__PURE__ */ x("h3", {
 												style: {
 													fontWeight: "var(--font-weight-bold)",
 													fontSize: "var(--font-size-body-md)",
@@ -296,7 +376,7 @@ var A = c(function() {
 													whiteSpace: "nowrap"
 												},
 												children: e.name
-											}), e.category && /* @__PURE__ */ S(w, {
+											}), e.category && /* @__PURE__ */ x(C, {
 												variant: "secondary",
 												style: {
 													marginTop: "var(--space-controlGap)",
@@ -308,7 +388,7 @@ var A = c(function() {
 											})]
 										})]
 									}),
-									/* @__PURE__ */ S("p", {
+									/* @__PURE__ */ x("p", {
 										style: {
 											fontSize: "var(--font-size-body-sm)",
 											lineHeight: "var(--font-lineHeight-normal)",
@@ -320,9 +400,9 @@ var A = c(function() {
 											WebkitBoxOrient: "vertical",
 											overflow: "hidden"
 										},
-										children: e.description || j("bigconsole.dashboards.card.noDescription", "No description provided")
+										children: e.description || k("bigconsole.dashboards.card.noDescription", "No description provided")
 									}),
-									/* @__PURE__ */ C("div", {
+									/* @__PURE__ */ S("div", {
 										style: {
 											display: "flex",
 											alignItems: "center",
@@ -333,72 +413,72 @@ var A = c(function() {
 											borderRadius: "var(--radius-button)"
 										},
 										children: [
-											/* @__PURE__ */ C("div", {
+											/* @__PURE__ */ S("div", {
 												style: {
 													display: "flex",
 													alignItems: "center",
 													gap: "var(--space-iconGap)"
 												},
 												children: [
-													/* @__PURE__ */ S(m, { style: {
+													/* @__PURE__ */ x(m, { style: {
 														height: "var(--size-icon-sm)",
 														width: "var(--size-icon-sm)",
 														color: "var(--color-action-primary-bg)"
 													} }),
-													/* @__PURE__ */ S("span", {
+													/* @__PURE__ */ x("span", {
 														style: {
 															fontSize: "var(--font-size-body-sm)",
 															fontWeight: "var(--font-weight-semibold)",
 															color: "var(--color-text-primary)"
 														},
-														children: ie(e)
+														children: $(e)
 													}),
-													/* @__PURE__ */ S("span", {
+													/* @__PURE__ */ x("span", {
 														style: {
 															fontSize: "var(--font-size-body-sm)",
 															color: "var(--color-text-muted)"
 														},
-														children: j("bigconsole.dashboards.card.pages", "pages")
+														children: k("bigconsole.dashboards.card.pages", "pages")
 													})
 												]
 											}),
-											/* @__PURE__ */ S("div", { style: {
+											/* @__PURE__ */ x("div", { style: {
 												width: "1px",
 												height: "var(--size-icon-sm)",
 												backgroundColor: "var(--color-border)"
 											} }),
-											/* @__PURE__ */ C("div", {
+											/* @__PURE__ */ S("div", {
 												style: {
 													display: "flex",
 													alignItems: "center",
 													gap: "var(--space-iconGap)"
 												},
 												children: [
-													/* @__PURE__ */ S(f, { style: {
+													/* @__PURE__ */ x(p, { style: {
 														height: "var(--size-icon-sm)",
 														width: "var(--size-icon-sm)",
 														color: "var(--color-action-primary-bg)"
 													} }),
-													/* @__PURE__ */ S("span", {
+													/* @__PURE__ */ x("span", {
 														style: {
 															fontSize: "var(--font-size-body-sm)",
 															fontWeight: "var(--font-weight-semibold)",
 															color: "var(--color-text-primary)"
 														},
-														children: re(e)
+														children: Q(e)
 													}),
-													/* @__PURE__ */ S("span", {
+													/* @__PURE__ */ x("span", {
 														style: {
 															fontSize: "var(--font-size-body-sm)",
 															color: "var(--color-text-muted)"
 														},
-														children: j("bigconsole.dashboards.card.widgets", "widgets")
+														children: k("bigconsole.dashboards.card.widgets", "widgets")
 													})
 												]
 											})
 										]
 									}),
-									/* @__PURE__ */ C("div", {
+									/* @__PURE__ */ S("div", {
 										style: {
 											display: "flex",
 											alignItems: "center",
@@ -406,71 +486,326 @@ var A = c(function() {
 											paddingTop: "var(--space-controlGap)",
 											borderTop: "1px solid var(--color-border)"
 										},
-										children: [/* @__PURE__ */ C("div", {
+										children: [/* @__PURE__ */ S("div", {
 											style: {
 												display: "flex",
 												alignItems: "center",
 												gap: "var(--space-iconGap)"
 											},
-											children: [/* @__PURE__ */ S(d, { style: {
+											children: [/* @__PURE__ */ x(d, { style: {
 												height: "var(--size-icon-sm)",
 												width: "var(--size-icon-sm)",
 												color: "var(--color-text-muted)"
-											} }), /* @__PURE__ */ S("span", {
+											} }), /* @__PURE__ */ x("span", {
 												style: {
 													fontSize: "var(--font-size-body-sm)",
 													fontWeight: "var(--font-weight-medium)",
 													color: "var(--color-text-muted)"
 												},
-												children: ne(e.updatedAt)
+												children: Z(e.updatedAt)
 											})]
-										}), /* @__PURE__ */ C("div", {
+										}), /* @__PURE__ */ S("div", {
 											style: {
 												display: "flex",
 												alignItems: "center",
 												gap: "var(--space-controlGap)"
 											},
-											children: [/* @__PURE__ */ S(T, {
-												variant: "ghost",
-												size: "sm",
-												onClick: (t) => Z(e.id, t),
+											children: [
+												/* @__PURE__ */ x(w, {
+													variant: "ghost",
+													size: "sm",
+													onClick: (t) => q(e.id, t),
+													style: {
+														height: "var(--size-controlHeight-sm)",
+														width: "var(--size-controlHeight-sm)",
+														padding: 0,
+														borderRadius: "var(--radius-button)"
+													},
+													title: k("bigconsole.dashboards.actions.editTitle", "Edit Dashboard"),
+													children: /* @__PURE__ */ x(g, { style: {
+														height: "var(--size-icon-sm)",
+														width: "var(--size-icon-sm)"
+													} })
+												}),
+												/* @__PURE__ */ x(w, {
+													variant: "ghost",
+													size: "sm",
+													onClick: (t) => Y(e.id, e.name, t),
+													style: {
+														height: "var(--size-controlHeight-sm)",
+														width: "var(--size-controlHeight-sm)",
+														padding: 0,
+														borderRadius: "var(--radius-button)"
+													},
+													title: k("bigconsole.dashboards.actions.cloneTitle", "Clone Dashboard"),
+													children: /* @__PURE__ */ x(f, { style: {
+														height: "var(--size-icon-sm)",
+														width: "var(--size-icon-sm)"
+													} })
+												}),
+												/* @__PURE__ */ x(w, {
+													variant: "ghost",
+													size: "sm",
+													onClick: (t) => J(e.id, t),
+													style: {
+														height: "var(--size-controlHeight-sm)",
+														width: "var(--size-controlHeight-sm)",
+														padding: 0,
+														borderRadius: "var(--radius-button)"
+													},
+													className: "hover:text-destructive hover:bg-destructive/10",
+													title: k("bigconsole.dashboards.actions.deleteTitle", "Delete Dashboard"),
+													children: /* @__PURE__ */ x(y, { style: {
+														height: "var(--size-icon-sm)",
+														width: "var(--size-icon-sm)"
+													} })
+												})
+											]
+										})]
+									})
+								]
+							})
+						}, e.id))
+					}),
+					!L && F === "list" && W.length > 0 && /* @__PURE__ */ x("div", {
+						style: {
+							display: "flex",
+							flexDirection: "column",
+							gap: "var(--space-controlGap)"
+						},
+						children: W.map((e) => /* @__PURE__ */ x(T, {
+							onClick: () => K(e.id),
+							style: {
+								cursor: "pointer",
+								transition: "all 0.2s ease"
+							},
+							className: "hover:shadow-md hover:border-primary/50",
+							children: /* @__PURE__ */ x(E, {
+								style: { padding: "var(--space-cardPadding)" },
+								children: /* @__PURE__ */ S("div", {
+									style: {
+										display: "flex",
+										alignItems: "center",
+										gap: "var(--space-formGap)",
+										flexWrap: "wrap"
+									},
+									children: [
+										/* @__PURE__ */ x("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__ */ x(h, { style: {
+												height: "var(--size-icon-md)",
+												width: "var(--size-icon-md)",
+												color: "var(--color-action-primary-text)"
+											} })
+										}),
+										/* @__PURE__ */ S("div", {
+											style: {
+												flex: 1,
+												minWidth: "180px"
+											},
+											children: [/* @__PURE__ */ S("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-controlGap)",
+													flexWrap: "wrap"
 												},
-												title: j("bigconsole.dashboards.actions.editTitle", "Edit Dashboard"),
-												children: /* @__PURE__ */ S(g, { style: {
-													height: "var(--size-icon-sm)",
-													width: "var(--size-icon-sm)"
-												} })
-											}), /* @__PURE__ */ S(T, {
-												variant: "ghost",
-												size: "sm",
-												onClick: (t) => Q(e.id, t),
+												children: [/* @__PURE__ */ x("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",
+														maxWidth: "100%"
+													},
+													children: e.name
+												}), e.category && /* @__PURE__ */ x(C, {
+													variant: "secondary",
+													style: {
+														fontSize: "10px",
+														fontWeight: "var(--font-weight-semibold)",
+														textTransform: "uppercase"
+													},
+													children: e.category
+												})]
+											}), /* @__PURE__ */ x("p", {
 												style: {
-													height: "var(--size-controlHeight-sm)",
-													width: "var(--size-controlHeight-sm)",
-													padding: 0,
-													borderRadius: "var(--radius-button)"
+													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"
 												},
-												className: "hover:text-destructive hover:bg-destructive/10",
-												title: j("bigconsole.dashboards.actions.deleteTitle", "Delete Dashboard"),
-												children: /* @__PURE__ */ S(y, { style: {
-													height: "var(--size-icon-sm)",
-													width: "var(--size-icon-sm)"
-												} })
+												children: e.description || k("bigconsole.dashboards.card.noDescription", "No description provided")
 											})]
-										})]
-									})
-								]
+										}),
+										/* @__PURE__ */ S("div", {
+											style: {
+												display: "flex",
+												alignItems: "center",
+												gap: "var(--space-formGap)",
+												flexWrap: "wrap"
+											},
+											children: [
+												/* @__PURE__ */ S("div", {
+													style: {
+														display: "flex",
+														alignItems: "center",
+														gap: "var(--space-iconGap)"
+													},
+													children: [
+														/* @__PURE__ */ x(m, { style: {
+															height: "var(--size-icon-sm)",
+															width: "var(--size-icon-sm)",
+															color: "var(--color-action-primary-bg)"
+														} }),
+														/* @__PURE__ */ x("span", {
+															style: {
+																fontSize: "var(--font-size-body-sm)",
+																fontWeight: "var(--font-weight-semibold)",
+																color: "var(--color-text-primary)"
+															},
+															children: $(e)
+														}),
+														/* @__PURE__ */ x("span", {
+															style: {
+																fontSize: "var(--font-size-body-sm)",
+																color: "var(--color-text-muted)"
+															},
+															children: k("bigconsole.dashboards.card.pages", "pages")
+														})
+													]
+												}),
+												/* @__PURE__ */ S("div", {
+													style: {
+														display: "flex",
+														alignItems: "center",
+														gap: "var(--space-iconGap)"
+													},
+													children: [
+														/* @__PURE__ */ x(p, { style: {
+															height: "var(--size-icon-sm)",
+															width: "var(--size-icon-sm)",
+															color: "var(--color-action-primary-bg)"
+														} }),
+														/* @__PURE__ */ x("span", {
+															style: {
+																fontSize: "var(--font-size-body-sm)",
+																fontWeight: "var(--font-weight-semibold)",
+																color: "var(--color-text-primary)"
+															},
+															children: Q(e)
+														}),
+														/* @__PURE__ */ x("span", {
+															style: {
+																fontSize: "var(--font-size-body-sm)",
+																color: "var(--color-text-muted)"
+															},
+															children: k("bigconsole.dashboards.card.widgets", "widgets")
+														})
+													]
+												}),
+												/* @__PURE__ */ S("div", {
+													style: {
+														display: "flex",
+														alignItems: "center",
+														gap: "var(--space-iconGap)"
+													},
+													children: [/* @__PURE__ */ x(d, { style: {
+														height: "var(--size-icon-sm)",
+														width: "var(--size-icon-sm)",
+														color: "var(--color-text-muted)"
+													} }), /* @__PURE__ */ x("span", {
+														style: {
+															fontSize: "var(--font-size-body-sm)",
+															fontWeight: "var(--font-weight-medium)",
+															color: "var(--color-text-muted)"
+														},
+														children: Z(e.updatedAt)
+													})]
+												})
+											]
+										}),
+										/* @__PURE__ */ S("div", {
+											style: {
+												display: "flex",
+												alignItems: "center",
+												gap: "var(--space-controlGap)"
+											},
+											children: [
+												/* @__PURE__ */ x(w, {
+													variant: "ghost",
+													size: "sm",
+													onClick: (t) => q(e.id, t),
+													style: {
+														height: "var(--size-controlHeight-sm)",
+														width: "var(--size-controlHeight-sm)",
+														padding: 0,
+														borderRadius: "var(--radius-button)"
+													},
+													title: k("bigconsole.dashboards.actions.editTitle", "Edit Dashboard"),
+													children: /* @__PURE__ */ x(g, { style: {
+														height: "var(--size-icon-sm)",
+														width: "var(--size-icon-sm)"
+													} })
+												}),
+												/* @__PURE__ */ x(w, {
+													variant: "ghost",
+													size: "sm",
+													onClick: (t) => Y(e.id, e.name, t),
+													style: {
+														height: "var(--size-controlHeight-sm)",
+														width: "var(--size-controlHeight-sm)",
+														padding: 0,
+														borderRadius: "var(--radius-button)"
+													},
+													title: k("bigconsole.dashboards.actions.cloneTitle", "Clone Dashboard"),
+													children: /* @__PURE__ */ x(f, { style: {
+														height: "var(--size-icon-sm)",
+														width: "var(--size-icon-sm)"
+													} })
+												}),
+												/* @__PURE__ */ x(w, {
+													variant: "ghost",
+													size: "sm",
+													onClick: (t) => J(e.id, t),
+													style: {
+														height: "var(--size-controlHeight-sm)",
+														width: "var(--size-controlHeight-sm)",
+														padding: 0,
+														borderRadius: "var(--radius-button)"
+													},
+													className: "hover:text-destructive hover:bg-destructive/10",
+													title: k("bigconsole.dashboards.actions.deleteTitle", "Delete Dashboard"),
+													children: /* @__PURE__ */ x(y, { style: {
+														height: "var(--size-icon-sm)",
+														width: "var(--size-icon-sm)"
+													} })
+												})
+											]
+										})
+									]
+								})
 							})
 						}, e.id))
 					}),
-					!B && K.length === 0 && /* @__PURE__ */ S(E, {
+					!L && W.length === 0 && /* @__PURE__ */ x(T, {
 						className: "border-dashed",
-						children: /* @__PURE__ */ C(D, {
+						children: /* @__PURE__ */ S(E, {
 							style: {
 								display: "flex",
 								flexDirection: "column",
@@ -479,7 +814,7 @@ var A = c(function() {
 								padding: "64px var(--space-pagePadding)"
 							},
 							children: [
-								/* @__PURE__ */ S("div", {
+								/* @__PURE__ */ x("div", {
 									style: {
 										display: "flex",
 										height: "80px",
@@ -490,21 +825,21 @@ var A = c(function() {
 										backgroundColor: "var(--color-bg-sunken)",
 										marginBottom: "var(--space-sectionGap)"
 									},
-									children: /* @__PURE__ */ S(p, { style: {
+									children: /* @__PURE__ */ x(ee, { style: {
 										height: "var(--size-icon-xl)",
 										width: "var(--size-icon-xl)",
 										color: "var(--color-text-muted)"
 									} })
 								}),
-								/* @__PURE__ */ S("h3", {
+								/* @__PURE__ */ x("h3", {
 									style: {
 										fontSize: "var(--font-size-heading-h4)",
 										fontWeight: "var(--font-weight-semibold)",
 										marginBottom: "var(--space-controlGap)"
 									},
-									children: M ? j("bigconsole.dashboards.empty.filteredTitle", "No dashboards found") : j("bigconsole.dashboards.empty.title", "No dashboards yet")
+									children: A ? k("bigconsole.dashboards.empty.filteredTitle", "No dashboards found") : k("bigconsole.dashboards.empty.title", "No dashboards yet")
 								}),
-								/* @__PURE__ */ S("p", {
+								/* @__PURE__ */ x("p", {
 									style: {
 										fontSize: "var(--font-size-body-sm)",
 										color: "var(--color-text-muted)",
@@ -512,28 +847,30 @@ var A = c(function() {
 										textAlign: "center",
 										maxWidth: "360px"
 									},
-									children: M ? j("bigconsole.dashboards.empty.filteredDescription", "Try adjusting your search terms") : j("bigconsole.dashboards.empty.description", "Get started by creating your first dashboard to visualize your data")
+									children: A ? k("bigconsole.dashboards.empty.filteredDescription", "Try adjusting your search terms") : k("bigconsole.dashboards.empty.description", "Get started by creating your first dashboard to visualize your data")
 								}),
-								!M && /* @__PURE__ */ C("div", {
+								!A && /* @__PURE__ */ S("div", {
 									style: {
 										display: "flex",
-										gap: "var(--space-controlGap)"
+										gap: "var(--space-controlGap)",
+										flexWrap: "wrap",
+										justifyContent: "center"
 									},
-									children: [/* @__PURE__ */ C(T, {
+									children: [/* @__PURE__ */ S(w, {
 										variant: "outline",
-										onClick: $,
-										children: [/* @__PURE__ */ S(b, { style: {
+										onClick: X,
+										children: [/* @__PURE__ */ x(b, { style: {
 											marginRight: "var(--space-iconGap)",
 											height: "var(--size-icon-sm)",
 											width: "var(--size-icon-sm)"
-										} }), j("bigconsole.dashboards.actions.importDashboard", "Import Dashboard")]
-									}), /* @__PURE__ */ C(T, {
-										onClick: q,
-										children: [/* @__PURE__ */ S(_, { style: {
+										} }), k("bigconsole.dashboards.actions.importDashboard", "Import Dashboard")]
+									}), /* @__PURE__ */ S(w, {
+										onClick: G,
+										children: [/* @__PURE__ */ x(_, { style: {
 											marginRight: "var(--space-iconGap)",
 											height: "var(--size-icon-sm)",
 											width: "var(--size-icon-sm)"
-										} }), j("bigconsole.dashboards.actions.create", "Create Dashboard")]
+										} }), k("bigconsole.dashboards.actions.create", "Create Dashboard")]
 									})]
 								})
 							]
@@ -541,21 +878,21 @@ var A = c(function() {
 					})
 				]
 			}),
-			/* @__PURE__ */ S(n, {
-				isOpen: P,
-				isCreating: I,
-				onClose: J,
-				onCreate: Y
+			/* @__PURE__ */ x(n, {
+				isOpen: se,
+				isCreating: M,
+				onClose: ue,
+				onCreate: de
 			}),
-			/* @__PURE__ */ S(r, {
-				isOpen: R,
-				onClose: ee,
-				onSuccess: te
+			/* @__PURE__ */ x(r, {
+				isOpen: ce,
+				onClose: fe,
+				onSuccess: pe
 			})
 		]
 	});
 });
 //#endregion
-export { A as DashboardsPage, A as default };
+export { O as DashboardsPage, O as default };
 
 //# sourceMappingURL=DashboardsPage.js.map