From c502366661c99afe0f707cf59194ec9428656092 Mon Sep 17 00:00:00 2001
From: Shiva Gupta <shivascalerite@gmail.com>
Date: Wed, 31 Dec 2025 16:38:25 +0530
Subject: [PATCH] test(Tasks): Add comprehensive test suite for Tasks component

- Add tests for Keyboard Navigation (ArrowUp, ArrowDown, boundary stops)
- Add tests for Hotkey Shortcuts ('a', 'c', 'd', 'e', 'f', 'p', 'r', 's', 't')
- Add tests for complete/delete hotkeys when dialog is already open
- Add tests for Sync button click and error toast on sync failure
- Add tests for LocalStorage persistence (tasksPerPage, lastSyncTime)
- Add tests for sync time auto-update interval
- Add tests for error handling (add task, edit task failures)
- Add tests for mouse hover handlers (mouseEnter, mouseLeave)

- Updates: #300
---
 .../HomeComponents/Tasks/TaskDialog.tsx       |   11 +-
 .../components/HomeComponents/Tasks/Tasks.tsx |    2 +-
 .../Tasks/__tests__/Tasks.test.tsx            | 1951 +++++++++++++----
 3 files changed, 1481 insertions(+), 483 deletions(-)

diff --git a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
index 7b2e8e77..e948a316 100644
--- a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
@@ -787,7 +787,10 @@ export const TaskDialog = ({
                             })
                           }
                         >
-                          <SelectTrigger className="flex-grow mr-2">
+                          <SelectTrigger
+                            className="flex-grow mr-2"
+                            data-testid="priority-select"
+                          >
                             <SelectValue placeholder="Select priority" />
                           </SelectTrigger>
                           <SelectContent>
