fix: update DocumentsFilters type definitions and complete migration cleanup

- Updated type definitions in DocumentsFilters to use DocumentTypeEnum
- Fixed type consistency across activeTypes and onToggleType props
- Final cleanup of DocumentsTable migration to React Query

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx

@@ -28,6 +28,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import type { ColumnVisibility } from "./types";
+import { DocumentTypeEnum } from "@/contracts/types/document.types";
 
 const fadeInScale: Variants = {
 	hidden: { opacity: 0, scale: 0.95 },
@@ -46,13 +47,13 @@ export function DocumentsFilters({
 	columnVisibility,
 	onToggleColumn,
 }: {
-	typeCounts: Record<string, number>;
+	typeCounts: Record<DocumentTypeEnum, number>;
 	selectedIds: Set<number>;
 	onSearch: (v: string) => void;
 	searchValue: string;
 	onBulkDelete: () => Promise<void>;
-	onToggleType: (type: string, checked: boolean) => void;
-	activeTypes: string[];
+	onToggleType: (type: DocumentTypeEnum, checked: boolean) => void;
+	activeTypes: DocumentTypeEnum[];
 	columnVisibility: ColumnVisibility;
 	onToggleColumn: (id: keyof ColumnVisibility, checked: boolean) => void;
 }) {
@@ -61,7 +62,7 @@ export function DocumentsFilters({
 	const inputRef = useRef<HTMLInputElement>(null);
 
 	const uniqueTypes = useMemo(() => {
-		return Object.keys(typeCountsRecord).sort();
+		return Object.keys(typeCountsRecord).sort() as DocumentTypeEnum[];
 	}, [typeCountsRecord]);
 
 	const typeCounts = useMemo(() => {
@@ -156,7 +157,7 @@ export function DocumentsFilters({
 								<div className="text-xs font-medium text-muted-foreground">Filters</div>
 								<div className="space-y-3">
 									<AnimatePresence>
-										{uniqueTypes.map((value, i) => (
+										{uniqueTypes.map((value : DocumentTypeEnum, i) => (
 											<motion.div
 												key={value}
 												className="flex items-center gap-2"

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx

@@ -5,6 +5,11 @@ import { useParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useId, useMemo, useState } from "react";
 import { toast } from "sonner";
+import { useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import { documentsApiService } from "@/lib/apis/documents-api.service";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
 
 import { useDocuments } from "@/hooks/use-documents";
 
@@ -12,6 +17,7 @@ import { DocumentsFilters } from "./components/DocumentsFilters";
 import { DocumentsTableShell, type SortKey } from "./components/DocumentsTableShell";
 import { PaginationControls } from "./components/PaginationControls";
 import type { ColumnVisibility, Document } from "./components/types";
+import { DocumentTypeEnum } from "@/contracts/types/document.types";
 
 function useDebounced<T>(value: T, delay = 250) {
 	const [debounced, setDebounced] = useState(value);
@@ -30,7 +36,7 @@ export default function DocumentsTable() {
 
 	const [search, setSearch] = useState("");
 	const debouncedSearch = useDebounced(search, 250);
-	const [activeTypes, setActiveTypes] = useState<string[]>([]);
+	const [activeTypes, setActiveTypes] = useState<DocumentTypeEnum[]>([]);
 	const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility>({
 		title: true,
 		document_type: true,
@@ -42,63 +48,80 @@ export default function DocumentsTable() {
 	const [sortKey, setSortKey] = useState<SortKey>("title");
 	const [sortDesc, setSortDesc] = useState(false);
 	const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
-	const [typeCounts, setTypeCounts] = useState<Record<string, number>>({});
+	const {data: typeCounts} = useAtomValue(documentTypeCountsAtom) ;
+
+	// Build query parameters for fetching documents
+	const queryParams = useMemo(
+		() => ({
+			search_space_id: searchSpaceId,
+			page: pageIndex,
+			page_size: pageSize,
+			...(activeTypes.length > 0 && { document_types: activeTypes }),
+		}),
+		[searchSpaceId, pageIndex, pageSize, activeTypes]
+	);
+
+	// Build search query parameters
+	const searchQueryParams = useMemo(
+		() => ({
+			search_space_id: searchSpaceId,
+			page: pageIndex,
+			page_size: pageSize,
+			title: debouncedSearch.trim(),
+			...(activeTypes.length > 0 && { document_types: activeTypes }),
+		}),
+		[searchSpaceId, pageIndex, pageSize, activeTypes, debouncedSearch]
+	);
+
+	// Use query for fetching documents
+	const {
+		data: documentsResponse,
+		isLoading: isDocumentsLoading,
+		refetch: refetchDocuments,
+	} = useQuery({
+		queryKey: cacheKeys.documents.globalQueryParams(queryParams),
+		queryFn: () => documentsApiService.getDocuments({ queryParams }),
+		staleTime: 3 * 60 * 1000, // 3 minutes
+		enabled: !!searchSpaceId && !debouncedSearch.trim(),
+	});
+
+	// Use query for searching documents
+	const {
+		data: searchResponse,
+		isLoading: isSearchLoading,
+		refetch: refetchSearch,
+	} = useQuery({
+		queryKey: cacheKeys.documents.globalQueryParams(searchQueryParams),
+		queryFn: () => documentsApiService.searchDocuments({ queryParams: searchQueryParams }),
+		staleTime: 3 * 60 * 1000, // 3 minutes
+		enabled: !!searchSpaceId && !!debouncedSearch.trim(),
+	});
+
+	// Extract documents and total based on search state
+	const documents = debouncedSearch.trim() 
+		? searchResponse?.items || [] 
+		: documentsResponse?.items || [];
+	const total = debouncedSearch.trim() 
+		? searchResponse?.total || 0 
+		: documentsResponse?.total || 0;
+	const loading = debouncedSearch.trim() ? isSearchLoading : isDocumentsLoading;
 
 	// Use server-side pagination, search, and filtering
 	const {
-		documents,
-		total,
-		loading,
 		error,
-		fetchDocuments,
-		searchDocuments,
 		deleteDocument,
-		getDocumentTypeCounts,
 	} = useDocuments(searchSpaceId, {
 		page: pageIndex,
 		pageSize: pageSize,
 	});
 
-	// Fetch document type counts on mount and when search space changes
-	useEffect(() => {
-		if (searchSpaceId && getDocumentTypeCounts) {
-			getDocumentTypeCounts().then(setTypeCounts);
-		}
-	}, [searchSpaceId, getDocumentTypeCounts]);
-
-	// Refetch when pagination changes or when search/filters change
-	useEffect(() => {
-		if (searchSpaceId) {
-			if (debouncedSearch.trim()) {
-				// Use search endpoint if there's a search query
-				searchDocuments?.(
-					debouncedSearch,
-					pageIndex,
-					pageSize,
-					activeTypes.length > 0 ? activeTypes : undefined
-				);
-			} else {
-				// Use regular fetch if no search
-				fetchDocuments?.(pageIndex, pageSize, activeTypes.length > 0 ? activeTypes : undefined);
-			}
-		}
-	}, [
-		pageIndex,
-		pageSize,
-		debouncedSearch,
-		activeTypes,
-		searchSpaceId,
-		fetchDocuments,
-		searchDocuments,
-	]);
-
 	// Display server-filtered results directly
 	const displayDocs = documents || [];
 	const displayTotal = total;
 	const pageStart = pageIndex * pageSize;
 	const pageEnd = Math.min(pageStart + pageSize, displayTotal);
 
-	const onToggleType = (type: string, checked: boolean) => {
+	const onToggleType = (type: DocumentTypeEnum, checked: boolean) => {
 		setActiveTypes((prev) => (checked ? [...prev, type] : prev.filter((t) => t !== type)));
 		setPageIndex(0);
 	};
@@ -109,16 +132,11 @@ export default function DocumentsTable() {
 
 	const refreshCurrentView = useCallback(async () => {
 		if (debouncedSearch.trim()) {
-			await searchDocuments?.(
-				debouncedSearch,
-				pageIndex,
-				pageSize,
-				activeTypes.length > 0 ? activeTypes : undefined
-			);
+			await refetchSearch();
 		} else {
-			await fetchDocuments?.(pageIndex, pageSize, activeTypes.length > 0 ? activeTypes : undefined);
+			await refetchDocuments();
 		}
-	}, [debouncedSearch, pageIndex, pageSize, activeTypes, searchDocuments, fetchDocuments]);
+	}, [debouncedSearch, refetchSearch, refetchDocuments]);
 
 	const onBulkDelete = async () => {
 		if (selectedIds.size === 0) {
@@ -159,7 +177,7 @@ export default function DocumentsTable() {
 			className="w-full px-6 py-4"
 		>
 			<DocumentsFilters
-				typeCounts={typeCounts}
+				typeCounts={typeCounts ?? {}}
 				selectedIds={selectedIds}
 				onSearch={setSearch}
 				searchValue={search}