@burdenoff/microfe-bigconsole 2026.1004.3 → 2026.1004.4

package/dist/bigconsole/pages/DashboardViewPage.js

@@ -8,62 +8,64 @@ import "../components/common/index.js";
 import i from "../hooks/useWidgetOperations.js";
 import ee from "../hooks/useDashboardOperations.js";
 import te from "../hooks/useActivePage.js";
-import ne from "../hooks/useFilterUrlSync.js";
-import re from "../hooks/usePageOperations.js";
+import ne, { parseUrlToGlobalFilterValues as re } from "../hooks/useFilterUrlSync.js";
+import a from "../hooks/usePageOperations.js";
 import "../hooks/index.js";
-import { BIGCONSOLE_PERMISSIONS as a } from "../../constants/permissions.js";
-import ie from "../components/dashboard/DashboardCanvas.js";
-import ae from "../components/dashboard/LiveCanvasToggle.js";
-import o from "../components/dashboard/ExportDashboardDialog.js";
-import oe from "../components/dashboard/DrilldownBreadcrumb.js";
-import se from "../components/dashboard/PublishToStoreDialog.js";
+import { BIGCONSOLE_PERMISSIONS as o } from "../../constants/permissions.js";
+import { loadBigConsoleSettings as ie } from "../hooks/useBigConsoleSettings.js";
+import ae from "../components/dashboard/DashboardCanvas.js";
+import oe from "../components/dashboard/LiveCanvasToggle.js";
+import se from "../components/dashboard/ExportDashboardDialog.js";
+import ce from "../components/dashboard/DrilldownBreadcrumb.js";
+import le from "../components/dashboard/PublishToStoreDialog.js";
 import "../components/dashboard/index.js";