@@ -1221,7 +1224,10 @@ export const TaskDialog = ({
                             onUpdateState({ editedRecur: value })
                           }
                         >
-                          <SelectTrigger className="flex-grow">
+                          <SelectTrigger
+                            className="flex-grow"
+                            data-testid="recur-select"
+                          >
                             <SelectValue placeholder="Select recurrence" />
                           </SelectTrigger>
                           <SelectContent>
@@ -1449,6 +1455,7 @@ export const TaskDialog = ({
                         <Button
                           variant="ghost"
                           size="icon"
+                          aria-label="edit"
                           onClick={() =>
                             onUpdateState({
                               isEditingAnnotations: true,
diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
index 7b5d16ab..5e5237da 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -76,7 +76,7 @@ export const Tasks = (
   const status = ['pending', 'completed', 'deleted', 'overdue'];
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
-  const [idSortOrder, setIdSortOrder] = useState<'asc' | 'desc'>('asc');
+  const [idSortOrder, setIdSortOrder] = useState<'asc' | 'desc'>('desc');
 
   const [newTask, setNewTask] = useState<TaskFormData>({
     description: '',
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
index 6a400290..8549b41a 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
@@ -42,17 +42,25 @@ jest.mock('../tasks-utils', () => {
 });
 
 jest.mock('@/components/ui/multi-select', () => ({
-  MultiSelectFilter: jest.fn(({ title }) => (
-    <div>Mocked MultiSelect: {title}</div>
+  MultiSelectFilter: jest.fn(({ id, title }) => (
+    <div id={id}>Mocked MultiSelect: {title}</div>
   )),
 }));
 
 jest.mock('@/components/ui/select', () => {
   return {
     Select: ({ children, onValueChange, value }: any) => {
+      let testId = '';
+      const React = require('react');
+      React.Children.forEach(children, (child: any) => {
+        if (child?.props?.['data-testid']) {
+          testId = child.props['data-testid'];
+        }
+      });
+
       return (
         <select
-          data-testid="project-select"
+          data-testid={testId}
           value={value}
           onChange={(e) => onValueChange?.(e.target.value)}
         >
@@ -94,6 +102,7 @@ jest.mock('../hooks', () => ({
               tags: i % 3 === 0 ? ['tag1'] : ['tag2'],
               uuid: `uuid-${i + 1}`,
               due: i === 0 ? '20200101T120000Z' : undefined,
+              depends: i === 9 ? ['uuid-corp-1'] : undefined,
             })),
             {
               id: 13,
@@ -166,6 +175,12 @@ jest.mock('../Pagination', () => {
 
 global.fetch = jest.fn().mockResolvedValue({ ok: true });
 
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
 describe('Tasks Component', () => {
   const localStorageMock = (() => {
     let store: { [key: string]: string } = {};
@@ -189,60 +204,55 @@ describe('Tasks Component', () => {
     jest.clearAllMocks();
   });
 
-  describe('Rendering & Basic UI', () => {
-    test('renders tasks component and the mocked BottomBar', async () => {
+  describe('Add Task', () => {
+    test('successfully adds a task via dialog', async () => {
+      const hooks = require('../hooks');
+
       render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
 
-      expect(screen.getByTestId('tasks')).toBeInTheDocument();
-      expect(screen.getByText('Mocked BottomBar')).toBeInTheDocument();
-    });
+      fireEvent.click(screen.getByRole('button', { name: /add task/i }));
 
-    test('renders the "Tasks per Page" dropdown with default value', async () => {
-      await act(async () => {
-        render(<Tasks {...mockProps} />);
+      const descInput = await screen.findByLabelText('Description');
+      fireEvent.change(descInput, {
+        target: { value: 'New Task Description' },
       });
 
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
-
-      const dropdown = screen.getByLabelText('Show:');
-      expect(dropdown).toBeInTheDocument();
-      expect(dropdown).toHaveValue('10');
-    });
-  });
-
-  describe('LocalStorage', () => {
-    test('loads "tasksPerPage" from localStorage on initial render', async () => {
-      localStorageMock.setItem('mockHashedKey', '20');
-
-      render(<Tasks {...mockProps} />);
-
-      await waitFor(async () => {
-        expect(await screen.findByText('Task 1')).toBeInTheDocument();
+      const dialog = screen.getByRole('dialog');
+      const addButton = within(dialog).getByRole('button', {
+        name: /add task/i,
       });
+      fireEvent.click(addButton);
 
-      expect(screen.getByLabelText('Show:')).toHaveValue('20');
+      await waitFor(() => {
+        expect(hooks.addTaskToBackend).toHaveBeenCalledWith(
+          expect.objectContaining({
+            description: 'New Task Description',
+          })
+        );
+      });
     });
 
-    test('updates pagination when "Tasks per Page" is changed', async () => {
+    test('closes dialog after successful task add', async () => {
       render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
 
-      await waitFor(async () => {
-        expect(await screen.findByText('Task 12')).toBeInTheDocument();
-      });
-
-      expect(screen.getByTestId('total-pages')).toHaveTextContent('2');
-
-      const dropdown = screen.getByLabelText('Show:');
-      fireEvent.change(dropdown, { target: { value: '5' } });
+      fireEvent.click(screen.getByRole('button', { name: /add task/i }));
 
-      expect(screen.getByTestId('total-pages')).toHaveTextContent('4');
+      const descInput = await screen.findByLabelText('Description');
+      fireEvent.change(descInput, { target: { value: 'Another Task' } });
 
-      expect(localStorageMock.setItem).toHaveBeenCalledWith(
-        'mockHashedKey',
-        '5'
-      );
+      const dialog = screen.getByRole('dialog');
+      const addButton = within(dialog).getByRole('button', {
+        name: /add task/i,
+      });
+      fireEvent.click(addButton);
 
-      expect(screen.getByTestId('current-page')).toHaveTextContent('1');
+      await waitFor(() => {
+        expect(
+          screen.queryByPlaceholderText('Description')
+        ).not.toBeInTheDocument();
+      });
     });
   });
 
@@ -284,32 +294,7 @@ describe('Tasks Component', () => {
     });
   });
 
-  describe('Search & Filtering', () => {
-    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();
-    });
-  });
-
-  describe('Task Dialog - Tags Editing', () => {
+  describe('Tag', () => {
     test('shows tags as badges in task dialog and allows editing (add on Enter)', async () => {
       render(<Tasks {...mockProps} />);
 
@@ -374,8 +359,6 @@ describe('Tasks Component', () => {
       });
 
       const hooks = require('../hooks');
-      expect(hooks.editTaskOnBackend).toHaveBeenCalled();
-
       const callArg = hooks.editTaskOnBackend.mock.calls[0][0];
       expect(callArg.tags).toEqual(
         expect.arrayContaining(['tag1', 'addedtag'])
@@ -413,7 +396,7 @@ describe('Tasks Component', () => {
       const removeButton = within(badgeContainer).getByText('✖');
       fireEvent.click(removeButton);
 
-      expect(screen.queryByText('tag2')).not.toBeInTheDocument();
+      expect(screen.queryByText('tag1')).not.toBeInTheDocument();
 
       const saveButton = await screen.findByRole('button', {
         name: /save tags/i,
@@ -446,27 +429,6 @@ describe('Tasks Component', () => {
     });
   });
 
-  describe('Overdue UI', () => {
-    test('shows red background on task ID and Overdue badge for overdue tasks', async () => {
-      render(<Tasks {...mockProps} />);
-
-      await screen.findByText('Task 12');
-
-      const dropdown = screen.getByLabelText('Show:');
-      fireEvent.change(dropdown, { target: { value: '20' } });
-
-      const task1Description = screen.getByText('Task 1');
-      const row = task1Description.closest('tr');
-      const idElement = row?.querySelector('span');
-
-      expect(idElement).toHaveClass('bg-red-600/80');
-      fireEvent.click(idElement!);
-
-      const overdueBadge = await screen.findByText('Overdue');
-      expect(overdueBadge).toBeInTheDocument();
-    });
-  });
-
   describe('Selection Logic', () => {
     it('adds a task UUID to selectedTaskUUIDs when an individual checkbox is clicked', async () => {
       render(<Tasks {...mockProps} />);
@@ -780,585 +742,1614 @@ describe('Tasks Component', () => {
     });
   });
 
-  test('shows "overdue" in status filter options', async () => {
-    render(<Tasks {...mockProps} />);
+  describe('Overdue Tasks', () => {
+    test('shows red background on task ID and Overdue badge for overdue tasks', async () => {
+      render(<Tasks {...mockProps} />);
 
-    expect(await screen.findByText('Mocked BottomBar')).toBeInTheDocument();
+      await screen.findByText('Task 12');
 
-    const multiSelectFilter = require('@/components/ui/multi-select');
+      const dropdown = screen.getByLabelText('Show:');
+      fireEvent.change(dropdown, { target: { value: '20' } });
 
-    expect(multiSelectFilter.MultiSelectFilter).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: 'Status',
-        options: expect.arrayContaining(['overdue']),
-      }),
-      {}
-    );
-  });
+      const task1Description = screen.getByText('Task 1');
+      const row = task1Description.closest('tr');
+      const idElement = row?.querySelector('span');
 
-  test('filters tasks to show only overdue tasks when status "overdue" is selected', async () => {
-    const MultiSelectFilter =
-      require('@/components/ui/multi-select').MultiSelectFilter;
+      expect(idElement).toHaveClass('bg-red-600/80');
+      fireEvent.click(idElement!);
 
-    MultiSelectFilter.mockImplementation(({ title }: { title: string }) => {
-      return <div data-testid={`ms-${title}`}>Mocked MultiSelect: {title}</div>;
+      const overdueBadge = await screen.findByText('Overdue');
+      expect(overdueBadge).toBeInTheDocument();
     });
 
-    render(<Tasks {...mockProps} />);
+    test('shows "O" badge for overdue tasks in status column', async () => {
+      render(<Tasks {...mockProps} />);
 
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
-    });
+      await screen.findByText('Task 12');
 
-    const lastCall = MultiSelectFilter.mock.calls.find(
-      (call: any[]) => call[0].title === 'Status'
-    );
+      const dropdown = screen.getByLabelText('Show:');
+      fireEvent.change(dropdown, { target: { value: '20' } });
 
-    const onSelectionChange = lastCall[0].onSelectionChange;
+      const row = screen.getByText('Task 1').closest('tr')!;
+      const statusCell = within(row).getByText('O');
 
-    act(() => {
-      onSelectionChange(['overdue']);
+      expect(statusCell).toBeInTheDocument();
     });
 
-    const overdueTask = screen.getByText('Task 1');
-    expect(overdueTask).toBeInTheDocument();
-    expect(screen.queryByText('Task 2')).not.toBeInTheDocument();
-  });
-
-  test('shows "O" badge for overdue tasks in status column', async () => {
-    render(<Tasks {...mockProps} />);
-
-    await screen.findByText('Task 12');
+    test('does not show "O" badge for non-overdue pending tasks', async () => {
+      render(<Tasks {...mockProps} />);
 
-    const dropdown = screen.getByLabelText('Show:');
-    fireEvent.change(dropdown, { target: { value: '20' } });
+      await screen.findByText('Task 12');
 
-    const row = screen.getByText('Task 1').closest('tr')!;
-    const statusCell = within(row).getByText('O');
+      const dropdown = screen.getByLabelText('Show:');
+      fireEvent.change(dropdown, { target: { value: '20' } });
 
-    expect(statusCell).toBeInTheDocument();
-  });
+      expect(await screen.findByText('Task 2')).toBeInTheDocument();
 
-  test('does not show "O" badge for non-overdue pending tasks', async () => {
-    render(<Tasks {...mockProps} />);
+      const row = screen.getByText('Task 2').closest('tr')!;
+      const statusCell = within(row).getByText('P');
 
-    await screen.findByText('Task 12');
+      expect(statusCell).toBeInTheDocument();
+    });
 
-    const dropdown = screen.getByLabelText('Show:');
-    fireEvent.change(dropdown, { target: { value: '20' } });
+    test('overdue tasks appear at the top of the list', async () => {
+      render(<Tasks {...mockProps} />);
 
-    expect(await screen.findByText('Task 2')).toBeInTheDocument();
+      await screen.findByText('Task 12');
 
-    const row = screen.getByText('Task 2').closest('tr')!;
-    const statusCell = within(row).getByText('P');
+      const dropdown = screen.getByLabelText('Show:');
+      fireEvent.change(dropdown, { target: { value: '20' } });
 
-    expect(statusCell).toBeInTheDocument();
+      const firstRow = screen.getAllByRole('row')[1];
+      expect(within(firstRow).getByText('Task 1')).toBeInTheDocument();
+    });
   });
 
-  test('overdue tasks appear at the top of the list', async () => {
-    render(<Tasks {...mockProps} />);
-
-    await screen.findByText('Task 12');
-
-    const dropdown = screen.getByLabelText('Show:');
-    fireEvent.change(dropdown, { target: { value: '20' } });
+  describe('Search and Filtering', () => {
+    test('filters tasks with fuzzy search (handles typos)', async () => {
+      jest.useFakeTimers();
 
-    const firstRow = screen.getAllByRole('row')[1];
-    expect(within(firstRow).getByText('Task 1')).toBeInTheDocument();
-  });
+      render(<Tasks {...mockProps} />);
+      expect(await screen.findByText('Task 12')).toBeInTheDocument();
 
-  test('project dropdown lists existing projects and create-new option', async () => {
-    render(<Tasks {...mockProps} />);
+      const dropdown = screen.getByLabelText('Show:');
+      fireEvent.change(dropdown, { target: { value: '50' } });
 
-    expect(await screen.findByText('Task 1')).toBeInTheDocument();
+      const searchBar = screen.getByPlaceholderText('Search tasks...');
+      fireEvent.change(searchBar, { target: { value: 'fiace' } });
 
-    const addTaskButton = screen.getByRole('button', { name: /add task/i });
-    fireEvent.click(addTaskButton);
+      act(() => {
+        jest.advanceTimersByTime(300);
+      });
 
-    const projectSelect = await screen.findByTestId('project-select');
-    expect(
-      within(projectSelect).getByText('Select a project')
-    ).toBeInTheDocument();
-    expect(within(projectSelect).getByText('Engineering')).toBeInTheDocument();
-    expect(within(projectSelect).getByText('ProjectA')).toBeInTheDocument();
-    expect(
-      within(projectSelect).getByText('+ Create new project…')
-    ).toBeInTheDocument();
-  });
+      expect(await screen.findByText('Finance')).toBeInTheDocument();
+      expect(screen.queryByText('Engineering')).not.toBeInTheDocument();
+      expect(screen.queryByText('Sales')).not.toBeInTheDocument();
 
-  test('selecting "+ Create new project…" reveals inline input', async () => {
-    render(<Tasks {...mockProps} />);
+      jest.useRealTimers();
+    });
 
-    expect(await screen.findByText('Task 1')).toBeInTheDocument();
+    test('shows "overdue" in status filter options', async () => {
+      render(<Tasks {...mockProps} />);
 
-    fireEvent.click(screen.getByRole('button', { name: /add task/i }));
+      expect(await screen.findByText('Mocked BottomBar')).toBeInTheDocument();
 
-    const projectSelect = await screen.findByTestId('project-select');
-    fireEvent.change(projectSelect, { target: { value: '__CREATE_NEW__' } }); // Empty string triggers "create new project" mode
+      const multiSelectFilter = require('@/components/ui/multi-select');
 
-    const newProjectInput =
-      await screen.findByPlaceholderText('New project name');
-    fireEvent.change(newProjectInput, {
-      target: { value: 'My Fresh Project' },
+      expect(multiSelectFilter.MultiSelectFilter).toHaveBeenCalledWith(
+        expect.objectContaining({
+          title: 'Status',
+          options: expect.arrayContaining(['overdue']),
+        }),
+        {}
+      );
     });
 
-    expect(newProjectInput).toHaveValue('My Fresh Project');
-  });
+    test('filters tasks to show only overdue tasks when status "overdue" is selected', async () => {
+      const MultiSelectFilter =
+        require('@/components/ui/multi-select').MultiSelectFilter;
+
+      MultiSelectFilter.mockImplementation(({ title }: { title: string }) => {
+        return (
+          <div data-testid={`ms-${title}`}>Mocked MultiSelect: {title}</div>
+        );
+      });
 
-  // Task Dependencies Tests
-  describe('Task Dependencies', () => {
-    test('passes allTasks prop to AddTaskDialog for dependency selection', async () => {
       render(<Tasks {...mockProps} />);
 
-      await waitFor(() => {
-        expect(screen.getByText('Task 1')).toBeInTheDocument();
+      await waitFor(async () => {
+        expect(await screen.findByText('Task 12')).toBeInTheDocument();
       });
 
-      const addTaskButton = screen.getByRole('button', { name: /add task/i });
-      fireEvent.click(addTaskButton);
+      const lastCall = MultiSelectFilter.mock.calls.find(
+        (call: any[]) => call[0].title === 'Status'
+      );
 
-      expect(
-        screen.getByText(/fill in the details below/i)
-      ).toBeInTheDocument();
+      const onSelectionChange = lastCall[0].onSelectionChange;
 
-      expect(screen.getByText('Depends On')).toBeInTheDocument();
+      act(() => {
+        onSelectionChange(['overdue']);
+      });
+
+      const overdueTask = screen.getByText('Task 1');
+      expect(overdueTask).toBeInTheDocument();
+      expect(screen.queryByText('Task 2')).not.toBeInTheDocument();
     });
 
-    test('dependency dropdown is available in add task dialog', async () => {
+    test('filtering by tag shows only tasks with that tag', async () => {
+      const MultiSelectFilter =
+        require('@/components/ui/multi-select').MultiSelectFilter;
+
       render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
+
+      const tagsCall = MultiSelectFilter.mock.calls.find(
+        (call: any[]) => call[0].title === 'Tags'
+      );
+
+      act(() => {
+        tagsCall[0].onSelectionChange(['tag1']);
+      });
 
       await waitFor(() => {
         expect(screen.getByText('Task 1')).toBeInTheDocument();
       });
 
-      const addTaskButton = screen.getByRole('button', { name: /add task/i });
-      fireEvent.click(addTaskButton);
-
-      expect(screen.getByText('Depends On')).toBeInTheDocument();
-      expect(
-        screen.getByPlaceholderText(
-          'Search and select tasks this depends on...'
-        )
-      ).toBeInTheDocument();
+      expect(screen.queryByText('Task 2')).not.toBeInTheDocument();
     });
-  });
 
-  test('shows red border when task is marked as completed', async () => {
-    render(<Tasks {...mockProps} />);
+    test('filtering by project shows only tasks with that project', async () => {
+      const MultiSelectFilter =
+        require('@/components/ui/multi-select').MultiSelectFilter;
+      render(<Tasks {...mockProps} />);
 
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
-    });
+      const dropdown = await screen.findByLabelText('Show:');
+      fireEvent.change(dropdown, { target: { value: '50' } });
 
-    const task12 = screen.getByText('Task 12');
-    fireEvent.click(task12);
+      await screen.findByText('Engineering');
 
-    await waitFor(() => {
-      const completeButton = screen.getByLabelText('complete task');
-      fireEvent.click(completeButton);
-    });
+      const projectsCall = MultiSelectFilter.mock.calls.find(
+        (call: any[]) => call[0].title === 'Projects'
+      );
+
+      act(() => {
+        projectsCall[0].onSelectionChange(['Engineering']);
+      });
 
-    const yesButton = screen.getAllByText('Yes')[0];
-    fireEvent.click(yesButton);
+      await waitFor(() => {
+        expect(
+          screen.getByText(/Draft technical documentation/i)
+        ).toBeInTheDocument();
+      });
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).toHaveClass('border-l-red-500');
+      expect(screen.queryByText('Task 1')).not.toBeInTheDocument();
     });
-  });
 
-  test('shows red border when task is deleted', async () => {
-    render(<Tasks {...mockProps} />);
+    test('filtering by multiple statuses shows matching tasks', async () => {
+      const MultiSelectFilter =
+        require('@/components/ui/multi-select').MultiSelectFilter;
+      render(<Tasks {...mockProps} />);
 
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
-    });
+      const dropdown = await screen.findByLabelText('Show:');
+      fireEvent.change(dropdown, { target: { value: '50' } });
 
-    const task12 = screen.getByText('Task 12');
-    fireEvent.click(task12);
+      await screen.findByText('Completed Task 1');
+      const statusCall = MultiSelectFilter.mock.calls.find(
+        (call: any[]) => call[0].title === 'Status'
+      );
 
-    await waitFor(() => {
-      const deleteButton = screen.getByLabelText('delete task');
-      fireEvent.click(deleteButton);
-    });
+      act(() => {
+        statusCall[0].onSelectionChange(['pending', 'completed']);
+      });
 
-    await waitFor(() => {
-      const yesButtons = screen.getAllByText('Yes');
-      if (yesButtons.length > 0) fireEvent.click(yesButtons[0]);
-    });
+      await waitFor(() => {
+        expect(screen.getByText('Task 1')).toBeInTheDocument();
+        expect(screen.getByText('Completed Task 1')).toBeInTheDocument();
+      });
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).toHaveClass('border-l-red-500');
+      expect(screen.queryByText('Deleted Task 1')).not.toBeInTheDocument();
     });
-  });
 
-  test('shows unsynced count after bulk delete', async () => {
-    render(<Tasks {...mockProps} />);
+    test('applying multiple filters narrows down results', async () => {
+      const MultiSelectFilter =
+        require('@/components/ui/multi-select').MultiSelectFilter;
+      render(<Tasks {...mockProps} />);
+
+      const dropdown = await screen.findByLabelText('Show:');
+      fireEvent.change(dropdown, { target: { value: '50' } });
+
+      await screen.findByText('Task 1');
 
-    await screen.findByText('Task 1');
-    const checkboxes = screen.getAllByRole('checkbox');
+      const projectsCall = MultiSelectFilter.mock.calls.find(
+        (call: any[]) => call[0].title === 'Projects'
+      );
+      const statusCall = MultiSelectFilter.mock.calls.find(
+        (call: any[]) => call[0].title === 'Status'
+      );
 
-    fireEvent.click(checkboxes[1]);
-    fireEvent.click(checkboxes[2]);
+      act(() => {
+        projectsCall[0].onSelectionChange(['ProjectA']);
+      });
 
-    const deleteBtn = screen.getByText(/Delete 2 Tasks/i);
-    fireEvent.click(deleteBtn);
+      act(() => {
+        statusCall[0].onSelectionChange(['pending']);
+      });
 
-    const yesButton = await screen.findByText('Yes');
-    fireEvent.click(yesButton);
+      await waitFor(() => {
+        expect(screen.getByText('Task 1')).toBeInTheDocument();
+      });
 
-    await waitFor(() => {
-      const syncButton = document.getElementById('sync-task');
-      expect(within(syncButton!).getByText('2')).toBeInTheDocument();
+      expect(screen.queryByText('Task 2')).not.toBeInTheDocument();
     });
   });
 
-  test('shows unsynced count after bulk complete', async () => {
-    render(<Tasks {...mockProps} />);
+  describe('Sorting', () => {
+    test('clicking ID header toggles sort order', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
 
-    await screen.findByText('Task 1');
-    const checkboxes = screen.getAllByRole('checkbox');
+      expect(screen.getByText('Task 1')).toBeInTheDocument();
+      expect(screen.getByText('Deleted Task 1')).toBeInTheDocument();
+      expect(screen.queryByText('Task 2')).not.toBeInTheDocument();
+      const idHeader = screen.getByText('ID');
+      fireEvent.click(idHeader);
 
-    fireEvent.click(checkboxes[1]);
-    fireEvent.click(checkboxes[2]);
+      expect(screen.getByText('Task 1')).toBeInTheDocument();
+      expect(screen.getByText('Task 2')).toBeInTheDocument();
+      expect(screen.queryByText('Deleted Task 1')).not.toBeInTheDocument();
+    });
 
-    const bulkButton = screen.getByTestId('bulk-complete-btn');
-    fireEvent.click(bulkButton);
+    test('clicking Status header toggles status sort order', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Completed Task 1');
 
-    const yesButton = await screen.findByText('Yes');
-    fireEvent.click(yesButton);
+      const statusHeader = screen.getByText('Status');
+      fireEvent.click(statusHeader);
 
-    await waitFor(() => {
-      const syncButton = document.getElementById('sync-task');
-      expect(within(syncButton!).getByText('2')).toBeInTheDocument();
+      expect(screen.getByTestId('current-page')).toHaveTextContent('1');
+      expect(screen.getByText('Task 1')).toBeInTheDocument();
     });
   });
 
-  test('shows red border when task description is edited', async () => {
-    render(<Tasks {...mockProps} />);
-
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
-    });
+  describe('Add Task Dialog', () => {
+    test('project dropdown lists existing projects and create-new option', async () => {
+      render(<Tasks {...mockProps} />);
 
-    const task12 = screen.getByText('Task 12');
+      expect(await screen.findByText('Task 1')).toBeInTheDocument();
 
-    fireEvent.click(task12);
+      const addTaskButton = screen.getByRole('button', { name: /add task/i });
+      fireEvent.click(addTaskButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('Description:')).toBeInTheDocument();
+      const projectSelect = await screen.findByTestId('project-select');
+      expect(
+        within(projectSelect).getByText('Select a project')
+      ).toBeInTheDocument();
+      expect(
+        within(projectSelect).getByText('Engineering')
+      ).toBeInTheDocument();
+      expect(within(projectSelect).getByText('ProjectA')).toBeInTheDocument();
+      expect(
+        within(projectSelect).getByText('+ Create new project…')
+      ).toBeInTheDocument();
     });
 
-    const descriptionLabel = screen.getByText('Description:');
-    const descRow = descriptionLabel.closest('tr') as HTMLElement;
-    const editButton = within(descRow).getByLabelText('edit');
-
-    fireEvent.click(editButton);
+    test('selecting "+ Create new project…" reveals inline input', async () => {
+      render(<Tasks {...mockProps} />);
 
-    const input = await screen.findByDisplayValue('Task 12');
+      expect(await screen.findByText('Task 1')).toBeInTheDocument();
 
-    fireEvent.change(input, { target: { value: 'Updated Task 12' } });
+      fireEvent.click(screen.getByRole('button', { name: /add task/i }));
 
-    const saveButton = screen.getByLabelText('save');
+      const projectSelect = await screen.findByTestId('project-select');
+      fireEvent.change(projectSelect, { target: { value: '__CREATE_NEW__' } }); // Empty string triggers "create new project" mode
 
-    fireEvent.click(saveButton);
+      const newProjectInput =
+        await screen.findByPlaceholderText('New project name');
+      fireEvent.change(newProjectInput, {
+        target: { value: 'My Fresh Project' },
+      });
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).toHaveClass('border-l-red-500');
+      expect(newProjectInput).toHaveValue('My Fresh Project');
     });
   });
 
-  test('shows red border when task project is edited', async () => {
-    render(<Tasks {...mockProps} />);
-
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
-    });
-
-    const task12 = screen.getByText('Task 12');
-    fireEvent.click(task12);
-
-    await waitFor(() => {
-      expect(screen.getByText('Project:')).toBeInTheDocument();
-    });
+  describe('Task Dialog', () => {
+    test('clicking task row opens dialog and closing resets state', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
 
-    const projectLabel = screen.getByText('Project:');
-    const projectRow = projectLabel.closest('tr') as HTMLElement;
-    const editButton = within(projectRow).getByLabelText('edit');
-    fireEvent.click(editButton);
+      fireEvent.click(screen.getByText('Task 1'));
 
-    const projectSelect = await screen.findByTestId('project-select');
-    fireEvent.change(projectSelect, { target: { value: 'ProjectA' } });
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
 
-    fireEvent.keyDown(document.body, { key: 'Escape' });
+      fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape' });
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).toHaveClass('border-l-red-500');
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
     });
   });
 
-  test.each([
-    ['Wait', 'Wait:', 'Pick a date'],
-    ['End', 'End:', 'Select end date and time'],
-    ['Due', 'Due:', 'Select due date and time'],
-    ['Start', 'Start:', 'Select start date and time'],
-    ['Entry', 'Entry:', 'Pick a date'],
-  ])('shows red when task %s date is edited', async (_, label, placeholder) => {
-    render(<Tasks {...mockProps} />);
+  describe('Dialog Task Selection', () => {
+    test('opening dialog with task sets selectedTask', async () => {
+      render(<Tasks {...mockProps} />);
 
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      const dropdown = await screen.findByLabelText('Show:');
+      fireEvent.change(dropdown, { target: { value: '50' } });
+
+      await screen.findByText('Engineering');
+
+      fireEvent.click(screen.getByText(/Draft technical documentation/i));
+
+      await waitFor(() => {
+        const dialog = screen.getByRole('dialog');
+
+        expect(within(dialog).getByText('Engineering')).toBeInTheDocument();
+        expect(within(dialog).getByText('documentation')).toBeInTheDocument();
+        expect(within(dialog).getByText('api')).toBeInTheDocument();
+      });
+    });
+
+    test('clicking different tasks shows their data', async () => {
+      render(<Tasks {...mockProps} />);
+
+      const dropdown = await screen.findByLabelText('Show:');
+      fireEvent.change(dropdown, { target: { value: '50' } });
+
+      await screen.findByText('Task 1');
+
+      fireEvent.click(screen.getByText('Task 1'));
+
+      await waitFor(() => {
+        const dialog = screen.getByRole('dialog');
+        expect(within(dialog).getByText('tag1')).toBeInTheDocument();
+        expect(within(dialog).getByText('ProjectA')).toBeInTheDocument();
+      });
+
+      fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape' });
+
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+
+      fireEvent.click(screen.getByText('Task 4'));
+
+      await waitFor(() => {
+        const dialog = screen.getByRole('dialog');
+        expect(within(dialog).getByText('ProjectB')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Task Dependencies', () => {
+    test('passes allTasks prop to AddTaskDialog for dependency selection', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Task 1')).toBeInTheDocument();
+      });
+
+      const addTaskButton = screen.getByRole('button', { name: /add task/i });
+      fireEvent.click(addTaskButton);
+
+      expect(
+        screen.getByText(/fill in the details below/i)
+      ).toBeInTheDocument();
+
+      expect(screen.getByText('Depends On')).toBeInTheDocument();
+    });
+
+    test('dependency dropdown is available in add task dialog', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Task 1')).toBeInTheDocument();
+      });
+
+      const addTaskButton = screen.getByRole('button', { name: /add task/i });
+      fireEvent.click(addTaskButton);
+
+      expect(screen.getByText('Depends On')).toBeInTheDocument();
+      expect(
+        screen.getByPlaceholderText(
+          'Search and select tasks this depends on...'
+        )
+      ).toBeInTheDocument();
+    });
+
+    test('shows error when trying to complete task with incomplete dependencies', async () => {
+      const { toast } = require('react-toastify');
+
+      render(<Tasks {...mockProps} />);
+
+      const dropdown = await screen.findByLabelText('Show:');
+      fireEvent.change(dropdown, { target: { value: '50' } });
+
+      await screen.findByText('Task 10');
+      fireEvent.click(screen.getByText('Task 10'));
+
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
+
+      const completeBtn = screen.getByLabelText('complete task');
+      fireEvent.click(completeBtn);
+
+      const yesBtn = await screen.findByText('Yes');
+      fireEvent.click(yesBtn);
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(
+          expect.stringContaining('Cannot complete this task')
+        );
+      });
+    });
+  });
+
+  describe('Unsync', () => {
+    test('shows red border when task is marked as completed', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(async () => {
+        expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      });
+
+      const task12 = screen.getByText('Task 12');
+      fireEvent.click(task12);
+
+      await waitFor(() => {
+        const completeButton = screen.getByLabelText('complete task');
+        fireEvent.click(completeButton);
+      });
+
+      const yesButton = screen.getAllByText('Yes')[0];
+      fireEvent.click(yesButton);
+
+      await waitFor(() => {
+        const row = screen.getByTestId('task-row-12');
+        expect(row).toHaveClass('border-l-red-500');
+      });
+    });
+
+    test('shows red border when task is deleted', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(async () => {
+        expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      });
+
+      const task12 = screen.getByText('Task 12');
+      fireEvent.click(task12);
+
+      await waitFor(() => {
+        const deleteButton = screen.getByLabelText('delete task');
+        fireEvent.click(deleteButton);
+      });
+
+      await waitFor(() => {
+        const yesButtons = screen.getAllByText('Yes');
+        if (yesButtons.length > 0) fireEvent.click(yesButtons[0]);
+      });
+
+      await waitFor(() => {
+        const row = screen.getByTestId('task-row-12');
+        expect(row).toHaveClass('border-l-red-500');
+      });
+    });
+
+    test('shows unsynced count after bulk delete', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 1');
+      const checkboxes = screen.getAllByRole('checkbox');
+
+      fireEvent.click(checkboxes[1]);
+      fireEvent.click(checkboxes[2]);
+
+      const deleteBtn = screen.getByText(/Delete 2 Tasks/i);
+      fireEvent.click(deleteBtn);
+
+      const yesButton = await screen.findByText('Yes');
+      fireEvent.click(yesButton);
+
+      await waitFor(() => {
+        const syncButton = document.getElementById('sync-task');
+        expect(within(syncButton!).getByText('2')).toBeInTheDocument();
+      });
+    });
+
+    test('shows unsynced count after bulk complete', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 1');
+      const checkboxes = screen.getAllByRole('checkbox');
+
+      fireEvent.click(checkboxes[1]);
+      fireEvent.click(checkboxes[2]);
+
+      const bulkButton = screen.getByTestId('bulk-complete-btn');
+      fireEvent.click(bulkButton);
+
+      const yesButton = await screen.findByText('Yes');
+      fireEvent.click(yesButton);
+
+      await waitFor(() => {
+        const syncButton = document.getElementById('sync-task');
+        expect(within(syncButton!).getByText('2')).toBeInTheDocument();
+      });
+    });
+
+    test('shows red border when task description is edited', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(async () => {
+        expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      });
+
+      const task12 = screen.getByText('Task 12');
+
+      fireEvent.click(task12);
+
+      await waitFor(() => {
+        expect(screen.getByText('Description:')).toBeInTheDocument();
+      });
+
+      const descriptionLabel = screen.getByText('Description:');
+      const descRow = descriptionLabel.closest('tr') as HTMLElement;
+      const editButton = within(descRow).getByLabelText('edit');
+
+      fireEvent.click(editButton);
+
+      const input = await screen.findByDisplayValue('Task 12');
+
+      fireEvent.change(input, { target: { value: 'Updated Task 12' } });
+
+      const saveButton = screen.getByLabelText('save');
+
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        const row = screen.getByTestId('task-row-12');
+        expect(row).toHaveClass('border-l-red-500');
+      });
+    });
+
+    test('shows red border when task project is edited', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(async () => {
+        expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      });
+
+      const task12 = screen.getByText('Task 12');
+      fireEvent.click(task12);
+
+      await waitFor(() => {
+        expect(screen.getByText('Project:')).toBeInTheDocument();
+      });
+
+      const projectLabel = screen.getByText('Project:');
+      const projectRow = projectLabel.closest('tr') as HTMLElement;
+      const editButton = within(projectRow).getByLabelText('edit');
+      fireEvent.click(editButton);
+
+      const projectSelect = await screen.findByTestId('project-select');
+      fireEvent.change(projectSelect, { target: { value: 'ProjectA' } });
+
+      fireEvent.keyDown(document.body, { key: 'Escape' });
+
+      await waitFor(() => {
+        const row = screen.getByTestId('task-row-12');
+        expect(row).toHaveClass('border-l-red-500');
+      });
+    });
+
+    test.each([
+      ['Wait', 'Wait:', 'Pick a date'],
+      ['End', 'End:', 'Select end date and time'],
+      ['Due', 'Due:', 'Select due date and time'],
+      ['Start', 'Start:', 'Select start date and time'],
+      ['Entry', 'Entry:', 'Pick a date'],
+    ])(
+      'shows red when task %s date is edited',
+      async (_, label, placeholder) => {
+        render(<Tasks {...mockProps} />);
+
+        await waitFor(async () => {
+          expect(await screen.findByText('Task 12')).toBeInTheDocument();
+        });
+
+        const task12 = screen.getByText('Task 12');
+        fireEvent.click(task12);
+
+        await waitFor(() => {
+          expect(screen.getByText(label)).toBeInTheDocument();
+        });
+
+        const dateLabel = screen.getByText(label);
+        const dateRow = dateLabel.closest('tr') as HTMLElement;
+
+        const editButton = within(dateRow).getByLabelText('edit');
+        fireEvent.click(editButton);
+
+        const dateButton = within(dateRow)
+          .getByText(placeholder)
+          .closest('button');
+        fireEvent.click(dateButton!);
+
+        await waitFor(() => {
+          expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+
+        const dialog = screen.getByRole('dialog');
+        const day15 = within(dialog).getAllByText('15')[0];
+        fireEvent.click(day15);
+
+        const saveButton = screen.getByLabelText('save');
+        fireEvent.click(saveButton);
+
+        await waitFor(() => {
+          const row = screen.getByTestId('task-row-12');
+          expect(row).toHaveClass('border-l-red-500');
+        });
+      }
+    );
+
+    test('shows red border when task priority is edited', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(async () => {
+        expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      });
+
+      const task12 = screen.getByText('Task 12');
+      fireEvent.click(task12);
+
+      await waitFor(() => {
+        expect(screen.getByText('Priority:')).toBeInTheDocument();
+      });
+
+      const priorityLabel = screen.getByText('Priority:');
+      const priorityRow = priorityLabel.closest('tr') as HTMLElement;
+
+      const editButton = within(priorityRow).getByLabelText('edit');
+      fireEvent.click(editButton);
+
+      const select = within(priorityRow).getByTestId('priority-select');
+      fireEvent.change(select, { target: { value: 'H' } });
+
+      const saveButton = screen.getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        const row = screen.getByTestId('task-row-12');
+        expect(row).toHaveClass('border-l-red-500');
+      });
+    });
+
+    test('shows red border when task dependencies are edited', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(async () => {
+        expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      });
+
+      const task12 = screen.getByText('Task 12');
+      fireEvent.click(task12);
+
+      await waitFor(() => {
+        expect(screen.getByText('Depends:')).toBeInTheDocument();
+      });
+
+      const dependsLabel = screen.getByText('Depends:');
+      const dependsRow = dependsLabel.closest('tr') as HTMLElement;
+
+      const editButton = within(dependsRow).getByLabelText('edit');
+      fireEvent.click(editButton);
+
+      const addDependecyButton = within(dependsRow)
+        .getByText('Add Dependency')
+        .closest('button');
+      fireEvent.click(addDependecyButton!);
+
+      const dropdown = within(dependsRow).getByTestId('dependency-dropdown');
+
+      fireEvent.click(within(dropdown).getByText('Task 11'));
+      fireEvent.click(within(dropdown).getByText('Task 10'));
+
+      const saveButton = screen.getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        const row = screen.getByTestId('task-row-12');
+        expect(row).toHaveClass('border-l-red-500');
+      });
     });
 
-    const task12 = screen.getByText('Task 12');
-    fireEvent.click(task12);
+    test('shows red border when task tags are edited', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(async () => {
+        expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      });
+
+      const task12 = screen.getByText('Task 12');
+      fireEvent.click(task12);
+
+      await waitFor(() => {
+        expect(screen.getByText('Tags:')).toBeInTheDocument();
+      });
+
+      const tagsLabel = screen.getByText('Tags:');
+      const tagsRow = tagsLabel.closest('tr') as HTMLElement;
+
+      const editButton = within(tagsRow).getByLabelText('edit');
+      fireEvent.click(editButton);
+
+      const editInput = await screen.findByPlaceholderText(
+        'Add a tag (press enter to add)'
+      );
+
+      fireEvent.change(editInput, { target: { value: 'unsyncedtag' } });
+      fireEvent.keyDown(editInput, { key: 'Enter', code: 'Enter' });
+
+      const saveButton = screen.getByLabelText('Save tags');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        const row = screen.getByTestId('task-row-12');
+        expect(row).toHaveClass('border-l-red-500');
+      });
+    });
+
+    test('shows red border when task recur is edited', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(async () => {
+        expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      });
+
+      const task12 = screen.getByText('Task 12');
+      fireEvent.click(task12);
+
+      await waitFor(() => {
+        expect(screen.getByText('Recur:')).toBeInTheDocument();
+      });
+
+      const recurLabel = screen.getByText('Recur:');
+      const recurRow = recurLabel.closest('tr') as HTMLElement;
+
+      const editButton = within(recurRow).getByLabelText('edit');
+      fireEvent.click(editButton);
+
+      const select = within(recurRow).getByTestId('recur-select');
+      fireEvent.change(select, { target: { value: 'weekly' } });
+
+      const saveButton = screen.getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        const row = screen.getByTestId('task-row-12');
+        expect(row).toHaveClass('border-l-red-500');
+      });
+    });
+
+    test('shows and updates notification badge count on Sync button', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(async () => {
+        expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      });
+
+      const task12 = screen.getByText('Task 12');
+      fireEvent.click(task12);
+
+      await waitFor(() => {
+        const completeButton = screen.getByLabelText('complete task');
+        fireEvent.click(completeButton);
+      });
+
+      const yesButton = screen.getAllByText('Yes')[0];
+      fireEvent.click(yesButton);
+
+      await waitFor(() => {
+        const row = screen.getByTestId('task-row-12');
+        expect(row).toHaveClass('border-l-red-500');
+      });
+
+      const syncButtons = screen.getAllByText('Sync');
+      const syncBtnContainer = syncButtons[0].closest('button');
+
+      if (syncBtnContainer) {
+        expect(within(syncBtnContainer).getByText('1')).toBeInTheDocument();
+      } else {
+        throw new Error('Sync button not found');
+      }
+    });
+
+    test('clears red border after sync', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await waitFor(async () => {
+        expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      });
+
+      const task12 = screen.getByText('Task 12');
+      fireEvent.click(task12);
+
+      await waitFor(() => {
+        const completeButton = screen.getByLabelText('complete task');
+        fireEvent.click(completeButton);
+      });
+
+      const yesButton = screen.getAllByText('Yes')[0];
+      fireEvent.click(yesButton);
+
+      await waitFor(() => {
+        const row = screen.getByTestId('task-row-12');
+        expect(row).toHaveClass('border-l-red-500');
+      });
+
+      const hooks = require('../hooks');
+      hooks.fetchTaskwarriorTasks.mockResolvedValueOnce([
+        {
+          id: 12,
+          description: 'Task 12',
+          status: 'completed',
+          project: 'ProjectA',
+          tags: ['tag1'],
+          uuid: 'uuid-12',
+        },
+      ]);
+
+      const syncButtons = screen.getAllByText('Sync');
+      fireEvent.click(syncButtons[0]);
+
+      await waitFor(() => {
+        const row = screen.getByTestId('task-row-12');
+        expect(row).not.toHaveClass('border-l-red-500');
+      });
+    });
+  });
+
+  describe('Sync Button', () => {
+    test('clicking sync button triggers loading and sync', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
+
+      const syncBtn = document.getElementById('sync-task');
+      expect(syncBtn).toBeInTheDocument();
+
+      fireEvent.click(syncBtn!);
+
+      expect(mockProps.setIsLoading).toHaveBeenCalledWith(true);
+    });
+
+    test('shows error toast when sync fails', async () => {
+      const { toast } = require('react-toastify');
+      const hooks = require('../hooks');
+
+      hooks.fetchTaskwarriorTasks.mockRejectedValueOnce(
+        new Error('Network error')
+      );
+
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
+
+      const syncBtn = document.getElementById('sync-task');
+      fireEvent.click(syncBtn!);
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(
+          expect.stringContaining('Failed to sync')
+        );
+      });
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    describe('Arrow Key Navigation', () => {
+      test('ArrowDown key moves selection to next task', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'ArrowDown' });
+        fireEvent.keyDown(window, { key: 'e' });
+
+        await waitFor(() => {
+          const dialog = screen.getByRole('dialog');
+          expect(
+            within(dialog).getByText('Deleted Task 1')
+          ).toBeInTheDocument();
+        });
+      });
+
+      test('ArrowUp moves selection back to previous task', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'ArrowDown' });
+        fireEvent.keyDown(window, { key: 'ArrowDown' });
+        fireEvent.keyDown(window, { key: 'ArrowUp' });
+        fireEvent.keyDown(window, { key: 'e' });
+
+        await waitFor(() => {
+          const dialog = screen.getByRole('dialog');
+          expect(
+            within(dialog).getByText('Deleted Task 1')
+          ).toBeInTheDocument();
+        });
+      });
+
+      test('ArrowDown stops at last task on page', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        for (let i = 0; i < 20; i++) {
+          fireEvent.keyDown(window, { key: 'ArrowDown' });
+        }
+
+        fireEvent.keyDown(window, { key: 'e' });
+
+        await waitFor(() => {
+          const dialog = screen.getByRole('dialog');
+          expect(within(dialog).getByText('Task 9')).toBeInTheDocument();
+        });
+      });
+
+      test('ArrowUp stops at index 0 (Task 1)', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        for (let i = 0; i < 5; i++) {
+          fireEvent.keyDown(window, { key: 'ArrowUp' });
+        }
+
+        fireEvent.keyDown(window, { key: 'e' });
+
+        await waitFor(() => {
+          const dialog = screen.getByRole('dialog');
+          expect(within(dialog).getByText('tag1')).toBeInTheDocument();
+          expect(within(dialog).getByText('Overdue')).toBeInTheDocument();
+        });
+      });
+    });
+
+    describe('Hotkey Shortcuts', () => {
+      test('pressing "a" opens the Add Task dialog', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'a' });
+
+        await waitFor(() => {
+          expect(
+            screen.getByText(/fill in the details below to add a new task/i)
+          ).toBeInTheDocument();
+        });
+      });
+
+      test('pressing "c" attempts to open task dialog and trigger complete', async () => {
+        jest.useFakeTimers();
 
-    await waitFor(() => {
-      expect(screen.getByText(label)).toBeInTheDocument();
-    });
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'c' });
+
+        await waitFor(() => {
+          expect(screen.getByText('Tags:')).toBeInTheDocument();
+        });
+
+        act(() => {
+          jest.advanceTimersByTime(200);
+        });
+
+        await waitFor(() => {
+          expect(screen.getByText('Are you')).toBeInTheDocument();
+        });
+
+        jest.useRealTimers();
+      });
+
+      test('pressing "d" attempts to open task dialog and trigger delete', async () => {
+        jest.useFakeTimers();
+
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'd' });
+
+        await waitFor(() => {
+          expect(screen.getByText('Tags:')).toBeInTheDocument();
+        });
+
+        act(() => {
+          jest.advanceTimersByTime(200);
+        });
+
+        await waitFor(() => {
+          expect(screen.getByText('Are you')).toBeInTheDocument();
+        });
+
+        jest.useRealTimers();
+      });
+
+      test('pressing "e" key opens the selected task dialog', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'e' });
+
+        expect(await screen.findByText('Tags:')).toBeInTheDocument();
+      });
+
+      test('pressing "f" focuses the search input', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'f' });
+
+        const searchInput = screen.getByPlaceholderText('Search tasks...');
+        expect(document.activeElement).toBe(searchInput);
+      });
+
+      test('pressing "r" triggers sync', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'r' });
+
+        expect(mockProps.setIsLoading).toHaveBeenCalledWith(true);
+      });
+
+      test('pressing "p" key clicks the projects filter element', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        const getElementSpy = jest.spyOn(document, 'getElementById');
+
+        fireEvent.keyDown(window, { key: 'p' });
+
+        expect(getElementSpy).toHaveBeenCalledWith('projects');
+        getElementSpy.mockRestore();
+      });
+
+      test('pressing "s" key clicks the status filter element', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        const getElementSpy = jest.spyOn(document, 'getElementById');
+
+        fireEvent.keyDown(window, { key: 's' });
+
+        expect(getElementSpy).toHaveBeenCalledWith('status');
+        getElementSpy.mockRestore();
+      });
+
+      test('pressing "t" key clicks the tags filter element', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        const getElementSpy = jest.spyOn(document, 'getElementById');
+        fireEvent.keyDown(window, { key: 't' });
 
-    const dateLabel = screen.getByText(label);
-    const dateRow = dateLabel.closest('tr') as HTMLElement;
+        expect(getElementSpy).toHaveBeenCalledWith('tags');
+        getElementSpy.mockRestore();
+      });
+
+      test('hotkeys are disabled when input is focused', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
 
-    const editButton = within(dateRow).getByLabelText('edit');
-    fireEvent.click(editButton);
+        const searchInput = screen.getByPlaceholderText('Search tasks...');
+        searchInput.focus();
 
-    const dateButton = within(dateRow).getByText(placeholder).closest('button');
-    fireEvent.click(dateButton!);
+        fireEvent.keyDown(searchInput, { key: 'r' });
 
-    await waitFor(() => {
-      expect(screen.getByRole('dialog')).toBeInTheDocument();
+        expect(mockProps.setIsLoading).not.toHaveBeenCalledWith(true);
+      });
     });
 
