feat(routes): implement lazy loading and suspense fallback for route components

- Refactored account setup, admin center, reporting, and settings routes to utilize React's lazy loading for improved performance.
- Wrapped route components in Suspense with a fallback UI to enhance user experience during loading states.
- Removed unused drag-and-drop CSS file to clean up the codebase.

worklenz-frontend/src/pages/admin-center/admin-center-constants.ts

@@ -5,12 +5,12 @@ import {
   TeamOutlined,
   UserOutlined,
 } from '@ant-design/icons';
-import React, { ReactNode } from 'react';
-import Overview from './overview/overview';
-import Users from './users/users';
-import Teams from './teams/teams';
-import Billing from './billing/billing';
-import Projects from './projects/projects';
+import React, { ReactNode, lazy } from 'react';
+const Overview = lazy(() => import('./overview/overview'));
+const Users = lazy(() => import('./users/users'));
+const Teams = lazy(() => import('./teams/teams'));
+const Billing = lazy(() => import('./billing/billing'));
+const Projects = lazy(() => import('./projects/projects'));
 
 // type of a menu item in admin center sidebar
 type AdminCenterMenuItems = {

worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/task-list-table-cells/task-list-task-cell/task-list-task-cell.tsx

@@ -20,7 +20,7 @@ import { setSelectedTaskId, setShowTaskDrawer } from '@/features/task-drawer/tas
 import { useState, useRef, useEffect } from 'react';
 import { useSocket } from '@/socket/socketContext';
 import { SocketEvents } from '@/shared/socket-events';
-import { fetchSubTasks } from '@/features/tasks/tasks.slice';
+import { fetchSubTasks } from '@/features/task-management/task-management.slice';
 
 type TaskListTaskCellProps = {
   task: IProjectTask;

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

@@ -266,6 +266,7 @@ const TaskListTableWrapper = ({
               tableId={tableId}
               activeId={activeId}
               groupBy={groupBy}
+              isOver={isOver}
             />
           </Collapsible>
         </Flex>

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

@@ -32,7 +32,7 @@ import {
   sortableKeyboardCoordinates,
 } from '@dnd-kit/sortable';
 import { createPortal } from 'react-dom';
-import { DragEndEvent } from '@dnd-kit/core';
+import { DragOverEvent } from '@dnd-kit/core';
 import { List, Card, Avatar, Dropdown, Empty, Divider, Button } from 'antd';
 import dayjs from 'dayjs';
 
@@ -90,6 +90,7 @@ interface TaskListTableProps {
   tableId: string;
   activeId?: string | null;
   groupBy?: string;
+  isOver?: boolean; // Add this line
 }
 
 interface DraggableRowProps {
@@ -1291,6 +1292,7 @@ const TaskListTable: React.FC<TaskListTableProps> = ({ taskList, tableId, active
 
   // Add drag state
   const [dragActiveId, setDragActiveId] = useState<string | null>(null);
+  const [placeholderIndex, setPlaceholderIndex] = useState<number | null>(null);
 
   // Configure sensors for drag and drop
   const sensors = useSensors(
@@ -1640,6 +1642,7 @@ const TaskListTable: React.FC<TaskListTableProps> = ({ taskList, tableId, active
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
     setDragActiveId(null);
+    setPlaceholderIndex(null); // Reset placeholder index
 
     if (!over || !active || active.id === over.id) {
       return;
@@ -1794,6 +1797,7 @@ const TaskListTable: React.FC<TaskListTableProps> = ({ taskList, tableId, active
         sensors={sensors}
         onDragStart={handleDragStart}
         onDragEnd={handleDragEnd}
+        onDragOver={handleDragOver} // Add this line
         autoScroll={false} // Disable auto-scroll animations
       >
         <SortableContext
@@ -1858,12 +1862,22 @@ const TaskListTable: React.FC<TaskListTableProps> = ({ taskList, tableId, active
                 {displayTasks && displayTasks.length > 0 ? (
                   displayTasks
                     .filter(task => task?.id) // Filter out tasks without valid IDs
-                    .map(task => {
+                    .map((task, index) => {
                       const updatedTask = findTaskInGroups(task.id || '') || task;
+                      const isDraggingCurrent = dragActiveId === updatedTask.id;
 
                       return (
                         <React.Fragment key={updatedTask.id}>
-                          {renderTaskRow(updatedTask)}
+                          {placeholderIndex === index && (
+                            <tr className="placeholder-row">
+                              <td colSpan={visibleColumns.length + 2}>
+                                <div className="h-10 border-2 border-dashed border-blue-400 rounded-md flex items-center justify-center text-blue-500">
+                                  Drop task here
+                                </div>
+                              </td>
+                            </tr>
+                          )}
+                          {!isDraggingCurrent && renderTaskRow(updatedTask)}
                           {updatedTask.show_sub_tasks && (
                             <>
                               {updatedTask?.sub_tasks?.map(subtask =>
@@ -1910,6 +1924,15 @@ const TaskListTable: React.FC<TaskListTableProps> = ({ taskList, tableId, active
                     </td>
                   </tr>
                 )}
+                {placeholderIndex === displayTasks.length && (
+                  <tr className="placeholder-row">
+                    <td colSpan={visibleColumns.length + 2}>
+                      <div className="h-10 border-2 border-dashed border-blue-400 rounded-md flex items-center justify-center text-blue-500">
+                        Drop task here
+                      </div>
+                    </td>
+                  </tr>
+                )}
               </tbody>
             </table>
           </div>