Sayali: add task age indicator below progress bar on dashboard

src/components/TeamMemberTasks/TeamMemberTask.jsx

@@ -8,7 +8,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader, Progress, Table } from 'reactstrap';
 import CopyToClipboard from '~/components/common/Clipboard/CopyToClipboard';
 import UserStateDisplay from '../UserState/UserStateDisplay';
@@ -729,6 +729,23 @@ 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/TeamMemberTasks.jsx

@@ -78,7 +78,10 @@ const TeamMemberTasks = React.memo(props => {
 
   // Fetch all selections in ONE call once teamList is ready
   useEffect(() => {
-    if (usersWithTasks.length === 0) return;
+    if (usersWithTasks.length === 0) {
+      setSelectionsLoaded(true);
+      return;
+    }
     const userIds = usersWithTasks.map(u => u.personId);
     axios
       .post(ENDPOINTS.USER_STATE_SELECTIONS_BATCH, { userIds })

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