feat(project-view): add Enhanced Tasks tab and component

- Introduced a new tab for Enhanced Tasks in the project view.
- Created ProjectViewEnhancedTasks component to display task management features.
- Updated project-view-constants to include the new tab and adjusted indices for existing tabs.
- Enhanced task management styles for improved dark mode support.

worklenz-frontend/src/lib/project/project-view-constants.ts

@@ -5,6 +5,7 @@ import ProjectViewMembers from '@/pages/projects/projectView/members/project-vie
 import ProjectViewUpdates from '@/pages/projects/project-view-1/updates/project-view-updates';
 import ProjectViewTaskList from '@/pages/projects/projectView/taskList/project-view-task-list';
 import ProjectViewBoard from '@/pages/projects/projectView/board/project-view-board';
+import ProjectViewEnhancedTasks from '@/pages/projects/projectView/enhancedTasks/project-view-enhanced-tasks';
 
 // type of a tab items
 type TabItems = {
@@ -26,43 +27,50 @@ export const tabItems: TabItems[] = [
   },
   {
     index: 1,
+    key: 'enhanced-tasks',
+    label: 'Enhanced Tasks',
+    isPinned: true,
+    element: React.createElement(ProjectViewEnhancedTasks),
+  },
+  {
+    index: 2,
     key: 'board',
     label: 'Board',
     isPinned: true,
     element: React.createElement(ProjectViewBoard),
   },
   // {
-  //   index: 2,
+  //   index: 3,
   //   key: 'workload',
   //   label: 'Workload',
   //   element: React.createElement(ProjectViewWorkload),
   // },
   // {
-  //   index: 3,
+  //   index: 4,
   //   key: 'roadmap',
   //   label: 'Roadmap',
   //   element: React.createElement(ProjectViewRoadmap),
   // },
   {
-    index: 4,
+    index: 5,
     key: 'project-insights-member-overview',
     label: 'Insights',
     element: React.createElement(ProjectViewInsights),
   },
   {
-    index: 5,
+    index: 6,
     key: 'all-attachments',
     label: 'Files',
     element: React.createElement(ProjectViewFiles),
   },
   {
-    index: 6,
+    index: 7,
     key: 'members',
     label: 'Members',
     element: React.createElement(ProjectViewMembers),
   },
   {
-    index: 7,
+    index: 8,
     key: 'updates',
     label: 'Updates',
     element: React.createElement(ProjectViewUpdates),

worklenz-frontend/src/pages/projects/projectView/enhancedTasks/project-view-enhanced-tasks.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import TaskListBoard from '@/components/task-management/TaskListBoard';
+
+const ProjectViewEnhancedTasks: React.FC = () => {
+  const { id: projectId } = useParams<{ id: string }>();
+
+  if (!projectId) {
+    return (
+      <div className="p-4 text-center text-gray-500">
+        Project ID not found
+      </div>
+    );
+  }
+
+  return (
+    <div className="project-view-enhanced-tasks">
+      <TaskListBoard projectId={projectId} />
+    </div>
+  );
+};
+
+export default ProjectViewEnhancedTasks; 

worklenz-frontend/src/styles/task-management.css

@@ -213,19 +213,389 @@
   outline-offset: 2px;
 }
 
-/* Dark mode support (if needed) */
+/* Dark mode support */
+[data-theme="dark"] .task-list-board {
+  background-color: #141414;
+  color: rgba(255, 255, 255, 0.85);
+}
+
 @media (prefers-color-scheme: dark) {
-  .task-row {
+  .task-list-board {
     background-color: #141414;
-    color: #ffffff;
+    color: rgba(255, 255, 255, 0.85);
   }
-  
+
+  /* Task Groups */
+  .task-group {
+    background-color: #1f1f1f;
+    border-color: #303030;
+  }
+
+  .task-group.drag-over {
+    border-color: #1890ff !important;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.3);
+    background-color: rgba(24, 144, 255, 0.1);
+  }
+
+  .task-group .group-header {
+    background: #262626;
+    border-bottom-color: #303030;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .task-group .group-header:hover {
+    background: #2f2f2f;
+  }
+
+  /* Task Rows */
+  .task-row {
+    background-color: #1f1f1f;
+    color: rgba(255, 255, 255, 0.85);
+    border-color: #303030;
+  }
+
   .task-row:hover {
+    background-color: #262626 !important;
+    border-left-color: #595959;
+  }
+
+  .task-row.selected {
+    background-color: rgba(24, 144, 255, 0.15) !important;
+    border-left-color: #1890ff;
+  }
+
+  .task-row .drag-handle {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .task-row .drag-handle:hover {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  /* Progress bars */
+  .ant-progress-bg {
+    background-color: #303030;
+  }
+
+  /* Text colors */
+  .task-row .ant-typography {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .task-row .text-gray-500 {
+    color: rgba(255, 255, 255, 0.45) !important;
+  }
+
+  .task-row .text-gray-600 {
+    color: rgba(255, 255, 255, 0.65) !important;
+  }
+
+  .task-row .text-gray-400 {
+    color: rgba(255, 255, 255, 0.45) !important;
+  }
+
+  /* Completed task styling */
+  .task-row .line-through {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  /* Bulk Action Bar */
+  .bulk-action-bar {
+    background: rgba(24, 144, 255, 0.15);
+    border-color: rgba(24, 144, 255, 0.3);
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  /* Cards and containers */
+  .ant-card {
+    background-color: #1f1f1f;
+    border-color: #303030;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .ant-card-head {
+    background-color: #262626;
+    border-bottom-color: #303030;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .ant-card-body {
+    background-color: #1f1f1f;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  /* Buttons */
+  .ant-btn {
+    border-color: #303030;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .ant-btn:hover {
+    border-color: #595959;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .ant-btn-primary {
+    background-color: #1890ff;
+    border-color: #1890ff;
+  }
+
+  .ant-btn-primary:hover {
+    background-color: #40a9ff;
+    border-color: #40a9ff;
+  }
+
+  /* Dropdowns and menus */
+  .ant-dropdown-menu {
+    background-color: #1f1f1f;
+    border-color: #303030;
+  }
+
+  .ant-dropdown-menu-item {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .ant-dropdown-menu-item:hover {
+    background-color: #262626;
+  }
+
+  /* Select components */
+  .ant-select-selector {
+    background-color: #1f1f1f !important;
+    border-color: #303030 !important;
+    color: rgba(255, 255, 255, 0.85) !important;
+  }
+
+  .ant-select-arrow {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  /* Checkboxes */
+  .ant-checkbox-wrapper {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .ant-checkbox-inner {
+    background-color: #1f1f1f;
+    border-color: #303030;
+  }
+
+  .ant-checkbox-checked .ant-checkbox-inner {
+    background-color: #1890ff;
+    border-color: #1890ff;
+  }
+
+  /* Tags and labels */
+  .ant-tag {
+    background-color: #262626;
+    border-color: #303030;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  /* Avatars */
+  .ant-avatar {
+    background-color: #595959;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  /* Tooltips */
+  .ant-tooltip-inner {
+    background-color: #262626;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .ant-tooltip-arrow-content {
+    background-color: #262626;
+  }
+
+  /* Popconfirm */
+  .ant-popover-inner {
+    background-color: #1f1f1f;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .ant-popover-arrow-content {
     background-color: #1f1f1f;
   }
-  
+
-  .task-group .group-header {
+  /* Subtasks */
-    background: #1f1f1f;
+  .task-subtasks {
-    border-bottom-color: #303030;
+    border-left-color: #303030;
   }
+
+  .task-subtasks .task-row {
+    background-color: #141414;
+  }
+
+  .task-subtasks .task-row:hover {
+    background-color: #1f1f1f !important;
+  }
+
+  /* Scrollbars */
+  .task-groups-container::-webkit-scrollbar-track {
+    background: #141414;
+  }
+
+  .task-groups-container::-webkit-scrollbar-thumb {
+    background: #595959;
+  }
+
+  .task-groups-container::-webkit-scrollbar-thumb:hover {
+    background: #777777;
+  }
+
+  /* Loading states */
+  .ant-spin-dot-item {
+    background-color: #1890ff;
+  }
+
+  /* Empty states */
+  .ant-empty {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .ant-empty-description {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  /* Focus styles for dark mode */
+  .task-row:focus-within {
+    outline-color: #40a9ff;
+  }
+
+  .drag-handle:focus {
+    outline-color: #40a9ff;
+  }
+
+  /* Border colors */
+  .border-gray-100 {
+    border-color: #303030 !important;
+  }
+
+  .border-gray-200 {
+    border-color: #404040 !important;
+  }
+
+  .border-gray-300 {
+    border-color: #595959 !important;
+  }
+
+  /* Background utilities */
+  .bg-gray-50 {
+    background-color: #141414 !important;
+  }
+
+  .bg-gray-100 {
+    background-color: #1f1f1f !important;
+  }
+
+  .bg-white {
+    background-color: #1f1f1f !important;
+  }
+
+  /* Due date colors in dark mode */
+  .text-red-500 {
+    color: #ff7875 !important;
+  }
+
+  .text-orange-500 {
+    color: #ffa940 !important;
+  }
+
+  /* Group progress bar in dark mode */
+  .task-group .group-header .bg-gray-200 {
+    background-color: #303030 !important;
+  }
+}
+
+/* Specific dark mode styles using data-theme attribute */
+[data-theme="dark"] .task-group {
+  background-color: #1f1f1f;
+  border-color: #303030;
+}
+
+[data-theme="dark"] .task-group.drag-over {
+  border-color: #1890ff !important;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.3);
+  background-color: rgba(24, 144, 255, 0.1);
+}
+
+[data-theme="dark"] .task-group .group-header {
+  background: #262626;
+  border-bottom-color: #303030;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+[data-theme="dark"] .task-group .group-header:hover {
+  background: #2f2f2f;
+}
+
+[data-theme="dark"] .task-row {
+  background-color: #1f1f1f;
+  color: rgba(255, 255, 255, 0.85);
+  border-color: #303030;
+}
+
+[data-theme="dark"] .task-row:hover {
+  background-color: #262626 !important;
+  border-left-color: #595959;
+}
+
+[data-theme="dark"] .task-row.selected {
+  background-color: rgba(24, 144, 255, 0.15) !important;
+  border-left-color: #1890ff;
+}
+
+[data-theme="dark"] .task-row .drag-handle {
+  color: rgba(255, 255, 255, 0.45);
+}
+
+[data-theme="dark"] .task-row .drag-handle:hover {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+[data-theme="dark"] .bulk-action-bar {
+  background: rgba(24, 144, 255, 0.15);
+  border-color: rgba(24, 144, 255, 0.3);
+  color: rgba(255, 255, 255, 0.85);
+}
+
+[data-theme="dark"] .task-row .ant-typography {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+[data-theme="dark"] .task-row .text-gray-500 {
+  color: rgba(255, 255, 255, 0.45) !important;
+}
+
+[data-theme="dark"] .task-row .text-gray-600 {
+  color: rgba(255, 255, 255, 0.65) !important;
+}
+
+[data-theme="dark"] .task-row .text-gray-400 {
+  color: rgba(255, 255, 255, 0.45) !important;
+}
+
+[data-theme="dark"] .task-row .line-through {
+  color: rgba(255, 255, 255, 0.45);
+}
+
+[data-theme="dark"] .task-subtasks {
+  border-left-color: #303030;
+}
+
+[data-theme="dark"] .task-subtasks .task-row {
+  background-color: #141414;
+}
+
+[data-theme="dark"] .task-subtasks .task-row:hover {
+  background-color: #1f1f1f !important;
+}
+
+[data-theme="dark"] .text-red-500 {
+  color: #ff7875 !important;
+}
+
+[data-theme="dark"] .text-orange-500 {
+  color: #ffa940 !important;
 }