feat(fix): document type filtering

surfsense_web/app/(home)/login/LocalLoginForm.tsx

@@ -1,10 +1,10 @@
 "use client";
+import { Eye, EyeOff } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { Eye, EyeOff } from "lucide-react";
 import { getAuthErrorDetails, isNetworkError, shouldRetry } from "@/lib/auth-errors";
 
 export function LocalLoginForm() {
@@ -191,36 +191,36 @@ export function LocalLoginForm() {
 					/>
 				</div>
 
-		<div>
+				<div>
 					<label
 						htmlFor="password"
 						className="block text-sm font-medium text-gray-700 dark:text-gray-300"
 					>
 						Password
 					</label>
-				<div className="relative">
-					<input
-						id="password"
-						type={showPassword ? "text" : "password"}
-						required
-						value={password}
-						onChange={(e) => setPassword(e.target.value)}
-						className={`mt-1 block w-full rounded-md border pr-10 px-3 py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-colors ${
-							error
-								? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700"
-								: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700"
-						}`}
-						disabled={isLoading}
-					/>
-					<button
-						type="button"
-						onClick={() => setShowPassword((prev) => !prev)}
-						className="absolute inset-y-0 right-0 flex items-center pr-3 mt-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-						aria-label={showPassword ? "Hide password" : "Show password"}
-					>
-						{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-					</button>
-				</div>
+					<div className="relative">
+						<input
+							id="password"
+							type={showPassword ? "text" : "password"}
+							required
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+							className={`mt-1 block w-full rounded-md border pr-10 px-3 py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-colors ${
+								error
+									? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700"
+									: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700"
+							}`}
+							disabled={isLoading}
+						/>
+						<button
+							type="button"
+							onClick={() => setShowPassword((prev) => !prev)}
+							className="absolute inset-y-0 right-0 flex items-center pr-3 mt-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+							aria-label={showPassword ? "Hide password" : "Show password"}
+						>
+							{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+						</button>
+					</div>
 				</div>
 
 				<button

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

@@ -26,7 +26,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import type { ColumnVisibility, Document } from "./types";
+import type { ColumnVisibility } from "./types";
 
 const fadeInScale: Variants = {
 	hidden: { opacity: 0, scale: 0.95 },
@@ -35,8 +35,7 @@ const fadeInScale: Variants = {
 };
 
 export function DocumentsFilters({
-	allDocuments,
-	visibleDocuments: _visibleDocuments,
+	typeCounts: typeCountsRecord,
 	selectedIds,
 	onSearch,
 	searchValue,
@@ -46,8 +45,7 @@ export function DocumentsFilters({
 	columnVisibility,
 	onToggleColumn,
 }: {
-	allDocuments: Document[];
-	visibleDocuments: Document[];
+	typeCounts: Record<string, number>;
 	selectedIds: Set<number>;
 	onSearch: (v: string) => void;
 	searchValue: string;
@@ -61,16 +59,16 @@ export function DocumentsFilters({
 	const inputRef = useRef<HTMLInputElement>(null);
 
 	const uniqueTypes = useMemo(() => {
-		const set = new Set<string>();
-		for (const d of allDocuments) set.add(d.document_type);
-		return Array.from(set).sort();
-	}, [allDocuments]);
+		return Object.keys(typeCountsRecord).sort();
+	}, [typeCountsRecord]);
 
 	const typeCounts = useMemo(() => {
 		const map = new Map<string, number>();
-		for (const d of allDocuments) map.set(d.document_type, (map.get(d.document_type) ?? 0) + 1);
+		for (const [type, count] of Object.entries(typeCountsRecord)) {
+			map.set(type, count);
+		}
 		return map;
-	}, [allDocuments]);
+	}, [typeCountsRecord]);
 
 	return (
 		<motion.div

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

@@ -40,40 +40,59 @@ 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>>({});
 
-	// Use server-side pagination and search
-	const { documents, total, loading, error, fetchDocuments, searchDocuments, deleteDocument } =
-		useDocuments(searchSpaceId, {
-			page: pageIndex,
-			pageSize: pageSize,
-		});
+	// 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);
+				searchDocuments?.(
+					debouncedSearch,
+					pageIndex,
+					pageSize,
+					activeTypes.length > 0 ? activeTypes : undefined
+				);
 			} else {
 				// Use regular fetch if no search
-				fetchDocuments?.(pageIndex, pageSize);
+				fetchDocuments?.(pageIndex, pageSize, activeTypes.length > 0 ? activeTypes : undefined);
 			}
 		}
-	}, [pageIndex, pageSize, debouncedSearch, searchSpaceId, fetchDocuments, searchDocuments]);
+	}, [
+		pageIndex,
+		pageSize,
+		debouncedSearch,
+		activeTypes,
+		searchSpaceId,
+		fetchDocuments,
+		searchDocuments,
+	]);
 
-	// Client-side filtering for document types only
-	// Note: This could also be moved to the backend for better performance
-	const filtered = useMemo(() => {
-		let result = documents || [];
-		if (activeTypes.length > 0) {
-			result = result.filter((d) => activeTypes.includes(d.document_type));
-		}
-		return result;
-	}, [documents, activeTypes]);
-
-	// Display filtered results
-	const displayDocs = filtered;
-	const displayTotal = activeTypes.length > 0 ? filtered.length : total;
+	// Display server-filtered results directly
+	const displayDocs = documents || [];
+	const displayTotal = total;
 	const pageStart = pageIndex * pageSize;
 	const pageEnd = Math.min(pageStart + pageSize, displayTotal);
 
@@ -88,11 +107,16 @@ export default function DocumentsTable() {
 
 	const refreshCurrentView = useCallback(async () => {
 		if (debouncedSearch.trim()) {
-			await searchDocuments?.(debouncedSearch, pageIndex, pageSize);
+			await searchDocuments?.(
+				debouncedSearch,
+				pageIndex,
+				pageSize,
+				activeTypes.length > 0 ? activeTypes : undefined
+			);
 		} else {
-			await fetchDocuments?.(pageIndex, pageSize);
+			await fetchDocuments?.(pageIndex, pageSize, activeTypes.length > 0 ? activeTypes : undefined);
 		}
-	}, [debouncedSearch, pageIndex, pageSize, searchDocuments, fetchDocuments]);
+	}, [debouncedSearch, pageIndex, pageSize, activeTypes, searchDocuments, fetchDocuments]);
 
 	const onBulkDelete = async () => {
 		if (selectedIds.size === 0) {
@@ -133,8 +157,7 @@ export default function DocumentsTable() {
 			className="w-full px-6 py-4"
 		>
 			<DocumentsFilters
-				allDocuments={documents || []}
-				visibleDocuments={displayDocs}
+				typeCounts={typeCounts}
 				selectedIds={selectedIds}
 				onSearch={setSearch}
 				searchValue={search}

surfsense_web/hooks/use-documents.ts

@@ -36,12 +36,13 @@ export interface UseDocumentsOptions {
 	page?: number;
 	pageSize?: number;
 	lazy?: boolean;
+	documentTypes?: string[];
 }
 
 export function useDocuments(searchSpaceId: number, options?: UseDocumentsOptions | boolean) {
 	// Support both old boolean API and new options API for backward compatibility
 	const opts = typeof options === "boolean" ? { lazy: options } : options || {};
-	const { page, pageSize = 300, lazy = false } = opts;
+	const { page, pageSize = 300, lazy = false, documentTypes } = opts;
 
 	const [documents, setDocuments] = useState<Document[]>([]);
 	const [total, setTotal] = useState(0);
@@ -50,7 +51,7 @@ export function useDocuments(searchSpaceId: number, options?: UseDocumentsOption
 	const [isLoaded, setIsLoaded] = useState(false); // Memoization flag
 
 	const fetchDocuments = useCallback(
-		async (fetchPage?: number, fetchPageSize?: number) => {
+		async (fetchPage?: number, fetchPageSize?: number, fetchDocumentTypes?: string[]) => {
 			if (isLoaded && lazy) return; // Avoid redundant calls in lazy mode
 
 			try {
@@ -64,6 +65,8 @@ export function useDocuments(searchSpaceId: number, options?: UseDocumentsOption
 				// Use passed parameters or fall back to state/options
 				const effectivePage = fetchPage !== undefined ? fetchPage : page;
 				const effectivePageSize = fetchPageSize !== undefined ? fetchPageSize : pageSize;
+				const effectiveDocumentTypes =
+					fetchDocumentTypes !== undefined ? fetchDocumentTypes : documentTypes;
 
 				if (effectivePage !== undefined) {
 					params.append("page", effectivePage.toString());
@@ -71,6 +74,9 @@ export function useDocuments(searchSpaceId: number, options?: UseDocumentsOption
 				if (effectivePageSize !== undefined) {
 					params.append("page_size", effectivePageSize.toString());
 				}
+				if (effectiveDocumentTypes && effectiveDocumentTypes.length > 0) {
+					params.append("document_types", effectiveDocumentTypes.join(","));
+				}
 
 				const response = await fetch(
 					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents?${params.toString()}`,
@@ -100,7 +106,7 @@ export function useDocuments(searchSpaceId: number, options?: UseDocumentsOption
 				setLoading(false);
 			}
 		},
-		[searchSpaceId, page, pageSize, isLoaded, lazy]
+		[searchSpaceId, page, pageSize, documentTypes, isLoaded, lazy]
 	);
 
 	useEffect(() => {
@@ -117,10 +123,15 @@ export function useDocuments(searchSpaceId: number, options?: UseDocumentsOption
 
 	// Function to search documents by title
 	const searchDocuments = useCallback(
-		async (searchQuery: string, fetchPage?: number, fetchPageSize?: number) => {
+		async (
+			searchQuery: string,
+			fetchPage?: number,
+			fetchPageSize?: number,
+			fetchDocumentTypes?: string[]
+		) => {
 			if (!searchQuery.trim()) {
 				// If search is empty, fetch all documents
-				return fetchDocuments(fetchPage, fetchPageSize);
+				return fetchDocuments(fetchPage, fetchPageSize, fetchDocumentTypes);
 			}
 
 			try {
@@ -135,6 +146,8 @@ export function useDocuments(searchSpaceId: number, options?: UseDocumentsOption
 				// Use passed parameters or fall back to state/options
 				const effectivePage = fetchPage !== undefined ? fetchPage : page;
 				const effectivePageSize = fetchPageSize !== undefined ? fetchPageSize : pageSize;
+				const effectiveDocumentTypes =
+					fetchDocumentTypes !== undefined ? fetchDocumentTypes : documentTypes;
 
 				if (effectivePage !== undefined) {
 					params.append("page", effectivePage.toString());
@@ -142,6 +155,9 @@ export function useDocuments(searchSpaceId: number, options?: UseDocumentsOption
 				if (effectivePageSize !== undefined) {
 					params.append("page_size", effectivePageSize.toString());
 				}
+				if (effectiveDocumentTypes && effectiveDocumentTypes.length > 0) {
+					params.append("document_types", effectiveDocumentTypes.join(","));
+				}
 
 				const response = await fetch(
 					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents/search/?${params.toString()}`,
@@ -170,7 +186,7 @@ export function useDocuments(searchSpaceId: number, options?: UseDocumentsOption
 				setLoading(false);
 			}
 		},
-		[searchSpaceId, page, pageSize, fetchDocuments]
+		[searchSpaceId, page, pageSize, documentTypes, fetchDocuments]
 	);
 
 	// Function to delete a document
@@ -205,6 +221,35 @@ export function useDocuments(searchSpaceId: number, options?: UseDocumentsOption
 		[documents]
 	);
 
+	// Function to get document type counts
+	const getDocumentTypeCounts = useCallback(async () => {
+		try {
+			const params = new URLSearchParams({
+				search_space_id: searchSpaceId.toString(),
+			});
+
+			const response = await fetch(
+				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents/type-counts/?${params.toString()}`,
+				{
+					headers: {
+						Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
+					},
+					method: "GET",
+				}
+			);
+
+			if (!response.ok) {
+				throw new Error("Failed to fetch document type counts");
+			}
+
+			const counts = await response.json();
+			return counts as Record<string, number>;
+		} catch (err: any) {
+			console.error("Error fetching document type counts:", err);
+			return {};
+		}
+	}, [searchSpaceId]);
+
 	return {
 		documents,
 		total,
@@ -215,5 +260,6 @@ export function useDocuments(searchSpaceId: number, options?: UseDocumentsOption
 		searchDocuments, // Search function
 		refreshDocuments,
 		deleteDocument,
+		getDocumentTypeCounts, // Get type counts function
 	};
 }