Sayali: add Expand All/Truncate All button to Team Member Tasks header

src/components/TeamMemberTasks/TeamMemberTask.jsx

@@ -8,7 +8,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader, Progress, Table } from 'reactstrap';
 import CopyToClipboard from '~/components/common/Clipboard/CopyToClipboard';
 import UserStateDisplay from '../UserState/UserStateDisplay';
@@ -53,6 +53,7 @@ const TeamMemberTask = React.memo(
     onCatalogChange,
     userStateSelection = [],
     onSelectionChange,
+    expandAll = false,
   }) => {
     const darkMode = useSelector(state => state.theme.darkMode);
     const taskCounts = useSelector(state => state.dashboard?.taskCounts ?? {});
@@ -133,6 +134,9 @@ const TeamMemberTask = React.memo(
 
     const canTruncate = activeTasks.length > NUM_TASKS_SHOW_TRUNCATE;
     const [isTruncated, setIsTruncated] = useState(canTruncate);
+    useEffect(() => {
+      if (canTruncate) setIsTruncated(!expandAll);
+    }, [expandAll, canTruncate]);
     const [isTimeOffContentOpen, setIsTimeOffContentOpen] = useState(
       showWhoHasTimeOff && (onTimeOff || goingOnTimeOff),
     );
@@ -831,6 +835,7 @@ TeamMemberTask.propTypes = {
   onCatalogChange: PropTypes.func,
   userStateSelection: PropTypes.array,
   onSelectionChange: PropTypes.func,
+  expandAll: PropTypes.bool,
 };
 
 TeamMemberTask.displayName = 'TeamMemberTask';

src/components/TeamMemberTasks/TeamMemberTasks.jsx

@@ -68,6 +68,7 @@
   const [userStateCatalog, setUserStateCatalog] = useState([]);
   const [userStateSelections, setUserStateSelections] = useState({});
   const [selectionsLoaded, setSelectionsLoaded] = useState(false);
+  const [expandAll, setExpandAll] = useState(false);
 
   useEffect(() => {
     axios
@@ -78,7 +79,10 @@
 
   // Fetch all selections in ONE call once teamList is ready
   useEffect(() => {
-    if (usersWithTasks.length === 0) return;
+    if (usersWithTasks.length === 0) {
+      setSelectionsLoaded(true);
+      return;
+    }
     const userIds = usersWithTasks.map(u => u.personId);
     axios
       .post(ENDPOINTS.USER_STATE_SELECTIONS_BATCH, { userIds })
@@ -448,6 +452,13 @@
       <header className={styles['header-box']}>
         <section className={[styles.dFlex, styles.flexColumn].join(' ')}>
           <h1 className={darkMode ? styles.textLight : ''}>Team Member Tasks</h1>
+          <button
+            type="button"
+            className={`btn btn-sm ${darkMode ? 'btn-outline-light' : 'btn-outline-secondary'}`}
+            onClick={() => setExpandAll(prev => !prev)}
+          >
+            {expandAll ? 'Truncate All' : 'Expand All'}
+          </button>
         </section>
 
         {finishLoading ? (
@@ -762,10 +773,10 @@
                         onSelectionChange={(uid, updated) =>
                           setUserStateSelections(prev => ({ ...prev, [uid]: updated }))
                         }
+                        expandAll={expandAll}
                       />
                     );
                   }
-
                   return (
                     <Fragment key={user.personId}>
                       <TeamMemberTask
@@ -794,6 +805,7 @@
                         onSelectionChange={(uid, updated) =>
                           setUserStateSelections(prev => ({ ...prev, [uid]: updated }))
                         }
+                        expandAll={expandAll}
                       />
 
                       {timeEntriesList.length > 0 &&