feat(tasks): add overdue filter, badge UI, and tests (#224)

- Added "overdue" to Status filter and integrated with existing logic
- Implemented overdue sorting + “O” badge in status column
- Kept red ID highlight for overdue tasks
- Added comprehensive tests for overdue filtering, badges, and ordering

- Fixes: #186

Author: ShivaGupta-14

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

@@ -92,7 +92,7 @@ export const Tasks = (
   const [selectedProjects, setSelectedProjects] = useState<string[]>([]);
   const [tempTasks, setTempTasks] = useState<Task[]>([]);
   const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
-  const status = ['pending', 'completed', 'deleted'];
+  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');
@@ -664,9 +664,15 @@ export const Tasks = (
 
     // Status filter
     if (selectedStatuses.length > 0) {
-      filteredTasks = filteredTasks.filter((task) =>
-        selectedStatuses.includes(task.status)
-      );
+      filteredTasks = filteredTasks.filter((task) => {
+        const isTaskOverdue = task.status === 'pending' && isOverdue(task.due);
+
+        if (selectedStatuses.includes('overdue') && isTaskOverdue) {
+          return true;
+        }
+
+        return selectedStatuses.includes(task.status);
+      });
     }
 
     // Tag filter
@@ -1238,19 +1244,28 @@ export const Tasks = (
                                 </TableCell>
                                 <TableCell className="py-2">
                                   <Badge
+                                    className={
+                                      task.status === 'pending' &&
+                                      isOverdue(task.due)
+                                        ? 'bg-orange-500 text-white'
+                                        : ''
+                                    }
                                     variant={
-                                      task.status === 'pending'
-                                        ? 'secondary'
-                                        : task.status === 'deleted'
-                                          ? 'destructive'
-                                          : 'default'
+                                      task.status === 'deleted'
+                                        ? 'destructive'
+                                        : task.status === 'completed'
+                                          ? 'default'
+                                          : 'secondary'
                                     }
                                   >
-                                    {task.status === 'completed'
-                                      ? 'C'
-                                      : task.status === 'deleted'
-                                        ? 'D'
-                                        : 'P'}
+                                    {task.status === 'pending' &&
+                                    isOverdue(task.due)
+                                      ? 'O'
+                                      : task.status === 'completed'
+                                        ? 'C'
+                                        : task.status === 'deleted'
+                                          ? 'D'
+                                          : 'P'}
                                   </Badge>
                                 </TableCell>
                               </TableRow>

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

@@ -296,7 +296,7 @@ describe('Tasks Component', () => {
     expect(callArg.tags).toEqual(expect.arrayContaining(['newtag', '-tag1']));
   });
 
-  test('shows red background on task ID and Overdue badge for overdue tasks', async () => {
+  test('shows orange background on task ID and Overdue badge for overdue tasks', async () => {
     render(<Tasks {...mockProps} />);
 
     await screen.findByText('Task 12');
@@ -336,4 +336,89 @@ describe('Tasks Component', () => {
 
     jest.useRealTimers();
   });
+
+  test('shows "overdue" in status filter options', async () => {
+    render(<Tasks {...mockProps} />);
+
+    expect(await screen.findByText('Mocked BottomBar')).toBeInTheDocument();
+
+    const multiSelectFilter = require('@/components/ui/multiSelect');
+
+    expect(multiSelectFilter.MultiSelectFilter).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Status',
+        options: expect.arrayContaining(['overdue']),
+      }),
+      {}
+    );
+  });
+
+  test('filters tasks to show only overdue tasks when status "overdue" is selected', async () => {
+    const MultiSelectFilter =
+      require('@/components/ui/multiSelect').MultiSelectFilter;
+
+    MultiSelectFilter.mockImplementation(({ title }: { title: string }) => {
+      return <div data-testid={`ms-${title}`}>Mocked MultiSelect: {title}</div>;
+    });
+
+    render(<Tasks {...mockProps} />);
+
+    expect(await screen.findByText('Task 12')).toBeInTheDocument();
+
+    const lastCall = MultiSelectFilter.mock.calls.find(
+      (call: any[]) => call[0].title === 'Status'
+    );
+
+    const onSelectionChange = lastCall[0].onSelectionChange;
+
+    act(() => {
+      onSelectionChange(['overdue']);
+    });
+
+    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');
+
+    const dropdown = screen.getByLabelText('Show:');
+    fireEvent.change(dropdown, { target: { value: '20' } });
+
+    const row = screen.getByText('Task 1').closest('tr')!;
+    const statusCell = within(row).getByText('O');
+
+    expect(statusCell).toBeInTheDocument();
+  });
+
+  test('does not show "O" badge for non-overdue pending tasks', async () => {
+    render(<Tasks {...mockProps} />);
+
+    await screen.findByText('Task 12');
+
+    const dropdown = screen.getByLabelText('Show:');
+    fireEvent.change(dropdown, { target: { value: '20' } });
+
+    expect(await screen.findByText('Task 2')).toBeInTheDocument();
+
+    const row = screen.getByText('Task 2').closest('tr')!;
+    const statusCell = within(row).getByText('P');
+
+    expect(statusCell).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' } });
+
+    const firstRow = screen.getAllByRole('row')[1];
+    expect(within(firstRow).getByText('Task 1')).toBeInTheDocument();
+  });
 });