Remove PerformanceMonitor and VirtualizedTaskList components along with their associated styles to streamline the enhanced Kanban board. Update TaskCard to include a progress circle for better task visualization.

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx

@@ -15,6 +15,7 @@ import { SocketEvents } from '@/shared/socket-events';
 import { getUserSession } from '@/utils/session-helper';
 import { themeWiseColor } from '@/utils/themeWiseColor';
 import { toggleTaskExpansion, fetchBoardSubTasks } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import TaskProgressCircle from './TaskProgressCircle';
 
 // Simple Portal component
 const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -202,7 +203,13 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
 
     return (
         <>
-            <div className="enhanced-kanban-task-card" style={{ background, color, display: 'block' }} >
+            <div className="enhanced-kanban-task-card" style={{ background, color, display: 'block', position: 'relative' }} >
+                {/* Progress circle at top right */}
+                {task.progress > 0 && (
+                    <div style={{ position: 'absolute', top: 6, right: 6, zIndex: 2 }}>
+                        <TaskProgressCircle task={task} size={20} />
+                    </div>
+                )}
                 <div
                     draggable
                     onDragStart={e => onTaskDragStart(e, task.id!, groupId)}

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskProgressCircle.tsx

@@ -0,0 +1,40 @@
+import { IProjectTask } from "@/types/project/projectTasksViewModel.types";
+
+// Add a simple circular progress component
+const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ task, size = 28 }) => {
+    const progress = task.progress ?? 0;
+    const strokeWidth = 1.5;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (progress / 100) * circumference;
+    return (
+        <svg width={size} height={size} style={{ display: 'block' }}>
+            
+            <circle
+                cx={size / 2}
+                cy={size / 2}
+                r={radius}
+                stroke="#3b82f6"
+                strokeWidth={strokeWidth}
+                fill="none"
+                strokeDasharray={circumference}
+                strokeDashoffset={offset}
+                strokeLinecap="round"
+                style={{ transition: 'stroke-dashoffset 0.3s' }}
+            />
+            <text
+                x="50%"
+                y="50%"
+                textAnchor="middle"
+                dominantBaseline="central"
+                fontSize={size * 0.38}
+                fill="#3b82f6"
+                fontWeight="bold"
+            >
+                {Math.round(progress)}
+            </text>
+        </svg>
+    );
+};
+
+export default TaskProgressCircle;