Merge branch 'imp/task-list-performance-fixes' of https://github.com/Worklenz/worklenz into release/v2.0.4

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>
   );
 };

worklenz-frontend/src/pages/projects/projectView/taskList/groupTables/TaskGroupList.tsx

@@ -31,7 +31,7 @@ import { SocketEvents } from '@/shared/socket-events';
 import logger from '@/utils/errorLogger';
 import TaskListTable from '../task-list-table/task-list-table';
 import Collapsible from '@/components/collapsible/collapsible';
-import TaskListBulkActionsBar from '@/components/taskListCommon/task-list-bulk-actions-bar/task-list-bulk-actions-bar';
+
 import TaskTemplateDrawer from '@/components/task-templates/task-template-drawer';
 import { createPortal } from 'react-dom';
 
@@ -232,7 +232,7 @@ const TaskGroupList = ({ taskGroups, groupBy }: TaskGroupListProps) => {
         </Flex>
       </ConfigProvider>
 
-      {createPortal(<TaskListBulkActionsBar />, document.body, 'bulk-action-container')}
+      
       {createPortal(
         <TaskTemplateDrawer showDrawer={false} selectedTemplateId={''} onClose={() => {}} />,
         document.body,

worklenz-frontend/src/pages/projects/projectView/taskList/task-group-wrapper-optimized.tsx

@@ -7,7 +7,7 @@ import { ITaskListGroup } from '@/types/tasks/taskList.types';
 import { useAppSelector } from '@/hooks/useAppSelector';
 
 import TaskListTableWrapper from './task-list-table/task-list-table-wrapper/task-list-table-wrapper';
-import TaskListBulkActionsBar from '@/components/taskListCommon/task-list-bulk-actions-bar/task-list-bulk-actions-bar';
+
 import TaskTemplateDrawer from '@/components/task-templates/task-template-drawer';
 
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
@@ -69,7 +69,7 @@ const TaskGroupWrapperOptimized = ({ taskGroups, groupBy }: TaskGroupWrapperOpti
         />
       ))}
 
-      {createPortal(<TaskListBulkActionsBar />, document.body, 'bulk-action-container')}
+
 
       {createPortal(
         <TaskTemplateDrawer showDrawer={false} selectedTemplateId="" onClose={() => {}} />,

worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/task-group-wrapper/task-group-wrapper.tsx

@@ -61,7 +61,7 @@ import {
 import { deselectAll } from '@/features/projects/bulkActions/bulkActionSlice';
 
 import TaskListTableWrapper from '@/pages/projects/projectView/taskList/task-list-table/task-list-table-wrapper/task-list-table-wrapper';
-import TaskListBulkActionsBar from '@/components/taskListCommon/task-list-bulk-actions-bar/task-list-bulk-actions-bar';
+
 import TaskTemplateDrawer from '@/components/task-templates/task-template-drawer';
 
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
@@ -686,7 +686,7 @@ const TaskGroupWrapper = ({ taskGroups, groupBy }: TaskGroupWrapperProps) => {
           />
         ))}
 
-        {createPortal(<TaskListBulkActionsBar />, document.body, 'bulk-action-container')}
+
 
         {createPortal(
           <TaskTemplateDrawer showDrawer={false} selectedTemplateId="" onClose={() => {}} />,