-    const dialog = screen.getByRole('dialog');
-    const day15 = within(dialog).getAllByText('15')[0];
-    fireEvent.click(day15);
+    describe('Complete Hotkey When Dialog Open', () => {
+      test('pressing "c" when dialog is already open triggers complete button', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.click(screen.getByText('Task 1'));
+
+        await waitFor(() => {
+          expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+
+        const getElementSpy = jest.spyOn(document, 'getElementById');
+        fireEvent.keyDown(window, { key: 'c' });
+
+        expect(getElementSpy).toHaveBeenCalledWith('mark-task-complete-1');
+
+        getElementSpy.mockRestore();
+      });
+
+      test('pressing "d" when dialog is already open triggers delete button', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.click(screen.getByText('Task 1'));
+
+        await waitFor(() => {
+          expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+
+        const getElementSpy = jest.spyOn(document, 'getElementById');
+        fireEvent.keyDown(window, { key: 'd' });
 
-    const saveButton = screen.getByLabelText('save');
-    fireEvent.click(saveButton);
+        expect(getElementSpy).toHaveBeenCalledWith('mark-task-as-deleted-1');
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).toHaveClass('border-l-red-500');
+        getElementSpy.mockRestore();
+      });
     });
   });
 
-  test('shows red border when task priority is edited', async () => {
-    render(<Tasks {...mockProps} />);
+  describe('Hotkeys Enable/Disable on Hover', () => {
+    test('hotkeys work when mouse is over task table', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
 
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      const taskContainer = screen
+        .getByText('Here are')
+        .closest('div')?.parentElement;
+      fireEvent.mouseEnter(taskContainer!);
+
+      fireEvent.keyDown(window, { key: 'f' });
+      const searchInput = screen.getByPlaceholderText('Search tasks...');
+      expect(document.activeElement).toBe(searchInput);
     });
+  });
+
+  describe('Annotations', () => {
+    test('can add annotation to task and save', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 1');
+
+      fireEvent.click(screen.getByText('Task 1'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Annotations:')).toBeInTheDocument();
+      });
+
+      const annotationsLabel = screen.getByText('Annotations:');
+      const annotationsRow = annotationsLabel.closest('tr') as HTMLElement;
+
+      const editButton = within(annotationsRow).getByLabelText('edit');
+      fireEvent.click(editButton);
 
-    const task12 = screen.getByText('Task 12');
-    fireEvent.click(task12);
+      const input = await screen.findByPlaceholderText(
+        'Add an annotation (press enter to add)'
+      );
+      fireEvent.change(input, { target: { value: 'My new annotation' } });
+      fireEvent.keyDown(input, { key: 'Enter' });
+
+      expect(screen.getByText('My new annotation')).toBeInTheDocument();
+
+      const saveButton = screen.getByLabelText('Save annotations');
+
+      fireEvent.click(saveButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('Priority:')).toBeInTheDocument();
+      await waitFor(() => {
+        const hooks = require('../hooks');
+        expect(hooks.editTaskOnBackend).toHaveBeenCalled();
+      });
     });
 
-    const priorityLabel = screen.getByText('Priority:');
-    const priorityRow = priorityLabel.closest('tr') as HTMLElement;
+    test('can remove annotation and save', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 1');
+
+      fireEvent.click(screen.getByText('Task 1'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Annotations:')).toBeInTheDocument();
+      });
+
+      const annotationsLabel = screen.getByText('Annotations:');
+      const annotationsRow = annotationsLabel.closest('tr') as HTMLElement;
+      const editButton = within(annotationsRow).getByLabelText('edit');
+
+      fireEvent.click(editButton);
+
+      const input = await screen.findByPlaceholderText(
+        'Add an annotation (press enter to add)'
+      );
 
-    const editButton = within(priorityRow).getByLabelText('edit');
-    fireEvent.click(editButton);
+      fireEvent.change(input, { target: { value: 'Annotation to remove' } });
+      fireEvent.keyDown(input, { key: 'Enter' });
 
-    const select = within(priorityRow).getByTestId('project-select');
-    fireEvent.change(select, { target: { value: 'H' } });
+      const annotationBadge = screen.getByText('Annotation to remove');
+      const badgeContainer = annotationBadge.closest('div') as HTMLElement;
+      const removeBtn = within(badgeContainer).getByText('✖');
 
-    const saveButton = screen.getByLabelText('save');
-    fireEvent.click(saveButton);
+      fireEvent.click(removeBtn);
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).toHaveClass('border-l-red-500');
+      expect(
+        screen.queryByText('Annotation to remove')
+      ).not.toBeInTheDocument();
     });
   });
 
