@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/filter-builder/filters-tab.mjs

@@ -0,0 +1,663 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
+import { useScopedLocale } from "../../runtime/locale-scope.mjs";
+import { Button } from "../ui/button.mjs";
+import { Input } from "../ui/input.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.mjs";
+import { isOptionGroup } from "../primitives/types.mjs";
+import { SelectSingle } from "../primitives/select-single.mjs";
+import { SelectMulti } from "../primitives/select-multi.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/filter-builder/filters-tab.tsx
+const OPERATOR_KEYS = {
+	contains: "filter.contains",
+	not_contains: "filter.notContains",
+	equals: "filter.equals",
+	not_equals: "filter.notEquals",
+	starts_with: "filter.startsWith",
+	ends_with: "filter.endsWith",
+	greater_than: "filter.greaterThan",
+	less_than: "filter.lessThan",
+	greater_than_or_equal: "filter.greaterThanOrEqual",
+	less_than_or_equal: "filter.lessThanOrEqual",
+	in: "filter.in",
+	not_in: "filter.notIn",
+	some: "filter.some",
+	every: "filter.every",
+	none: "filter.none",
+	is_empty: "filter.isEmpty",
+	is_not_empty: "filter.isNotEmpty"
+};
+const TEXT_OPERATORS = [
+	"contains",
+	"not_contains",
+	"equals",
+	"not_equals",
+	"starts_with",
+	"ends_with",
+	"is_empty",
+	"is_not_empty"
+];
+const NUMBER_OPERATORS = [
+	"equals",
+	"not_equals",
+	"greater_than",
+	"greater_than_or_equal",
+	"less_than",
+	"less_than_or_equal",
+	"is_empty",
+	"is_not_empty"
+];
+const DATE_OPERATORS = [...NUMBER_OPERATORS];
+const BOOLEAN_OPERATORS = [
+	"equals",
+	"not_equals",
+	"is_empty",
+	"is_not_empty"
+];
+const SELECT_OPERATORS = [
+	"equals",
+	"not_equals",
+	"is_empty",
+	"is_not_empty"
+];
+const RELATION_SINGLE_OPERATORS = [
+	"equals",
+	"not_equals",
+	"in",
+	"not_in",
+	"is_empty",
+	"is_not_empty"
+];
+const RELATION_MULTI_OPERATORS = [
+	"some",
+	"every",
+	"none",
+	"is_empty",
+	"is_not_empty"
+];
+const PRESENCE_OPERATORS = ["is_empty", "is_not_empty"];
+function isValuelessOperator(operator) {
+	return operator === "is_empty" || operator === "is_not_empty";
+}
+function isMultiValueOperator(operator) {
+	return operator === "in" || operator === "not_in" || operator === "some" || operator === "every" || operator === "none";
+}
+function normalizeSelectOptions(options) {
+	if (!options || options.length === 0) return [];
+	return options.flatMap((option) => isOptionGroup(option) ? option.options : [option]).map((option) => ({
+		...option,
+		value: String(option.value)
+	}));
+}
+function getOperatorsForField(field) {
+	if (!field) return TEXT_OPERATORS;
+	const fieldType = field.type;
+	const fieldOptions = field.options ?? {};
+	const isTextType = fieldType === "text" || fieldType === "email" || fieldType === "textarea";
+	if (fieldType === "relation") return fieldOptions.type === "multiple" ? RELATION_MULTI_OPERATORS : RELATION_SINGLE_OPERATORS;
+	if (isTextType) return TEXT_OPERATORS;
+	if (fieldType === "number") return NUMBER_OPERATORS;
+	if (fieldType === "date" || fieldType === "datetime" || fieldType === "time") return DATE_OPERATORS;
+	if (fieldType === "checkbox" || fieldType === "switch") return BOOLEAN_OPERATORS;
+	if (fieldType === "select") return SELECT_OPERATORS;
+	return PRESENCE_OPERATORS;
+}
+function getDefaultValue(field, operator) {
+	if (isValuelessOperator(operator)) return null;
+	if (field.type === "relation") return field.options?.type === "multiple" || isMultiValueOperator(operator) ? [] : "";
+	if (field.type === "number") return null;
+	if (field.type === "checkbox" || field.type === "switch") return null;
+	if (field.type === "select") return "";
+	if (field.type === "date" || field.type === "datetime" || field.type === "time") return "";
+	return "";
+}
+function normalizeValueForOperator(field, operator, value) {
+	if (isValuelessOperator(operator)) return null;
+	if (!field) return value;
+	if (field.type === "relation") {
+		if (field.options?.type === "multiple" || isMultiValueOperator(operator)) return Array.isArray(value) ? value.map((item) => String(item)) : value ? [String(value)] : [];
+		if (Array.isArray(value)) return value[0] ?? "";
+		return value ?? "";
+	}
+	if (isMultiValueOperator(operator)) {
+		if (Array.isArray(value)) return value.map((item) => String(item));
+		return value ? [String(value)] : [];
+	}
+	if (Array.isArray(value)) return value[0] ?? "";
+	return value ?? "";
+}
+function FilterValueInput(t0) {
+	const $ = c(98);
+	const { field, filter, activeOperator, selectOptions, updateFilter, createRelationLoader, resolveText, t } = t0;
+	if (!field || isValuelessOperator(activeOperator)) return null;
+	if (field.type === "relation") {
+		const targetCollection = field.options?.targetCollection;
+		let t1$1;
+		if ($[0] !== activeOperator || $[1] !== field.options?.type) {
+			t1$1 = field.options?.type === "multiple" || isMultiValueOperator(activeOperator);
+			$[0] = activeOperator;
+			$[1] = field.options?.type;
+			$[2] = t1$1;
+		} else t1$1 = $[2];
+		const expectsMulti = t1$1;
+		if (!targetCollection) {
+			let t2$2;
+			if ($[3] !== t) {
+				t2$2 = t("viewOptions.valuePlaceholder");
+				$[3] = t;
+				$[4] = t2$2;
+			} else t2$2 = $[4];
+			let t3$2;
+			if ($[5] !== t2$2) {
+				t3$2 = /* @__PURE__ */ jsx(Input, {
+					disabled: true,
+					className: "h-8 text-xs",
+					placeholder: t2$2
+				});
+				$[5] = t2$2;
+				$[6] = t3$2;
+			} else t3$2 = $[6];
+			return t3$2;
+		}
+		let t2$1;
+		let t3$1;
+		if ($[7] !== createRelationLoader || $[8] !== expectsMulti || $[9] !== field.label || $[10] !== field.name || $[11] !== filter.id || $[12] !== filter.value || $[13] !== resolveText || $[14] !== t || $[15] !== targetCollection || $[16] !== updateFilter) {
+			t3$1 = Symbol.for("react.early_return_sentinel");
+			bb0: {
+				const labelText = field.label ? resolveText(field.label) : field.name;
+				if (expectsMulti) {
+					let t4$2;
+					if ($[19] !== filter.value) {
+						t4$2 = Array.isArray(filter.value) ? filter.value.map(_temp) : filter.value ? [String(filter.value)] : [];
+						$[19] = filter.value;
+						$[20] = t4$2;
+					} else t4$2 = $[20];
+					const selectedValues = t4$2;
+					let t5$1;
+					if ($[21] !== filter.id || $[22] !== updateFilter) {
+						t5$1 = (values) => updateFilter(filter.id, { value: values });
+						$[21] = filter.id;
+						$[22] = updateFilter;
+						$[23] = t5$1;
+					} else t5$1 = $[23];
+					let t6$1;
+					if ($[24] !== createRelationLoader || $[25] !== targetCollection) {
+						t6$1 = createRelationLoader(targetCollection);
+						$[24] = createRelationLoader;
+						$[25] = targetCollection;
+						$[26] = t6$1;
+					} else t6$1 = $[26];
+					let t7;
+					if ($[27] !== t) {
+						t7 = t("viewOptions.valuePlaceholder");
+						$[27] = t;
+						$[28] = t7;
+					} else t7 = $[28];
+					t3$1 = /* @__PURE__ */ jsx(SelectMulti, {
+						value: selectedValues,
+						onChange: t5$1,
+						loadOptions: t6$1,
+						placeholder: t7,
+						emptyMessage: t("relation.noResults", { name: labelText }),
+						drawerTitle: t("relation.select", { name: labelText }),
+						className: "h-8 text-xs"
+					});
+					break bb0;
+				}
+				const selectedValue = filter.value === null || filter.value === void 0 ? null : String(filter.value);
+				let t4$1;
+				if ($[29] !== filter.id || $[30] !== updateFilter) {
+					t4$1 = (value) => updateFilter(filter.id, { value: value ?? "" });
+					$[29] = filter.id;
+					$[30] = updateFilter;
+					$[31] = t4$1;
+				} else t4$1 = $[31];
+				let t5;
+				if ($[32] !== createRelationLoader || $[33] !== targetCollection) {
+					t5 = createRelationLoader(targetCollection);
+					$[32] = createRelationLoader;
+					$[33] = targetCollection;
+					$[34] = t5;
+				} else t5 = $[34];
+				let t6;
+				if ($[35] !== t) {
+					t6 = t("viewOptions.valuePlaceholder");
+					$[35] = t;
+					$[36] = t6;
+				} else t6 = $[36];
+				t2$1 = /* @__PURE__ */ jsx(SelectSingle, {
+					value: selectedValue,
+					onChange: t4$1,
+					loadOptions: t5,
+					placeholder: t6,
+					emptyMessage: t("relation.noResults", { name: labelText }),
+					drawerTitle: t("relation.select", { name: labelText }),
+					className: "h-8 text-xs"
+				});
+			}
+			$[7] = createRelationLoader;
+			$[8] = expectsMulti;
+			$[9] = field.label;
+			$[10] = field.name;
+			$[11] = filter.id;
+			$[12] = filter.value;
+			$[13] = resolveText;
+			$[14] = t;
+			$[15] = targetCollection;
+			$[16] = updateFilter;
+			$[17] = t2$1;
+			$[18] = t3$1;
+		} else {
+			t2$1 = $[17];
+			t3$1 = $[18];
+		}
+		if (t3$1 !== Symbol.for("react.early_return_sentinel")) return t3$1;
+		return t2$1;
+	}
+	if (field.type === "select") {
+		const selectedValue_0 = filter.value === null || filter.value === void 0 ? null : String(filter.value);
+		let t1$1;
+		if ($[37] !== filter.id || $[38] !== updateFilter) {
+			t1$1 = (value_0) => updateFilter(filter.id, { value: value_0 ?? "" });
+			$[37] = filter.id;
+			$[38] = updateFilter;
+			$[39] = t1$1;
+		} else t1$1 = $[39];
+		let t2$1;
+		if ($[40] !== t) {
+			t2$1 = t("viewOptions.valuePlaceholder");
+			$[40] = t;
+			$[41] = t2$1;
+		} else t2$1 = $[41];
+		let t3$1;
+		if ($[42] !== t) {
+			t3$1 = t("table.noResults");
+			$[42] = t;
+			$[43] = t3$1;
+		} else t3$1 = $[43];
+		let t4$1;
+		if ($[44] !== selectOptions || $[45] !== selectedValue_0 || $[46] !== t1$1 || $[47] !== t2$1 || $[48] !== t3$1) {
+			t4$1 = /* @__PURE__ */ jsx(SelectSingle, {
+				value: selectedValue_0,
+				onChange: t1$1,
+				options: selectOptions,
+				placeholder: t2$1,
+				emptyMessage: t3$1,
+				className: "h-8 text-xs"
+			});
+			$[44] = selectOptions;
+			$[45] = selectedValue_0;
+			$[46] = t1$1;
+			$[47] = t2$1;
+			$[48] = t3$1;
+			$[49] = t4$1;
+		} else t4$1 = $[49];
+		return t4$1;
+	}
+	if (field.type === "checkbox" || field.type === "switch") {
+		const booleanValue = typeof filter.value === "boolean" ? String(filter.value) : void 0;
+		let t1$1;
+		if ($[50] !== filter.id || $[51] !== updateFilter) {
+			t1$1 = (value_1) => updateFilter(filter.id, { value: value_1 === "true" });
+			$[50] = filter.id;
+			$[51] = updateFilter;
+			$[52] = t1$1;
+		} else t1$1 = $[52];
+		let t2$1;
+		if ($[53] !== t) {
+			t2$1 = t("viewOptions.valuePlaceholder");
+			$[53] = t;
+			$[54] = t2$1;
+		} else t2$1 = $[54];
+		let t3$1;
+		if ($[55] !== t2$1) {
+			t3$1 = /* @__PURE__ */ jsx(SelectTrigger, {
+				className: "h-8 text-xs",
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t2$1 })
+			});
+			$[55] = t2$1;
+			$[56] = t3$1;
+		} else t3$1 = $[56];
+		let t4$1;
+		if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+			t4$1 = /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
+				value: "true",
+				children: "True"
+			}), /* @__PURE__ */ jsx(SelectItem, {
+				value: "false",
+				children: "False"
+			})] });
+			$[57] = t4$1;
+		} else t4$1 = $[57];
+		let t5;
+		if ($[58] !== booleanValue || $[59] !== t1$1 || $[60] !== t3$1) {
+			t5 = /* @__PURE__ */ jsxs(Select, {
+				value: booleanValue,
+				onValueChange: t1$1,
+				children: [t3$1, t4$1]
+			});
+			$[58] = booleanValue;
+			$[59] = t1$1;
+			$[60] = t3$1;
+			$[61] = t5;
+		} else t5 = $[61];
+		return t5;
+	}
+	if (field.type === "number") {
+		const numberValue = filter.value === null || filter.value === void 0 ? "" : String(filter.value);
+		let t1$1;
+		if ($[62] !== t) {
+			t1$1 = t("viewOptions.valuePlaceholder");
+			$[62] = t;
+			$[63] = t1$1;
+		} else t1$1 = $[63];
+		let t2$1;
+		if ($[64] !== filter.id || $[65] !== updateFilter) {
+			t2$1 = (event) => {
+				const raw = event.target.value;
+				const next = raw.trim().length ? Number(raw) : null;
+				updateFilter(filter.id, { value: Number.isNaN(next) ? null : next });
+			};
+			$[64] = filter.id;
+			$[65] = updateFilter;
+			$[66] = t2$1;
+		} else t2$1 = $[66];
+		let t3$1;
+		if ($[67] !== numberValue || $[68] !== t1$1 || $[69] !== t2$1) {
+			t3$1 = /* @__PURE__ */ jsx(Input, {
+				type: "number",
+				className: "h-8 text-xs",
+				placeholder: t1$1,
+				value: numberValue,
+				onChange: t2$1
+			});
+			$[67] = numberValue;
+			$[68] = t1$1;
+			$[69] = t2$1;
+			$[70] = t3$1;
+		} else t3$1 = $[70];
+		return t3$1;
+	}
+	if (field.type === "date") {
+		const dateValue = typeof filter.value === "string" ? filter.value : "";
+		let t1$1;
+		if ($[71] !== filter.id || $[72] !== updateFilter) {
+			t1$1 = (event_0) => updateFilter(filter.id, { value: event_0.target.value });
+			$[71] = filter.id;
+			$[72] = updateFilter;
+			$[73] = t1$1;
+		} else t1$1 = $[73];
+		let t2$1;
+		if ($[74] !== dateValue || $[75] !== t1$1) {
+			t2$1 = /* @__PURE__ */ jsx(Input, {
+				type: "date",
+				className: "h-8 text-xs",
+				value: dateValue,
+				onChange: t1$1
+			});
+			$[74] = dateValue;
+			$[75] = t1$1;
+			$[76] = t2$1;
+		} else t2$1 = $[76];
+		return t2$1;
+	}
+	if (field.type === "datetime") {
+		const dateTimeValue = typeof filter.value === "string" ? filter.value : "";
+		let t1$1;
+		if ($[77] !== filter.id || $[78] !== updateFilter) {
+			t1$1 = (event_1) => updateFilter(filter.id, { value: event_1.target.value });
+			$[77] = filter.id;
+			$[78] = updateFilter;
+			$[79] = t1$1;
+		} else t1$1 = $[79];
+		let t2$1;
+		if ($[80] !== dateTimeValue || $[81] !== t1$1) {
+			t2$1 = /* @__PURE__ */ jsx(Input, {
+				type: "datetime-local",
+				className: "h-8 text-xs",
+				value: dateTimeValue,
+				onChange: t1$1
+			});
+			$[80] = dateTimeValue;
+			$[81] = t1$1;
+			$[82] = t2$1;
+		} else t2$1 = $[82];
+		return t2$1;
+	}
+	if (field.type === "time") {
+		const timeValue = typeof filter.value === "string" ? filter.value : "";
+		let t1$1;
+		if ($[83] !== filter.id || $[84] !== updateFilter) {
+			t1$1 = (event_2) => updateFilter(filter.id, { value: event_2.target.value });
+			$[83] = filter.id;
+			$[84] = updateFilter;
+			$[85] = t1$1;
+		} else t1$1 = $[85];
+		let t2$1;
+		if ($[86] !== t1$1 || $[87] !== timeValue) {
+			t2$1 = /* @__PURE__ */ jsx(Input, {
+				type: "time",
+				className: "h-8 text-xs",
+				value: timeValue,
+				onChange: t1$1
+			});
+			$[86] = t1$1;
+			$[87] = timeValue;
+			$[88] = t2$1;
+		} else t2$1 = $[88];
+		return t2$1;
+	}
+	let t1;
+	if ($[89] !== t) {
+		t1 = t("viewOptions.valuePlaceholder");
+		$[89] = t;
+		$[90] = t1;
+	} else t1 = $[90];
+	const t2 = typeof filter.value === "string" ? filter.value : "";
+	let t3;
+	if ($[91] !== filter.id || $[92] !== updateFilter) {
+		t3 = (event_3) => updateFilter(filter.id, { value: event_3.target.value });
+		$[91] = filter.id;
+		$[92] = updateFilter;
+		$[93] = t3;
+	} else t3 = $[93];
+	let t4;
+	if ($[94] !== t1 || $[95] !== t2 || $[96] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Input, {
+			className: "h-8 text-xs",
+			placeholder: t1,
+			value: t2,
+			onChange: t3
+		});
+		$[94] = t1;
+		$[95] = t2;
+		$[96] = t3;
+		$[97] = t4;
+	} else t4 = $[97];
+	return t4;
+}
+function _temp(val) {
+	return String(val);
+}
+function FiltersTab({ fields, filters, onFiltersChange }) {
+	"use no memo";
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	const client = useAdminStore(selectClient);
+	const { locale: contentLocale } = useScopedLocale();
+	const filterableFields = React.useMemo(() => fields.filter((field) => {
+		if (!field?.name) return false;
+		if (field.name === "_title") return false;
+		if (field.type === "reverseRelation") return false;
+		if (field.options?.compute) return false;
+		return true;
+	}), [fields]);
+	const addFilter = () => {
+		const defaultField = filterableFields[0];
+		if (!defaultField) return;
+		const defaultOperator = getOperatorsForField(defaultField)[0] ?? "equals";
+		const newFilter = {
+			id: crypto.randomUUID(),
+			field: defaultField.name,
+			operator: defaultOperator,
+			value: getDefaultValue(defaultField, defaultOperator)
+		};
+		onFiltersChange([...filters, newFilter]);
+	};
+	const updateFilter = (id, updates) => {
+		onFiltersChange(filters.map((f) => f.id === id ? {
+			...f,
+			...updates
+		} : f));
+	};
+	const removeFilter = (id_0) => {
+		onFiltersChange(filters.filter((f_0) => f_0.id !== id_0));
+	};
+	const clearAllFilters = () => {
+		onFiltersChange([]);
+	};
+	const createRelationLoader = React.useCallback((targetCollection) => async (search) => {
+		if (!client) return [];
+		try {
+			const response = await client.collections[targetCollection].find({
+				limit: 50,
+				search,
+				locale: contentLocale
+			});
+			let docs;
+			if (response) if (response.docs) docs = response.docs;
+			else docs = [];
+			else docs = [];
+			return docs.map((item) => {
+				let label;
+				if (item._title) label = item._title;
+				else if (item.id) label = item.id;
+				else label = "";
+				return {
+					value: String(item.id),
+					label
+				};
+			});
+		} catch (_error) {
+			return [];
+		}
+	}, [client, contentLocale]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4 py-4",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-xs",
+				children: t("viewOptions.filtersDescription")
+			}),
+			filters.map((filter, idx) => {
+				const field_0 = fields.find((f_1) => f_1.name === filter.field);
+				const availableOperators = getOperatorsForField(field_0);
+				const activeOperator = availableOperators.includes(filter.operator) ? filter.operator : availableOperators[0] ?? "equals";
+				const selectOptions = field_0?.type === "select" ? normalizeSelectOptions(field_0.options?.options) : [];
+				return /* @__PURE__ */ jsxs("div", {
+					className: "bg-muted border-border space-y-2 border p-3",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-xs font-semibold uppercase",
+								children: t("viewOptions.filterNumber", { number: idx + 1 })
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon-sm",
+								onClick: () => removeFilter(filter.id),
+								className: "text-muted-foreground hover:text-destructive",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:trash",
+									width: 14,
+									height: 14
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-2 gap-2",
+							children: [/* @__PURE__ */ jsxs(Select, {
+								value: filter.field || void 0,
+								onValueChange: (value) => {
+									const selectedField = fields.find((f_2) => f_2.name === value);
+									const nextOperator = getOperatorsForField(selectedField)[0] ?? "equals";
+									updateFilter(filter.id, {
+										field: value ?? "",
+										operator: nextOperator,
+										value: selectedField ? getDefaultValue(selectedField, nextOperator) : ""
+									});
+								},
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									className: "h-8 text-xs",
+									children: /* @__PURE__ */ jsx(SelectValue, { children: filter.field ? resolveText(fields.find((f_3) => f_3.name === filter.field)?.label ?? filter.field) : t("viewOptions.selectField") })
+								}), /* @__PURE__ */ jsx(SelectContent, { children: filterableFields.map((f_4) => /* @__PURE__ */ jsx(SelectItem, {
+									value: f_4.name,
+									children: resolveText(f_4.label)
+								}, f_4.name)) })]
+							}), /* @__PURE__ */ jsxs(Select, {
+								value: activeOperator || void 0,
+								onValueChange: (value_0) => {
+									const nextOperator_0 = value_0;
+									updateFilter(filter.id, {
+										operator: nextOperator_0,
+										value: normalizeValueForOperator(field_0, nextOperator_0, filter.value)
+									});
+								},
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									className: "h-8 text-xs",
+									children: /* @__PURE__ */ jsx(SelectValue, { children: activeOperator ? t(OPERATOR_KEYS[activeOperator] || activeOperator) : t("viewOptions.selectOperator") })
+								}), /* @__PURE__ */ jsx(SelectContent, { children: availableOperators.map((op) => /* @__PURE__ */ jsx(SelectItem, {
+									value: op,
+									children: t(OPERATOR_KEYS[op])
+								}, op)) })]
+							})]
+						}),
+						/* @__PURE__ */ jsx(FilterValueInput, {
+							field: field_0,
+							filter,
+							activeOperator,
+							selectOptions,
+							updateFilter,
+							createRelationLoader,
+							resolveText,
+							t
+						})
+					]
+				}, filter.id);
+			}),
+			filters.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "border-border text-muted-foreground border border-dashed p-8 text-center text-sm",
+				children: t("viewOptions.noActiveFilters")
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: addFilter,
+					className: "flex-1 gap-2",
+					disabled: filterableFields.length === 0,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:plus",
+						width: 14,
+						height: 14
+					}), t("viewOptions.addFilter")]
+				}), filters.length > 0 && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: clearAllFilters,
+					className: "",
+					children: t("viewOptions.clearAll")
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { FiltersTab };