@questpie/admin 1.1.0 → 2.0.0

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

@@ -0,0 +1,380 @@
+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 { isOptionGroup } from "../primitives/types.mjs";
+import { SelectMulti } from "../primitives/select-multi.mjs";
+import { SelectSingle } from "../primitives/select-single.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 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 FiltersTab({ fields, filters, onFiltersChange }) {
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	const client = useAdminStore(selectClient);
+	const { locale: contentLocale } = useScopedLocale();
+	const filterableFields = React$1.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) => {
+		onFiltersChange(filters.filter((f) => f.id !== id));
+	};
+	const clearAllFilters = () => {
+		onFiltersChange([]);
+	};
+	const createRelationLoader = React$1.useCallback((targetCollection) => async (search) => {
+		if (!client) return [];
+		try {
+			return ((await client.collections[targetCollection].find({
+				limit: 50,
+				search,
+				locale: contentLocale
+			}))?.docs ?? []).map((item) => ({
+				value: String(item.id),
+				label: item._title || item.id || ""
+			}));
+		} catch (_error) {
+			return [];
+		}
+	}, [client, contentLocale]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4 py-4",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: t("viewOptions.filtersDescription")
+			}),
+			filters.map((filter, idx) => {
+				const field = fields.find((f) => f.name === filter.field);
+				const availableOperators = getOperatorsForField(field);
+				const activeOperator = availableOperators.includes(filter.operator) ? filter.operator : availableOperators[0] ?? "equals";
+				const selectOptions = field?.type === "select" ? normalizeSelectOptions(field.options?.options) : [];
+				const renderValueInput = () => {
+					if (!field || isValuelessOperator(activeOperator)) return null;
+					if (field.type === "relation") {
+						const targetCollection = field.options?.targetCollection;
+						const expectsMulti = field.options?.type === "multiple" || isMultiValueOperator(activeOperator);
+						if (!targetCollection) return /* @__PURE__ */ jsx(Input, {
+							disabled: true,
+							className: "h-8 text-xs",
+							placeholder: t("viewOptions.valuePlaceholder")
+						});
+						const labelText = field.label ? resolveText(field.label) : field.name;
+						if (expectsMulti) return /* @__PURE__ */ jsx(SelectMulti, {
+							value: Array.isArray(filter.value) ? filter.value.map((val) => String(val)) : filter.value ? [String(filter.value)] : [],
+							onChange: (values) => updateFilter(filter.id, { value: values }),
+							loadOptions: createRelationLoader(targetCollection),
+							placeholder: t("viewOptions.valuePlaceholder"),
+							emptyMessage: t("relation.noResults", { name: labelText }),
+							drawerTitle: t("relation.select", { name: labelText }),
+							className: "h-8 text-xs"
+						});
+						return /* @__PURE__ */ jsx(SelectSingle, {
+							value: filter.value === null || filter.value === void 0 ? null : String(filter.value),
+							onChange: (value) => updateFilter(filter.id, { value: value ?? "" }),
+							loadOptions: createRelationLoader(targetCollection),
+							placeholder: t("viewOptions.valuePlaceholder"),
+							emptyMessage: t("relation.noResults", { name: labelText }),
+							drawerTitle: t("relation.select", { name: labelText }),
+							className: "h-8 text-xs"
+						});
+					}
+					if (field.type === "select") return /* @__PURE__ */ jsx(SelectSingle, {
+						value: filter.value === null || filter.value === void 0 ? null : String(filter.value),
+						onChange: (value) => updateFilter(filter.id, { value: value ?? "" }),
+						options: selectOptions,
+						placeholder: t("viewOptions.valuePlaceholder"),
+						emptyMessage: t("table.noResults"),
+						className: "h-8 text-xs"
+					});
+					if (field.type === "checkbox" || field.type === "switch") return /* @__PURE__ */ jsxs(Select, {
+						value: typeof filter.value === "boolean" ? String(filter.value) : void 0,
+						onValueChange: (value) => updateFilter(filter.id, { value: value === "true" }),
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							className: "h-8 text-xs",
+							children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("viewOptions.valuePlaceholder") })
+						}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
+							value: "true",
+							children: "True"
+						}), /* @__PURE__ */ jsx(SelectItem, {
+							value: "false",
+							children: "False"
+						})] })]
+					});
+					if (field.type === "number") {
+						const numberValue = filter.value === null || filter.value === void 0 ? "" : String(filter.value);
+						return /* @__PURE__ */ jsx(Input, {
+							type: "number",
+							className: "h-8 text-xs",
+							placeholder: t("viewOptions.valuePlaceholder"),
+							value: numberValue,
+							onChange: (event) => {
+								const raw = event.target.value;
+								const next = raw.trim().length ? Number(raw) : null;
+								updateFilter(filter.id, { value: Number.isNaN(next) ? null : next });
+							}
+						});
+					}
+					if (field.type === "date") return /* @__PURE__ */ jsx(Input, {
+						type: "date",
+						className: "h-8 text-xs",
+						value: typeof filter.value === "string" ? filter.value : "",
+						onChange: (event) => updateFilter(filter.id, { value: event.target.value })
+					});
+					if (field.type === "datetime") return /* @__PURE__ */ jsx(Input, {
+						type: "datetime-local",
+						className: "h-8 text-xs",
+						value: typeof filter.value === "string" ? filter.value : "",
+						onChange: (event) => updateFilter(filter.id, { value: event.target.value })
+					});
+					if (field.type === "time") return /* @__PURE__ */ jsx(Input, {
+						type: "time",
+						className: "h-8 text-xs",
+						value: typeof filter.value === "string" ? filter.value : "",
+						onChange: (event) => updateFilter(filter.id, { value: event.target.value })
+					});
+					return /* @__PURE__ */ jsx(Input, {
+						className: "h-8 text-xs",
+						placeholder: t("viewOptions.valuePlaceholder"),
+						value: typeof filter.value === "string" ? filter.value : "",
+						onChange: (event) => updateFilter(filter.id, { value: event.target.value })
+					});
+				};
+				return /* @__PURE__ */ jsxs("div", {
+					className: "p-3 bg-muted/30 border border-border rounded-lg space-y-2",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex justify-between items-center",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-xs font-semibold text-muted-foreground 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) => f.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) => f.name === filter.field)?.label ?? filter.field) : t("viewOptions.selectField") })
+								}), /* @__PURE__ */ jsx(SelectContent, { children: filterableFields.map((f) => /* @__PURE__ */ jsx(SelectItem, {
+									value: f.name,
+									children: resolveText(f.label)
+								}, f.name)) })]
+							}), /* @__PURE__ */ jsxs(Select, {
+								value: activeOperator || void 0,
+								onValueChange: (value) => {
+									const nextOperator = value;
+									updateFilter(filter.id, {
+										operator: nextOperator,
+										value: normalizeValueForOperator(field, nextOperator, 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)) })]
+							})]
+						}),
+						renderValueInput()
+					]
+				}, filter.id);
+			}),
+			filters.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "text-center p-8 border border-dashed border-border rounded-lg text-muted-foreground 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 rounded-md",
+					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: "rounded-md",
+					children: t("viewOptions.clearAll")
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { FiltersTab };
+//# sourceMappingURL=filters-tab.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filters-tab.mjs","names":["OPERATOR_KEYS: Record<string, string>","TEXT_OPERATORS: FilterOperator[]","NUMBER_OPERATORS: FilterOperator[]","DATE_OPERATORS: FilterOperator[]","BOOLEAN_OPERATORS: FilterOperator[]","SELECT_OPERATORS: FilterOperator[]","RELATION_SINGLE_OPERATORS: FilterOperator[]","RELATION_MULTI_OPERATORS: FilterOperator[]","PRESENCE_OPERATORS: FilterOperator[]","React","newFilter: FilterRule"],"sources":["../../../../src/client/components/filter-builder/filters-tab.tsx"],"sourcesContent":["import { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport { useResolveText, useTranslation } from \"../../i18n/hooks\";\nimport { selectClient, useAdminStore, useScopedLocale } from \"../../runtime\";\nimport { SelectMulti } from \"../primitives/select-multi\";\nimport { SelectSingle } from \"../primitives/select-single\";\nimport {\n  isOptionGroup,\n  type SelectOption,\n  type SelectOptions,\n} from \"../primitives/types\";\nimport { Button } from \"../ui/button.js\";\nimport { Input } from \"../ui/input.js\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../ui/select.js\";\nimport type { AvailableField, FilterOperator, FilterRule } from \"./types.js\";\n\nexport interface FiltersTabProps {\n  fields: AvailableField[];\n  filters: FilterRule[];\n  onFiltersChange: (filters: FilterRule[]) => void;\n}\n\nconst OPERATOR_KEYS: Record<string, string> = {\n  contains: \"filter.contains\",\n  not_contains: \"filter.notContains\",\n  equals: \"filter.equals\",\n  not_equals: \"filter.notEquals\",\n  starts_with: \"filter.startsWith\",\n  ends_with: \"filter.endsWith\",\n  greater_than: \"filter.greaterThan\",\n  less_than: \"filter.lessThan\",\n  greater_than_or_equal: \"filter.greaterThanOrEqual\",\n  less_than_or_equal: \"filter.lessThanOrEqual\",\n  in: \"filter.in\",\n  not_in: \"filter.notIn\",\n  some: \"filter.some\",\n  every: \"filter.every\",\n  none: \"filter.none\",\n  is_empty: \"filter.isEmpty\",\n  is_not_empty: \"filter.isNotEmpty\",\n};\n\nconst TEXT_OPERATORS: FilterOperator[] = [\n  \"contains\",\n  \"not_contains\",\n  \"equals\",\n  \"not_equals\",\n  \"starts_with\",\n  \"ends_with\",\n  \"is_empty\",\n  \"is_not_empty\",\n];\n\nconst NUMBER_OPERATORS: FilterOperator[] = [\n  \"equals\",\n  \"not_equals\",\n  \"greater_than\",\n  \"greater_than_or_equal\",\n  \"less_than\",\n  \"less_than_or_equal\",\n  \"is_empty\",\n  \"is_not_empty\",\n];\n\nconst DATE_OPERATORS: FilterOperator[] = [...NUMBER_OPERATORS];\n\nconst BOOLEAN_OPERATORS: FilterOperator[] = [\n  \"equals\",\n  \"not_equals\",\n  \"is_empty\",\n  \"is_not_empty\",\n];\n\nconst SELECT_OPERATORS: FilterOperator[] = [\n  \"equals\",\n  \"not_equals\",\n  \"is_empty\",\n  \"is_not_empty\",\n];\n\nconst RELATION_SINGLE_OPERATORS: FilterOperator[] = [\n  \"equals\",\n  \"not_equals\",\n  \"in\",\n  \"not_in\",\n  \"is_empty\",\n  \"is_not_empty\",\n];\n\nconst RELATION_MULTI_OPERATORS: FilterOperator[] = [\n  \"some\",\n  \"every\",\n  \"none\",\n  \"is_empty\",\n  \"is_not_empty\",\n];\n\nconst PRESENCE_OPERATORS: FilterOperator[] = [\"is_empty\", \"is_not_empty\"];\n\nfunction isValuelessOperator(operator: FilterOperator) {\n  return operator === \"is_empty\" || operator === \"is_not_empty\";\n}\n\nfunction isMultiValueOperator(operator: FilterOperator) {\n  return (\n    operator === \"in\" ||\n    operator === \"not_in\" ||\n    operator === \"some\" ||\n    operator === \"every\" ||\n    operator === \"none\"\n  );\n}\n\nfunction normalizeSelectOptions(\n  options?: SelectOptions<unknown>,\n): SelectOption<string>[] {\n  if (!options || options.length === 0) return [];\n  const flattened = options.flatMap((option) =>\n    isOptionGroup(option) ? option.options : [option],\n  );\n  return flattened.map((option) => ({\n    ...option,\n    value: String(option.value),\n  }));\n}\n\nfunction getOperatorsForField(field?: AvailableField): FilterOperator[] {\n  if (!field) return TEXT_OPERATORS;\n  const fieldType = field.type;\n  const fieldOptions = field.options ?? {};\n\n  const isTextType =\n    fieldType === \"text\" || fieldType === \"email\" || fieldType === \"textarea\";\n\n  if (fieldType === \"relation\") {\n    return fieldOptions.type === \"multiple\"\n      ? RELATION_MULTI_OPERATORS\n      : RELATION_SINGLE_OPERATORS;\n  }\n  if (isTextType) return TEXT_OPERATORS;\n  if (fieldType === \"number\") return NUMBER_OPERATORS;\n  if (\n    fieldType === \"date\" ||\n    fieldType === \"datetime\" ||\n    fieldType === \"time\"\n  ) {\n    return DATE_OPERATORS;\n  }\n  if (fieldType === \"checkbox\" || fieldType === \"switch\") {\n    return BOOLEAN_OPERATORS;\n  }\n  if (fieldType === \"select\") return SELECT_OPERATORS;\n\n  return PRESENCE_OPERATORS;\n}\n\nfunction getDefaultValue(field: AvailableField, operator: FilterOperator) {\n  if (isValuelessOperator(operator)) return null;\n\n  if (field.type === \"relation\") {\n    const expectsMulti =\n      field.options?.type === \"multiple\" || isMultiValueOperator(operator);\n    return expectsMulti ? [] : \"\";\n  }\n\n  if (field.type === \"number\") return null;\n  if (field.type === \"checkbox\" || field.type === \"switch\") return null;\n  if (field.type === \"select\") return \"\";\n  if (\n    field.type === \"date\" ||\n    field.type === \"datetime\" ||\n    field.type === \"time\"\n  ) {\n    return \"\";\n  }\n\n  return \"\";\n}\n\nfunction normalizeValueForOperator(\n  field: AvailableField | undefined,\n  operator: FilterOperator,\n  value: FilterRule[\"value\"],\n): FilterRule[\"value\"] {\n  if (isValuelessOperator(operator)) return null;\n  if (!field) return value;\n\n  if (field.type === \"relation\") {\n    const expectsMulti =\n      field.options?.type === \"multiple\" || isMultiValueOperator(operator);\n    if (expectsMulti) {\n      return Array.isArray(value)\n        ? value.map((item) => String(item))\n        : value\n          ? [String(value)]\n          : [];\n    }\n    if (Array.isArray(value)) {\n      return value[0] ?? \"\";\n    }\n    return value ?? \"\";\n  }\n\n  if (isMultiValueOperator(operator)) {\n    if (Array.isArray(value)) return value.map((item) => String(item));\n    return value ? [String(value)] : [];\n  }\n\n  if (Array.isArray(value)) {\n    return value[0] ?? \"\";\n  }\n\n  return value ?? \"\";\n}\n\nexport function FiltersTab({\n  fields,\n  filters,\n  onFiltersChange,\n}: FiltersTabProps) {\n  const { t } = useTranslation();\n  const resolveText = useResolveText();\n  const client = useAdminStore(selectClient);\n  const { locale: contentLocale } = useScopedLocale();\n\n  const filterableFields = React.useMemo(\n    () =>\n      fields.filter((field) => {\n        if (!field?.name) return false;\n        if (field.name === \"_title\") return false;\n        if (field.type === \"reverseRelation\") return false;\n        if (field.options?.compute) return false;\n        return true;\n      }),\n    [fields],\n  );\n\n  const addFilter = () => {\n    const defaultField = filterableFields[0];\n    if (!defaultField) return;\n    const operators = getOperatorsForField(defaultField);\n    const defaultOperator = operators[0] ?? \"equals\";\n    const newFilter: FilterRule = {\n      id: crypto.randomUUID(),\n      field: defaultField.name,\n      operator: defaultOperator,\n      value: getDefaultValue(defaultField, defaultOperator),\n    };\n    onFiltersChange([...filters, newFilter]);\n  };\n\n  const updateFilter = (id: string, updates: Partial<FilterRule>) => {\n    onFiltersChange(\n      filters.map((f) => (f.id === id ? { ...f, ...updates } : f)),\n    );\n  };\n\n  const removeFilter = (id: string) => {\n    onFiltersChange(filters.filter((f) => f.id !== id));\n  };\n\n  const clearAllFilters = () => {\n    onFiltersChange([]);\n  };\n\n  const createRelationLoader = React.useCallback(\n    (targetCollection: string) => async (search: string) => {\n      if (!client) return [];\n      try {\n        const response = await (client as any).collections[\n          targetCollection\n        ].find({\n          limit: 50,\n          search,\n          locale: contentLocale,\n        });\n        const docs = response?.docs ?? [];\n        return docs.map((item: any) => ({\n          value: String(item.id),\n          label: item._title || item.id || \"\",\n        }));\n      } catch (_error) {\n        return [];\n      }\n    },\n    [client, contentLocale],\n  );\n\n  return (\n    <div className=\"space-y-4 py-4\">\n      <p className=\"text-xs text-muted-foreground\">\n        {t(\"viewOptions.filtersDescription\")}\n      </p>\n\n      {filters.map((filter, idx) => {\n        const field = fields.find((f) => f.name === filter.field);\n        const availableOperators = getOperatorsForField(field);\n        const activeOperator = availableOperators.includes(filter.operator)\n          ? filter.operator\n          : (availableOperators[0] ?? \"equals\");\n        const selectOptions =\n          field?.type === \"select\"\n            ? normalizeSelectOptions(field.options?.options)\n            : [];\n\n        const renderValueInput = () => {\n          if (!field || isValuelessOperator(activeOperator)) return null;\n\n          if (field.type === \"relation\") {\n            const targetCollection = field.options?.targetCollection as\n              | string\n              | undefined;\n            const expectsMulti =\n              field.options?.type === \"multiple\" ||\n              isMultiValueOperator(activeOperator);\n\n            if (!targetCollection) {\n              return (\n                <Input\n                  disabled\n                  className=\"h-8 text-xs\"\n                  placeholder={t(\"viewOptions.valuePlaceholder\")}\n                />\n              );\n            }\n\n            const labelText = field.label\n              ? resolveText(field.label)\n              : field.name;\n\n            if (expectsMulti) {\n              const selectedValues = Array.isArray(filter.value)\n                ? filter.value.map((val) => String(val))\n                : filter.value\n                  ? [String(filter.value)]\n                  : [];\n\n              return (\n                <SelectMulti\n                  value={selectedValues}\n                  onChange={(values) =>\n                    updateFilter(filter.id, { value: values })\n                  }\n                  loadOptions={createRelationLoader(targetCollection)}\n                  placeholder={t(\"viewOptions.valuePlaceholder\")}\n                  emptyMessage={t(\"relation.noResults\", { name: labelText })}\n                  drawerTitle={t(\"relation.select\", { name: labelText })}\n                  className=\"h-8 text-xs\"\n                />\n              );\n            }\n\n            const selectedValue =\n              filter.value === null || filter.value === undefined\n                ? null\n                : String(filter.value);\n\n            return (\n              <SelectSingle\n                value={selectedValue}\n                onChange={(value) =>\n                  updateFilter(filter.id, { value: value ?? \"\" })\n                }\n                loadOptions={createRelationLoader(targetCollection)}\n                placeholder={t(\"viewOptions.valuePlaceholder\")}\n                emptyMessage={t(\"relation.noResults\", { name: labelText })}\n                drawerTitle={t(\"relation.select\", { name: labelText })}\n                className=\"h-8 text-xs\"\n              />\n            );\n          }\n\n          if (field.type === \"select\") {\n            const selectedValue =\n              filter.value === null || filter.value === undefined\n                ? null\n                : String(filter.value);\n\n            return (\n              <SelectSingle\n                value={selectedValue}\n                onChange={(value) =>\n                  updateFilter(filter.id, { value: value ?? \"\" })\n                }\n                options={selectOptions}\n                placeholder={t(\"viewOptions.valuePlaceholder\")}\n                emptyMessage={t(\"table.noResults\")}\n                className=\"h-8 text-xs\"\n              />\n            );\n          }\n\n          if (field.type === \"checkbox\" || field.type === \"switch\") {\n            const booleanValue =\n              typeof filter.value === \"boolean\"\n                ? String(filter.value)\n                : undefined;\n\n            return (\n              <Select\n                value={booleanValue}\n                onValueChange={(value) =>\n                  updateFilter(filter.id, { value: value === \"true\" })\n                }\n              >\n                <SelectTrigger className=\"h-8 text-xs\">\n                  <SelectValue\n                    placeholder={t(\"viewOptions.valuePlaceholder\")}\n                  />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"true\">True</SelectItem>\n                  <SelectItem value=\"false\">False</SelectItem>\n                </SelectContent>\n              </Select>\n            );\n          }\n\n          if (field.type === \"number\") {\n            const numberValue =\n              filter.value === null || filter.value === undefined\n                ? \"\"\n                : String(filter.value);\n            return (\n              <Input\n                type=\"number\"\n                className=\"h-8 text-xs\"\n                placeholder={t(\"viewOptions.valuePlaceholder\")}\n                value={numberValue}\n                onChange={(event) => {\n                  const raw = event.target.value;\n                  const next = raw.trim().length ? Number(raw) : null;\n                  updateFilter(filter.id, {\n                    value: Number.isNaN(next) ? null : next,\n                  });\n                }}\n              />\n            );\n          }\n\n          if (field.type === \"date\") {\n            const dateValue =\n              typeof filter.value === \"string\" ? filter.value : \"\";\n            return (\n              <Input\n                type=\"date\"\n                className=\"h-8 text-xs\"\n                value={dateValue}\n                onChange={(event) =>\n                  updateFilter(filter.id, { value: event.target.value })\n                }\n              />\n            );\n          }\n\n          if (field.type === \"datetime\") {\n            const dateTimeValue =\n              typeof filter.value === \"string\" ? filter.value : \"\";\n            return (\n              <Input\n                type=\"datetime-local\"\n                className=\"h-8 text-xs\"\n                value={dateTimeValue}\n                onChange={(event) =>\n                  updateFilter(filter.id, { value: event.target.value })\n                }\n              />\n            );\n          }\n\n          if (field.type === \"time\") {\n            const timeValue =\n              typeof filter.value === \"string\" ? filter.value : \"\";\n            return (\n              <Input\n                type=\"time\"\n                className=\"h-8 text-xs\"\n                value={timeValue}\n                onChange={(event) =>\n                  updateFilter(filter.id, { value: event.target.value })\n                }\n              />\n            );\n          }\n\n          return (\n            <Input\n              className=\"h-8 text-xs\"\n              placeholder={t(\"viewOptions.valuePlaceholder\")}\n              value={typeof filter.value === \"string\" ? filter.value : \"\"}\n              onChange={(event) =>\n                updateFilter(filter.id, { value: event.target.value })\n              }\n            />\n          );\n        };\n\n        return (\n          <div\n            key={filter.id}\n            className=\"p-3 bg-muted/30 border border-border rounded-lg space-y-2\"\n          >\n            <div className=\"flex justify-between items-center\">\n              <span className=\"text-xs font-semibold text-muted-foreground uppercase\">\n                {t(\"viewOptions.filterNumber\", { number: idx + 1 })}\n              </span>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={() => removeFilter(filter.id)}\n                className=\"text-muted-foreground hover:text-destructive\"\n              >\n                <Icon icon=\"ph:trash\" width={14} height={14} />\n              </Button>\n            </div>\n            <div className=\"grid grid-cols-2 gap-2\">\n              <Select\n                value={filter.field || undefined}\n                onValueChange={(value) => {\n                  const selectedField = fields.find((f) => f.name === value);\n                  const operators = getOperatorsForField(selectedField);\n                  const nextOperator = operators[0] ?? \"equals\";\n                  updateFilter(filter.id, {\n                    field: value ?? \"\",\n                    operator: nextOperator,\n                    value: selectedField\n                      ? getDefaultValue(selectedField, nextOperator)\n                      : \"\",\n                  });\n                }}\n              >\n                <SelectTrigger className=\"h-8 text-xs\">\n                  <SelectValue>\n                    {filter.field\n                      ? resolveText(\n                          fields.find((f) => f.name === filter.field)?.label ??\n                            filter.field,\n                        )\n                      : t(\"viewOptions.selectField\")}\n                  </SelectValue>\n                </SelectTrigger>\n                <SelectContent>\n                  {filterableFields.map((f) => (\n                    <SelectItem key={f.name} value={f.name}>\n                      {resolveText(f.label)}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n              <Select\n                value={activeOperator || undefined}\n                onValueChange={(value) => {\n                  const nextOperator = value as FilterOperator;\n                  updateFilter(filter.id, {\n                    operator: nextOperator,\n                    value: normalizeValueForOperator(\n                      field,\n                      nextOperator,\n                      filter.value,\n                    ) as FilterRule[\"value\"],\n                  });\n                }}\n              >\n                <SelectTrigger className=\"h-8 text-xs\">\n                  <SelectValue>\n                    {activeOperator\n                      ? t(OPERATOR_KEYS[activeOperator] || activeOperator)\n                      : t(\"viewOptions.selectOperator\")}\n                  </SelectValue>\n                </SelectTrigger>\n                <SelectContent>\n                  {availableOperators.map((op) => (\n                    <SelectItem key={op} value={op}>\n                      {t(OPERATOR_KEYS[op])}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n            {renderValueInput()}\n          </div>\n        );\n      })}\n\n      {filters.length === 0 && (\n        <div className=\"text-center p-8 border border-dashed border-border rounded-lg text-muted-foreground text-sm\">\n          {t(\"viewOptions.noActiveFilters\")}\n        </div>\n      )}\n\n      <div className=\"flex gap-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={addFilter}\n          className=\"flex-1 gap-2 rounded-md\"\n          disabled={filterableFields.length === 0}\n        >\n          <Icon icon=\"ph:plus\" width={14} height={14} />\n          {t(\"viewOptions.addFilter\")}\n        </Button>\n        {filters.length > 0 && (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={clearAllFilters}\n            className=\"rounded-md\"\n          >\n            {t(\"viewOptions.clearAll\")}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/client/components/filter-builder/index.d.mts

