@burdenoff/microfe-bigconsole 2026.805.2 → 2026.805.3

package/dist/bigconsole/pages/DashboardViewPage.js

@@ -6,61 +6,62 @@ import "../context/index.js";
 import r from "../hooks/useWidgetOperations.js";
 import i from "../hooks/useDashboardOperations.js";
 import ee from "../hooks/useFilterUrlSync.js";
-import a from "../hooks/usePageOperations.js";
+import te from "../hooks/usePageOperations.js";
 import "../hooks/index.js";
-import { BIGCONSOLE_PERMISSIONS as o } from "../../constants/permissions.js";
-import s from "../components/dashboard/DashboardCanvas.js";
-import te from "../components/dashboard/LiveCanvasToggle.js";
-import ne from "../components/dashboard/ExportDashboardDialog.js";
-import re from "../components/dashboard/DrilldownBreadcrumb.js";
-import ie from "../components/dashboard/PublishToStoreDialog.js";
+import { BIGCONSOLE_PERMISSIONS as a } from "../../constants/permissions.js";
+import ne from "../components/dashboard/DashboardCanvas.js";
+import re from "../components/dashboard/LiveCanvasToggle.js";
+import o from "../components/dashboard/ExportDashboardDialog.js";
+import ie from "../components/dashboard/DrilldownBreadcrumb.js";
+import ae from "../components/dashboard/PublishToStoreDialog.js";
 import "../components/dashboard/index.js";
