feat(tasks): implement fuzzy search using Fuse.js (#217)

Replaces the previous exact-match `.includes()` search with a more flexible
and powerful fuzzy search. Users can now find tasks even with partial
matches or typos, improving workflow efficiency and overall usability.

Key changes:
- Integrated `Fuse.js` to perform fuzzy matching across `description`,
  `project`, and `tags`.
- Added a dual-state search pattern (`searchInput` + `debouncedTerm`) to keep
  typing responsive while debouncing the expensive search operation.
- Consolidated all filters (projects, tags, status) and fuzzy search into a
  single "Master Filter" `useEffect`, ensuring all filters interact correctly.
- Updated Jest tests using `jest.useFakeTimers()` and `act` to validate the
  debounced fuzzy search, including typo-tolerant queries like "fiace".

Fixes: #162

Author: ShivaGupta-14

frontend/package-lock.json

@@ -129,6 +129,7 @@
     "framer-motion": "^11.3.8",
     "fs.realpath": "^1.0.0",
     "function-bind": "^1.1.2",
+    "fuse.js": "^7.1.0",
     "gensync": "^1.0.0-beta.2",
     "get-caller-file": "^2.0.5",
     "get-nonce": "^1.0.1",

frontend/package.json

@@ -1,6 +1,7 @@
 import { useEffect, useState, useCallback } from 'react';
 import { Task } from '../../utils/types';
 import { ReportsView } from './ReportsView';
+import Fuse from 'fuse.js';
 import {
   Table,
   TableBody,
@@ -128,6 +129,7 @@ export const Tasks = (
   const [isEditingEndDate, setIsEditingEndDate] = useState(false);
   const [editedEndDate, setEditedEndDate] = useState('');
   const [searchTerm, setSearchTerm] = useState('');
+  const [debouncedTerm, setDebouncedTerm] = useState('');
   const [lastSyncTime, setLastSyncTime] = useState<number | null>(null);
 
   const isOverdue = (due?: string) => {
@@ -153,25 +155,7 @@ export const Tasks = (
 
   // Debounced search handler
   const debouncedSearch = debounce((value: string) => {
-    if (!value) {
-      setTempTasks(
-        selectedProjects.length === 0 &&
-          selectedStatuses.length === 0 &&
-          selectedTags.length === 0
-          ? tasks
-          : tempTasks
-      );
-      return;
-    }
-    const lowerValue = value.toLowerCase();
-    const filtered = tasks.filter(
-      (task) =>
-        task.description.toLowerCase().includes(lowerValue) ||
-        (task.project && task.project.toLowerCase().includes(lowerValue)) ||
-        (task.tags &&
-          task.tags.some((tag) => tag.toLowerCase().includes(lowerValue)))
-    );
-    setTempTasks(sortWithOverdueOnTop(filtered));
+    setDebouncedTerm(value);
     setCurrentPage(1);
   }, 300);
 
@@ -586,6 +570,7 @@ export const Tasks = (
     });
   };
 
+  // Master filter
   useEffect(() => {
     let filteredTasks = [...tasks];
 
@@ -596,7 +581,7 @@ export const Tasks = (
       );
     }
 
-    //Status filter
+    // Status filter
     if (selectedStatuses.length > 0) {
       filteredTasks = filteredTasks.filter((task) =>
         selectedStatuses.includes(task.status)
@@ -611,11 +596,25 @@ export const Tasks = (
       );
     }
 
-    filteredTasks = sortWithOverdueOnTop(filteredTasks);
+    // Fuzzy search
+    if (debouncedTerm.trim() !== '') {
+      const fuseOptions = {
+        keys: ['description', 'project', 'tags'],
+        threshold: 0.4,
+        ignoreLocation: true,
+        includeScore: false,
+      };
 
-    // Sort + set
+      const fuse = new Fuse(filteredTasks, fuseOptions);
+      const results = fuse.search(debouncedTerm);
+
+      filteredTasks = results.map((r) => r.item);
+    }
+
+    // Keep overdue tasks always on top
+    filteredTasks = sortWithOverdueOnTop(filteredTasks);
     setTempTasks(filteredTasks);
-  }, [selectedProjects, selectedTags, selectedStatuses, tasks]);
+  }, [selectedProjects, selectedTags, selectedStatuses, tasks, debouncedTerm]);
 
   const handleEditTagsClick = (task: Task) => {
     setEditedTags(task.tags || []);

frontend/src/components/HomeComponents/Tasks/Tasks.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent, within } from '@testing-library/react';
+import { render, screen, fireEvent, act, within } from '@testing-library/react';
 import { Tasks } from '../Tasks';
 
 // Mock props for the Tasks component
@@ -48,17 +48,43 @@ jest.mock('../hooks', () => ({
       where: jest.fn(() => ({
         equals: jest.fn(() => ({
           // Mock 12 tasks to test pagination
-          toArray: jest.fn().mockResolvedValue(
-            Array.from({ length: 12 }, (_, i) => ({
+          toArray: jest.fn().mockResolvedValue([
+            ...Array.from({ length: 12 }, (_, i) => ({
               id: i + 1,
               description: `Task ${i + 1}`,
               status: 'pending',
               project: i % 2 === 0 ? 'ProjectA' : 'ProjectB',
               tags: i % 3 === 0 ? ['tag1'] : ['tag2'],
               uuid: `uuid-${i + 1}`,
               due: i === 0 ? '20200101T120000Z' : undefined,
-            }))
-          ),
+            })),
+            {
+              id: 13,
+              description:
+                'Prepare quarterly financial analysis report for review',
+              status: 'pending',
+              project: 'Finance',
+              tags: ['report', 'analysis'],
+              uuid: 'uuid-corp-1',
+            },
+            {
+              id: 14,
+              description: 'Schedule client onboarding meeting with Sales team',
+              status: 'pending',
+              project: 'Sales',
+              tags: ['meeting', 'client'],
+              uuid: 'uuid-corp-2',
+            },
+            {
+              id: 15,
+              description:
+                'Draft technical documentation for API integration module',
+              status: 'pending',
+              project: 'Engineering',
+              tags: ['documentation', 'api'],
+              uuid: 'uuid-corp-3',
+            },
+          ]),
         })),
       })),
     },
@@ -275,4 +301,26 @@ describe('Tasks Component', () => {
     const overdueBadge = await screen.findByText('Overdue');
     expect(overdueBadge).toBeInTheDocument();
   });
+  test('filters tasks with fuzzy search (handles typos)', async () => {
+    jest.useFakeTimers();
+
+    render(<Tasks {...mockProps} />);
+    expect(await screen.findByText('Task 12')).toBeInTheDocument();
+
+    const dropdown = screen.getByLabelText('Show:');
+    fireEvent.change(dropdown, { target: { value: '50' } });
+
+    const searchBar = screen.getByPlaceholderText('Search tasks...');
+    fireEvent.change(searchBar, { target: { value: 'fiace' } });
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    expect(await screen.findByText('Finance')).toBeInTheDocument();
+    expect(screen.queryByText('Engineering')).not.toBeInTheDocument();
+    expect(screen.queryByText('Sales')).not.toBeInTheDocument();
+
+    jest.useRealTimers();
+  });
 });