Sayali: add user state indicator frontend - display, permissions, dark …

src/components/PermissionsManagement/Permissions.json

@@ -525,6 +525,11 @@
         "label": "Blue Square Email Management",
         "key": "resendBlueSquareAndSummaryEmails",
         "description": "Gives the user permission to access Blue Square Email Management and resend infringement emails and weekly summary emails."
+      },
+      {
+      "label": "Manage user state indicator",
+      "key": "manage_user_state_indicator",
+      "description": "Gives the user permission to edit the state indicator for team members on the Dashboard Tasks and Weekly Summaries Reports pages."
       }
     ]
   },

src/components/TeamMemberTasks/TeamMemberTask.jsx

@@ -1,34 +1,35 @@
-import React, { useState, useRef } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faBell,
-  faCircle,
   faCheckCircle,
-  faTimesCircle,
-  faExpandArrowsAlt,
+  faCircle,
   faCompressArrowsAlt,
+  faExpandArrowsAlt,
+  faTimesCircle,
 } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useRef, useState } from 'react';
+import { Modal, ModalBody, ModalFooter, ModalHeader, Progress, Table } from 'reactstrap';
 import CopyToClipboard from '~/components/common/Clipboard/CopyToClipboard';
-import { Table, Progress, Modal, ModalHeader, ModalFooter, ModalBody } from 'reactstrap';
+import UserStateDisplay from '../UserState/UserStateDisplay';
 
+import moment from 'moment-timezone';
+import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import hasPermission from '~/utils/permissions';
-import styles from './style.module.css';
-import { getUserProfile } from '~/actions/userProfile.js';
 import { toast } from 'react-toastify';
+import { getUserProfile } from '~/actions/userProfile.js';
 import Warning from '~/components/Warnings/Warnings';
-import { useDispatch, useSelector } from 'react-redux';
-import moment from 'moment-timezone';
+import hasPermission from '~/utils/permissions';
+import styles from './style.module.css';
 
-import ReviewButton from './ReviewButton';
-import { getProgressColor, getProgressValue } from '../../utils/effortColors';
-import TeamMemberTaskIconsInfo from './TeamMemberTaskIconsInfo';
 import { showTimeOffRequestModal } from '../../actions/timeOffRequestAction';
+import * as messages from '../../constants/followUpConstants';
+import { getProgressColor, getProgressValue } from '../../utils/effortColors';
 import GoogleDocIcon from '../common/GoogleDocIcon';
+import TaskChangeLogModal from './components/TaskChangeLogModal';
 import FollowupCheckButton from './FollowupCheckButton';
 import FollowUpInfoModal from './FollowUpInfoModal';
-import TaskChangeLogModal from './components/TaskChangeLogModal';
-import * as messages from '../../constants/followUpConstants';
+import ReviewButton from './ReviewButton';
+import TeamMemberTaskIconsInfo from './TeamMemberTaskIconsInfo';
 
 const NUM_TASKS_SHOW_TRUNCATE = 6;
 
@@ -49,6 +50,7 @@ const TeamMemberTask = React.memo(
     displayUser,
   }) => {
     const darkMode = useSelector(state => state.theme.darkMode);
+    const auth = useSelector(state => state.auth);
     const taskCounts = useSelector(state => state.dashboard?.taskCounts ?? {});
     const ref = useRef(null);
     const currentDate = moment.tz('America/Los_Angeles').startOf('day');
@@ -501,15 +503,28 @@ const TeamMemberTask = React.memo(
                             data-label="Time"
                             className={`${styles['team-clocks']} ${darkMode ? 'text-light' : ''}`}
                           >
-                            <u className={darkMode ? styles['dashboard-team-clocks'] : ''}>
-                              {user.weeklycommittedHours ? user.weeklycommittedHours : 0}
-                            </u>{' '}
-                            /
-                            <font color="green">
-                              {' '}
-                              {thisWeekHours ? thisWeekHours.toFixed(1) : 0}
-                            </font>{' '}
-                            /<font color="red"> {totalHoursRemaining.toFixed(1)}</font>
+                            <div style={{ display: 'block' }}>
+                              <u className={darkMode ? styles['dashboard-team-clocks'] : ''}>
+                                {user.weeklycommittedHours ? user.weeklycommittedHours : 0}
+                              </u>{' '}
+                              /
+                              <font color="green">
+                                {' '}
+                                {thisWeekHours ? thisWeekHours.toFixed(1) : 0}
+                              </font>{' '}
+                              /<font color="red"> {totalHoursRemaining.toFixed(1)}</font>
+                            </div>
+                            <div style={{ display: 'block', marginTop: '4px' }}>
+                              <UserStateDisplay
+                                userId={user.personId}
+                                canEdit={
+                                  ['Administrator', 'Owner'].includes(userRole) ||
+                                  auth?.user?.permissions?.frontPermissions?.includes(
+                                    'manage_user_state_indicator',
+                                  )
+                                }
+                              />
+                            </div>
                           </td>
                         </tr>
                       </tbody>