-  test('shows red border when task dependencies are edited', async () => {
-    render(<Tasks {...mockProps} />);
+  describe('Reports Toggle', () => {
+    test('clicking "Show Reports" button switches view from tasks to reports', async () => {
+      render(<Tasks {...mockProps} />);
 
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
-    });
+      await screen.findByText('Task 1');
 
-    const task12 = screen.getByText('Task 12');
-    fireEvent.click(task12);
+      expect(screen.getByText('Here are')).toBeInTheDocument();
 
-    await waitFor(() => {
-      expect(screen.getByText('Depends:')).toBeInTheDocument();
-    });
+      const toggleBtn = screen.getByRole('button', { name: /show reports/i });
+      fireEvent.click(toggleBtn);
 
-    const dependsLabel = screen.getByText('Depends:');
-    const dependsRow = dependsLabel.closest('tr') as HTMLElement;
+      expect(
+        screen.getByRole('button', { name: /show tasks/i })
+      ).toBeInTheDocument();
+    });
 
-    const editButton = within(dependsRow).getByLabelText('edit');
-    fireEvent.click(editButton);
+    test('clicking "Show Tasks" returns to task list view', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
 
-    const addDependecyButton = within(dependsRow)
-      .getByText('Add Dependency')
-      .closest('button');
-    fireEvent.click(addDependecyButton!);
+      fireEvent.click(screen.getByRole('button', { name: /show reports/i }));
+      fireEvent.click(screen.getByRole('button', { name: /show tasks/i }));
 
-    const dropdown = within(dependsRow).getByTestId('dependency-dropdown');
+      expect(screen.getByText('Task 1')).toBeInTheDocument();
+    });
 
-    fireEvent.click(within(dropdown).getByText('Task 11'));
-    fireEvent.click(within(dropdown).getByText('Task 10'));
+    test('hotkeys are disabled when reports view is shown', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
 
-    const saveButton = screen.getByLabelText('save');
-    fireEvent.click(saveButton);
+      fireEvent.click(screen.getByRole('button', { name: /show reports/i }));
+      fireEvent.keyDown(window, { key: 'a' });
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).toHaveClass('border-l-red-500');
+      expect(
+        screen.queryByText(/fill in the details below/i)
+      ).not.toBeInTheDocument();
     });
   });
 
