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;
+}