feat(tasks): implement V3 API for task management and enhance UI components

- Introduced `getTasksV3` and `refreshTaskProgress` methods in `TasksControllerV2` to optimize task retrieval and progress refreshing.
- Updated API routes to include new endpoints for V3 task management.
- Enhanced frontend components to utilize the new V3 API, improving performance by reducing frontend processing.
- Added `VirtualizedTaskList` and `VirtualizedTaskGroup` components for efficient rendering of task lists.
- Updated task management slice to support new V3 data structure and improved state management.
- Refactored styles for better dark mode support and overall UI consistency.

worklenz-frontend/src/pages/projects/project-view-1/taskList/ProjectViewTaskList.tsx

@@ -1,54 +1,49 @@
 import { useEffect } from 'react';
 import { Flex } from 'antd';
-import TaskListFilters from './taskListFilters/TaskListFilters';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
-import { fetchTaskGroups } from '@/features/tasks/tasks.slice';
-import { ITaskListConfigV2 } from '@/types/tasks/taskList.types';
-import TanStackTable from '../task-list/task-list-custom';
-import TaskListCustom from '../task-list/task-list-custom';
-import TaskListTableWrapper from '../task-list/task-list-table-wrapper/task-list-table-wrapper';
+import { fetchTasksV3 } from '@/features/task-management/task-management.slice';
+import { deselectAll } from '@/features/projects/bulkActions/bulkActionSlice';
+import TaskListBoard from '@/components/task-management/task-list-board';
 
 const ProjectViewTaskList = () => {
-  // sample data from task reducer
   const dispatch = useAppDispatch();
-  const { taskGroups, loadingGroups } = useAppSelector(state => state.taskReducer);
-  const { statusCategories } = useAppSelector(state => state.taskStatusReducer);
   const projectId = useAppSelector(state => state.projectReducer.projectId);
+  const { statusCategories } = useAppSelector(state => state.taskStatusReducer);
 
   useEffect(() => {
     if (projectId) {
-      const config: ITaskListConfigV2 = {
-        id: projectId,
-        field: 'id',
-        order: 'desc',
-        search: '',
-        statuses: '',
-        members: '',
-        projects: '',
-        isSubtasksInclude: true,
-      };
-      dispatch(fetchTaskGroups(config));
+      // Use the optimized V3 API for faster loading
+      dispatch(fetchTasksV3(projectId));
     }
     if (!statusCategories.length) {
       dispatch(fetchStatusesCategories());
     }
   }, [dispatch, projectId]);
 
+  // Cleanup effect - reset values when component is destroyed
+  useEffect(() => {
+    return () => {
+      // Clear any selected tasks when component unmounts
+      dispatch(deselectAll());
+    };
+  }, [dispatch]);
+
+  if (!projectId) {
+    return (
+      <Flex vertical gap={16} style={{ overflowX: 'hidden' }}>
+        <div>No project selected</div>
+      </Flex>
+    );
+  }
+
   return (
     <Flex vertical gap={16} style={{ overflowX: 'hidden' }}>
-      <TaskListFilters position="list" />
-
-      {taskGroups.map(group => (
-        <TaskListTableWrapper
-          key={group.id}
-          taskList={group}
-          name={group.name || ''}
-          color={group.color_code || ''}
-          groupId={group.id || ''}
-        />
-      ))}
+      <TaskListBoard 
+        projectId={projectId}
+        className="task-list-board"
+      />
     </Flex>
   );
 };