-  test('shows red border when task tags are edited', async () => {
-    render(<Tasks {...mockProps} />);
+  describe('Recur Editing', () => {
+    test('does not save when recur is set to "none"', async () => {
+      render(<Tasks {...mockProps} />);
 
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      await screen.findByText('Task 12');
+      fireEvent.click(screen.getByText('Task 12'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Recur:')).toBeInTheDocument();
+      });
+
+      const recurLabel = screen.getByText('Recur:');
+      const recurRow = recurLabel.closest('tr') as HTMLElement;
+      const editButton = within(recurRow).getByLabelText('edit');
+
+      fireEvent.click(editButton);
+
+      const select = within(recurRow).getByTestId('recur-select');
+      fireEvent.change(select, { target: { value: 'none' } });
+
+      const saveButton = screen.getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      const hooks = require('../hooks');
+      expect(hooks.editTaskOnBackend).not.toHaveBeenCalled();
     });
 
-    const task12 = screen.getByText('Task 12');
-    fireEvent.click(task12);
+    test('saves recur when a valid value is selected', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 12');
+      fireEvent.click(screen.getByText('Task 12'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Recur:')).toBeInTheDocument();
+      });
+
+      const recurLabel = screen.getByText('Recur:');
+      const recurRow = recurLabel.closest('tr') as HTMLElement;
+      const editButton = within(recurRow).getByLabelText('edit');
+
+      fireEvent.click(editButton);
+
+      const select = within(recurRow).getByTestId('recur-select');
+      fireEvent.change(select, { target: { value: 'daily' } });
+
+      const saveButton = screen.getByLabelText('save');
+      fireEvent.click(saveButton);
 
-    await waitFor(() => {
-      expect(screen.getByText('Tags:')).toBeInTheDocument();
+      const hooks = require('../hooks');
+      expect(hooks.editTaskOnBackend).toHaveBeenCalled();
     });
 
-    const tagsLabel = screen.getByText('Tags:');
-    const tagsRow = tagsLabel.closest('tr') as HTMLElement;
+    test('does not save when recur is empty string', async () => {
+      render(<Tasks {...mockProps} />);
 
-    const editButton = within(tagsRow).getByLabelText('edit');
-    fireEvent.click(editButton);
+      await screen.findByText('Task 12');
+      fireEvent.click(screen.getByText('Task 12'));
 
-    const editInput = await screen.findByPlaceholderText(
-      'Add a tag (press enter to add)'
-    );
+      await waitFor(() => {
+        expect(screen.getByText('Recur:')).toBeInTheDocument();
+      });
 
-    fireEvent.change(editInput, { target: { value: 'unsyncedtag' } });
-    fireEvent.keyDown(editInput, { key: 'Enter', code: 'Enter' });
+      const recurLabel = screen.getByText('Recur:');
+      const recurRow = recurLabel.closest('tr') as HTMLElement;
+      const editButton = within(recurRow).getByLabelText('edit');
+      fireEvent.click(editButton);
 
-    const saveButton = screen.getByLabelText('Save tags');
-    fireEvent.click(saveButton);
+      const select = within(recurRow).getByTestId('recur-select');
+      fireEvent.change(select, { target: { value: '' } });
+      const saveButton = within(recurRow).getByLabelText('save');
+      fireEvent.click(saveButton);
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).toHaveClass('border-l-red-500');
+      const hooks = require('../hooks');
+      expect(hooks.editTaskOnBackend).not.toHaveBeenCalled();
     });
   });
 
-  test('shows red border when task recur is edited', async () => {
-    render(<Tasks {...mockProps} />);
+  describe('Priority Editing', () => {
+    test('saving priority calls modifyTaskOnBackend with correct value', async () => {
+      render(<Tasks {...mockProps} />);
 
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      await screen.findByText('Task 12');
+      fireEvent.click(screen.getByText('Task 12'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Priority:')).toBeInTheDocument();
+      });
+
+      const priorityLabel = screen.getByText('Priority:');
+      const priorityRow = priorityLabel.closest('tr') as HTMLElement;
+      const editButton = within(priorityRow).getByLabelText('edit');
+      fireEvent.click(editButton);
+
+      const select = within(priorityRow).getByTestId('priority-select');
+      fireEvent.change(select, { target: { value: 'H' } });
+
+      const saveButton = screen.getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        const hooks = require('../hooks');
+        expect(hooks.modifyTaskOnBackend).toHaveBeenCalledWith(
+          expect.objectContaining({ priority: 'H' })
+        );
+      });
     });
 
-    const task12 = screen.getByText('Task 12');
-    fireEvent.click(task12);
+    test('saving "NONE" priority sends empty string to backend', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 12');
+      fireEvent.click(screen.getByText('Task 12'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Priority:')).toBeInTheDocument();
+      });
+
+      const priorityLabel = screen.getByText('Priority:');
+      const priorityRow = priorityLabel.closest('tr') as HTMLElement;
+      const editButton = within(priorityRow).getByLabelText('edit');
+      fireEvent.click(editButton);
+
+      const select = within(priorityRow).getByTestId('priority-select');
+      fireEvent.change(select, { target: { value: 'NONE' } });
 
-    await waitFor(() => {
-      expect(screen.getByText('Recur:')).toBeInTheDocument();
+      const saveButton = screen.getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        const hooks = require('../hooks');
+        expect(hooks.modifyTaskOnBackend).toHaveBeenCalledWith(
+          expect.objectContaining({
+            priority: '',
+          })
+        );
+      });
     });
 
-    const recurLabel = screen.getByText('Recur:');
-    const recurRow = recurLabel.closest('tr') as HTMLElement;
+    test('shows error toast when priority save fails', async () => {
+      const { toast } = require('react-toastify');
+      const hooks = require('../hooks');
+
+      hooks.modifyTaskOnBackend.mockRejectedValueOnce(
+        new Error('Network error')
+      );
+
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 12');
+
+      fireEvent.click(screen.getByText('Task 12'));
 
-    const editButton = within(recurRow).getByLabelText('edit');
-    fireEvent.click(editButton);
+      await waitFor(() => {
+        expect(screen.getByText('Priority:')).toBeInTheDocument();
+      });
+
+      const priorityLabel = screen.getByText('Priority:');
+      const priorityRow = priorityLabel.closest('tr') as HTMLElement;
+
+      const editButton = within(priorityRow).getByLabelText('edit');
+      fireEvent.click(editButton);
 
-    const select = within(recurRow).getByTestId('project-select');
-    fireEvent.change(select, { target: { value: 'weekly' } });
+      const select = within(priorityRow).getByTestId('priority-select');
+      fireEvent.change(select, { target: { value: 'H' } });
 
-    const saveButton = screen.getByLabelText('save');
-    fireEvent.click(saveButton);
+      const saveButton = within(priorityRow).getByLabelText('save');
+      fireEvent.click(saveButton);
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).toHaveClass('border-l-red-500');
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(
+          expect.stringContaining('Failed to update priority')
+        );
+      });
     });
   });
 
