@questpie/admin 1.1.1 → 3.0.0

package/dist/client/views/collection/table-view.mjs

@@ -0,0 +1,832 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { selectRealtime, useAdminStore } from "../../runtime/provider.mjs";
+import { useSafeContentLocales } from "../../runtime/content-locales-provider.mjs";
+import { useScopedLocale } from "../../runtime/locale-scope.mjs";
+import { Button } from "../../components/ui/button.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select.mjs";
+import { LocaleSwitcher } from "../../components/locale-switcher.mjs";
+import { Checkbox } from "../../components/ui/checkbox.mjs";
+import { flattenOptions } from "../../components/primitives/types.mjs";
+import { createActionRegistryProxy } from "../../builder/types/action-registry.mjs";
+import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
+import { useSuspenseCollectionMeta } from "../../hooks/use-collection-meta.mjs";
+import { ActionDialog } from "../../components/actions/action-dialog.mjs";
+import { useSidebarSearchParam } from "../../hooks/use-sidebar-search-param.mjs";
+import { useCollectionDelete, useCollectionList, useCollectionRestore } from "../../hooks/use-collection.mjs";
+import { useSessionState } from "../../hooks/use-current-user.mjs";
+import { getLockUser, useLocks } from "../../hooks/use-locks.mjs";
+import { mergeServerActions, useServerActions } from "../../hooks/use-server-actions.mjs";
+import { TableViewSkeleton } from "./view-skeletons.mjs";
+import { useDebouncedValue, useSearch } from "../../hooks/use-search.mjs";
+import { HeaderActions } from "../../components/actions/header-actions.mjs";
+import { FilterBuilderSheet } from "../../components/filter-builder/filter-builder-sheet.mjs";
+import { EmptyState } from "../../components/ui/empty-state.mjs";
+import { SearchInput } from "../../components/ui/search-input.mjs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table.mjs";
+import { Toolbar, ToolbarSection, ToolbarSeparator } from "../../components/ui/toolbar.mjs";
+import { useActions } from "../../hooks/use-action.mjs";
+import { useRealtimeHighlight } from "../../hooks/use-realtime-highlight.mjs";
+import { useDeleteSavedView, useSaveView, useSavedViews } from "../../hooks/use-saved-views.mjs";
+import { useViewState } from "../../hooks/use-view-state.mjs";
+import { autoExpandFields, hasFieldsToExpand } from "../../utils/auto-expand-fields.mjs";
+import { BulkActionToolbar } from "./bulk-action-toolbar.mjs";
+import { computeDefaultColumns, getAllAvailableFields } from "./columns/column-defaults.mjs";
+import { buildColumns } from "./columns/build-columns.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { Suspense, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+
+//#region src/client/views/collection/table-view.tsx
+/**
+* Table View - Default list view component
+*
+* Renders collection items in a table with columns, sorting, filtering, and search.
+* This is the default list view registered in the admin view registry.
+*/
+const actionRegistry = createActionRegistryProxy();
+function resolveBuiltinListAction(reference) {
+	const type = typeof reference === "string" ? reference : typeof reference?.type === "string" ? reference.type : void 0;
+	const config = typeof reference === "object" && reference !== null ? reference.config : void 0;
+	if (!type) return null;
+	switch (type) {
+		case "create": return actionRegistry.create(config);
+		case "delete": return actionRegistry.delete(config);
+		case "deleteMany": return actionRegistry.deleteMany(config);
+		case "duplicate": return actionRegistry.duplicate(config);
+		default: return null;
+	}
+}
+function mapActionReferencesToDefinitions(references) {
+	if (!Array.isArray(references)) return [];
+	return references.map((reference) => resolveBuiltinListAction(reference)).filter((action) => action !== null);
+}
+function mapListSchemaToConfig(list) {
+	if (!list) return void 0;
+	const config = {};
+	if (list.columns?.length) config.columns = list.columns;
+	if (list.defaultSort) config.defaultSort = list.defaultSort;
+	if (list.searchable?.length) {
+		config.searchFields = list.searchable;
+		config.searchable = true;
+	}
+	if (list.actions && typeof list.actions === "object") {
+		const listActions = list.actions;
+		const header = listActions.header ? {
+			primary: mapActionReferencesToDefinitions(listActions.header.primary),
+			secondary: mapActionReferencesToDefinitions(listActions.header.secondary)
+		} : void 0;
+		const bulk = mapActionReferencesToDefinitions(listActions.bulk);
+		if (header || bulk.length > 0) config.actions = {
+			...header ? { header } : {},
+			...bulk.length > 0 ? { bulk } : {}
+		};
+	}
+	return config;
+}
+/**
+* TableView - Default table-based list view for collections
+*
+* Uses Suspense for data loading to eliminate race conditions.
+* Critical data (collectionMeta, user session, preferences) is loaded
+* before rendering, ensuring stable initial state.
+*
+* Features:
+* - Auto-generates columns from collection config
+* - Search and filter functionality
+* - Sortable columns
+* - Saved views support
+* - Auto-expands upload/relation fields
+*
+* @example
+* ```tsx
+* // Used automatically via registry when navigating to /admin/collections/:name
+* // Can also be used directly:
+* <TableView
+*   collection="posts"
+*   config={postsConfig}
+*   navigate={navigate}
+*   basePath="/admin"
+* />
+* ```
+*/
+function TableView(props) {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(TableViewSkeleton, {});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Suspense, {
+			fallback: t0,
+			children: /* @__PURE__ */ jsx(TableViewInner, { ...props })
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+/**
+* Inner component that uses Suspense queries.
+* This component will suspend until all critical data is loaded.
+*/
+function TableViewInner({ collection, config, viewConfig, navigate, basePath = "/admin", showSearch = true, showFilters = true, showToolbar = true, realtime, headerActions, emptyState, actionsConfig }) {
+	"use no memo";
+	const globalRealtimeConfig = useAdminStore(selectRealtime);
+	const { fields: resolvedFields, schema } = useCollectionFields(collection, { fallbackFields: config?.fields });
+	const schemaListConfig = mapListSchemaToConfig(schema?.admin?.list);
+	const resolvedListConfig = viewConfig ?? (config?.list)?.["~config"] ?? config?.list ?? schemaListConfig;
+	const resolvedRealtime = realtime ?? resolvedListConfig?.realtime ?? globalRealtimeConfig.enabled;
+	const resolvedActionsConfig = actionsConfig ?? resolvedListConfig?.actions;
+	const { serverActions } = useServerActions({ collection });
+	const mergedActionsConfig = React.useMemo(() => mergeServerActions(resolvedActionsConfig ?? {}, serverActions), [resolvedActionsConfig, serverActions]);
+	const { user } = useSessionState();
+	const { data: collectionMeta } = useSuspenseCollectionMeta(collection);
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	const { locale: contentLocale, setLocale: setContentLocale } = useScopedLocale();
+	const localeOptions = useSafeContentLocales()?.locales ?? [];
+	const { helpers: actionHelpers, actions, dialogAction, dialogItem, openDialog, closeDialog } = useActions({
+		collection,
+		actionsConfig: mergedActionsConfig
+	});
+	const columns = useMemo(() => buildColumns({
+		config: {
+			fields: resolvedFields,
+			list: resolvedListConfig
+		},
+		fallbackColumns: ["id"],
+		buildAllColumns: true,
+		meta: collectionMeta
+	}), [
+		resolvedFields,
+		resolvedListConfig,
+		collectionMeta
+	]);
+	const expandedFields = useMemo(() => autoExpandFields({
+		fields: resolvedFields,
+		list: resolvedListConfig,
+		relations: collectionMeta?.relations
+	}), [
+		resolvedFields,
+		resolvedListConfig,
+		collectionMeta?.relations
+	]);
+	const [isSheetOpen, setIsSheetOpen] = useSidebarSearchParam("view-options", { legacyKey: "viewOptions" });
+	const [searchTerm, setSearchTerm] = useState("");
+	const defaultColumns = useMemo(() => computeDefaultColumns(resolvedFields, {
+		meta: collectionMeta,
+		configuredColumns: resolvedListConfig?.columns
+	}), [
+		resolvedFields,
+		resolvedListConfig?.columns,
+		collectionMeta
+	]);
+	const viewState = useViewState(defaultColumns, { realtime: resolvedRealtime }, collection, user?.id);
+	const effectiveRealtime = viewState.config.realtime ?? resolvedRealtime;
+	const queryOptions = useMemo(() => {
+		const options = {};
+		if (collectionMeta?.softDelete) options.includeDeleted = !!viewState.config.includeDeleted;
+		if (hasFieldsToExpand(expandedFields)) options.with = expandedFields;
+		if (viewState.config.filters.length > 0) {
+			const whereConditions = { ...options.where };
+			const relationNames = collectionMeta?.relations ?? [];
+			const isEmptyValue = (val) => {
+				if (val === void 0 || val === null) return true;
+				if (typeof val === "string") return val.trim().length === 0;
+				if (Array.isArray(val)) return val.length === 0;
+				return false;
+			};
+			const normalizeSelectValue = (val_0, fieldOptions) => {
+				const optionsList = fieldOptions?.options;
+				if (!optionsList) return val_0;
+				const map = new Map(flattenOptions(optionsList).map((opt) => [String(opt.value), opt.value]));
+				const mapValue = (item) => map.get(String(item)) ?? item;
+				if (Array.isArray(val_0)) return val_0.map(mapValue);
+				if (val_0 === void 0 || val_0 === null) return val_0;
+				return mapValue(val_0);
+			};
+			const coerceValue = (val_1, fieldDef) => {
+				if (!fieldDef) return val_1;
+				const fieldType = fieldDef?.name ?? "text";
+				const fieldOptions_0 = fieldDef?.["~options"] ?? {};
+				if (fieldType === "number" && typeof val_1 === "string") {
+					const parsed = Number(val_1);
+					return Number.isNaN(parsed) ? val_1 : parsed;
+				}
+				if ((fieldType === "checkbox" || fieldType === "switch") && typeof val_1 === "string") {
+					if (val_1 === "true") return true;
+					if (val_1 === "false") return false;
+				}
+				if (fieldType === "select") return normalizeSelectValue(val_1, fieldOptions_0);
+				return val_1;
+			};
+			const toArray = (val_2) => {
+				if (Array.isArray(val_2)) return val_2;
+				if (val_2 === void 0 || val_2 === null || val_2 === "") return [];
+				return [val_2];
+			};
+			const buildRelationCondition = (operator, val_3, relationType) => {
+				const isMultiple = relationType === "multiple";
+				const ids = toArray(val_3);
+				switch (operator) {
+					case "equals": return isMultiple ? { some: { id: val_3 } } : { is: { id: val_3 } };
+					case "not_equals": return isMultiple ? { none: { id: val_3 } } : { isNot: { id: val_3 } };
+					case "in": return isMultiple ? { some: { id: { in: ids } } } : { is: { id: { in: ids } } };
+					case "not_in": return isMultiple ? { none: { id: { in: ids } } } : { isNot: { id: { in: ids } } };
+					case "some": return { some: { id: { in: ids } } };
+					case "every": return { every: { id: { in: ids } } };
+					case "none": return { none: { id: { in: ids } } };
+					case "is_empty": return isMultiple ? { none: {} } : { isNot: {} };
+					case "is_not_empty": return isMultiple ? { some: {} } : { is: {} };
+					default: return;
+				}
+			};
+			for (const filter of viewState.config.filters) {
+				const { field, operator: operator_0, value } = filter;
+				if (!field || field === "_title") continue;
+				const fieldDef_0 = resolvedFields?.[field];
+				const fieldType_0 = fieldDef_0?.name ?? "text";
+				const fieldOptions_1 = fieldDef_0?.["~options"] ?? {};
+				const relationName = fieldType_0 === "relation" ? fieldOptions_1.relationName ?? field : void 0;
+				const hasRelation = relationName && (relationNames.length === 0 || relationNames.includes(relationName));
+				const isRelationField = fieldType_0 === "relation" && !!hasRelation;
+				if (operator_0 !== "is_empty" && operator_0 !== "is_not_empty" && isEmptyValue(value)) continue;
+				const normalizedValue = coerceValue(value, fieldDef_0);
+				if (isRelationField && relationName) {
+					const condition = buildRelationCondition(operator_0, normalizedValue, fieldOptions_1.type === "multiple" ? "multiple" : "single");
+					if (condition) whereConditions[relationName] = condition;
+					continue;
+				}
+				switch (operator_0) {
+					case "equals":
+						whereConditions[field] = normalizedValue;
+						break;
+					case "not_equals":
+						whereConditions[field] = { ne: normalizedValue };
+						break;
+					case "contains":
+						whereConditions[field] = { contains: normalizedValue };
+						break;
+					case "not_contains":
+						whereConditions[field] = { notIlike: `%${normalizedValue}%` };
+						break;
+					case "starts_with":
+						whereConditions[field] = { startsWith: normalizedValue };
+						break;
+					case "ends_with":
+						whereConditions[field] = { endsWith: normalizedValue };
+						break;
+					case "greater_than":
+						whereConditions[field] = { gt: normalizedValue };
+						break;
+					case "less_than":
+						whereConditions[field] = { lt: normalizedValue };
+						break;
+					case "greater_than_or_equal":
+						whereConditions[field] = { gte: normalizedValue };
+						break;
+					case "less_than_or_equal":
+						whereConditions[field] = { lte: normalizedValue };
+						break;
+					case "in":
+						whereConditions[field] = { in: Array.isArray(normalizedValue) ? normalizedValue : [normalizedValue] };
+						break;
+					case "not_in":
+						whereConditions[field] = { notIn: Array.isArray(normalizedValue) ? normalizedValue : [normalizedValue] };
+						break;
+					case "is_empty":
+						whereConditions[field] = { isNull: true };
+						break;
+					case "is_not_empty":
+						whereConditions[field] = { isNotNull: true };
+						break;
+				}
+			}
+			options.where = whereConditions;
+		}
+		if (viewState.config.sortConfig) {
+			const { field: field_0, direction } = viewState.config.sortConfig;
+			options.orderBy = { [field_0]: direction };
+		}
+		const pageSize = viewState.config.pagination?.pageSize ?? 25;
+		const page = viewState.config.pagination?.page ?? 1;
+		options.limit = pageSize;
+		options.offset = (page - 1) * pageSize;
+		return options;
+	}, [
+		expandedFields,
+		viewState.config.filters,
+		viewState.config.includeDeleted,
+		viewState.config.sortConfig,
+		viewState.config.pagination?.page,
+		viewState.config.pagination?.pageSize,
+		resolvedFields,
+		collectionMeta?.softDelete,
+		collectionMeta?.relations
+	]);
+	const debouncedSearchTerm = useDebouncedValue(searchTerm, 300);
+	const isSearching = debouncedSearchTerm.trim().length > 0;
+	const { data: searchData, isLoading: searchLoading, isFetching: searchFetching } = useSearch({
+		collection,
+		query: debouncedSearchTerm,
+		limit: 100,
+		highlights: true
+	}, { enabled: isSearching });
+	const { data: listData, isLoading: listLoading, error: listError } = useCollectionList(collection, queryOptions, { enabled: !isSearching }, { realtime: effectiveRealtime });
+	const isLoading = isSearching ? searchLoading : listLoading;
+	const isSearchActive = isSearching && searchFetching;
+	const { data: savedViewsData, isLoading: savedViewsLoading } = useSavedViews(collection);
+	const saveViewMutation = useSaveView(collection);
+	const deleteViewMutation = useDeleteSavedView(collection);
+	const deleteMutation = useCollectionDelete(collection);
+	const restoreMutation = useCollectionRestore(collection);
+	const availableFields = useMemo(() => {
+		return getAllAvailableFields(resolvedFields, { meta: collectionMeta });
+	}, [resolvedFields, collectionMeta]);
+	const visibleColumnDefs = useMemo(() => {
+		const selectCol = {
+			id: "_select",
+			header: ({ table: t_0 }) => {
+				const isAllSelected = t_0.getIsAllPageRowsSelected();
+				const isSomeSelected = t_0.getIsSomePageRowsSelected();
+				return /* @__PURE__ */ jsx("div", {
+					role: "presentation",
+					onClick: (e) => e.stopPropagation(),
+					onKeyDown: (e_0) => e_0.stopPropagation(),
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: isAllSelected,
+						indeterminate: !isAllSelected && isSomeSelected,
+						onCheckedChange: (checked) => t_0.toggleAllPageRowsSelected(!!checked),
+						"aria-label": "Select all"
+					})
+				});
+			},
+			cell: ({ row }) => {
+				return /* @__PURE__ */ jsx("div", {
+					role: "presentation",
+					onClick: (e_1) => e_1.stopPropagation(),
+					onKeyDown: (e_2) => e_2.stopPropagation(),
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: row.getIsSelected(),
+						disabled: !row.getCanSelect(),
+						onCheckedChange: (checked_0) => row.toggleSelected(!!checked_0),
+						"aria-label": "Select row"
+					})
+				});
+			},
+			size: 40,
+			enableSorting: false,
+			enableHiding: false
+		};
+		const titleFieldName = collectionMeta?.title?.fieldName;
+		const titleColName = collectionMeta?.title?.type === "field" && titleFieldName ? titleFieldName : "_title";
+		const orderedColumns = [selectCol];
+		const titleCol = columns.find((c$1) => c$1.accessorKey === titleColName || c$1.id === titleColName);
+		if (titleCol) orderedColumns.push(titleCol);
+		const columnsToShow = viewState.config.visibleColumns.length > 0 ? viewState.config.visibleColumns : defaultColumns.length > 0 ? defaultColumns : columns.map((c_0) => c_0.accessorKey || c_0.id).filter(Boolean);
+		const columnMap = /* @__PURE__ */ new Map();
+		for (const c_1 of columns) {
+			const key = c_1.accessorKey || c_1.id;
+			if (key) columnMap.set(key, c_1);
+		}
+		for (const colName of columnsToShow) {
+			if (colName === titleColName) continue;
+			const col = columnMap.get(colName);
+			if (col) orderedColumns.push(col);
+		}
+		return orderedColumns;
+	}, [
+		columns,
+		viewState.config.visibleColumns,
+		defaultColumns,
+		collectionMeta
+	]);
+	const [sorting, setSorting] = React.useState(() => {
+		const sortSource = viewState.config.sortConfig ?? resolvedListConfig?.defaultSort;
+		if (sortSource?.field) return [{
+			id: sortSource.field,
+			desc: sortSource.direction === "desc"
+		}];
+		return [];
+	});
+	const [rowSelection, setRowSelection] = React.useState({});
+	const handleSortingChange = React.useCallback((updater) => {
+		const newSorting = typeof updater === "function" ? updater(sorting) : updater;
+		setSorting(newSorting);
+		if (newSorting.length > 0) viewState.setSort({
+			field: newSorting[0].id,
+			direction: newSorting[0].desc ? "desc" : "asc"
+		});
+		else viewState.setSort(null);
+	}, [sorting, viewState]);
+	const items = useMemo(() => {
+		if (isSearching) return searchData?.docs ?? [];
+		return listData?.docs ?? [];
+	}, [
+		isSearching,
+		searchData?.docs,
+		listData?.docs
+	]);
+	const { isHighlighted } = useRealtimeHighlight(items, { enabled: effectiveRealtime && !isSearching });
+	const { getLock, isLocked: isDocLocked } = useLocks({
+		resourceType: "collection",
+		resource: collection,
+		realtime: effectiveRealtime
+	});
+	const filteredItems = items;
+	const table = useReactTable({
+		data: filteredItems,
+		columns: visibleColumnDefs,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		onSortingChange: handleSortingChange,
+		enableRowSelection: true,
+		onRowSelectionChange: setRowSelection,
+		getRowId: (row_0) => row_0.id,
+		state: {
+			sorting,
+			rowSelection
+		}
+	});
+	const handleSaveView = (name, config_0) => {
+		saveViewMutation.mutate({
+			name,
+			configuration: config_0
+		});
+	};
+	const handleDeleteView = (viewId) => {
+		deleteViewMutation.mutate(viewId);
+	};
+	const handleRowClick = (item_0) => {
+		navigate(`${basePath}/collections/${collection}/${item_0.id}`);
+	};
+	const handleBulkDelete = React.useCallback(async (ids_0) => {
+		const results = await Promise.allSettled(ids_0.map((id) => deleteMutation.mutateAsync({ id })));
+		const successCount = results.filter((r) => r.status === "fulfilled").length;
+		const failCount = results.filter((r_0) => r_0.status === "rejected").length;
+		if (failCount === 0) actionHelpers.toast.success(t("collection.bulkDeleteSuccess", { count: successCount }));
+		else if (successCount === 0) actionHelpers.toast.error(t("collection.bulkDeleteError"));
+		else actionHelpers.toast.warning(t("collection.bulkDeletePartial", {
+			success: successCount,
+			failed: failCount
+		}));
+	}, [
+		deleteMutation,
+		actionHelpers,
+		t
+	]);
+	const handleBulkRestore = React.useCallback(async (ids_1) => {
+		const results_0 = await Promise.allSettled(ids_1.map((id_0) => restoreMutation.mutateAsync({ id: id_0 })));
+		const successCount_0 = results_0.filter((r_1) => r_1.status === "fulfilled").length;
+		const failCount_0 = results_0.filter((r_2) => r_2.status === "rejected").length;
+		if (failCount_0 === 0) actionHelpers.toast.success(t("collection.bulkRestoreSuccess", { count: successCount_0 }));
+		else if (successCount_0 === 0) actionHelpers.toast.error(t("collection.bulkRestoreError"));
+		else actionHelpers.toast.warning(t("collection.bulkRestorePartial", {
+			success: successCount_0,
+			failed: failCount_0
+		}));
+	}, [
+		restoreMutation,
+		actionHelpers,
+		t
+	]);
+	if (listError && !isSearching) return /* @__PURE__ */ jsx("div", {
+		className: "container",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex h-64 flex-col items-center justify-center gap-3",
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:warning-circle",
+					className: "text-destructive size-8"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm",
+					children: listError instanceof Error ? listError.message : t("errors.failedToLoad")
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => window.location.reload(),
+					children: t("common.retry")
+				})
+			]
+		})
+	});
+	if (isLoading) return /* @__PURE__ */ jsx("div", {
+		className: "container",
+		"aria-busy": "true",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex h-64 items-center justify-center",
+			role: "status",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: "ph:spinner-gap",
+				className: "size-6 animate-spin",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Loading collection data..."
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "qa-table-view min-w-0",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "qa-table-view__inner min-w-0 space-y-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "qa-table-view__header flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ jsx("h1", {
+								className: "qa-table-view__title truncate text-2xl font-extrabold tracking-tight md:text-3xl",
+								children: resolveText(config?.label ?? schema?.admin?.config?.label, collection)
+							}), localeOptions.length > 0 && /* @__PURE__ */ jsx(LocaleSwitcher, {
+								locales: localeOptions,
+								value: contentLocale,
+								onChange: setContentLocale
+							})]
+						}), config?.description ?? schema?.admin?.config?.description ? /* @__PURE__ */ jsx("p", {
+							className: "qa-table-view__description text-muted-foreground mt-1 line-clamp-2 text-sm",
+							children: resolveText(config?.description ?? schema?.admin?.config?.description)
+						}) : null]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 items-center gap-2",
+						children: [headerActions, ((actions.header.primary?.length ?? 0) > 0 || (actions.header.secondary?.length ?? 0) > 0) && /* @__PURE__ */ jsx(HeaderActions, {
+							actions: actions.header,
+							collection,
+							helpers: actionHelpers,
+							onOpenDialog: (action) => openDialog(action)
+						})]
+					})]
+				}),
+				showToolbar && /* @__PURE__ */ jsx("div", {
+					className: "space-y-2",
+					children: /* @__PURE__ */ jsxs(Toolbar, { children: [showSearch && /* @__PURE__ */ jsx(ToolbarSection, {
+						className: "flex-1",
+						children: /* @__PURE__ */ jsx(SearchInput, {
+							value: searchTerm,
+							onChange: (e_3) => setSearchTerm(e_3.target.value),
+							onClear: () => setSearchTerm(""),
+							placeholder: t("common.search"),
+							containerClassName: "border-none bg-transparent dark:bg-transparent"
+						})
+					}), showFilters && /* @__PURE__ */ jsxs(Fragment, { children: [showSearch && /* @__PURE__ */ jsx(ToolbarSeparator, {}), /* @__PURE__ */ jsx(ToolbarSection, { children: /* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => setIsSheetOpen(true),
+						className: "gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:sliders-horizontal",
+							width: 16,
+							height: 16
+						}), t("viewOptions.title")]
+					}) })] })] })
+				}),
+				/* @__PURE__ */ jsx(BulkActionToolbar, {
+					table,
+					actions: actions.bulk,
+					collection,
+					helpers: actionHelpers,
+					totalCount: isSearching ? searchData?.total : listData?.totalDocs,
+					pageCount: filteredItems.length,
+					onOpenDialog: (action_0, items_0) => openDialog(action_0, items_0),
+					onBulkDelete: handleBulkDelete,
+					onBulkRestore: handleBulkRestore,
+					filterCount: viewState.config.filters.length,
+					onOpenFilters: () => setIsSheetOpen(true),
+					onClearFilters: () => viewState.setConfig({
+						...viewState.config,
+						filters: []
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "qa-table-view__table-wrapper bg-card border-border min-w-0 overflow-x-auto border",
+					children: [/* @__PURE__ */ jsxs(Table, {
+						"aria-label": resolveText(config?.label ?? schema?.admin?.config?.label, collection),
+						children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+							className: "hover:bg-transparent",
+							children: headerGroup.headers.map((header, headerIndex) => {
+								const stickyLeft = headerIndex === 0 ? 0 : headerIndex === 1 ? 36 : void 0;
+								const showStickyBorder = headerIndex === 1;
+								const isCheckboxCol = headerIndex === 0;
+								const sortDirection = header.column.getIsSorted();
+								const ariaSort = header.column.getCanSort() ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
+								return /* @__PURE__ */ jsx(TableHead, {
+									stickyLeft,
+									showStickyBorder,
+									className: isCheckboxCol ? "w-9 min-w-9 px-1.5" : void 0,
+									"aria-sort": ariaSort,
+									children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										className: header.column.getCanSort() ? "hover:text-foreground flex cursor-pointer items-center gap-2 transition-colors select-none" : "",
+										onClick: header.column.getToggleSortingHandler(),
+										"aria-label": header.column.getCanSort() ? `Sort by ${typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.column.id}` : void 0,
+										children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() && /* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											children: header.column.getIsSorted() === "asc" ? "↑" : "↓"
+										})]
+									})
+								}, header.id);
+							})
+						}, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row_1) => {
+							const isRowDeleted = !!row_1.original?.deletedAt;
+							return /* @__PURE__ */ jsx(TableRow, {
+								"data-state": row_1.getIsSelected() && "selected",
+								className: cn("group", isHighlighted(row_1.id) && "animate-realtime-pulse", isRowDeleted && "opacity-50"),
+								children: row_1.getVisibleCells().map((cell, cellIndex) => {
+									return /* @__PURE__ */ jsx(TableCell, {
+										stickyLeft: cellIndex === 0 ? 0 : cellIndex === 1 ? 36 : void 0,
+										showStickyBorder: cellIndex === 1,
+										className: cellIndex === 0 ? "w-9 min-w-9 px-1.5" : void 0,
+										children: cellIndex === 1 ? /* @__PURE__ */ jsxs("div", {
+											className: "flex items-center gap-2",
+											children: [
+												/* @__PURE__ */ jsx("button", {
+													type: "button",
+													onClick: () => handleRowClick(row_1.original),
+													className: "decoration-muted-foreground/50 hover:decoration-foreground cursor-pointer text-left underline underline-offset-2 transition-colors",
+													children: flexRender(cell.column.columnDef.cell, cell.getContext())
+												}),
+												isRowDeleted && /* @__PURE__ */ jsxs("span", {
+													className: "text-destructive bg-destructive/10 inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs",
+													children: [/* @__PURE__ */ jsx(Icon, {
+														icon: "ph:trash",
+														className: "size-3"
+													}), t("common.deleted")]
+												}),
+												isDocLocked(row_1.id) && (() => {
+													const lock = getLock(row_1.id);
+													const user_0 = lock ? getLockUser(lock) : null;
+													return /* @__PURE__ */ jsxs("span", {
+														className: "text-muted-foreground bg-muted inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs",
+														title: user_0?.name ?? user_0?.email ?? "Someone is editing",
+														children: [user_0?.image ? /* @__PURE__ */ jsx("img", {
+															src: user_0.image,
+															alt: "",
+															className: "size-4 rounded-full"
+														}) : /* @__PURE__ */ jsx(Icon, {
+															icon: "ph:pencil-simple",
+															className: "size-3"
+														}), /* @__PURE__ */ jsx("span", {
+															className: "max-w-20 truncate",
+															children: user_0?.name?.split(" ")[0] ?? t("table.editing")
+														})]
+													});
+												})()
+											]
+										}) : flexRender(cell.column.columnDef.cell, cell.getContext())
+									}, cell.id);
+								})
+							}, row_1.id);
+						}) })]
+					}), !table.getRowModel().rows.length && (emptyState || /* @__PURE__ */ jsx(EmptyState, {
+						title: "NO_RESULTS",
+						description: isSearching ? t("collectionSearch.noResults") : t("table.noItemsInCollection"),
+						height: "h-48"
+					}))]
+				}),
+				!isSearching && /* @__PURE__ */ jsxs("div", {
+					className: "qa-table-view__pagination flex items-center justify-between gap-4 py-2",
+					role: "navigation",
+					"aria-label": t("table.pagination"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "text-muted-foreground flex items-center gap-4 text-sm",
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						children: [/* @__PURE__ */ jsxs("span", { children: [
+							filteredItems.length > 0 ? `${((viewState.config.pagination?.page ?? 1) - 1) * (viewState.config.pagination?.pageSize ?? 25) + 1}-${Math.min(((viewState.config.pagination?.page ?? 1) - 1) * (viewState.config.pagination?.pageSize ?? 25) + (viewState.config.pagination?.pageSize ?? 25), listData?.totalDocs ?? filteredItems.length)}` : "0",
+							" ",
+							"of ",
+							listData?.totalDocs ?? 0
+						] }), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: "Show"
+							}), /* @__PURE__ */ jsxs(Select, {
+								value: String(viewState.config.pagination?.pageSize ?? 25),
+								onValueChange: (value_0) => viewState.setPageSize(Number(value_0)),
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									className: "h-8 w-[70px]",
+									children: /* @__PURE__ */ jsx(SelectValue, {})
+								}), /* @__PURE__ */ jsx(SelectContent, {
+									side: "top",
+									children: [
+										10,
+										25,
+										50,
+										100
+									].map((size) => /* @__PURE__ */ jsx(SelectItem, {
+										value: String(size),
+										children: size
+									}, size))
+								})]
+							})]
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								className: "size-8 p-0",
+								disabled: (viewState.config.pagination?.page ?? 1) <= 1,
+								onClick: () => viewState.setPage((viewState.config.pagination?.page ?? 1) - 1),
+								"aria-label": "Previous page",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:caret-left",
+									className: "size-4"
+								})
+							}),
+							Array.from({ length: Math.min(5, listData?.totalPages ?? 1) }, (_, i) => {
+								const currentPage = viewState.config.pagination?.page ?? 1;
+								const totalPages = listData?.totalPages ?? 1;
+								let pageNum;
+								if (totalPages <= 5) pageNum = i + 1;
+								else if (currentPage <= 3) pageNum = i + 1;
+								else if (currentPage >= totalPages - 2) pageNum = totalPages - 4 + i;
+								else pageNum = currentPage - 2 + i;
+								return /* @__PURE__ */ jsx(Button, {
+									variant: currentPage === pageNum ? "secondary" : "ghost",
+									size: "sm",
+									className: "size-8 min-w-[32px] p-0",
+									onClick: () => viewState.setPage(pageNum),
+									"aria-label": `Page ${pageNum}`,
+									"aria-current": currentPage === pageNum ? "page" : void 0,
+									children: pageNum
+								}, pageNum);
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								className: "size-8 p-0",
+								disabled: (viewState.config.pagination?.page ?? 1) >= (listData?.totalPages ?? 1),
+								onClick: () => viewState.setPage((viewState.config.pagination?.page ?? 1) + 1),
+								"aria-label": "Next page",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:caret-right",
+									className: "size-4"
+								})
+							})
+						]
+					})]
+				}),
+				isSearching && /* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground flex items-center gap-2 py-2 text-sm",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: [
+						isSearchActive && /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:spinner-gap",
+							className: "size-3 animate-spin"
+						}),
+						filteredItems.length,
+						" item",
+						filteredItems.length !== 1 ? "s" : "",
+						searchData?.total !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+							"(",
+							searchData.total,
+							" match",
+							searchData.total !== 1 ? "es" : "",
+							" ",
+							"found)"
+						] })
+					]
+				}),
+				/* @__PURE__ */ jsx(FilterBuilderSheet, {
+					collection,
+					availableFields,
+					defaultColumns,
+					currentConfig: viewState.config,
+					onConfigChange: viewState.setConfig,
+					isOpen: isSheetOpen,
+					onOpenChange: setIsSheetOpen,
+					savedViews: savedViewsData?.docs ?? [],
+					savedViewsLoading,
+					onSaveView: handleSaveView,
+					onDeleteView: handleDeleteView,
+					supportsSoftDelete: collectionMeta?.softDelete ?? false
+				}),
+				dialogAction && /* @__PURE__ */ jsx(ActionDialog, {
+					open: !!dialogAction,
+					onOpenChange: (open) => !open && closeDialog(),
+					action: dialogAction,
+					collection,
+					item: dialogItem,
+					helpers: actionHelpers
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { TableView as default };