@@ -0,0 +1,5 @@
+import { FilterOperator, FilterRule, SortConfig, ViewConfiguration } from "../../../shared/types/saved-views.types.mjs";
+import "./filter-builder-sheet.mjs";
+import "./columns-tab.mjs";
+import "./filters-tab.mjs";
+import "./saved-views-tab.mjs";

package/dist/client/components/filter-builder/saved-views-tab.d.mts

@@ -0,0 +1 @@
+import "react/jsx-runtime";

package/dist/client/components/filter-builder/saved-views-tab.mjs

@@ -0,0 +1,125 @@
+import { useTranslation } from "../../i18n/hooks.mjs";
+import { Button } from "../ui/button.mjs";
+import { Input } from "../ui/input.mjs";
+import { Icon } from "@iconify/react";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/filter-builder/saved-views-tab.tsx
+function SavedViewsTab({ collection, currentConfig, savedViews, isLoading, onLoadView, onSaveView, onDeleteView }) {
+	const { t } = useTranslation();
+	const [viewName, setViewName] = useState("");
+	const handleSave = () => {
+		if (!viewName.trim()) return;
+		onSaveView(viewName.trim(), currentConfig);
+		setViewName("");
+	};
+	const hasActiveConfig = currentConfig.filters.length > 0 || currentConfig.sortConfig !== null || currentConfig.visibleColumns.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6 py-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "bg-primary/5 p-4 border border-primary/20 rounded-lg",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "block text-xs font-semibold uppercase text-primary mb-2",
+					children: t("viewOptions.saveCurrentConfig")
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx(Input, {
+						className: "flex-1 h-9 rounded-md",
+						placeholder: t("viewOptions.viewNamePlaceholder"),
+						value: viewName,
+						onChange: (e) => setViewName(e.target.value),
+						onKeyDown: (e) => e.key === "Enter" && handleSave()
+					}), /* @__PURE__ */ jsx(Button, {
+						onClick: handleSave,
+						disabled: !viewName.trim(),
+						size: "sm",
+						className: "h-9 px-3 rounded-md",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:floppy-disk",
+							width: 16,
+							height: 16
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground mt-2",
+					children: t("viewOptions.saveDescription")
+				}),
+				!hasActiveConfig && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-warning mt-1",
+					children: t("viewOptions.noChangesToSave")
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-xs font-semibold uppercase text-muted-foreground mb-2",
+					children: t("viewOptions.savedViews")
+				}),
+				isLoading && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-center p-4 text-muted-foreground",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:spinner-gap",
+						className: "size-5 animate-spin"
+					})
+				}),
+				!isLoading && savedViews.length === 0 && /* @__PURE__ */ jsx("div", {
+					className: "text-center p-4 text-muted-foreground text-xs italic",
+					children: t("viewOptions.noSavedViews")
+				}),
+				!isLoading && savedViews.map((view) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "flex w-full items-center justify-between p-3 border border-border hover:border-primary/50 hover:shadow-sm bg-background group cursor-pointer transition-all rounded-lg text-left",
+					onClick: () => onLoadView(view),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-sm font-medium truncate group-hover:text-primary transition-colors",
+							children: view.name
+						}), /* @__PURE__ */ jsxs("p", {
+							className: "text-xs text-muted-foreground flex gap-2",
+							children: [
+								/* @__PURE__ */ jsx("span", { children: t("viewOptions.filtersCount", { count: view.configuration.filters.length }) }),
+								/* @__PURE__ */ jsx("span", { children: "•" }),
+								/* @__PURE__ */ jsx("span", { children: t("viewOptions.columnsCount", { count: view.configuration.visibleColumns.length }) }),
+								view.isDefault && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: "•" }), /* @__PURE__ */ jsx("span", {
+									className: "text-primary",
+									children: t("viewOptions.defaultView")
+								})] })
+							]
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon-sm",
+							onClick: (e) => {
+								e.stopPropagation();
+								onDeleteView(view.id);
+							},
+							className: "opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive",
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:trash",
+								width: 14,
+								height: 14
+							})
+						}), /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:arrow-right",
+							width: 14,
+							height: 14,
+							className: "opacity-0 group-hover:opacity-100 text-primary transition-opacity"
+						})]
+					})]
+				}, view.id))
+			]
+		})]
+	});
+}
+
+//#endregion
+export { SavedViewsTab };
+//# sourceMappingURL=saved-views-tab.mjs.map

