From d4620148bda01a947dd8d1936e9d72c3671890df Mon Sep 17 00:00:00 2001
From: shancds <shancds1@gmail.com>
Date: Tue, 15 Jul 2025 14:48:26 +0530
Subject: [PATCH] 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.
---
 .../TaskProgressCircle.tsx                    | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskProgressCircle.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskProgressCircle.tsx
index b0303b1a..044b6257 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskProgressCircle.tsx
+++ b/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
-                x="50%"
-                y="50%"
-                textAnchor="middle"
-                dominantBaseline="central"
-                fontSize={size * 0.38}
-                fill="#3b82f6"
-                fontWeight="bold"
-            >
-                {Math.round(progress)}
-            </text>}
+            {progress === 100 ? (
+                // Green checkmark icon
+                <g>
+                    <circle cx={size / 2} cy={size / 2} r={radius} fill="#22c55e" opacity="0.15" />
+                    <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">
+                        <path d="M5 13l4 4L19 7" stroke="#22c55e" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                </g>
+            ) : progress > 0 && (
+                <text
+                    x="50%"
+                    y="50%"
+                    textAnchor="middle"
+                    dominantBaseline="central"
+                    fontSize={size * 0.38}
+                    fill="#3b82f6"
+                    fontWeight="bold"
+                >
+                    {Math.round(progress)}
+                </text>
+            )}
         </svg>
     );
 };