@questpie/admin 1.1.0 → 2.0.0

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

@@ -0,0 +1,695 @@
+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 { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
+import { autoExpandFields, hasFieldsToExpand } from "../../utils/auto-expand-fields.mjs";
+import { useSuspenseCollectionMeta } from "../../hooks/use-collection-meta.mjs";
+import { ActionDialog } from "../../components/actions/action-dialog.mjs";
+import { LocaleSwitcher } from "../../components/locale-switcher.mjs";
+import { useActions } from "../../hooks/use-action.mjs";
+import { useSessionState } from "../../hooks/use-current-user.mjs";
+import { useCollectionDelete, useCollectionList } from "../../hooks/use-collection.mjs";
+import { getLockUser, useLocks } from "../../hooks/use-locks.mjs";
+import { useDeleteSavedView, useSaveView, useSavedViews } from "../../hooks/use-saved-views.mjs";
+import { useDebouncedValue, useSearch } from "../../hooks/use-search.mjs";
+import { useViewState } from "../../hooks/use-view-state.mjs";
+import { TableViewSkeleton } from "./view-skeletons.mjs";
+import { HeaderActions } from "../../components/actions/header-actions.mjs";
+import { Checkbox } from "../../components/ui/checkbox.mjs";
+import { flattenOptions } from "../../components/primitives/types.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select.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 { useRealtimeHighlight } from "../../hooks/use-realtime-highlight.mjs";
+import { BulkActionToolbar } from "./bulk-action-toolbar.mjs";
+import { computeDefaultColumns, getAllAvailableFields } from "./columns/column-defaults.mjs";
+import { buildColumns } from "./columns/build-columns.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 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.
+*/
+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;
+	}
+	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) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(TableViewSkeleton, {}),
+		children: /* @__PURE__ */ jsx(TableViewInner, { ...props })
+	});
+}
+/**
+* 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 }) {
+	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 { 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: resolvedActionsConfig
+	});
+	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] = useState(false);
+	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 (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, fieldOptions) => {
+				const optionsList = fieldOptions?.options;
+				if (!optionsList) return val;
+				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)) return val.map(mapValue);
+				if (val === void 0 || val === null) return val;
+				return mapValue(val);
+			};
+			const coerceValue = (val, fieldDef) => {
+				if (!fieldDef) return val;
+				const fieldType = fieldDef?.name ?? "text";
+				const fieldOptions = fieldDef?.["~options"] ?? {};
+				if (fieldType === "number" && typeof val === "string") {
+					const parsed = Number(val);
+					return Number.isNaN(parsed) ? val : parsed;
+				}
+				if ((fieldType === "checkbox" || fieldType === "switch") && typeof val === "string") {
+					if (val === "true") return true;
+					if (val === "false") return false;
+				}
+				if (fieldType === "select") return normalizeSelectValue(val, fieldOptions);
+				return val;
+			};
+			const toArray = (val) => {
+				if (Array.isArray(val)) return val;
+				if (val === void 0 || val === null || val === "") return [];
+				return [val];
+			};
+			const buildRelationCondition = (operator, val, relationType) => {
+				const isMultiple = relationType === "multiple";
+				const ids = toArray(val);
+				switch (operator) {
+					case "equals": return isMultiple ? { some: { id: val } } : { is: { id: val } };
+					case "not_equals": return isMultiple ? { none: { id: val } } : { isNot: { id: val } };
+					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, value } = filter;
+				if (!field || field === "_title") continue;
+				const fieldDef = resolvedFields?.[field];
+				const fieldType = fieldDef?.name ?? "text";
+				const fieldOptions = fieldDef?.["~options"] ?? {};
+				const relationName = fieldType === "relation" ? fieldOptions.relationName ?? field : void 0;
+				const hasRelation = relationName && (relationNames.length === 0 || relationNames.includes(relationName));
+				const isRelationField = fieldType === "relation" && !!hasRelation;
+				if (operator !== "is_empty" && operator !== "is_not_empty" && isEmptyValue(value)) continue;
+				const normalizedValue = coerceValue(value, fieldDef);
+				if (isRelationField && relationName) {
+					const condition = buildRelationCondition(operator, normalizedValue, fieldOptions.type === "multiple" ? "multiple" : "single");
+					if (condition) whereConditions[relationName] = condition;
+					continue;
+				}
+				switch (operator) {
+					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, direction } = viewState.config.sortConfig;
+			options.orderBy = { [field]: 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.sortConfig,
+		viewState.config.pagination?.page,
+		viewState.config.pagination?.pageSize,
+		resolvedFields,
+		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 } = 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 availableFields = useMemo(() => {
+		return getAllAvailableFields(resolvedFields, { meta: collectionMeta });
+	}, [resolvedFields, collectionMeta]);
+	const visibleColumnDefs = useMemo(() => {
+		const selectCol = {
+			id: "_select",
+			header: ({ table: t$1 }) => {
+				const isAllSelected = t$1.getIsAllPageRowsSelected();
+				const isSomeSelected = t$1.getIsSomePageRowsSelected();
+				return /* @__PURE__ */ jsx("div", {
+					onClick: (e) => e.stopPropagation(),
+					onKeyDown: (e) => e.stopPropagation(),
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: isAllSelected,
+						indeterminate: !isAllSelected && isSomeSelected,
+						onCheckedChange: (checked) => t$1.toggleAllPageRowsSelected(!!checked),
+						"aria-label": "Select all"
+					})
+				});
+			},
+			cell: ({ row }) => {
+				return /* @__PURE__ */ jsx("div", {
+					onClick: (e) => e.stopPropagation(),
+					onKeyDown: (e) => e.stopPropagation(),
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: row.getIsSelected(),
+						disabled: !row.getCanSelect(),
+						onCheckedChange: (checked) => row.toggleSelected(!!checked),
+						"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) => c.accessorKey === titleColName || c.id === titleColName);
+		if (titleCol) orderedColumns.push(titleCol);
+		const columnsToShow = viewState.config.visibleColumns.length > 0 ? viewState.config.visibleColumns : columns.map((c) => c.accessorKey || c.id).filter(Boolean);
+		for (const colName of columnsToShow) {
+			if (colName === titleColName) continue;
+			const col = columns.find((c) => c.accessorKey === colName || c.id === colName);
+			if (col) orderedColumns.push(col);
+		}
+		return orderedColumns;
+	}, [
+		columns,
+		viewState.config.visibleColumns,
+		collectionMeta
+	]);
+	const [sorting, setSorting] = React$1.useState(() => {
+		if (viewState.config.sortConfig) return [{
+			id: viewState.config.sortConfig.field,
+			desc: viewState.config.sortConfig.direction === "desc"
+		}];
+		return [];
+	});
+	const [rowSelection, setRowSelection] = React$1.useState({});
+	const handleSortingChange = React$1.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) => row.id,
+		state: {
+			sorting,
+			rowSelection
+		}
+	});
+	const handleSaveView = (name, config$1) => {
+		saveViewMutation.mutate({
+			name,
+			configuration: config$1
+		});
+	};
+	const handleDeleteView = (viewId) => {
+		deleteViewMutation.mutate(viewId);
+	};
+	const handleRowClick = (item) => {
+		navigate(`${basePath}/collections/${collection}/${item.id}`);
+	};
+	const handleBulkDelete = React$1.useCallback(async (ids) => {
+		const results = await Promise.allSettled(ids.map((id) => deleteMutation.mutateAsync({ id })));
+		const successCount = results.filter((r) => r.status === "fulfilled").length;
+		const failCount = results.filter((r) => r.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
+	]);
+	if (isLoading) return /* @__PURE__ */ jsx("div", {
+		className: "container",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex h-64 items-center justify-center text-muted-foreground",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:spinner-gap",
+				className: "size-6 animate-spin"
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "container",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "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: "text-2xl md:text-3xl font-extrabold tracking-tight truncate",
+								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: "text-muted-foreground text-sm mt-1 line-clamp-2",
+							children: resolveText(config?.description ?? schema?.admin?.config?.description)
+						}) : null]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 shrink-0",
+						children: [headerActions, (actions.header.primary?.length || actions.header.secondary?.length) && /* @__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) => setSearchTerm(e.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, items$1) => openDialog(action, items$1),
+					onBulkDelete: handleBulkDelete,
+					filterCount: viewState.config.filters.length,
+					onOpenFilters: () => setIsSheetOpen(true),
+					onClearFilters: () => viewState.setConfig({
+						...viewState.config,
+						filters: []
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "bg-card/5 backdrop-blur-sm border border-border/40 overflow-hidden",
+					children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+						className: "hover:bg-transparent",
+						children: headerGroup.headers.map((header, headerIndex) => {
+							return /* @__PURE__ */ jsx(TableHead, {
+								stickyLeft: headerIndex === 0 ? 0 : headerIndex === 1 ? 36 : void 0,
+								showStickyBorder: headerIndex === 1,
+								className: headerIndex === 0 ? "w-9 min-w-9 px-1.5" : void 0,
+								children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: header.column.getCanSort() ? "cursor-pointer select-none flex items-center gap-2 hover:text-foreground transition-colors" : "",
+									onClick: header.column.getToggleSortingHandler(),
+									children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() && /* @__PURE__ */ jsx("span", { children: header.column.getIsSorted() === "asc" ? "↑" : "↓" })]
+								})
+							}, header.id);
+						})
+					}, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+						"data-state": row.getIsSelected() && "selected",
+						className: cn("group", isHighlighted(row.id) && "animate-realtime-pulse"),
+						children: row.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.original),
+										className: "text-left underline underline-offset-2 decoration-muted-foreground/50 hover:decoration-foreground transition-colors cursor-pointer",
+										children: flexRender(cell.column.columnDef.cell, cell.getContext())
+									}), isDocLocked(row.id) && (() => {
+										const lock = getLock(row.id);
+										const user$1 = lock ? getLockUser(lock) : null;
+										return /* @__PURE__ */ jsxs("span", {
+											className: "inline-flex items-center gap-1 text-xs text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded-full",
+											title: user$1?.name ?? user$1?.email ?? "Someone is editing",
+											children: [user$1?.image ? /* @__PURE__ */ jsx("img", {
+												src: user$1.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$1?.name?.split(" ")[0] ?? "Editing"
+											})]
+										});
+									})()]
+								}) : flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id);
+						})
+					}, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+						colSpan: visibleColumnDefs.length,
+						className: "p-0",
+						children: emptyState || /* @__PURE__ */ jsx(EmptyState, {
+							title: "NO_RESULTS",
+							description: isSearching ? t("collectionSearch.noResults") : "No items found in this collection",
+							height: "h-48"
+						})
+					}) }) })] })
+				}),
+				!isSearching && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-4 py-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-4 text-sm text-muted-foreground",
+						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) => viewState.setPageSize(Number(value)),
+								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),
+								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 p-0 min-w-[32px]",
+									onClick: () => viewState.setPage(pageNum),
+									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),
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:caret-right",
+									className: "size-4"
+								})
+							})
+						]
+					})]
+				}),
+				isSearching && /* @__PURE__ */ jsxs("div", {
+					className: "text-sm text-muted-foreground flex items-center gap-2 py-2",
+					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
+				}),
+				dialogAction && /* @__PURE__ */ jsx(ActionDialog, {
+					open: !!dialogAction,
+					onOpenChange: (open) => !open && closeDialog(),
+					action: dialogAction,
+					collection,
+					item: dialogItem,
+					helpers: actionHelpers
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { TableView as default };
+//# sourceMappingURL=table-view.mjs.map