@burdenoff/microfe-bigconsole 2026.1004.3 → 2026.1004.5

package/dist/bigconsole/components/dashboard/DashboardCanvas.js

@@ -13,7 +13,8 @@ import s from "../../hooks/useWidgetOperations.js";
 import c from "../../hooks/useDashboardOperations.js";
 import l from "../../hooks/useDashboardImageExport.js";
 import { BIGCONSOLE_PERMISSIONS as u } from "../../../constants/permissions.js";
-import { useInstalledWidgets as d } from "../../hooks/useInstalledWidgets.js";
+import { loadBigConsoleSettings as d } from "../../hooks/useBigConsoleSettings.js";
+import { useInstalledWidgets as f } from "../../hooks/useInstalledWidgets.js";
 import ee from "./DashboardGrid.js";
 import te from "./DashboardToolbar.js";
 import ne from "./GlobalFiltersBar/GlobalFiltersBar.js";
@@ -28,42 +29,42 @@ import se from "./WidgetPalette.js";
 import { calculatePositionFromDrop as ce, findNextAvailablePosition as le } from "../../utils/widgetPositioning.js";
 import { WidgetInspector as ue } from "../builder/WidgetInspector.js";
 import "../builder/index.js";
-import { memo as f, useCallback as p, useEffect as de, useMemo as fe, useRef as m, useState as h } from "react";
+import { memo as p, useCallback as m, useEffect as de, useMemo as fe, useRef as h, useState as g } from "react";
 import { usePermissions as pe } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Plus as me } from "lucide-react";
