Update TaskProgressCircle to visually indicate task completion

- Changed the stroke color of the progress circle to green when progress reaches 100%.
- Added a green checkmark icon for completed tasks, enhancing visual feedback.
- Retained progress percentage display for tasks that are not yet complete, ensuring clarity in task status.

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

@@ -16,7 +16,7 @@ const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ t
                 cx={size / 2}
                 cy={size / 2}
                 r={radius}
-                stroke="#3b82f6"
+                stroke={progress === 100 ? "#22c55e" : "#3b82f6"}
                 strokeWidth={strokeWidth}
                 fill="none"
                 strokeDasharray={circumference}
@@ -24,17 +24,27 @@ const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ t
                 strokeLinecap="round"
                 style={{ transition: 'stroke-dashoffset 0.3s' }}
             />
-            {task.complete_ratio && <text
+            {progress === 100 ? (
-                x="50%"
+                // Green checkmark icon
-                y="50%"
+                <g>
-                textAnchor="middle"
+                    <circle cx={size / 2} cy={size / 2} r={radius} fill="#22c55e" opacity="0.15" />
-                dominantBaseline="central"
+                    <svg x={(size/2)-(size*0.22)} y={(size/2)-(size*0.22)} width={size*0.44} height={size*0.44} viewBox="0 0 24 24">
-                fontSize={size * 0.38}
+                        <path d="M5 13l4 4L19 7" stroke="#22c55e" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
-                fill="#3b82f6"
+                    </svg>
-                fontWeight="bold"
+                </g>
-            >
+            ) : progress > 0 && (
-                {Math.round(progress)}
+                <text
-            </text>}
+                    x="50%"
+                    y="50%"
+                    textAnchor="middle"
+                    dominantBaseline="central"
+                    fontSize={size * 0.38}
+                    fill="#3b82f6"
+                    fontWeight="bold"
+                >
+                    {Math.round(progress)}
+                </text>
+            )}
         </svg>
     );
 };