@burdenoff/microfe-bigconsole 2026.805.2 → 2026.805.3

package/dist/bigconsole/components/widgets/DrilldownConfigPanel.js

@@ -2,20 +2,21 @@ import { ListDashboardsDocument as e } from "../../../generated/wspace-operation
 import "../../hooks/useDrilldown.js";
 import { memo as t, useCallback as n, useEffect as r, useMemo as i, useState as a } from "react";
 import { useApolloClient as o } from "@apollo/client/react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useI18n as s } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/DrilldownConfigPanel.tsx
-function u(e, t = "") {
+function d(e, t = "") {
 	if (!e || typeof e != "object") return [];
 	let n = [];
-	if (Array.isArray(e)) return e.length > 0 && typeof e[0] == "object" ? u(e[0], t) : [];
+	if (Array.isArray(e)) return e.length > 0 && typeof e[0] == "object" ? d(e[0], t) : [];
 	for (let [r, i] of Object.entries(e)) {
 		let e = t ? `${t}.${r}` : r;
-		n.push(e), i && typeof i == "object" && !Array.isArray(i) && t.split(".").length < 2 && n.push(...u(i, e));
+		n.push(e), i && typeof i == "object" && !Array.isArray(i) && t.split(".").length < 2 && n.push(...d(i, e));
 	}
 	return n;
 }
-var d = t(function({ widget: t, onChange: d, widgetData: f }) {
-	let p = o(), [m, h] = a(t.drilldown?.enabled ?? !1), [g, _] = a(t.drilldown?.targetDashboardId ?? ""), [v, y] = a(t.drilldown?.navigationMode ?? "MODAL"), [b, x] = a(t.drilldown?.passGlobalFilters ?? !0), [S, C] = a(t.drilldown?.maxDepth ?? 3), [w, T] = a(t.drilldown?.openIn ?? "same"), [E, D] = a(() => {
+var f = t(function({ widget: t, onChange: f, widgetData: p }) {
+	let { t: m } = s(), h = o(), [g, _] = a(t.drilldown?.enabled ?? !1), [v, y] = a(t.drilldown?.targetDashboardId ?? ""), [b, x] = a(t.drilldown?.navigationMode ?? "MODAL"), [S, C] = a(t.drilldown?.passGlobalFilters ?? !0), [w, T] = a(t.drilldown?.maxDepth ?? 3), [E, D] = a(t.drilldown?.openIn ?? "same"), [O, k] = a(() => {
 		let e = t.drilldown?.parameterMapping;
 		return e ? Object.entries(e).map(([e, t]) => ({
 			key: e,
@@ -24,54 +25,54 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 			key: "",
 			value: ""
 		}];
-	}), [O, k] = a([]), [A, j] = a(!1), [M, N] = a(null), P = i(() => {
-		if (!f) return [];
+	}), [A, j] = a([]), [M, N] = a(!1), [P, F] = a(null), I = i(() => {
+		if (!p) return [];
 		let e = [
 			"row",
 			"item",
 			"point",
 			"selectedData"
-		], t = u(f), n = [];
+		], t = d(p), n = [];
 		for (let r of t) for (let t of e) n.push(`{{${t}.${r}}}`);
 		return n.push("{{widget.value}}", "{{widget.title}}", "{{widget.id}}"), n.push("{{globals.vars.dateFrom}}", "{{globals.vars.dateTo}}"), [...new Set(n)];
-	}, [f]), F = n(() => {
+	}, [p]), L = n(() => {
 		let e = {};
-		for (let { key: t, value: n } of E) t.trim() && n.trim() && (e[t.trim()] = n.trim());
-		d?.({
-			enabled: m,
-			targetDashboardId: g,
-			navigationMode: v,
+		for (let { key: t, value: n } of O) t.trim() && n.trim() && (e[t.trim()] = n.trim());
+		f?.({
+			enabled: g,
+			targetDashboardId: v,
+			navigationMode: b,
 			parameterMapping: e,
-			passGlobalFilters: b,
-			maxDepth: S,
-			openIn: w
+			passGlobalFilters: S,
+			maxDepth: w,
+			openIn: E
 		});
 	}, [
-		m,
 		g,
 		v,
-		E,
 		b,
+		O,
 		S,
 		w,
-		d
+		E,
+		f
 	]);
 	r(() => {
-		F();
+		L();
 	}, [
-		m,
 		g,
 		v,
-		E,
 		b,
+		O,
 		S,
 		w,
-		F
+		E,
+		L
 	]), r(() => {
 		async function t() {
-			j(!0);
+			N(!0);
 			try {
-				k(((await p.query({
+				j(((await h.query({
 					query: e,
 					variables: { first: 100 },
 					fetchPolicy: "cache-first"
@@ -83,161 +84,161 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 					};
 				}));
 			} catch {} finally {
-				j(!1);
+				N(!1);
 			}
 		}
 		t();
-	}, [p]);
-	let I = n(() => {
-		D((e) => [...e, {
+	}, [h]);
+	let R = n(() => {
+		k((e) => [...e, {
 			key: "",
 			value: ""
 		}]);
-	}, []), L = n((e) => {
-		D((t) => t.filter((t, n) => n !== e));
-	}, []), R = n((e, t, n) => {
-		D((r) => r.map((r, i) => i === e ? {
+	}, []), z = n((e) => {
+		k((t) => t.filter((t, n) => n !== e));
+	}, []), B = n((e, t, n) => {
+		k((r) => r.map((r, i) => i === e ? {
 			...r,
 			[t]: n
 		} : r));
 	}, []);
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ u("div", {
 		className: "space-y-4 pb-8",
 		children: [
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: "flex items-center justify-between p-3 rounded-lg border border-border-default bg-bg-surface",
-				children: [/* @__PURE__ */ c("label", {
+				children: [/* @__PURE__ */ l("label", {
 					className: "text-sm font-medium text-text-primary",
-					children: "Enable Drilldown"
-				}), /* @__PURE__ */ c("button", {
+					children: m("bigconsole.widget.drilldown.enableLabel", "Enable Drilldown")
+				}), /* @__PURE__ */ l("button", {
 					type: "button",
 					role: "switch",
-					"aria-checked": m,
-					onClick: () => h(!m),
+					"aria-checked": g,
+					onClick: () => _(!g),
 					className: `
               relative inline-flex h-6 w-11 items-center rounded-full transition-colors cursor-pointer border
-              ${m ? "bg-action-primary-bg border-action-primary-bg" : "bg-gray-300 border-gray-400"}
+              ${g ? "bg-action-primary-bg border-action-primary-bg" : "bg-gray-300 border-gray-400"}
             `,
-					children: /* @__PURE__ */ c("span", { className: `
+					children: /* @__PURE__ */ l("span", { className: `
                 inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform
-                ${m ? "translate-x-6" : "translate-x-1"}
+                ${g ? "translate-x-6" : "translate-x-1"}
               ` })
 				})]
 			}),
-			m && /* @__PURE__ */ l(s, { children: [
-				/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+			g && /* @__PURE__ */ u(c, { children: [
+				/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: "Target Dashboard"
-				}), /* @__PURE__ */ l("select", {
-					value: g,
-					onChange: (e) => _(e.target.value),
-					disabled: A,
+					children: m("bigconsole.widget.drilldown.targetDashboardLabel", "Target Dashboard")
+				}), /* @__PURE__ */ u("select", {
+					value: v,
+					onChange: (e) => y(e.target.value),
+					disabled: M,
 					className: "w-full px-3 py-2 rounded-md border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-					children: [/* @__PURE__ */ c("option", {
+					children: [/* @__PURE__ */ l("option", {
 						value: "",
-						children: "Select a dashboard..."
-					}), O.filter((e) => e.id !== t.dashboardId).map((e) => /* @__PURE__ */ c("option", {
+						children: m("bigconsole.widget.drilldown.selectDashboard", "Select a dashboard...")
+					}), A.filter((e) => e.id !== t.dashboardId).map((e) => /* @__PURE__ */ l("option", {
 						value: e.id,
 						children: e.name
 					}, e.id))]
 				})] }),
-				/* @__PURE__ */ l("div", { children: [
-					/* @__PURE__ */ c("label", {
+				/* @__PURE__ */ u("div", { children: [
+					/* @__PURE__ */ l("label", {
 						className: "block text-sm font-medium text-text-primary mb-1",
-						children: "Navigation Mode"
+						children: m("bigconsole.widget.drilldown.navigationModeLabel", "Navigation Mode")
 					}),
-					/* @__PURE__ */ c("div", {
+					/* @__PURE__ */ l("div", {
 						className: "flex gap-2",
 						children: [
 							"MODAL",
 							"NEW_TAB",
 							"SAME_WINDOW"
-						].map((e) => /* @__PURE__ */ l("button", {
+						].map((e) => /* @__PURE__ */ u("button", {
 							type: "button",
-							onClick: () => y(e),
+							onClick: () => x(e),
 							className: `
                       flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors
-                      ${v === e ? "bg-action-primary-bg text-white" : "bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80"}
+                      ${b === e ? "bg-action-primary-bg text-white" : "bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80"}
                     `,
 							children: [
-								e === "MODAL" && "Modal",
-								e === "NEW_TAB" && "New Tab",
-								e === "SAME_WINDOW" && "Same Window"
+								e === "MODAL" && m("bigconsole.widget.drilldown.mode.modal", "Modal"),
+								e === "NEW_TAB" && m("bigconsole.widget.drilldown.mode.newTab", "New Tab"),
+								e === "SAME_WINDOW" && m("bigconsole.widget.drilldown.mode.sameWindow", "Same Window")
 							]
 						}, e))
 					}),
-					/* @__PURE__ */ l("p", {
+					/* @__PURE__ */ u("p", {
 						className: "text-xs text-text-tertiary mt-1",
 						children: [
-							v === "MODAL" && "Opens target dashboard in a modal overlay",
-							v === "NEW_TAB" && "Opens target dashboard in a new browser tab",
-							v === "SAME_WINDOW" && "Navigates to target dashboard in current window"
+							b === "MODAL" && m("bigconsole.widget.drilldown.modeHelp.modal", "Opens target dashboard in a modal overlay"),
+							b === "NEW_TAB" && m("bigconsole.widget.drilldown.modeHelp.newTab", "Opens target dashboard in a new browser tab"),
+							b === "SAME_WINDOW" && m("bigconsole.widget.drilldown.modeHelp.sameWindow", "Navigates to target dashboard in current window")
 						]
 					})
 				] }),
-				/* @__PURE__ */ l("div", { children: [
-					/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ u("div", { children: [
+					/* @__PURE__ */ u("div", {
 						className: "flex items-center justify-between mb-2",
-						children: [/* @__PURE__ */ c("label", {
+						children: [/* @__PURE__ */ l("label", {
 							className: "text-sm font-medium text-text-primary",
-							children: "Parameter Mappings"
-						}), /* @__PURE__ */ c("button", {
+							children: m("bigconsole.widget.drilldown.parameterMappingsLabel", "Parameter Mappings")
+						}), /* @__PURE__ */ l("button", {
 							type: "button",
-							onClick: I,
+							onClick: R,
 							className: "text-xs text-action-primary-text hover:underline",
-							children: "+ Add Parameter"
+							children: m("bigconsole.widget.drilldown.addParameter", "+ Add Parameter")
 						})]
 					}),
-					/* @__PURE__ */ c("div", {
+					/* @__PURE__ */ l("div", {
 						className: "space-y-2",
-						children: E.map((e, t) => /* @__PURE__ */ c("div", {
+						children: O.map((e, t) => /* @__PURE__ */ l("div", {
 							className: "relative",
-							children: /* @__PURE__ */ l("div", {
+							children: /* @__PURE__ */ u("div", {
 								className: "flex gap-2 items-center",
 								children: [
-									/* @__PURE__ */ c("input", {
+									/* @__PURE__ */ l("input", {
 										type: "text",
 										value: e.key,
-										onChange: (e) => R(t, "key", e.target.value),
-										placeholder: "Parameter name",
+										onChange: (e) => B(t, "key", e.target.value),
+										placeholder: m("bigconsole.widget.drilldown.parameterNamePlaceholder", "Parameter name"),
 										className: "flex-1 px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg"
 									}),
-									/* @__PURE__ */ c("span", {
+									/* @__PURE__ */ l("span", {
 										className: "text-text-tertiary",
 										children: "="
 									}),
-									/* @__PURE__ */ l("div", {
+									/* @__PURE__ */ u("div", {
 										className: "flex-1 relative",
-										children: [/* @__PURE__ */ c("input", {
+										children: [/* @__PURE__ */ l("input", {
 											type: "text",
 											value: e.value,
-											onChange: (e) => R(t, "value", e.target.value),
-											onFocus: () => N(t),
-											onBlur: () => setTimeout(() => N(null), 200),
-											placeholder: "{{row.field}} or static",
+											onChange: (e) => B(t, "value", e.target.value),
+											onFocus: () => F(t),
+											onBlur: () => setTimeout(() => F(null), 200),
+											placeholder: m("bigconsole.widget.drilldown.parameterValuePlaceholder", "{{row.field}} or static"),
 											className: "w-full px-2 py-1.5 rounded border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-1 focus:ring-action-primary-bg"
-										}), M === t && P.length > 0 && /* @__PURE__ */ c("div", {
+										}), P === t && I.length > 0 && /* @__PURE__ */ l("div", {
 											className: "absolute z-10 top-full left-0 right-0 mt-1 max-h-40 overflow-y-auto bg-bg-surface border border-border-default rounded-md shadow-lg",
-											children: P.slice(0, 10).map((e) => /* @__PURE__ */ c("button", {
+											children: I.slice(0, 10).map((e) => /* @__PURE__ */ l("button", {
 												type: "button",
 												onClick: () => {
-													R(t, "value", e), N(null);
+													B(t, "value", e), F(null);
 												},
 												className: "w-full px-3 py-1.5 text-left text-xs text-text-primary hover:bg-bg-sunken font-mono",
 												children: e
 											}, e))
 										})]
 									}),
-									E.length > 1 && /* @__PURE__ */ c("button", {
+									O.length > 1 && /* @__PURE__ */ l("button", {
 										type: "button",
-										onClick: () => L(t),
+										onClick: () => z(t),
 										className: "p-1 text-text-tertiary hover:text-status-error-text",
-										children: /* @__PURE__ */ c("svg", {
+										children: /* @__PURE__ */ l("svg", {
 											className: "w-4 h-4",
 											fill: "none",
 											stroke: "currentColor",
 											viewBox: "0 0 24 24",
-											children: /* @__PURE__ */ c("path", {
+											children: /* @__PURE__ */ l("path", {
 												strokeLinecap: "round",
 												strokeLinejoin: "round",
 												strokeWidth: 2,
@@ -249,77 +250,80 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 							})
 						}, t))
 					}),
-					/* @__PURE__ */ l("p", {
+					/* @__PURE__ */ u("p", {
 						className: "text-xs text-text-tertiary mt-2",
 						children: [
-							"Use ",
-							/* @__PURE__ */ c("code", {
+							m("bigconsole.widget.drilldown.paramHelp.usePrefix", "Use"),
+							" ",
+							/* @__PURE__ */ l("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{row.field}}"
 							}),
-							" for dynamic values or enter static text.",
-							/* @__PURE__ */ c("br", {}),
-							"Examples: ",
-							/* @__PURE__ */ c("code", {
+							" ",
+							m("bigconsole.widget.drilldown.paramHelp.useSuffix", "for dynamic values or enter static text."),
+							/* @__PURE__ */ l("br", {}),
+							m("bigconsole.widget.drilldown.paramHelp.examples", "Examples:"),
+							" ",
+							/* @__PURE__ */ l("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{row.category}}"
 							}),
 							",",
 							" ",
-							/* @__PURE__ */ c("code", {
+							/* @__PURE__ */ l("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{item.id}}"
 							}),
 							",",
 							" ",
-							/* @__PURE__ */ c("code", {
+							/* @__PURE__ */ l("code", {
 								className: "px-1 bg-bg-sunken rounded",
 								children: "{{globals.vars.dateFrom}}"
 							})
 						]
 					})
 				] }),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ u("div", {
 					className: "border-t border-border-default pt-4 mt-4",
 					children: [
-						/* @__PURE__ */ c("h4", {
+						/* @__PURE__ */ l("h4", {
 							className: "text-sm font-medium text-text-primary mb-3",
-							children: "Advanced Options"
+							children: m("bigconsole.widget.drilldown.advancedOptions", "Advanced Options")
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ u("div", {
 							className: "flex items-center justify-between p-2 rounded bg-bg-sunken mb-3",
-							children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+							children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
 								className: "text-sm text-text-primary",
-								children: "Pass Global Filters"
-							}), /* @__PURE__ */ c("p", {
+								children: m("bigconsole.widget.drilldown.passGlobalFiltersLabel", "Pass Global Filters")
+							}), /* @__PURE__ */ l("p", {
 								className: "text-xs text-text-tertiary",
-								children: "Include current dashboard filters in drilldown"
-							})] }), /* @__PURE__ */ c("button", {
+								children: m("bigconsole.widget.drilldown.passGlobalFiltersHelp", "Include current dashboard filters in drilldown")
+							})] }), /* @__PURE__ */ l("button", {
 								type: "button",
 								role: "switch",
-								"aria-checked": b,
-								onClick: () => x(!b),
+								"aria-checked": S,
+								onClick: () => C(!S),
 								className: `
                     relative inline-flex h-5 w-9 items-center rounded-full transition-colors cursor-pointer border
-                    ${b ? "bg-action-primary-bg border-action-primary-bg" : "bg-gray-300 border-gray-400"}
+                    ${S ? "bg-action-primary-bg border-action-primary-bg" : "bg-gray-300 border-gray-400"}
                   `,
-								children: /* @__PURE__ */ c("span", { className: `
+								children: /* @__PURE__ */ l("span", { className: `
                       inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform
-                      ${b ? "translate-x-5" : "translate-x-1"}
+                      ${S ? "translate-x-5" : "translate-x-1"}
                     ` })
 							})]
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ u("div", {
 							className: "flex items-center justify-between p-2 rounded bg-bg-sunken mb-3",
-							children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+							children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
 								className: "text-sm text-text-primary",
-								children: "Max Drilldown Depth"
-							}), /* @__PURE__ */ c("p", {
+								children: m("bigconsole.widget.drilldown.maxDepthLabel", "Max Drilldown Depth")
+							}), /* @__PURE__ */ l("p", {
 								className: "text-xs text-text-tertiary",
-								children: "Limit nested drilldown levels"
-							})] }), /* @__PURE__ */ c("select", {
-								value: S,
-								onChange: (e) => C(Number(e.target.value)),
+								children: m("bigconsole.widget.drilldown.maxDepthHelp", "Limit nested drilldown levels")
+							})] }), /* @__PURE__ */ l("select", {
+								value: w,
+								onChange: (e) => T(Number(e.target.value)),
 								className: "w-16 px-2 py-1 rounded border border-border-default bg-bg-surface text-text-primary text-sm",
 								children: [
 									1,
@@ -327,52 +331,52 @@ var d = t(function({ widget: t, onChange: d, widgetData: f }) {
 									3,
 									4,
 									5
-								].map((e) => /* @__PURE__ */ c("option", {
+								].map((e) => /* @__PURE__ */ l("option", {
 									value: e,
 									children: e
 								}, e))
 							})]
 						}),
-						v === "SAME_WINDOW" && /* @__PURE__ */ l("div", {
+						b === "SAME_WINDOW" && /* @__PURE__ */ u("div", {
 							className: "flex items-center justify-between p-2 rounded bg-bg-sunken",
-							children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+							children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
 								className: "text-sm text-text-primary",
-								children: "Open In"
-							}), /* @__PURE__ */ c("p", {
+								children: m("bigconsole.widget.drilldown.openInLabel", "Open In")
+							}), /* @__PURE__ */ l("p", {
 								className: "text-xs text-text-tertiary",
-								children: "Tab behavior for navigation"
-							})] }), /* @__PURE__ */ l("div", {
+								children: m("bigconsole.widget.drilldown.openInHelp", "Tab behavior for navigation")
+							})] }), /* @__PURE__ */ u("div", {
 								className: "flex gap-1",
-								children: [/* @__PURE__ */ c("button", {
+								children: [/* @__PURE__ */ l("button", {
 									type: "button",
-									onClick: () => T("same"),
+									onClick: () => D("same"),
 									className: `
                         px-2 py-1 rounded text-xs font-medium transition-colors
-                        ${w === "same" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default"}
+                        ${E === "same" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default"}
                       `,
-									children: "Same Tab"
-								}), /* @__PURE__ */ c("button", {
+									children: m("bigconsole.widget.drilldown.openIn.sameTab", "Same Tab")
+								}), /* @__PURE__ */ l("button", {
 									type: "button",
-									onClick: () => T("new"),
+									onClick: () => D("new"),
 									className: `
                         px-2 py-1 rounded text-xs font-medium transition-colors
-                        ${w === "new" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default"}
+                        ${E === "new" ? "bg-action-primary-bg text-white" : "bg-bg-surface text-text-secondary hover:bg-bg-sunken/80 border border-border-default"}
                       `,
-									children: "New Tab"
+									children: m("bigconsole.widget.drilldown.openIn.newTab", "New Tab")
 								})]
 							})]
 						})
 					]
 				})
 			] }),
-			!m && t.drilldown?.id && /* @__PURE__ */ c("div", {
+			!g && t.drilldown?.id && /* @__PURE__ */ l("div", {
 				className: "p-2 rounded bg-amber-100 text-amber-800 text-sm",
-				children: "Drilldown will be removed when you save changes."
+				children: m("bigconsole.widget.drilldown.removalWarning", "Drilldown will be removed when you save changes.")
 			})
 		]
 	});
 });
 //#endregion
-export { d as default };
+export { f as default };
 
 //# sourceMappingURL=DrilldownConfigPanel.js.map