-  test('shows and updates notification badge count on Sync button', async () => {
-    render(<Tasks {...mockProps} />);
+  describe('LocalStorage Persistence', () => {
+    test('loads tasksPerPage from localStorage on mount', async () => {
+      const hashedKey = require('../tasks-utils').hashKey(
+        'tasksPerPage',
+        'test@example.com'
+      );
+      localStorage.setItem(hashedKey, '20');
+
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
 
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      const dropdown = screen.getByLabelText('Show:');
+      expect(dropdown).toHaveValue('20');
     });
 
-    const task12 = screen.getByText('Task 12');
-    fireEvent.click(task12);
+    test('loads lastSyncTime from localStorage on mount', async () => {
+      const hashedKey = require('../tasks-utils').hashKey(
+        'lastSyncTime',
+        'test@example.com'
+      );
+      const mockTime = Date.now() - 60000;
+      localStorage.setItem(hashedKey, mockTime.toString());
+
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
 
-    await waitFor(() => {
-      const completeButton = screen.getByLabelText('complete task');
-      fireEvent.click(completeButton);
+      expect(screen.getByText(/Last updated/i)).toBeInTheDocument();
     });
+  });
 
-    const yesButton = screen.getAllByText('Yes')[0];
-    fireEvent.click(yesButton);
+  describe('Sync Time Auto-Update', () => {
+    test('last sync time display updates after interval fires', async () => {
+      jest.useFakeTimers();
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).toHaveClass('border-l-red-500');
-    });
+      const fiveMinutesAgo = Date.now() - 5 * 60 * 1000;
+      const hashedKey = require('../tasks-utils').hashKey(
+        'lastSyncTime',
+        'test@example.com'
+      );
+      localStorage.setItem(hashedKey, fiveMinutesAgo.toString());
 
-    const syncButtons = screen.getAllByText('Sync');
-    const syncBtnContainer = syncButtons[0].closest('button');
+      render(<Tasks {...mockProps} />);
 
-    if (syncBtnContainer) {
-      expect(within(syncBtnContainer).getByText('1')).toBeInTheDocument();
-    } else {
-      throw new Error('Sync button not found');
-    }
-  });
+      await waitFor(() => {
+        expect(screen.getByText('Task 1')).toBeInTheDocument();
+      });
 
-  test('clears red border after sync', async () => {
-    render(<Tasks {...mockProps} />);
+      expect(screen.getByText(/Last updated/i)).toBeInTheDocument();
 
-    await waitFor(async () => {
-      expect(await screen.findByText('Task 12')).toBeInTheDocument();
+      act(() => {
+        jest.advanceTimersByTime(10000);
+      });
+
+      expect(screen.getByText(/Last updated/i)).toBeInTheDocument();
+
+      act(() => {
+        jest.advanceTimersByTime(10000);
+      });
+
+      expect(screen.getByText(/Last updated/i)).toBeInTheDocument();
+
+      jest.useRealTimers();
     });
+  });
+
+  describe('Task Error Handling', () => {
+    test('logs error when editing description fails', async () => {
+      const hooks = require('../hooks');
+      const consoleSpy = jest
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
+
+      hooks.editTaskOnBackend.mockRejectedValueOnce(new Error('Network error'));
 
-    const task12 = screen.getByText('Task 12');
-    fireEvent.click(task12);
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 12');
+
+      fireEvent.click(screen.getByText('Task 12'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Description:')).toBeInTheDocument();
+      });
+
+      const descLabel = screen.getByText('Description:');
+      const descRow = descLabel.closest('tr') as HTMLElement;
+
+      const editButton = within(descRow).getByLabelText('edit');
+      fireEvent.click(editButton);
 
-    await waitFor(() => {
-      const completeButton = screen.getByLabelText('complete task');
-      fireEvent.click(completeButton);
+      const input = await screen.findByDisplayValue('Task 12');
+      fireEvent.change(input, { target: { value: 'Updated Description' } });
+
+      const saveButton = within(descRow).getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          'Failed to edit task:',
+          expect.any(Error)
+        );
+      });
+
+      consoleSpy.mockRestore();
+      hooks.editTaskOnBackend.mockResolvedValue({});
     });
 
-    const yesButton = screen.getAllByText('Yes')[0];
-    fireEvent.click(yesButton);
+    test('logs error when add task fails', async () => {
+      const hooks = require('../hooks');
+      const consoleSpy = jest
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
+
+      hooks.addTaskToBackend.mockRejectedValueOnce(new Error('Network error'));
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).toHaveClass('border-l-red-500');
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
+
+      fireEvent.click(screen.getByRole('button', { name: /add task/i }));
+
+      const descInput = await screen.findByLabelText('Description');
+      fireEvent.change(descInput, { target: { value: 'New Task' } });
+
+      const dialog = screen.getByRole('dialog');
+      const addButton = within(dialog).getByRole('button', {
+        name: /add task/i,
+      });
+      fireEvent.click(addButton);
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          'Failed to add task:',
+          expect.any(Error)
+        );
+      });
+
+      consoleSpy.mockRestore();
+      hooks.addTaskToBackend.mockResolvedValue({});
     });
+  });
+
+  describe('Mouse Hover Handlers', () => {
+    test('mouseEnter and mouseLeave handlers execute without error', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
 
-    const hooks = require('../hooks');
-    hooks.fetchTaskwarriorTasks.mockResolvedValueOnce([
-      {
-        id: 12,
-        description: 'Task 12',
-        status: 'completed',
-        project: 'ProjectA',
-        tags: ['tag1'],
-        uuid: 'uuid-12',
-      },
-    ]);
+      const taskTable = screen.getByText('Here are').closest('h3')
+        ?.parentElement?.parentElement?.parentElement;
 
-    const syncButtons = screen.getAllByText('Sync');
-    fireEvent.click(syncButtons[0]);
+      fireEvent.mouseEnter(taskTable!);
+      fireEvent.mouseLeave(taskTable!);
 
-    await waitFor(() => {
-      const row = screen.getByTestId('task-row-12');
-      expect(row).not.toHaveClass('border-l-red-500');
+      expect(screen.getByText('Task 1')).toBeInTheDocument();
+      expect(
+        screen.getByPlaceholderText('Search tasks...')
+      ).toBeInTheDocument();
     });
   });
 });