-import { memo as c, useCallback as l, useEffect as u, useRef as ae, useState as d } from "react";
-import { useParams as f } from "react-router";
-import { AccessDenied as p } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as m } from "@burdenoff/fe-libs/shared/providers/shell";
-import { ArrowLeft as oe } from "lucide-react";
-import { Button as se, IllustratedEmptyState as h } from "@burdenoff/fe-libs/ui";
-import { Fragment as ce, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { memo as s, useCallback as c, useEffect as l, useRef as oe, useState as u } from "react";
+import { useParams as se } from "react-router";
+import { AccessDenied as ce } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as le } from "@burdenoff/fe-libs/shared/providers/shell";
+import { ArrowLeft as d } from "lucide-react";
+import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as p, IllustratedEmptyState as m } from "@burdenoff/fe-libs/ui";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/bigconsole/pages/DashboardViewPage.tsx
-var v = c(function() {
-	let { dashboardId: c } = f(), v = n(), { hasPermission: y, isLoading: le } = m(), ue = y(o.DASHBOARD_READ), de = y(o.DASHBOARD_UPDATE), b = y(o.DASHBOARD_EXPORT), x = y(o.DASHBOARD_PUBLISH), [S, C] = d(null), [fe, w] = d(!1), [pe, T] = d(!1), [me, E] = d(!1), [D, he] = d(!1), { isInDrilldown: O, getContextFromUrl: k, getDrilldownMetadata: A } = ee(), j = t((e) => e.currentDashboard), M = t((e) => e.setCurrentDashboard), N = t((e) => e.setGlobalFilterValue), P = t((e) => e.clearAllGlobalFilters), F = e((e) => e.widgets), I = e((e) => e.clipboardWidgetId), L = e((e) => e.clipboardAction), R = e((e) => e.clearClipboard), z = e((e) => e.selectWidget), { loading: ge, error: B, fetchDashboard: V, updateDashboard: H } = i(), { createWidget: U, deleteWidget: W, duplicateWidget: G, batchUpdatePositions: K, refetch: q } = r(S || void 0, c), { createPage: J, updatePage: Y, deletePage: X, reorderPages: Z } = a();
-	u(() => {
-		if (!c) {
+var v = s(function() {
+	let { dashboardId: s } = se(), v = n(), { t: y } = f(), { hasPermission: b, isLoading: ue } = le(), de = b(a.DASHBOARD_READ), fe = b(a.DASHBOARD_UPDATE), pe = b(a.DASHBOARD_EXPORT), me = b(a.DASHBOARD_PUBLISH), [x, S] = u(null), [he, C] = u(!1), [ge, w] = u(!1), [_e, T] = u(!1), [E, ve] = u(!1), { isInDrilldown: D, getContextFromUrl: O, getDrilldownMetadata: k } = ee(), A = t((e) => e.currentDashboard), j = t((e) => e.setCurrentDashboard), M = t((e) => e.setGlobalFilterValue), N = t((e) => e.clearAllGlobalFilters), P = e((e) => e.widgets), F = e((e) => e.clipboardWidgetId), I = e((e) => e.clipboardAction), L = e((e) => e.clearClipboard), R = e((e) => e.selectWidget), { loading: ye, error: z, fetchDashboard: B, updateDashboard: V } = i(), { createWidget: H, deleteWidget: U, duplicateWidget: W, batchUpdatePositions: G, refetch: K } = r(x || void 0, s), { createPage: q, updatePage: J, deletePage: Y, reorderPages: X } = te();
+	l(() => {
+		if (!s) {
 			v("/dashboards");
 			return;
 		}
-		return P(), T(!1), V(c).then((e) => {
-			e ? e.pages && e.pages.length > 0 && C(e.pages[0].id) : T(!0);
+		return N(), w(!1), B(s).then((e) => {
+			e ? e.pages && e.pages.length > 0 && S(e.pages[0].id) : w(!0);
 		}), () => {
-			M(null), P(), T(!1);
+			j(null), N(), w(!1);
 		};
 	}, [
-		c,
+		s,
 		v,
-		V,
-		M,
-		P
-	]), u(() => {
-		if (!O) return;
-		let e = k(), t = A();
+		B,
+		j,
+		N
+	]), l(() => {
+		if (!D) return;
+		let e = O(), t = k();
 		Object.entries(e).forEach(([e, t]) => {
-			N(`ctx_${e}`, t);
-		}), t.depth > 0 && (N("__drilldown_depth", t.depth), N("__drilldown_parent", t.parent), N("__drilldown_path", t.path)), Object.keys(e).length > 0 && console.debug("[DashboardViewPage] Loaded drilldown context:", {
+			M(`ctx_${e}`, t);
+		}), t.depth > 0 && (M("__drilldown_depth", t.depth), M("__drilldown_parent", t.parent), M("__drilldown_path", t.path)), Object.keys(e).length > 0 && console.debug("[DashboardViewPage] Loaded drilldown context:", {
 			context: e,
 			metadata: t
 		});
 	}, [
+		D,
 		O,
 		k,
-		A,
-		N
+		M
 	]);
-	let Q = ae(q);
-	Q.current = q, u(() => {
-		if (!D || !c) return;
+	let Z = oe(K);
+	Z.current = K, l(() => {
+		if (!E || !s) return;
 		let e = () => {
-			typeof document < "u" && document.visibilityState !== "visible" || t.getState().viewMode !== "edit" && (V(c, { silent: !0 }), Q.current());
+			typeof document < "u" && document.visibilityState !== "visible" || t.getState().viewMode !== "edit" && (B(s, { silent: !0 }), Z.current());
 		};
 		e();
 		let n = window.setInterval(e, 3500), r = () => {
@@ -70,60 +71,60 @@ var v = c(function() {
 			window.clearInterval(n), document.removeEventListener("visibilitychange", r);
 		};
 	}, [
-		D,
-		c,
-		V
+		E,
+		s,
+		B
 	]);
-	let _e = l(async () => {
-		if (c) {
-			w(!0);
+	let be = c(async () => {
+		if (s) {
+			C(!0);
 			try {
-				let e = Array.from(F.values());
-				e.length > 0 && await K(e.map((e) => ({
+				let e = Array.from(P.values());
+				e.length > 0 && await G(e.map((e) => ({
 					id: e.id,
 					position: e.position
-				}))), j && await H({
-					id: c,
-					name: j.name,
-					description: j.description
+				}))), A && await V({
+					id: s,
+					name: A.name,
+					description: A.description
 				});
 			} catch {} finally {
-				w(!1);
+				C(!1);
 			}
 		}
 	}, [
-		c,
-		F,
-		j,
-		K,
-		H
-	]), ve = l(() => {
+		s,
+		P,
+		A,
+		G,
+		V
+	]), xe = c(() => {
 		v("/dashboards");
-	}, [v]), ye = l((e) => {
-		C(e);
-	}, []), be = l(async () => {
-		let e = S || j?.pages?.[0]?.id;
-		if (!I || !c || !e) return;
-		let t = F.get(I);
+	}, [v]), Se = c((e) => {
+		S(e);
+	}, []), Ce = c(async () => {
+		let e = x || A?.pages?.[0]?.id;
+		if (!F || !s || !e) return;
+		let t = P.get(F);
 		if (!t) {
-			R();
+			L();
 			return;
 		}
 		let n = {
 			x: 0,
-			y: Array.from(F.values()).reduce((e, t) => {
+			y: Array.from(P.values()).reduce((e, t) => {
 				let n = (t.positionY ?? 0) + (t.positionHeight ?? 4);
 				return Math.max(e, n);
 			}, 0),
 			width: t.positionWidth ?? 4,
 			height: t.positionHeight ?? 4
-		}, r = L === "copy" ? `${t.title} (Copy)` : t.title, i = null;
+		}, r = I === "copy" ? y("bigconsole.dashboards.view.widgetCopyTitle", "{{title}} (Copy)", { title: t.title }) : t.title, i = null;
 		try {
-			i = await G(I, n, r);
+			i = await W(F, n, r);
 		} catch {}
-		i ||= await U({
+		i ||= await H({
 			pageId: e,
-			dashboardId: c,
+			dashboardId: s,
 			type: t.type,
 			title: r,
 			description: t.description,
@@ -135,108 +136,111 @@ var v = c(function() {
 			position: n,
 			refreshInterval: t.refreshInterval ?? void 0,
 			metadata: t.metadata
-		}), i && (z(i.id), L === "cut" && await W(I)), R();
+		}), i && (R(i.id), I === "cut" && await U(F)), L();
 	}, [
-		I,
-		L,
-		c,
-		S,
-		j,
 		F,
-		G,
-		U,
+		I,
+		s,
+		x,
+		A,
+		P,
 		W,
-		z,
-		R
-	]), xe = l(() => {
-		E(!0);
-	}, []), [Se, $] = d(!1), Ce = l(() => {
-		$(!0);
-	}, []), we = l(() => {
-		$(!1);
-	}, []), Te = l(() => {
-		E(!1);
-	}, []), Ee = l(async () => {
-		if (!j || !c) return;
-		let e = await J({
-			dashboardId: c,
-			name: `Page ${(j.pages?.length || 0) + 1}`
+		H,
+		U,
+		R,
+		L,
+		y
+	]), we = c(() => {
+		T(!0);
+	}, []), [Te, Q] = u(!1), Ee = c(() => {
+		Q(!0);
+	}, []), $ = c(() => {
+		Q(!1);
+	}, []), De = c(() => {
+		T(!1);
+	}, []), Oe = c(async () => {
+		if (!A || !s) return;
+		let e = await q({
+			dashboardId: s,
+			name: y("bigconsole.dashboards.view.pageName", "Page {{count}}", { count: (A.pages?.length || 0) + 1 })
 		});
-		e && (M({
-			...j,
-			pages: [...j.pages || [], e]
-		}), C(e.id));
+		e && (j({
+			...A,
+			pages: [...A.pages || [], e]
+		}), S(e.id));
 	}, [
+		A,
+		s,
 		j,
-		c,
-		M,
-		J
-	]), De = l(async (e, t) => {
-		j && await Y({
+		q,
+		y
+	]), ke = c(async (e, t) => {
+		A && await J({
 			id: e,
 			name: t
-		}) && M({
-			...j,
-			pages: j.pages?.map((n) => n.id === e ? {
+		}) && j({
+			...A,
+			pages: A.pages?.map((n) => n.id === e ? {
 				...n,
 				name: t
 			} : n)
 		});
 	}, [
+		A,
 		j,
-		M,
-		Y
-	]), Oe = l(async (e) => {
-		if (!j || !c) return;
-		let t = j.pages?.find((t) => t.id === e);
+		J
+	]), Ae = c(async (e) => {
+		if (!A || !s) return;
+		let t = A.pages?.find((t) => t.id === e);
 		if (!t) return;
-		let n = await J({
-			dashboardId: c,
-			name: `${t.name} (Copy)`
+		let n = await q({
+			dashboardId: s,
+			name: y("bigconsole.dashboards.view.pageCopyName", "{{name}} (Copy)", { name: t.name ?? "" })
 		});
-		n && (M({
-			...j,
-			pages: [...j.pages || [], n]
-		}), C(n.id));
+		n && (j({
+			...A,
+			pages: [...A.pages || [], n]
+		}), S(n.id));
 	}, [
+		A,
+		s,
 		j,
-		c,
-		M,
-		J
-	]), ke = l(async (e) => {
-		if (!(!j || (j.pages?.length || 0) <= 1) && await X(e)) {
-			let t = j.pages?.filter((t) => t.id !== e).map((e, t) => ({
+		q,
+		y
+	]), je = c(async (e) => {
+		if (!(!A || (A.pages?.length || 0) <= 1) && await Y(e)) {
+			let t = A.pages?.filter((t) => t.id !== e).map((e, t) => ({
 				...e,
 				order: t
 			}));
-			M({
-				...j,
+			j({
+				...A,
 				pages: t
-			}), S === e && C(t?.[0]?.id || null);
+			}), x === e && S(t?.[0]?.id || null);
 		}
 	}, [
+		A,
 		j,
-		M,
-		S,
-		X
-	]), Ae = l(async (e) => {
-		!j || !c || (M({
-			...j,
+		x,
+		Y
+	]), Me = c(async (e) => {
+		!A || !s || (j({
+			...A,
 			pages: e.map((e, t) => ({
 				...e,
 				order: t
 			}))
-		}), await Z(c, e.map((e) => e.id)));
+		}), await X(s, e.map((e) => e.id)));
 	}, [
+		A,
+		s,
 		j,
-		c,
-		M,
-		Z
+		X
 	]);
-	return le ? /* @__PURE__ */ g("div", {
+	return ue ? /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full",
 		children: /* @__PURE__ */ g("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" })
-	}) : ue ? B ? /* @__PURE__ */ g("div", {
+	}) : de ? z ? /* @__PURE__ */ g("div", {
 		className: "flex flex-col items-center justify-center h-full",
 		style: { padding: "var(--space-pagePadding)" },
 		children: /* @__PURE__ */ _("div", {
@@ -244,52 +248,52 @@ var v = c(function() {
 			children: [
 				/* @__PURE__ */ g("h3", {
 					className: "text-lg font-medium text-status-error-text mb-2",
-					children: "Error loading dashboard"
+					children: y("bigconsole.dashboards.view.errorTitle", "Error loading dashboard")
 				}),
 				/* @__PURE__ */ g("p", {
 					className: "text-sm text-text-secondary mb-4 break-words",
-					children: B.message
+					children: z.message
 				}),
 				/* @__PURE__ */ _("div", {
 					className: "flex flex-wrap gap-3",
 					children: [/* @__PURE__ */ g("button", {
 						type: "button",
-						onClick: () => V(c),
+						onClick: () => B(s),
 						className: "px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md",
-						children: "Retry"
+						children: y("bigconsole.dashboards.view.retry", "Retry")
 					}), /* @__PURE__ */ g("button", {
 						type: "button",
 						onClick: () => v("/dashboards"),
 						className: "px-4 py-2 text-sm font-medium text-text-secondary bg-bg-sunken hover:bg-bg-sunken/80 rounded-md",
-						children: "Back to Dashboards"
+						children: y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards")
 					})]
 				})
 			]
 		})
-	}) : pe ? /* @__PURE__ */ g("div", {
+	}) : ge ? /* @__PURE__ */ g("div", {
 		className: "flex flex-col items-center justify-center h-full",
 		style: { padding: "var(--space-pagePadding)" },
-		children: /* @__PURE__ */ g(h, {
+		children: /* @__PURE__ */ g(m, {
 			illustration: "empty-data",
-			title: "Dashboard not found",
-			description: /* @__PURE__ */ _(ce, { children: ["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-tertiary break-all",
-				children: ["ID: ", c]
+				children: y("bigconsole.dashboards.view.idLabel", "ID: {{id}}", { id: s ?? "" })
 			})] }),
 			action: /* @__PURE__ */ g("button", {
 				type: "button",
 				onClick: () => v("/dashboards"),
 				className: "px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md",
-				children: "Back to Dashboards"
+				children: y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards")
 			})
 		})
-	}) : ge || !j ? /* @__PURE__ */ g("div", {
+	}) : ye || !A ? /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full",
 		children: /* @__PURE__ */ _("div", {
 			className: "flex flex-col items-center gap-4",
 			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: "Loading dashboard..."
+				children: y("bigconsole.dashboards.view.loading", "Loading dashboard...")
 			})]
 		})
 	}) : /* @__PURE__ */ _("div", {
@@ -298,75 +302,75 @@ var v = c(function() {
 			/* @__PURE__ */ _("div", {
 				className: "flex items-center gap-3 px-3 py-2 border-b border-border-default bg-bg-surface flex-shrink-0",
 				children: [
-					/* @__PURE__ */ _(se, {
-						onClick: ve,
+					/* @__PURE__ */ _(p, {
+						onClick: xe,
 						variant: "ghost",
 						size: "sm",
-						title: "Back to Dashboards",
-						"aria-label": "Back to Dashboards",
-						children: [/* @__PURE__ */ g(oe, { className: "w-4 h-4 mr-2" }), "Back"]
+						title: y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards"),
+						"aria-label": y("bigconsole.dashboards.view.backToDashboards", "Back to Dashboards"),
+						children: [/* @__PURE__ */ g(d, { className: "w-4 h-4 mr-2" }), y("bigconsole.dashboards.view.back", "Back")]
 					}),
 					/* @__PURE__ */ g("h2", {
 						className: "text-sm font-semibold text-text-primary truncate",
-						children: j.name
+						children: A.name
 					}),
 					/* @__PURE__ */ g("div", {
 						className: "ml-auto flex-shrink-0",
-						children: /* @__PURE__ */ g(te, {
-							isLive: D,
-							onToggle: () => he((e) => !e)
+						children: /* @__PURE__ */ g(re, {
+							isLive: E,
+							onToggle: () => ve((e) => !e)
 						})
 					})
 				]
 			}),
-			O && /* @__PURE__ */ g(re, {
-				currentDashboardId: j.id,
-				currentDashboardName: j.name,
+			D && /* @__PURE__ */ g(ie, {
+				currentDashboardId: A.id,
+				currentDashboardName: A.name,
 				basePath: "/bigconsole/dashboards"
 			}),
 			/* @__PURE__ */ g("div", {
 				className: "flex-1 min-w-0 overflow-hidden",
-				children: /* @__PURE__ */ g(s, {
-					dashboardId: j.id,
-					pageId: S || j.pages?.[0]?.id,
-					title: j.name,
-					onPaste: be,
-					onSave: de ? _e : void 0,
-					isSaving: fe,
-					onExport: b ? xe : void 0,
-					onPublishTemplate: x ? Ce : void 0,
-					pages: (j.pages || []).map((e, t) => ({
+				children: /* @__PURE__ */ g(ne, {
+					dashboardId: A.id,
+					pageId: x || A.pages?.[0]?.id,
+					title: A.name,
+					onPaste: Ce,
+					onSave: fe ? be : void 0,
+					isSaving: he,
+					onExport: pe ? we : void 0,
+					onPublishTemplate: me ? Ee : void 0,
+					pages: (A.pages || []).map((e, t) => ({
 						id: e.id,
-						name: e.name || `Page ${t + 1}`,
+						name: e.name || y("bigconsole.dashboards.view.pageName", "Page {{count}}", { count: t + 1 }),
 						order: e.order ?? 0
 					})),
-					activePageId: S || j.pages?.[0]?.id,
-					onPageChange: ye,
-					onPageAdd: Ee,
-					onPageRename: De,
-					onPageDuplicate: Oe,
-					onPageDelete: ke,
-					onPagesReorder: Ae,
+					activePageId: x || A.pages?.[0]?.id,
+					onPageChange: Se,
+					onPageAdd: Oe,
+					onPageRename: ke,
+					onPageDuplicate: Ae,
+					onPageDelete: je,
+					onPagesReorder: Me,
 					showPageTabs: !0
 				})
 			}),
-			/* @__PURE__ */ g(ne, {
-				isOpen: me,
-				dashboardId: j.id,
-				dashboardName: j.name,
-				onClose: Te
+			/* @__PURE__ */ g(o, {
+				isOpen: _e,
+				dashboardId: A.id,
+				dashboardName: A.name,
+				onClose: De
 			}),
-			/* @__PURE__ */ g(ie, {
-				isOpen: Se,
-				dashboardId: j.id,
-				dashboardName: j.name,
-				dashboardDescription: j.description,
-				onClose: we
+			/* @__PURE__ */ g(ae, {
+				isOpen: Te,
+				dashboardId: A.id,
+				dashboardName: A.name,
+				dashboardDescription: A.description,
+				onClose: $
 			})
 		]
-	}) : /* @__PURE__ */ g(p, {
-		title: "Access Denied",
-		description: "You don't have permission to view this dashboard."
+	}) : /* @__PURE__ */ g(ce, {
+		title: y("bigconsole.dashboards.view.accessDeniedTitle", "Access Denied"),
+		description: y("bigconsole.dashboards.view.accessDeniedDescription", "You don't have permission to view this dashboard.")
 	});
 });
 //#endregion