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.
This commit is contained in:
shancds
2025-07-15 14:48:26 +05:30
parent 8d7d54be78
commit d4620148bd

View File

@@ -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,7 +24,16 @@ const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ t
strokeLinecap="round"
style={{ transition: 'stroke-dashoffset 0.3s' }}
/>
{task.complete_ratio && <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"
@@ -34,7 +43,8 @@ const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ t
fontWeight="bold"
>
{Math.round(progress)}
</text>}
</text>
)}
</svg>
);
};