@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/components/dashboard/GlobalFiltersBar/FilterEditor.js

@@ -1,7 +1,8 @@
-import { useEffect as e, useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useEffect as e, useMemo as t, useState as n } from "react";
+import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/GlobalFiltersBar/FilterEditor.tsx
-var i = (e) => ({
+var o = (e) => ({
 	bgPrimary: e ? "#1f2937" : "#ffffff",
 	bgSecondary: e ? "#374151" : "#f9fafb",
 	textPrimary: e ? "#f9fafb" : "#111827",
@@ -14,41 +15,15 @@ var i = (e) => ({
 	textTertiary: e ? "#6b7280" : "#9ca3af",
 	statusErrorText: "#dc2626",
 	backdropBg: "rgba(0, 0, 0, 0.5)"
-}), a = [
-	{
-		value: "CATEGORY",
-		label: "Category",
-		description: "Selection from predefined categories"
-	},
-	{
-		value: "DATE_RANGE",
-		label: "Date Range",
-		description: "Start and end date selection"
-	},
-	{
-		value: "NUMERIC_RANGE",
-		label: "Numeric Range",
-		description: "Min and max number values"
-	},
-	{
-		value: "TEXT_SEARCH",
-		label: "Text Search",
-		description: "Free text search input"
-	},
-	{
-		value: "CUSTOM",
-		label: "Custom",
-		description: "Custom filter configuration"
-	}
-];
-function o({ filter: o, onSave: s, onClose: c }) {
-	let [l, u] = t(o?.name || ""), [d, f] = t(o?.type || "CATEGORY"), [p, m] = t(o?.isRequired || !1), [h, g] = t(o?.config?.options || [{
+});
+function s({ filter: s, onSave: c, onClose: l }) {
+	let { t: u } = r(), [d, f] = n(s?.name || ""), [p, m] = n(s?.type || "CATEGORY"), [h, g] = n(s?.isRequired || !1), [_, v] = n(s?.config?.options || [{
 		value: "",
 		label: ""
-	}]), [_, v] = t(o?.config?.placeholder || ""), [y, b] = t(!1);
+	}]), [y, b] = n(s?.config?.placeholder || ""), [x, S] = n(!1);
 	e(() => {
 		let e = () => {
-			b(document.documentElement.classList.contains("dark"));
+			S(document.documentElement.classList.contains("dark"));
 		};
 		e();
 		let t = new MutationObserver(e);
@@ -57,28 +32,54 @@ function o({ filter: o, onSave: s, onClose: c }) {
 			attributeFilter: ["class"]
 		}), () => t.disconnect();
 	}, []);
-	let x = i(y), S = !!o, C = () => {
-		g([...h, {
+	let C = o(x), w = !!s, T = t(() => [
+		{
+			value: "CATEGORY",
+			label: u("bigconsole.filters.editor.type.category.label", "Category"),
+			description: u("bigconsole.filters.editor.type.category.description", "Selection from predefined categories")
+		},
+		{
+			value: "DATE_RANGE",
+			label: u("bigconsole.filters.editor.type.dateRange.label", "Date Range"),
+			description: u("bigconsole.filters.editor.type.dateRange.description", "Start and end date selection")
+		},
+		{
+			value: "NUMERIC_RANGE",
+			label: u("bigconsole.filters.editor.type.numericRange.label", "Numeric Range"),
+			description: u("bigconsole.filters.editor.type.numericRange.description", "Min and max number values")
+		},
+		{
+			value: "TEXT_SEARCH",
+			label: u("bigconsole.filters.editor.type.textSearch.label", "Text Search"),
+			description: u("bigconsole.filters.editor.type.textSearch.description", "Free text search input")
+		},
+		{
+			value: "CUSTOM",
+			label: u("bigconsole.filters.editor.type.custom.label", "Custom"),
+			description: u("bigconsole.filters.editor.type.custom.description", "Custom filter configuration")
+		}
+	], [u]), E = () => {
+		v([..._, {
 			value: "",
 			label: ""
 		}]);
-	}, w = (e) => {
-		g(h.filter((t, n) => n !== e));
-	}, T = (e, t, n) => {
-		g(h.map((r, i) => i === e ? {
+	}, D = (e) => {
+		v(_.filter((t, n) => n !== e));
+	}, O = (e, t, n) => {
+		v(_.map((r, i) => i === e ? {
 			...r,
 			[t]: n
 		} : r));
-	}, E = () => {
+	}, k = () => {
 		let e = {};
-		d === "CATEGORY" && (e.options = h.filter((e) => e.value && e.label)), _ && (e.placeholder = _), s({
-			name: l,
-			type: d,
+		p === "CATEGORY" && (e.options = _.filter((e) => e.value && e.label)), y && (e.placeholder = y), c({
+			name: d,
+			type: p,
 			config: e,
-			isRequired: p
+			isRequired: h
 		});
-	}, D = l.trim() !== "" && (d !== "CATEGORY" || h.some((e) => e.value && e.label));
-	return /* @__PURE__ */ n("div", {
+	}, A = d.trim() !== "" && (p !== "CATEGORY" || _.some((e) => e.value && e.label));
+	return /* @__PURE__ */ i("div", {
 		style: {
 			position: "fixed",
 			top: 0,
@@ -87,134 +88,134 @@ function o({ filter: o, onSave: s, onClose: c }) {
 			bottom: 0,
 			width: "100vw",
 			height: "100vh",
-			backgroundColor: x.backdropBg,
+			backgroundColor: C.backdropBg,
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
 			zIndex: 1e4,
 			isolation: "isolate"
 		},
-		onClick: c,
-		children: /* @__PURE__ */ r("div", {
+		onClick: l,
+		children: /* @__PURE__ */ a("div", {
 			style: {
-				width: "480px",
-				maxWidth: "90vw",
+				width: "100%",
+				maxWidth: "min(480px, calc(100vw - 2rem))",
 				maxHeight: "80vh",
-				backgroundColor: x.bgPrimary,
+				backgroundColor: C.bgPrimary,
 				borderRadius: "8px",
-				boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+				boxShadow: "var(--shadow-elevation-3)",
 				overflow: "hidden",
 				position: "relative"
 			},
 			onClick: (e) => e.stopPropagation(),
 			children: [
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ a("div", {
 					style: {
 						padding: "16px 20px",
-						borderBottom: `1px solid ${x.borderDefault}`,
+						borderBottom: `1px solid ${C.borderDefault}`,
 						display: "flex",
 						alignItems: "center",
 						justifyContent: "space-between",
-						backgroundColor: x.bgPrimary
+						backgroundColor: C.bgPrimary
 					},
-					children: [/* @__PURE__ */ n("h3", {
+					children: [/* @__PURE__ */ i("h3", {
 						style: {
 							margin: 0,
 							fontSize: "16px",
 							fontWeight: 600,
-							color: x.textPrimary
+							color: C.textPrimary
 						},
-						children: S ? "Edit Filter" : "Add Filter"
-					}), /* @__PURE__ */ n("button", {
-						onClick: c,
+						children: w ? u("bigconsole.filters.editor.title.edit", "Edit Filter") : u("bigconsole.filters.editor.title.add", "Add Filter")
+					}), /* @__PURE__ */ i("button", {
+						onClick: l,
 						style: {
 							background: "none",
 							border: "none",
 							fontSize: "20px",
 							cursor: "pointer",
-							color: x.textSecondary,
+							color: C.textSecondary,
 							lineHeight: 1
 						},
 						children: "×"
 					})]
 				}),
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ a("div", {
 					style: {
 						padding: "20px",
 						overflowY: "auto",
 						maxHeight: "calc(80vh - 130px)",
-						backgroundColor: x.bgPrimary
+						backgroundColor: C.bgPrimary
 					},
 					children: [
-						/* @__PURE__ */ r("div", {
+						/* @__PURE__ */ a("div", {
 							style: { marginBottom: "16px" },
-							children: [/* @__PURE__ */ n("label", {
+							children: [/* @__PURE__ */ i("label", {
 								style: {
 									display: "block",
 									marginBottom: "6px",
 									fontSize: "13px",
 									fontWeight: 500,
-									color: x.textPrimary
+									color: C.textPrimary
 								},
-								children: "Filter Name *"
-							}), /* @__PURE__ */ n("input", {
+								children: u("bigconsole.filters.editor.field.name.label", "Filter Name *")
+							}), /* @__PURE__ */ i("input", {
 								type: "text",
-								value: l,
-								onChange: (e) => u(e.target.value),
-								placeholder: "e.g., Status, Date Range, Category",
+								value: d,
+								onChange: (e) => f(e.target.value),
+								placeholder: u("bigconsole.filters.editor.field.name.placeholder", "e.g., Status, Date Range, Category"),
 								style: {
 									width: "100%",
 									padding: "10px 12px",
-									border: `1px solid ${x.borderDefault}`,
+									border: `1px solid ${C.borderDefault}`,
 									borderRadius: "6px",
 									fontSize: "14px",
 									boxSizing: "border-box",
-									backgroundColor: x.bgPrimary,
-									color: x.textPrimary
+									backgroundColor: C.bgPrimary,
+									color: C.textPrimary
 								}
 							})]
 						}),
-						!S && /* @__PURE__ */ r("div", {
+						!w && /* @__PURE__ */ a("div", {
 							style: { marginBottom: "16px" },
-							children: [/* @__PURE__ */ n("label", {
+							children: [/* @__PURE__ */ i("label", {
 								style: {
 									display: "block",
 									marginBottom: "8px",
 									fontSize: "13px",
 									fontWeight: 500,
-									color: x.textPrimary
+									color: C.textPrimary
 								},
-								children: "Filter Type *"
-							}), /* @__PURE__ */ n("div", {
+								children: u("bigconsole.filters.editor.field.type.label", "Filter Type *")
+							}), /* @__PURE__ */ i("div", {
 								style: {
 									display: "grid",
 									gridTemplateColumns: "repeat(2, 1fr)",
 									gap: "10px"
 								},
-								children: a.map((e) => /* @__PURE__ */ r("button", {
-									onClick: () => f(e.value),
+								children: T.map((e) => /* @__PURE__ */ a("button", {
+									onClick: () => m(e.value),
 									type: "button",
 									style: {
 										padding: "12px",
 										textAlign: "left",
-										backgroundColor: d === e.value ? x.actionPrimaryBgSubtle : x.bgSecondary,
-										border: `2px solid ${d === e.value ? x.actionPrimaryBg : x.borderDefault}`,
+										backgroundColor: p === e.value ? C.actionPrimaryBgSubtle : C.bgSecondary,
+										border: `2px solid ${p === e.value ? C.actionPrimaryBg : C.borderDefault}`,
 										borderRadius: "6px",
 										cursor: "pointer",
 										transition: "all 0.2s ease",
 										minHeight: "60px"
 									},
-									children: [/* @__PURE__ */ n("div", {
+									children: [/* @__PURE__ */ i("div", {
 										style: {
 											fontWeight: 500,
 											fontSize: "13px",
-											color: x.textPrimary
+											color: C.textPrimary
 										},
 										children: e.label
-									}), /* @__PURE__ */ n("div", {
+									}), /* @__PURE__ */ i("div", {
 										style: {
 											fontSize: "11px",
-											color: x.textSecondary,
+											color: C.textSecondary,
 											marginTop: "4px",
 											lineHeight: "1.3"
 										},
@@ -223,186 +224,186 @@ function o({ filter: o, onSave: s, onClose: c }) {
 								}, e.value))
 							})]
 						}),
-						d === "CATEGORY" && /* @__PURE__ */ r("div", {
+						p === "CATEGORY" && /* @__PURE__ */ a("div", {
 							style: { marginBottom: "16px" },
-							children: [/* @__PURE__ */ n("label", {
+							children: [/* @__PURE__ */ i("label", {
 								style: {
 									display: "block",
 									marginBottom: "8px",
 									fontSize: "13px",
 									fontWeight: 500,
-									color: x.textPrimary
+									color: C.textPrimary
 								},
-								children: "Options"
-							}), /* @__PURE__ */ r("div", {
+								children: u("bigconsole.filters.editor.field.options.label", "Options")
+							}), /* @__PURE__ */ a("div", {
 								style: {
 									display: "flex",
 									flexDirection: "column",
 									gap: "8px"
 								},
-								children: [h.map((e, t) => /* @__PURE__ */ r("div", {
+								children: [_.map((e, t) => /* @__PURE__ */ a("div", {
 									style: {
 										display: "flex",
 										gap: "8px",
 										alignItems: "center"
 									},
 									children: [
-										/* @__PURE__ */ n("input", {
+										/* @__PURE__ */ i("input", {
 											type: "text",
 											value: e.value,
-											onChange: (e) => T(t, "value", e.target.value),
-											placeholder: "Value",
+											onChange: (e) => O(t, "value", e.target.value),
+											placeholder: u("bigconsole.filters.editor.field.options.valuePlaceholder", "Value"),
 											style: {
 												flex: 1,
 												padding: "8px 10px",
-												border: `1px solid ${x.borderDefault}`,
+												border: `1px solid ${C.borderDefault}`,
 												borderRadius: "4px",
 												fontSize: "13px",
 												boxSizing: "border-box",
-												backgroundColor: x.bgPrimary,
-												color: x.textPrimary
+												backgroundColor: C.bgPrimary,
+												color: C.textPrimary
 											}
 										}),
-										/* @__PURE__ */ n("input", {
+										/* @__PURE__ */ i("input", {
 											type: "text",
 											value: e.label,
-											onChange: (e) => T(t, "label", e.target.value),
-											placeholder: "Label",
+											onChange: (e) => O(t, "label", e.target.value),
+											placeholder: u("bigconsole.filters.editor.field.options.labelPlaceholder", "Label"),
 											style: {
 												flex: 1,
 												padding: "8px 10px",
-												border: `1px solid ${x.borderDefault}`,
+												border: `1px solid ${C.borderDefault}`,
 												borderRadius: "4px",
 												fontSize: "13px",
 												boxSizing: "border-box",
-												backgroundColor: x.bgPrimary,
-												color: x.textPrimary
+												backgroundColor: C.bgPrimary,
+												color: C.textPrimary
 											}
 										}),
-										h.length > 1 && /* @__PURE__ */ n("button", {
+										_.length > 1 && /* @__PURE__ */ i("button", {
 											type: "button",
-											onClick: () => w(t),
+											onClick: () => D(t),
 											style: {
 												padding: "6px 10px",
 												backgroundColor: "transparent",
-												border: `1px solid ${x.statusErrorText}`,
+												border: `1px solid ${C.statusErrorText}`,
 												borderRadius: "4px",
 												cursor: "pointer",
-												color: x.statusErrorText,
+												color: C.statusErrorText,
 												fontSize: "12px"
 											},
-											children: "Remove"
+											children: u("bigconsole.filters.editor.field.options.remove", "Remove")
 										})
 									]
-								}, t)), /* @__PURE__ */ n("button", {
+								}, t)), /* @__PURE__ */ i("button", {
 									type: "button",
-									onClick: C,
+									onClick: E,
 									style: {
 										padding: "8px",
 										backgroundColor: "transparent",
-										border: `1px dashed ${x.borderDefault}`,
+										border: `1px dashed ${C.borderDefault}`,
 										borderRadius: "4px",
 										cursor: "pointer",
-										color: x.textSecondary,
+										color: C.textSecondary,
 										fontSize: "12px"
 									},
-									children: "+ Add Option"
+									children: u("bigconsole.filters.editor.field.options.add", "+ Add Option")
 								})]
 							})]
 						}),
-						(d === "TEXT_SEARCH" || d === "CATEGORY") && /* @__PURE__ */ r("div", {
+						(p === "TEXT_SEARCH" || p === "CATEGORY") && /* @__PURE__ */ a("div", {
 							style: { marginBottom: "16px" },
-							children: [/* @__PURE__ */ n("label", {
+							children: [/* @__PURE__ */ i("label", {
 								style: {
 									display: "block",
 									marginBottom: "8px",
 									fontSize: "13px",
 									fontWeight: 500,
-									color: x.textPrimary
+									color: C.textPrimary
 								},
-								children: "Placeholder Text"
-							}), /* @__PURE__ */ n("input", {
+								children: u("bigconsole.filters.editor.field.placeholder.label", "Placeholder Text")
+							}), /* @__PURE__ */ i("input", {
 								type: "text",
-								value: _,
-								onChange: (e) => v(e.target.value),
-								placeholder: "e.g., Select an option...",
+								value: y,
+								onChange: (e) => b(e.target.value),
+								placeholder: u("bigconsole.filters.editor.field.placeholder.placeholder", "e.g., Select an option..."),
 								style: {
 									width: "100%",
 									padding: "10px 12px",
-									border: `1px solid ${x.borderDefault}`,
+									border: `1px solid ${C.borderDefault}`,
 									borderRadius: "6px",
 									fontSize: "14px",
 									boxSizing: "border-box",
-									backgroundColor: x.bgPrimary,
-									color: x.textPrimary
+									backgroundColor: C.bgPrimary,
+									color: C.textPrimary
 								}
 							})]
 						}),
-						/* @__PURE__ */ n("div", {
+						/* @__PURE__ */ i("div", {
 							style: { marginBottom: "16px" },
-							children: /* @__PURE__ */ r("label", {
+							children: /* @__PURE__ */ a("label", {
 								style: {
 									display: "flex",
 									alignItems: "center",
 									gap: "8px",
 									cursor: "pointer"
 								},
-								children: [/* @__PURE__ */ n("input", {
+								children: [/* @__PURE__ */ i("input", {
 									type: "checkbox",
-									checked: p,
-									onChange: (e) => m(e.target.checked),
+									checked: h,
+									onChange: (e) => g(e.target.checked),
 									style: {
 										width: "16px",
 										height: "16px"
 									}
-								}), /* @__PURE__ */ n("span", {
+								}), /* @__PURE__ */ i("span", {
 									style: {
 										fontSize: "13px",
-										color: x.textPrimary
+										color: C.textPrimary
 									},
-									children: "Required filter (must have a value)"
+									children: u("bigconsole.filters.editor.field.required.label", "Required filter (must have a value)")
 								})]
 							})
 						})
 					]
 				}),
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ a("div", {
 					style: {
 						padding: "16px 20px",
-						borderTop: `1px solid ${x.borderDefault}`,
+						borderTop: `1px solid ${C.borderDefault}`,
 						display: "flex",
 						justifyContent: "flex-end",
 						gap: "12px",
-						backgroundColor: x.bgPrimary
+						backgroundColor: C.bgPrimary
 					},
-					children: [/* @__PURE__ */ n("button", {
+					children: [/* @__PURE__ */ i("button", {
 						type: "button",
-						onClick: c,
+						onClick: l,
 						style: {
 							padding: "10px 20px",
-							backgroundColor: x.bgPrimary,
-							border: `1px solid ${x.borderDefault}`,
+							backgroundColor: C.bgPrimary,
+							border: `1px solid ${C.borderDefault}`,
 							borderRadius: "6px",
 							cursor: "pointer",
 							fontSize: "14px",
-							color: x.textSecondary
+							color: C.textSecondary
 						},
-						children: "Cancel"
-					}), /* @__PURE__ */ n("button", {
+						children: u("bigconsole.filters.editor.action.cancel", "Cancel")
+					}), /* @__PURE__ */ i("button", {
 						type: "button",
-						onClick: E,
-						disabled: !D,
+						onClick: k,
+						disabled: !A,
 						style: {
 							padding: "10px 20px",
-							backgroundColor: D ? x.actionPrimaryBg : x.bgTertiary,
-							color: D ? x.actionPrimaryFg : x.textTertiary,
+							backgroundColor: A ? C.actionPrimaryBg : C.bgTertiary,
+							color: A ? C.actionPrimaryFg : C.textTertiary,
 							border: "none",
 							borderRadius: "6px",
-							cursor: D ? "pointer" : "not-allowed",
+							cursor: A ? "pointer" : "not-allowed",
 							fontSize: "14px",
 							fontWeight: 500
 						},
-						children: S ? "Save Changes" : "Add Filter"
+						children: w ? u("bigconsole.filters.editor.action.saveChanges", "Save Changes") : u("bigconsole.filters.editor.action.add", "Add Filter")
 					})]
 				})
 			]
@@ -410,6 +411,6 @@ function o({ filter: o, onSave: s, onClose: c }) {
 	});
 }
 //#endregion
-export { o as default };
+export { s as default };
 
 //# sourceMappingURL=FilterEditor.js.map