-import { Button as g } from "@burdenoff/fe-libs/ui";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { Button as _ } from "@burdenoff/fe-libs/ui";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 import { useI18n as he } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/bigconsole/components/dashboard/DashboardCanvas.tsx
-var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: ge, onSave: _e, isSaving: ve = !1, onExport: ye, onPublishTemplate: be, pages: x = [], activePageId: xe, onPageChange: Se, onPagesReorder: S, onPageAdd: Ce, onPageRename: we, onPageDuplicate: Te, onPageDelete: Ee, showFilters: De = !0, showPageTabs: Oe = !0, enableCrossFilter: ke = !0 }) {
-	let { t: C } = he(), w = m(null), T = m(null), [E, Ae] = h(1200), [je, D] = h(!1), [O, k] = h(null), [A, j] = h(!1), [Me, M] = h(null), [N, Ne] = h(null), P = t((e) => e.viewMode === "edit"), F = t((e) => e.currentDashboard), { updateDashboard: I } = c({ skipFetch: !0 }), { hasPermission: Pe } = pe(), Fe = Pe(u.DASHBOARD_UPDATE), Ie = N?.id === f ? N.value : F?.id === f ? F.visibility : void 0, Le = p(async (e) => {
-		let t = await I({
-			id: f,
+var b = p(function({ dashboardId: p, pageId: b, title: x, onPaste: ge, onSave: _e, isSaving: ve = !1, onExport: ye, onPublishTemplate: be, pages: S = [], activePageId: xe, onPageChange: Se, onPagesReorder: C, onPageAdd: Ce, onPageRename: we, onPageDuplicate: Te, onPageDelete: Ee, showFilters: De = !0, showPageTabs: Oe = !0, enableCrossFilter: ke = !0 }) {
+	let { t: w } = he(), T = h(null), E = h(null), [D, Ae] = g(1200), [je, O] = g(!1), [k, A] = g(null), [j, M] = g(!1), [Me, N] = g(null), [P, Ne] = g(null), F = t((e) => e.viewMode === "edit"), I = t((e) => e.currentDashboard), L = I?.pages.find((e) => e.id === b)?.gridColumns ?? 12, { updateDashboard: R } = c({ skipFetch: !0 }), { hasPermission: Pe } = pe(), Fe = Pe(u.DASHBOARD_UPDATE), Ie = P?.id === p ? P.value : I?.id === p ? I.visibility : void 0, Le = m(async (e) => {
+		let t = await R({
+			id: p,
 			visibility: e
 		});
 		if (!t) throw Error("The dashboard service did not accept the change.");
 		Ne({
-			id: f,
+			id: p,
 			value: t.visibility ?? e
 		});
-	}, [f, I]), { workspaceId: L, apiGatewayUrl: R, authToken: z } = r(), { installedWidgets: Re, loading: ze } = d({
-		workspaceId: L,
-		apiGatewayUrl: R,
-		authToken: z,
-		enabled: P
+	}, [p, R]), { workspaceId: z, apiGatewayUrl: B, authToken: V } = r(), { installedWidgets: Re, loading: ze } = f({
+		workspaceId: z,
+		apiGatewayUrl: B,
+		authToken: V,
+		enabled: F
 	}), { definitions: Be } = o({
-		workspaceId: L,
-		apiGatewayUrl: R,
-		authToken: z,
-		enabled: P
-	}), B = t((e) => e.zoomLevel), V = t((e) => e.sidebarCollapsed), H = t((e) => e.toggleSidebar), U = !V, W = t((e) => e.setGlobalFilterValues), Ve = p((e) => {
-		W(e);
-	}, [W]), { createWidget: G } = s(y, f, { skipFetch: !0 }), K = e((e) => e.widgets), q = fe(() => {
-		let e = Array.from(K.values());
-		return y ? e.filter((e) => e.pageId === y) : e;
-	}, [K, y]), He = e((e) => e.selectedWidgetId), J = e((e) => e.selectWidget), Y = e((e) => e.addWidget), X = e((e) => e.updateWidgetPosition), Z = e((e) => e.configPanelOpen), Ue = e((e) => e.closeConfigPanel);
+		workspaceId: z,
+		apiGatewayUrl: B,
+		authToken: V,
+		enabled: F
+	}), H = t((e) => e.zoomLevel), U = t((e) => e.sidebarCollapsed), W = t((e) => e.toggleSidebar), G = !U, K = t((e) => e.setGlobalFilterValues), Ve = m((e) => {
+		K(e);
+	}, [K]), { createWidget: q } = s(b, p, { skipFetch: !0 }), J = e((e) => e.widgets), Y = fe(() => {
+		let e = Array.from(J.values());
+		return b ? e.filter((e) => e.pageId === b) : e;
+	}, [J, b]), He = e((e) => e.selectedWidgetId), X = e((e) => e.selectWidget), Z = e((e) => e.addWidget), Q = e((e) => e.updateWidgetPosition), Ue = e((e) => e.configPanelOpen), We = e((e) => e.closeConfigPanel);
 	de(() => {
-		let e = w.current;
+		let e = T.current;
 		if (!e) return;
 		let t = () => {
 			Ae(e.offsetWidth);
@@ -74,93 +75,94 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: ge, onSave: _
 		}
 		return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
 	}, []);
-	let We = p((e) => {
+	let Ge = m((e) => {
 		e.forEach((e) => {
-			X(e.i, {
+			Q(e.i, {
 				x: e.x,
 				y: e.y,
 				width: e.w,
 				height: e.h
 			});
 		});
-	}, [X]), Ge = p((e) => {
-		J(e);
-	}, [J]), Q = p(async (e, t) => {
-		k(null);
-		let n = t?.definition || (e.type ? a(e.type) : null), r = {
-			width: n?.defaultSize?.width ?? 4,
-			height: n?.defaultSize?.height ?? 4
-		}, i;
-		if (t?.position) i = t.position;
+	}, [Q]), Ke = m((e) => {
+		X(e);
+	}, [X]), $ = m(async (e, t) => {
+		A(null);
+		let n = t?.definition || (e.type ? a(e.type) : null), r = d(), i = {
+			width: Math.min(n?.defaultSize?.width ?? 4, L),
+			height: r.defaultWidgetHeight
+		}, o;
+		if (t?.position) o = t.position;
 		else {
-			let { x: e, y: t } = le(q, r, { cols: 12 });
-			i = {
+			let { x: e, y: t } = le(Y, i, { cols: L });
+			o = {
 				x: e,
 				y: t,
-				width: r.width,
-				height: r.height
+				width: i.width,
+				height: i.height
 			};
 		}
-		let o = e;
-		if (y) {
-			let t = await G({
-				pageId: y,
-				dashboardId: f,
+		let s = e;
+		if (b) {
+			let t = await q({
+				pageId: b,
+				dashboardId: p,
 				type: e.type,
-				title: e.title || C("bigconsole.dashboards.canvas.untitledWidget", "Untitled Widget"),
+				title: e.title || w("bigconsole.dashboards.canvas.untitledWidget", "Untitled Widget"),
 				description: e.description,
 				renderer: e.renderer,
 				template: e.template,
 				config: e.config || {},
-				position: i,
-				refreshInterval: e.refreshInterval ?? void 0,
-				dataSinkId: o.dataSinkId,
-				parserId: o.parserId
+				position: o,
+				refreshInterval: e.refreshInterval ?? r.defaultRefreshInterval,
+				dataSinkId: s.dataSinkId,
+				parserId: s.parserId
 			});
 			if (t) {
-				J(t.id);
+				X(t.id);
 				return;
 			}
-			k(C("bigconsole.dashboards.canvas.widgetCreateError", "Could not create the widget. Check the connection and try again."));
+			A(w("bigconsole.dashboards.canvas.widgetCreateError", "Could not create the widget. Check the connection and try again."));
 			return;
 		}
-		let s = {
+		let c = {
 			id: crypto.randomUUID(),
-			dashboardId: f,
-			pageId: y || "local",
+			dashboardId: p,
+			pageId: b || "local",
 			type: e.type,
-			title: e.title || C("bigconsole.dashboards.canvas.untitledWidget", "Untitled Widget"),
+			title: e.title || w("bigconsole.dashboards.canvas.untitledWidget", "Untitled Widget"),
 			description: e.description,
 			renderer: e.renderer,
 			template: e.template,
-			refreshInterval: e.refreshInterval,
+			refreshInterval: e.refreshInterval ?? r.defaultRefreshInterval,
 			config: e.config || {},
-			position: i,
-			positionX: i.x,
-			positionY: i.y,
-			positionWidth: i.width,
-			positionHeight: i.height,
-			dataSinkId: o.dataSinkId,
-			parserId: o.parserId,
+			position: o,
+			positionX: o.x,
+			positionY: o.y,
+			positionWidth: o.width,
+			positionHeight: o.height,
+			dataSinkId: s.dataSinkId,
+			parserId: s.parserId,
 			translations: [],
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			updatedAt: (/* @__PURE__ */ new Date()).toISOString()
 		};
-		Y(s), J(s.id);
+		Z(c), X(c.id);
 	}, [
-		f,
-		y,
-		G,
-		Y,
-		J,
+		p,
+		b,
 		q,
-		C
-	]), Ke = p((e) => {
-		j(!0), M(e);
-	}, []), qe = p(() => {
-		j(!1), M(null);
-	}, []), Je = p((e) => {
-		e.preventDefault(), j(!1), M(null);
+		Z,
+		X,
+		Y,
+		L,
+		w
+	]), qe = m((e) => {
+		M(!0), N(e);
+	}, []), Je = m(() => {
+		M(!1), N(null);
+	}, []), Ye = m((e) => {
+		e.preventDefault(), M(!1), N(null);
 		try {
 			let t = e.dataTransfer.getData("application/json");
 			if (!t) return;
@@ -174,149 +176,153 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: ge, onSave: _
 				defaultConfig: r.defaultConfig,
 				defaultSize: r.defaultSize || i.defaultSize
 			});
-			let s = w.current?.getBoundingClientRect();
+			let s = T.current?.getBoundingClientRect();
 			if (!s) return;
 			let c = {
-				width: i.defaultSize.width,
-				height: i.defaultSize.height
-			}, { x: l, y: u } = ce(e.clientX, e.clientY, s, E, c, { cols: 12 }), d = {
+				width: Math.min(i.defaultSize.width, L),
+				height: d().defaultWidgetHeight
+			}, { x: l, y: u } = ce(e.clientX, e.clientY, s, D, c, { cols: L }), f = {
 				x: l,
 				y: u,
 				width: c.width,
 				height: c.height
 			};
-			Q({
+			$({
 				type: r.type,
 				title: r.name || i.name,
 				config: r.defaultConfig || i.defaultConfig
 			}, {
-				position: d,
+				position: f,
 				definition: o
 			});
 		} catch (e) {
 			console.error("Failed to handle widget drop:", e);
 		}
-	}, [E, Q]), Ye = p((e) => {
+	}, [
+		D,
+		$,
+		L
+	]), Xe = m((e) => {
 		e.preventDefault(), e.dataTransfer.dropEffect = "copy";
-	}, []), Xe = p((e, t) => {
+	}, []), Ze = m((e, t) => {
 		let n = t || a(e);
-		Q({
+		$({
 			type: e,
 			title: n.name,
 			config: n.defaultConfig
 		});
-	}, [Q]), Ze = p(() => {
-		H();
-	}, [H]), Qe = p(() => {
-		V && H(), window.requestAnimationFrame(() => {
-			let e = C("bigconsole.dashboards.widgetPalette.searchPlaceholder", "Search widgets...");
+	}, [$]), Qe = m(() => {
+		W();
+	}, [W]), $e = m(() => {
+		U && W(), window.requestAnimationFrame(() => {
+			let e = w("bigconsole.dashboards.widgetPalette.searchPlaceholder", "Search widgets...");
 			document.querySelector(`input[placeholder="${e}"]`)?.focus();
 		});
 	}, [
-		V,
-		H,
-		C
-	]), { exportPNG: $e, exportPDF: $, isExporting: et } = l({
-		containerRef: T,
-		name: b || "dashboard"
+		U,
+		W,
+		w
+	]), { exportPNG: et, exportPDF: tt, isExporting: nt } = l({
+		containerRef: E,
+		name: x || "dashboard"
 	});
-	return /* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ y("div", {
 		className: "flex flex-col h-full min-w-0 overflow-hidden",
 		children: [
-			/* @__PURE__ */ _(te, {
-				dashboardId: f,
-				title: b,
-				onAddWidget: Qe,
-				onTogglePalette: Ze,
-				isPaletteOpen: U,
+			/* @__PURE__ */ v(te, {
+				dashboardId: p,
+				title: x,
+				onAddWidget: $e,
+				onTogglePalette: Qe,
+				isPaletteOpen: G,
 				onPaste: ge,
 				onSave: _e,
 				isSaving: ve,
 				onExport: ye,
 				onPublishTemplate: be,
-				onExportImage: p(() => {
-					$e();
-				}, [$e]),
-				onExportPdf: p(() => {
-					$();
-				}, [$]),
-				isExportingImage: et,
-				onShare: () => D(!0)
+				onExportImage: m(() => {
+					et();
+				}, [et]),
+				onExportPdf: m(() => {
+					tt();
+				}, [tt]),
+				isExportingImage: nt,
+				onShare: () => O(!0)
 			}),
-			O && /* @__PURE__ */ _("div", {
+			k && /* @__PURE__ */ v("div", {
 				role: "alert",
 				className: "mx-card-padding mt-control-gap flex-shrink-0",
-				children: /* @__PURE__ */ _(i, {
+				children: /* @__PURE__ */ v(i, {
 					tone: "danger",
 					padding: "compact",
 					headingLevel: 3,
 					"data-testid": "widget-create-error",
 					title: "Widget not created",
-					description: O,
-					actions: /* @__PURE__ */ _(g, {
+					description: k,
+					actions: /* @__PURE__ */ v(_, {
 						variant: "outline",
 						size: "sm",
-						onClick: () => k(null),
-						children: C("bigconsole.dashboards.canvas.dismiss", "Dismiss")
+						onClick: () => A(null),
+						children: w("bigconsole.dashboards.canvas.dismiss", "Dismiss")
 					})
 				})
 			}),
-			/* @__PURE__ */ _(ie, {
-				widgets: q,
-				isEditMode: P
+			/* @__PURE__ */ v(ie, {
+				widgets: Y,
+				isEditMode: F
 			}),
-			/* @__PURE__ */ _(re, {
-				widgets: q,
-				isEditMode: P
+			/* @__PURE__ */ v(re, {
+				widgets: Y,
+				isEditMode: F
 			}),
-			De && /* @__PURE__ */ _(ne, {
-				dashboardId: f,
+			De && /* @__PURE__ */ v(ne, {
+				dashboardId: p,
 				onFilterChange: Ve,
 				collapsible: !0
 			}),
-			Oe && (P || x.length > 0) && /* @__PURE__ */ _(ae, {
-				pages: x,
-				activePageId: xe || x[0]?.id,
-				editable: P,
+			Oe && (F || S.length > 0) && /* @__PURE__ */ v(ae, {
+				pages: S,
+				activePageId: xe || S[0]?.id,
+				editable: F,
 				onPageSelect: Se || (() => {}),
-				onPagesReorder: S ? (e) => {
-					S(e.map((e) => x.find((t) => t.id === e)).filter(Boolean));
+				onPagesReorder: C ? (e) => {
+					C(e.map((e) => S.find((t) => t.id === e)).filter(Boolean));
 				} : void 0,
 				onPageCreate: Ce,
 				onPageRename: we,
 				onPageDuplicate: Te,
 				onPageDelete: Ee
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ y("div", {
 				"data-testid": "dashboard-canvas-panes",
-				className: `flex flex-1 min-w-0 overflow-hidden ${Z ? "lg:mr-[var(--bc-inspector-width,420px)]" : ""}`,
-				children: [P && /* @__PURE__ */ _(se, {
-					isOpen: U,
-					onClose: Ze,
-					onWidgetSelect: Xe,
-					onDragStart: Ke,
-					onDragEnd: qe,
+				className: `flex flex-1 min-w-0 overflow-hidden ${Ue ? "lg:mr-[var(--bc-inspector-width,420px)]" : ""}`,
+				children: [F && /* @__PURE__ */ v(se, {
+					isOpen: G,
+					onClose: Qe,
+					onWidgetSelect: Ze,
+					onDragStart: qe,
+					onDragEnd: Je,
 					installedWidgets: Re,
 					installedWidgetsLoading: ze,
 					definitions: Be
-				}), /* @__PURE__ */ v("div", {
-					ref: w,
+				}), /* @__PURE__ */ y("div", {
+					ref: T,
 					role: "region",
 					"aria-label": "Dashboard board",
 					"data-section-emphasis": "primary",
 					"data-testid": "dashboard-board",
 					className: "relative min-w-0 flex-1 overflow-auto border-2 border-transparent bg-bg-sunken motion-safe:transition-[border-color,background-color]",
-					onDrop: Je,
-					onDragOver: Ye,
+					onDrop: Ye,
+					onDragOver: Xe,
 					onClick: () => {
-						P && J(null);
+						F && X(null);
 					},
-					style: A ? {
+					style: j ? {
 						borderStyle: "dashed",
 						borderColor: "var(--color-action-primary-bg)",
 						backgroundColor: "var(--color-bg-accentSubtle)"
 					} : void 0,
-					children: [A && /* @__PURE__ */ _("div", {
+					children: [j && /* @__PURE__ */ v("div", {
 						style: {
 							position: "absolute",
 							top: "50%",
@@ -330,65 +336,66 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: ge, onSave: _
 							pointerEvents: "none",
 							zIndex: 100
 						},
-						children: /* @__PURE__ */ v("p", {
+						children: /* @__PURE__ */ y("p", {
 							style: {
 								fontSize: "var(--font-size-body-md)",
 								color: "var(--color-text-primary)",
 								margin: 0
 							},
 							children: [
-								C("bigconsole.dashboards.canvas.dropToAddBefore", "Drop to add"),
+								w("bigconsole.dashboards.canvas.dropToAddBefore", "Drop to add"),
 								" ",
-								/* @__PURE__ */ _("strong", { children: Me }),
+								/* @__PURE__ */ v("strong", { children: Me }),
 								" ",
-								C("bigconsole.dashboards.canvas.dropToAddAfter", "widget")
+								w("bigconsole.dashboards.canvas.dropToAddAfter", "widget")
 							]
 						})
-					}), /* @__PURE__ */ _("div", {
-						ref: T,
+					}), /* @__PURE__ */ v("div", {
+						ref: E,
 						className: "min-h-full origin-top-left transition-transform",
 						style: {
-							transform: `scale(${B / 100})`,
-							width: `${100 / (B / 100)}%`
+							transform: `scale(${H / 100})`,
+							width: `${100 / (H / 100)}%`
 						},
-						children: q.length > 0 ? /* @__PURE__ */ _(n, {
+						children: Y.length > 0 ? /* @__PURE__ */ v(n, {
 							enabled: ke,
 							onCrossFilter: (e) => {},
-							children: /* @__PURE__ */ _(ee, {
-								widgets: q,
-								isEditMode: P,
-								width: E,
-								onLayoutChange: We,
-								onWidgetSelect: Ge,
+							children: /* @__PURE__ */ v(ee, {
+								widgets: Y,
+								cols: L,
+								isEditMode: F,
+								width: D,
+								onLayoutChange: Ge,
+								onWidgetSelect: Ke,
 								selectedWidgetId: He
 							})
-						}) : /* @__PURE__ */ _("div", {
+						}) : /* @__PURE__ */ v("div", {
 							className: "flex min-h-[min(400px,60vh)] items-center justify-center p-card-padding",
-							children: /* @__PURE__ */ _(i, {
+							children: /* @__PURE__ */ v(i, {
 								headingLevel: 3,
 								className: "w-full max-w-md",
 								"data-testid": "dashboard-empty-board",
 								headerClassName: "mb-form-gap",
-								title: C("bigconsole.dashboards.canvas.noWidgetsTitle", "No widgets yet"),
-								description: C("bigconsole.dashboards.canvas.noWidgetsDescription", "Add widgets to build your dashboard. Click the \"Add Widget\" button to get started."),
-								children: P && /* @__PURE__ */ v(g, {
-									onClick: Qe,
-									children: [/* @__PURE__ */ _(me, { className: "size-4" }), C("bigconsole.dashboards.canvas.addWidget", "Add Widget")]
+								title: w("bigconsole.dashboards.canvas.noWidgetsTitle", "No widgets yet"),
+								description: w("bigconsole.dashboards.canvas.noWidgetsDescription", "Add widgets to build your dashboard. Click the \"Add Widget\" button to get started."),
+								children: F && /* @__PURE__ */ y(_, {
+									onClick: $e,
+									children: [/* @__PURE__ */ v(me, { className: "size-4" }), w("bigconsole.dashboards.canvas.addWidget", "Add Widget")]
 								})
 							})
 						})
 					})]
 				})]
 			}),
-			/* @__PURE__ */ _(ue, {
-				isOpen: Z,
-				onClose: Ue
+			/* @__PURE__ */ v(ue, {
+				isOpen: Ue,
+				onClose: We
 			}),
-			/* @__PURE__ */ _(oe, {
-				dashboardId: f,
-				dashboardName: b || C("bigconsole.dashboards.canvas.dashboardFallbackName", "Dashboard"),
+			/* @__PURE__ */ v(oe, {
+				dashboardId: p,
+				dashboardName: x || w("bigconsole.dashboards.canvas.dashboardFallbackName", "Dashboard"),
 				isOpen: je,
-				onClose: () => D(!1),
+				onClose: () => O(!1),
 				visibility: Ie,
 				onVisibilityChange: Le,
 				canChangeVisibility: Fe
@@ -397,6 +404,6 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: ge, onSave: _
 	});
 });
 //#endregion
-export { y as default };
+export { b as default };
 
 //# sourceMappingURL=DashboardCanvas.js.map