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} cx={size / 2}
cy={size / 2} cy={size / 2}
r={radius} r={radius}
stroke="#3b82f6" stroke={progress === 100 ? "#22c55e" : "#3b82f6"}
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
fill="none" fill="none"
strokeDasharray={circumference} strokeDasharray={circumference}
@@ -24,7 +24,16 @@ const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ t
strokeLinecap="round" strokeLinecap="round"
style={{ transition: 'stroke-dashoffset 0.3s' }} 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%" x="50%"
y="50%" y="50%"
textAnchor="middle" textAnchor="middle"
@@ -34,7 +43,8 @@ const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ t
fontWeight="bold" fontWeight="bold"
> >
{Math.round(progress)} {Math.round(progress)}
</text>} </text>
)}
</svg> </svg>
); );
}; };