-import { memo as s, useCallback as c, useEffect as l, useRef as ce, useState as u } from "react";
-import { useLocation as le, useParams as d } from "react-router";
-import { AccessDenied as f } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as p } from "@burdenoff/fe-libs/shared/providers/shell";
-import { ArrowLeft as m } from "lucide-react";
-import { Button as h, IllustratedEmptyState as ue } from "@burdenoff/fe-libs/ui";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
-import { useI18n as de } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { memo as s, useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
+import { useLocation as f, useParams as ue } from "react-router";
+import { AccessDenied as p } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as de } from "@burdenoff/fe-libs/shared/providers/shell";
+import { ArrowLeft as fe } from "lucide-react";
+import { Button as m, IllustratedEmptyState as pe } from "@burdenoff/fe-libs/ui";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useI18n as me } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/bigconsole/pages/DashboardViewPage.tsx
-var y = s(function() {
-	let { dashboardId: s } = d(), y = n(), { t: b } = de(), { hasPermission: x, isLoading: fe } = p(), pe = x(a.DASHBOARD_READ), me = x(a.DASHBOARD_UPDATE), he = x(a.DASHBOARD_EXPORT), ge = x(a.DASHBOARD_PUBLISH), [_e, S] = u(!1), [ve, C] = u(!1), [ye, w] = u(!1), [T, be] = u(!1), { isInDrilldown: E, getContextFromUrl: D, getDrilldownMetadata: O } = ne(), k = t((e) => e.currentDashboard), A = t((e) => e.setCurrentDashboard), j = t((e) => e.setGlobalFilterValue), M = t((e) => e.clearAllGlobalFilters), N = e((e) => e.widgets), xe = le(), { activePageId: P, setActivePage: F } = te(k?.id === s ? k?.pages : void 0), I = e((e) => e.clipboardWidgetId), L = e((e) => e.clipboardAction), R = e((e) => e.clearClipboard), z = e((e) => e.selectWidget), { loading: Se, error: B, fetchDashboard: V, updateDashboard: H } = ee(), { createWidget: U, deleteWidget: W, duplicateWidget: G, batchUpdatePositions: K, refetch: q } = i(P || void 0, s), { createPage: J, updatePage: Y, deletePage: X, reorderPages: Z } = re();
+var v = s(function() {
+	let { dashboardId: s } = ue(), v = n(), { t: y } = me(), { hasPermission: b, isLoading: he } = de(), ge = b(o.DASHBOARD_READ), _e = b(o.DASHBOARD_UPDATE), ve = b(o.DASHBOARD_EXPORT), ye = b(o.DASHBOARD_PUBLISH), [be, x] = d(!1), [xe, S] = d(!1), [Se, C] = d(!1), [w, Ce] = d(!1), { isInDrilldown: T, getContextFromUrl: E, getDrilldownMetadata: D } = ne(), O = t((e) => e.currentDashboard), k = t((e) => e.setCurrentDashboard), A = t((e) => e.setGlobalFilterValue), j = t((e) => e.clearAllGlobalFilters), M = t((e) => e.setGlobalFilterValues), N = e((e) => e.widgets), we = f(), { activePageId: P, setActivePage: F } = te(O?.id === s ? O?.pages : void 0), I = e((e) => e.clipboardWidgetId), L = e((e) => e.clipboardAction), R = e((e) => e.clearClipboard), z = e((e) => e.selectWidget), { loading: Te, error: B, fetchDashboard: V, updateDashboard: H } = ee(), { createWidget: U, deleteWidget: W, duplicateWidget: G, batchUpdatePositions: K, refetch: q } = i(P || void 0, s), { createPage: J, updatePage: Y, deletePage: X, reorderPages: Z } = a();
 	l(() => {
 		if (!s) {
-			y("/dashboards");
+			v("/dashboards");
 			return;
 		}
-		return M(), C(!1), V(s).then((e) => {
-			e || C(!0);
+		return M(re(window.location.search, "filter_")), S(!1), V(s).then((e) => {
+			e || S(!0);
 		}), () => {
-			A(null), M(), C(!1);
+			k(null), j(), S(!1);
 		};
 	}, [
 		s,
-		y,
+		v,
 		V,
-		A,
+		k,
+		j,
 		M
 	]), l(() => {
-		if (!E) return;
-		let e = D(), t = O();
+		if (!T) return;
+		let e = E(), t = D();
 		Object.entries(e).forEach(([e, t]) => {
-			j(`ctx_${e}`, t);
-		}), t.depth > 0 && (j("__drilldown_depth", t.depth), j("__drilldown_parent", t.parent), j("__drilldown_path", t.path)), Object.keys(e).length > 0 && console.debug("[DashboardViewPage] Loaded drilldown context:", {
+			A(`ctx_${e}`, t);
+		}), t.depth > 0 && (A("__drilldown_depth", t.depth), A("__drilldown_parent", t.parent), A("__drilldown_path", t.path)), Object.keys(e).length > 0 && console.debug("[DashboardViewPage] Loaded drilldown context:", {
 			context: e,
 			metadata: t
 		});
 	}, [
+		T,
 		E,
 		D,
-		O,
-		j,
-		xe.search
+		A,
+		we.search
 	]);
-	let Q = ce(q);
+	let Q = u(q);
 	Q.current = q, l(() => {
-		if (!T || !s) return;
+		if (!w || !s) return;
 		let e = () => {
 			typeof document < "u" && document.visibilityState !== "visible" || t.getState().viewMode !== "edit" && (V(s, { silent: !0 }), Q.current());
 		};
@@ -75,39 +77,39 @@ var y = s(function() {
 			window.clearInterval(n), document.removeEventListener("visibilitychange", r);
 		};
 	}, [
-		T,
+		w,
 		s,
 		V
 	]);
-	let Ce = c(async () => {
+	let Ee = c(async () => {
 		if (s) {
-			S(!0);
+			x(!0);
 			try {
 				let e = Array.from(N.values());
 				e.length > 0 && await K(e.map((e) => ({
 					id: e.id,
 					position: e.position
-				}))), k && await H({
+				}))), O && await H({
 					id: s,
-					name: k.name,
-					description: k.description
+					name: O.name,
+					description: O.description
 				});
 			} catch {} finally {
-				S(!1);
+				x(!1);
 			}
 		}
 	}, [
 		s,
 		N,
-		k,
+		O,
 		K,
 		H
-	]), we = c(() => {
-		y("/dashboards");
-	}, [y]), Te = c((e) => {
+	]), De = c(() => {
+		v("/dashboards");
+	}, [v]), Oe = c((e) => {
 		F(e);
-	}, [F]), Ee = c(async () => {
-		let e = P || k?.pages?.[0]?.id;
+	}, [F]), ke = c(async () => {
+		let e = P || O?.pages?.[0]?.id;
 		if (!I || !s || !e) return;
 		let t = N.get(I);
 		if (!t) {
@@ -120,9 +122,9 @@ var y = s(function() {
 				let n = (t.positionY ?? 0) + (t.positionHeight ?? 4);
 				return Math.max(e, n);
 			}, 0),
-			width: t.positionWidth ?? 4,
+			width: Math.min(t.positionWidth ?? 4, O?.pages.find((t) => t.id === e)?.gridColumns ?? 12),
 			height: t.positionHeight ?? 4
-		}, r = L === "copy" ? b("bigconsole.dashboards.view.widgetCopyTitle", "{{title}} (Copy)", { title: t.title }) : t.title, i = null;
+		}, r = L === "copy" ? y("bigconsole.dashboards.view.widgetCopyTitle", "{{title}} (Copy)", { title: t.title }) : t.title, i = null;
 		try {
 			i = await G(I, n, r);
 		} catch {}
@@ -146,247 +148,249 @@ var y = s(function() {
 		L,
 		s,
 		P,
-		k,
+		O,
 		N,
 		G,
 		U,
 		W,
 		z,
 		R,
-		b
-	]), De = c(() => {
-		w(!0);
-	}, []), [Oe, $] = u(!1), ke = c(() => {
+		y
+	]), Ae = c(() => {
+		C(!0);
+	}, []), [je, $] = d(!1), Me = c(() => {
 		$(!0);
-	}, []), Ae = c(() => {
+	}, []), Ne = c(() => {
 		$(!1);
-	}, []), je = c(() => {
-		w(!1);
-	}, []), Me = c(async () => {
-		if (!k || !s) return;
+	}, []), Pe = c(() => {
+		C(!1);
+	}, []), Fe = c(async () => {
+		if (!O || !s) return;
 		let e = await J({
 			dashboardId: s,
-			name: b("bigconsole.dashboards.view.pageName", "Page {{count}}", { count: (k.pages?.length || 0) + 1 })
+			name: y("bigconsole.dashboards.view.pageName", "Page {{count}}", { count: (O.pages?.length || 0) + 1 }),
+			gridColumns: ie().defaultGridColumns
 		});
-		e && (A({
-			...k,
-			pages: [...k.pages || [], e]
+		e && (k({
+			...O,
+			pages: [...O.pages || [], e]
 		}), F(e.id));
 	}, [
-		k,
+		O,
 		s,
-		A,
+		k,
 		J,
 		F,
-		b
-	]), Ne = c(async (e, t) => {
-		k && await Y({
+		y
+	]), Ie = c(async (e, t) => {
+		O && await Y({
 			id: e,
 			name: t
-		}) && A({
-			...k,
-			pages: k.pages?.map((n) => n.id === e ? {
+		}) && k({
+			...O,
+			pages: O.pages?.map((n) => n.id === e ? {
 				...n,
 				name: t
 			} : n)
 		});
 	}, [
+		O,
 		k,
-		A,
 		Y
-	]), Pe = c(async (e) => {
-		if (!k || !s) return;
-		let t = k.pages?.find((t) => t.id === e);
+	]), Le = c(async (e) => {
+		if (!O || !s) return;
+		let t = O.pages?.find((t) => t.id === e);
 		if (!t) return;
 		let n = await J({
 			dashboardId: s,
-			name: b("bigconsole.dashboards.view.pageCopyName", "{{name}} (Copy)", { name: t.name ?? "" })
+			gridColumns: t.gridColumns,
+			name: y("bigconsole.dashboards.view.pageCopyName", "{{name}} (Copy)", { name: t.name ?? "" })
 		});
-		n && (A({
-			...k,
-			pages: [...k.pages || [], n]
+		n && (k({
+			...O,
+			pages: [...O.pages || [], n]
 		}), F(n.id));
 	}, [
-		k,
+		O,
 		s,
-		A,
+		k,
 		J,
 		F,
-		b
-	]), Fe = c(async (e) => {
-		if (!(!k || (k.pages?.length || 0) <= 1) && await X(e)) {
-			let t = k.pages?.filter((t) => t.id !== e).map((e, t) => ({
+		y
+	]), Re = c(async (e) => {
+		if (!(!O || (O.pages?.length || 0) <= 1) && await X(e)) {
+			let t = O.pages?.filter((t) => t.id !== e).map((e, t) => ({
 				...e,
 				order: t
 			}));
-			A({
-				...k,
+			k({
+				...O,
 				pages: t
 			});
 			let n = t?.[0]?.id;
 			P === e && n && F(n, { replace: !0 });
 		}
 	}, [
+		O,
 		k,
-		A,
 		P,
 		X,
 		F
-	]), Ie = c(async (e) => {
-		!k || !s || (A({
-			...k,
+	]), ze = c(async (e) => {
+		!O || !s || (k({
+			...O,
 			pages: e.map((e, t) => ({
 				...e,
 				order: t
 			}))
 		}), await Z(s, e.map((e) => e.id)));
 	}, [
-		k,
+		O,
 		s,
-		A,
+		k,
 		Z
 	]);
-	return fe ? /* @__PURE__ */ _("div", {
+	return he ? /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full",
-		children: /* @__PURE__ */ _("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" })
-	}) : pe ? B ? /* @__PURE__ */ _("div", {
+		children: /* @__PURE__ */ g("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" })
+	}) : ge ? B ? /* @__PURE__ */ g("div", {
 		className: "flex h-full flex-col items-center justify-center",
 		style: { padding: "var(--space-pagePadding)" },
-		children: /* @__PURE__ */ _(r, {
+		children: /* @__PURE__ */ g(r, {
 			headingLevel: 2,
 			tone: "danger",
-			title: b("bigconsole.dashboards.view.errorTitle", "Error loading dashboard"),
-			description: /* @__PURE__ */ _("span", {
+			title: y("bigconsole.dashboards.view.errorTitle", "Error loading dashboard"),
+			description: /* @__PURE__ */ g("span", {
 				className: "break-words",
 				children: B.message
 			}),
 			className: "w-full max-w-md",
 			"data-testid": "dashboard-view-error",
-			actions: /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(h, {
+			actions: /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(m, {
 				size: "sm",
 				onClick: () => V(s),
-				children: b("bigconsole.dashboards.view.retry", "Retry")
-			}), /* @__PURE__ */ _(h, {
+				children: y("bigconsole.dashboards.view.retry", "Retry")
+			}), /* @__PURE__ */ g(m, {
 				size: "sm",
 				variant: "outline",
-				onClick: () => y("/dashboards"),
-				children: b("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards")
+				onClick: () => v("/dashboards"),
+				children: y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards")
 			})] })
 		})
-	}) : ve ? /* @__PURE__ */ _("div", {
+	}) : xe ? /* @__PURE__ */ g("div", {
 		className: "flex flex-col items-center justify-center h-full",
 		style: { padding: "var(--space-pagePadding)" },
-		children: /* @__PURE__ */ _(ue, {
+		children: /* @__PURE__ */ g(pe, {
 			illustration: "empty-data",
-			title: b("bigconsole.dashboards.view.notFoundTitle", "Dashboard not found"),
-			description: /* @__PURE__ */ v(g, { children: [b("bigconsole.dashboards.view.notFoundDescription", "The dashboard you're looking for doesn't exist or has been deleted."), /* @__PURE__ */ _("span", {
+			title: y("bigconsole.dashboards.view.notFoundTitle", "Dashboard not found"),
+			description: /* @__PURE__ */ _(h, { children: [y("bigconsole.dashboards.view.notFoundDescription", "The dashboard you're looking for doesn't exist or has been deleted."), /* @__PURE__ */ g("span", {
 				className: "mt-2 block font-mono text-xs text-text-muted break-all",
-				children: b("bigconsole.dashboards.view.idLabel", "ID: {{id}}", { id: s ?? "" })
+				children: y("bigconsole.dashboards.view.idLabel", "ID: {{id}}", { id: s ?? "" })
 			})] }),
-			action: /* @__PURE__ */ _(h, {
-				onClick: () => y("/dashboards"),
-				children: b("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards")
+			action: /* @__PURE__ */ g(m, {
+				onClick: () => v("/dashboards"),
+				children: y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards")
 			})
 		})
-	}) : Se || !k ? /* @__PURE__ */ _("div", {
+	}) : Te || !O ? /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full",
 		role: "status",
 		"aria-live": "polite",
-		children: /* @__PURE__ */ v("div", {
+		children: /* @__PURE__ */ _("div", {
 			className: "flex flex-col items-center gap-4",
-			children: [/* @__PURE__ */ _("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" }), /* @__PURE__ */ _("p", {
+			children: [/* @__PURE__ */ g("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" }), /* @__PURE__ */ g("p", {
 				className: "text-sm text-text-secondary",
-				children: b("bigconsole.dashboards.view.loading", "Loading dashboard...")
+				children: y("bigconsole.dashboards.view.loading", "Loading dashboard...")
 			})]
 		})
-	}) : /* @__PURE__ */ v("div", {
+	}) : /* @__PURE__ */ _("div", {
 		className: "h-full flex flex-col overflow-hidden",
 		children: [
-			/* @__PURE__ */ _(r, {
+			/* @__PURE__ */ g(r, {
 				emphasis: "bare",
 				padding: "none",
 				"data-testid": "dashboard-route-header",
 				"aria-label": "Dashboard",
 				className: "flex-shrink-0 border-b border-[var(--color-border-subtle)] bg-bg-surface px-3 py-2",
 				headerClassName: "",
-				header: /* @__PURE__ */ v("div", {
+				header: /* @__PURE__ */ _("div", {
 					className: "flex flex-wrap items-center gap-control-gap",
 					children: [
-						/* @__PURE__ */ v(h, {
-							onClick: we,
+						/* @__PURE__ */ _(m, {
+							onClick: De,
 							variant: "ghost",
 							size: "sm",
-							title: b("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards"),
-							"aria-label": b("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards"),
+							title: y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards"),
+							"aria-label": y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards"),
 							className: "flex-shrink-0",
-							children: [/* @__PURE__ */ _(m, { className: "w-4 h-4 mr-2" }), b("bigconsole.dashboards.view.back", "Back")]
+							children: [/* @__PURE__ */ g(fe, { className: "w-4 h-4 mr-2" }), y("bigconsole.dashboards.view.back", "Back")]
 						}),
-						/* @__PURE__ */ _("h1", {
+						/* @__PURE__ */ g("h1", {
 							className: "min-w-0 flex-1 truncate text-sm font-semibold text-text-primary",
-							title: k.name,
-							children: k.name
+							title: O.name,
+							children: O.name
 						}),
-						/* @__PURE__ */ _("div", {
+						/* @__PURE__ */ g("div", {
 							className: "flex-shrink-0",
-							children: /* @__PURE__ */ _(ae, {
-								isLive: T,
-								onToggle: () => be((e) => !e)
+							children: /* @__PURE__ */ g(oe, {
+								isLive: w,
+								onToggle: () => Ce((e) => !e)
 							})
 						})
 					]
 				})
 			}),
-			E && /* @__PURE__ */ _(oe, {
-				currentDashboardId: k.id,
-				currentDashboardName: k.name,
+			T && /* @__PURE__ */ g(ce, {
+				currentDashboardId: O.id,
+				currentDashboardName: O.name,
 				basePath: "/bigconsole/dashboards"
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ g("div", {
 				className: "flex-1 min-w-0 overflow-hidden",
-				children: /* @__PURE__ */ _(ie, {
-					dashboardId: k.id,
-					pageId: P || k.pages?.[0]?.id,
-					title: k.name,
-					onPaste: Ee,
-					onSave: me ? Ce : void 0,
-					isSaving: _e,
-					onExport: he ? De : void 0,
-					onPublishTemplate: ge ? ke : void 0,
-					pages: (k.pages || []).map((e, t) => ({
+				children: /* @__PURE__ */ g(ae, {
+					dashboardId: O.id,
+					pageId: P || O.pages?.[0]?.id,
+					title: O.name,
+					onPaste: ke,
+					onSave: _e ? Ee : void 0,
+					isSaving: be,
+					onExport: ve ? Ae : void 0,
+					onPublishTemplate: ye ? Me : void 0,
+					pages: (O.pages || []).map((e, t) => ({
 						id: e.id,
-						name: e.name || b("bigconsole.dashboards.view.pageName", "Page {{count}}", { count: t + 1 }),
+						name: e.name || y("bigconsole.dashboards.view.pageName", "Page {{count}}", { count: t + 1 }),
 						order: e.order ?? 0
 					})),
-					activePageId: P || k.pages?.[0]?.id,
-					onPageChange: Te,
-					onPageAdd: Me,
-					onPageRename: Ne,
-					onPageDuplicate: Pe,
-					onPageDelete: Fe,
-					onPagesReorder: Ie,
+					activePageId: P || O.pages?.[0]?.id,
+					onPageChange: Oe,
+					onPageAdd: Fe,
+					onPageRename: Ie,
+					onPageDuplicate: Le,
+					onPageDelete: Re,
+					onPagesReorder: ze,
 					showPageTabs: !0
 				})
 			}),
-			/* @__PURE__ */ _(o, {
-				isOpen: ye,
-				dashboardId: k.id,
-				dashboardName: k.name,
-				onClose: je
+			/* @__PURE__ */ g(se, {
+				isOpen: Se,
+				dashboardId: O.id,
+				dashboardName: O.name,
+				onClose: Pe
 			}),
-			/* @__PURE__ */ _(se, {
-				isOpen: Oe,
-				dashboardId: k.id,
-				dashboardName: k.name,
-				dashboardDescription: k.description,
-				onClose: Ae
+			/* @__PURE__ */ g(le, {
+				isOpen: je,
+				dashboardId: O.id,
+				dashboardName: O.name,
+				dashboardDescription: O.description,
+				onClose: Ne
 			})
 		]
-	}) : /* @__PURE__ */ _(f, {
-		title: b("bigconsole.dashboards.view.accessDeniedTitle", "Access Denied"),
-		description: b("bigconsole.dashboards.view.accessDeniedDescription", "You don't have permission to view this dashboard.")
+	}) : /* @__PURE__ */ g(p, {
+		title: y("bigconsole.dashboards.view.accessDeniedTitle", "Access Denied"),
+		description: y("bigconsole.dashboards.view.accessDeniedDescription", "You don't have permission to view this dashboard.")
 	});
 });
 //#endregion
-export { y as DashboardViewPage, y as default };
+export { v as DashboardViewPage, v as default };
 
 //# sourceMappingURL=DashboardViewPage.js.map