From 1db74db26f9745a0c4901f3cb94adf10022a89d6 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Sat, 9 Mar 2024 21:02:37 -0300
Subject: [PATCH 01/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 .../TeamMemberTasks/MyTeamMember.jsx          | 144 ++++++++++
 .../TeamMemberTasks/TeamMemberTasks.jsx       | 250 ++++++++++++++----
 2 files changed, 336 insertions(+), 58 deletions(-)
 create mode 100644 src/components/TeamMemberTasks/MyTeamMember.jsx

diff --git a/src/components/TeamMemberTasks/MyTeamMember.jsx b/src/components/TeamMemberTasks/MyTeamMember.jsx
new file mode 100644
index 0000000000..d250f5f63c
--- /dev/null
+++ b/src/components/TeamMemberTasks/MyTeamMember.jsx
@@ -0,0 +1,144 @@
+import React, { useState, useMemo, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faBell,
+  faCircle,
+  faCheck,
+  faTimes,
+  faExpandArrowsAlt,
+  faCompressArrowsAlt,
+} from '@fortawesome/free-solid-svg-icons';
+import { Table, Progress, Modal, ModalHeader, ModalBody } from 'reactstrap';
+
+//! ============================================================================================
+//! IMPORTAÇÕES DO OUTRO CÓDIGO
+import CopyToClipboard from 'components/common/Clipboard/CopyToClipboard';
+
+import hasPermission from 'utils/permissions';
+import './style.css';
+import { boxStyle } from 'styles';
+
+import Warning from 'components/Warnings/Warnings';
+import { useDispatch, useSelector } from 'react-redux';
+import moment from 'moment-timezone';
+
+import ReviewButton from './ReviewButton';
+import { getProgressColor, getProgressValue } from '../../utils/effortColors';
+import TeamMemberTaskIconsInfo from './TeamMemberTaskIconsInfo';
+import { showTimeOffRequestModal } from '../../actions/timeOffRequestAction';
+import GoogleDocIcon from '../../components/common/GoogleDocIcon'
+  
+//! ============================================================================================
+
+export const MyTeamMember = (
+  {user, 
+  usersWithTasks,
+  handleOpenTaskNotificationModal,
+  handleMarkAsDoneModal,
+  handleRemoveFromTaskModal,
+  handleTaskModalOption,
+  showWhoHasTimeOff,
+  onTimeOff,
+  goingOnTimeOff
+}
+  ) => {
+
+  const thisWeekHours = user.totalTangibleHrs;
+  
+  const totalHoursRemaining = usersWithTasks.reduce((total, task) => {
+    task.hoursLogged = task.hoursLogged || 0;
+    task.estimatedHours = task.estimatedHours || 0;
+    if (task.status !== 'Complete' && task.isAssigned !== 'false') {
+      return total + Math.max(0, task.estimatedHours - task.hoursLogged);
+    }
+    return total;
+  }, 0);
+  
+  const activeTasks = usersWithTasks.filter(
+    task =>
+      !task.resources?.some(
+        resource => resource.userID === user.personId && resource.completedTask,
+      ),
+  );
+
+  console.log('activeTasks', activeTasks);
+
+  const test = usersWithTasks.filter(item => {
+    !item.tasks.resources?.some(
+      resource => resource.userID === user.personId && resource.completedTask,
+    ),
+    console.log('item.task', item.tasks);
+  });
+  
+    console.log('test', test)
+
+  const canTruncate = activeTasks.length > NUM_TASKS_SHOW_TRUNCATE;
+  const [isTruncated, setIsTruncated] = useState(canTruncate);
+
+
+  const NUM_TASKS_SHOW_TRUNCATE = 6;
+
+   console.log('canTruncate', canTruncate)
+  
+  const numTasksToShow = isTruncated ? NUM_TASKS_SHOW_TRUNCATE : activeTasks.length;
+
+  console.log('numTasksToShow', numTasksToShow)
+  
+
+
+  return (
+    <>
+    <tr className="table-row" key={user._id}>
+      <td colSpan={1}>
+      <section style={{ display: 'flex', alignItems: 'center' }}>
+
+        <div className="committed-hours-circle">
+
+      <FontAwesomeIcon
+                  style={{
+                    color:
+                    thisWeekHours >= user.weeklycommittedHours ? 'green' : 'red',
+                  }}
+                  icon={faCircle}
+                  data-testid="icon"
+                />
+        </div>
+
+        <Link to={`/timelog/${user.personId}`}>
+                <i
+                  className="fa fa-clock-o"
+                  aria-hidden="true"
+                  style={{ fontSize: 24, cursor: 'pointer', color: 'black' }}
+                  title="Click to see user's timelog"
+                />
+          </Link>
+
+      </section>
+      </td>
+
+      <td colSpan={2}>
+        <Table borderless className="team-member-tasks-subtable">
+          <tbody>
+            <tr>
+              <td className="team-member-tasks-user-name">
+
+                  <Link to={`/userprofile/${user._id}`}>{user.firstName}</Link>
+
+              </td>
+
+              <td data-label="Time" className="team-clocks">
+                  <u>{user.weeklycommittedHours ? user.weeklycommittedHours : 0}</u> /
+                    <font color="green"> {thisWeekHours ? thisWeekHours.toFixed(1) : 0}</font> /
+                    <font color="red"> {totalHoursRemaining.toFixed(1)}</font>              
+              </td>
+            </tr>
+          </tbody>
+        </Table>
+
+      </td>
+      
+    </tr>
+    </>
+  );
+}
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index ef85bba5cb..601be25c40 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -19,11 +19,19 @@ import { hrsFilterBtnColorMap } from 'constants/colors';
 import { toast } from 'react-toastify';
 // import InfiniteScroll from 'react-infinite-scroller';
 import { getAllTimeOffRequests } from '../../actions/timeOffRequestAction';
+import { MyTeamMember } from "./MyTeamMember";
+
+//! =========================================================================================
+//! IMPORT PARA CRIAR FILTRO
+import { boxStyle } from 'styles';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+//! =========================================================================================
+
 
 const TeamMemberTasks = React.memo(props => {
   // props from redux store
   const { authUser, displayUser, isLoading, usersWithTasks, usersWithTimeEntries } = props;
-
+  
   const [showTaskNotificationModal, setTaskNotificationModal] = useState(false);
   const [currentTaskNotifications, setCurrentTaskNotifications] = useState([]);
   const [currentTask, setCurrentTask] = useState();
@@ -41,13 +49,59 @@ const TeamMemberTasks = React.memo(props => {
   const [showWhoHasTimeOff, setShowWhoHasTimeOff] = useState(true);
   const userOnTimeOff = useSelector(state => state.timeOffRequests.onTimeOff);
   const userGoingOnTimeOff = useSelector(state => state.timeOffRequests.goingOnTimeOff);
+  
+  
+    //! =========================================================================================
+    //!    UseState PARA CRIAR FILTRO
+
+    //? O TEAMS RETORNA O ID E O NOME DAS EQUIPES.
+    const [teams, setTeams] = useState(displayUser.teams);
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const [selectedTeamName, setSelectedTeamName] = useState(); // contain Team name and ID
+    const [usersSelectedTeam, setUsersSelectedTeam] = useState();
+    const [toggleButtonText, setToggleButtonText] = useState('View All');
+  
+    //! =========================================================================================
+
+  //! =========================================================================================
+  //!    javascript PARA CRIAR FILTRO
+
+  const handleToggleButtonClick = () => { 
+    if (!usersSelectedTeam) {
+        alert();
+        return;
+    }else{
+
+      setToggleButtonText(prevText => prevText === 'View All' ? 'My Team' : 'View All');
+    }
+    // Add any other logic for the button click here
+  }
+
+  const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
+
+
+  // useEffect(() => {
+  //   if (selectedTeamId) {
+  //     updateTeamMembers(selectedTeamId);
+  //   }
+  // }, [selectedTeamId]);
+
+  // useEffect(() => {
+  //   const ids = new Set(timeEntriesList.map(entry => entry._id));
+  //   if (ids.size !== timeEntriesList.length) {
+  //     console.warn('Duplicate keys found in timeEntriesList');
+  //   }
+  // }, [timeEntriesList]);
+
+  //! =========================================================================================
 
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(getAllTimeOffRequests());
+    dispatch(getAllTimeOffRequests()); 
   }, []);
 
+
   const closeMarkAsDone = () => {
     setClickedToShowModal(false);
     setMarkAsDoneModal(false);
@@ -178,9 +232,11 @@ const TeamMemberTasks = React.memo(props => {
     }
   };
 
-  const renderTeamsList = async () => {
-    if (usersWithTasks.length > 0) {
-      //sort all users by their name
+  const renderTeamsList = async (team) => {
+
+    if (!team) {
+          if (usersWithTasks.length > 0) {
+            //sort all users by their name
       usersWithTasks.sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1));
       //find currentUser
       const currentUserIndex = usersWithTasks.findIndex(user => user.personId === displayUser._id);
@@ -190,13 +246,43 @@ const TeamMemberTasks = React.memo(props => {
         usersWithTasks.unshift(...usersWithTasks.splice(currentUserIndex, 1));
       }
       setTeamList([...usersWithTasks]);
+      
     }
-  };
+  }else{
+        setSelectedTeamName(team.teamName);
+    // //TODO: Add additional logic needed when a team is selected
+       try {
+        const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
+        setUsersSelectedTeam(response.data);
 
+        //console.log('usersWithTasks',usersWithTasks);
+        
+      } catch (error) {
+        alert('Error fetching team members:', error);
+      }
+
+  }
+  };
+  
   useEffect(() => {
     // TeamMemberTasks is only imported in TimeLog component, in which userId is already definitive
     const initialFetching = async () => {
       await dispatch(fetchTeamMembersTask(displayUser._id));
+      //await setLoading(false);
+
+      // if (userId !== props.auth.user.userid) {
+      //   console.log("run here [1]");
+      //   await dispatch(fetchTeamMembersTask(userId, props.auth.user.userid));
+      //   const currentUserRole = getUserRole(userId)
+      //     .then(resp => resp)
+      //     .then(user => {
+      //       setUserRole(user.data.role);
+      //     });
+      // } else {
+      //   console.log("run here [2]");
+      //   await dispatch(fetchTeamMembersTask(userId, null));
+      //   setUserRole(props.auth.user.role);
+      // }
     };
     initialFetching();
   }, []);
@@ -222,11 +308,38 @@ const TeamMemberTasks = React.memo(props => {
     setShowWhoHasTimeOff(prev => !prev);
   };
 
-  return (
+ return (
     <div className="container team-member-tasks">
       <header className="header-box">
         <h1>Team Member Tasks</h1>
 
+         {/* Dropdown for selecting a team */}
+         {isLoading ? (
+          <p>Loading teams...</p>
+          ) : (
+            <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
+            <DropdownToggle caret>
+              {selectedTeamName || 'Select a Team'} {/* Display selected team or default text */}
+            </DropdownToggle>
+            <DropdownMenu>
+              {teams.map((team) => (
+                <DropdownItem key={team._id} onClick={() => renderTeamsList(team)}>
+                  {team.teamName}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        )}
+        {<button
+              type="button"
+              color="primary"
+              className="task-button"
+              onClick={handleToggleButtonClick}
+              style={boxStyle}
+            >
+              {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
+          </button> }
+
         {finishLoading ? (
           <div className="hours-btn-container">
             <button
@@ -366,70 +479,91 @@ const TeamMemberTasks = React.memo(props => {
             {isLoading ? (
               <SkeletonLoading template="TeamMemberTasks" />
             ) : (
-              teamList.map(user => {
-                if (!isTimeFilterActive) {
-                  return (
-                    <TeamMemberTask
+              <>
+                {toggleButtonText === 'View All' ? (
+                  teamList.map(user => {
+                    if (!isTimeFilterActive) {
+                      return (
+                        <TeamMemberTask
+                          user={user}
+                          userPermission={props?.auth?.user?.permissions?.frontPermissions?.includes(
+                            'putReviewStatus',
+                          )}
+                          key={user.personId}
+                          handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
+                          handleMarkAsDoneModal={handleMarkAsDoneModal}
+                          handleRemoveFromTaskModal={handleRemoveFromTaskModal}
+                          handleTaskModalOption={handleTaskModalOption}
+                          userRole={displayUser.role}
+                          updateTaskStatus={updateTaskStatus}
+                          userId={displayUser._id}
+                          showWhoHasTimeOff={showWhoHasTimeOff}
+                          onTimeOff={userOnTimeOff[user.personId]}
+                          goingOnTimeOff={userGoingOnTimeOff[user.personId]}
+                        />
+                      );
+                    } else {
+                      return (
+                        <Fragment key={user.personId}>
+                          <TeamMemberTask
+                            user={user}
+                            key={user.personId}
+                            handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
+                            handleMarkAsDoneModal={handleMarkAsDoneModal}
+                            handleRemoveFromTaskModal={handleRemoveFromTaskModal}
+                            handleTaskModalOption={handleTaskModalOption}
+                            showWhoHasTimeOff={showWhoHasTimeOff}
+                            onTimeOff={userOnTimeOff[user.personId]}
+                            goingOnTimeOff={userGoingOnTimeOff[user.personId]}
+                            userRole={displayUser.role}
+                            updateTaskStatus={updateTaskStatus}
+                            userId={displayUser._id}
+                          />
+                          {timeEntriesList.length > 0 &&
+                            timeEntriesList
+                              .filter(timeEntry => timeEntry.personId === user.personId)
+                              .map(timeEntry => (
+                                <tr className="table-row" key={timeEntry._id}>
+                                  <td colSpan={6} style={{ padding: 0 }}>
+                                    <TimeEntry
+                                      from="TaskTab"
+                                      data={timeEntry}
+                                      displayYear
+                                      key={timeEntry._id}
+                                      timeEntryUserProfile={timeEntry.userProfile}
+                                    />
+                                  </td>
+                                </tr>
+                              ))}
+                        </Fragment>
+                      );
+                    }
+                  })
+                ) : (
+                  usersSelectedTeam.map(user => {
+                    return(
+                      <MyTeamMember key={user._id}
                       user={user}
-                      userPermission={props?.auth?.user?.permissions?.frontPermissions?.includes(
-                        'putReviewStatus',
-                      )}
-                      key={user.personId}
+                      usersWithTasks={usersWithTasks}
                       handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
                       handleMarkAsDoneModal={handleMarkAsDoneModal}
                       handleRemoveFromTaskModal={handleRemoveFromTaskModal}
                       handleTaskModalOption={handleTaskModalOption}
-                      userRole={displayUser.role}
-                      updateTaskStatus={updateTaskStatus}
-                      userId={displayUser._id}
                       showWhoHasTimeOff={showWhoHasTimeOff}
-                      onTimeOff={userOnTimeOff[user.personId]}
-                      goingOnTimeOff={userGoingOnTimeOff[user.personId]}
-                    />
-                  );
-                } else {
-                  return (
-                    <Fragment key={user.personId}>
-                      <TeamMemberTask
-                        user={user}
-                        key={user.personId}
-                        handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
-                        handleMarkAsDoneModal={handleMarkAsDoneModal}
-                        handleRemoveFromTaskModal={handleRemoveFromTaskModal}
-                        handleTaskModalOption={handleTaskModalOption}
-                        userRole={displayUser.role}
-                        updateTaskStatus={updateTaskStatus}
-                        userId={displayUser._id}
-                        showWhoHasTimeOff={showWhoHasTimeOff}
-                        onTimeOff={userOnTimeOff[user.personId]}
-                        goingOnTimeOff={userGoingOnTimeOff[user.personId]}
+                      onTimeOff={userOnTimeOff[user._id]}
+                      goingOnTimeOff={userGoingOnTimeOff[user._id]}
                       />
-                      {timeEntriesList.length > 0 &&
-                        timeEntriesList
-                          .filter(timeEntry => timeEntry.personId === user.personId)
-                          .map(timeEntry => (
-                            <tr className="table-row" key={timeEntry._id}>
-                              <td colSpan={6} style={{ padding: 0 }}>
-                                <TimeEntry
-                                  from="TaskTab"
-                                  data={timeEntry}
-                                  displayYear
-                                  key={timeEntry._id}
-                                  timeEntryUserProfile={timeEntry.userProfile}
-                                />
-                              </td>
-                            </tr>
-                          ))}
-                    </Fragment>
-                  );
-                }
-              })
+                    )
+                    })
+                )}
+              </>
             )}
           </tbody>
         </Table>
       </div>
     </div>
   );
+  
 });
 
 const mapStateToProps = state => ({

From 037f982d78a22571e6b7f6eb023da3b4a4181e0e Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Mon, 18 Mar 2024 19:31:06 -0300
Subject: [PATCH 02/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    | 306 +++++++++++++++++-
 .../TeamMemberTasks/MyTeamMember.jsx          | 144 ++++-----
 .../TeamMemberTasks/TeamMemberTasks.jsx       | 186 ++++++++---
 3 files changed, 499 insertions(+), 137 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 0f68764870..a8cdf28bec 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -14,6 +14,14 @@ import MouseoverTextTotalTimeEditButton from 'components/mouseoverText/Mouseover
 import { toast } from 'react-toastify';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
 import moment from 'moment-timezone';
+import { ENDPOINTS } from "../../utils/URL";
+import axios from 'axios' 
+//! =========================================================================================
+//! IMPORT PARA CRIAR FILTRO
+import { boxStyle } from 'styles';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, } from 'reactstrap';
+import { Fragment } from 'react';
+//! =========================================================================================
 
 function useDeepEffect(effectFunc, deps) {
   const isFirst = useRef(true);
@@ -54,12 +62,82 @@ function LeaderBoard({
   const currentDate = moment.tz('America/Los_Angeles').startOf('day');
 
   const [mouseoverTextValue, setMouseoverTextValue] = useState(totalTimeMouseoverText);
-
+  
   useEffect(() => {
     getMouseoverText();
     setMouseoverTextValue(totalTimeMouseoverText);
   }, [totalTimeMouseoverText]);
+  
+  //! =========================================================================================
+    //!    UseState PARA CRIAR FILTRO
+
+    const [teams, setTeams] = useState([]);
+    //? O TEAMS RETORNA O ID E O NOME DAS EQUIPES.
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const [selectedTeamName, setSelectedTeamName] = useState(); // contain Team name and ID
+    const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
+    const [toggleButtonText, setToggleButtonText] = useState('View All');
+    const [isLoadingTeams, setIsLoadingTeams] = useState(false);
+    
+    const [userRole, setUserRole] = useState();
+    
+    const [openModal, setOpenModal] = useState();
+    //! =========================================================================================
+  //! =========================================================================================
+  //!    javascript PARA CRIAR FILTRO
+
+  const dashboardToggleTeams = item => setOpenModal(item._id);
+
+  useEffect(() => {
+    const fetchInitial = async ()  => {
+      const url = ENDPOINTS.USER_PROFILE(displayUserId);
+      try {
+        const response = await axios.get(url);
+        setIsLoadingTeams(true);
+
+        setTeams(response.data.teams);
+        setUserRole(response.data.role)
 
+          setIsLoadingTeams(false);
+
+      } catch (error) {
+        toast.error(error);
+      }
+    }
+      
+    fetchInitial();
+
+    
+  }, [])  
+  
+  const handleToggleButtonClick = () => { 
+    if (!usersSelectedTeam) {
+        alert();
+        return;
+    }else{setToggleButtonText(prevText => prevText === 'View All' ? 'My Team' : 'View All')};
+    // Add any other logic for the button click here
+  }
+
+  const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
+
+  const renderTeamsList = async (team) => {
+
+        setSelectedTeamName(team.teamName);
+
+       try {
+        const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
+         setUsersSelectedTeam(response.data);
+      
+    } catch (error) {
+      toast.error('Error fetching team members:', error);
+    }
+
+  
+    
+  };
+
+  //! =========================================================================================
+  
   const handleMouseoverTextUpdate = text => {
     setMouseoverTextValue(text);
   };
@@ -94,12 +172,15 @@ function LeaderBoard({
   const dashboardClose = () => setIsDashboardOpen(false);
 
   const showDashboard = item => {
-    dashboardClose();
-    window.open(
-      `/dashboard/${item.personId}`,
-      'Popup',
-      'toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30',
-    );
+    //showDashboardTeams
+            item.personId? dashboardClose() : setOpenModal(false);
+
+      window.open(
+        `/dashboard/${item.personId? item.personId : item._id}`,
+        'Popup',
+        'toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30',
+      );
+    
   };
   const updateLeaderboardHandler = async () => {
     setIsLoading(true);
@@ -114,6 +195,7 @@ function LeaderBoard({
 
   return (
     <div>
+      <div style={{}}>
       <h3>
         <div className="d-flex align-items-center">
           <span className="mr-2">Leaderboard</span>
@@ -135,7 +217,58 @@ function LeaderBoard({
             isPermissionPage
           />
         </div>
+
+
       </h3>
+
+
+      {
+       userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner'? (
+  <section className="d-flex flex-row mb-3">
+    <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className=' mr-3 '>
+      <DropdownToggle caret>
+        {selectedTeamName || 'Select a Team'} {/* Display selected team or default text */}
+      </DropdownToggle>
+        <DropdownMenu>
+
+        {
+        teams.length === 0?
+          <DropdownItem onClick={() => toast.warning('Please, create a team to use the filter.')}>
+            {'Please, create a team to use the filter.'}
+          </DropdownItem>
+          :
+        teams.map((team) => (
+          <DropdownItem key={team._id} onClick={() => renderTeamsList(team)}>
+            {team.teamName}
+          </DropdownItem>
+        ))
+
+      }
+        </DropdownMenu>
+
+    </Dropdown>
+
+    <Button
+      color="primary"
+      onClick={handleToggleButtonClick}
+      disabled={isLoadingTeams || teams.length === 0}
+    >
+      {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
+    </Button>
+
+  </section>
+) : (
+  userRole !== 'Administrator' && userRole !== 'Core Team' && userRole !== 'Owner' ? (
+    <></>
+  ) : (
+    null
+  )
+)}
+      </div>
+
+
+
+
       {!isVisible && (
         <Alert color="warning">
           <div className="d-flex align-items-center">
@@ -150,6 +283,8 @@ function LeaderBoard({
           </div>
         </Alert>
       )}
+      {
+          toggleButtonText === 'View All'? (
       <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
         <Table className="leaderboard table-fixed">
           <thead>
@@ -250,7 +385,7 @@ function LeaderBoard({
                         }
                       }}
                     >
-                      {hasLeaderboardPermissions(loggedInUser.role) &&
+                      {hasLeaderboardPermissions(item.role) &&
                       showStar(item.tangibletime, item.weeklycommittedHours) ? (
                         <i
                           className="fa fa-star"
@@ -296,6 +431,7 @@ function LeaderBoard({
                   {/* </Link> */}
                 </td>
                 <th scope="row" className="align-middle">
+                  
                   <Link
                     to={`/userprofile/${item.personId}`}
                     title="View Profile"
@@ -408,6 +544,160 @@ function LeaderBoard({
           </tbody>
         </Table>
       </div>
+
+          )  : 
+          usersSelectedTeam.length === 0?(
+          
+            <Table  className='text-start mt-3'>
+              <thead>
+              <tr>
+                <td><h4>Error</h4></td>
+              </tr>
+              </thead>
+
+              <tbody>
+              <tr>
+                <th>The team currently has no members. Please add a member to this team or select another team.</th>
+              </tr>
+              </tbody>
+
+            </Table>
+                        ) :  (
+          
+            <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
+<Table
+className="p-2"
+>
+ 
+  <thead>
+    <tr>
+      <th
+         className="align-middle"
+      >
+        Status
+      </th>
+      <th  className="align-middle">
+        <span style={{ display: 'flex',  gap:5 }}>
+
+         Name
+         <EditableInfoModal
+                    areaName="Leaderboard"
+                    areaTitle="Team Members Navigation"
+                    role={loggedInUser.role}
+                    fontSize={18}
+                    isPermissionPage
+                    className="p-2" // Add Bootstrap padding class to the EditableInfoModal
+                  />
+        </span>
+      </th>
+      
+      <th className="align-middle">
+       Total Time
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {  usersSelectedTeam.map((item) => {
+                              return(
+                                <Fragment key={item._id}>
+                             
+                                       <Modal isOpen={openModal === item._id} toggle={dashboardToggleTeams}>
+                                         <ModalHeader toggle={dashboardToggleTeams}>Jump to personal Dashboard</ModalHeader>
+                                         <ModalBody>
+                                           <p>Are you sure you wish to view this {item.firstName} {item.lastName} dashboard?</p>
+                                         </ModalBody>
+                                         <ModalFooter>
+                                           <Button variant="primary" onClick={() => showDashboard(item)}>
+                                             Ok
+                                           </Button>{' '}
+                                           <Button variant="secondary" onClick={dashboardToggleTeams}>
+                                             Cancel
+                                           </Button>
+                                         </ModalFooter>
+                                       </Modal>                                  
+                    <tr>
+                      <th   className="align-middle">
+                        
+                      <div            
+                                      role="button"
+                                      tabIndex={0}
+                                      onClick={() => {
+                                        dashboardToggleTeams(item);
+                                      }}
+                                      onKeyDown={e => {
+                                        if (e.key === 'Enter') {
+                                          dashboardToggleTeams(item);
+                                        }
+                                      }}
+                                    >
+                                      {hasLeaderboardPermissions(loggedInUser.role) &&
+                                      showStar(item.totalIntangibleHrs, item.weeklycommittedHours) ? (
+                                        <i
+                                          className="fa fa-star"
+                                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                                          style={{
+                                            color: assignStarDotColors(
+                                              item.totalIntangibleHrs,
+                                              item.weeklycommittedHours,
+                                            ),
+                                            fontSize: '20px',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                          }}
+                                        />
+                                      ) : (
+                                        <div
+                                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                                          style={{
+                                            backgroundColor:
+                                              item.totalTangibleHrs >= item.weeklycommittedHours ? '#32CD32' : 'red',
+                                            width: 15,
+                                            height: 15,
+                                            borderRadius: 7.5,
+                                            margin: 'auto',
+                                            verticalAlign: 'middle',
+                                          }}
+                                        />
+
+                                        
+                                      )}
+                                    </div>
+                
+                      
+                      </th>
+                
+                      <th scope="row" className="align-middle" >
+                          
+                                <Link to={`/userprofile/${item._id}`}>{item.firstName} {item.lastName}</Link>
+                      </th>
+                
+                        <th className="align-middle">
+                             <p>{item.totalTangibleHrs}</p>
+                        </th>
+                
+                    </tr>
+
+                                </Fragment>
+                            
+                            )
+                          })
+
+              
+
+    }
+      
+
+   
+  </tbody>
+</Table>
+
+            </div>
+
+            
+
+          )
+      }
     </div>
   );
 }
diff --git a/src/components/TeamMemberTasks/MyTeamMember.jsx b/src/components/TeamMemberTasks/MyTeamMember.jsx
index d250f5f63c..856ffb217e 100644
--- a/src/components/TeamMemberTasks/MyTeamMember.jsx
+++ b/src/components/TeamMemberTasks/MyTeamMember.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef } from 'react';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -10,88 +10,52 @@ import {
   faCompressArrowsAlt,
 } from '@fortawesome/free-solid-svg-icons';
 import { Table, Progress, Modal, ModalHeader, ModalBody } from 'reactstrap';
-
-//! ============================================================================================
-//! IMPORTAÇÕES DO OUTRO CÓDIGO
-import CopyToClipboard from 'components/common/Clipboard/CopyToClipboard';
-
-import hasPermission from 'utils/permissions';
 import './style.css';
-import { boxStyle } from 'styles';
-
-import Warning from 'components/Warnings/Warnings';
-import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment-timezone';
-
-import ReviewButton from './ReviewButton';
-import { getProgressColor, getProgressValue } from '../../utils/effortColors';
-import TeamMemberTaskIconsInfo from './TeamMemberTaskIconsInfo';
-import { showTimeOffRequestModal } from '../../actions/timeOffRequestAction';
 import GoogleDocIcon from '../../components/common/GoogleDocIcon'
-  
-//! ============================================================================================
-
-export const MyTeamMember = (
-  {user, 
-  usersWithTasks,
-  handleOpenTaskNotificationModal,
-  handleMarkAsDoneModal,
-  handleRemoveFromTaskModal,
-  handleTaskModalOption,
-  showWhoHasTimeOff,
-  onTimeOff,
-  goingOnTimeOff
-}
-  ) => {
-
-  const thisWeekHours = user.totalTangibleHrs;
-  
-  const totalHoursRemaining = usersWithTasks.reduce((total, task) => {
-    task.hoursLogged = task.hoursLogged || 0;
-    task.estimatedHours = task.estimatedHours || 0;
-    if (task.status !== 'Complete' && task.isAssigned !== 'false') {
-      return total + Math.max(0, task.estimatedHours - task.hoursLogged);
-    }
-    return total;
-  }, 0);
-  
-  const activeTasks = usersWithTasks.filter(
-    task =>
-      !task.resources?.some(
-        resource => resource.userID === user.personId && resource.completedTask,
-      ),
-  );
-
-  console.log('activeTasks', activeTasks);
+import hasPermission from 'utils/permissions';
+import { useDispatch, useSelector } from 'react-redux';
 
-  const test = usersWithTasks.filter(item => {
-    !item.tasks.resources?.some(
-      resource => resource.userID === user.personId && resource.completedTask,
-    ),
-    console.log('item.task', item.tasks);
-  });
+export const MyTeamMember = ({user, usersWithTasks,}) => {
   
-    console.log('test', test)
-
-  const canTruncate = activeTasks.length > NUM_TASKS_SHOW_TRUNCATE;
-  const [isTruncated, setIsTruncated] = useState(canTruncate);
+  const thisWeekHours = user.totalTangibleHrs;
 
+  const currentDate = moment.tz('America/Los_Angeles').startOf('day');
 
-  const NUM_TASKS_SHOW_TRUNCATE = 6;
+  const dispatch = useDispatch();
 
-   console.log('canTruncate', canTruncate)
   
-  const numTasksToShow = isTruncated ? NUM_TASKS_SHOW_TRUNCATE : activeTasks.length;
+  const canGetWeeklySummaries = dispatch(hasPermission('getWeeklySummaries'));
+
 
-  console.log('numTasksToShow', numTasksToShow)
   
+            const totalHoursRemaining = usersWithTasks.reduce((total, user) => {
+                                
+              user.tasks.forEach(task => {
+
+                  if (task.status !== 'Complete' && task.isAssigned !== 'false') {
+                    return  total + Math.max(0, task.estimatedHours - task.hoursLogged);
+                  }
+              });
+              return total;
+          }, 0);
+          
+ const userGoogleDocLink = user.adminLinks?.reduce((targetLink, currentElement) => {
+  if (currentElement.Name === 'Google Doc') {
+    targetLink = currentElement.Link
+  }
+  return targetLink;
+}, undefined);
 
 
   return (
-    <>
-    <tr className="table-row" key={user._id}>
-      <td colSpan={1}>
-      <section style={{ display: 'flex', alignItems: 'center' }}>
+    <tr className="table-row d-flex justify-content-between d-flex align-items-center"
+     key={user._id} 
+    >
+      <td>
+      <section style={{ display: 'flex', alignItems: 'center'}}
+      
+      >
 
         <div className="committed-hours-circle">
 
@@ -104,8 +68,9 @@ export const MyTeamMember = (
                   data-testid="icon"
                 />
         </div>
+        
 
-        <Link to={`/timelog/${user.personId}`}>
+        <Link to={`/timelog/${user._id}`}>
                 <i
                   className="fa fa-clock-o"
                   aria-hidden="true"
@@ -117,28 +82,49 @@ export const MyTeamMember = (
       </section>
       </td>
 
-      <td colSpan={2}>
-        <Table borderless className="team-member-tasks-subtable">
-          <tbody>
-            <tr>
-              <td className="team-member-tasks-user-name">
+      <td 
+        
 
-                  <Link to={`/userprofile/${user._id}`}>{user.firstName}</Link>
+      >
+        <Table borderless className="team-member-tasks-subtable"
+        >
+          <tbody
+          >
+            
+            <tr
+
+            >
+              <td className="team-member-tasks-user-name"
+              >
+
+                  <Link to={`/userprofile/${user._id}`}
+                   style={{
+                    color:
+                      currentDate.isSameOrAfter(
+                        moment(user.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                      ) &&
+                      currentDate.isBefore(moment(user.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
+                        ? 'rgba(128, 128, 128, 0.5)'
+                        : undefined,
+                  }}
+                  >{user.firstName} {user.lastName}</Link>
+                    {canGetWeeklySummaries && (<GoogleDocIcon link={userGoogleDocLink}/>)}
 
               </td>
 
-              <td data-label="Time" className="team-clocks">
+              <td data-label="Time" /* className="team-clocks" */
+    >
                   <u>{user.weeklycommittedHours ? user.weeklycommittedHours : 0}</u> /
                     <font color="green"> {thisWeekHours ? thisWeekHours.toFixed(1) : 0}</font> /
                     <font color="red"> {totalHoursRemaining.toFixed(1)}</font>              
               </td>
+
             </tr>
           </tbody>
         </Table>
 
       </td>
-      
+           
     </tr>
-    </>
   );
 }
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 601be25c40..b1fead5252 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, Suspense } from 'react';
 import { faClock } from '@fortawesome/free-solid-svg-icons';
 import { Table } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -24,7 +24,7 @@ import { MyTeamMember } from "./MyTeamMember";
 //! =========================================================================================
 //! IMPORT PARA CRIAR FILTRO
 import { boxStyle } from 'styles';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Button } from 'reactstrap';
 //! =========================================================================================
 
 
@@ -58,8 +58,9 @@ const TeamMemberTasks = React.memo(props => {
     const [teams, setTeams] = useState(displayUser.teams);
     const [dropdownOpen, setDropdownOpen] = useState(false);
     const [selectedTeamName, setSelectedTeamName] = useState(); // contain Team name and ID
-    const [usersSelectedTeam, setUsersSelectedTeam] = useState();
+    const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
     const [toggleButtonText, setToggleButtonText] = useState('View All');
+    const [userRole, setUserRole] = useState();
   
     //! =========================================================================================
 
@@ -79,20 +80,6 @@ const TeamMemberTasks = React.memo(props => {
 
   const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
 
-
-  // useEffect(() => {
-  //   if (selectedTeamId) {
-  //     updateTeamMembers(selectedTeamId);
-  //   }
-  // }, [selectedTeamId]);
-
-  // useEffect(() => {
-  //   const ids = new Set(timeEntriesList.map(entry => entry._id));
-  //   if (ids.size !== timeEntriesList.length) {
-  //     console.warn('Duplicate keys found in timeEntriesList');
-  //   }
-  // }, [timeEntriesList]);
-
   //! =========================================================================================
 
   const dispatch = useDispatch();
@@ -255,19 +242,18 @@ const TeamMemberTasks = React.memo(props => {
         const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
         setUsersSelectedTeam(response.data);
 
-        //console.log('usersWithTasks',usersWithTasks);
-        
       } catch (error) {
-        alert('Error fetching team members:', error);
+        toast.error('Error fetching team members:', error);
       }
-
   }
   };
   
   useEffect(() => {
     // TeamMemberTasks is only imported in TimeLog component, in which userId is already definitive
     const initialFetching = async () => {
+
       await dispatch(fetchTeamMembersTask(displayUser._id));
+      setUserRole(displayUser.role)
       //await setLoading(false);
 
       // if (userId !== props.auth.user.userid) {
@@ -311,38 +297,67 @@ const TeamMemberTasks = React.memo(props => {
  return (
     <div className="container team-member-tasks">
       <header className="header-box">
+        <section className='d-flex flex-column'>
         <h1>Team Member Tasks</h1>
 
          {/* Dropdown for selecting a team */}
-         {isLoading ? (
-          <p>Loading teams...</p>
-          ) : (
-            <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
-            <DropdownToggle caret>
-              {selectedTeamName || 'Select a Team'} {/* Display selected team or default text */}
-            </DropdownToggle>
-            <DropdownMenu>
-              {teams.map((team) => (
-                <DropdownItem key={team._id} onClick={() => renderTeamsList(team)}>
-                  {team.teamName}
-                </DropdownItem>
-              ))}
-            </DropdownMenu>
-          </Dropdown>
-        )}
-        {<button
-              type="button"
-              color="primary"
-              className="task-button"
-              onClick={handleToggleButtonClick}
-              style={boxStyle}
-            >
-              {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
-          </button> }
+         {isLoading && (userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner') 
+? (
+  <p>Loading teams...</p>
+  ) :
+ !isLoading && (userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner')  
+? (
+<Suspense fallback={<p>aaaaaaaaaa</p>}>
+  <>
+    <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className='mb-3'>
+      <DropdownToggle caret>
+        {selectedTeamName || 'Select a Team'} {/* Display selected team or default text */}
+      </DropdownToggle>
+      <DropdownMenu>
+        {
+        teams.length === 0?
+          <DropdownItem onClick={() => toast.warning('Please, create a team to use the filter.')}>
+            {'Please, create a team to use the filter.'}
+          </DropdownItem>
+          :
+        teams.map((team) => (
+          <DropdownItem key={team._id} onClick={() => renderTeamsList(team)}>
+            {team.teamName}
+          </DropdownItem>
+        ))
+
+      }
+      </DropdownMenu>
+    </Dropdown>
+
+    <Button 
+      color="primary"
+      onClick={handleToggleButtonClick}
+      style={{width: '7rem'}}
+      className='mb-3 mb-0-md-end'
+      disabled={isLoading || teams.length === 0}
+    >
+      {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
+    </Button>
+  </>
+    </Suspense>   
+) : (
+  userRole !== 'Administrator' && userRole !== 'Core Team' && userRole !== 'Owner' ? (
+    <></>
+  ) : !isLoading && (userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner')  
+   (
+    null
+  )
+ 
+)}
+
+        </section>
+
+
 
         {finishLoading ? (
-          <div className="hours-btn-container">
-            <button
+          <section className="hours-btn-container">
+           <button
               type="button"
               className={`show-time-off-btn ${
                 showWhoHasTimeOff ? 'show-time-off-btn-selected' : ''
@@ -399,7 +414,7 @@ const TeamMemberTasks = React.memo(props => {
               isPermissionPage={true}
               role={authUser.role} 
             />
-          </div>
+          </section>
         ) : (
           <SkeletonLoading template="TimelogFilter" />
         )}
@@ -433,6 +448,8 @@ const TeamMemberTasks = React.memo(props => {
       <div className="table-container">
         <Table>
           <thead className="pc-component" style={{ position: 'sticky', top: 0 }}>
+          {
+          toggleButtonText === 'View All' ? (
             <tr>
               {/* Empty column header for hours completed icon */}
               <th colSpan={1}/>
@@ -474,6 +491,62 @@ const TeamMemberTasks = React.memo(props => {
                 </Table>
               </th>
             </tr>
+                                            
+          ) :   usersSelectedTeam.length === 0?( 
+            <tr>
+
+            <th  className="team-member-tasks-headers">
+             <Table borderless>
+              <thead>
+                <th> <h4>Error</h4></th>
+              </thead>
+              </Table> 
+            </th>
+
+            </tr>
+              
+
+          ) : (
+            <tr>                
+            <th  
+className="team-member-tasks-headers table-row d-flex justify-content-between d-flex align-items-center"   
+                    >
+                      
+                      <Table borderless className="team-member-tasks-subtable">
+                        <thead>
+                          <tr>
+                          <th></th>
+        
+                            <th className="team-member-tasks-headers team-member-tasks-user-name">
+                              Team Member
+                            </th>
+                            <th className="team-member-tasks-headers team-clocks team-clocks-header "
+                              style={{ gap: 4 }}
+                            >
+                              <FontAwesomeIcon icon={faClock} title="Weekly Committed Hours" />
+                              /
+                              <FontAwesomeIcon
+                                style={{ color: 'green' }}
+                                icon={faClock}
+                                title="Total Hours Completed this Week"
+                              />
+                              /
+                              <FontAwesomeIcon
+                                style={{ color: 'red' }}
+                                icon={faClock}
+                                title="Total Remaining Hours"
+                              />
+                            </th>
+                          </tr>
+                        </thead>
+                      </Table>
+                    </th>                                 
+      
+    </tr>
+           
+          )
+
+          }
           </thead>
           <tbody>
             {isLoading ? (
@@ -539,7 +612,19 @@ const TeamMemberTasks = React.memo(props => {
                       );
                     }
                   })
-                ) : (
+                ) : 
+                usersSelectedTeam.length === 0?(
+                  <Table>
+              <tbody>
+              <tr>
+                <th>The team currently has no members. Please add a member to this team or select another team.</th>
+              </tr>
+              </tbody>
+
+            </Table>
+                ):
+                (
+                  
                   usersSelectedTeam.map(user => {
                     return(
                       <MyTeamMember key={user._id}
@@ -552,6 +637,7 @@ const TeamMemberTasks = React.memo(props => {
                       showWhoHasTimeOff={showWhoHasTimeOff}
                       onTimeOff={userOnTimeOff[user._id]}
                       goingOnTimeOff={userGoingOnTimeOff[user._id]}
+                      updateTaskStatus={updateTaskStatus}
                       />
                     )
                     })

From 64c7ccaf23b0322c2802ccfe911a059cebf5396e Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Tue, 19 Mar 2024 19:08:21 -0300
Subject: [PATCH 03/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    | 46 +++++-----
 .../TeamMemberTasks/TeamMemberTasks.jsx       | 85 ++++++++++---------
 2 files changed, 70 insertions(+), 61 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index a8cdf28bec..66edff58a3 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -77,8 +77,7 @@ function LeaderBoard({
     const [selectedTeamName, setSelectedTeamName] = useState(); // contain Team name and ID
     const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
     const [toggleButtonText, setToggleButtonText] = useState('View All');
-    const [isLoadingTeams, setIsLoadingTeams] = useState(false);
-    
+    const [isLoadingTeams, setIsLoadingTeams] = useState(false);    
     const [userRole, setUserRole] = useState();
     
     const [openModal, setOpenModal] = useState();
@@ -93,13 +92,10 @@ function LeaderBoard({
       const url = ENDPOINTS.USER_PROFILE(displayUserId);
       try {
         const response = await axios.get(url);
-        setIsLoadingTeams(true);
-
+        
         setTeams(response.data.teams);
         setUserRole(response.data.role)
-
-          setIsLoadingTeams(false);
-
+        
       } catch (error) {
         toast.error(error);
       }
@@ -111,10 +107,12 @@ function LeaderBoard({
   }, [])  
   
   const handleToggleButtonClick = () => { 
-    if (!usersSelectedTeam) {
-        alert();
-        return;
-    }else{setToggleButtonText(prevText => prevText === 'View All' ? 'My Team' : 'View All')};
+const text  =  'You have not selected a team or the selected team does not have any members.';
+
+      isLoadingTeams? toast.warning('Please wait while the teams are loading.')
+    : usersSelectedTeam.length === 0? toast.error(text)
+    :
+    setToggleButtonText(prevText => prevText === 'View All' ? 'My Team' : 'View All');
     // Add any other logic for the button click here
   }
 
@@ -122,14 +120,18 @@ function LeaderBoard({
 
   const renderTeamsList = async (team) => {
 
-        setSelectedTeamName(team.teamName);
+    
+    try {
+      setIsLoadingTeams(true);
+      const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
+      setUsersSelectedTeam(response.data);
+      setIsLoadingTeams(false);
 
-       try {
-        const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
-         setUsersSelectedTeam(response.data);
-      
-    } catch (error) {
-      toast.error('Error fetching team members:', error);
+      const teamName = team.teamName.substring(0, 30) + '...'
+      setSelectedTeamName(team.teamName.length >= 30 ? teamName : team.teamName );
+      } catch (error) {
+        toast.error('Error fetching team members:', error);
+        setIsLoadingTeams(false);
     }
 
   
@@ -195,7 +197,7 @@ function LeaderBoard({
 
   return (
     <div>
-      <div style={{}}>
+      <div>
       <h3>
         <div className="d-flex align-items-center">
           <span className="mr-2">Leaderboard</span>
@@ -224,8 +226,8 @@ function LeaderBoard({
 
       {
        userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner'? (
-  <section className="d-flex flex-row mb-3">
-    <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className=' mr-3 '>
+  <section className="d-flex flex-row flex-wrap mb-3">
+    <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className=' mr-3'>
       <DropdownToggle caret>
         {selectedTeamName || 'Select a Team'} {/* Display selected team or default text */}
       </DropdownToggle>
@@ -251,7 +253,7 @@ function LeaderBoard({
     <Button
       color="primary"
       onClick={handleToggleButtonClick}
-      disabled={isLoadingTeams || teams.length === 0}
+      disabled={teams.length === 0}
     >
       {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
     </Button>
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index b1fead5252..b8f7701adf 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -1,4 +1,4 @@
-import { Fragment, Suspense } from 'react';
+import { Fragment } from 'react';
 import { faClock } from '@fortawesome/free-solid-svg-icons';
 import { Table } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -24,7 +24,7 @@ import { MyTeamMember } from "./MyTeamMember";
 //! =========================================================================================
 //! IMPORT PARA CRIAR FILTRO
 import { boxStyle } from 'styles';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Button } from 'reactstrap';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, Spinner  } from 'reactstrap';
 //! =========================================================================================
 
 
@@ -56,11 +56,12 @@ const TeamMemberTasks = React.memo(props => {
 
     //? O TEAMS RETORNA O ID E O NOME DAS EQUIPES.
     const [teams, setTeams] = useState(displayUser.teams);
-    const [dropdownOpen, setDropdownOpen] = useState(false);
-    const [selectedTeamName, setSelectedTeamName] = useState(); // contain Team name and ID
+    const [dropdownOpen, setDropdownOpen] = useState(false);    
     const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
+    const [selectedTeamName, setSelectedTeamName] = useState(''); 
     const [toggleButtonText, setToggleButtonText] = useState('View All');
-    const [userRole, setUserRole] = useState();
+    const [userRole, setUserRole] = useState(displayUser.role);
+    const [loading, setLoading] = useState(false);
   
     //! =========================================================================================
 
@@ -68,14 +69,12 @@ const TeamMemberTasks = React.memo(props => {
   //!    javascript PARA CRIAR FILTRO
 
   const handleToggleButtonClick = () => { 
-    if (!usersSelectedTeam) {
-        alert();
-        return;
-    }else{
+const text  =  'You have not selected a team or the selected team does not have any members.';
 
+    loading? toast.warning('Please wait while the teams are loading.') 
+    : usersSelectedTeam.length === 0? toast.error(text) 
+    :
       setToggleButtonText(prevText => prevText === 'View All' ? 'My Team' : 'View All');
-    }
-    // Add any other logic for the button click here
   }
 
   const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
@@ -235,16 +234,17 @@ const TeamMemberTasks = React.memo(props => {
       setTeamList([...usersWithTasks]);
       
     }
-  }else{
-        setSelectedTeamName(team.teamName);
-    // //TODO: Add additional logic needed when a team is selected
-       try {
-        const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
-        setUsersSelectedTeam(response.data);
-
-      } catch (error) {
+  }else{    
+    try {
+          setLoading(true);
+          const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
+          setUsersSelectedTeam(response.data);
+          setLoading(false);
+          const teamName = team.teamName.substring(0, 15) + '...'
+          setSelectedTeamName( team.teamName.length >= 15 ? teamName : team.teamName)
+        } catch (error) {
         toast.error('Error fetching team members:', error);
-      }
+      } 
   }
   };
   
@@ -253,7 +253,6 @@ const TeamMemberTasks = React.memo(props => {
     const initialFetching = async () => {
 
       await dispatch(fetchTeamMembersTask(displayUser._id));
-      setUserRole(displayUser.role)
       //await setLoading(false);
 
       // if (userId !== props.auth.user.userid) {
@@ -295,23 +294,29 @@ const TeamMemberTasks = React.memo(props => {
   };
 
  return (
-    <div className="container team-member-tasks">
+    <div className="container team-member-tasks container-fluid">
       <header className="header-box">
         <section className='d-flex flex-column'>
         <h1>Team Member Tasks</h1>
 
          {/* Dropdown for selecting a team */}
-         {isLoading && (userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner') 
+         { isLoading &&  ( userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner' )
 ? (
-  <p>Loading teams...</p>
+  <>
+      <span  className='d-flex justify-content-start align-items-center'> Loading teams:  &nbsp;
+    <Spinner color="primary">
+    Loading...
+    </Spinner>
+      </span> 
+    
+  </>
   ) :
  !isLoading && (userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner')  
 ? (
-<Suspense fallback={<p>aaaaaaaaaa</p>}>
-  <>
+  <section className='d-flex flex-row mr-xl-2'>
     <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className='mb-3'>
       <DropdownToggle caret>
-        {selectedTeamName || 'Select a Team'} {/* Display selected team or default text */}
+      {selectedTeamName || 'Select a Team'}
       </DropdownToggle>
       <DropdownMenu>
         {
@@ -330,22 +335,23 @@ const TeamMemberTasks = React.memo(props => {
       </DropdownMenu>
     </Dropdown>
 
+    &nbsp; &nbsp; 
+
     <Button 
       color="primary"
       onClick={handleToggleButtonClick}
       style={{width: '7rem'}}
       className='mb-3 mb-0-md-end'
-      disabled={isLoading || teams.length === 0}
+      disabled={teams.length === 0}
     >
       {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
     </Button>
-  </>
-    </Suspense>   
+  </section>
 ) : (
-  userRole !== 'Administrator' && userRole !== 'Core Team' && userRole !== 'Owner' ? (
+  !isLoading && (userRole !== 'Administrator' && userRole !== 'Core Team' && userRole !== 'Owner' )? (
     <></>
-  ) : !isLoading && (userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner')  
-   (
+  ) : 
+  (
     null
   )
  
@@ -353,13 +359,13 @@ const TeamMemberTasks = React.memo(props => {
 
         </section>
 
-
-
         {finishLoading ? (
-          <section className="hours-btn-container">
+          <section className=" hours-btn-container   flex-wrap ml-3 "
+          >
+            <div  className='mb-2'>
            <button
               type="button"
-              className={`show-time-off-btn ${
+              className={` mr-2 show-time-off-btn ${
                 showWhoHasTimeOff ? 'show-time-off-btn-selected' : ''
               }`}
               onClick={handleshowWhoHasTimeOff}
@@ -369,7 +375,7 @@ const TeamMemberTasks = React.memo(props => {
                 width="22"
                 height="19"
                 viewBox="0 0 448 512"
-                className={`show-time-off-calender-svg ${
+                className={` mr-2 show-time-off-calender-svg ${
                   showWhoHasTimeOff ? 'show-time-off-calender-svg-selected' : ''
                 }`}
               >
@@ -395,7 +401,7 @@ const TeamMemberTasks = React.memo(props => {
               <button
                 key={idx}
                 type="button"
-                className={`circle-border ${days} days`}
+                className={`circle-border ${days} days mr-2 mb-2 `}
                 title={`Timelogs submitted in the past ${days} days`}
                 style={{
                   color: selectedPeriod === days && isTimeFilterActive ? 'white' : color,
@@ -407,6 +413,7 @@ const TeamMemberTasks = React.memo(props => {
                 {days} days
               </button>
             ))}
+            </div>
             <EditableInfoModal
               areaName="TeamMemberTasksTimeFilterInfoPoint"
               areaTitle="Team Member Task Time Filter"

From 0f421d6c96d3452794621085c323f0917a9eae88 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Tue, 19 Mar 2024 21:52:20 -0300
Subject: [PATCH 04/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    | 18 +-------
 .../TeamMemberTasks/TeamMemberTasks.jsx       | 45 ++++---------------
 2 files changed, 9 insertions(+), 54 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 66edff58a3..9b9e3083f9 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -16,12 +16,9 @@ import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfo
 import moment from 'moment-timezone';
 import { ENDPOINTS } from "../../utils/URL";
 import axios from 'axios' 
-//! =========================================================================================
-//! IMPORT PARA CRIAR FILTRO
 import { boxStyle } from 'styles';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, } from 'reactstrap';
 import { Fragment } from 'react';
-//! =========================================================================================
 
 function useDeepEffect(effectFunc, deps) {
   const isFirst = useRef(true);
@@ -68,22 +65,14 @@ function LeaderBoard({
     setMouseoverTextValue(totalTimeMouseoverText);
   }, [totalTimeMouseoverText]);
   
-  //! =========================================================================================
-    //!    UseState PARA CRIAR FILTRO
-
     const [teams, setTeams] = useState([]);
-    //? O TEAMS RETORNA O ID E O NOME DAS EQUIPES.
     const [dropdownOpen, setDropdownOpen] = useState(false);
-    const [selectedTeamName, setSelectedTeamName] = useState(); // contain Team name and ID
+    const [selectedTeamName, setSelectedTeamName] = useState(); 
     const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
     const [toggleButtonText, setToggleButtonText] = useState('View All');
     const [isLoadingTeams, setIsLoadingTeams] = useState(false);    
     const [userRole, setUserRole] = useState();
-    
     const [openModal, setOpenModal] = useState();
-    //! =========================================================================================
-  //! =========================================================================================
-  //!    javascript PARA CRIAR FILTRO
 
   const dashboardToggleTeams = item => setOpenModal(item._id);
 
@@ -133,12 +122,7 @@ const text  =  'You have not selected a team or the selected team does not have
         toast.error('Error fetching team members:', error);
         setIsLoadingTeams(false);
     }
-
-  
-    
   };
-
-  //! =========================================================================================
   
   const handleMouseoverTextUpdate = text => {
     setMouseoverTextValue(text);
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index b8f7701adf..c760cea5da 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -20,12 +20,8 @@ import { toast } from 'react-toastify';
 // import InfiniteScroll from 'react-infinite-scroller';
 import { getAllTimeOffRequests } from '../../actions/timeOffRequestAction';
 import { MyTeamMember } from "./MyTeamMember";
-
-//! =========================================================================================
-//! IMPORT PARA CRIAR FILTRO
 import { boxStyle } from 'styles';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, Spinner  } from 'reactstrap';
-//! =========================================================================================
 
 
 const TeamMemberTasks = React.memo(props => {
@@ -50,23 +46,13 @@ const TeamMemberTasks = React.memo(props => {
   const userOnTimeOff = useSelector(state => state.timeOffRequests.onTimeOff);
   const userGoingOnTimeOff = useSelector(state => state.timeOffRequests.goingOnTimeOff);
   
-  
-    //! =========================================================================================
-    //!    UseState PARA CRIAR FILTRO
-
-    //? O TEAMS RETORNA O ID E O NOME DAS EQUIPES.
-    const [teams, setTeams] = useState(displayUser.teams);
-    const [dropdownOpen, setDropdownOpen] = useState(false);    
-    const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
-    const [selectedTeamName, setSelectedTeamName] = useState(''); 
-    const [toggleButtonText, setToggleButtonText] = useState('View All');
-    const [userRole, setUserRole] = useState(displayUser.role);
-    const [loading, setLoading] = useState(false);
-  
-    //! =========================================================================================
-
-  //! =========================================================================================
-  //!    javascript PARA CRIAR FILTRO
+  const [teams, setTeams] = useState(displayUser.teams);
+  const [dropdownOpen, setDropdownOpen] = useState(false);    
+  const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
+  const [selectedTeamName, setSelectedTeamName] = useState(''); 
+  const [toggleButtonText, setToggleButtonText] = useState('View All');
+  const [userRole, setUserRole] = useState(displayUser.role);
+  const [loading, setLoading] = useState(false);
 
   const handleToggleButtonClick = () => { 
 const text  =  'You have not selected a team or the selected team does not have any members.';
@@ -79,7 +65,6 @@ const text  =  'You have not selected a team or the selected team does not have
 
   const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
 
-  //! =========================================================================================
 
   const dispatch = useDispatch();
 
@@ -253,21 +238,7 @@ const text  =  'You have not selected a team or the selected team does not have
     const initialFetching = async () => {
 
       await dispatch(fetchTeamMembersTask(displayUser._id));
-      //await setLoading(false);
-
-      // if (userId !== props.auth.user.userid) {
-      //   console.log("run here [1]");
-      //   await dispatch(fetchTeamMembersTask(userId, props.auth.user.userid));
-      //   const currentUserRole = getUserRole(userId)
-      //     .then(resp => resp)
-      //     .then(user => {
-      //       setUserRole(user.data.role);
-      //     });
-      // } else {
-      //   console.log("run here [2]");
-      //   await dispatch(fetchTeamMembersTask(userId, null));
-      //   setUserRole(props.auth.user.role);
-      // }
+      
     };
     initialFetching();
   }, []);

From 3fdad23d6914e17bbaf137a73d80ca5d6b1534a1 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 15:21:00 -0300
Subject: [PATCH 05/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    | 981 +++++++++---------
 .../TeamMemberTasks/MyTeamMember.jsx          | 137 +--
 .../TeamMemberTasks/TeamMemberTasks.jsx       | 555 +++++-----
 3 files changed, 794 insertions(+), 879 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 9b9e3083f9..67f5396d0a 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, Fragment } from 'react';
 import './Leaderboard.css';
 import { isEqual } from 'lodash';
 import { Link } from 'react-router-dom';
@@ -14,11 +14,10 @@ import MouseoverTextTotalTimeEditButton from 'components/mouseoverText/Mouseover
 import { toast } from 'react-toastify';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
 import moment from 'moment-timezone';
-import { ENDPOINTS } from "../../utils/URL";
-import axios from 'axios' 
+import { ENDPOINTS } from '../../utils/URL';
+import axios from 'axios';
 import { boxStyle } from 'styles';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, } from 'reactstrap';
-import { Fragment } from 'react';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
 function useDeepEffect(effectFunc, deps) {
   const isFirst = useRef(true);
@@ -59,71 +58,64 @@ function LeaderBoard({
   const currentDate = moment.tz('America/Los_Angeles').startOf('day');
 
   const [mouseoverTextValue, setMouseoverTextValue] = useState(totalTimeMouseoverText);
-  
+
   useEffect(() => {
     getMouseoverText();
     setMouseoverTextValue(totalTimeMouseoverText);
   }, [totalTimeMouseoverText]);
-  
-    const [teams, setTeams] = useState([]);
-    const [dropdownOpen, setDropdownOpen] = useState(false);
-    const [selectedTeamName, setSelectedTeamName] = useState(); 
-    const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
-    const [toggleButtonText, setToggleButtonText] = useState('View All');
-    const [isLoadingTeams, setIsLoadingTeams] = useState(false);    
-    const [userRole, setUserRole] = useState();
-    const [openModal, setOpenModal] = useState();
+
+  const [teams, setTeams] = useState([]);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [selectedTeamName, setSelectedTeamName] = useState();
+  const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
+  const [toggleButtonText, setToggleButtonText] = useState('View All');
+  const [isLoadingTeams, setIsLoadingTeams] = useState(false);
+  const [userRole, setUserRole] = useState();
+  const [openModal, setOpenModal] = useState();
 
   const dashboardToggleTeams = item => setOpenModal(item._id);
 
   useEffect(() => {
-    const fetchInitial = async ()  => {
+    const fetchInitial = async () => {
       const url = ENDPOINTS.USER_PROFILE(displayUserId);
       try {
         const response = await axios.get(url);
-        
+
         setTeams(response.data.teams);
-        setUserRole(response.data.role)
-        
+        setUserRole(response.data.role);
       } catch (error) {
         toast.error(error);
       }
-    }
-      
-    fetchInitial();
-
-    
-  }, [])  
-  
-  const handleToggleButtonClick = () => { 
-const text  =  'You have not selected a team or the selected team does not have any members.';
+    };
 
-      isLoadingTeams? toast.warning('Please wait while the teams are loading.')
-    : usersSelectedTeam.length === 0? toast.error(text)
-    :
-    setToggleButtonText(prevText => prevText === 'View All' ? 'My Team' : 'View All');
-    // Add any other logic for the button click here
-  }
+    fetchInitial();
+  }, []);
+
+  const handleToggleButtonClick = () => {
+    isLoadingTeams
+      ? toast.warning('Please wait while the teams are loading.')
+      : usersSelectedTeam.length === 0
+      ? toast.error(`You have not selected a team or the selected team does not have any members.`)
+      : setToggleButtonText(prevText => (prevText === 'View All' ? 'My Team' : 'View All'));
+  };
 
   const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
 
-  const renderTeamsList = async (team) => {
-
-    
+  const renderTeamsList = async team => {
     try {
       setIsLoadingTeams(true);
       const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
       setUsersSelectedTeam(response.data);
       setIsLoadingTeams(false);
 
-      const teamName = team.teamName.substring(0, 30) + '...'
-      setSelectedTeamName(team.teamName.length >= 30 ? teamName : team.teamName );
-      } catch (error) {
-        toast.error('Error fetching team members:', error);
-        setIsLoadingTeams(false);
+      const teamName = team.teamName.substring(0, 30) + '...';
+      setSelectedTeamName(team.teamName.length >= 30 ? teamName : team.teamName);
+    } catch (error) {
+      toast.error('Error fetching team members:', error);
+      setIsLoadingTeams(false);
     }
   };
-  
+
   const handleMouseoverTextUpdate = text => {
     setMouseoverTextValue(text);
   };
@@ -137,7 +129,7 @@ const text  =  'You have not selected a team or the selected team does not have
       if (window.screen.width < 540) {
         const scrollWindow = document.getElementById('leaderboard');
         if (scrollWindow) {
-          const elem = document.getElementById(`id${userId}`); //
+          const elem = document.getElementById(`id${userId}`);
 
           if (elem) {
             const topPos = elem.offsetTop;
@@ -159,14 +151,13 @@ const text  =  'You have not selected a team or the selected team does not have
 
   const showDashboard = item => {
     //showDashboardTeams
-            item.personId? dashboardClose() : setOpenModal(false);
-
-      window.open(
-        `/dashboard/${item.personId? item.personId : item._id}`,
-        'Popup',
-        'toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30',
-      );
-    
+    item.personId ? dashboardClose() : setOpenModal(false);
+
+    window.open(
+      `/dashboard/${item.personId ? item.personId : item._id}`,
+      'Popup',
+      'toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30',
+    );
   };
   const updateLeaderboardHandler = async () => {
     setIsLoading(true);
@@ -182,79 +173,66 @@ const text  =  'You have not selected a team or the selected team does not have
   return (
     <div>
       <div>
-      <h3>
-        <div className="d-flex align-items-center">
-          <span className="mr-2">Leaderboard</span>
-          <i
-            data-toggle="tooltip"
-            data-placement="right"
-            title="Click to refresh the leaderboard"
-            style={{ fontSize: 24, cursor: 'pointer' }}
-            aria-hidden="true"
-            className={`fa fa-refresh ${isLoading ? 'animation' : ''}`}
-            onClick={updateLeaderboardHandler}
-          />
-          &nbsp;
-          <EditableInfoModal
-            areaName="LeaderboardOrigin"
-            areaTitle="Leaderboard"
-            role={loggedInUser.role}
-            fontSize={24}
-            isPermissionPage
-          />
-        </div>
-
-
-      </h3>
-
-
-      {
-       userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner'? (
-  <section className="d-flex flex-row flex-wrap mb-3">
-    <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className=' mr-3'>
-      <DropdownToggle caret>
-        {selectedTeamName || 'Select a Team'} {/* Display selected team or default text */}
-      </DropdownToggle>
-        <DropdownMenu>
-
-        {
-        teams.length === 0?
-          <DropdownItem onClick={() => toast.warning('Please, create a team to use the filter.')}>
-            {'Please, create a team to use the filter.'}
-          </DropdownItem>
-          :
-        teams.map((team) => (
-          <DropdownItem key={team._id} onClick={() => renderTeamsList(team)}>
-            {team.teamName}
-          </DropdownItem>
-        ))
-
-      }
-        </DropdownMenu>
-
-    </Dropdown>
-
-    <Button
-      color="primary"
-      onClick={handleToggleButtonClick}
-      disabled={teams.length === 0}
-    >
-      {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
-    </Button>
-
-  </section>
-) : (
-  userRole !== 'Administrator' && userRole !== 'Core Team' && userRole !== 'Owner' ? (
-    <></>
-  ) : (
-    null
-  )
-)}
+        <h3>
+          <div className="d-flex align-items-center">
+            <span className="mr-2">Leaderboard</span>
+            <i
+              data-toggle="tooltip"
+              data-placement="right"
+              title="Click to refresh the leaderboard"
+              style={{ fontSize: 24, cursor: 'pointer' }}
+              aria-hidden="true"
+              className={`fa fa-refresh ${isLoading ? 'animation' : ''}`}
+              onClick={updateLeaderboardHandler}
+            />
+            &nbsp;
+            <EditableInfoModal
+              areaName="LeaderboardOrigin"
+              areaTitle="Leaderboard"
+              role={loggedInUser.role}
+              fontSize={24}
+              isPermissionPage
+            />
+          </div>
+        </h3>
+
+        {userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner' ? (
+          <section className="d-flex flex-row flex-wrap mb-3">
+            <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className=" mr-3">
+              <DropdownToggle caret>
+                {selectedTeamName || 'Select a Team'} {/* Display selected team or default text */}
+              </DropdownToggle>
+              <DropdownMenu>
+                {teams.length === 0 ? (
+                  <DropdownItem
+                    onClick={() => toast.warning('Please, create a team to use the filter.')}
+                  >
+                    {'Please, create a team to use the filter.'}
+                  </DropdownItem>
+                ) : (
+                  teams.map(team => (
+                    <DropdownItem key={team._id} onClick={() => renderTeamsList(team)}>
+                      {team.teamName}
+                    </DropdownItem>
+                  ))
+                )}
+              </DropdownMenu>
+            </Dropdown>
+
+            <Button
+              color="primary"
+              onClick={handleToggleButtonClick}
+              disabled={teams.length === 0}
+              boxstyle={boxStyle}
+            >
+              {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
+            </Button>
+          </section>
+        ) : userRole !== 'Administrator' && userRole !== 'Core Team' && userRole !== 'Owner' ? (
+          <></>
+        ) : null}
       </div>
 
-
-
-
       {!isVisible && (
         <Alert color="warning">
           <div className="d-flex align-items-center">
@@ -269,421 +247,398 @@ const text  =  'You have not selected a team or the selected team does not have
           </div>
         </Alert>
       )}
-      {
-          toggleButtonText === 'View All'? (
-      <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
-        <Table className="leaderboard table-fixed">
-          <thead>
-            <tr>
-              <th>Status</th>
-              <th>
-                <div className="d-flex align-items-center">
-                  <span className="mr-2">Name</span>
-                  <EditableInfoModal
-                    areaName="Leaderboard"
-                    areaTitle="Team Members Navigation"
-                    role={loggedInUser.role}
-                    fontSize={18}
-                    isPermissionPage
-                    className="p-2" // Add Bootstrap padding class to the EditableInfoModal
-                  />
-                </div>
-              </th>
-              <th>Time Off</th>
-              <th>
-                <span className="d-sm-none">Tan. Time</span>
-                <span className="d-none d-sm-block">Tangible Time</span>
-              </th>
-              <th>Progress</th>
-
-              <th style={{ textAlign: 'right' }}>
-                <div style={{ display: 'flex', alignItems: 'center' }}>
-                  <div style={{ textAlign: 'left' }}>
-                    <span className="d-sm-none">Tot. Time</span>
-                    <span className="d-none d-sm-inline-block" title={mouseoverTextValue}>
-                      Total Time{' '}
-                    </span>
+      {toggleButtonText === 'View All' ? (
+        <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
+          <Table className="leaderboard table-fixed">
+            <thead>
+              <tr>
+                <th>Status</th>
+                <th>
+                  <div className="d-flex align-items-center">
+                    <span className="mr-2">Name</span>
+                    <EditableInfoModal
+                      areaName="Leaderboard"
+                      areaTitle="Team Members Navigation"
+                      role={loggedInUser.role}
+                      fontSize={18}
+                      isPermissionPage
+                      className="p-2" // Add Bootstrap padding class to the EditableInfoModal
+                    />
                   </div>
-                  {isOwner && (
-                    <MouseoverTextTotalTimeEditButton onUpdate={handleMouseoverTextUpdate} />
-                  )}
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody className="my-custome-scrollbar">
-            <tr>
-              <td />
-              <th scope="row">{organizationData.name}</th>
-              <td className="align-middle" />
-              <td className="align-middle">
-                <span title="Tangible time">{organizationData.tangibletime || ''}</span>
-              </td>
-              <td className="align-middle">
-                <Progress
-                  title={`TangibleEffort: ${organizationData.tangibletime} hours`}
-                  value={organizationData.barprogress}
-                  color={organizationData.barcolor}
-                />
-              </td>
-              <td className="align-middle">
-                <span title="Tangible + Intangible time = Total time">
-                  {organizationData.totaltime} of {organizationData.weeklycommittedHours}
-                </span>
-              </td>
-            </tr>
-            {leaderBoardData.map(item => (
-              <tr key={item.personId}>
-                <td className="align-middle">
-                  <div>
-                    <Modal isOpen={isDashboardOpen === item.personId} toggle={dashboardToggle}>
-                      <ModalHeader toggle={dashboardToggle}>Jump to personal Dashboard</ModalHeader>
-                      <ModalBody>
-                        <p>Are you sure you wish to view this {item.name} dashboard?</p>
-                      </ModalBody>
-                      <ModalFooter>
-                        <Button variant="primary" onClick={() => showDashboard(item)}>
-                          Ok
-                        </Button>{' '}
-                        <Button variant="secondary" onClick={dashboardToggle}>
-                          Cancel
-                        </Button>
-                      </ModalFooter>
-                    </Modal>
+                </th>
+                <th>Time Off</th>
+                <th>
+                  <span className="d-sm-none">Tan. Time</span>
+                  <span className="d-none d-sm-block">Tangible Time</span>
+                </th>
+                <th>Progress</th>
+
+                <th style={{ textAlign: 'right' }}>
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <div style={{ textAlign: 'left' }}>
+                      <span className="d-sm-none">Tot. Time</span>
+                      <span className="d-none d-sm-inline-block" title={mouseoverTextValue}>
+                        Total Time{' '}
+                      </span>
+                    </div>
+                    {isOwner && (
+                      <MouseoverTextTotalTimeEditButton onUpdate={handleMouseoverTextUpdate} />
+                    )}
                   </div>
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
-                    }}
-                  >
-                    {/* <Link to={`/dashboard/${item.personId}`}> */}
+                </th>
+              </tr>
+            </thead>
+            <tbody className="my-custome-scrollbar">
+              <tr>
+                <td />
+                <th scope="row">{organizationData.name}</th>
+                <td className="align-middle" />
+                <td className="align-middle">
+                  <span title="Tangible time">{organizationData.tangibletime || ''}</span>
+                </td>
+                <td className="align-middle">
+                  <Progress
+                    title={`TangibleEffort: ${organizationData.tangibletime} hours`}
+                    value={organizationData.barprogress}
+                    color={organizationData.barcolor}
+                  />
+                </td>
+                <td className="align-middle">
+                  <span title="Tangible + Intangible time = Total time">
+                    {organizationData.totaltime} of {organizationData.weeklycommittedHours}
+                  </span>
+                </td>
+              </tr>
+              {leaderBoardData.map(item => (
+                <tr key={item.personId}>
+                  <td className="align-middle">
+                    <div>
+                      <Modal isOpen={isDashboardOpen === item.personId} toggle={dashboardToggle}>
+                        <ModalHeader toggle={dashboardToggle}>
+                          Jump to personal Dashboard
+                        </ModalHeader>
+                        <ModalBody>
+                          <p>Are you sure you wish to view this {item.name} dashboard?</p>
+                        </ModalBody>
+                        <ModalFooter>
+                          <Button variant="primary" onClick={() => showDashboard(item)}>
+                            Ok
+                          </Button>{' '}
+                          <Button variant="secondary" onClick={dashboardToggle}>
+                            Cancel
+                          </Button>
+                        </ModalFooter>
+                      </Modal>
+                    </div>
                     <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => {
-                        dashboardToggle(item);
-                      }}
-                      onKeyDown={e => {
-                        if (e.key === 'Enter') {
-                          dashboardToggle(item);
-                        }
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
                       }}
                     >
-                      {hasLeaderboardPermissions(item.role) &&
-                      showStar(item.tangibletime, item.weeklycommittedHours) ? (
-                        <i
-                          className="fa fa-star"
-                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                          style={{
-                            color: assignStarDotColors(
-                              item.tangibletime,
-                              item.weeklycommittedHours,
-                            ),
-                            fontSize: '20px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                          }}
-                        />
-                      ) : (
-                        <div
-                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                          style={{
-                            backgroundColor:
-                              item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
-                            width: 15,
-                            height: 15,
-                            borderRadius: 7.5,
-                            margin: 'auto',
-                            verticalAlign: 'middle',
-                          }}
-                        />
-                      )}
-                    </div>
-                    {hasSummaryIndicatorPermission && item.hasSummary && (
+                      {/* <Link to={`/dashboard/${item.personId}`}> */}
                       <div
-                        title="Weekly Summary Submitted"
-                        style={{
-                          color: '#32a518',
-                          cursor: 'default',
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => {
+                          dashboardToggle(item);
+                        }}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter') {
+                            dashboardToggle(item);
+                          }
                         }}
                       >
-                        <strong>✓</strong>
-                      </div>
-                    )}
-                  </div>
-                  {/* </Link> */}
-                </td>
-                <th scope="row" className="align-middle">
-                  
-                  <Link
-                    to={`/userprofile/${item.personId}`}
-                    title="View Profile"
-                    style={{
-                      color:
-                        currentDate.isSameOrAfter(
-                          moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                        ) &&
-                        currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
-                          ? 'rgba(128, 128, 128, 0.5)'
-                          : undefined,
-                    }}
-                  >
-                    {item.name}
-                    {currentDate.isSameOrAfter(
-                      moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                    ) &&
-                    currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
-                    Math.floor(
-                      moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                        .subtract(1, 'day')
-                        .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
-                    ) > 0 ? (
-                      <sup>
-                        {' '}
-                        +
-                        {Math.floor(
-                          moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                            .subtract(1, 'day')
-                            .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                        {hasLeaderboardPermissions(item.role) &&
+                        showStar(item.tangibletime, item.weeklycommittedHours) ? (
+                          <i
+                            className="fa fa-star"
+                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                            style={{
+                              color: assignStarDotColors(
+                                item.tangibletime,
+                                item.weeklycommittedHours,
+                              ),
+                              fontSize: '20px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                            }}
+                          />
+                        ) : (
+                          <div
+                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                            style={{
+                              backgroundColor:
+                                item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
+                              width: 15,
+                              height: 15,
+                              borderRadius: 7.5,
+                              margin: 'auto',
+                              verticalAlign: 'middle',
+                            }}
+                          />
                         )}
-                      </sup>
-                    ) : null}
-                  </Link>
-                  &nbsp;&nbsp;&nbsp;
-                  {hasVisibilityIconPermission && !item.isVisible && (
-                    <i className="fa fa-eye-slash" title="User is invisible" />
-                  )}
-                </th>
-                <td className="align-middle">
-                  {(userOnTimeOff || userGoingOnTimeOff) &&
-                    (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
-                      <div>
-                        <button
-                          style={{ width: '35px', height: 'auto' }}
-                          type="button"
-                          onClick={() => {
-                            const request = userOnTimeOff[item.personId]
-                              ? {
-                                  ...userOnTimeOff[item.personId],
-                                  onVacation: true,
-                                  name: item.name,
-                                }
-                              : {
-                                  ...userGoingOnTimeOff[item.personId],
-                                  onVacation: false,
-                                  name: item.name,
-                                };
-
-                            handleTimeOffModalOpen(request);
+                      </div>
+                      {hasSummaryIndicatorPermission && item.hasSummary && (
+                        <div
+                          title="Weekly Summary Submitted"
+                          style={{
+                            color: '#32a518',
+                            cursor: 'default',
                           }}
                         >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="22"
-                            height="19"
-                            viewBox="0 0 448 512"
-                            className="show-time-off-calender-svg"
+                          <strong>✓</strong>
+                        </div>
+                      )}
+                    </div>
+                    {/* </Link> */}
+                  </td>
+                  <th scope="row" className="align-middle">
+                    <Link
+                      to={`/userprofile/${item.personId}`}
+                      title="View Profile"
+                      style={{
+                        color:
+                          currentDate.isSameOrAfter(
+                            moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                          ) &&
+                          currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
+                            ? 'rgba(128, 128, 128, 0.5)'
+                            : undefined,
+                      }}
+                    >
+                      {item.name}
+                      {currentDate.isSameOrAfter(
+                        moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                      ) &&
+                      currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
+                      Math.floor(
+                        moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                          .subtract(1, 'day')
+                          .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                      ) > 0 ? (
+                        <sup>
+                          {' '}
+                          +
+                          {Math.floor(
+                            moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                              .subtract(1, 'day')
+                              .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                          )}
+                        </sup>
+                      ) : null}
+                    </Link>
+                    &nbsp;&nbsp;&nbsp;
+                    {hasVisibilityIconPermission && !item.isVisible && (
+                      <i className="fa fa-eye-slash" title="User is invisible" />
+                    )}
+                  </th>
+                  <td className="align-middle">
+                    {(userOnTimeOff || userGoingOnTimeOff) &&
+                      (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
+                        <div>
+                          <button
+                            style={{ width: '35px', height: 'auto' }}
+                            type="button"
+                            onClick={() => {
+                              const request = userOnTimeOff[item.personId]
+                                ? {
+                                    ...userOnTimeOff[item.personId],
+                                    onVacation: true,
+                                    name: item.name,
+                                  }
+                                : {
+                                    ...userGoingOnTimeOff[item.personId],
+                                    onVacation: false,
+                                    name: item.name,
+                                  };
+
+                              handleTimeOffModalOpen(request);
+                            }}
                           >
-                            <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
-                          </svg>
-
-                          <i className="show-time-off-icon">
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
-                              width="18"
-                              height="18"
-                              viewBox="0 0 512 512"
-                              className="show-time-off-icon-svg"
+                              width="22"
+                              height="19"
+                              viewBox="0 0 448 512"
+                              className="show-time-off-calender-svg"
                             >
-                              <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
+                              <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
                             </svg>
-                          </i>
-                        </button>
-                      </div>
-                    )}
-                </td>
-                <td className="align-middle" id={`id${item.personId}`}>
-                  <span title="Tangible time">{item.tangibletime}</span>
-                </td>
-                <td className="align-middle">
-                  <Link
-                    to={`/timelog/${item.personId}`}
-                    title={`TangibleEffort: ${item.tangibletime} hours`}
-                  >
-                    <Progress value={item.barprogress} color={item.barcolor} />
-                  </Link>
-                </td>
-                <td className="align-middle">
-                  <span
-                    title={mouseoverTextValue}
-                    id="Total time"
-                    className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
-                  >
-                    {item.totaltime}
-                  </span>
-                </td>
-              </tr>
-            ))}
+
+                            <i className="show-time-off-icon">
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="18"
+                                height="18"
+                                viewBox="0 0 512 512"
+                                className="show-time-off-icon-svg"
+                              >
+                                <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
+                              </svg>
+                            </i>
+                          </button>
+                        </div>
+                      )}
+                  </td>
+                  <td className="align-middle" id={`id${item.personId}`}>
+                    <span title="Tangible time">{item.tangibletime}</span>
+                  </td>
+                  <td className="align-middle">
+                    <Link
+                      to={`/timelog/${item.personId}`}
+                      title={`TangibleEffort: ${item.tangibletime} hours`}
+                    >
+                      <Progress value={item.barprogress} color={item.barcolor} />
+                    </Link>
+                  </td>
+                  <td className="align-middle">
+                    <span
+                      title={mouseoverTextValue}
+                      id="Total time"
+                      className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
+                    >
+                      {item.totaltime}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        </div>
+      ) : usersSelectedTeam.length === 0 ? (
+        <Table className="text-start mt-3">
+          <thead>
+            <tr>
+              <td>
+                <h4>Error</h4>
+              </td>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <th>
+                The team currently has no members. Please add a member to this team or select
+                another team.
+              </th>
+            </tr>
           </tbody>
         </Table>
-      </div>
-
-          )  : 
-          usersSelectedTeam.length === 0?(
-          
-            <Table  className='text-start mt-3'>
-              <thead>
+      ) : (
+        <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
+          <Table className="p-2">
+            <thead>
               <tr>
-                <td><h4>Error</h4></td>
-              </tr>
-              </thead>
+                <th className="align-middle">Status</th>
+                <th className="align-middle">
+                  <span style={{ display: 'flex', gap: 5 }}>
+                    Name
+                    <EditableInfoModal
+                      areaName="Leaderboard"
+                      areaTitle="Team Members Navigation"
+                      role={loggedInUser.role}
+                      fontSize={18}
+                      isPermissionPage
+                      className="p-2" // Add Bootstrap padding class to the EditableInfoModal
+                    />
+                  </span>
+                </th>
 
-              <tbody>
-              <tr>
-                <th>The team currently has no members. Please add a member to this team or select another team.</th>
+                <th className="align-middle">Total Time</th>
               </tr>
-              </tbody>
-
-            </Table>
-                        ) :  (
-          
-            <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
-<Table
-className="p-2"
->
- 
-  <thead>
-    <tr>
-      <th
-         className="align-middle"
-      >
-        Status
-      </th>
-      <th  className="align-middle">
-        <span style={{ display: 'flex',  gap:5 }}>
-
-         Name
-         <EditableInfoModal
-                    areaName="Leaderboard"
-                    areaTitle="Team Members Navigation"
-                    role={loggedInUser.role}
-                    fontSize={18}
-                    isPermissionPage
-                    className="p-2" // Add Bootstrap padding class to the EditableInfoModal
-                  />
-        </span>
-      </th>
-      
-      <th className="align-middle">
-       Total Time
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    {  usersSelectedTeam.map((item) => {
-                              return(
-                                <Fragment key={item._id}>
-                             
-                                       <Modal isOpen={openModal === item._id} toggle={dashboardToggleTeams}>
-                                         <ModalHeader toggle={dashboardToggleTeams}>Jump to personal Dashboard</ModalHeader>
-                                         <ModalBody>
-                                           <p>Are you sure you wish to view this {item.firstName} {item.lastName} dashboard?</p>
-                                         </ModalBody>
-                                         <ModalFooter>
-                                           <Button variant="primary" onClick={() => showDashboard(item)}>
-                                             Ok
-                                           </Button>{' '}
-                                           <Button variant="secondary" onClick={dashboardToggleTeams}>
-                                             Cancel
-                                           </Button>
-                                         </ModalFooter>
-                                       </Modal>                                  
+            </thead>
+            <tbody>
+              {usersSelectedTeam.map(item => {
+                return (
+                  <Fragment key={item._id}>
+                    <Modal isOpen={openModal === item._id} toggle={dashboardToggleTeams}>
+                      <ModalHeader toggle={dashboardToggleTeams}>
+                        Jump to personal Dashboard
+                      </ModalHeader>
+                      <ModalBody>
+                        <p>
+                          Are you sure you wish to view this {item.firstName} {item.lastName}{' '}
+                          dashboard?
+                        </p>
+                      </ModalBody>
+                      <ModalFooter>
+                        <Button variant="primary" onClick={() => showDashboard(item)}>
+                          Ok
+                        </Button>{' '}
+                        <Button variant="secondary" onClick={dashboardToggleTeams}>
+                          Cancel
+                        </Button>
+                      </ModalFooter>
+                    </Modal>
                     <tr>
-                      <th   className="align-middle">
-                        
-                      <div            
-                                      role="button"
-                                      tabIndex={0}
-                                      onClick={() => {
-                                        dashboardToggleTeams(item);
-                                      }}
-                                      onKeyDown={e => {
-                                        if (e.key === 'Enter') {
-                                          dashboardToggleTeams(item);
-                                        }
-                                      }}
-                                    >
-                                      {hasLeaderboardPermissions(loggedInUser.role) &&
-                                      showStar(item.totalIntangibleHrs, item.weeklycommittedHours) ? (
-                                        <i
-                                          className="fa fa-star"
-                                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                                          style={{
-                                            color: assignStarDotColors(
-                                              item.totalIntangibleHrs,
-                                              item.weeklycommittedHours,
-                                            ),
-                                            fontSize: '20px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                          }}
-                                        />
-                                      ) : (
-                                        <div
-                                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                                          style={{
-                                            backgroundColor:
-                                              item.totalTangibleHrs >= item.weeklycommittedHours ? '#32CD32' : 'red',
-                                            width: 15,
-                                            height: 15,
-                                            borderRadius: 7.5,
-                                            margin: 'auto',
-                                            verticalAlign: 'middle',
-                                          }}
-                                        />
-
-                                        
-                                      )}
-                                    </div>
-                
-                      
-                      </th>
-                
-                      <th scope="row" className="align-middle" >
-                          
-                                <Link to={`/userprofile/${item._id}`}>{item.firstName} {item.lastName}</Link>
+                      <th className="align-middle">
+                        <div
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => {
+                            dashboardToggleTeams(item);
+                          }}
+                          onKeyDown={e => {
+                            if (e.key === 'Enter') {
+                              dashboardToggleTeams(item);
+                            }
+                          }}
+                        >
+                          {hasLeaderboardPermissions(loggedInUser.role) &&
+                          showStar(item.totalIntangibleHrs, item.weeklycommittedHours) ? (
+                            <i
+                              className="fa fa-star"
+                              title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                              style={{
+                                color: assignStarDotColors(
+                                  item.totalIntangibleHrs,
+                                  item.weeklycommittedHours,
+                                ),
+                                fontSize: '20px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                              }}
+                            />
+                          ) : (
+                            <div
+                              title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                              style={{
+                                backgroundColor:
+                                  item.totalTangibleHrs >= item.weeklycommittedHours
+                                    ? '#32CD32'
+                                    : 'red',
+                                width: 15,
+                                height: 15,
+                                borderRadius: 7.5,
+                                margin: 'auto',
+                                verticalAlign: 'middle',
+                              }}
+                            />
+                          )}
+                        </div>
                       </th>
-                
-                        <th className="align-middle">
-                             <p>{item.totalTangibleHrs}</p>
-                        </th>
-                
-                    </tr>
-
-                                </Fragment>
-                            
-                            )
-                          })
-
-              
 
-    }
-      
-
-   
-  </tbody>
-</Table>
-
-            </div>
-
-            
+                      <th scope="row" className="align-middle">
+                        <Link to={`/userprofile/${item._id}`}>
+                          {item.firstName} {item.lastName}
+                        </Link>
+                      </th>
 
-          )
-      }
+                      <th className="align-middle">
+                        <p>{item.totalTangibleHrs}</p>
+                      </th>
+                    </tr>
+                  </Fragment>
+                );
+              })}
+            </tbody>
+          </Table>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/TeamMemberTasks/MyTeamMember.jsx b/src/components/TeamMemberTasks/MyTeamMember.jsx
index 856ffb217e..4e9f419efc 100644
--- a/src/components/TeamMemberTasks/MyTeamMember.jsx
+++ b/src/components/TeamMemberTasks/MyTeamMember.jsx
@@ -12,93 +12,71 @@ import {
 import { Table, Progress, Modal, ModalHeader, ModalBody } from 'reactstrap';
 import './style.css';
 import moment from 'moment-timezone';
-import GoogleDocIcon from '../../components/common/GoogleDocIcon'
+import GoogleDocIcon from '../../components/common/GoogleDocIcon';
 import hasPermission from 'utils/permissions';
 import { useDispatch, useSelector } from 'react-redux';
 
-export const MyTeamMember = ({user, usersWithTasks,}) => {
-  
+export const MyTeamMember = ({ user, usersWithTasks }) => {
   const thisWeekHours = user.totalTangibleHrs;
 
   const currentDate = moment.tz('America/Los_Angeles').startOf('day');
 
   const dispatch = useDispatch();
 
-  
   const canGetWeeklySummaries = dispatch(hasPermission('getWeeklySummaries'));
 
-
-  
-            const totalHoursRemaining = usersWithTasks.reduce((total, user) => {
-                                
-              user.tasks.forEach(task => {
-
-                  if (task.status !== 'Complete' && task.isAssigned !== 'false') {
-                    return  total + Math.max(0, task.estimatedHours - task.hoursLogged);
-                  }
-              });
-              return total;
-          }, 0);
-          
- const userGoogleDocLink = user.adminLinks?.reduce((targetLink, currentElement) => {
-  if (currentElement.Name === 'Google Doc') {
-    targetLink = currentElement.Link
-  }
-  return targetLink;
-}, undefined);
-
+  const totalHoursRemaining = usersWithTasks.reduce((total, user) => {
+    user.tasks.forEach(task => {
+      if (task.status !== 'Complete' && task.isAssigned !== 'false') {
+        return total + Math.max(0, task.estimatedHours - task.hoursLogged);
+      }
+    });
+    return total;
+  }, 0);
+
+  const userGoogleDocLink = user.adminLinks?.reduce((targetLink, currentElement) => {
+    if (currentElement.Name === 'Google Doc') {
+      targetLink = currentElement.Link;
+    }
+    return targetLink;
+  }, undefined);
 
   return (
-    <tr className="table-row d-flex justify-content-between d-flex align-items-center"
-     key={user._id} 
+    <tr
+      className="table-row d-flex justify-content-between d-flex align-items-center"
+      key={user._id}
     >
       <td>
-      <section style={{ display: 'flex', alignItems: 'center'}}
-      
-      >
-
-        <div className="committed-hours-circle">
-
-      <FontAwesomeIcon
-                  style={{
-                    color:
-                    thisWeekHours >= user.weeklycommittedHours ? 'green' : 'red',
-                  }}
-                  icon={faCircle}
-                  data-testid="icon"
-                />
-        </div>
-        
-
-        <Link to={`/timelog/${user._id}`}>
-                <i
-                  className="fa fa-clock-o"
-                  aria-hidden="true"
-                  style={{ fontSize: 24, cursor: 'pointer', color: 'black' }}
-                  title="Click to see user's timelog"
-                />
+        <section style={{ display: 'flex', alignItems: 'center' }}>
+          <div className="committed-hours-circle">
+            <FontAwesomeIcon
+              style={{
+                color: thisWeekHours >= user.weeklycommittedHours ? 'green' : 'red',
+              }}
+              icon={faCircle}
+              data-testid="icon"
+            />
+          </div>
+
+          <Link to={`/timelog/${user._id}`}>
+            <i
+              className="fa fa-clock-o"
+              aria-hidden="true"
+              style={{ fontSize: 24, cursor: 'pointer', color: 'black' }}
+              title="Click to see user's timelog"
+            />
           </Link>
-
-      </section>
+        </section>
       </td>
 
-      <td 
-        
-
-      >
-        <Table borderless className="team-member-tasks-subtable"
-        >
-          <tbody
-          >
-            
-            <tr
-
-            >
-              <td className="team-member-tasks-user-name"
-              >
-
-                  <Link to={`/userprofile/${user._id}`}
-                   style={{
+      <td>
+        <Table borderless className="team-member-tasks-subtable">
+          <tbody>
+            <tr>
+              <td className="team-member-tasks-user-name">
+                <Link
+                  to={`/userprofile/${user._id}`}
+                  style={{
                     color:
                       currentDate.isSameOrAfter(
                         moment(user.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
@@ -107,24 +85,21 @@ export const MyTeamMember = ({user, usersWithTasks,}) => {
                         ? 'rgba(128, 128, 128, 0.5)'
                         : undefined,
                   }}
-                  >{user.firstName} {user.lastName}</Link>
-                    {canGetWeeklySummaries && (<GoogleDocIcon link={userGoogleDocLink}/>)}
-
+                >
+                  {user.firstName} {user.lastName}
+                </Link>
+                {canGetWeeklySummaries && <GoogleDocIcon link={userGoogleDocLink} />}
               </td>
 
-              <td data-label="Time" /* className="team-clocks" */
-    >
-                  <u>{user.weeklycommittedHours ? user.weeklycommittedHours : 0}</u> /
-                    <font color="green"> {thisWeekHours ? thisWeekHours.toFixed(1) : 0}</font> /
-                    <font color="red"> {totalHoursRemaining.toFixed(1)}</font>              
+              <td data-label="Time" /* className="team-clocks" */>
+                <u>{user.weeklycommittedHours ? user.weeklycommittedHours : 0}</u> /
+                <font color="green"> {thisWeekHours ? thisWeekHours.toFixed(1) : 0}</font> /
+                <font color="red"> {totalHoursRemaining.toFixed(1)}</font>
               </td>
-
             </tr>
           </tbody>
         </Table>
-
       </td>
-           
     </tr>
   );
-}
+};
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index c760cea5da..2bb1c3bd3b 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -19,15 +19,14 @@ import { hrsFilterBtnColorMap } from 'constants/colors';
 import { toast } from 'react-toastify';
 // import InfiniteScroll from 'react-infinite-scroller';
 import { getAllTimeOffRequests } from '../../actions/timeOffRequestAction';
-import { MyTeamMember } from "./MyTeamMember";
+import { MyTeamMember } from './MyTeamMember';
 import { boxStyle } from 'styles';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, Spinner  } from 'reactstrap';
-
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, Spinner } from 'reactstrap';
 
 const TeamMemberTasks = React.memo(props => {
   // props from redux store
   const { authUser, displayUser, isLoading, usersWithTasks, usersWithTimeEntries } = props;
-  
+
   const [showTaskNotificationModal, setTaskNotificationModal] = useState(false);
   const [currentTaskNotifications, setCurrentTaskNotifications] = useState([]);
   const [currentTask, setCurrentTask] = useState();
@@ -45,34 +44,33 @@ const TeamMemberTasks = React.memo(props => {
   const [showWhoHasTimeOff, setShowWhoHasTimeOff] = useState(true);
   const userOnTimeOff = useSelector(state => state.timeOffRequests.onTimeOff);
   const userGoingOnTimeOff = useSelector(state => state.timeOffRequests.goingOnTimeOff);
-  
+
   const [teams, setTeams] = useState(displayUser.teams);
-  const [dropdownOpen, setDropdownOpen] = useState(false);    
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
-  const [selectedTeamName, setSelectedTeamName] = useState(''); 
+  const [selectedTeamName, setSelectedTeamName] = useState('');
   const [toggleButtonText, setToggleButtonText] = useState('View All');
   const [userRole, setUserRole] = useState(displayUser.role);
   const [loading, setLoading] = useState(false);
 
-  const handleToggleButtonClick = () => { 
-const text  =  'You have not selected a team or the selected team does not have any members.';
+  const handleToggleButtonClick = () => {
+    const text = 'You have not selected a team or the selected team does not have any members.';
 
-    loading? toast.warning('Please wait while the teams are loading.') 
-    : usersSelectedTeam.length === 0? toast.error(text) 
-    :
-      setToggleButtonText(prevText => prevText === 'View All' ? 'My Team' : 'View All');
-  }
+    loading
+      ? toast.warning('Please wait while the teams are loading.')
+      : usersSelectedTeam.length === 0
+      ? toast.error(text)
+      : setToggleButtonText(prevText => (prevText === 'View All' ? 'My Team' : 'View All'));
+  };
 
   const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
 
-
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(getAllTimeOffRequests()); 
+    dispatch(getAllTimeOffRequests());
   }, []);
 
-
   const closeMarkAsDone = () => {
     setClickedToShowModal(false);
     setMarkAsDoneModal(false);
@@ -144,7 +142,7 @@ const text  =  'You have not selected a team or the selected team does not have
     handleOpenTaskNotificationModal();
   };
 
-  const getTimeEntriesForPeriod = async (selectedPeriod) => {
+  const getTimeEntriesForPeriod = async selectedPeriod => {
     const oneDayAgo = moment()
       .tz('America/Los_Angeles')
       .subtract(1, 'days')
@@ -154,7 +152,7 @@ const text  =  'You have not selected a team or the selected team does not have
       .tz('America/Los_Angeles')
       .subtract(2, 'days')
       .format('YYYY-MM-DD');
-    
+
     const threeDaysAgo = moment()
       .tz('America/Los_Angeles')
       .subtract(3, 'days')
@@ -167,19 +165,27 @@ const text  =  'You have not selected a team or the selected team does not have
 
     switch (selectedPeriod) {
       case '1':
-        const oneDaysList = usersWithTimeEntries.filter(entry => moment(entry.dateOfWork).isAfter(oneDayAgo));
+        const oneDaysList = usersWithTimeEntries.filter(entry =>
+          moment(entry.dateOfWork).isAfter(oneDayAgo),
+        );
         setTimeEntriesList(oneDaysList);
         break;
       case '2':
-        const twoDaysList = usersWithTimeEntries.filter(entry => moment(entry.dateOfWork).isAfter(twoDaysAgo));
+        const twoDaysList = usersWithTimeEntries.filter(entry =>
+          moment(entry.dateOfWork).isAfter(twoDaysAgo),
+        );
         setTimeEntriesList(twoDaysList);
         break;
       case '3':
-        const threeDaysList = usersWithTimeEntries.filter(entry => moment(entry.dateOfWork).isAfter(threeDaysAgo));
+        const threeDaysList = usersWithTimeEntries.filter(entry =>
+          moment(entry.dateOfWork).isAfter(threeDaysAgo),
+        );
         setTimeEntriesList(threeDaysList);
         break;
       case '4':
-        const fourDaysList = usersWithTimeEntries.filter(entry => moment(entry.dateOfWork).isAfter(fourDaysAgo));
+        const fourDaysList = usersWithTimeEntries.filter(entry =>
+          moment(entry.dateOfWork).isAfter(fourDaysAgo),
+        );
         setTimeEntriesList(fourDaysList);
         break;
       case '7':
@@ -203,42 +209,40 @@ const text  =  'You have not selected a team or the selected team does not have
     }
   };
 
-  const renderTeamsList = async (team) => {
-
+  const renderTeamsList = async team => {
     if (!team) {
-          if (usersWithTasks.length > 0) {
-            //sort all users by their name
-      usersWithTasks.sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1));
-      //find currentUser
-      const currentUserIndex = usersWithTasks.findIndex(user => user.personId === displayUser._id);
-      // if current user doesn't have any task, the currentUser cannot be found
-      if (usersWithTasks[currentUserIndex]?.tasks.length) {
-        //conditional variable for moving current user up front.
-        usersWithTasks.unshift(...usersWithTasks.splice(currentUserIndex, 1));
+      if (usersWithTasks.length > 0) {
+        //sort all users by their name
+        usersWithTasks.sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1));
+        //find currentUser
+        const currentUserIndex = usersWithTasks.findIndex(
+          user => user.personId === displayUser._id,
+        );
+        // if current user doesn't have any task, the currentUser cannot be found
+        if (usersWithTasks[currentUserIndex]?.tasks.length) {
+          //conditional variable for moving current user up front.
+          usersWithTasks.unshift(...usersWithTasks.splice(currentUserIndex, 1));
+        }
+        setTeamList([...usersWithTasks]);
       }
-      setTeamList([...usersWithTasks]);
-      
-    }
-  }else{    
-    try {
-          setLoading(true);
-          const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
-          setUsersSelectedTeam(response.data);
-          setLoading(false);
-          const teamName = team.teamName.substring(0, 15) + '...'
-          setSelectedTeamName( team.teamName.length >= 15 ? teamName : team.teamName)
-        } catch (error) {
+    } else {
+      try {
+        setLoading(true);
+        const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
+        setUsersSelectedTeam(response.data);
+        setLoading(false);
+        const teamName = team.teamName.substring(0, 15) + '...';
+        setSelectedTeamName(team.teamName.length >= 15 ? teamName : team.teamName);
+      } catch (error) {
         toast.error('Error fetching team members:', error);
-      } 
-  }
+      }
+    }
   };
-  
+
   useEffect(() => {
     // TeamMemberTasks is only imported in TimeLog component, in which userId is already definitive
     const initialFetching = async () => {
-
       await dispatch(fetchTeamMembersTask(displayUser._id));
-      
     };
     initialFetching();
   }, []);
@@ -264,133 +268,124 @@ const text  =  'You have not selected a team or the selected team does not have
     setShowWhoHasTimeOff(prev => !prev);
   };
 
- return (
+  return (
     <div className="container team-member-tasks container-fluid">
       <header className="header-box">
-        <section className='d-flex flex-column'>
-        <h1>Team Member Tasks</h1>
-
-         {/* Dropdown for selecting a team */}
-         { isLoading &&  ( userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner' )
-? (
-  <>
-      <span  className='d-flex justify-content-start align-items-center'> Loading teams:  &nbsp;
-    <Spinner color="primary">
-    Loading...
-    </Spinner>
-      </span> 
-    
-  </>
-  ) :
- !isLoading && (userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner')  
-? (
-  <section className='d-flex flex-row mr-xl-2'>
-    <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className='mb-3'>
-      <DropdownToggle caret>
-      {selectedTeamName || 'Select a Team'}
-      </DropdownToggle>
-      <DropdownMenu>
-        {
-        teams.length === 0?
-          <DropdownItem onClick={() => toast.warning('Please, create a team to use the filter.')}>
-            {'Please, create a team to use the filter.'}
-          </DropdownItem>
-          :
-        teams.map((team) => (
-          <DropdownItem key={team._id} onClick={() => renderTeamsList(team)}>
-            {team.teamName}
-          </DropdownItem>
-        ))
-
-      }
-      </DropdownMenu>
-    </Dropdown>
-
-    &nbsp; &nbsp; 
-
-    <Button 
-      color="primary"
-      onClick={handleToggleButtonClick}
-      style={{width: '7rem'}}
-      className='mb-3 mb-0-md-end'
-      disabled={teams.length === 0}
-    >
-      {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
-    </Button>
-  </section>
-) : (
-  !isLoading && (userRole !== 'Administrator' && userRole !== 'Core Team' && userRole !== 'Owner' )? (
-    <></>
-  ) : 
-  (
-    null
-  )
- 
-)}
-
+        <section className="d-flex flex-column">
+          <h1>Team Member Tasks</h1>
+
+          {/* Dropdown for selecting a team */}
+          {isLoading &&
+          (userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner') ? (
+            <>
+              <span className="d-flex justify-content-start align-items-center">
+                {' '}
+                Loading teams: &nbsp;
+                <Spinner color="primary">Loading...</Spinner>
+              </span>
+            </>
+          ) : !isLoading &&
+            (userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner') ? (
+            <section className="d-flex flex-row mr-xl-2">
+              <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className="mb-3">
+                <DropdownToggle caret>{selectedTeamName || 'Select a Team'}</DropdownToggle>
+                <DropdownMenu>
+                  {teams.length === 0 ? (
+                    <DropdownItem
+                      onClick={() => toast.warning('Please, create a team to use the filter.')}
+                    >
+                      {'Please, create a team to use the filter.'}
+                    </DropdownItem>
+                  ) : (
+                    teams.map(team => (
+                      <DropdownItem key={team._id} onClick={() => renderTeamsList(team)}>
+                        {team.teamName}
+                      </DropdownItem>
+                    ))
+                  )}
+                </DropdownMenu>
+              </Dropdown>
+              &nbsp; &nbsp;
+              <Button
+                color="primary"
+                onClick={handleToggleButtonClick}
+                style={{ width: '7rem' }}
+                className="mb-3 mb-0-md-end"
+                disabled={teams.length === 0}
+                boxstyle={boxStyle}
+              >
+                {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
+              </Button>
+            </section>
+          ) : !isLoading &&
+            userRole !== 'Administrator' &&
+            userRole !== 'Core Team' &&
+            userRole !== 'Owner' ? (
+            <></>
+          ) : null}
         </section>
 
         {finishLoading ? (
-          <section className=" hours-btn-container   flex-wrap ml-3 "
-          >
-            <div  className='mb-2'>
-           <button
-              type="button"
-              className={` mr-2 show-time-off-btn ${
-                showWhoHasTimeOff ? 'show-time-off-btn-selected' : ''
-              }`}
-              onClick={handleshowWhoHasTimeOff}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="22"
-                height="19"
-                viewBox="0 0 448 512"
-                className={` mr-2 show-time-off-calender-svg ${
-                  showWhoHasTimeOff ? 'show-time-off-calender-svg-selected' : ''
-                }`}
-              >
-                <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
-              </svg>
-              <i
-                className={`show-time-off-icon ${
-                  showWhoHasTimeOff ? 'show-time-off-icon-selected' : ''
+          <section className=" hours-btn-container   flex-wrap ml-3 ">
+            <div className="mb-2">
+              <button
+                type="button"
+                className={` mr-2 show-time-off-btn ${
+                  showWhoHasTimeOff ? 'show-time-off-btn-selected' : ''
                 }`}
+                onClick={handleshowWhoHasTimeOff}
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  width="18"
-                  height="18"
-                  viewBox="0 0 512 512"
-                  className="show-time-off-icon-svg"
+                  width="22"
+                  height="19"
+                  viewBox="0 0 448 512"
+                  className={` mr-2 show-time-off-calender-svg ${
+                    showWhoHasTimeOff ? 'show-time-off-calender-svg-selected' : ''
+                  }`}
                 >
-                  <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
+                  <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
                 </svg>
-              </i>
-            </button>
-            {Object.entries(hrsFilterBtnColorMap).map(([days, color], idx) => (
-              <button
-                key={idx}
-                type="button"
-                className={`circle-border ${days} days mr-2 mb-2 `}
-                title={`Timelogs submitted in the past ${days} days`}
-                style={{
-                  color: selectedPeriod === days && isTimeFilterActive ? 'white' : color,
-                  backgroundColor: selectedPeriod === days && isTimeFilterActive ? color : 'white',
-                  border: `1px solid ${color}`,
-                }}
-                onClick={() => selectPeriod(days)}
-              >
-                {days} days
+                <i
+                  className={`show-time-off-icon ${
+                    showWhoHasTimeOff ? 'show-time-off-icon-selected' : ''
+                  }`}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 512 512"
+                    className="show-time-off-icon-svg"
+                  >
+                    <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
+                  </svg>
+                </i>
               </button>
-            ))}
+              {Object.entries(hrsFilterBtnColorMap).map(([days, color], idx) => (
+                <button
+                  key={idx}
+                  type="button"
+                  className={`circle-border ${days} days mr-2 mb-2 `}
+                  title={`Timelogs submitted in the past ${days} days`}
+                  style={{
+                    color: selectedPeriod === days && isTimeFilterActive ? 'white' : color,
+                    backgroundColor:
+                      selectedPeriod === days && isTimeFilterActive ? color : 'white',
+                    border: `1px solid ${color}`,
+                  }}
+                  onClick={() => selectPeriod(days)}
+                >
+                  {days} days
+                </button>
+              ))}
             </div>
             <EditableInfoModal
               areaName="TeamMemberTasksTimeFilterInfoPoint"
               areaTitle="Team Member Task Time Filter"
               fontSize={22}
               isPermissionPage={true}
-              role={authUser.role} 
+              role={authUser.role}
             />
           </section>
         ) : (
@@ -426,105 +421,96 @@ const text  =  'You have not selected a team or the selected team does not have
       <div className="table-container">
         <Table>
           <thead className="pc-component" style={{ position: 'sticky', top: 0 }}>
-          {
-          toggleButtonText === 'View All' ? (
-            <tr>
-              {/* Empty column header for hours completed icon */}
-              <th colSpan={1}/>
-              <th colSpan={2} className="team-member-tasks-headers">
-                <Table borderless className="team-member-tasks-subtable">
-                  <thead>
-                    <tr>
-                      <th className="team-member-tasks-headers team-member-tasks-user-name">
-                        Team Member
-                      </th>
-                      <th className="team-member-tasks-headers team-clocks team-clocks-header">
-                        <FontAwesomeIcon icon={faClock} title="Weekly Committed Hours" />
-                        /
-                        <FontAwesomeIcon
-                          style={{ color: 'green' }}
-                          icon={faClock}
-                          title="Total Hours Completed this Week"
-                        />
-                        /
-                        <FontAwesomeIcon
-                          style={{ color: 'red' }}
-                          icon={faClock}
-                          title="Total Remaining Hours"
-                        />
+            {toggleButtonText === 'View All' ? (
+              <tr>
+                {/* Empty column header for hours completed icon */}
+                <th colSpan={1} />
+                <th colSpan={2} className="team-member-tasks-headers">
+                  <Table borderless className="team-member-tasks-subtable">
+                    <thead>
+                      <tr>
+                        <th className="team-member-tasks-headers team-member-tasks-user-name">
+                          Team Member
+                        </th>
+                        <th className="team-member-tasks-headers team-clocks team-clocks-header">
+                          <FontAwesomeIcon icon={faClock} title="Weekly Committed Hours" />
+                          /
+                          <FontAwesomeIcon
+                            style={{ color: 'green' }}
+                            icon={faClock}
+                            title="Total Hours Completed this Week"
+                          />
+                          /
+                          <FontAwesomeIcon
+                            style={{ color: 'red' }}
+                            icon={faClock}
+                            title="Total Remaining Hours"
+                          />
+                        </th>
+                      </tr>
+                    </thead>
+                  </Table>
+                </th>
+                <th colSpan={3} className="team-member-tasks-headers">
+                  <Table borderless className="team-member-tasks-subtable">
+                    <thead>
+                      <tr>
+                        <th>Tasks(s)</th>
+                        <th className="team-task-progress">Progress</th>
+                        {displayUser.role === 'Administrator' ? <th>Status</th> : null}
+                      </tr>
+                    </thead>
+                  </Table>
+                </th>
+              </tr>
+            ) : usersSelectedTeam.length === 0 ? (
+              <tr>
+                <th className="team-member-tasks-headers">
+                  <Table borderless>
+                    <thead>
+                      <th>
+                        {' '}
+                        <h4>Error</h4>
                       </th>
-                    </tr>
-                  </thead>
-                </Table>
-              </th>
-              <th colSpan={3} className="team-member-tasks-headers">
-                <Table borderless className="team-member-tasks-subtable">
-                  <thead>
-                    <tr>
-                      <th>Tasks(s)</th>
-                      <th className="team-task-progress">Progress</th>
-                      {displayUser.role === 'Administrator' ? <th>Status</th> : null}
-                    </tr>
-                  </thead>
-                </Table>
-              </th>
-            </tr>
-                                            
-          ) :   usersSelectedTeam.length === 0?( 
-            <tr>
-
-            <th  className="team-member-tasks-headers">
-             <Table borderless>
-              <thead>
-                <th> <h4>Error</h4></th>
-              </thead>
-              </Table> 
-            </th>
-
-            </tr>
-              
-
-          ) : (
-            <tr>                
-            <th  
-className="team-member-tasks-headers table-row d-flex justify-content-between d-flex align-items-center"   
-                    >
-                      
-                      <Table borderless className="team-member-tasks-subtable">
-                        <thead>
-                          <tr>
-                          <th></th>
-        
-                            <th className="team-member-tasks-headers team-member-tasks-user-name">
-                              Team Member
-                            </th>
-                            <th className="team-member-tasks-headers team-clocks team-clocks-header "
-                              style={{ gap: 4 }}
-                            >
-                              <FontAwesomeIcon icon={faClock} title="Weekly Committed Hours" />
-                              /
-                              <FontAwesomeIcon
-                                style={{ color: 'green' }}
-                                icon={faClock}
-                                title="Total Hours Completed this Week"
-                              />
-                              /
-                              <FontAwesomeIcon
-                                style={{ color: 'red' }}
-                                icon={faClock}
-                                title="Total Remaining Hours"
-                              />
-                            </th>
-                          </tr>
-                        </thead>
-                      </Table>
-                    </th>                                 
-      
-    </tr>
-           
-          )
-
-          }
+                    </thead>
+                  </Table>
+                </th>
+              </tr>
+            ) : (
+              <tr>
+                <th className="team-member-tasks-headers table-row d-flex justify-content-between d-flex align-items-center">
+                  <Table borderless className="team-member-tasks-subtable">
+                    <thead>
+                      <tr>
+                        <th></th>
+
+                        <th className="team-member-tasks-headers team-member-tasks-user-name">
+                          Team Member
+                        </th>
+                        <th
+                          className="team-member-tasks-headers team-clocks team-clocks-header "
+                          style={{ gap: 4 }}
+                        >
+                          <FontAwesomeIcon icon={faClock} title="Weekly Committed Hours" />
+                          /
+                          <FontAwesomeIcon
+                            style={{ color: 'green' }}
+                            icon={faClock}
+                            title="Total Hours Completed this Week"
+                          />
+                          /
+                          <FontAwesomeIcon
+                            style={{ color: 'red' }}
+                            icon={faClock}
+                            title="Total Remaining Hours"
+                          />
+                        </th>
+                      </tr>
+                    </thead>
+                  </Table>
+                </th>
+              </tr>
+            )}
           </thead>
           <tbody>
             {isLoading ? (
@@ -590,35 +576,35 @@ className="team-member-tasks-headers table-row d-flex justify-content-between d-
                       );
                     }
                   })
-                ) : 
-                usersSelectedTeam.length === 0?(
+                ) : usersSelectedTeam.length === 0 ? (
                   <Table>
-              <tbody>
-              <tr>
-                <th>The team currently has no members. Please add a member to this team or select another team.</th>
-              </tr>
-              </tbody>
-
-            </Table>
-                ):
-                (
-                  
+                    <tbody>
+                      <tr>
+                        <th>
+                          The team currently has no members. Please add a member to this team or
+                          select another team.
+                        </th>
+                      </tr>
+                    </tbody>
+                  </Table>
+                ) : (
                   usersSelectedTeam.map(user => {
-                    return(
-                      <MyTeamMember key={user._id}
-                      user={user}
-                      usersWithTasks={usersWithTasks}
-                      handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
-                      handleMarkAsDoneModal={handleMarkAsDoneModal}
-                      handleRemoveFromTaskModal={handleRemoveFromTaskModal}
-                      handleTaskModalOption={handleTaskModalOption}
-                      showWhoHasTimeOff={showWhoHasTimeOff}
-                      onTimeOff={userOnTimeOff[user._id]}
-                      goingOnTimeOff={userGoingOnTimeOff[user._id]}
-                      updateTaskStatus={updateTaskStatus}
+                    return (
+                      <MyTeamMember
+                        key={user._id}
+                        user={user}
+                        usersWithTasks={usersWithTasks}
+                        handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
+                        handleMarkAsDoneModal={handleMarkAsDoneModal}
+                        handleRemoveFromTaskModal={handleRemoveFromTaskModal}
+                        handleTaskModalOption={handleTaskModalOption}
+                        showWhoHasTimeOff={showWhoHasTimeOff}
+                        onTimeOff={userOnTimeOff[user._id]}
+                        goingOnTimeOff={userGoingOnTimeOff[user._id]}
+                        updateTaskStatus={updateTaskStatus}
                       />
-                    )
-                    })
+                    );
+                  })
                 )}
               </>
             )}
@@ -627,7 +613,6 @@ className="team-member-tasks-headers table-row d-flex justify-content-between d-
       </div>
     </div>
   );
-  
 });
 
 const mapStateToProps = state => ({

From 14583a3ad1ec87b5db67442b07d9beeba205fb63 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 16:15:20 -0300
Subject: [PATCH 06/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 67f5396d0a..bea456a293 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -313,7 +313,11 @@ function LeaderBoard({
                 <tr key={item.personId}>
                   <td className="align-middle">
                     <div>
-                      <Modal isOpen={isDashboardOpen === item.personId} toggle={dashboardToggle}>
+                      <Modal
+                        isOpen={isDashboardOpen === item.personId}
+                        toggle={dashboardToggle}
+                        className="modal-personal-dashboard"
+                      >
                         <ModalHeader toggle={dashboardToggle}>
                           Jump to personal Dashboard
                         </ModalHeader>
@@ -350,7 +354,7 @@ function LeaderBoard({
                           }
                         }}
                       >
-                        {hasLeaderboardPermissions(item.role) &&
+                        {hasLeaderboardPermissions(loggedInUser.role) &&
                         showStar(item.tangibletime, item.weeklycommittedHours) ? (
                           <i
                             className="fa fa-star"
@@ -440,7 +444,6 @@ function LeaderBoard({
                       (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
                         <div>
                           <button
-                            style={{ width: '35px', height: 'auto' }}
                             type="button"
                             onClick={() => {
                               const request = userOnTimeOff[item.personId]
@@ -457,6 +460,7 @@ function LeaderBoard({
 
                               handleTimeOffModalOpen(request);
                             }}
+                            style={{ width: '35px', height: 'auto' }}
                           >
                             <svg
                               xmlns="http://www.w3.org/2000/svg"

From a6c9036481c33dc570717c93e838bd1cec58afcf Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 16:17:03 -0300
Subject: [PATCH 07/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx | 368 ++++++++++-----------
 1 file changed, 183 insertions(+), 185 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index bea456a293..cf49829cfe 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -310,205 +310,203 @@ function LeaderBoard({
                 </td>
               </tr>
               {leaderBoardData.map(item => (
-                <tr key={item.personId}>
-                  <td className="align-middle">
-                    <div>
-                      <Modal
-                        isOpen={isDashboardOpen === item.personId}
-                        toggle={dashboardToggle}
-                        className="modal-personal-dashboard"
-                      >
-                        <ModalHeader toggle={dashboardToggle}>
-                          Jump to personal Dashboard
-                        </ModalHeader>
-                        <ModalBody>
-                          <p>Are you sure you wish to view this {item.name} dashboard?</p>
-                        </ModalBody>
-                        <ModalFooter>
-                          <Button variant="primary" onClick={() => showDashboard(item)}>
-                            Ok
-                          </Button>{' '}
-                          <Button variant="secondary" onClick={dashboardToggle}>
-                            Cancel
-                          </Button>
-                        </ModalFooter>
-                      </Modal>
-                    </div>
+              <tr key={item.personId}>
+                <td className="align-middle">
+                  <div>
+                    <Modal
+                      isOpen={isDashboardOpen === item.personId}
+                      toggle={dashboardToggle}
+                      className="modal-personal-dashboard"
+                    >
+                      <ModalHeader toggle={dashboardToggle}>Jump to personal Dashboard</ModalHeader>
+                      <ModalBody>
+                        <p>Are you sure you wish to view this {item.name} dashboard?</p>
+                      </ModalBody>
+                      <ModalFooter>
+                        <Button variant="primary" onClick={() => showDashboard(item)}>
+                          Ok
+                        </Button>{' '}
+                        <Button variant="secondary" onClick={dashboardToggle}>
+                          Cancel
+                        </Button>
+                      </ModalFooter>
+                    </Modal>
+                  </div>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
+                    }}
+                  >
+                    {/* <Link to={`/dashboard/${item.personId}`}> */}
                     <div
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        dashboardToggle(item);
                       }}
-                    >
-                      {/* <Link to={`/dashboard/${item.personId}`}> */}
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => {
+                      onKeyDown={e => {
+                        if (e.key === 'Enter') {
                           dashboardToggle(item);
-                        }}
-                        onKeyDown={e => {
-                          if (e.key === 'Enter') {
-                            dashboardToggle(item);
-                          }
-                        }}
-                      >
-                        {hasLeaderboardPermissions(loggedInUser.role) &&
-                        showStar(item.tangibletime, item.weeklycommittedHours) ? (
-                          <i
-                            className="fa fa-star"
-                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                            style={{
-                              color: assignStarDotColors(
-                                item.tangibletime,
-                                item.weeklycommittedHours,
-                              ),
-                              fontSize: '20px',
-                              display: 'flex',
-                              alignItems: 'center',
-                              justifyContent: 'center',
-                            }}
-                          />
-                        ) : (
-                          <div
-                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                            style={{
-                              backgroundColor:
-                                item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
-                              width: 15,
-                              height: 15,
-                              borderRadius: 7.5,
-                              margin: 'auto',
-                              verticalAlign: 'middle',
-                            }}
-                          />
-                        )}
-                      </div>
-                      {hasSummaryIndicatorPermission && item.hasSummary && (
+                        }
+                      }}
+                    >
+                      {hasLeaderboardPermissions(loggedInUser.role) &&
+                      showStar(item.tangibletime, item.weeklycommittedHours) ? (
+                        <i
+                          className="fa fa-star"
+                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                          style={{
+                            color: assignStarDotColors(
+                              item.tangibletime,
+                              item.weeklycommittedHours,
+                            ),
+                            fontSize: '20px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                          }}
+                        />
+                      ) : (
                         <div
-                          title="Weekly Summary Submitted"
+                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
                           style={{
-                            color: '#32a518',
-                            cursor: 'default',
+                            backgroundColor:
+                              item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
+                            width: 15,
+                            height: 15,
+                            borderRadius: 7.5,
+                            margin: 'auto',
+                            verticalAlign: 'middle',
                           }}
-                        >
-                          <strong>✓</strong>
-                        </div>
+                        />
                       )}
                     </div>
-                    {/* </Link> */}
-                  </td>
-                  <th scope="row" className="align-middle">
-                    <Link
-                      to={`/userprofile/${item.personId}`}
-                      title="View Profile"
-                      style={{
-                        color:
-                          currentDate.isSameOrAfter(
-                            moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                          ) &&
-                          currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
-                            ? 'rgba(128, 128, 128, 0.5)'
-                            : undefined,
-                      }}
-                    >
-                      {item.name}
-                      {currentDate.isSameOrAfter(
-                        moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                      ) &&
-                      currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
-                      Math.floor(
-                        moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                          .subtract(1, 'day')
-                          .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
-                      ) > 0 ? (
-                        <sup>
-                          {' '}
-                          +
-                          {Math.floor(
-                            moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                              .subtract(1, 'day')
-                              .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
-                          )}
-                        </sup>
-                      ) : null}
-                    </Link>
-                    &nbsp;&nbsp;&nbsp;
-                    {hasVisibilityIconPermission && !item.isVisible && (
-                      <i className="fa fa-eye-slash" title="User is invisible" />
+                    {hasSummaryIndicatorPermission && item.hasSummary && (
+                      <div
+                        title="Weekly Summary Submitted"
+                        style={{
+                          color: '#32a518',
+                          cursor: 'default',
+                        }}
+                      >
+                        <strong>✓</strong>
+                      </div>
                     )}
-                  </th>
-                  <td className="align-middle">
-                    {(userOnTimeOff || userGoingOnTimeOff) &&
-                      (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
-                        <div>
-                          <button
-                            type="button"
-                            onClick={() => {
-                              const request = userOnTimeOff[item.personId]
-                                ? {
-                                    ...userOnTimeOff[item.personId],
-                                    onVacation: true,
-                                    name: item.name,
-                                  }
-                                : {
-                                    ...userGoingOnTimeOff[item.personId],
-                                    onVacation: false,
-                                    name: item.name,
-                                  };
-
-                              handleTimeOffModalOpen(request);
-                            }}
-                            style={{ width: '35px', height: 'auto' }}
+                  </div>
+                  {/* </Link> */}
+                </td>
+                <th scope="row" className="align-middle">
+                  <Link
+                    to={`/userprofile/${item.personId}`}
+                    title="View Profile"
+                    style={{
+                      color:
+                        currentDate.isSameOrAfter(
+                          moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                        ) &&
+                        currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
+                          ? 'rgba(128, 128, 128, 0.5)'
+                          : undefined,
+                    }}
+                  >
+                    {item.name}
+                    {currentDate.isSameOrAfter(
+                      moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                    ) &&
+                    currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
+                    Math.floor(
+                      moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                        .subtract(1, 'day')
+                        .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                    ) > 0 ? (
+                      <sup>
+                        {' '}
+                        +
+                        {Math.floor(
+                          moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                            .subtract(1, 'day')
+                            .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                        )}
+                      </sup>
+                    ) : null}
+                  </Link>
+                  &nbsp;&nbsp;&nbsp;
+                  {hasVisibilityIconPermission && !item.isVisible && (
+                    <i className="fa fa-eye-slash" title="User is invisible" />
+                  )}
+                </th>
+                <td className="align-middle">
+                  {(userOnTimeOff || userGoingOnTimeOff) &&
+                    (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
+                      <div>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const request = userOnTimeOff[item.personId]
+                              ? {
+                                  ...userOnTimeOff[item.personId],
+                                  onVacation: true,
+                                  name: item.name,
+                                }
+                              : {
+                                  ...userGoingOnTimeOff[item.personId],
+                                  onVacation: false,
+                                  name: item.name,
+                                };
+
+                            handleTimeOffModalOpen(request);
+                          }}
+                          style={{ width: '35px', height: 'auto' }}
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="22"
+                            height="19"
+                            viewBox="0 0 448 512"
+                            className="show-time-off-calender-svg"
                           >
+                            <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
+                          </svg>
+
+                          <i className="show-time-off-icon">
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
-                              width="22"
-                              height="19"
-                              viewBox="0 0 448 512"
-                              className="show-time-off-calender-svg"
+                              width="18"
+                              height="18"
+                              viewBox="0 0 512 512"
+                              className="show-time-off-icon-svg"
                             >
-                              <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
+                              <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
                             </svg>
-
-                            <i className="show-time-off-icon">
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="18"
-                                height="18"
-                                viewBox="0 0 512 512"
-                                className="show-time-off-icon-svg"
-                              >
-                                <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
-                              </svg>
-                            </i>
-                          </button>
-                        </div>
-                      )}
-                  </td>
-                  <td className="align-middle" id={`id${item.personId}`}>
-                    <span title="Tangible time">{item.tangibletime}</span>
-                  </td>
-                  <td className="align-middle">
-                    <Link
-                      to={`/timelog/${item.personId}`}
-                      title={`TangibleEffort: ${item.tangibletime} hours`}
-                    >
-                      <Progress value={item.barprogress} color={item.barcolor} />
-                    </Link>
-                  </td>
-                  <td className="align-middle">
-                    <span
-                      title={mouseoverTextValue}
-                      id="Total time"
-                      className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
-                    >
-                      {item.totaltime}
-                    </span>
-                  </td>
-                </tr>
-              ))}
+                          </i>
+                        </button>
+                      </div>
+                    )}
+                </td>
+                <td className="align-middle" id={`id${item.personId}`}>
+                  <span title="Tangible time">{item.tangibletime}</span>
+                </td>
+                <td className="align-middle">
+                  <Link
+                    to={`/timelog/${item.personId}`}
+                    title={`TangibleEffort: ${item.tangibletime} hours`}
+                  >
+                    <Progress value={item.barprogress} color={item.barcolor} />
+                  </Link>
+                </td>
+                <td className="align-middle">
+                  <span
+                    title={mouseoverTextValue}
+                    id="Total time"
+                    className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
+                  >
+                    {item.totaltime}
+                  </span>
+                </td>
+              </tr>
+            ))}
             </tbody>
           </Table>
         </div>

From 6984e1fb818e726f0c79833319b990c42b7462c6 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 16:32:30 -0300
Subject: [PATCH 08/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    | 385 +++++++++---------
 .../TeamMemberTasks/TeamMemberTasks.jsx       |  11 +-
 2 files changed, 208 insertions(+), 188 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index cf49829cfe..115d35a4a7 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -1,8 +1,20 @@
-import React, { useEffect, useState, useRef, Fragment } from 'react';
+import { useEffect, useState, useRef, Fragment } from 'react';
 import './Leaderboard.css';
 import { isEqual } from 'lodash';
 import { Link } from 'react-router-dom';
-import { Table, Progress, Modal, ModalBody, ModalFooter, ModalHeader, Button } from 'reactstrap';
+import {
+  Table,
+  Progress,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Button,
+  Dropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+} from 'reactstrap';
 import Alert from 'reactstrap/lib/Alert';
 import {
   hasLeaderboardPermissions,
@@ -17,7 +29,6 @@ import moment from 'moment-timezone';
 import { ENDPOINTS } from '../../utils/URL';
 import axios from 'axios';
 import { boxStyle } from 'styles';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
 function useDeepEffect(effectFunc, deps) {
   const isFirst = useRef(true);
@@ -310,203 +321,205 @@ function LeaderBoard({
                 </td>
               </tr>
               {leaderBoardData.map(item => (
-              <tr key={item.personId}>
-                <td className="align-middle">
-                  <div>
-                    <Modal
-                      isOpen={isDashboardOpen === item.personId}
-                      toggle={dashboardToggle}
-                      className="modal-personal-dashboard"
-                    >
-                      <ModalHeader toggle={dashboardToggle}>Jump to personal Dashboard</ModalHeader>
-                      <ModalBody>
-                        <p>Are you sure you wish to view this {item.name} dashboard?</p>
-                      </ModalBody>
-                      <ModalFooter>
-                        <Button variant="primary" onClick={() => showDashboard(item)}>
-                          Ok
-                        </Button>{' '}
-                        <Button variant="secondary" onClick={dashboardToggle}>
-                          Cancel
-                        </Button>
-                      </ModalFooter>
-                    </Modal>
-                  </div>
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
-                    }}
-                  >
-                    {/* <Link to={`/dashboard/${item.personId}`}> */}
+                <tr key={item.personId}>
+                  <td className="align-middle">
+                    <div>
+                      <Modal
+                        isOpen={isDashboardOpen === item.personId}
+                        toggle={dashboardToggle}
+                        className="modal-personal-dashboard"
+                      >
+                        <ModalHeader toggle={dashboardToggle}>
+                          Jump to personal Dashboard
+                        </ModalHeader>
+                        <ModalBody>
+                          <p>Are you sure you wish to view this {item.name} dashboard?</p>
+                        </ModalBody>
+                        <ModalFooter>
+                          <Button variant="primary" onClick={() => showDashboard(item)}>
+                            Ok
+                          </Button>{' '}
+                          <Button variant="secondary" onClick={dashboardToggle}>
+                            Cancel
+                          </Button>
+                        </ModalFooter>
+                      </Modal>
+                    </div>
                     <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => {
-                        dashboardToggle(item);
-                      }}
-                      onKeyDown={e => {
-                        if (e.key === 'Enter') {
-                          dashboardToggle(item);
-                        }
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
                       }}
                     >
-                      {hasLeaderboardPermissions(loggedInUser.role) &&
-                      showStar(item.tangibletime, item.weeklycommittedHours) ? (
-                        <i
-                          className="fa fa-star"
-                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                          style={{
-                            color: assignStarDotColors(
-                              item.tangibletime,
-                              item.weeklycommittedHours,
-                            ),
-                            fontSize: '20px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                          }}
-                        />
-                      ) : (
-                        <div
-                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                          style={{
-                            backgroundColor:
-                              item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
-                            width: 15,
-                            height: 15,
-                            borderRadius: 7.5,
-                            margin: 'auto',
-                            verticalAlign: 'middle',
-                          }}
-                        />
-                      )}
-                    </div>
-                    {hasSummaryIndicatorPermission && item.hasSummary && (
+                      {/* <Link to={`/dashboard/${item.personId}`}> */}
                       <div
-                        title="Weekly Summary Submitted"
-                        style={{
-                          color: '#32a518',
-                          cursor: 'default',
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => {
+                          dashboardToggle(item);
+                        }}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter') {
+                            dashboardToggle(item);
+                          }
                         }}
                       >
-                        <strong>✓</strong>
-                      </div>
-                    )}
-                  </div>
-                  {/* </Link> */}
-                </td>
-                <th scope="row" className="align-middle">
-                  <Link
-                    to={`/userprofile/${item.personId}`}
-                    title="View Profile"
-                    style={{
-                      color:
-                        currentDate.isSameOrAfter(
-                          moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                        ) &&
-                        currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
-                          ? 'rgba(128, 128, 128, 0.5)'
-                          : undefined,
-                    }}
-                  >
-                    {item.name}
-                    {currentDate.isSameOrAfter(
-                      moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                    ) &&
-                    currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
-                    Math.floor(
-                      moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                        .subtract(1, 'day')
-                        .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
-                    ) > 0 ? (
-                      <sup>
-                        {' '}
-                        +
-                        {Math.floor(
-                          moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                            .subtract(1, 'day')
-                            .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                        {hasLeaderboardPermissions(loggedInUser.role) &&
+                        showStar(item.tangibletime, item.weeklycommittedHours) ? (
+                          <i
+                            className="fa fa-star"
+                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                            style={{
+                              color: assignStarDotColors(
+                                item.tangibletime,
+                                item.weeklycommittedHours,
+                              ),
+                              fontSize: '20px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                            }}
+                          />
+                        ) : (
+                          <div
+                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                            style={{
+                              backgroundColor:
+                                item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
+                              width: 15,
+                              height: 15,
+                              borderRadius: 7.5,
+                              margin: 'auto',
+                              verticalAlign: 'middle',
+                            }}
+                          />
                         )}
-                      </sup>
-                    ) : null}
-                  </Link>
-                  &nbsp;&nbsp;&nbsp;
-                  {hasVisibilityIconPermission && !item.isVisible && (
-                    <i className="fa fa-eye-slash" title="User is invisible" />
-                  )}
-                </th>
-                <td className="align-middle">
-                  {(userOnTimeOff || userGoingOnTimeOff) &&
-                    (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
-                      <div>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            const request = userOnTimeOff[item.personId]
-                              ? {
-                                  ...userOnTimeOff[item.personId],
-                                  onVacation: true,
-                                  name: item.name,
-                                }
-                              : {
-                                  ...userGoingOnTimeOff[item.personId],
-                                  onVacation: false,
-                                  name: item.name,
-                                };
-
-                            handleTimeOffModalOpen(request);
+                      </div>
+                      {hasSummaryIndicatorPermission && item.hasSummary && (
+                        <div
+                          title="Weekly Summary Submitted"
+                          style={{
+                            color: '#32a518',
+                            cursor: 'default',
                           }}
-                          style={{ width: '35px', height: 'auto' }}
                         >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="22"
-                            height="19"
-                            viewBox="0 0 448 512"
-                            className="show-time-off-calender-svg"
+                          <strong>✓</strong>
+                        </div>
+                      )}
+                    </div>
+                    {/* </Link> */}
+                  </td>
+                  <th scope="row" className="align-middle">
+                    <Link
+                      to={`/userprofile/${item.personId}`}
+                      title="View Profile"
+                      style={{
+                        color:
+                          currentDate.isSameOrAfter(
+                            moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                          ) &&
+                          currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
+                            ? 'rgba(128, 128, 128, 0.5)'
+                            : undefined,
+                      }}
+                    >
+                      {item.name}
+                      {currentDate.isSameOrAfter(
+                        moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                      ) &&
+                      currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
+                      Math.floor(
+                        moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                          .subtract(1, 'day')
+                          .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                      ) > 0 ? (
+                        <sup>
+                          {' '}
+                          +
+                          {Math.floor(
+                            moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                              .subtract(1, 'day')
+                              .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                          )}
+                        </sup>
+                      ) : null}
+                    </Link>
+                    &nbsp;&nbsp;&nbsp;
+                    {hasVisibilityIconPermission && !item.isVisible && (
+                      <i className="fa fa-eye-slash" title="User is invisible" />
+                    )}
+                  </th>
+                  <td className="align-middle">
+                    {(userOnTimeOff || userGoingOnTimeOff) &&
+                      (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
+                        <div>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const request = userOnTimeOff[item.personId]
+                                ? {
+                                    ...userOnTimeOff[item.personId],
+                                    onVacation: true,
+                                    name: item.name,
+                                  }
+                                : {
+                                    ...userGoingOnTimeOff[item.personId],
+                                    onVacation: false,
+                                    name: item.name,
+                                  };
+
+                              handleTimeOffModalOpen(request);
+                            }}
+                            style={{ width: '35px', height: 'auto' }}
                           >
-                            <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
-                          </svg>
-
-                          <i className="show-time-off-icon">
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
-                              width="18"
-                              height="18"
-                              viewBox="0 0 512 512"
-                              className="show-time-off-icon-svg"
+                              width="22"
+                              height="19"
+                              viewBox="0 0 448 512"
+                              className="show-time-off-calender-svg"
                             >
-                              <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
+                              <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
                             </svg>
-                          </i>
-                        </button>
-                      </div>
-                    )}
-                </td>
-                <td className="align-middle" id={`id${item.personId}`}>
-                  <span title="Tangible time">{item.tangibletime}</span>
-                </td>
-                <td className="align-middle">
-                  <Link
-                    to={`/timelog/${item.personId}`}
-                    title={`TangibleEffort: ${item.tangibletime} hours`}
-                  >
-                    <Progress value={item.barprogress} color={item.barcolor} />
-                  </Link>
-                </td>
-                <td className="align-middle">
-                  <span
-                    title={mouseoverTextValue}
-                    id="Total time"
-                    className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
-                  >
-                    {item.totaltime}
-                  </span>
-                </td>
-              </tr>
-            ))}
+
+                            <i className="show-time-off-icon">
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="18"
+                                height="18"
+                                viewBox="0 0 512 512"
+                                className="show-time-off-icon-svg"
+                              >
+                                <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
+                              </svg>
+                            </i>
+                          </button>
+                        </div>
+                      )}
+                  </td>
+                  <td className="align-middle" id={`id${item.personId}`}>
+                    <span title="Tangible time">{item.tangibletime}</span>
+                  </td>
+                  <td className="align-middle">
+                    <Link
+                      to={`/timelog/${item.personId}`}
+                      title={`TangibleEffort: ${item.tangibletime} hours`}
+                    >
+                      <Progress value={item.barprogress} color={item.barcolor} />
+                    </Link>
+                  </td>
+                  <td className="align-middle">
+                    <span
+                      title={mouseoverTextValue}
+                      id="Total time"
+                      className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
+                    >
+                      {item.totaltime}
+                    </span>
+                  </td>
+                </tr>
+              ))}
             </tbody>
           </Table>
         </div>
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 2bb1c3bd3b..632a368db4 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -1,6 +1,14 @@
 import { Fragment } from 'react';
 import { faClock } from '@fortawesome/free-solid-svg-icons';
-import { Table } from 'reactstrap';
+import {
+  Table,
+  Dropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+  Spinner,
+} from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { fetchTeamMembersTask, deleteTaskNotification } from 'actions/task';
 import React, { useEffect, useState, useCallback } from 'react';
@@ -21,7 +29,6 @@ import { toast } from 'react-toastify';
 import { getAllTimeOffRequests } from '../../actions/timeOffRequestAction';
 import { MyTeamMember } from './MyTeamMember';
 import { boxStyle } from 'styles';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, Spinner } from 'reactstrap';
 
 const TeamMemberTasks = React.memo(props => {
   // props from redux store

From 78ea025dab5cd0d70546007b1137d9012d7e3caa Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 16:42:23 -0300
Subject: [PATCH 09/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx | 381 ++++++++++-----------
 1 file changed, 185 insertions(+), 196 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 115d35a4a7..13c38dc8f7 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -1,20 +1,9 @@
-import { useEffect, useState, useRef, Fragment } from 'react';
+import  { useEffect, useState, useRef, Fragment } from 'react';
 import './Leaderboard.css';
 import { isEqual } from 'lodash';
 import { Link } from 'react-router-dom';
-import {
-  Table,
-  Progress,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  Button,
-  Dropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-} from 'reactstrap';
+import { Table, Progress, Modal, ModalBody, ModalFooter, ModalHeader, Button,
+    Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import Alert from 'reactstrap/lib/Alert';
 import {
   hasLeaderboardPermissions,
@@ -321,205 +310,205 @@ function LeaderBoard({
                 </td>
               </tr>
               {leaderBoardData.map(item => (
-                <tr key={item.personId}>
-                  <td className="align-middle">
-                    <div>
-                      <Modal
-                        isOpen={isDashboardOpen === item.personId}
-                        toggle={dashboardToggle}
-                        className="modal-personal-dashboard"
-                      >
+              <tr key={item.personId}>
+                <td className="align-middle">
+                  <div>
+                    <Modal
+                      isOpen={isDashboardOpen === item.personId}
+                      toggle={dashboardToggle}
+                      className="modal-personal-dashboard"
+                    >
                         <ModalHeader toggle={dashboardToggle}>
                           Jump to personal Dashboard
-                        </ModalHeader>
+                        </ModalHeader>                      
                         <ModalBody>
-                          <p>Are you sure you wish to view this {item.name} dashboard?</p>
-                        </ModalBody>
-                        <ModalFooter>
-                          <Button variant="primary" onClick={() => showDashboard(item)}>
-                            Ok
-                          </Button>{' '}
-                          <Button variant="secondary" onClick={dashboardToggle}>
-                            Cancel
-                          </Button>
-                        </ModalFooter>
-                      </Modal>
-                    </div>
+                        <p>Are you sure you wish to view this {item.name} dashboard?</p>
+                      </ModalBody>
+                      <ModalFooter>
+                        <Button variant="primary" onClick={() => showDashboard(item)}>
+                          Ok
+                        </Button>{' '}
+                        <Button variant="secondary" onClick={dashboardToggle}>
+                          Cancel
+                        </Button>
+                      </ModalFooter>
+                    </Modal>
+                  </div>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
+                    }}
+                  >
+                    {/* <Link to={`/dashboard/${item.personId}`}> */}
                     <div
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        dashboardToggle(item);
                       }}
-                    >
-                      {/* <Link to={`/dashboard/${item.personId}`}> */}
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => {
+                      onKeyDown={e => {
+                        if (e.key === 'Enter') {
                           dashboardToggle(item);
-                        }}
-                        onKeyDown={e => {
-                          if (e.key === 'Enter') {
-                            dashboardToggle(item);
-                          }
-                        }}
-                      >
-                        {hasLeaderboardPermissions(loggedInUser.role) &&
-                        showStar(item.tangibletime, item.weeklycommittedHours) ? (
-                          <i
-                            className="fa fa-star"
-                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                            style={{
-                              color: assignStarDotColors(
-                                item.tangibletime,
-                                item.weeklycommittedHours,
-                              ),
-                              fontSize: '20px',
-                              display: 'flex',
-                              alignItems: 'center',
-                              justifyContent: 'center',
-                            }}
-                          />
-                        ) : (
-                          <div
-                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                            style={{
-                              backgroundColor:
-                                item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
-                              width: 15,
-                              height: 15,
-                              borderRadius: 7.5,
-                              margin: 'auto',
-                              verticalAlign: 'middle',
-                            }}
-                          />
-                        )}
-                      </div>
-                      {hasSummaryIndicatorPermission && item.hasSummary && (
+                        }
+                      }}
+                    >
+                      {hasLeaderboardPermissions(loggedInUser.role) &&
+                      showStar(item.tangibletime, item.weeklycommittedHours) ? (
+                        <i
+                          className="fa fa-star"
+                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                          style={{
+                            color: assignStarDotColors(
+                              item.tangibletime,
+                              item.weeklycommittedHours,
+                            ),
+                            fontSize: '20px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                          }}
+                        />
+                      ) : (
                         <div
-                          title="Weekly Summary Submitted"
+                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
                           style={{
-                            color: '#32a518',
-                            cursor: 'default',
+                            backgroundColor:
+                              item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
+                            width: 15,
+                            height: 15,
+                            borderRadius: 7.5,
+                            margin: 'auto',
+                            verticalAlign: 'middle',
                           }}
-                        >
-                          <strong>✓</strong>
-                        </div>
+                        />
                       )}
                     </div>
-                    {/* </Link> */}
-                  </td>
-                  <th scope="row" className="align-middle">
-                    <Link
-                      to={`/userprofile/${item.personId}`}
-                      title="View Profile"
-                      style={{
-                        color:
-                          currentDate.isSameOrAfter(
-                            moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                          ) &&
-                          currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
-                            ? 'rgba(128, 128, 128, 0.5)'
-                            : undefined,
-                      }}
-                    >
-                      {item.name}
-                      {currentDate.isSameOrAfter(
-                        moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                      ) &&
-                      currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
-                      Math.floor(
-                        moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                          .subtract(1, 'day')
-                          .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
-                      ) > 0 ? (
-                        <sup>
-                          {' '}
-                          +
-                          {Math.floor(
-                            moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                              .subtract(1, 'day')
-                              .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
-                          )}
-                        </sup>
-                      ) : null}
-                    </Link>
-                    &nbsp;&nbsp;&nbsp;
-                    {hasVisibilityIconPermission && !item.isVisible && (
-                      <i className="fa fa-eye-slash" title="User is invisible" />
+                    {hasSummaryIndicatorPermission && item.hasSummary && (
+                      <div
+                        title="Weekly Summary Submitted"
+                        style={{
+                          color: '#32a518',
+                          cursor: 'default',
+                        }}
+                      >
+                        <strong>✓</strong>
+                      </div>
                     )}
-                  </th>
-                  <td className="align-middle">
-                    {(userOnTimeOff || userGoingOnTimeOff) &&
-                      (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
-                        <div>
-                          <button
-                            type="button"
-                            onClick={() => {
-                              const request = userOnTimeOff[item.personId]
-                                ? {
-                                    ...userOnTimeOff[item.personId],
-                                    onVacation: true,
-                                    name: item.name,
-                                  }
-                                : {
-                                    ...userGoingOnTimeOff[item.personId],
-                                    onVacation: false,
-                                    name: item.name,
-                                  };
-
-                              handleTimeOffModalOpen(request);
-                            }}
-                            style={{ width: '35px', height: 'auto' }}
+                  </div>
+                  {/* </Link> */}
+                </td>
+                <th scope="row" className="align-middle">
+                  <Link
+                    to={`/userprofile/${item.personId}`}
+                    title="View Profile"
+                    style={{
+                      color:
+                        currentDate.isSameOrAfter(
+                          moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                        ) &&
+                        currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
+                          ? 'rgba(128, 128, 128, 0.5)'
+                          : undefined,
+                    }}
+                  >
+                    {item.name}
+                    {currentDate.isSameOrAfter(
+                      moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                    ) &&
+                    currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
+                    Math.floor(
+                      moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                        .subtract(1, 'day')
+                        .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                    ) > 0 ? (
+                      <sup>
+                        {' '}
+                        +
+                        {Math.floor(
+                          moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                            .subtract(1, 'day')
+                            .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                        )}
+                      </sup>
+                    ) : null}
+                  </Link>
+                  &nbsp;&nbsp;&nbsp;
+                  {hasVisibilityIconPermission && !item.isVisible && (
+                    <i className="fa fa-eye-slash" title="User is invisible" />
+                  )}
+                </th>
+                <td className="align-middle">
+                  {(userOnTimeOff || userGoingOnTimeOff) &&
+                    (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
+                      <div>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const request = userOnTimeOff[item.personId]
+                              ? {
+                                  ...userOnTimeOff[item.personId],
+                                  onVacation: true,
+                                  name: item.name,
+                                }
+                              : {
+                                  ...userGoingOnTimeOff[item.personId],
+                                  onVacation: false,
+                                  name: item.name,
+                                };
+
+                            handleTimeOffModalOpen(request);
+                          }}
+                          style={{ width: '35px', height: 'auto' }}
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="22"
+                            height="19"
+                            viewBox="0 0 448 512"
+                            className="show-time-off-calender-svg"
                           >
+                            <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
+                          </svg>
+
+                          <i className="show-time-off-icon">
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
-                              width="22"
-                              height="19"
-                              viewBox="0 0 448 512"
-                              className="show-time-off-calender-svg"
+                              width="18"
+                              height="18"
+                              viewBox="0 0 512 512"
+                              className="show-time-off-icon-svg"
                             >
-                              <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
+                              <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
                             </svg>
-
-                            <i className="show-time-off-icon">
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="18"
-                                height="18"
-                                viewBox="0 0 512 512"
-                                className="show-time-off-icon-svg"
-                              >
-                                <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
-                              </svg>
-                            </i>
-                          </button>
-                        </div>
-                      )}
-                  </td>
-                  <td className="align-middle" id={`id${item.personId}`}>
-                    <span title="Tangible time">{item.tangibletime}</span>
-                  </td>
-                  <td className="align-middle">
-                    <Link
-                      to={`/timelog/${item.personId}`}
-                      title={`TangibleEffort: ${item.tangibletime} hours`}
-                    >
-                      <Progress value={item.barprogress} color={item.barcolor} />
-                    </Link>
-                  </td>
-                  <td className="align-middle">
-                    <span
-                      title={mouseoverTextValue}
-                      id="Total time"
-                      className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
-                    >
-                      {item.totaltime}
-                    </span>
-                  </td>
-                </tr>
-              ))}
+                          </i>
+                        </button>
+                      </div>
+                    )}
+                </td>
+                <td className="align-middle" id={`id${item.personId}`}>
+                  <span title="Tangible time">{item.tangibletime}</span>
+                </td>
+                <td className="align-middle">
+                  <Link
+                    to={`/timelog/${item.personId}`}
+                    title={`TangibleEffort: ${item.tangibletime} hours`}
+                  >
+                    <Progress value={item.barprogress} color={item.barcolor} />
+                  </Link>
+                </td>
+                <td className="align-middle">
+                  <span
+                    title={mouseoverTextValue}
+                    id="Total time"
+                    className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
+                  >
+                    {item.totaltime}
+                  </span>
+                </td>
+              </tr>
+            ))}
             </tbody>
           </Table>
         </div>

From af41e6949f34d50a41848c1f66c078c913db6b6e Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 16:52:43 -0300
Subject: [PATCH 10/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 13c38dc8f7..7f0bc9b601 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -318,10 +318,11 @@ function LeaderBoard({
                       toggle={dashboardToggle}
                       className="modal-personal-dashboard"
                     >
-                        <ModalHeader toggle={dashboardToggle}>
-                          Jump to personal Dashboard
-                        </ModalHeader>                      
-                        <ModalBody>
+                      {/* eslint-disable prettier/prettier */}
+                      <ModalHeader toggle={dashboardToggle}>Jump to personal Dashboard</ModalHeader>
+                      {/* eslint-disable prettier/prettier */}
+
+                      <ModalBody>
                         <p>Are you sure you wish to view this {item.name} dashboard?</p>
                       </ModalBody>
                       <ModalFooter>

From b902fcb60e01510438a8214dd5994143270b7ec7 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 16:56:39 -0300
Subject: [PATCH 11/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 7f0bc9b601..375b7cb8d0 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -321,7 +321,6 @@ function LeaderBoard({
                       {/* eslint-disable prettier/prettier */}
                       <ModalHeader toggle={dashboardToggle}>Jump to personal Dashboard</ModalHeader>
                       {/* eslint-disable prettier/prettier */}
-
                       <ModalBody>
                         <p>Are you sure you wish to view this {item.name} dashboard?</p>
                       </ModalBody>

From 256acf79cfce91132efb92a2b9307e44ca71e91e Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 17:00:53 -0300
Subject: [PATCH 12/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 375b7cb8d0..2d503b6a43 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -318,9 +318,7 @@ function LeaderBoard({
                       toggle={dashboardToggle}
                       className="modal-personal-dashboard"
                     >
-                      {/* eslint-disable prettier/prettier */}
                       <ModalHeader toggle={dashboardToggle}>Jump to personal Dashboard</ModalHeader>
-                      {/* eslint-disable prettier/prettier */}
                       <ModalBody>
                         <p>Are you sure you wish to view this {item.name} dashboard?</p>
                       </ModalBody>

From d6b0bc6a920e7b8c80d23e189b7c47935b838c5f Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 17:06:54 -0300
Subject: [PATCH 13/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    | 19 +++++++++++++++----
 .../TeamMemberTasks/TeamMemberTasks.jsx       |  2 +-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 2d503b6a43..2877b6701e 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -1,9 +1,20 @@
-import  { useEffect, useState, useRef, Fragment } from 'react';
+import { useEffect, useState, useRef, Fragment } from 'react';
 import './Leaderboard.css';
 import { isEqual } from 'lodash';
 import { Link } from 'react-router-dom';
-import { Table, Progress, Modal, ModalBody, ModalFooter, ModalHeader, Button,
-    Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import {
+  Table,
+  Progress,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Button,
+  Dropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+} from 'reactstrap';
 import Alert from 'reactstrap/lib/Alert';
 import {
   hasLeaderboardPermissions,
@@ -15,9 +26,9 @@ import MouseoverTextTotalTimeEditButton from 'components/mouseoverText/Mouseover
 import { toast } from 'react-toastify';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
 import moment from 'moment-timezone';
+import { boxStyle } from 'styles';
 import { ENDPOINTS } from '../../utils/URL';
 import axios from 'axios';
-import { boxStyle } from 'styles';
 
 function useDeepEffect(effectFunc, deps) {
   const isFirst = useRef(true);
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 632a368db4..399e8b9065 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -18,6 +18,7 @@ import { TaskDifferenceModal } from './components/TaskDifferenceModal';
 import './style.css';
 import TaskCompletedModal from './components/TaskCompletedModal';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
+import { boxStyle } from 'styles';
 import { ENDPOINTS } from 'utils/URL';
 import axios from 'axios';
 import moment from 'moment';
@@ -28,7 +29,6 @@ import { toast } from 'react-toastify';
 // import InfiniteScroll from 'react-infinite-scroller';
 import { getAllTimeOffRequests } from '../../actions/timeOffRequestAction';
 import { MyTeamMember } from './MyTeamMember';
-import { boxStyle } from 'styles';
 
 const TeamMemberTasks = React.memo(props => {
   // props from redux store

From 445051c2ab96c16ba9fe3785909c624933b16914 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 17:12:06 -0300
Subject: [PATCH 14/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx         | 2 +-
 src/components/TeamMemberTasks/TeamMemberTasks.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 2877b6701e..a8feb04b0b 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -27,8 +27,8 @@ import { toast } from 'react-toastify';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
 import moment from 'moment-timezone';
 import { boxStyle } from 'styles';
-import { ENDPOINTS } from '../../utils/URL';
 import axios from 'axios';
+import { ENDPOINTS } from '../../utils/URL';
 
 function useDeepEffect(effectFunc, deps) {
   const isFirst = useRef(true);
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 399e8b9065..d1368a8d97 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -19,7 +19,6 @@ import './style.css';
 import TaskCompletedModal from './components/TaskCompletedModal';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
 import { boxStyle } from 'styles';
-import { ENDPOINTS } from 'utils/URL';
 import axios from 'axios';
 import moment from 'moment';
 import TeamMemberTask from './TeamMemberTask';
@@ -29,6 +28,7 @@ import { toast } from 'react-toastify';
 // import InfiniteScroll from 'react-infinite-scroller';
 import { getAllTimeOffRequests } from '../../actions/timeOffRequestAction';
 import { MyTeamMember } from './MyTeamMember';
+import { ENDPOINTS } from 'utils/URL';
 
 const TeamMemberTasks = React.memo(props => {
   // props from redux store

From da40515bd61b3aa574722fb98d43c09c2c3ee065 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 18:34:04 -0300
Subject: [PATCH 15/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    | 410 +++++++++---------
 .../TeamMemberTasks/TeamMemberTasks.jsx       |  18 +-
 2 files changed, 205 insertions(+), 223 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index a8feb04b0b..10abd11fef 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -103,11 +103,13 @@ function LeaderBoard({
   }, []);
 
   const handleToggleButtonClick = () => {
-    isLoadingTeams
-      ? toast.warning('Please wait while the teams are loading.')
-      : usersSelectedTeam.length === 0
-      ? toast.error(`You have not selected a team or the selected team does not have any members.`)
-      : setToggleButtonText(prevText => (prevText === 'View All' ? 'My Team' : 'View All'));
+    if (isLoadingTeams) {
+      toast.warning('Please wait while the teams are loading.');
+    } else if (usersSelectedTeam.length === 0) {
+      toast.error(`You have not selected a team or the selected team does not have any members.`);
+    } else {
+      setToggleButtonText(prevText => (prevText === 'View All' ? 'My Team' : 'View All'));
+    }
   };
 
   const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
@@ -119,7 +121,7 @@ function LeaderBoard({
       setUsersSelectedTeam(response.data);
       setIsLoadingTeams(false);
 
-      const teamName = team.teamName.substring(0, 30) + '...';
+      const teamName = `${team.teamName.substring(0, 30)}...`;
       setSelectedTeamName(team.teamName.length >= 30 ? teamName : team.teamName);
     } catch (error) {
       toast.error('Error fetching team members:', error);
@@ -161,8 +163,12 @@ function LeaderBoard({
   const dashboardClose = () => setIsDashboardOpen(false);
 
   const showDashboard = item => {
-    //showDashboardTeams
-    item.personId ? dashboardClose() : setOpenModal(false);
+    // showDashboardTeams
+    if (item.personId) {
+      dashboardClose();
+    } else {
+      setOpenModal(false);
+    }
 
     window.open(
       `/dashboard/${item.personId ? item.personId : item._id}`,
@@ -218,7 +224,7 @@ function LeaderBoard({
                   <DropdownItem
                     onClick={() => toast.warning('Please, create a team to use the filter.')}
                   >
-                    {'Please, create a team to use the filter.'}
+                    Please, create a team to use the filter.
                   </DropdownItem>
                 ) : (
                   teams.map(team => (
@@ -239,8 +245,6 @@ function LeaderBoard({
               {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
             </Button>
           </section>
-        ) : userRole !== 'Administrator' && userRole !== 'Core Team' && userRole !== 'Owner' ? (
-          <></>
         ) : null}
       </div>
 
@@ -258,6 +262,7 @@ function LeaderBoard({
           </div>
         </Alert>
       )}
+
       {toggleButtonText === 'View All' ? (
         <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
           <Table className="leaderboard table-fixed">
@@ -321,225 +326,204 @@ function LeaderBoard({
                 </td>
               </tr>
               {leaderBoardData.map(item => (
-              <tr key={item.personId}>
-                <td className="align-middle">
-                  <div>
-                    <Modal
-                      isOpen={isDashboardOpen === item.personId}
-                      toggle={dashboardToggle}
-                      className="modal-personal-dashboard"
-                    >
-                      <ModalHeader toggle={dashboardToggle}>Jump to personal Dashboard</ModalHeader>
-                      <ModalBody>
-                        <p>Are you sure you wish to view this {item.name} dashboard?</p>
-                      </ModalBody>
-                      <ModalFooter>
-                        <Button variant="primary" onClick={() => showDashboard(item)}>
-                          Ok
-                        </Button>{' '}
-                        <Button variant="secondary" onClick={dashboardToggle}>
-                          Cancel
-                        </Button>
-                      </ModalFooter>
-                    </Modal>
-                  </div>
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
-                    }}
-                  >
-                    {/* <Link to={`/dashboard/${item.personId}`}> */}
+                <tr key={item.personId}>
+                  <td className="align-middle">
+                    <div>
+                      <Modal isOpen={isDashboardOpen === item.personId} toggle={dashboardToggle}>
+                        <ModalHeader toggle={dashboardToggle}>
+                          Jump to personal Dashboard
+                        </ModalHeader>
+                        <ModalBody>
+                          <p>Are you sure you wish to view this {item.name} dashboard?</p>
+                        </ModalBody>
+                        <ModalFooter>
+                          <Button variant="primary" onClick={() => showDashboard(item)}>
+                            Ok
+                          </Button>{' '}
+                          <Button variant="secondary" onClick={dashboardToggle}>
+                            Cancel
+                          </Button>
+                        </ModalFooter>
+                      </Modal>
+                    </div>
                     <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => {
-                        dashboardToggle(item);
-                      }}
-                      onKeyDown={e => {
-                        if (e.key === 'Enter') {
-                          dashboardToggle(item);
-                        }
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
                       }}
                     >
-                      {hasLeaderboardPermissions(loggedInUser.role) &&
-                      showStar(item.tangibletime, item.weeklycommittedHours) ? (
-                        <i
-                          className="fa fa-star"
-                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                          style={{
-                            color: assignStarDotColors(
-                              item.tangibletime,
-                              item.weeklycommittedHours,
-                            ),
-                            fontSize: '20px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                          }}
-                        />
-                      ) : (
-                        <div
-                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                          style={{
-                            backgroundColor:
-                              item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
-                            width: 15,
-                            height: 15,
-                            borderRadius: 7.5,
-                            margin: 'auto',
-                            verticalAlign: 'middle',
-                          }}
-                        />
-                      )}
-                    </div>
-                    {hasSummaryIndicatorPermission && item.hasSummary && (
+                      {/* <Link to={`/dashboard/${item.personId}`}> */}
                       <div
-                        title="Weekly Summary Submitted"
-                        style={{
-                          color: '#32a518',
-                          cursor: 'default',
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => {
+                          dashboardToggle(item);
+                        }}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter') {
+                            dashboardToggle(item);
+                          }
                         }}
                       >
-                        <strong>✓</strong>
-                      </div>
-                    )}
-                  </div>
-                  {/* </Link> */}
-                </td>
-                <th scope="row" className="align-middle">
-                  <Link
-                    to={`/userprofile/${item.personId}`}
-                    title="View Profile"
-                    style={{
-                      color:
-                        currentDate.isSameOrAfter(
-                          moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                        ) &&
-                        currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
-                          ? 'rgba(128, 128, 128, 0.5)'
-                          : undefined,
-                    }}
-                  >
-                    {item.name}
-                    {currentDate.isSameOrAfter(
-                      moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                    ) &&
-                    currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
-                    Math.floor(
-                      moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                        .subtract(1, 'day')
-                        .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
-                    ) > 0 ? (
-                      <sup>
-                        {' '}
-                        +
-                        {Math.floor(
-                          moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                            .subtract(1, 'day')
-                            .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                        {hasLeaderboardPermissions(item.role) &&
+                        showStar(item.tangibletime, item.weeklycommittedHours) ? (
+                          <i
+                            className="fa fa-star"
+                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                            style={{
+                              color: assignStarDotColors(
+                                item.tangibletime,
+                                item.weeklycommittedHours,
+                              ),
+                              fontSize: '20px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                            }}
+                          />
+                        ) : (
+                          <div
+                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                            style={{
+                              backgroundColor:
+                                item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
+                              width: 15,
+                              height: 15,
+                              borderRadius: 7.5,
+                              margin: 'auto',
+                              verticalAlign: 'middle',
+                            }}
+                          />
                         )}
-                      </sup>
-                    ) : null}
-                  </Link>
-                  &nbsp;&nbsp;&nbsp;
-                  {hasVisibilityIconPermission && !item.isVisible && (
-                    <i className="fa fa-eye-slash" title="User is invisible" />
-                  )}
-                </th>
-                <td className="align-middle">
-                  {(userOnTimeOff || userGoingOnTimeOff) &&
-                    (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
-                      <div>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            const request = userOnTimeOff[item.personId]
-                              ? {
-                                  ...userOnTimeOff[item.personId],
-                                  onVacation: true,
-                                  name: item.name,
-                                }
-                              : {
-                                  ...userGoingOnTimeOff[item.personId],
-                                  onVacation: false,
-                                  name: item.name,
-                                };
-
-                            handleTimeOffModalOpen(request);
+                      </div>
+                      {hasSummaryIndicatorPermission && item.hasSummary && (
+                        <div
+                          title="Weekly Summary Submitted"
+                          style={{
+                            color: '#32a518',
+                            cursor: 'default',
                           }}
-                          style={{ width: '35px', height: 'auto' }}
                         >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="22"
-                            height="19"
-                            viewBox="0 0 448 512"
-                            className="show-time-off-calender-svg"
+                          <strong>✓</strong>
+                        </div>
+                      )}
+                    </div>
+                    {/* </Link> */}
+                  </td>
+                  <th scope="row" className="align-middle">
+                    <Link
+                      to={`/userprofile/${item.personId}`}
+                      title="View Profile"
+                      style={{
+                        color:
+                          currentDate.isSameOrAfter(
+                            moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                          ) &&
+                          currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
+                            ? 'rgba(128, 128, 128, 0.5)'
+                            : undefined,
+                      }}
+                    >
+                      {item.name}
+                      {currentDate.isSameOrAfter(
+                        moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                      ) &&
+                      currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
+                      Math.floor(
+                        moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                          .subtract(1, 'day')
+                          .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                      ) > 0 ? (
+                        <sup>
+                          {' '}
+                          +
+                          {Math.floor(
+                            moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                              .subtract(1, 'day')
+                              .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                          )}
+                        </sup>
+                      ) : null}
+                    </Link>
+                    &nbsp;&nbsp;&nbsp;
+                    {hasVisibilityIconPermission && !item.isVisible && (
+                      <i className="fa fa-eye-slash" title="User is invisible" />
+                    )}
+                  </th>
+                  <td className="align-middle">
+                    {(userOnTimeOff || userGoingOnTimeOff) &&
+                      (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
+                        <div>
+                          <button
+                            style={{ width: '35px', height: 'auto' }}
+                            type="button"
+                            onClick={() => {
+                              const request = userOnTimeOff[item.personId]
+                                ? {
+                                    ...userOnTimeOff[item.personId],
+                                    onVacation: true,
+                                    name: item.name,
+                                  }
+                                : {
+                                    ...userGoingOnTimeOff[item.personId],
+                                    onVacation: false,
+                                    name: item.name,
+                                  };
+
+                              handleTimeOffModalOpen(request);
+                            }}
                           >
-                            <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
-                          </svg>
-
-                          <i className="show-time-off-icon">
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
-                              width="18"
-                              height="18"
-                              viewBox="0 0 512 512"
-                              className="show-time-off-icon-svg"
+                              width="22"
+                              height="19"
+                              viewBox="0 0 448 512"
+                              className="show-time-off-calender-svg"
                             >
-                              <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
+                              <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
                             </svg>
-                          </i>
-                        </button>
-                      </div>
-                    )}
-                </td>
-                <td className="align-middle" id={`id${item.personId}`}>
-                  <span title="Tangible time">{item.tangibletime}</span>
-                </td>
-                <td className="align-middle">
-                  <Link
-                    to={`/timelog/${item.personId}`}
-                    title={`TangibleEffort: ${item.tangibletime} hours`}
-                  >
-                    <Progress value={item.barprogress} color={item.barcolor} />
-                  </Link>
-                </td>
-                <td className="align-middle">
-                  <span
-                    title={mouseoverTextValue}
-                    id="Total time"
-                    className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
-                  >
-                    {item.totaltime}
-                  </span>
-                </td>
-              </tr>
-            ))}
+
+                            <i className="show-time-off-icon">
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="18"
+                                height="18"
+                                viewBox="0 0 512 512"
+                                className="show-time-off-icon-svg"
+                              >
+                                <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
+                              </svg>
+                            </i>
+                          </button>
+                        </div>
+                      )}
+                  </td>
+                  <td className="align-middle" id={`id${item.personId}`}>
+                    <span title="Tangible time">{item.tangibletime}</span>
+                  </td>
+                  <td className="align-middle">
+                    <Link
+                      to={`/timelog/${item.personId}`}
+                      title={`TangibleEffort: ${item.tangibletime} hours`}
+                    >
+                      <Progress value={item.barprogress} color={item.barcolor} />
+                    </Link>
+                  </td>
+                  <td className="align-middle">
+                    <span
+                      title={mouseoverTextValue}
+                      id="Total time"
+                      className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
+                    >
+                      {item.totaltime}
+                    </span>
+                  </td>
+                </tr>
+              ))}
             </tbody>
           </Table>
         </div>
-      ) : usersSelectedTeam.length === 0 ? (
-        <Table className="text-start mt-3">
-          <thead>
-            <tr>
-              <td>
-                <h4>Error</h4>
-              </td>
-            </tr>
-          </thead>
-
-          <tbody>
-            <tr>
-              <th>
-                The team currently has no members. Please add a member to this team or select
-                another team.
-              </th>
-            </tr>
-          </tbody>
-        </Table>
       ) : (
         <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
           <Table className="p-2">
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index d1368a8d97..bd197fba66 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -61,13 +61,13 @@ const TeamMemberTasks = React.memo(props => {
   const [loading, setLoading] = useState(false);
 
   const handleToggleButtonClick = () => {
-    const text = 'You have not selected a team or the selected team does not have any members.';
-
-    loading
-      ? toast.warning('Please wait while the teams are loading.')
-      : usersSelectedTeam.length === 0
-      ? toast.error(text)
-      : setToggleButtonText(prevText => (prevText === 'View All' ? 'My Team' : 'View All'));
+    if (loading) {
+      toast.warning('Please wait while the teams are loading.');
+    } else if (usersSelectedTeam.length === 0) {
+      toast.error(`You have not selected a team or the selected team does not have any members.`);
+    } else {
+      setToggleButtonText(prevText => (prevText === 'View All' ? 'My Team' : 'View All'));
+    }
   };
 
   const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
@@ -327,9 +327,7 @@ const TeamMemberTasks = React.memo(props => {
           ) : !isLoading &&
             userRole !== 'Administrator' &&
             userRole !== 'Core Team' &&
-            userRole !== 'Owner' ? (
-            <></>
-          ) : null}
+            userRole !== 'Owner' ? null : null}
         </section>
 
         {finishLoading ? (

From c52d74a6b0b559e6c34a34d73176422b9ca0a42b Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues <petersonpepi16@gmail.com>
Date: Thu, 21 Mar 2024 19:49:40 -0300
Subject: [PATCH 16/33] Update Leaderboard.jsx

---
 src/components/LeaderBoard/Leaderboard.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 40f2144562..10abd11fef 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -403,7 +403,6 @@ function LeaderBoard({
                           style={{
                             color: '#32a518',
                             cursor: 'default',
-
                           }}
                         >
                           <strong>✓</strong>

From 215438a6fc933d9fc7fd066829537054ad4ebb8f Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Mon, 25 Mar 2024 12:37:56 -0300
Subject: [PATCH 17/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx | 86 +++++++++++-----------
 1 file changed, 42 insertions(+), 44 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index c6f292d0e0..2e43ca0a1a 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -59,8 +59,8 @@ function LeaderBoard({
   isVisible,
   displayUserId,
   totalTimeMouseoverText,
-  allRequests,
   showTimeOffRequestModal,
+  allRequests,
 }) {
   const userId = displayUserId || loggedInUser.userId;
   const hasSummaryIndicatorPermission = hasPermission('seeSummaryIndicator'); // ??? this permission doesn't exist?
@@ -74,7 +74,6 @@ function LeaderBoard({
     getMouseoverText();
     setMouseoverTextValue(totalTimeMouseoverText);
   }, [totalTimeMouseoverText]);
-
   const [teams, setTeams] = useState([]);
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [selectedTeamName, setSelectedTeamName] = useState();
@@ -310,7 +309,14 @@ function LeaderBoard({
             <tbody className="my-custome-scrollbar">
               <tr>
                 <td />
-                <th scope="row">{organizationData.name}</th>
+                <th scope="row" className="leaderboard-totals-container">
+                  <span>{organizationData.name}</span>
+                  {viewZeroHouraMembers(loggedInUser.role) && (
+                    <span className="leaderboard-totals-title">
+                      0 hrs Totals: {individualsWithZeroHours.length} Members
+                    </span>
+                  )}
+                </th>
                 <td className="align-middle" />
                 <td className="align-middle">
                   <span title="Tangible time">{organizationData.tangibletime || ''}</span>
@@ -455,52 +461,44 @@ function LeaderBoard({
                     )}
                   </th>
                   <td className="align-middle">
-                    {(userOnTimeOff || userGoingOnTimeOff) &&
-                      (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
-                        <div>
-                          <button
-                            style={{ width: '35px', height: 'auto' }}
-                            type="button"
-                            onClick={() => {
-                              const request = userOnTimeOff[item.personId]
-                                ? {
-                                    ...userOnTimeOff[item.personId],
-                                    onVacation: true,
-                                    name: item.name,
-                                  }
-                                : {
-                                    ...userGoingOnTimeOff[item.personId],
-                                    onVacation: false,
-                                    name: item.name,
-                                  };
-
-                              handleTimeOffModalOpen(request);
-                            }}
+                    {allRequests && allRequests[item.personId]?.length > 0 && (
+                      <div>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const data = {
+                              requests: [...allRequests[item.personId]],
+                              name: item.name,
+                              leaderboard: true,
+                            };
+                            handleTimeOffModalOpen(data);
+                          }}
+                          style={{ width: '35px', height: 'auto' }}
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="22"
+                            height="19"
+                            viewBox="0 0 448 512"
+                            className="show-time-off-calender-svg"
                           >
+                            <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
+                          </svg>
+
+                          <i className="show-time-off-icon">
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
-                              width="22"
-                              height="19"
-                              viewBox="0 0 448 512"
-                              className="show-time-off-calender-svg"
+                              width="18"
+                              height="18"
+                              viewBox="0 0 512 512"
+                              className="show-time-off-icon-svg"
                             >
-                              <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
+                              <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
                             </svg>
-
-                            <i className="show-time-off-icon">
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="18"
-                                height="18"
-                                viewBox="0 0 512 512"
-                                className="show-time-off-icon-svg"
-                              >
-                                <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
-                              </svg>
-                            </i>
-                          </button>
-                        </div>
-                      )}
+                          </i>
+                        </button>
+                      </div>
+                    )}
                   </td>
                   <td className="align-middle" id={`id${item.personId}`}>
                     <span title="Tangible time">{item.tangibletime}</span>

From 5331bfeb714d756f99d8a5b77f495da7bb4c430b Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Tue, 2 Apr 2024 14:08:14 -0300
Subject: [PATCH 18/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    |  57 ++-
 .../TeamMemberTasks/MyTeamMember.jsx          | 373 ++++++++++++++----
 .../TeamMemberTasks/TeamMemberTasks.jsx       | 311 +++++++--------
 3 files changed, 484 insertions(+), 257 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index ee41df396e..67edd26d39 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -84,9 +84,6 @@ function LeaderBoard({
   const [toggleButtonText, setToggleButtonText] = useState('View All');
   const [isLoadingTeams, setIsLoadingTeams] = useState(false);
   const [userRole, setUserRole] = useState();
-  const [openModal, setOpenModal] = useState();
-
-  const dashboardToggleTeams = item => setOpenModal(item._id);
 
   useEffect(() => {
     const fetchInitial = async () => {
@@ -120,11 +117,14 @@ function LeaderBoard({
     try {
       setIsLoadingTeams(true);
       const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
-      setUsersSelectedTeam(response.data);
       setIsLoadingTeams(false);
 
       const teamName = `${team.teamName.substring(0, 30)}...`;
       setSelectedTeamName(team.teamName.length >= 30 ? teamName : team.teamName);
+      const idUsers = response.data.map(item => item._id);
+      const usersTaks = leaderBoardData.filter(item => idUsers.includes(item.personId));
+      //console.log(usersTaks);
+      setUsersSelectedTeam(usersTaks);
     } catch (error) {
       toast.error('Error fetching team members:', error);
       setIsLoadingTeams(false);
@@ -551,20 +551,20 @@ function LeaderBoard({
                   </span>
                 </th>
 
+                <th className="align-middle">Tangible Time</th>
+                <th className="align-middle">Progress</th>
                 <th className="align-middle">Total Time</th>
               </tr>
             </thead>
             <tbody>
               {usersSelectedTeam.map(item => {
                 return (
-                  <Fragment key={item._id}>
-                    <Modal isOpen={openModal === item._id} toggle={dashboardToggleTeams}>
-                      <ModalHeader toggle={dashboardToggleTeams}>
-                        Jump to personal Dashboard
-                      </ModalHeader>
+                  <Fragment key={item.personId}>
+                    <Modal isOpen={isDashboardOpen === item.personId} toggle={dashboardToggle}>
+                      <ModalHeader toggle={dashboardToggle}>Jump to personal Dashboard</ModalHeader>
                       <ModalBody>
                         <p>
-                          Are you sure you wish to view this {item.firstName} {item.lastName}{' '}
+                          Are you sure you wish to view this {item.name}
                           dashboard?
                         </p>
                       </ModalBody>
@@ -572,7 +572,7 @@ function LeaderBoard({
                         <Button variant="primary" onClick={() => showDashboard(item)}>
                           Ok
                         </Button>{' '}
-                        <Button variant="secondary" onClick={dashboardToggleTeams}>
+                        <Button variant="secondary" onClick={dashboardToggle}>
                           Cancel
                         </Button>
                       </ModalFooter>
@@ -583,22 +583,22 @@ function LeaderBoard({
                           role="button"
                           tabIndex={0}
                           onClick={() => {
-                            dashboardToggleTeams(item);
+                            dashboardToggle(item);
                           }}
                           onKeyDown={e => {
                             if (e.key === 'Enter') {
-                              dashboardToggleTeams(item);
+                              dashboardToggle(item);
                             }
                           }}
                         >
-                          {hasLeaderboardPermissions(loggedInUser.role) &&
-                          showStar(item.totalIntangibleHrs, item.weeklycommittedHours) ? (
+                          {hasLeaderboardPermissions(item.role) &&
+                          showStar(item.tangibletime, item.weeklycommittedHours) ? (
                             <i
                               className="fa fa-star"
                               title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
                               style={{
                                 color: assignStarDotColors(
-                                  item.totalIntangibleHrs,
+                                  item.tangibletime,
                                   item.weeklycommittedHours,
                                 ),
                                 fontSize: '20px',
@@ -612,7 +612,7 @@ function LeaderBoard({
                               title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
                               style={{
                                 backgroundColor:
-                                  item.totalTangibleHrs >= item.weeklycommittedHours
+                                  item.tangibletime >= item.weeklycommittedHours
                                     ? '#32CD32'
                                     : 'red',
                                 width: 15,
@@ -627,13 +627,30 @@ function LeaderBoard({
                       </th>
 
                       <th scope="row" className="align-middle">
-                        <Link to={`/userprofile/${item._id}`}>
-                          {item.firstName} {item.lastName}
+                        <Link to={`/userprofile/${item.personId}`}>{item.name}</Link>
+                      </th>
+
+                      <th className="align-middle">
+                        <p>{item.tangibletime}</p>
+                      </th>
+
+                      <th className="align-middle">
+                        <Link
+                          to={`/timelog/${item.personId}`}
+                          title={`TangibleEffort: ${item.tangibletime} hours`}
+                        >
+                          <Progress value={item.barprogress} color={item.barcolor} />
                         </Link>
                       </th>
 
                       <th className="align-middle">
-                        <p>{item.totalTangibleHrs}</p>
+                        <span
+                          title={mouseoverTextValue}
+                          id="Total time"
+                          className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
+                        >
+                          <p>{item.totaltime}</p>
+                        </span>
                       </th>
                     </tr>
                   </Fragment>
diff --git a/src/components/TeamMemberTasks/MyTeamMember.jsx b/src/components/TeamMemberTasks/MyTeamMember.jsx
index 4e9f419efc..cbb1f4478e 100644
--- a/src/components/TeamMemberTasks/MyTeamMember.jsx
+++ b/src/components/TeamMemberTasks/MyTeamMember.jsx
@@ -1,5 +1,4 @@
-import React, { useState, useMemo, useRef, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState, useRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faBell,
@@ -9,31 +8,92 @@ import {
   faExpandArrowsAlt,
   faCompressArrowsAlt,
 } from '@fortawesome/free-solid-svg-icons';
-import { Table, Progress, Modal, ModalHeader, ModalBody } from 'reactstrap';
+import CopyToClipboard from 'components/common/Clipboard/CopyToClipboard';
+import { Table, Progress } from 'reactstrap';
+
+import { Link } from 'react-router-dom';
+import hasPermission from 'utils/permissions';
 import './style.css';
+import { boxStyle } from 'styles';
+
+import Warning from 'components/Warnings/Warnings';
+import { useDispatch } from 'react-redux';
 import moment from 'moment-timezone';
-import GoogleDocIcon from '../../components/common/GoogleDocIcon';
-import hasPermission from 'utils/permissions';
-import { useDispatch, useSelector } from 'react-redux';
 
-export const MyTeamMember = ({ user, usersWithTasks }) => {
-  const thisWeekHours = user.totalTangibleHrs;
+import ReviewButton from './ReviewButton';
+import { getProgressColor, getProgressValue } from '../../utils/effortColors';
+import TeamMemberTaskIconsInfo from './TeamMemberTaskIconsInfo';
+import { showTimeOffRequestModal } from '../../actions/timeOffRequestAction';
+import GoogleDocIcon from '../common/GoogleDocIcon';
 
-  const currentDate = moment.tz('America/Los_Angeles').startOf('day');
+const NUM_TASKS_SHOW_TRUNCATE = 6;
 
+export const MyTeamMember = ({
+  user,
+  handleMarkAsDoneModal,
+  handleRemoveFromTaskModal,
+  handleOpenTaskNotificationModal,
+  handleTaskModalOption,
+  userRole,
+  userId,
+  updateTaskStatus,
+  showWhoHasTimeOff,
+  onTimeOff,
+  goingOnTimeOff,
+}) => {
+  const ref = useRef(null);
+  const currentDate = moment.tz('America/Los_Angeles').startOf('day');
   const dispatch = useDispatch();
 
-  const canGetWeeklySummaries = dispatch(hasPermission('getWeeklySummaries'));
-
-  const totalHoursRemaining = usersWithTasks.reduce((total, user) => {
-    user.tasks.forEach(task => {
-      if (task.status !== 'Complete' && task.isAssigned !== 'false') {
-        return total + Math.max(0, task.estimatedHours - task.hoursLogged);
-      }
-    });
+  const totalHoursRemaining = user.tasks.reduce((total, task) => {
+    task.hoursLogged = task.hoursLogged || 0;
+    task.estimatedHours = task.estimatedHours || 0;
+    if (task.status !== 'Complete' && task.isAssigned !== 'false') {
+      return total + Math.max(0, task.estimatedHours - task.hoursLogged);
+    }
     return total;
   }, 0);
 
+  const activeTasks = user.tasks.filter(
+    task =>
+      !task.resources?.some(
+        resource => resource.userID === user.personId && resource.completedTask,
+      ),
+  );
+
+  const canTruncate = activeTasks.length > NUM_TASKS_SHOW_TRUNCATE;
+  const [isTruncated, setIsTruncated] = useState(canTruncate);
+  const [expandTimeOffIndicator, setExpandTimeOffIndicator] = useState({});
+
+  const thisWeekHours = user.totaltangibletime_hrs;
+
+  // these need to be changed to actual permissions...
+  const rolesAllowedToResolveTasks = ['Administrator', 'Owner'];
+  const rolesAllowedToSeeDeadlineCount = ['Manager', 'Mentor', 'Administrator', 'Owner'];
+  const isAllowedToResolveTasks =
+    rolesAllowedToResolveTasks.includes(userRole) || dispatch(hasPermission('resolveTask'));
+  const isAllowedToSeeDeadlineCount = rolesAllowedToSeeDeadlineCount.includes(userRole);
+  // ^^^
+
+  const canGetWeeklySummaries = dispatch(hasPermission('getWeeklySummaries'));
+  const canUpdateTask = dispatch(hasPermission('updateTask'));
+  const numTasksToShow = isTruncated ? NUM_TASKS_SHOW_TRUNCATE : activeTasks.length;
+
+  const handleTruncateTasksButtonClick = () => {
+    if (!isTruncated) {
+      ref.current?.scrollIntoView({ behavior: 'smooth' });
+      setTimeout(() => {
+        setIsTruncated(!isTruncated);
+      }, 0);
+    } else {
+      setIsTruncated(!isTruncated);
+    }
+  };
+
+  const openDetailModal = request => {
+    dispatch(showTimeOffRequestModal(request));
+  };
+
   const userGoogleDocLink = user.adminLinks?.reduce((targetLink, currentElement) => {
     if (currentElement.Name === 'Google Doc') {
       targetLink = currentElement.Link;
@@ -42,64 +102,233 @@ export const MyTeamMember = ({ user, usersWithTasks }) => {
   }, undefined);
 
   return (
-    <tr
-      className="table-row d-flex justify-content-between d-flex align-items-center"
-      key={user._id}
-    >
-      <td>
-        <section style={{ display: 'flex', alignItems: 'center' }}>
-          <div className="committed-hours-circle">
-            <FontAwesomeIcon
-              style={{
-                color: thisWeekHours >= user.weeklycommittedHours ? 'green' : 'red',
-              }}
-              icon={faCircle}
-              data-testid="icon"
-            />
+    <>
+      <tr ref={ref} className="table-row" key={user.personId}>
+        {/* green if member has met committed hours for the week, red if not */}
+        <td colSpan={1}>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <div className="committed-hours-circle">
+              <FontAwesomeIcon
+                style={{
+                  color: user.totaltangibletime_hrs >= user.weeklycommittedHours ? 'green' : 'red',
+                }}
+                icon={faCircle}
+                data-testid="icon"
+              />
+            </div>
+            <Link to={`/timelog/${user.personId}`}>
+              <i
+                className="fa fa-clock-o"
+                aria-hidden="true"
+                style={{ fontSize: 24, cursor: 'pointer', color: 'black' }}
+                title="Click to see user's timelog"
+              />
+            </Link>
           </div>
+        </td>
+        <td colSpan={2}>
+          <Table borderless className="team-member-tasks-subtable">
+            <tbody>
+              <tr>
+                <td className="team-member-tasks-user-name">
+                  <Link
+                    to={`/userprofile/${user.personId}`}
+                    style={{
+                      color:
+                        currentDate.isSameOrAfter(
+                          moment(user.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                        ) &&
+                        currentDate.isBefore(moment(user.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
+                          ? 'rgba(128, 128, 128, 0.5)'
+                          : undefined,
+                    }}
+                  >{`${user.name}`}</Link>
+                  {canGetWeeklySummaries && <GoogleDocIcon link={userGoogleDocLink} />}
+
+                  <Warning
+                    username={user.name}
+                    userName={user}
+                    userId={userId}
+                    user={user}
+                    userRole={userRole}
+                    personId={user.personId}
+                  />
+                </td>
+                <td data-label="Time" className="team-clocks">
+                  <u>{user.weeklycommittedHours ? user.weeklycommittedHours : 0}</u> /
+                  <font color="green"> {thisWeekHours ? thisWeekHours.toFixed(1) : 0}</font> /
+                  <font color="red"> {totalHoursRemaining.toFixed(1)}</font>
+                </td>
+              </tr>
+            </tbody>
+          </Table>
+        </td>
+        <td colSpan={3}>
+          <Table borderless className="team-member-tasks-subtable">
+            <tbody>
+              {user.tasks &&
+                activeTasks.slice(0, numTasksToShow).map((task, index) => {
+                  return (
+                    <tr key={`${task._id}${index}`} className="task-break">
+                      <td data-label="Task(s)" className="task-align">
+                        <div className="team-member-tasks-content">
+                          <Link
+                            to={task.projectId ? `/wbs/tasks/${task._id}` : '/'}
+                            data-testid={`${task.taskName}`}
+                          >
+                            <span>{`${task.num} ${task.taskName}`} </span>
+                          </Link>
+                          <CopyToClipboard writeText={task.taskName} message="Task Copied!" />
+                        </div>
+                        <div className="team-member-tasks-icons">
+                          {task.taskNotifications.length > 0 &&
+                          task.taskNotifications.some(
+                            notification =>
+                              notification.hasOwnProperty('userId') &&
+                              notification.userId === user.personId,
+                          ) ? (
+                            <>
+                              <FontAwesomeIcon
+                                className="team-member-tasks-bell"
+                                title="Task Info Changes"
+                                icon={faBell}
+                                onClick={() => {
+                                  const taskNotificationId = task.taskNotifications.filter(
+                                    taskNotification => {
+                                      if (taskNotification.userId === user.personId) {
+                                        return taskNotification;
+                                      }
+                                    },
+                                  );
+                                  handleOpenTaskNotificationModal(
+                                    user.personId,
+                                    task,
+                                    taskNotificationId,
+                                  );
+                                }}
+                                data-taskid={`task-info-icon-${task.taskName}`}
+                              />
+                            </>
+                          ) : null}
+                          {isAllowedToResolveTasks && (
+                            <FontAwesomeIcon
+                              className="team-member-tasks-done"
+                              icon={faCheck}
+                              title="Mark as Done"
+                              onClick={() => {
+                                handleMarkAsDoneModal(user.personId, task);
+                                handleTaskModalOption('Checkmark');
+                              }}
+                              data-testid={`tick-${task.taskName}`}
+                            />
+                          )}
+                          {canUpdateTask && (
+                            <FontAwesomeIcon
+                              className="team-member-task-remove"
+                              icon={faTimes}
+                              title="Remove User from Task"
+                              onClick={() => {
+                                handleRemoveFromTaskModal(user.personId, task);
+                                handleTaskModalOption('XMark');
+                              }}
+                              data-testid={`Xmark-${task.taskName}`}
+                            />
+                          )}
+                          <TeamMemberTaskIconsInfo />
+                        </div>
+                        <div>
+                          <ReviewButton
+                            user={user}
+                            userId={userId}
+                            task={task}
+                            updateTask={updateTaskStatus}
+                            style={boxStyle}
+                          />
+                        </div>
+                      </td>
+                      {task.hoursLogged != null && task.estimatedHours != null && (
+                        <td data-label="Progress" className="team-task-progress">
+                          {isAllowedToSeeDeadlineCount && (
+                            <span
+                              className="deadlineCount"
+                              title="Deadline Follow-up Count"
+                              data-testid={`deadline-${task.taskName}`}
+                            >
+                              {task.deadlineCount === undefined ? 0 : task.deadlineCount}
+                            </span>
+                          )}
+                          <div>
+                            <span data-testid={`times-${task.taskName}`}>
+                              {`${parseFloat(task.hoursLogged.toFixed(2))} of ${parseFloat(
+                                task.estimatedHours.toFixed(2),
+                              )}`}
+                            </span>
+                            <Progress
+                              color={getProgressColor(task.hoursLogged, task.estimatedHours, true)}
+                              value={getProgressValue(task.hoursLogged, task.estimatedHours)}
+                            />
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  );
+                })}
+              {canTruncate && (
+                <tr key="truncate-button-row" className="task-break">
+                  <td className="task-align">
+                    <button type="button" onClick={handleTruncateTasksButtonClick}>
+                      {isTruncated ? `Show All (${activeTasks.length}) Tasks` : 'Truncate Tasks'}
+                    </button>
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </Table>
+          {showWhoHasTimeOff &&
+            (onTimeOff || goingOnTimeOff) &&
+            (expandTimeOffIndicator[user.personId] ? (
+              <button
+                type="button"
+                className="expand-time-off-detail-button"
+                onClick={() => {
+                  setExpandTimeOffIndicator(prev => ({ ...prev, [user.personId]: false }));
+                }}
+              >
+                <FontAwesomeIcon icon={faExpandArrowsAlt} data-testid="icon" />
+              </button>
+            ) : (
+              <div className="taking-time-off-content-div">
+                <button
+                  className="compress-time-off-detail-button"
+                  onClick={() => {
+                    setExpandTimeOffIndicator(prev => ({ ...prev, [user.personId]: true }));
+                  }}
+                >
+                  <FontAwesomeIcon icon={faCompressArrowsAlt} data-testid="icon" />
+                </button>
+
+                <span className="taking-time-off-content-text">
+                  {onTimeOff
+                    ? `${user.name} Is Not Available this Week`
+                    : `${user.name} Is Not Available Next Week`}
+                </span>
+                <button
+                  type="button"
+                  className="taking-time-off-content-btn"
+                  onClick={() => {
+                    const request = onTimeOff
+                      ? { ...onTimeOff, onVacation: true, name: user.name }
+                      : { ...goingOnTimeOff, onVacation: false, name: user.name };
 
-          <Link to={`/timelog/${user._id}`}>
-            <i
-              className="fa fa-clock-o"
-              aria-hidden="true"
-              style={{ fontSize: 24, cursor: 'pointer', color: 'black' }}
-              title="Click to see user's timelog"
-            />
-          </Link>
-        </section>
-      </td>
-
-      <td>
-        <Table borderless className="team-member-tasks-subtable">
-          <tbody>
-            <tr>
-              <td className="team-member-tasks-user-name">
-                <Link
-                  to={`/userprofile/${user._id}`}
-                  style={{
-                    color:
-                      currentDate.isSameOrAfter(
-                        moment(user.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                      ) &&
-                      currentDate.isBefore(moment(user.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
-                        ? 'rgba(128, 128, 128, 0.5)'
-                        : undefined,
+                    openDetailModal(request);
                   }}
                 >
-                  {user.firstName} {user.lastName}
-                </Link>
-                {canGetWeeklySummaries && <GoogleDocIcon link={userGoogleDocLink} />}
-              </td>
-
-              <td data-label="Time" /* className="team-clocks" */>
-                <u>{user.weeklycommittedHours ? user.weeklycommittedHours : 0}</u> /
-                <font color="green"> {thisWeekHours ? thisWeekHours.toFixed(1) : 0}</font> /
-                <font color="red"> {totalHoursRemaining.toFixed(1)}</font>
-              </td>
-            </tr>
-          </tbody>
-        </Table>
-      </td>
-    </tr>
+                  Details ?
+                </button>
+              </div>
+            ))}
+        </td>
+      </tr>
+    </>
   );
 };
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 1b9fde571b..b10a6e6c92 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -234,10 +234,12 @@ const TeamMemberTasks = React.memo(props => {
       try {
         setLoading(true);
         const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
-        setUsersSelectedTeam(response.data);
         setLoading(false);
         const teamName = team.teamName.substring(0, 15) + '...';
         setSelectedTeamName(team.teamName.length >= 15 ? teamName : team.teamName);
+        const idUsers = response.data.map(item => item._id);
+        const usersTaks = usersWithTasks.filter(item => idUsers.includes(item.personId));
+        setUsersSelectedTeam(usersTaks);
       } catch (error) {
         toast.error('Error fetching team members:', error);
       }
@@ -424,191 +426,170 @@ const TeamMemberTasks = React.memo(props => {
       <div className="task_table-container">
         <Table>
           <thead className="pc-component" style={{ position: 'sticky', top: 0 }}>
-            {toggleButtonText === 'View All' ? (
-              <tr>
-                {/* Empty column header for hours completed icon */}
-                <th colSpan={1} />
-                <th colSpan={2} className="team-member-tasks-headers">
-                  <Table borderless className="team-member-tasks-subtable">
-                    <thead>
-                      <tr>
-                        <th className="team-member-tasks-headers team-member-tasks-user-name">
-                          Team Member
-                        </th>
-                        <th className="team-member-tasks-headers team-clocks team-clocks-header">
-                          <FontAwesomeIcon icon={faClock} title="Weekly Committed Hours" />
-                          /
-                          <FontAwesomeIcon
-                            style={{ color: 'green' }}
-                            icon={faClock}
-                            title="Total Hours Completed this Week"
-                          />
-                          /
-                          <FontAwesomeIcon
-                            style={{ color: 'red' }}
-                            icon={faClock}
-                            title="Total Remaining Hours"
-                          />
-                        </th>
-                      </tr>
-                    </thead>
-                  </Table>
-                </th>
-                <th colSpan={3} className="team-member-tasks-headers">
-                  <Table borderless className="team-member-tasks-subtable">
-                    <thead>
-                      <tr>
-                        <th>Tasks(s)</th>
-                        <th className="team-task-progress">Progress</th>
-                        {displayUser.role === 'Administrator' ? <th>Status</th> : null}
-                      </tr>
-                    </thead>
-                  </Table>
-                </th>
-              </tr>
-            ) : usersSelectedTeam.length === 0 ? (
-              <tr>
-                <th className="team-member-tasks-headers">
-                  <Table borderless>
-                    <thead>
-                      <th>
-                        {' '}
-                        <h4>Error</h4>
+            <tr>
+              {/* Empty column header for hours completed icon */}
+              <th colSpan={1} />
+              <th colSpan={2} className="team-member-tasks-headers">
+                <Table borderless className="team-member-tasks-subtable">
+                  <thead>
+                    <tr>
+                      <th className="team-member-tasks-headers team-member-tasks-user-name">
+                        Team Member
                       </th>
-                    </thead>
-                  </Table>
-                </th>
-              </tr>
-            ) : (
-              <tr>
-                <th className="team-member-tasks-headers table-row d-flex justify-content-between d-flex align-items-center">
-                  <Table borderless className="team-member-tasks-subtable">
-                    <thead>
-                      <tr>
-                        <th></th>
-
-                        <th className="team-member-tasks-headers team-member-tasks-user-name">
-                          Team Member
-                        </th>
-                        <th
-                          className="team-member-tasks-headers team-clocks team-clocks-header "
-                          style={{ gap: 4 }}
-                        >
-                          <FontAwesomeIcon icon={faClock} title="Weekly Committed Hours" />
-                          /
-                          <FontAwesomeIcon
-                            style={{ color: 'green' }}
-                            icon={faClock}
-                            title="Total Hours Completed this Week"
-                          />
-                          /
-                          <FontAwesomeIcon
-                            style={{ color: 'red' }}
-                            icon={faClock}
-                            title="Total Remaining Hours"
-                          />
-                        </th>
-                      </tr>
-                    </thead>
-                  </Table>
-                </th>
-              </tr>
-            )}
+                      <th className="team-member-tasks-headers team-clocks team-clocks-header">
+                        <FontAwesomeIcon icon={faClock} title="Weekly Committed Hours" />
+                        /
+                        <FontAwesomeIcon
+                          style={{ color: 'green' }}
+                          icon={faClock}
+                          title="Total Hours Completed this Week"
+                        />
+                        /
+                        <FontAwesomeIcon
+                          style={{ color: 'red' }}
+                          icon={faClock}
+                          title="Total Remaining Hours"
+                        />
+                      </th>
+                    </tr>
+                  </thead>
+                </Table>
+              </th>
+              <th colSpan={3} className="team-member-tasks-headers">
+                <Table borderless className="team-member-tasks-subtable">
+                  <thead>
+                    <tr>
+                      <th>Tasks(s)</th>
+                      <th className="team-task-progress">Progress</th>
+                      {displayUser.role === 'Administrator' ? <th>Status</th> : null}
+                    </tr>
+                  </thead>
+                </Table>
+              </th>
+            </tr>
           </thead>
           <tbody>
             {isLoading ? (
               <SkeletonLoading template="TeamMemberTasks" />
             ) : (
               <>
-                {toggleButtonText === 'View All' ? (
-                  teamList.map(user => {
-                    if (!isTimeFilterActive) {
-                      return (
-                        <TeamMemberTask
-                          user={user}
-                          userPermission={props?.auth?.user?.permissions?.frontPermissions?.includes(
-                            'putReviewStatus',
-                          )}
-                          key={user.personId}
-                          handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
-                          handleMarkAsDoneModal={handleMarkAsDoneModal}
-                          handleRemoveFromTaskModal={handleRemoveFromTaskModal}
-                          handleTaskModalOption={handleTaskModalOption}
-                          userRole={displayUser.role}
-                          updateTaskStatus={updateTaskStatus}
-                          userId={displayUser._id}
-                          showWhoHasTimeOff={showWhoHasTimeOff}
-                          onTimeOff={userOnTimeOff[user.personId]}
-                          goingOnTimeOff={userGoingOnTimeOff[user.personId]}
-                        />
-                      );
-                    } else {
-                      return (
-                        <Fragment key={user.personId}>
+                {toggleButtonText === 'View All'
+                  ? teamList.map(user => {
+                      if (!isTimeFilterActive) {
+                        return (
                           <TeamMemberTask
                             user={user}
+                            userPermission={props?.auth?.user?.permissions?.frontPermissions?.includes(
+                              'putReviewStatus',
+                            )}
                             key={user.personId}
                             handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
                             handleMarkAsDoneModal={handleMarkAsDoneModal}
                             handleRemoveFromTaskModal={handleRemoveFromTaskModal}
                             handleTaskModalOption={handleTaskModalOption}
+                            userRole={displayUser.role}
+                            updateTaskStatus={updateTaskStatus}
+                            userId={displayUser._id}
                             showWhoHasTimeOff={showWhoHasTimeOff}
                             onTimeOff={userOnTimeOff[user.personId]}
                             goingOnTimeOff={userGoingOnTimeOff[user.personId]}
+                          />
+                        );
+                      } else {
+                        return (
+                          <Fragment key={user.personId}>
+                            <TeamMemberTask
+                              user={user}
+                              key={user.personId}
+                              handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
+                              handleMarkAsDoneModal={handleMarkAsDoneModal}
+                              handleRemoveFromTaskModal={handleRemoveFromTaskModal}
+                              handleTaskModalOption={handleTaskModalOption}
+                              showWhoHasTimeOff={showWhoHasTimeOff}
+                              onTimeOff={userOnTimeOff[user.personId]}
+                              goingOnTimeOff={userGoingOnTimeOff[user.personId]}
+                              userRole={displayUser.role}
+                              updateTaskStatus={updateTaskStatus}
+                              userId={displayUser._id}
+                            />
+                            {timeEntriesList.length > 0 &&
+                              timeEntriesList
+                                .filter(timeEntry => timeEntry.personId === user.personId)
+                                .map(timeEntry => (
+                                  <tr className="table-row" key={timeEntry._id}>
+                                    <td colSpan={6} style={{ padding: 0 }}>
+                                      <TimeEntry
+                                        from="TaskTab"
+                                        data={timeEntry}
+                                        displayYear
+                                        key={timeEntry._id}
+                                        timeEntryUserProfile={timeEntry.userProfile}
+                                      />
+                                    </td>
+                                  </tr>
+                                ))}
+                          </Fragment>
+                        );
+                      }
+                    })
+                  : usersSelectedTeam.map(user => {
+                      if (!isTimeFilterActive) {
+                        return (
+                          <MyTeamMember
+                            user={user}
+                            userPermission={props?.auth?.user?.permissions?.frontPermissions?.includes(
+                              'putReviewStatus',
+                            )}
+                            key={user.personId}
+                            handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
+                            handleMarkAsDoneModal={handleMarkAsDoneModal}
+                            handleRemoveFromTaskModal={handleRemoveFromTaskModal}
+                            handleTaskModalOption={handleTaskModalOption}
                             userRole={displayUser.role}
                             updateTaskStatus={updateTaskStatus}
                             userId={displayUser._id}
+                            showWhoHasTimeOff={showWhoHasTimeOff}
+                            onTimeOff={userOnTimeOff[user.personId]}
+                            goingOnTimeOff={userGoingOnTimeOff[user.personId]}
                           />
-                          {timeEntriesList.length > 0 &&
-                            timeEntriesList
-                              .filter(timeEntry => timeEntry.personId === user.personId)
-                              .map(timeEntry => (
-                                <tr className="table-row" key={timeEntry._id}>
-                                  <td colSpan={6} style={{ padding: 0 }}>
-                                    <TimeEntry
-                                      from="TaskTab"
-                                      data={timeEntry}
-                                      displayYear
-                                      key={timeEntry._id}
-                                      timeEntryUserProfile={timeEntry.userProfile}
-                                    />
-                                  </td>
-                                </tr>
-                              ))}
-                        </Fragment>
-                      );
-                    }
-                  })
-                ) : usersSelectedTeam.length === 0 ? (
-                  <Table>
-                    <tbody>
-                      <tr>
-                        <th>
-                          The team currently has no members. Please add a member to this team or
-                          select another team.
-                        </th>
-                      </tr>
-                    </tbody>
-                  </Table>
-                ) : (
-                  usersSelectedTeam.map(user => {
-                    return (
-                      <MyTeamMember
-                        key={user._id}
-                        user={user}
-                        usersWithTasks={usersWithTasks}
-                        handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
-                        handleMarkAsDoneModal={handleMarkAsDoneModal}
-                        handleRemoveFromTaskModal={handleRemoveFromTaskModal}
-                        handleTaskModalOption={handleTaskModalOption}
-                        showWhoHasTimeOff={showWhoHasTimeOff}
-                        onTimeOff={userOnTimeOff[user._id]}
-                        goingOnTimeOff={userGoingOnTimeOff[user._id]}
-                        updateTaskStatus={updateTaskStatus}
-                      />
-                    );
-                  })
-                )}
+                        );
+                      } else {
+                        return (
+                          <Fragment key={user.personId}>
+                            <MyTeamMember
+                              user={user}
+                              key={user.personId}
+                              handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
+                              handleMarkAsDoneModal={handleMarkAsDoneModal}
+                              handleRemoveFromTaskModal={handleRemoveFromTaskModal}
+                              handleTaskModalOption={handleTaskModalOption}
+                              showWhoHasTimeOff={showWhoHasTimeOff}
+                              onTimeOff={userOnTimeOff[user.personId]}
+                              goingOnTimeOff={userGoingOnTimeOff[user.personId]}
+                              userRole={displayUser.role}
+                              updateTaskStatus={updateTaskStatus}
+                              userId={displayUser._id}
+                            />
+                            {timeEntriesList.length > 0 &&
+                              timeEntriesList
+                                .filter(timeEntry => timeEntry.personId === user.personId)
+                                .map(timeEntry => (
+                                  <tr className="table-row" key={timeEntry._id}>
+                                    <td colSpan={6} style={{ padding: 0 }}>
+                                      <TimeEntry
+                                        from="TaskTab"
+                                        data={timeEntry}
+                                        displayYear
+                                        key={timeEntry._id}
+                                        timeEntryUserProfile={timeEntry.userProfile}
+                                      />
+                                    </td>
+                                  </tr>
+                                ))}
+                          </Fragment>
+                        );
+                      }
+                    })}
               </>
             )}
           </tbody>

From 6c45bb49e2bbcd105844d4db8e642031c061eac6 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Tue, 2 Apr 2024 14:09:56 -0300
Subject: [PATCH 19/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 67edd26d39..c7b0510e91 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -123,7 +123,6 @@ function LeaderBoard({
       setSelectedTeamName(team.teamName.length >= 30 ? teamName : team.teamName);
       const idUsers = response.data.map(item => item._id);
       const usersTaks = leaderBoardData.filter(item => idUsers.includes(item.personId));
-      //console.log(usersTaks);
       setUsersSelectedTeam(usersTaks);
     } catch (error) {
       toast.error('Error fetching team members:', error);

From 9e7931eebdced2c68dd203a3d12f0348625633de Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Wed, 3 Apr 2024 17:17:50 -0300
Subject: [PATCH 20/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    | 697 ++++++++----------
 .../TeamMemberTasks/MyTeamMember.jsx          | 334 ---------
 .../TeamMemberTasks/TeamMemberTasks.jsx       | 239 +++---
 3 files changed, 396 insertions(+), 874 deletions(-)
 delete mode 100644 src/components/TeamMemberTasks/MyTeamMember.jsx

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index c7b0510e91..6e594e7f8a 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, Fragment } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import './Leaderboard.css';
 import { isEqual } from 'lodash';
 import { Link } from 'react-router-dom';
@@ -14,6 +14,7 @@ import {
   DropdownToggle,
   DropdownMenu,
   DropdownItem,
+  Spinner,
 } from 'reactstrap';
 import Alert from 'reactstrap/lib/Alert';
 import {
@@ -81,16 +82,15 @@ function LeaderBoard({
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [selectedTeamName, setSelectedTeamName] = useState();
   const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
-  const [toggleButtonText, setToggleButtonText] = useState('View All');
   const [isLoadingTeams, setIsLoadingTeams] = useState(false);
   const [userRole, setUserRole] = useState();
+  const [teamsUsers, setTeamsUsers] = useState(leaderBoardData);
 
   useEffect(() => {
     const fetchInitial = async () => {
       const url = ENDPOINTS.USER_PROFILE(displayUserId);
       try {
         const response = await axios.get(url);
-
         setTeams(response.data.teams);
         setUserRole(response.data.role);
       } catch (error) {
@@ -101,32 +101,49 @@ function LeaderBoard({
     fetchInitial();
   }, []);
 
-  const handleToggleButtonClick = () => {
-    if (isLoadingTeams) {
-      toast.warning('Please wait while the teams are loading.');
-    } else if (usersSelectedTeam.length === 0) {
-      toast.error(`You have not selected a team or the selected team does not have any members.`);
-    } else {
-      setToggleButtonText(prevText => (prevText === 'View All' ? 'My Team' : 'View All'));
+  useEffect(() => {
+    if (!isEqual(leaderBoardData, teamsUsers)) {
+      setTeamsUsers(leaderBoardData);
     }
-  };
+  }, [leaderBoardData]);
 
   const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
 
   const renderTeamsList = async team => {
-    try {
+    if (!team) {
       setIsLoadingTeams(true);
-      const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
-      setIsLoadingTeams(false);
 
-      const teamName = `${team.teamName.substring(0, 30)}...`;
-      setSelectedTeamName(team.teamName.length >= 30 ? teamName : team.teamName);
-      const idUsers = response.data.map(item => item._id);
-      const usersTaks = leaderBoardData.filter(item => idUsers.includes(item.personId));
-      setUsersSelectedTeam(usersTaks);
-    } catch (error) {
-      toast.error('Error fetching team members:', error);
-      setIsLoadingTeams(false);
+      setTimeout(() => {
+        setIsLoadingTeams(false);
+        setTeamsUsers(leaderBoardData);
+      }, 1000);
+    } else {
+      try {
+        setIsLoadingTeams(true);
+        const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
+
+        const teamName = `${team.teamName.substring(0, 30)}...`;
+        setSelectedTeamName(team.teamName.length >= 30 ? teamName : team.teamName);
+        const idUsers = response.data.map(item => item._id);
+        const usersTaks = leaderBoardData.filter(item => idUsers.includes(item.personId));
+        setTeamsUsers(usersTaks);
+        setIsLoadingTeams(false);
+      } catch (error) {
+        toast.error('Error fetching team members:', error);
+        setIsLoadingTeams(false);
+      }
+    }
+  };
+
+  const handleToggleButtonClick = () => {
+    if (isLoadingTeams) {
+      toast.warning('Please wait while the teams are loading.');
+    } else if (!usersSelectedTeam) {
+      renderTeamsList(usersSelectedTeam);
+    } else if (usersSelectedTeam.length === 0) {
+      toast.error(`You have not selected a team or the selected team does not have any members.`);
+    } else {
+      renderTeamsList(usersSelectedTeam);
     }
   };
 
@@ -194,6 +211,17 @@ function LeaderBoard({
     showTimeOffRequestModal(request);
   };
 
+  const TeamSelected = team => {
+    if (team) {
+      const teamName = `${team.teamName.substring(0, 15)}...`;
+      setSelectedTeamName(team.teamName.length >= 15 ? teamName : team.teamName);
+      setUsersSelectedTeam(team);
+    } else {
+      setSelectedTeamName('View All');
+      setUsersSelectedTeam(null);
+    }
+  };
+
   return (
     <div>
       <div>
@@ -220,7 +248,7 @@ function LeaderBoard({
           </div>
         </h3>
 
-        {userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner' ? (
+        {userRole === 'Administrator' || userRole === 'Owner' ? (
           <section className="d-flex flex-row flex-wrap mb-3">
             <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className=" mr-3">
               <DropdownToggle caret>
@@ -234,11 +262,16 @@ function LeaderBoard({
                     Please, create a team to use the filter.
                   </DropdownItem>
                 ) : (
-                  teams.map(team => (
-                    <DropdownItem key={team._id} onClick={() => renderTeamsList(team)}>
-                      {team.teamName}
-                    </DropdownItem>
-                  ))
+                  /* eslint-disable */
+                  <>
+                    <DropdownItem onClick={() => TeamSelected(null)}>{'View All'}</DropdownItem>
+                    {teams.map(team => (
+                      <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
+                        {team.teamName}
+                      </DropdownItem>
+                    ))}
+                  </>
+                  /* eslint-disable */
                 )}
               </DropdownMenu>
             </Dropdown>
@@ -249,7 +282,7 @@ function LeaderBoard({
               disabled={teams.length === 0}
               boxstyle={boxStyle}
             >
-              {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
+              {isLoadingTeams ? <Spinner animation="border" size="sm" /> : 'My Team'}
             </Button>
           </section>
         ) : null}
@@ -270,302 +303,82 @@ function LeaderBoard({
         </Alert>
       )}
 
-      {toggleButtonText === 'View All' ? (
-        <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
-          <Table className="leaderboard table-fixed">
-            <thead>
-              <tr>
-                <th>Status</th>
-                <th>
-                  <div className="d-flex align-items-center">
-                    <span className="mr-2">Name</span>
-                    <EditableInfoModal
-                      areaName="Leaderboard"
-                      areaTitle="Team Members Navigation"
-                      role={loggedInUser.role}
-                      fontSize={18}
-                      isPermissionPage
-                      className="p-2" // Add Bootstrap padding class to the EditableInfoModal
-                    />
-                  </div>
-                </th>
-                <th>Time Off</th>
-                <th>
-                  <span className="d-sm-none">Tan. Time</span>
-                  <span className="d-none d-sm-block">Tangible Time</span>
-                </th>
-                <th>Progress</th>
-
-                <th style={{ textAlign: 'right' }}>
-                  <div style={{ display: 'flex', alignItems: 'center' }}>
-                    <div style={{ textAlign: 'left' }}>
-                      <span className="d-sm-none">Tot. Time</span>
-                      <span className="d-none d-sm-inline-block" title={mouseoverTextValue}>
-                        Total Time{' '}
-                      </span>
-                    </div>
-                    {isOwner && (
-                      <MouseoverTextTotalTimeEditButton onUpdate={handleMouseoverTextUpdate} />
-                    )}
-                  </div>
-                </th>
-              </tr>
-            </thead>
-            <tbody className="my-custome-scrollbar">
-              <tr>
-                <td />
-                <th scope="row" className="leaderboard-totals-container">
-                  <span>{organizationData.name}</span>
-                  {viewZeroHouraMembers(loggedInUser.role) && (
-                    <span className="leaderboard-totals-title">
-                      0 hrs Totals: {individualsWithZeroHours.length} Members
-                    </span>
-                  )}
-                </th>
-                <td className="align-middle" />
-                <td className="align-middle">
-                  <span title="Tangible time">{organizationData.tangibletime || ''}</span>
-                </td>
-                <td className="align-middle">
-                  <Progress
-                    title={`TangibleEffort: ${organizationData.tangibletime} hours`}
-                    value={organizationData.barprogress}
-                    color={organizationData.barcolor}
+      <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
+        <Table className="leaderboard table-fixed">
+          <thead>
+            <tr>
+              <th>Status</th>
+              <th>
+                <div className="d-flex align-items-center">
+                  <span className="mr-2">Name</span>
+                  <EditableInfoModal
+                    areaName="Leaderboard"
+                    areaTitle="Team Members Navigation"
+                    role={loggedInUser.role}
+                    fontSize={18}
+                    isPermissionPage
+                    className="p-2" // Add Bootstrap padding class to the EditableInfoModal
                   />
-                </td>
-                <td className="align-middle">
-                  <span title="Tangible + Intangible time = Total time">
-                    {organizationData.totaltime} of {organizationData.weeklycommittedHours}
-                  </span>
-                </td>
-              </tr>
-              {leaderBoardData.map(item => (
-                <tr key={item.personId}>
-                  <td className="align-middle">
-                    <div>
-                      <Modal isOpen={isDashboardOpen === item.personId} toggle={dashboardToggle}>
-                        <ModalHeader toggle={dashboardToggle}>
-                          Jump to personal Dashboard
-                        </ModalHeader>
-                        <ModalBody>
-                          <p>Are you sure you wish to view this {item.name} dashboard?</p>
-                        </ModalBody>
-                        <ModalFooter>
-                          <Button variant="primary" onClick={() => showDashboard(item)}>
-                            Ok
-                          </Button>{' '}
-                          <Button variant="secondary" onClick={dashboardToggle}>
-                            Cancel
-                          </Button>
-                        </ModalFooter>
-                      </Modal>
-                    </div>
-                    <div
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
-                      }}
-                    >
-                      {/* <Link to={`/dashboard/${item.personId}`}> */}
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => {
-                          dashboardToggle(item);
-                        }}
-                        onKeyDown={e => {
-                          if (e.key === 'Enter') {
-                            dashboardToggle(item);
-                          }
-                        }}
-                      >
-                        {hasLeaderboardPermissions(item.role) &&
-                        showStar(item.tangibletime, item.weeklycommittedHours) ? (
-                          <i
-                            className="fa fa-star"
-                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                            style={{
-                              color: assignStarDotColors(
-                                item.tangibletime,
-                                item.weeklycommittedHours,
-                              ),
-                              fontSize: '20px',
-                              display: 'flex',
-                              alignItems: 'center',
-                              justifyContent: 'center',
-                            }}
-                          />
-                        ) : (
-                          <div
-                            title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                            style={{
-                              backgroundColor:
-                                item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
-                              width: 15,
-                              height: 15,
-                              borderRadius: 7.5,
-                              margin: 'auto',
-                              verticalAlign: 'middle',
-                            }}
-                          />
-                        )}
-                      </div>
-                      {hasSummaryIndicatorPermission && item.hasSummary && (
-                        <div
-                          title="Weekly Summary Submitted"
-                          style={{
-                            color: '#32a518',
-                            cursor: 'default',
-                          }}
-                        >
-                          <strong>✓</strong>
-                        </div>
-                      )}
-                    </div>
-                    {/* </Link> */}
-                  </td>
-                  <th scope="row" className="align-middle">
-                    <Link
-                      to={`/userprofile/${item.personId}`}
-                      title="View Profile"
-                      style={{
-                        color:
-                          currentDate.isSameOrAfter(
-                            moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                          ) &&
-                          currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
-                            ? 'rgba(128, 128, 128, 0.5)'
-                            : undefined,
-                      }}
-                    >
-                      {item.name}
-                      {currentDate.isSameOrAfter(
-                        moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                      ) &&
-                      currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
-                      Math.floor(
-                        moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                          .subtract(1, 'day')
-                          .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
-                      ) > 0 ? (
-                        <sup>
-                          {' '}
-                          +
-                          {Math.floor(
-                            moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
-                              .subtract(1, 'day')
-                              .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
-                          )}
-                        </sup>
-                      ) : null}
-                    </Link>
-                    &nbsp;&nbsp;&nbsp;
-                    {hasVisibilityIconPermission && !item.isVisible && (
-                      <i className="fa fa-eye-slash" title="User is invisible" />
-                    )}
-                  </th>
-                  <td className="align-middle">
-                    {allRequests && allRequests[item.personId]?.length > 0 && (
-                      <div>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            const data = {
-                              requests: [...allRequests[item.personId]],
-                              name: item.name,
-                              leaderboard: true,
-                            };
-                            handleTimeOffModalOpen(data);
-                          }}
-                          style={{ width: '35px', height: 'auto' }}
-                        >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="22"
-                            height="19"
-                            viewBox="0 0 448 512"
-                            className="show-time-off-calender-svg"
-                          >
-                            <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
-                          </svg>
-
-                          <i className="show-time-off-icon">
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="18"
-                              height="18"
-                              viewBox="0 0 512 512"
-                              className="show-time-off-icon-svg"
-                            >
-                              <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
-                            </svg>
-                          </i>
-                        </button>
-                      </div>
-                    )}
-                  </td>
-                  <td className="align-middle" id={`id${item.personId}`}>
-                    <span title="Tangible time">{item.tangibletime}</span>
-                  </td>
-                  <td className="align-middle">
-                    <Link
-                      to={`/timelog/${item.personId}`}
-                      title={`TangibleEffort: ${item.tangibletime} hours`}
-                    >
-                      <Progress value={item.barprogress} color={item.barcolor} />
-                    </Link>
-                  </td>
-                  <td className="align-middle">
-                    <span
-                      title={mouseoverTextValue}
-                      id="Total time"
-                      className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
-                    >
-                      {item.totaltime}
+                </div>
+              </th>
+              <th>Time Off</th>
+              <th>
+                <span className="d-sm-none">Tan. Time</span>
+                <span className="d-none d-sm-block">Tangible Time</span>
+              </th>
+              <th>Progress</th>
+
+              <th style={{ textAlign: 'right' }}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <div style={{ textAlign: 'left' }}>
+                    <span className="d-sm-none">Tot. Time</span>
+                    <span className="d-none d-sm-inline-block" title={mouseoverTextValue}>
+                      Total Time{' '}
                     </span>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </Table>
-        </div>
-      ) : (
-        <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
-          <Table className="p-2">
-            <thead>
-              <tr>
-                <th className="align-middle">Status</th>
-                <th className="align-middle">
-                  <span style={{ display: 'flex', gap: 5 }}>
-                    Name
-                    <EditableInfoModal
-                      areaName="Leaderboard"
-                      areaTitle="Team Members Navigation"
-                      role={loggedInUser.role}
-                      fontSize={18}
-                      isPermissionPage
-                      className="p-2" // Add Bootstrap padding class to the EditableInfoModal
-                    />
+                  </div>
+                  {isOwner && (
+                    <MouseoverTextTotalTimeEditButton onUpdate={handleMouseoverTextUpdate} />
+                  )}
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody className="my-custome-scrollbar">
+            <tr>
+              <td />
+              <th scope="row" className="leaderboard-totals-container">
+                <span>{organizationData.name}</span>
+                {viewZeroHouraMembers(loggedInUser.role) && (
+                  <span className="leaderboard-totals-title">
+                    0 hrs Totals: {individualsWithZeroHours.length} Members
                   </span>
-                </th>
-
-                <th className="align-middle">Tangible Time</th>
-                <th className="align-middle">Progress</th>
-                <th className="align-middle">Total Time</th>
-              </tr>
-            </thead>
-            <tbody>
-              {usersSelectedTeam.map(item => {
-                return (
-                  <Fragment key={item.personId}>
+                )}
+              </th>
+              <td className="align-middle" />
+              <td className="align-middle">
+                <span title="Tangible time">{organizationData.tangibletime || ''}</span>
+              </td>
+              <td className="align-middle">
+                <Progress
+                  title={`TangibleEffort: ${organizationData.tangibletime} hours`}
+                  value={organizationData.barprogress}
+                  color={organizationData.barcolor}
+                />
+              </td>
+              <td className="align-middle">
+                <span title="Tangible + Intangible time = Total time">
+                  {organizationData.totaltime} of {organizationData.weeklycommittedHours}
+                </span>
+              </td>
+            </tr>
+            {teamsUsers.map(item => (
+              <tr key={item.personId}>
+                <td className="align-middle">
+                  <div>
                     <Modal isOpen={isDashboardOpen === item.personId} toggle={dashboardToggle}>
                       <ModalHeader toggle={dashboardToggle}>Jump to personal Dashboard</ModalHeader>
                       <ModalBody>
-                        <p>
-                          Are you sure you wish to view this {item.name}
-                          dashboard?
-                        </p>
+                        <p>Are you sure you wish to view this {item.name} dashboard?</p>
                       </ModalBody>
                       <ModalFooter>
                         <Button variant="primary" onClick={() => showDashboard(item)}>
@@ -576,89 +389,177 @@ function LeaderBoard({
                         </Button>
                       </ModalFooter>
                     </Modal>
-                    <tr>
-                      <th className="align-middle">
-                        <div
-                          role="button"
-                          tabIndex={0}
-                          onClick={() => {
-                            dashboardToggle(item);
+                  </div>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: hasSummaryIndicatorPermission ? 'space-between' : 'center',
+                    }}
+                  >
+                    {/* <Link to={`/dashboard/${item.personId}`}> */}
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        dashboardToggle(item);
+                      }}
+                      onKeyDown={e => {
+                        if (e.key === 'Enter') {
+                          dashboardToggle(item);
+                        }
+                      }}
+                    >
+                      {hasLeaderboardPermissions(item.role) &&
+                      showStar(item.tangibletime, item.weeklycommittedHours) ? (
+                        <i
+                          className="fa fa-star"
+                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                          style={{
+                            color: assignStarDotColors(
+                              item.tangibletime,
+                              item.weeklycommittedHours,
+                            ),
+                            fontSize: '20px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
                           }}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter') {
-                              dashboardToggle(item);
-                            }
+                        />
+                      ) : (
+                        <div
+                          title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
+                          style={{
+                            backgroundColor:
+                              item.tangibletime >= item.weeklycommittedHours ? '#32CD32' : 'red',
+                            width: 15,
+                            height: 15,
+                            borderRadius: 7.5,
+                            margin: 'auto',
+                            verticalAlign: 'middle',
                           }}
+                        />
+                      )}
+                    </div>
+                    {hasSummaryIndicatorPermission && item.hasSummary && (
+                      <div
+                        title="Weekly Summary Submitted"
+                        style={{
+                          color: '#32a518',
+                          cursor: 'default',
+                        }}
+                      >
+                        <strong>✓</strong>
+                      </div>
+                    )}
+                  </div>
+                  {/* </Link> */}
+                </td>
+                <th scope="row" className="align-middle">
+                  <Link
+                    to={`/userprofile/${item.personId}`}
+                    title="View Profile"
+                    style={{
+                      color:
+                        currentDate.isSameOrAfter(
+                          moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                        ) &&
+                        currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
+                          ? 'rgba(128, 128, 128, 0.5)'
+                          : undefined,
+                    }}
+                  >
+                    {item.name}
+                    {currentDate.isSameOrAfter(
+                      moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                    ) &&
+                    currentDate.isBefore(moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')) &&
+                    Math.floor(
+                      moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                        .subtract(1, 'day')
+                        .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                    ) > 0 ? (
+                      <sup>
+                        {' '}
+                        +
+                        {Math.floor(
+                          moment(item.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
+                            .subtract(1, 'day')
+                            .diff(moment(item.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'), 'weeks'),
+                        )}
+                      </sup>
+                    ) : null}
+                  </Link>
+                  &nbsp;&nbsp;&nbsp;
+                  {hasVisibilityIconPermission && !item.isVisible && (
+                    <i className="fa fa-eye-slash" title="User is invisible" />
+                  )}
+                </th>
+                <td className="align-middle">
+                  {allRequests && allRequests[item.personId]?.length > 0 && (
+                    <div>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          const data = {
+                            requests: [...allRequests[item.personId]],
+                            name: item.name,
+                            leaderboard: true,
+                          };
+                          handleTimeOffModalOpen(data);
+                        }}
+                        style={{ width: '35px', height: 'auto' }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="22"
+                          height="19"
+                          viewBox="0 0 448 512"
+                          className="show-time-off-calender-svg"
                         >
-                          {hasLeaderboardPermissions(item.role) &&
-                          showStar(item.tangibletime, item.weeklycommittedHours) ? (
-                            <i
-                              className="fa fa-star"
-                              title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                              style={{
-                                color: assignStarDotColors(
-                                  item.tangibletime,
-                                  item.weeklycommittedHours,
-                                ),
-                                fontSize: '20px',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                              }}
-                            />
-                          ) : (
-                            <div
-                              title={`Weekly Committed: ${item.weeklycommittedHours} hours`}
-                              style={{
-                                backgroundColor:
-                                  item.tangibletime >= item.weeklycommittedHours
-                                    ? '#32CD32'
-                                    : 'red',
-                                width: 15,
-                                height: 15,
-                                borderRadius: 7.5,
-                                margin: 'auto',
-                                verticalAlign: 'middle',
-                              }}
-                            />
-                          )}
-                        </div>
-                      </th>
-
-                      <th scope="row" className="align-middle">
-                        <Link to={`/userprofile/${item.personId}`}>{item.name}</Link>
-                      </th>
-
-                      <th className="align-middle">
-                        <p>{item.tangibletime}</p>
-                      </th>
-
-                      <th className="align-middle">
-                        <Link
-                          to={`/timelog/${item.personId}`}
-                          title={`TangibleEffort: ${item.tangibletime} hours`}
-                        >
-                          <Progress value={item.barprogress} color={item.barcolor} />
-                        </Link>
-                      </th>
+                          <path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z" />
+                        </svg>
 
-                      <th className="align-middle">
-                        <span
-                          title={mouseoverTextValue}
-                          id="Total time"
-                          className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
-                        >
-                          <p>{item.totaltime}</p>
-                        </span>
-                      </th>
-                    </tr>
-                  </Fragment>
-                );
-              })}
-            </tbody>
-          </Table>
-        </div>
-      )}
+                        <i className="show-time-off-icon">
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="18"
+                            height="18"
+                            viewBox="0 0 512 512"
+                            className="show-time-off-icon-svg"
+                          >
+                            <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
+                          </svg>
+                        </i>
+                      </button>
+                    </div>
+                  )}
+                </td>
+                <td className="align-middle" id={`id${item.personId}`}>
+                  <span title="Tangible time">{item.tangibletime}</span>
+                </td>
+                <td className="align-middle">
+                  <Link
+                    to={`/timelog/${item.personId}`}
+                    title={`TangibleEffort: ${item.tangibletime} hours`}
+                  >
+                    <Progress value={item.barprogress} color={item.barcolor} />
+                  </Link>
+                </td>
+                <td className="align-middle">
+                  <span
+                    title={mouseoverTextValue}
+                    id="Total time"
+                    className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
+                  >
+                    {item.totaltime}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      </div>
     </div>
   );
 }
diff --git a/src/components/TeamMemberTasks/MyTeamMember.jsx b/src/components/TeamMemberTasks/MyTeamMember.jsx
deleted file mode 100644
index cbb1f4478e..0000000000
--- a/src/components/TeamMemberTasks/MyTeamMember.jsx
+++ /dev/null
@@ -1,334 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faBell,
-  faCircle,
-  faCheck,
-  faTimes,
-  faExpandArrowsAlt,
-  faCompressArrowsAlt,
-} from '@fortawesome/free-solid-svg-icons';
-import CopyToClipboard from 'components/common/Clipboard/CopyToClipboard';
-import { Table, Progress } from 'reactstrap';
-
-import { Link } from 'react-router-dom';
-import hasPermission from 'utils/permissions';
-import './style.css';
-import { boxStyle } from 'styles';
-
-import Warning from 'components/Warnings/Warnings';
-import { useDispatch } from 'react-redux';
-import moment from 'moment-timezone';
-
-import ReviewButton from './ReviewButton';
-import { getProgressColor, getProgressValue } from '../../utils/effortColors';
-import TeamMemberTaskIconsInfo from './TeamMemberTaskIconsInfo';
-import { showTimeOffRequestModal } from '../../actions/timeOffRequestAction';
-import GoogleDocIcon from '../common/GoogleDocIcon';
-
-const NUM_TASKS_SHOW_TRUNCATE = 6;
-
-export const MyTeamMember = ({
-  user,
-  handleMarkAsDoneModal,
-  handleRemoveFromTaskModal,
-  handleOpenTaskNotificationModal,
-  handleTaskModalOption,
-  userRole,
-  userId,
-  updateTaskStatus,
-  showWhoHasTimeOff,
-  onTimeOff,
-  goingOnTimeOff,
-}) => {
-  const ref = useRef(null);
-  const currentDate = moment.tz('America/Los_Angeles').startOf('day');
-  const dispatch = useDispatch();
-
-  const totalHoursRemaining = user.tasks.reduce((total, task) => {
-    task.hoursLogged = task.hoursLogged || 0;
-    task.estimatedHours = task.estimatedHours || 0;
-    if (task.status !== 'Complete' && task.isAssigned !== 'false') {
-      return total + Math.max(0, task.estimatedHours - task.hoursLogged);
-    }
-    return total;
-  }, 0);
-
-  const activeTasks = user.tasks.filter(
-    task =>
-      !task.resources?.some(
-        resource => resource.userID === user.personId && resource.completedTask,
-      ),
-  );
-
-  const canTruncate = activeTasks.length > NUM_TASKS_SHOW_TRUNCATE;
-  const [isTruncated, setIsTruncated] = useState(canTruncate);
-  const [expandTimeOffIndicator, setExpandTimeOffIndicator] = useState({});
-
-  const thisWeekHours = user.totaltangibletime_hrs;
-
-  // these need to be changed to actual permissions...
-  const rolesAllowedToResolveTasks = ['Administrator', 'Owner'];
-  const rolesAllowedToSeeDeadlineCount = ['Manager', 'Mentor', 'Administrator', 'Owner'];
-  const isAllowedToResolveTasks =
-    rolesAllowedToResolveTasks.includes(userRole) || dispatch(hasPermission('resolveTask'));
-  const isAllowedToSeeDeadlineCount = rolesAllowedToSeeDeadlineCount.includes(userRole);
-  // ^^^
-
-  const canGetWeeklySummaries = dispatch(hasPermission('getWeeklySummaries'));
-  const canUpdateTask = dispatch(hasPermission('updateTask'));
-  const numTasksToShow = isTruncated ? NUM_TASKS_SHOW_TRUNCATE : activeTasks.length;
-
-  const handleTruncateTasksButtonClick = () => {
-    if (!isTruncated) {
-      ref.current?.scrollIntoView({ behavior: 'smooth' });
-      setTimeout(() => {
-        setIsTruncated(!isTruncated);
-      }, 0);
-    } else {
-      setIsTruncated(!isTruncated);
-    }
-  };
-
-  const openDetailModal = request => {
-    dispatch(showTimeOffRequestModal(request));
-  };
-
-  const userGoogleDocLink = user.adminLinks?.reduce((targetLink, currentElement) => {
-    if (currentElement.Name === 'Google Doc') {
-      targetLink = currentElement.Link;
-    }
-    return targetLink;
-  }, undefined);
-
-  return (
-    <>
-      <tr ref={ref} className="table-row" key={user.personId}>
-        {/* green if member has met committed hours for the week, red if not */}
-        <td colSpan={1}>
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <div className="committed-hours-circle">
-              <FontAwesomeIcon
-                style={{
-                  color: user.totaltangibletime_hrs >= user.weeklycommittedHours ? 'green' : 'red',
-                }}
-                icon={faCircle}
-                data-testid="icon"
-              />
-            </div>
-            <Link to={`/timelog/${user.personId}`}>
-              <i
-                className="fa fa-clock-o"
-                aria-hidden="true"
-                style={{ fontSize: 24, cursor: 'pointer', color: 'black' }}
-                title="Click to see user's timelog"
-              />
-            </Link>
-          </div>
-        </td>
-        <td colSpan={2}>
-          <Table borderless className="team-member-tasks-subtable">
-            <tbody>
-              <tr>
-                <td className="team-member-tasks-user-name">
-                  <Link
-                    to={`/userprofile/${user.personId}`}
-                    style={{
-                      color:
-                        currentDate.isSameOrAfter(
-                          moment(user.timeOffFrom, 'YYYY-MM-DDTHH:mm:ss.SSSZ'),
-                        ) &&
-                        currentDate.isBefore(moment(user.timeOffTill, 'YYYY-MM-DDTHH:mm:ss.SSSZ'))
-                          ? 'rgba(128, 128, 128, 0.5)'
-                          : undefined,
-                    }}
-                  >{`${user.name}`}</Link>
-                  {canGetWeeklySummaries && <GoogleDocIcon link={userGoogleDocLink} />}
-
-                  <Warning
-                    username={user.name}
-                    userName={user}
-                    userId={userId}
-                    user={user}
-                    userRole={userRole}
-                    personId={user.personId}
-                  />
-                </td>
-                <td data-label="Time" className="team-clocks">
-                  <u>{user.weeklycommittedHours ? user.weeklycommittedHours : 0}</u> /
-                  <font color="green"> {thisWeekHours ? thisWeekHours.toFixed(1) : 0}</font> /
-                  <font color="red"> {totalHoursRemaining.toFixed(1)}</font>
-                </td>
-              </tr>
-            </tbody>
-          </Table>
-        </td>
-        <td colSpan={3}>
-          <Table borderless className="team-member-tasks-subtable">
-            <tbody>
-              {user.tasks &&
-                activeTasks.slice(0, numTasksToShow).map((task, index) => {
-                  return (
-                    <tr key={`${task._id}${index}`} className="task-break">
-                      <td data-label="Task(s)" className="task-align">
-                        <div className="team-member-tasks-content">
-                          <Link
-                            to={task.projectId ? `/wbs/tasks/${task._id}` : '/'}
-                            data-testid={`${task.taskName}`}
-                          >
-                            <span>{`${task.num} ${task.taskName}`} </span>
-                          </Link>
-                          <CopyToClipboard writeText={task.taskName} message="Task Copied!" />
-                        </div>
-                        <div className="team-member-tasks-icons">
-                          {task.taskNotifications.length > 0 &&
-                          task.taskNotifications.some(
-                            notification =>
-                              notification.hasOwnProperty('userId') &&
-                              notification.userId === user.personId,
-                          ) ? (
-                            <>
-                              <FontAwesomeIcon
-                                className="team-member-tasks-bell"
-                                title="Task Info Changes"
-                                icon={faBell}
-                                onClick={() => {
-                                  const taskNotificationId = task.taskNotifications.filter(
-                                    taskNotification => {
-                                      if (taskNotification.userId === user.personId) {
-                                        return taskNotification;
-                                      }
-                                    },
-                                  );
-                                  handleOpenTaskNotificationModal(
-                                    user.personId,
-                                    task,
-                                    taskNotificationId,
-                                  );
-                                }}
-                                data-taskid={`task-info-icon-${task.taskName}`}
-                              />
-                            </>
-                          ) : null}
-                          {isAllowedToResolveTasks && (
-                            <FontAwesomeIcon
-                              className="team-member-tasks-done"
-                              icon={faCheck}
-                              title="Mark as Done"
-                              onClick={() => {
-                                handleMarkAsDoneModal(user.personId, task);
-                                handleTaskModalOption('Checkmark');
-                              }}
-                              data-testid={`tick-${task.taskName}`}
-                            />
-                          )}
-                          {canUpdateTask && (
-                            <FontAwesomeIcon
-                              className="team-member-task-remove"
-                              icon={faTimes}
-                              title="Remove User from Task"
-                              onClick={() => {
-                                handleRemoveFromTaskModal(user.personId, task);
-                                handleTaskModalOption('XMark');
-                              }}
-                              data-testid={`Xmark-${task.taskName}`}
-                            />
-                          )}
-                          <TeamMemberTaskIconsInfo />
-                        </div>
-                        <div>
-                          <ReviewButton
-                            user={user}
-                            userId={userId}
-                            task={task}
-                            updateTask={updateTaskStatus}
-                            style={boxStyle}
-                          />
-                        </div>
-                      </td>
-                      {task.hoursLogged != null && task.estimatedHours != null && (
-                        <td data-label="Progress" className="team-task-progress">
-                          {isAllowedToSeeDeadlineCount && (
-                            <span
-                              className="deadlineCount"
-                              title="Deadline Follow-up Count"
-                              data-testid={`deadline-${task.taskName}`}
-                            >
-                              {task.deadlineCount === undefined ? 0 : task.deadlineCount}
-                            </span>
-                          )}
-                          <div>
-                            <span data-testid={`times-${task.taskName}`}>
-                              {`${parseFloat(task.hoursLogged.toFixed(2))} of ${parseFloat(
-                                task.estimatedHours.toFixed(2),
-                              )}`}
-                            </span>
-                            <Progress
-                              color={getProgressColor(task.hoursLogged, task.estimatedHours, true)}
-                              value={getProgressValue(task.hoursLogged, task.estimatedHours)}
-                            />
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  );
-                })}
-              {canTruncate && (
-                <tr key="truncate-button-row" className="task-break">
-                  <td className="task-align">
-                    <button type="button" onClick={handleTruncateTasksButtonClick}>
-                      {isTruncated ? `Show All (${activeTasks.length}) Tasks` : 'Truncate Tasks'}
-                    </button>
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </Table>
-          {showWhoHasTimeOff &&
-            (onTimeOff || goingOnTimeOff) &&
-            (expandTimeOffIndicator[user.personId] ? (
-              <button
-                type="button"
-                className="expand-time-off-detail-button"
-                onClick={() => {
-                  setExpandTimeOffIndicator(prev => ({ ...prev, [user.personId]: false }));
-                }}
-              >
-                <FontAwesomeIcon icon={faExpandArrowsAlt} data-testid="icon" />
-              </button>
-            ) : (
-              <div className="taking-time-off-content-div">
-                <button
-                  className="compress-time-off-detail-button"
-                  onClick={() => {
-                    setExpandTimeOffIndicator(prev => ({ ...prev, [user.personId]: true }));
-                  }}
-                >
-                  <FontAwesomeIcon icon={faCompressArrowsAlt} data-testid="icon" />
-                </button>
-
-                <span className="taking-time-off-content-text">
-                  {onTimeOff
-                    ? `${user.name} Is Not Available this Week`
-                    : `${user.name} Is Not Available Next Week`}
-                </span>
-                <button
-                  type="button"
-                  className="taking-time-off-content-btn"
-                  onClick={() => {
-                    const request = onTimeOff
-                      ? { ...onTimeOff, onVacation: true, name: user.name }
-                      : { ...goingOnTimeOff, onVacation: false, name: user.name };
-
-                    openDetailModal(request);
-                  }}
-                >
-                  Details ?
-                </button>
-              </div>
-            ))}
-        </td>
-      </tr>
-    </>
-  );
-};
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index b10a6e6c92..b9036438b0 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -27,7 +27,6 @@ import { hrsFilterBtnColorMap } from 'constants/colors';
 import { toast } from 'react-toastify';
 // import InfiniteScroll from 'react-infinite-scroller';
 import { getAllTimeOffRequests } from '../../actions/timeOffRequestAction';
-import { MyTeamMember } from './MyTeamMember';
 import { ENDPOINTS } from 'utils/URL';
 
 const TeamMemberTasks = React.memo(props => {
@@ -56,17 +55,18 @@ const TeamMemberTasks = React.memo(props => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
   const [selectedTeamName, setSelectedTeamName] = useState('');
-  const [toggleButtonText, setToggleButtonText] = useState('View All');
   const [userRole, setUserRole] = useState(displayUser.role);
   const [loading, setLoading] = useState(false);
 
   const handleToggleButtonClick = () => {
     if (loading) {
       toast.warning('Please wait while the teams are loading.');
+    } else if (!usersSelectedTeam) {
+      renderTeamsList(usersSelectedTeam);
     } else if (usersSelectedTeam.length === 0) {
       toast.error(`You have not selected a team or the selected team does not have any members.`);
     } else {
-      setToggleButtonText(prevText => (prevText === 'View All' ? 'My Team' : 'View All'));
+      renderTeamsList(usersSelectedTeam);
     }
   };
 
@@ -217,7 +217,9 @@ const TeamMemberTasks = React.memo(props => {
   const renderTeamsList = async team => {
     if (!team) {
       if (usersWithTasks.length > 0) {
+        setLoading(true);
         //sort all users by their name
+
         usersWithTasks.sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1));
         //find currentUser
         const currentUserIndex = usersWithTasks.findIndex(
@@ -228,20 +230,23 @@ const TeamMemberTasks = React.memo(props => {
           //conditional variable for moving current user up front.
           usersWithTasks.unshift(...usersWithTasks.splice(currentUserIndex, 1));
         }
-        setTeamList([...usersWithTasks]);
+
+        setTimeout(() => {
+          setLoading(false);
+          setTeamList([...usersWithTasks]);
+        }, 3000);
       }
     } else {
       try {
         setLoading(true);
         const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
-        setLoading(false);
-        const teamName = team.teamName.substring(0, 15) + '...';
-        setSelectedTeamName(team.teamName.length >= 15 ? teamName : team.teamName);
         const idUsers = response.data.map(item => item._id);
         const usersTaks = usersWithTasks.filter(item => idUsers.includes(item.personId));
-        setUsersSelectedTeam(usersTaks);
+        setTeamList(usersTaks);
+        setLoading(false);
       } catch (error) {
         toast.error('Error fetching team members:', error);
+        setLoading(false);
       }
     }
   };
@@ -275,6 +280,17 @@ const TeamMemberTasks = React.memo(props => {
     setShowWhoHasTimeOff(prev => !prev);
   };
 
+  const TeamSelected = team => {
+    if (team) {
+      const teamName = `${team.teamName.substring(0, 15)}...`;
+      setSelectedTeamName(team.teamName.length >= 15 ? teamName : team.teamName);
+      setUsersSelectedTeam(team);
+    } else {
+      setSelectedTeamName('View All');
+      setUsersSelectedTeam(null);
+    }
+  };
+
   return (
     <div className="container team-member-tasks container-fluid">
       <header className="header-box">
@@ -282,17 +298,15 @@ const TeamMemberTasks = React.memo(props => {
           <h1>Team Member Tasks</h1>
 
           {/* Dropdown for selecting a team */}
-          {isLoading &&
-          (userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner') ? (
+          {isLoading && (userRole === 'Administrator' || userRole === 'Owner') ? (
             <>
               <span className="d-flex justify-content-start align-items-center">
                 {' '}
                 Loading teams: &nbsp;
-                <Spinner color="primary">Loading...</Spinner>
+                <Spinner color="primary"></Spinner>
               </span>
             </>
-          ) : !isLoading &&
-            (userRole === 'Administrator' || userRole === 'Core Team' || userRole === 'Owner') ? (
+          ) : !isLoading && (userRole === 'Administrator' || userRole === 'Owner') ? (
             <section className="d-flex flex-row mr-xl-2">
               <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className="mb-3">
                 <DropdownToggle caret>{selectedTeamName || 'Select a Team'}</DropdownToggle>
@@ -304,11 +318,14 @@ const TeamMemberTasks = React.memo(props => {
                       {'Please, create a team to use the filter.'}
                     </DropdownItem>
                   ) : (
-                    teams.map(team => (
-                      <DropdownItem key={team._id} onClick={() => renderTeamsList(team)}>
-                        {team.teamName}
-                      </DropdownItem>
-                    ))
+                    <>
+                      <DropdownItem onClick={() => TeamSelected(null)}>{'View All'}</DropdownItem>
+                      {teams.map(team => (
+                        <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
+                          {team.teamName}
+                        </DropdownItem>
+                      ))}
+                    </>
                   )}
                 </DropdownMenu>
               </Dropdown>
@@ -321,13 +338,10 @@ const TeamMemberTasks = React.memo(props => {
                 disabled={teams.length === 0}
                 boxstyle={boxStyle}
               >
-                {toggleButtonText === 'View All' ? 'My Team' : 'View All'}
+                {loading ? <Spinner animation="border" size="sm" /> : 'My Team'}
               </Button>
             </section>
-          ) : !isLoading &&
-            userRole !== 'Administrator' &&
-            userRole !== 'Core Team' &&
-            userRole !== 'Owner' ? null : null}
+          ) : !isLoading && userRole !== 'Administrator' && userRole !== 'Owner' ? null : null}
         </section>
 
         {finishLoading ? (
@@ -335,7 +349,7 @@ const TeamMemberTasks = React.memo(props => {
             <div className="mb-2">
               <button
                 type="button"
-                className={` mr-2 show-time-off-btn ${
+                className={`mr-2 show-time-off-btn ${
                   showWhoHasTimeOff ? 'show-time-off-btn-selected' : ''
                 }`}
                 onClick={handleshowWhoHasTimeOff}
@@ -345,7 +359,7 @@ const TeamMemberTasks = React.memo(props => {
                   width="22"
                   height="19"
                   viewBox="0 0 448 512"
-                  className={` mr-2 show-time-off-calender-svg ${
+                  className={`show-time-off-calender-svg ${
                     showWhoHasTimeOff ? 'show-time-off-calender-svg-selected' : ''
                   }`}
                 >
@@ -473,123 +487,64 @@ const TeamMemberTasks = React.memo(props => {
               <SkeletonLoading template="TeamMemberTasks" />
             ) : (
               <>
-                {toggleButtonText === 'View All'
-                  ? teamList.map(user => {
-                      if (!isTimeFilterActive) {
-                        return (
-                          <TeamMemberTask
-                            user={user}
-                            userPermission={props?.auth?.user?.permissions?.frontPermissions?.includes(
-                              'putReviewStatus',
-                            )}
-                            key={user.personId}
-                            handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
-                            handleMarkAsDoneModal={handleMarkAsDoneModal}
-                            handleRemoveFromTaskModal={handleRemoveFromTaskModal}
-                            handleTaskModalOption={handleTaskModalOption}
-                            userRole={displayUser.role}
-                            updateTaskStatus={updateTaskStatus}
-                            userId={displayUser._id}
-                            showWhoHasTimeOff={showWhoHasTimeOff}
-                            onTimeOff={userOnTimeOff[user.personId]}
-                            goingOnTimeOff={userGoingOnTimeOff[user.personId]}
-                          />
-                        );
-                      } else {
-                        return (
-                          <Fragment key={user.personId}>
-                            <TeamMemberTask
-                              user={user}
-                              key={user.personId}
-                              handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
-                              handleMarkAsDoneModal={handleMarkAsDoneModal}
-                              handleRemoveFromTaskModal={handleRemoveFromTaskModal}
-                              handleTaskModalOption={handleTaskModalOption}
-                              showWhoHasTimeOff={showWhoHasTimeOff}
-                              onTimeOff={userOnTimeOff[user.personId]}
-                              goingOnTimeOff={userGoingOnTimeOff[user.personId]}
-                              userRole={displayUser.role}
-                              updateTaskStatus={updateTaskStatus}
-                              userId={displayUser._id}
-                            />
-                            {timeEntriesList.length > 0 &&
-                              timeEntriesList
-                                .filter(timeEntry => timeEntry.personId === user.personId)
-                                .map(timeEntry => (
-                                  <tr className="table-row" key={timeEntry._id}>
-                                    <td colSpan={6} style={{ padding: 0 }}>
-                                      <TimeEntry
-                                        from="TaskTab"
-                                        data={timeEntry}
-                                        displayYear
-                                        key={timeEntry._id}
-                                        timeEntryUserProfile={timeEntry.userProfile}
-                                      />
-                                    </td>
-                                  </tr>
-                                ))}
-                          </Fragment>
-                        );
-                      }
-                    })
-                  : usersSelectedTeam.map(user => {
-                      if (!isTimeFilterActive) {
-                        return (
-                          <MyTeamMember
-                            user={user}
-                            userPermission={props?.auth?.user?.permissions?.frontPermissions?.includes(
-                              'putReviewStatus',
-                            )}
-                            key={user.personId}
-                            handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
-                            handleMarkAsDoneModal={handleMarkAsDoneModal}
-                            handleRemoveFromTaskModal={handleRemoveFromTaskModal}
-                            handleTaskModalOption={handleTaskModalOption}
-                            userRole={displayUser.role}
-                            updateTaskStatus={updateTaskStatus}
-                            userId={displayUser._id}
-                            showWhoHasTimeOff={showWhoHasTimeOff}
-                            onTimeOff={userOnTimeOff[user.personId]}
-                            goingOnTimeOff={userGoingOnTimeOff[user.personId]}
-                          />
-                        );
-                      } else {
-                        return (
-                          <Fragment key={user.personId}>
-                            <MyTeamMember
-                              user={user}
-                              key={user.personId}
-                              handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
-                              handleMarkAsDoneModal={handleMarkAsDoneModal}
-                              handleRemoveFromTaskModal={handleRemoveFromTaskModal}
-                              handleTaskModalOption={handleTaskModalOption}
-                              showWhoHasTimeOff={showWhoHasTimeOff}
-                              onTimeOff={userOnTimeOff[user.personId]}
-                              goingOnTimeOff={userGoingOnTimeOff[user.personId]}
-                              userRole={displayUser.role}
-                              updateTaskStatus={updateTaskStatus}
-                              userId={displayUser._id}
-                            />
-                            {timeEntriesList.length > 0 &&
-                              timeEntriesList
-                                .filter(timeEntry => timeEntry.personId === user.personId)
-                                .map(timeEntry => (
-                                  <tr className="table-row" key={timeEntry._id}>
-                                    <td colSpan={6} style={{ padding: 0 }}>
-                                      <TimeEntry
-                                        from="TaskTab"
-                                        data={timeEntry}
-                                        displayYear
-                                        key={timeEntry._id}
-                                        timeEntryUserProfile={timeEntry.userProfile}
-                                      />
-                                    </td>
-                                  </tr>
-                                ))}
-                          </Fragment>
-                        );
-                      }
-                    })}
+                {teamList.map(user => {
+                  if (!isTimeFilterActive) {
+                    return (
+                      <TeamMemberTask
+                        user={user}
+                        userPermission={props?.auth?.user?.permissions?.frontPermissions?.includes(
+                          'putReviewStatus',
+                        )}
+                        key={user.personId}
+                        handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
+                        handleMarkAsDoneModal={handleMarkAsDoneModal}
+                        handleRemoveFromTaskModal={handleRemoveFromTaskModal}
+                        handleTaskModalOption={handleTaskModalOption}
+                        userRole={displayUser.role}
+                        updateTaskStatus={updateTaskStatus}
+                        userId={displayUser._id}
+                        showWhoHasTimeOff={showWhoHasTimeOff}
+                        onTimeOff={userOnTimeOff[user.personId]}
+                        goingOnTimeOff={userGoingOnTimeOff[user.personId]}
+                      />
+                    );
+                  } else {
+                    return (
+                      <Fragment key={user.personId}>
+                        <TeamMemberTask
+                          user={user}
+                          key={user.personId}
+                          handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
+                          handleMarkAsDoneModal={handleMarkAsDoneModal}
+                          handleRemoveFromTaskModal={handleRemoveFromTaskModal}
+                          handleTaskModalOption={handleTaskModalOption}
+                          showWhoHasTimeOff={showWhoHasTimeOff}
+                          onTimeOff={userOnTimeOff[user.personId]}
+                          goingOnTimeOff={userGoingOnTimeOff[user.personId]}
+                          userRole={displayUser.role}
+                          updateTaskStatus={updateTaskStatus}
+                          userId={displayUser._id}
+                        />
+                        {timeEntriesList.length > 0 &&
+                          timeEntriesList
+                            .filter(timeEntry => timeEntry.personId === user.personId)
+                            .map(timeEntry => (
+                              <tr className="table-row" key={timeEntry._id}>
+                                <td colSpan={6} style={{ padding: 0 }}>
+                                  <TimeEntry
+                                    from="TaskTab"
+                                    data={timeEntry}
+                                    displayYear
+                                    key={timeEntry._id}
+                                    timeEntryUserProfile={timeEntry.userProfile}
+                                  />
+                                </td>
+                              </tr>
+                            ))}
+                      </Fragment>
+                    );
+                  }
+                })}
               </>
             )}
           </tbody>

From 1ea971e39d245cf1bf0f6cd40be8bccde0920a2a Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Fri, 5 Apr 2024 18:41:00 -0300
Subject: [PATCH 21/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    | 65 +++++++++---------
 .../TeamMemberTasks/TeamMemberTasks.jsx       | 68 ++++++++++---------
 2 files changed, 68 insertions(+), 65 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 6e594e7f8a..cd561f0076 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -80,7 +80,8 @@ function LeaderBoard({
   }, [totalTimeMouseoverText]);
   const [teams, setTeams] = useState([]);
   const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [selectedTeamName, setSelectedTeamName] = useState();
+  const [selectedTeamName, setSelectedTeamName] = useState('Select a Team');
+  const [textButton, setTextButton] = useState('My Team');
   const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
   const [isLoadingTeams, setIsLoadingTeams] = useState(false);
   const [userRole, setUserRole] = useState();
@@ -121,7 +122,6 @@ function LeaderBoard({
       try {
         setIsLoadingTeams(true);
         const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
-
         const teamName = `${team.teamName.substring(0, 30)}...`;
         setSelectedTeamName(team.teamName.length >= 30 ? teamName : team.teamName);
         const idUsers = response.data.map(item => item._id);
@@ -136,13 +136,13 @@ function LeaderBoard({
   };
 
   const handleToggleButtonClick = () => {
-    if (isLoadingTeams) {
-      toast.warning('Please wait while the teams are loading.');
-    } else if (!usersSelectedTeam) {
-      renderTeamsList(usersSelectedTeam);
+    if (textButton === 'View All') {
+      setTextButton('My Team');
+      renderTeamsList(null);
     } else if (usersSelectedTeam.length === 0) {
       toast.error(`You have not selected a team or the selected team does not have any members.`);
     } else {
+      setTextButton('View All');
       renderTeamsList(usersSelectedTeam);
     }
   };
@@ -212,14 +212,10 @@ function LeaderBoard({
   };
 
   const TeamSelected = team => {
-    if (team) {
-      const teamName = `${team.teamName.substring(0, 15)}...`;
-      setSelectedTeamName(team.teamName.length >= 15 ? teamName : team.teamName);
-      setUsersSelectedTeam(team);
-    } else {
-      setSelectedTeamName('View All');
-      setUsersSelectedTeam(null);
-    }
+    const teamName = `${team.teamName.substring(0, 15)}...`;
+    setSelectedTeamName(team.teamName.length >= 15 ? teamName : team.teamName);
+    setUsersSelectedTeam(team);
+    setTextButton('My Team');
   };
 
   return (
@@ -252,7 +248,7 @@ function LeaderBoard({
           <section className="d-flex flex-row flex-wrap mb-3">
             <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className=" mr-3">
               <DropdownToggle caret>
-                {selectedTeamName || 'Select a Team'} {/* Display selected team or default text */}
+                {selectedTeamName} {/* Display selected team or default text */}
               </DropdownToggle>
               <DropdownMenu>
                 {teams.length === 0 ? (
@@ -262,28 +258,31 @@ function LeaderBoard({
                     Please, create a team to use the filter.
                   </DropdownItem>
                 ) : (
-                  /* eslint-disable */
-                  <>
-                    <DropdownItem onClick={() => TeamSelected(null)}>{'View All'}</DropdownItem>
-                    {teams.map(team => (
-                      <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
-                        {team.teamName}
-                      </DropdownItem>
-                    ))}
-                  </>
-                  /* eslint-disable */
+                  teams.map(team => (
+                    <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
+                      {team.teamName}
+                    </DropdownItem>
+                  ))
                 )}
               </DropdownMenu>
             </Dropdown>
 
-            <Button
-              color="primary"
-              onClick={handleToggleButtonClick}
-              disabled={teams.length === 0}
-              boxstyle={boxStyle}
-            >
-              {isLoadingTeams ? <Spinner animation="border" size="sm" /> : 'My Team'}
-            </Button>
+            {teams.length === 0 ? (
+              <Link to="/teams">
+                <Button color="success" className="fw-bold" boxstyle={boxStyle}>
+                  Create Team
+                </Button>
+              </Link>
+            ) : (
+              <Button
+                color="primary"
+                onClick={handleToggleButtonClick}
+                disabled={isLoadingTeams}
+                boxstyle={boxStyle}
+              >
+                {isLoadingTeams ? <Spinner animation="border" size="sm" /> : textButton}
+              </Button>
+            )}
           </section>
         ) : null}
       </div>
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index b9036438b0..5b645a0f85 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -27,6 +27,8 @@ import { hrsFilterBtnColorMap } from 'constants/colors';
 import { toast } from 'react-toastify';
 // import InfiniteScroll from 'react-infinite-scroller';
 import { getAllTimeOffRequests } from '../../actions/timeOffRequestAction';
+
+import { Link } from 'react-router-dom';
 import { ENDPOINTS } from 'utils/URL';
 
 const TeamMemberTasks = React.memo(props => {
@@ -54,19 +56,20 @@ const TeamMemberTasks = React.memo(props => {
   const [teams, setTeams] = useState(displayUser.teams);
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
-  const [selectedTeamName, setSelectedTeamName] = useState('');
+  const [selectedTeamName, setSelectedTeamName] = useState('Select a Team');
   const [userRole, setUserRole] = useState(displayUser.role);
   const [loading, setLoading] = useState(false);
+  const [textButton, setTextButton] = useState('My Team');
 
   const handleToggleButtonClick = () => {
-    if (loading) {
-      toast.warning('Please wait while the teams are loading.');
-    } else if (!usersSelectedTeam) {
-      renderTeamsList(usersSelectedTeam);
+    if (textButton === 'View All') {
+      renderTeamsList(null);
+      setTextButton('My Team');
     } else if (usersSelectedTeam.length === 0) {
       toast.error(`You have not selected a team or the selected team does not have any members.`);
     } else {
       renderTeamsList(usersSelectedTeam);
+      setTextButton('View All');
     }
   };
 
@@ -281,14 +284,10 @@ const TeamMemberTasks = React.memo(props => {
   };
 
   const TeamSelected = team => {
-    if (team) {
-      const teamName = `${team.teamName.substring(0, 15)}...`;
-      setSelectedTeamName(team.teamName.length >= 15 ? teamName : team.teamName);
-      setUsersSelectedTeam(team);
-    } else {
-      setSelectedTeamName('View All');
-      setUsersSelectedTeam(null);
-    }
+    const teamName = `${team.teamName.substring(0, 15)}...`;
+    setSelectedTeamName(team.teamName.length >= 15 ? teamName : team.teamName);
+    setUsersSelectedTeam(team);
+    setTextButton('My Team');
   };
 
   return (
@@ -309,7 +308,7 @@ const TeamMemberTasks = React.memo(props => {
           ) : !isLoading && (userRole === 'Administrator' || userRole === 'Owner') ? (
             <section className="d-flex flex-row mr-xl-2">
               <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className="mb-3">
-                <DropdownToggle caret>{selectedTeamName || 'Select a Team'}</DropdownToggle>
+                <DropdownToggle caret>{selectedTeamName}</DropdownToggle>
                 <DropdownMenu>
                   {teams.length === 0 ? (
                     <DropdownItem
@@ -318,28 +317,33 @@ const TeamMemberTasks = React.memo(props => {
                       {'Please, create a team to use the filter.'}
                     </DropdownItem>
                   ) : (
-                    <>
-                      <DropdownItem onClick={() => TeamSelected(null)}>{'View All'}</DropdownItem>
-                      {teams.map(team => (
-                        <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
-                          {team.teamName}
-                        </DropdownItem>
-                      ))}
-                    </>
+                    teams.map(team => (
+                      <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
+                        {team.teamName}
+                      </DropdownItem>
+                    ))
                   )}
                 </DropdownMenu>
               </Dropdown>
               &nbsp; &nbsp;
-              <Button
-                color="primary"
-                onClick={handleToggleButtonClick}
-                style={{ width: '7rem' }}
-                className="mb-3 mb-0-md-end"
-                disabled={teams.length === 0}
-                boxstyle={boxStyle}
-              >
-                {loading ? <Spinner animation="border" size="sm" /> : 'My Team'}
-              </Button>
+              {teams.length === 0 ? (
+                <Link to="/teams">
+                  <Button color="success" className="fw-bold" boxstyle={boxStyle}>
+                    Create Team
+                  </Button>
+                </Link>
+              ) : (
+                <Button
+                  color="primary"
+                  onClick={handleToggleButtonClick}
+                  style={{ width: '7rem' }}
+                  className="mb-3 mb-0-md-end"
+                  boxstyle={boxStyle}
+                  disabled={loading}
+                >
+                  {loading ? <Spinner animation="border" size="sm" /> : textButton}
+                </Button>
+              )}
             </section>
           ) : !isLoading && userRole !== 'Administrator' && userRole !== 'Owner' ? null : null}
         </section>

From a92a2e04ce762cf753fde4c7e5bb5ce2df62de73 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Mon, 8 Apr 2024 11:17:35 -0300
Subject: [PATCH 22/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    | 23 ++++++++++++++-----
 .../TeamMemberTasks/TeamMemberTasks.jsx       |  4 +++-
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index cd561f0076..e96dbc793f 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -86,6 +86,7 @@ function LeaderBoard({
   const [isLoadingTeams, setIsLoadingTeams] = useState(false);
   const [userRole, setUserRole] = useState();
   const [teamsUsers, setTeamsUsers] = useState(leaderBoardData);
+  const [controlUseEfffect, setControlUseEfffect] = useState(true);
 
   useEffect(() => {
     const fetchInitial = async () => {
@@ -103,8 +104,10 @@ function LeaderBoard({
   }, []);
 
   useEffect(() => {
-    if (!isEqual(leaderBoardData, teamsUsers)) {
-      setTeamsUsers(leaderBoardData);
+    if (controlUseEfffect) {
+      if (!isEqual(leaderBoardData, teamsUsers)) {
+        setTeamsUsers(leaderBoardData);
+      }
     }
   }, [leaderBoardData]);
 
@@ -122,8 +125,6 @@ function LeaderBoard({
       try {
         setIsLoadingTeams(true);
         const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
-        const teamName = `${team.teamName.substring(0, 30)}...`;
-        setSelectedTeamName(team.teamName.length >= 30 ? teamName : team.teamName);
         const idUsers = response.data.map(item => item._id);
         const usersTaks = leaderBoardData.filter(item => idUsers.includes(item.personId));
         setTeamsUsers(usersTaks);
@@ -202,7 +203,15 @@ function LeaderBoard({
   };
   const updateLeaderboardHandler = async () => {
     setIsLoading(true);
-    await getLeaderboardData(userId);
+    if (isEqual(leaderBoardData, teamsUsers)) {
+      await getLeaderboardData(userId);
+    } else {
+      setControlUseEfffect(false);
+      await getLeaderboardData(userId);
+      renderTeamsList(usersSelectedTeam);
+      setTextButton('View All');
+      setControlUseEfffect(true);
+    }
     setIsLoading(false);
     toast.success('Successfuly updated leaderboard');
   };
@@ -260,7 +269,9 @@ function LeaderBoard({
                 ) : (
                   teams.map(team => (
                     <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
-                      {team.teamName}
+                      {team.teamName.length >= 50
+                        ? `${team.teamName.substring(0, 50)}...`
+                        : team.teamName}
                     </DropdownItem>
                   ))
                 )}
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 5b645a0f85..7b145e2441 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -319,7 +319,9 @@ const TeamMemberTasks = React.memo(props => {
                   ) : (
                     teams.map(team => (
                       <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
-                        {team.teamName}
+                        {team.teamName.length >= 50
+                          ? team.teamName.substring(0, 50) + '...'
+                          : team.teamName}
                       </DropdownItem>
                     ))
                   )}

From 97d70c1c6d61e2c3e8b443ec519ad4e94307ce7c Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Tue, 16 Apr 2024 16:11:10 -0300
Subject: [PATCH 23/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx    | 41 ++++++++++++++-----
 .../TeamMemberTasks/TeamMemberTasks.jsx       | 32 +++++++++++----
 2 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index e96dbc793f..9cf96ea06d 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -86,7 +86,7 @@ function LeaderBoard({
   const [isLoadingTeams, setIsLoadingTeams] = useState(false);
   const [userRole, setUserRole] = useState();
   const [teamsUsers, setTeamsUsers] = useState(leaderBoardData);
-  const [controlUseEfffect, setControlUseEfffect] = useState(true);
+  const [innerWidth, setInnerWidth] = useState();
 
   useEffect(() => {
     const fetchInitial = async () => {
@@ -104,13 +104,23 @@ function LeaderBoard({
   }, []);
 
   useEffect(() => {
-    if (controlUseEfffect) {
-      if (!isEqual(leaderBoardData, teamsUsers)) {
+    if (!isEqual(leaderBoardData, teamsUsers)) {
+      if (selectedTeamName === 'Select a Team') {
         setTeamsUsers(leaderBoardData);
       }
     }
   }, [leaderBoardData]);
 
+  useEffect(() => {
+    const updateWindowWidth = () => {
+      setInnerWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', updateWindowWidth);
+
+    return () => window.removeEventListener('resize', updateWindowWidth);
+  }, []);
+
   const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
 
   const renderTeamsList = async team => {
@@ -140,7 +150,8 @@ function LeaderBoard({
     if (textButton === 'View All') {
       setTextButton('My Team');
       renderTeamsList(null);
-    } else if (usersSelectedTeam.length === 0) {
+      setSelectedTeamName('Select a Team');
+    } else if (usersSelectedTeam.length === 0 || selectedTeamName === 'Select a Team') {
       toast.error(`You have not selected a team or the selected team does not have any members.`);
     } else {
       setTextButton('View All');
@@ -205,12 +216,11 @@ function LeaderBoard({
     setIsLoading(true);
     if (isEqual(leaderBoardData, teamsUsers)) {
       await getLeaderboardData(userId);
+      setTeamsUsers(leaderBoardData);
     } else {
-      setControlUseEfffect(false);
       await getLeaderboardData(userId);
       renderTeamsList(usersSelectedTeam);
       setTextButton('View All');
-      setControlUseEfffect(true);
     }
     setIsLoading(false);
     toast.success('Successfuly updated leaderboard');
@@ -220,9 +230,20 @@ function LeaderBoard({
     showTimeOffRequestModal(request);
   };
 
+  const teamName = (name, maxLength) =>
+    setSelectedTeamName(maxLength > 15 ? `${name.substring(0, 15)}...` : name);
+
+  const dropdownName = (name, maxLength) => {
+    if (innerWidth > 457) {
+      return maxLength > 50 ? `${name.substring(0, 50)}...` : name;
+    }
+    return maxLength > 27 ? `${name.substring(0, 27)}...` : name;
+  };
+
   const TeamSelected = team => {
-    const teamName = `${team.teamName.substring(0, 15)}...`;
-    setSelectedTeamName(team.teamName.length >= 15 ? teamName : team.teamName);
+    if (team.teamName.length !== undefined) {
+      teamName(team.teamName, team.teamName.length);
+    }
     setUsersSelectedTeam(team);
     setTextButton('My Team');
   };
@@ -269,9 +290,7 @@ function LeaderBoard({
                 ) : (
                   teams.map(team => (
                     <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
-                      {team.teamName.length >= 50
-                        ? `${team.teamName.substring(0, 50)}...`
-                        : team.teamName}
+                      {dropdownName(team.teamName, team.teamName.length)}
                     </DropdownItem>
                   ))
                 )}
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 7b145e2441..b82fb8a02f 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -60,12 +60,14 @@ const TeamMemberTasks = React.memo(props => {
   const [userRole, setUserRole] = useState(displayUser.role);
   const [loading, setLoading] = useState(false);
   const [textButton, setTextButton] = useState('My Team');
+  const [innerWidth, setInnerWidth] = useState();
 
   const handleToggleButtonClick = () => {
     if (textButton === 'View All') {
       renderTeamsList(null);
       setTextButton('My Team');
-    } else if (usersSelectedTeam.length === 0) {
+      setSelectedTeamName('Select a Team');
+    } else if (usersSelectedTeam.length === 0 || selectedTeamName === 'Select a Team') {
       toast.error(`You have not selected a team or the selected team does not have any members.`);
     } else {
       renderTeamsList(usersSelectedTeam);
@@ -73,6 +75,10 @@ const TeamMemberTasks = React.memo(props => {
     }
   };
 
+  useEffect(() => {
+    setInnerWidth(window.innerWidth);
+  }, [window.innerWidth]);
+
   const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
 
   const dispatch = useDispatch();
@@ -270,7 +276,11 @@ const TeamMemberTasks = React.memo(props => {
 
   useEffect(() => {
     if (!isLoading) {
-      renderTeamsList();
+      renderTeamsList(
+        selectedTeamName === 'Select a Team' || usersSelectedTeam.length === 0
+          ? null
+          : usersSelectedTeam,
+      );
       closeMarkAsDone();
     }
   }, [usersWithTasks]);
@@ -284,12 +294,22 @@ const TeamMemberTasks = React.memo(props => {
   };
 
   const TeamSelected = team => {
-    const teamName = `${team.teamName.substring(0, 15)}...`;
-    setSelectedTeamName(team.teamName.length >= 15 ? teamName : team.teamName);
+    team.teamName.length !== undefined ? teamName(team.teamName, team.teamName.length) : null;
     setUsersSelectedTeam(team);
     setTextButton('My Team');
   };
 
+  const teamName = (name, maxLength) =>
+    setSelectedTeamName(maxLength > 15 ? `${name.substring(0, 15)}...` : name);
+
+  const dropdownName = (name, maxLength) => {
+    if (innerWidth >= 455) {
+      return maxLength > 50 ? `${name.substring(0, 50)}...` : name;
+    } else {
+      return maxLength > 15 ? `${name.substring(0, 15)}...` : name;
+    }
+  };
+
   return (
     <div className="container team-member-tasks container-fluid">
       <header className="header-box">
@@ -319,9 +339,7 @@ const TeamMemberTasks = React.memo(props => {
                   ) : (
                     teams.map(team => (
                       <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
-                        {team.teamName.length >= 50
-                          ? team.teamName.substring(0, 50) + '...'
-                          : team.teamName}
+                        {dropdownName(team.teamName, team.teamName.length)}
                       </DropdownItem>
                     ))
                   )}

From 8f5070480e4a445f207fa1dde1a5af05a53420a9 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Tue, 16 Apr 2024 22:04:48 -0300
Subject: [PATCH 24/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index dbd55bded2..60f5faddc6 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -113,14 +113,8 @@ function LeaderBoard({
   }, [leaderBoardData]);
 
   useEffect(() => {
-    const updateWindowWidth = () => {
-      setInnerWidth(window.innerWidth);
-    };
-
-    window.addEventListener('resize', updateWindowWidth);
-
-    return () => window.removeEventListener('resize', updateWindowWidth);
-  }, []);
+    setInnerWidth(window.innerWidth);
+  }, [window.innerWidth]);
 
   const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
 

From ab404286c420d4c5e0991c10606b4f73074831b3 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Tue, 16 Apr 2024 23:03:18 -0300
Subject: [PATCH 25/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 .../TeamMemberTasks/TeamMemberTasks.jsx       | 59 ++++++++++++-------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 6bfb2dd6a9..a3e5ea5f11 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -304,7 +304,7 @@ const TeamMemberTasks = React.memo(props => {
     setSelectedTeamName(maxLength > 15 ? `${name.substring(0, 15)}...` : name);
 
   const dropdownName = (name, maxLength) => {
-    if (innerWidth >= 455) {
+    if (innerWidth >= 457) {
       return maxLength > 50 ? `${name.substring(0, 50)}...` : name;
     } else {
       return maxLength > 15 ? `${name.substring(0, 15)}...` : name;
@@ -312,15 +312,23 @@ const TeamMemberTasks = React.memo(props => {
   };
 
   return (
-    <div className={"container " + (darkMode ? "team-member-tasks bg-oxford-blue" : "team-member-tasks")}>
+    <div
+      className={
+        'container ' + (darkMode ? 'team-member-tasks bg-oxford-blue' : 'team-member-tasks')
+      }
+    >
       <header className="header-box">
         <section className="d-flex flex-column">
-          <h1 className={darkMode ? "text-light" : ""}>Team Member Tasks</h1>
+          <h1 className={darkMode ? 'text-light' : ''}>Team Member Tasks</h1>
 
           {/* Dropdown for selecting a team */}
           {isLoading && (userRole === 'Administrator' || userRole === 'Owner') ? (
             <>
-              <span className="d-flex justify-content-start align-items-center">
+              <span
+                className={`d-flex justify-content-start align-items-center ${
+                  darkMode ? 'text-light' : 'text-black'
+                }`}
+              >
                 {' '}
                 Loading teams: &nbsp;
                 <Spinner color="primary"></Spinner>
@@ -369,15 +377,17 @@ const TeamMemberTasks = React.memo(props => {
           ) : !isLoading && userRole !== 'Administrator' && userRole !== 'Owner' ? null : null}
         </section>
         {finishLoading ? (
-          <section className=" hours-btn-container   flex-wrap ml-3 ">
-            <div className="mb-2">
-               <button
-              type="button"
-              className={`show-time-off-btn ${
-                showWhoHasTimeOff ? 'show-time-off-btn-selected ' : ''
-              }` + (darkMode ? " box-shadow-dark" : "")}
-              onClick={handleshowWhoHasTimeOff}
-            >
+          <section className=" hours-btn-container flex-wrap ml-2">
+            <div className="mb-2 ">
+              <button
+                type="button"
+                className={
+                  ` mr-1 show-time-off-btn ${
+                    showWhoHasTimeOff ? 'show-time-off-btn-selected ' : ''
+                  }` + (darkMode ? ' box-shadow-dark' : '')
+                }
+                onClick={handleshowWhoHasTimeOff}
+              >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="22"
@@ -409,7 +419,9 @@ const TeamMemberTasks = React.memo(props => {
                 <button
                   key={idx}
                   type="button"
-                  className={`circle-border ${days} days ` + (darkMode ? "box-shadow-dark" : "")}
+                  className={
+                    `m-1 circle-border ${days} days ` + (darkMode ? 'box-shadow-dark' : '')
+                  }
                   title={`Timelogs submitted in the past ${days} days`}
                   style={{
                     color: selectedPeriod === days && isTimeFilterActive ? 'white' : color,
@@ -468,17 +480,21 @@ const TeamMemberTasks = React.memo(props => {
               {/* Empty column header for hours completed icon */}
               <th colSpan={1} />
               <th colSpan={2} className="team-member-tasks-headers">
-                <Table borderless className={"team-member-tasks-subtable " + (darkMode ? "text-light" : "")}>
+                <Table
+                  borderless
+                  className={'team-member-tasks-subtable ' + (darkMode ? 'text-light' : '')}
+                >
                   <thead>
                     <tr>
                       <th className="team-member-tasks-headers team-member-tasks-user-name">
                         Team Member
                       </th>
                       <th className="team-member-tasks-headers team-clocks team-clocks-header">
-                        <FontAwesomeIcon 
-                          style={{color: darkMode ? 'grey' : ''}} 
-                          icon={faClock} 
-                          title="Weekly Committed Hours" />
+                        <FontAwesomeIcon
+                          style={{ color: darkMode ? 'grey' : '' }}
+                          icon={faClock}
+                          title="Weekly Committed Hours"
+                        />
                         /
                         <FontAwesomeIcon
                           style={{ color: 'green' }}
@@ -497,7 +513,10 @@ const TeamMemberTasks = React.memo(props => {
                 </Table>
               </th>
               <th colSpan={3} className="team-member-tasks-headers">
-                <Table borderless className={"team-member-tasks-subtable " + (darkMode ? "text-light" : "")}>
+                <Table
+                  borderless
+                  className={'team-member-tasks-subtable ' + (darkMode ? 'text-light' : '')}
+                >
                   <thead>
                     <tr>
                       <th>Tasks(s)</th>

From f325711ff474e29eb9f0f7066b94175493d4bfaa Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Wed, 17 Apr 2024 11:37:24 -0300
Subject: [PATCH 26/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx         |  3 +--
 src/components/TeamMemberTasks/TeamMemberTasks.jsx | 10 +++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 60f5faddc6..1e1eeb04f0 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -145,8 +145,7 @@ function LeaderBoard({
     if (textButton === 'View All') {
       setTextButton('My Team');
       renderTeamsList(null);
-      setSelectedTeamName('Select a Team');
-    } else if (usersSelectedTeam.length === 0 || selectedTeamName === 'Select a Team') {
+    } else if (usersSelectedTeam.length === 0) {
       toast.error(`You have not selected a team or the selected team does not have any members.`);
     } else {
       setTextButton('View All');
diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index a3e5ea5f11..70e45020b7 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -62,17 +62,19 @@ const TeamMemberTasks = React.memo(props => {
   const [loading, setLoading] = useState(false);
   const [textButton, setTextButton] = useState('My Team');
   const [innerWidth, setInnerWidth] = useState();
+  const [controlUseEfffect, setControlUseEfffect] = useState(false);
 
   const handleToggleButtonClick = () => {
     if (textButton === 'View All') {
       renderTeamsList(null);
       setTextButton('My Team');
-      setSelectedTeamName('Select a Team');
-    } else if (usersSelectedTeam.length === 0 || selectedTeamName === 'Select a Team') {
+      setControlUseEfffect(false);
+    } else if (usersSelectedTeam.length === 0) {
       toast.error(`You have not selected a team or the selected team does not have any members.`);
     } else {
       renderTeamsList(usersSelectedTeam);
       setTextButton('View All');
+      setControlUseEfffect(true);
     }
   };
 
@@ -278,9 +280,7 @@ const TeamMemberTasks = React.memo(props => {
   useEffect(() => {
     if (!isLoading) {
       renderTeamsList(
-        selectedTeamName === 'Select a Team' || usersSelectedTeam.length === 0
-          ? null
-          : usersSelectedTeam,
+        !controlUseEfffect || usersSelectedTeam.length === 0 ? null : usersSelectedTeam,
       );
       closeMarkAsDone();
     }

From a525b52e0ee06e57fd1076966952f9708e00c13f Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Fri, 10 May 2024 14:26:54 -0300
Subject: [PATCH 27/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/LeaderBoard/Leaderboard.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index ed3ee9f2a9..560726d26c 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -395,7 +395,7 @@ function LeaderBoard({
               </td>
             </tr>
             {teamsUsers.map(item => (
-              <tr key={item.personId}  className={darkMode ? 'bg-yinmn-blue' : ''}>
+              <tr key={item.personId} className={darkMode ? 'bg-yinmn-blue' : ''}>
                 <td className="align-middle">
                   <div>
                     <Modal isOpen={isDashboardOpen === item.personId} toggle={dashboardToggle}>

From 42a6ff5c6a6fe994be2a03a29406c052166334db Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues <petersonpepi16@gmail.com>
Date: Wed, 22 May 2024 19:10:57 -0300
Subject: [PATCH 28/33] Update Leaderboard.jsx

---
 src/components/LeaderBoard/Leaderboard.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 763fa491e5..b6deb2d76f 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -16,7 +16,6 @@ import {
   DropdownItem,
   Spinner,
 } from 'reactstrap';
-import { Table, Progress, Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import Alert from 'reactstrap/lib/Alert';
 import {
   hasLeaderboardPermissions,

From 1abb075ebe6ea89ecba725c896aee313c3a878bf Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues <petersonpepi16@gmail.com>
Date: Wed, 22 May 2024 19:21:52 -0300
Subject: [PATCH 29/33] Update Leaderboard.jsx

---
 src/components/LeaderBoard/Leaderboard.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index b6deb2d76f..6152f3f99f 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -326,7 +326,6 @@ function LeaderBoard({
           </div>
         </Alert>
       )}
-
       <div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y">
         <Table className={`leaderboard table-fixed ${darkMode ? 'text-light' : ''}`}>
           <thead>

From 65803138376d8b0d242c4f282b66c0d5fd64cab2 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues <petersonpepi16@gmail.com>
Date: Thu, 23 May 2024 19:06:33 -0300
Subject: [PATCH 30/33] Update Leaderboard.jsx

---
 src/components/LeaderBoard/Leaderboard.jsx | 143 +++++++++++----------
 1 file changed, 72 insertions(+), 71 deletions(-)

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index 6152f3f99f..f7e9dcc418 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -245,72 +245,71 @@ function LeaderBoard({
   };
 
   return (
-      <div>
-        <h3>
-          <div className="d-flex align-items-center">
-            <span className="mr-2">Leaderboard</span>
-            <i
-              data-toggle="tooltip"
-              data-placement="right"
-              title="Click to refresh the leaderboard"
-              style={{ fontSize: 24, cursor: 'pointer' }}
-              aria-hidden="true"
-              className={`fa fa-refresh ${isLoading ? 'animation' : ''}`}
-              onClick={updateLeaderboardHandler}
-            />
-            &nbsp;
-            <EditableInfoModal
-              areaName="LeaderboardOrigin"
-              areaTitle="Leaderboard"
-              role={loggedInUser.role}
-              fontSize={24}
-              darkMode={darkMode}
-              isPermissionPage
-            />
-          </div>
-        </h3>
-        {userRole === 'Administrator' || userRole === 'Owner' ? (
-          <section className="d-flex flex-row flex-wrap mb-3">
-            <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className=" mr-3">
-              <DropdownToggle caret>
-                {selectedTeamName} {/* Display selected team or default text */}
-              </DropdownToggle>
-              <DropdownMenu>
-                {teams.length === 0 ? (
-                  <DropdownItem
-                    onClick={() => toast.warning('Please, create a team to use the filter.')}
-                  >
-                    Please, create a team to use the filter.
+     <div>
+      <h3>
+        <div className="d-flex align-items-center">
+          <span className="mr-2">Leaderboard</span>
+          <i
+            data-toggle="tooltip"
+            data-placement="right"
+            title="Click to refresh the leaderboard"
+            style={{ fontSize: 24, cursor: 'pointer' }}
+            aria-hidden="true"
+            className={`fa fa-refresh ${isLoading ? 'animation' : ''}`}
+            onClick={updateLeaderboardHandler}
+          />
+          &nbsp;
+          <EditableInfoModal
+            areaName="LeaderboardOrigin"
+            areaTitle="Leaderboard"
+            role={loggedInUser.role}
+            fontSize={24}
+            darkMode={darkMode}
+            isPermissionPage
+          />
+        </div>
+      </h3>
+      {userRole === 'Administrator' || userRole === 'Owner' ? (
+        <section className="d-flex flex-row flex-wrap mb-3">
+          <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className=" mr-3">
+            <DropdownToggle caret>
+              {selectedTeamName} {/* Display selected team or default text */}
+            </DropdownToggle>
+            <DropdownMenu>
+              {teams.length === 0 ? (
+                <DropdownItem
+                  onClick={() => toast.warning('Please, create a team to use the filter.')}
+                >
+                  Please, create a team to use the filter.
+                </DropdownItem>
+              ) : (
+                teams.map(team => (
+                  <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
+                    {dropdownName(team.teamName, team.teamName.length)}
                   </DropdownItem>
-                ) : (
-                  teams.map(team => (
-                    <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
-                      {dropdownName(team.teamName, team.teamName.length)}
-                    </DropdownItem>
-                  ))
-                )}
-              </DropdownMenu>
-            </Dropdown>
+                ))
+              )}
+            </DropdownMenu>
+          </Dropdown>
 
-            {teams.length === 0 ? (
-              <Link to="/teams">
-                <Button color="success" className="fw-bold" boxstyle={boxStyle}>
-                  Create Team
-                </Button>
-              </Link>
-            ) : (
-              <Button
-                color="primary"
-                onClick={handleToggleButtonClick}
-                disabled={isLoadingTeams}
-                boxstyle={boxStyle}
-              >
-                {isLoadingTeams ? <Spinner animation="border" size="sm" /> : textButton}
+          {teams.length === 0 ? (
+            <Link to="/teams">
+              <Button color="success" className="fw-bold" boxstyle={boxStyle}>
+                Create Team
               </Button>
-            )}
-          </section>
-        ) : null}
-      </div>
+            </Link>
+          ) : (
+            <Button
+              color="primary"
+              onClick={handleToggleButtonClick}
+              disabled={isLoadingTeams}
+              boxstyle={boxStyle}
+            >
+              {isLoadingTeams ? <Spinner animation="border" size="sm" /> : textButton}
+            </Button>
+          )}
+        </section>
+      ) : null}
       {!isVisible && (
         <Alert color="warning">
           <div className="d-flex align-items-center">
@@ -399,16 +398,17 @@ function LeaderBoard({
               <tr key={item.personId} className={darkMode ? 'bg-yinmn-blue' : ''}>
                 <td className="align-middle">
                   <div>
-                    <Modal 
-                    isOpen={isDashboardOpen === item.personId}
-                    toggle={dashboardToggle}
-                    className={darkMode ? 'text-light dark-mode' : ''}
-                    style={darkMode ? boxStyleDark : {}>
-                      <ModalHeader 
+                    <Modal
+                      isOpen={isDashboardOpen === item.personId}
                       toggle={dashboardToggle}
-                      className={darkMode ? 'bg-space-cadet' : ''}
+                      className={darkMode ? 'text-light dark-mode' : ''}
+                      style={darkMode ? boxStyleDark : {}}
+                    >
+                      <ModalHeader
+                        toggle={dashboardToggle}
+                        className={darkMode ? 'bg-space-cadet' : ''}
                       >
-                      Jump to personal Dashboard
+                        Jump to personal Dashboard
                       </ModalHeader>
                       <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
                         <p>Are you sure you wish to view this {item.name} dashboard?</p>
@@ -593,6 +593,7 @@ function LeaderBoard({
           </tbody>
         </Table>
       </div>
+    </div>
   );
 }
 

From 8a6af611b7353ae2f204cfd3c4d1ea05a6471254 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Sat, 25 May 2024 13:43:16 -0300
Subject: [PATCH 31/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 src/components/Badge/__tests__/NewBadges.test.js | 4 ++--
 src/components/LeaderBoard/Leaderboard.jsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Badge/__tests__/NewBadges.test.js b/src/components/Badge/__tests__/NewBadges.test.js
index 4e73ec0cdf..54e3c359c0 100644
--- a/src/components/Badge/__tests__/NewBadges.test.js
+++ b/src/components/Badge/__tests__/NewBadges.test.js
@@ -64,8 +64,8 @@ describe('NewBadges component', () => {
     mockBadges.forEach(async (badge, index) => {
       fireEvent.mouseEnter(badgeImages[index]);
       await waitFor(() => {
-        expect(screen.getByText(badge.badge.badgeName)).toBeInTheDocument();
-        expect(screen.getByText(badge.badge.description)).toBeInTheDocument();
+        expect(screen.getByText(badge.badge.badge.badgeName)).toBeInTheDocument();
+        expect(screen.getByText(badge.badge.badge.description)).toBeInTheDocument();
       });
     });
   });
diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
index f7e9dcc418..f86f6f4c1f 100644
--- a/src/components/LeaderBoard/Leaderboard.jsx
+++ b/src/components/LeaderBoard/Leaderboard.jsx
@@ -245,7 +245,7 @@ function LeaderBoard({
   };
 
   return (
-     <div>
+    <div>
       <h3>
         <div className="d-flex align-items-center">
           <span className="mr-2">Leaderboard</span>

From fe081f96a74aecc18d2093c61f8b8b040955042a Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues <petersonpepi16@gmail.com>
Date: Thu, 6 Jun 2024 19:33:17 -0300
Subject: [PATCH 32/33] Update TeamMemberTasks.jsx

---
 src/components/TeamMemberTasks/TeamMemberTasks.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 73af969f2f..72cee7163c 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -1,7 +1,6 @@
 import { Fragment } from 'react';
 import { faClock } from '@fortawesome/free-solid-svg-icons';
 import {
-  Table,
   Dropdown,
   DropdownToggle,
   DropdownMenu,

From ebff810469e7d16143f5093cf04c3ba73b506427 Mon Sep 17 00:00:00 2001
From: Peterson Rodrigues dos Santos <petersonpepi16@gmail.com>
Date: Thu, 6 Jun 2024 21:04:46 -0300
Subject: [PATCH 33/33] 
 Peterson_impl_feature_Finish_My_Team_filter_or_Tasks_Tab

---
 .../TeamMemberTasks/TeamMemberTasks.jsx       | 245 ++++++++++--------
 1 file changed, 134 insertions(+), 111 deletions(-)

diff --git a/src/components/TeamMemberTasks/TeamMemberTasks.jsx b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
index 72cee7163c..6832f30ae8 100644
--- a/src/components/TeamMemberTasks/TeamMemberTasks.jsx
+++ b/src/components/TeamMemberTasks/TeamMemberTasks.jsx
@@ -7,8 +7,8 @@ import {
   DropdownItem,
   Button,
   Spinner,
-  Table, 
-  Row, 
+  Table,
+  Row,
   Col,
 } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -37,7 +37,14 @@ import { ENDPOINTS } from 'utils/URL';
 
 const TeamMemberTasks = React.memo(props => {
   // props from redux store
-  const { authUser, displayUser, isLoading, usersWithTasks, usersWithTimeEntries, darkMode } = props;
+  const {
+    authUser,
+    displayUser,
+    isLoading,
+    usersWithTasks,
+    usersWithTimeEntries,
+    darkMode,
+  } = props;
 
   const [showTaskNotificationModal, setTaskNotificationModal] = useState(false);
   const [currentTaskNotifications, setCurrentTaskNotifications] = useState([]);
@@ -97,7 +104,7 @@ const TeamMemberTasks = React.memo(props => {
 
   useEffect(() => {
     dispatch(getAllTimeOffRequests());
-    dispatch(fetchAllFollowUps())
+    dispatch(fetchAllFollowUps());
   }, []);
 
   const closeMarkAsDone = () => {
@@ -281,14 +288,14 @@ const TeamMemberTasks = React.memo(props => {
     const teamCodeOptions = [];
     const colorOptions = [];
 
-    if(usersWithTasks.length > 0) {
+    if (usersWithTasks.length > 0) {
       usersWithTasks.forEach(user => {
         const teamNames = user.teams.map(team => team.teamName);
         const code = user.teamCode || 'noCodeLabel';
         const color = user.weeklySummaryOption || 'noColorLabel';
 
         teamNames.forEach(name => {
-          if(teamGroup[name]) {
+          if (teamGroup[name]) {
             teamGroup[name].push(user.personId);
           } else {
             teamGroup[name] = [user.personId];
@@ -308,36 +315,42 @@ const TeamMemberTasks = React.memo(props => {
         }
       });
 
-      Object.keys(teamGroup).sort((a,b) => a.localeCompare(b)).forEach(name => {
-        teamOptions.push({
-          value: name,
-          label: `${name}`
+      Object.keys(teamGroup)
+        .sort((a, b) => a.localeCompare(b))
+        .forEach(name => {
+          teamOptions.push({
+            value: name,
+            label: `${name}`,
+          });
         });
-      })
 
-      Object.keys(teamCodeGroup).sort((a,b) => a.localeCompare(b)).forEach(code => {
-        if (code !== 'noCodeLabel') {
-          teamCodeOptions.push({
-            value: code,
-            label: `${code}`
-          });
-        }
-      });
+      Object.keys(teamCodeGroup)
+        .sort((a, b) => a.localeCompare(b))
+        .forEach(code => {
+          if (code !== 'noCodeLabel') {
+            teamCodeOptions.push({
+              value: code,
+              label: `${code}`,
+            });
+          }
+        });
 
-      Object.keys(colorGroup).sort((a,b) => a.localeCompare(b)).forEach(color => {
-        if (color !== 'noColorLabel') {
-          colorOptions.push({
-            value: color,
-            label: `${color}`
-          });
-        }
-      });
+      Object.keys(colorGroup)
+        .sort((a, b) => a.localeCompare(b))
+        .forEach(color => {
+          if (color !== 'noColorLabel') {
+            colorOptions.push({
+              value: color,
+              label: `${color}`,
+            });
+          }
+        });
 
       setTeamNames(teamOptions);
       setTeamCodes(teamCodeOptions);
       setColors(colorOptions);
     }
-  }
+  };
 
   useEffect(() => {
     // TeamMemberTasks is only imported in TimeLog component, in which userId is already definitive
@@ -359,7 +372,7 @@ const TeamMemberTasks = React.memo(props => {
         !controlUseEfffect || usersSelectedTeam.length === 0 ? null : usersSelectedTeam,
       );
       closeMarkAsDone();
-      if(['Administrator', 'Owner', 'Manager', 'Mentor'].some( role => role === displayUser.role)) {
+      if (['Administrator', 'Owner', 'Manager', 'Mentor'].some(role => role === displayUser.role)) {
         renderFilters();
       }
     }
@@ -389,48 +402,57 @@ const TeamMemberTasks = React.memo(props => {
       return maxLength > 15 ? `${name.substring(0, 15)}...` : name;
     }
   };
-  
+
   const handleSelectTeamNames = event => {
     setSelectedTeamNames(event);
-  }
+  };
 
   const handleSelectCodeChange = event => {
     setSelectedCodes(event);
-  }
+  };
 
   const handleSelectColorChange = event => {
     setSelectedColors(event);
-  }
+  };
 
-  const filterByUserFeatures = (user) => {
-    if(selectedTeamNames.length === 0 && selectedCodes.length === 0 && selectedColors.length === 0) return true;
+  const filterByUserFeatures = user => {
+    if (selectedTeamNames.length === 0 && selectedCodes.length === 0 && selectedColors.length === 0)
+      return true;
 
-    return filterByTeamCodes(user.teamCode) && filterByColors(user.weeklySummaryOption) && filterByTeams(user.teams);
-  }
+    return (
+      filterByTeamCodes(user.teamCode) &&
+      filterByColors(user.weeklySummaryOption) &&
+      filterByTeams(user.teams)
+    );
+  };
 
-  const filterByTeams = (teams) => {
-    if(selectedTeamNames.length === 0) return true;
+  const filterByTeams = teams => {
+    if (selectedTeamNames.length === 0) return true;
     let match = false;
-    teams.forEach(team => match = match || filterByTeamName(team.teamName));
+    teams.forEach(team => (match = match || filterByTeamName(team.teamName)));
     return match;
-  }
+  };
 
-  const filterByTeamName = (name) => {
+  const filterByTeamName = name => {
     return selectedTeamNames.some(option => option.value === name);
-  }
+  };
 
-  const filterByTeamCodes = (code) => {
-    if(selectedCodes.length === 0) return true;
+  const filterByTeamCodes = code => {
+    if (selectedCodes.length === 0) return true;
     return selectedCodes.some(option => option.value === code);
-  }
+  };
 
-  const filterByColors = (color) => {
-    if(selectedColors.length === 0) return true;
+  const filterByColors = color => {
+    if (selectedColors.length === 0) return true;
     return selectedColors.some(option => option.value === color);
-  }
+  };
 
   return (
-    <div className={"container " + (darkMode ? "team-member-tasks bg-space-cadet" : "team-member-tasks")}>
+    <div
+      className={
+        'container ' + (darkMode ? 'team-member-tasks bg-space-cadet' : 'team-member-tasks')
+      }
+    >
       <header className="header-box">
         <section className="d-flex flex-column">
           <h1 className={darkMode ? 'text-light' : ''}>Team Member Tasks</h1>
@@ -554,7 +576,7 @@ const TeamMemberTasks = React.memo(props => {
               areaTitle="Team Member Task Time Filter"
               fontSize={22}
               isPermissionPage={true}
-              role={authUser.role} 
+              role={authUser.role}
               darkMode={darkMode}
             />
           </section>
@@ -590,13 +612,10 @@ const TeamMemberTasks = React.memo(props => {
           darkMode={darkMode}
         />
       )}
-      {
-        ['Administrator', 'Owner', 'Manager', 'Mentor'].some( role => role === displayUser.role) &&
+      {['Administrator', 'Owner', 'Manager', 'Mentor'].some(role => role === displayUser.role) && (
         <Row style={{ marginBottom: '10px' }}>
-          <Col lg={{ size: 4}} xs={{ size: 12}}>
-            <span className={darkMode ? "text-light" : ""}>
-              Select Team
-            </span>
+          <Col lg={{ size: 4 }} xs={{ size: 12 }}>
+            <span className={darkMode ? 'text-light' : ''}>Select Team</span>
             <MultiSelect
               className="multi-select-filter"
               options={teamNames}
@@ -606,10 +625,8 @@ const TeamMemberTasks = React.memo(props => {
               }}
             />
           </Col>
-          <Col lg={{ size: 4}} xs={{ size: 12}}>
-            <span className={darkMode ? "text-light" : ""}>
-            Select Team Code
-            </span>
+          <Col lg={{ size: 4 }} xs={{ size: 12 }}>
+            <span className={darkMode ? 'text-light' : ''}>Select Team Code</span>
             <MultiSelect
               className="multi-select-filter"
               options={teamCodes}
@@ -620,9 +637,7 @@ const TeamMemberTasks = React.memo(props => {
             />
           </Col>
           <Col lg={{ size: 4 }} xs={{ size: 12 }}>
-            <span className={darkMode ? "text-light" : ""}>
-            Select Color
-            </span>
+            <span className={darkMode ? 'text-light' : ''}>Select Color</span>
             <MultiSelect
               className="multi-select-filter"
               options={colors}
@@ -633,25 +648,43 @@ const TeamMemberTasks = React.memo(props => {
             />
           </Col>
         </Row>
-      }
+      )}
       <div className="task_table-container">
         <Table>
-          <thead className={`pc-component ${darkMode ? "bg-space-cadet" : ""}`} style={{ position: 'sticky', top: 0 }}>
+          <thead
+            className={`pc-component ${darkMode ? 'bg-space-cadet' : ''}`}
+            style={{ position: 'sticky', top: 0 }}
+          >
             <tr>
               {/* Empty column header for hours completed icon */}
-              <th colSpan={1} className={darkMode ? "bg-space-cadet" : ""}/>
-              <th colSpan={2} className={`team-member-tasks-headers ${darkMode ? "bg-space-cadet" : ""}`}>
-                <Table borderless className={"team-member-tasks-subtable " + (darkMode ? "text-light" : "")}>
-                  <thead className={darkMode ? "bg-space-cadet" : ""}>
+              <th colSpan={1} className={darkMode ? 'bg-space-cadet' : ''} />
+              <th
+                colSpan={2}
+                className={`team-member-tasks-headers ${darkMode ? 'bg-space-cadet' : ''}`}
+              >
+                <Table
+                  borderless
+                  className={'team-member-tasks-subtable ' + (darkMode ? 'text-light' : '')}
+                >
+                  <thead className={darkMode ? 'bg-space-cadet' : ''}>
                     <tr>
-                      <th className={`team-member-tasks-headers team-member-tasks-user-name ${darkMode ? "bg-space-cadet" : ""}`}>
+                      <th
+                        className={`team-member-tasks-headers team-member-tasks-user-name ${
+                          darkMode ? 'bg-space-cadet' : ''
+                        }`}
+                      >
                         Team Member
                       </th>
-                      <th className={`team-member-tasks-headers team-clocks team-clocks-header ${darkMode ? "bg-space-cadet" : ""}`}>
-                        <FontAwesomeIcon 
-                          style={{color: darkMode ? 'lightgray' : ''}} 
-                          icon={faClock} 
-                          title="Weekly Committed Hours" />
+                      <th
+                        className={`team-member-tasks-headers team-clocks team-clocks-header ${
+                          darkMode ? 'bg-space-cadet' : ''
+                        }`}
+                      >
+                        <FontAwesomeIcon
+                          style={{ color: darkMode ? 'lightgray' : '' }}
+                          icon={faClock}
+                          title="Weekly Committed Hours"
+                        />
                         /
                         <FontAwesomeIcon
                           style={{ color: 'green' }}
@@ -669,12 +702,20 @@ const TeamMemberTasks = React.memo(props => {
                   </thead>
                 </Table>
               </th>
-              <th colSpan={3} className={`team-member-tasks-headers ${darkMode ? "bg-space-cadet" : ""}`}>
-                <Table borderless className={"team-member-tasks-subtable " + (darkMode ? "text-light" : "")}>
-                  <thead className={darkMode ? "bg-space-cadet" : ""}>
+              <th
+                colSpan={3}
+                className={`team-member-tasks-headers ${darkMode ? 'bg-space-cadet' : ''}`}
+              >
+                <Table
+                  borderless
+                  className={'team-member-tasks-subtable ' + (darkMode ? 'text-light' : '')}
+                >
+                  <thead className={darkMode ? 'bg-space-cadet' : ''}>
                     <tr>
-                      <th className={darkMode ? "bg-space-cadet" : ""}>Tasks(s)</th>
-                      <th className={`team-task-progress ${darkMode ? "bg-space-cadet" : ""}`}>Progress</th>
+                      <th className={darkMode ? 'bg-space-cadet' : ''}>Tasks(s)</th>
+                      <th className={`team-task-progress ${darkMode ? 'bg-space-cadet' : ''}`}>
+                        Progress
+                      </th>
                       {displayUser.role === 'Administrator' ? <th>Status</th> : null}
                     </tr>
                   </thead>
@@ -686,30 +727,11 @@ const TeamMemberTasks = React.memo(props => {
             {isLoading ? (
               <SkeletonLoading template="TeamMemberTasks" />
             ) : (
-              teamList.filter((user) => filterByUserFeatures(user)).map(user => {
-                if (!isTimeFilterActive) {
-                  return (
-                    <TeamMemberTask
-                      user={user}
-                      userPermission={props?.auth?.user?.permissions?.frontPermissions?.includes(
-                        'putReviewStatus',
-                      )}
-                      key={user.personId}
-                      handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
-                      handleMarkAsDoneModal={handleMarkAsDoneModal}
-                      handleRemoveFromTaskModal={handleRemoveFromTaskModal}
-                      handleTaskModalOption={handleTaskModalOption}
-                      userRole={displayUser.role}
-                      updateTaskStatus={updateTaskStatus}
-                      userId={displayUser._id}
-                      showWhoHasTimeOff={showWhoHasTimeOff}
-                      onTimeOff={userOnTimeOff[user.personId]}
-                      goingOnTimeOff={userGoingOnTimeOff[user.personId]}
-                    />
-                  );
-                } else {
-                  return (
-                    <Fragment key={user.personId}>
+              teamList
+                .filter(user => filterByUserFeatures(user))
+                .map(user => {
+                  if (!isTimeFilterActive) {
+                    return (
                       <TeamMemberTask
                         user={user}
                         userPermission={props?.auth?.user?.permissions?.frontPermissions?.includes(
@@ -733,17 +755,19 @@ const TeamMemberTasks = React.memo(props => {
                       <Fragment key={user.personId}>
                         <TeamMemberTask
                           user={user}
-                          key={user.personId}
+                          userPermission={props?.auth?.user?.permissions?.frontPermissions?.includes(
+                            'putReviewStatus',
+                          )}
                           handleOpenTaskNotificationModal={handleOpenTaskNotificationModal}
                           handleMarkAsDoneModal={handleMarkAsDoneModal}
                           handleRemoveFromTaskModal={handleRemoveFromTaskModal}
                           handleTaskModalOption={handleTaskModalOption}
-                          showWhoHasTimeOff={showWhoHasTimeOff}
-                          onTimeOff={userOnTimeOff[user.personId]}
-                          goingOnTimeOff={userGoingOnTimeOff[user.personId]}
                           userRole={displayUser.role}
                           updateTaskStatus={updateTaskStatus}
                           userId={displayUser._id}
+                          showWhoHasTimeOff={showWhoHasTimeOff}
+                          onTimeOff={userOnTimeOff[user.personId]}
+                          goingOnTimeOff={userGoingOnTimeOff[user.personId]}
                         />
                         {timeEntriesList.length > 0 &&
                           timeEntriesList
@@ -764,8 +788,7 @@ const TeamMemberTasks = React.memo(props => {
                       </Fragment>
                     );
                   }
-                })}
-              </>
+                })
             )}
           </tbody>
         </Table>