Sayali: add task age indicator below progress bar on dashboard

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 (
+                                                <div className={ageClass}>{days} Days Old</div>
+                                              );
+                                            })()}
                                         </div>
                                       </td>
                                     )}

src/components/TeamMemberTasks/style.module.css

@@ -990,4 +990,34 @@
   .multiSelectFilter {
     width: 50%;
   }
-}
+}
+.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;
+}