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