diff --git a/src/components/TeamMemberTasks/TeamMemberTask.jsx b/src/components/TeamMemberTasks/TeamMemberTask.jsx index 878418c6e0..89e95d58db 100644 --- a/src/components/TeamMemberTasks/TeamMemberTask.jsx +++ b/src/components/TeamMemberTasks/TeamMemberTask.jsx @@ -733,6 +733,25 @@ const TeamMemberTask = React.memo( )} className={styles['team-task-progress-bar']} /> + {task.createdDatetime && + (() => { + const days = Math.floor( + (Date.now() - new Date(task.createdDatetime)) / + (1000 * 60 * 60 * 24), + ); + let ageClass = styles['task-age-badge']; + if (days <= 7) + ageClass += ` ${styles['task-age-badge-new']}`; + else if (days <= 30) + ageClass += ` ${styles['task-age-badge-recent']}`; + else if (days <= 90) + ageClass += ` ${styles['task-age-badge-old']}`; + else + ageClass += ` ${styles['task-age-badge-very-old']}`; + return ( +
{days} Days Old
+ ); + })()} )} diff --git a/src/components/TeamMemberTasks/style.module.css b/src/components/TeamMemberTasks/style.module.css index f4d4c2ca30..32b2f27910 100644 --- a/src/components/TeamMemberTasks/style.module.css +++ b/src/components/TeamMemberTasks/style.module.css @@ -990,4 +990,34 @@ .multiSelectFilter { width: 50%; } -} \ No newline at end of file +} +.task-age-badge { + display: inline-flex; + align-items: center; + justify-content: center; + margin-top: 5px; + background-color: #6c757d; + color: #fff; + border-radius: 50px; + padding: 2px 8px; + font-size: 11px; + font-weight: 600; + white-space: nowrap; +} + +.task-age-badge-new { + background-color: #28a745; +} + +.task-age-badge-recent { + background-color: #17a2b8; +} + +.task-age-badge-old { + background-color: #ffc107; + color: #212529; +} + +.task-age-badge-very-old { + background-color: #dc3545; +}