package/dist/client/components/filter-builder/saved-views-tab.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"saved-views-tab.mjs","names":[],"sources":["../../../../src/client/components/filter-builder/saved-views-tab.tsx"],"sourcesContent":["import { Icon } from \"@iconify/react\";\nimport { useState } from \"react\";\nimport { useTranslation } from \"../../i18n/index.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Input } from \"../ui/input.js\";\nimport type { FilterBuilderProps, SavedView } from \"./types.js\";\n\nexport interface SavedViewsTabProps {\n\tcollection: string;\n\tcurrentConfig: FilterBuilderProps[\"currentConfig\"];\n\tsavedViews: SavedView[];\n\tisLoading: boolean;\n\tonLoadView: (view: SavedView) => void;\n\tonSaveView: (\n\t\tname: string,\n\t\tconfig: FilterBuilderProps[\"currentConfig\"],\n\t) => void;\n\tonDeleteView: (viewId: string) => void;\n}\n\nexport function SavedViewsTab({\n\tcollection,\n\tcurrentConfig,\n\tsavedViews,\n\tisLoading,\n\tonLoadView,\n\tonSaveView,\n\tonDeleteView,\n}: SavedViewsTabProps) {\n\tconst { t } = useTranslation();\n\tconst [viewName, setViewName] = useState(\"\");\n\n\tconst handleSave = () => {\n\t\tif (!viewName.trim()) return;\n\t\tonSaveView(viewName.trim(), currentConfig);\n\t\tsetViewName(\"\");\n\t};\n\n\tconst hasActiveConfig =\n\t\tcurrentConfig.filters.length > 0 ||\n\t\tcurrentConfig.sortConfig !== null ||\n\t\tcurrentConfig.visibleColumns.length > 0;\n\n\treturn (\n\t\t<div className=\"space-y-6 py-4\">\n\t\t\t{/* Save Current Configuration */}\n\t\t\t<div className=\"bg-primary/5 p-4 border border-primary/20 rounded-lg\">\n\t\t\t\t<p className=\"block text-xs font-semibold uppercase text-primary mb-2\">\n\t\t\t\t\t{t(\"viewOptions.saveCurrentConfig\")}\n\t\t\t\t</p>\n\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\tclassName=\"flex-1 h-9 rounded-md\"\n\t\t\t\t\t\tplaceholder={t(\"viewOptions.viewNamePlaceholder\")}\n\t\t\t\t\t\tvalue={viewName}\n\t\t\t\t\t\tonChange={(e) => setViewName(e.target.value)}\n\t\t\t\t\t\tonKeyDown={(e) => e.key === \"Enter\" && handleSave()}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={handleSave}\n\t\t\t\t\t\tdisabled={!viewName.trim()}\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tclassName=\"h-9 px-3 rounded-md\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon=\"ph:floppy-disk\" width={16} height={16} />\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t\t<p className=\"text-xs text-muted-foreground mt-2\">\n\t\t\t\t\t{t(\"viewOptions.saveDescription\")}\n\t\t\t\t</p>\n\t\t\t\t{!hasActiveConfig && (\n\t\t\t\t\t<p className=\"text-xs text-warning mt-1\">\n\t\t\t\t\t\t{t(\"viewOptions.noChangesToSave\")}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{/* Saved Views List */}\n\t\t\t<div className=\"space-y-2\">\n\t\t\t\t<p className=\"text-xs font-semibold uppercase text-muted-foreground mb-2\">\n\t\t\t\t\t{t(\"viewOptions.savedViews\")}\n\t\t\t\t</p>\n\n\t\t\t\t{isLoading && (\n\t\t\t\t\t<div className=\"flex justify-center p-4 text-muted-foreground\">\n\t\t\t\t\t\t<Icon icon=\"ph:spinner-gap\" className=\"size-5 animate-spin\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{!isLoading && savedViews.length === 0 && (\n\t\t\t\t\t<div className=\"text-center p-4 text-muted-foreground text-xs italic\">\n\t\t\t\t\t\t{t(\"viewOptions.noSavedViews\")}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{!isLoading &&\n\t\t\t\t\tsavedViews.map((view) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tkey={view.id}\n\t\t\t\t\t\t\tclassName=\"flex w-full items-center justify-between p-3 border border-border hover:border-primary/50 hover:shadow-sm bg-background group cursor-pointer transition-all rounded-lg text-left\"\n\t\t\t\t\t\t\tonClick={() => onLoadView(view)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"flex-1 min-w-0\">\n\t\t\t\t\t\t\t\t<p className=\"text-sm font-medium truncate group-hover:text-primary transition-colors\">\n\t\t\t\t\t\t\t\t\t{view.name}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground flex gap-2\">\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t{t(\"viewOptions.filtersCount\", {\n\t\t\t\t\t\t\t\t\t\t\tcount: view.configuration.filters.length,\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span>•</span>\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t{t(\"viewOptions.columnsCount\", {\n\t\t\t\t\t\t\t\t\t\t\tcount: view.configuration.visibleColumns.length,\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{view.isDefault && (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<span>•</span>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-primary\">\n\t\t\t\t\t\t\t\t\t\t\t\t{t(\"viewOptions.defaultView\")}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tonDeleteView(view.id);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tclassName=\"opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:trash\" width={14} height={14} />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon=\"ph:arrow-right\"\n\t\t\t\t\t\t\t\t\twidth={14}\n\t\t\t\t\t\t\t\t\theight={14}\n\t\t\t\t\t\t\t\t\tclassName=\"opacity-0 group-hover:opacity-100 text-primary transition-opacity\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,cAAc,EAC7B,YACA,eACA,YACA,WACA,YACA,YACA,gBACsB;CACtB,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,SAAS,GAAG;CAE5C,MAAM,mBAAmB;AACxB,MAAI,CAAC,SAAS,MAAM,CAAE;AACtB,aAAW,SAAS,MAAM,EAAE,cAAc;AAC1C,cAAY,GAAG;;CAGhB,MAAM,kBACL,cAAc,QAAQ,SAAS,KAC/B,cAAc,eAAe,QAC7B,cAAc,eAAe,SAAS;AAEvC,QACC,qBAAC;EAAI,WAAU;aAEd,qBAAC;GAAI,WAAU;;IACd,oBAAC;KAAE,WAAU;eACX,EAAE,gCAAgC;MAChC;IACJ,qBAAC;KAAI,WAAU;gBACd,oBAAC;MACA,WAAU;MACV,aAAa,EAAE,kCAAkC;MACjD,OAAO;MACP,WAAW,MAAM,YAAY,EAAE,OAAO,MAAM;MAC5C,YAAY,MAAM,EAAE,QAAQ,WAAW,YAAY;OAClD,EACF,oBAAC;MACA,SAAS;MACT,UAAU,CAAC,SAAS,MAAM;MAC1B,MAAK;MACL,WAAU;gBAEV,oBAAC;OAAK,MAAK;OAAiB,OAAO;OAAI,QAAQ;QAAM;OAC7C;MACJ;IACN,oBAAC;KAAE,WAAU;eACX,EAAE,8BAA8B;MAC9B;IACH,CAAC,mBACD,oBAAC;KAAE,WAAU;eACX,EAAE,8BAA8B;MAC9B;;IAEA,EAGN,qBAAC;GAAI,WAAU;;IACd,oBAAC;KAAE,WAAU;eACX,EAAE,yBAAyB;MACzB;IAEH,aACA,oBAAC;KAAI,WAAU;eACd,oBAAC;MAAK,MAAK;MAAiB,WAAU;OAAwB;MACzD;IAGN,CAAC,aAAa,WAAW,WAAW,KACpC,oBAAC;KAAI,WAAU;eACb,EAAE,2BAA2B;MACzB;IAGN,CAAC,aACD,WAAW,KAAK,SACf,qBAAC;KACA,MAAK;KAEL,WAAU;KACV,eAAe,WAAW,KAAK;gBAE/B,qBAAC;MAAI,WAAU;iBACd,oBAAC;OAAE,WAAU;iBACX,KAAK;QACH,EACJ,qBAAC;OAAE,WAAU;;QACZ,oBAAC,oBACC,EAAE,4BAA4B,EAC9B,OAAO,KAAK,cAAc,QAAQ,QAClC,CAAC,GACI;QACP,oBAAC,oBAAK,MAAQ;QACd,oBAAC,oBACC,EAAE,4BAA4B,EAC9B,OAAO,KAAK,cAAc,eAAe,QACzC,CAAC,GACI;QACN,KAAK,aACL,4CACC,oBAAC,oBAAK,MAAQ,EACd,oBAAC;SAAK,WAAU;mBACd,EAAE,0BAA0B;UACvB,IACL;;QAED;OACC,EACN,qBAAC;MAAI,WAAU;iBACd,oBAAC;OACA,SAAQ;OACR,MAAK;OACL,UAAU,MAAM;AACf,UAAE,iBAAiB;AACnB,qBAAa,KAAK,GAAG;;OAEtB,WAAU;iBAEV,oBAAC;QAAK,MAAK;QAAW,OAAO;QAAI,QAAQ;SAAM;QACvC,EACT,oBAAC;OACA,MAAK;OACL,OAAO;OACP,QAAQ;OACR,WAAU;QACT;OACG;OAhDD,KAAK,GAiDF,CACR;;IACE;GACD"}