feat(task-row): add progress indicator with CheckCircle icon

- Introduced a visual indicator for task progress, displaying a CheckCircle icon when progress reaches 100%.
- Updated the rendering logic to show a progress bar for incomplete tasks, enhancing user feedback on task status.
This commit is contained in:
chamikaJ
2025-07-02 09:21:27 +05:30
parent eb158678d4
commit dd8bfe9fce

View File

@@ -16,7 +16,7 @@ import {
UserOutlined, UserOutlined,
type InputRef type InputRef
} from './antd-imports'; } from './antd-imports';
import { DownOutlined, RightOutlined, ExpandAltOutlined, DoubleRightOutlined } from '@ant-design/icons'; import { DownOutlined, RightOutlined, ExpandAltOutlined, DoubleRightOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Task } from '@/types/task-management.types'; import { Task } from '@/types/task-management.types';
import { RootState } from '@/app/store'; import { RootState } from '@/app/store';
@@ -685,6 +685,27 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
</div> </div>
); );
case 'progress':
return (
<div key={col.key} className={`flex items-center justify-center px-2 ${borderClasses}`} style={{ width: col.width }}>
{task.progress !== undefined && task.progress >= 0 && (
task.progress === 100 ? (
<div className="flex items-center justify-center">
<CheckCircleOutlined
className="text-green-500"
style={{
fontSize: '16px',
color: '#52c41a'
}}
/>
</div>
) : (
<div className={`w-6 h-3 rounded-sm ${isDarkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
)
)}
</div>
);
default: default:
// For non-essential columns, show minimal placeholder // For non-essential columns, show minimal placeholder
return ( return (
@@ -904,7 +925,19 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
return ( return (
<div key={col.key} className={`flex items-center justify-center px-2 ${borderClasses}`} style={{ width: col.width }}> <div key={col.key} className={`flex items-center justify-center px-2 ${borderClasses}`} style={{ width: col.width }}>
{task.progress !== undefined && task.progress >= 0 && ( {task.progress !== undefined && task.progress >= 0 && (
<TaskProgress progress={task.progress} isDarkMode={isDarkMode} /> task.progress === 100 ? (
<div className="flex items-center justify-center">
<CheckCircleOutlined
className="text-green-500"
style={{
fontSize: '20px',
color: '#52c41a'
}}
/>
</div>
) : (
<TaskProgress progress={task.progress} isDarkMode={isDarkMode} />
)
)} )}
</div> </div>
); );