diff --git a/src/components/TeamMemberTasks/TeamMemberTask.jsx b/src/components/TeamMemberTasks/TeamMemberTask.jsx
index d585f7f371..271b3b516c 100644
--- a/src/components/TeamMemberTasks/TeamMemberTask.jsx
+++ b/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
{days} Days Old
;
+ })()}
)}
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 9e9003a3c2..0467faf522 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/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 })
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;
+}