Merge pull request #2790 from OneCommunityGlobal/Rahul-Fix-Reports-Te…

…am-Page-Layout-On-Small-Screens

Rahul Fix Reports Team Page On Small Screens

src/components/Reports/TeamReport/TeamReport.css

@@ -5,8 +5,9 @@
 }
 
 .team-report-main-info-wrapper {
-  margin-top: 24px;
-  height: 60px;
+  margin-top: 10px;
+  height:fit-content;
+  width: 100%;
 }
 
 .team-report-main-info-id {
@@ -88,4 +89,10 @@
   align-items: flex-start;
   justify-content: center;
   gap: 0.5rem;
+}
+
+.team-report-last-updated {
+  font-size: 1rem;
+  margin-top: 0;
+  margin-left: -80px;
 }

src/components/Reports/TeamReport/TeamReport.jsx

@@ -28,20 +28,20 @@ import { ReportPage } from '../sharedComponents/ReportPage';
 import UserLoginPrivileges from './components/UserLoginPrivileges';
 import { useRef } from 'react';
 
-const parser = (val) => {
+const parser = val => {
   try {
     return JSON.parse(val);
   } catch (error) {
-    console.error("Failed to parse state:", error);
+    console.error('Failed to parse state:', error);
     return null;
   }
 };
 
 const persistConfig = {
   key: 'root',
   storage,
-  serialize: (outboundState) => compressToUTF16(JSON.stringify(outboundState)),
-  deserialize: (inboundState) => parser(decompressFromUTF16(inboundState))
+  serialize: outboundState => compressToUTF16(JSON.stringify(outboundState)),
+  deserialize: inboundState => parser(decompressFromUTF16(inboundState)),
 };
 
 const persistedReducer = persistReducer(persistConfig, rootReducers);
@@ -137,29 +137,32 @@ const [teamDataLoading,setTeamDataLoading] = useState(false);
     [],
   );
 
-  const handleSelectTeam = useCallback((event, selectedTeam, index) => {
-    if (event.target.checked) {
-      if (selectedTeams.length < 4) {
-        setSelectedTeams([...selectedTeams, { selectedTeam, index }]);
+  const handleSelectTeam = useCallback(
+    (event, selectedTeam, index) => {
+      if (event.target.checked) {
+        if (selectedTeams.length < 4) {
+          setSelectedTeams([...selectedTeams, { selectedTeam, index }]);
+        }
+      } else {
+        setSelectedTeams(prevSelectedTeams =>
+          prevSelectedTeams.filter(team => team.selectedTeam._id !== selectedTeam._id),
+        );
       }
-    } else {
-      setSelectedTeams(prevSelectedTeams =>
-        prevSelectedTeams.filter(team => team.selectedTeam._id !== selectedTeam._id),
-      );
-    }
-  }, [selectedTeams]);
+    },
+    [selectedTeams],
+  );
 
-  const debounceSearchByName = debounce((value) => {
+  const debounceSearchByName = debounce(value => {
     setSearchParams(prevParams => ({
       ...prevParams,
       teamName: value,
     }));
-   }, 300);
-   
-   function handleSearchByName(event) {
-     event.persist();
-     debounceSearchByName(event.target.value);
-   }
+  }, 300);
+
+  function handleSearchByName(event) {
+    event.persist();
+    debounceSearchByName(event.target.value);
+  }
 
   function handleCheckboxChange(event) {
     const { id, checked } = event.target;
@@ -188,18 +191,24 @@ const [teamDataLoading,setTeamDataLoading] = useState(false);
   }
 
   const memoizedSearchResults = useMemo(() => {
-    return allTeams.filter(team => {
-      const isMatchedName = team.teamName.toLowerCase().includes(searchParams.teamName.toLowerCase());
-      const isMatchedCreatedDate = moment(team.createdDatetime).isSameOrAfter(
-        moment(searchParams.createdAt).startOf('day'),
-      );
-      const isMatchedModifiedDate = moment(team.modifiedDatetime).isSameOrAfter(
-        moment(searchParams.modifiedAt).startOf('day'),
-      );
-      const isActive = team.isActive === searchParams.isActive;
-      const isInactive = team.isActive !== searchParams.isInactive;
-      return isMatchedName && isMatchedCreatedDate && isMatchedModifiedDate && (isActive || isInactive);
-    }).slice(0, 5);
+    return allTeams
+      .filter(team => {
+        const isMatchedName = team.teamName
+          .toLowerCase()
+          .includes(searchParams.teamName.toLowerCase());
+        const isMatchedCreatedDate = moment(team.createdDatetime).isSameOrAfter(
+          moment(searchParams.createdAt).startOf('day'),
+        );
+        const isMatchedModifiedDate = moment(team.modifiedDatetime).isSameOrAfter(
+          moment(searchParams.modifiedAt).startOf('day'),
+        );
+        const isActive = team.isActive === searchParams.isActive;
+        const isInactive = team.isActive !== searchParams.isInactive;
+        return (
+          isMatchedName && isMatchedCreatedDate && isMatchedModifiedDate && (isActive || isInactive)
+        );
+      })
+      .slice(0, 5);
   }, [allTeams, searchParams]);
 
   function handleDate(date) {
@@ -275,7 +284,7 @@ const [teamDataLoading,setTeamDataLoading] = useState(false);
       fetchTeamMembers(match.params.teamId);
       fetchAllUserTeams();
     }
-  
+
     return () => {
       isMounted = false; // Set the flag as false when the component unmounts
     };
@@ -407,18 +416,13 @@ const [teamDataLoading,setTeamDataLoading] = useState(false);
     >
       <ReportPage.ReportBlock className="team-report-main-info-wrapper" darkMode={darkMode}>
         <div className="team-report-main-info-id">
-          <div style={{ wordBreak: 'break-all', color: darkMode ? 'white' : ''}} className="update-date">
-            <div>
-              <span className="team-report-star">&#9733;</span> Team ID: {team?._id}
+          <div className="team-info-container" style={{ color: darkMode ? 'white' : '' }}>
+            <div className="team-report-id">
+              <span className="team-report-star">&#9733;</span> Team ID: {team._id}
+            </div>
+            <div className="team-report-last-updated" style={{ color: darkMode ? 'white' : '' }}>
+              Last updated: {moment(team.modifiedDatetime).format('MMM-DD-YY')}
             </div>
-            {/*
-          This LoginPrivilegesSimulation component will be removed once the backend team link the login privileges.
-          It is just to simulate the toggle between the login privileges. The logic is
-          inside the userLoginPrivileges.jsx file.
-          */}
-            {/* <LoginPrivileges selectedInput={selectedInput} handleInputChange={handleInputChange} />  */}
-            Last updated:
-            {moment(team?.modifiedDatetime).format('MMM-DD-YY')}
           </div>
         </div>
       </ReportPage.ReportBlock>
@@ -440,7 +444,10 @@ const [teamDataLoading,setTeamDataLoading] = useState(false);
             <div className="d-flex align-items-center">
               <div className="d-flex flex-column">
                 {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                <label htmlFor="search-by-name" className={`text-left ${darkMode ? 'text-light' : ''}`}>
+                <label
+                  htmlFor="search-by-name"
+                  className={`text-left ${darkMode ? 'text-light' : ''}`}
+                >
                   Name
                 </label>
                 <input
@@ -455,7 +462,10 @@ const [teamDataLoading,setTeamDataLoading] = useState(false);
                 <div id="task_startDate" className="date-picker-item">
                   <div className="d-flex flex-column">
                     {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                    <label htmlFor="search-by-startDate" className={`text-left ${darkMode ? 'text-light' : ''}`}>
+                    <label
+                      htmlFor="search-by-startDate"
+                      className={`text-left ${darkMode ? 'text-light' : ''}`}
+                    >
                       Created After
                     </label>
                     <DatePicker
@@ -474,7 +484,10 @@ const [teamDataLoading,setTeamDataLoading] = useState(false);
                 <div id="task_EndDate" className="date-picker-item">
                   <div className="d-flex flex-column">
                     {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                    <label htmlFor="search-by-endDate" className={`text-left ${darkMode ? 'text-light' : ''}`}>
+                    <label
+                      htmlFor="search-by-endDate"
+                      className={`text-left ${darkMode ? 'text-light' : ''}`}
+                    >
                       Modified After
                     </label>
                     <DatePicker
@@ -493,7 +506,9 @@ const [teamDataLoading,setTeamDataLoading] = useState(false);
                 <div className="active-inactive-container">
                   <div className="active-inactive-container-item mr-2">
                     {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                    <label htmlFor="active" className={darkMode ? 'text-light' : ''}>Active</label>
+                    <label htmlFor="active" className={darkMode ? 'text-light' : ''}>
+                      Active
+                    </label>
                     <input
                       onChange={event => handleCheckboxChange(event)}
                       type="checkbox"
@@ -504,7 +519,9 @@ const [teamDataLoading,setTeamDataLoading] = useState(false);
                   </div>
                   <div className="active-inactive-container-item">
                     {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                    <label htmlFor="inactive" className={darkMode ? 'text-light' : ''}>Inactive</label>
+                    <label htmlFor="inactive" className={darkMode ? 'text-light' : ''}>
+                      Inactive
+                    </label>
                     <input
                       onChange={event => handleCheckboxChange(event)}
                       type="checkbox"

src/components/Reports/TeamReport/components/ReportCharts.css

@@ -64,9 +64,9 @@
 
 .pie-chart-info-key {
   font-size: 16px;
-  align-items: center;
-  width: auto;
-  margin: 4px 0;
+  width: 100%;
+  margin: auto;
+  text-align: left;
 }
 
 .pie-chart-info-value {

src/components/Reports/sharedComponents/ReportPage/ReportPage.css

@@ -19,13 +19,17 @@
   /* padding-bottom: 24px; */
 }
 
-
 .report-page-profile {
-  padding-right: 24px;
-  /* background-color: #f1ebf7; */
   border-top-left-radius: 25px;
   border-radius: 25px;
-  margin-bottom: 24px;
+  margin-bottom: 10px;
+  width: 100%;
+}
+.report-page-profile-dark {
+  border-top-left-radius: 25px;
+  border-radius: 25px;
+  margin-bottom: 10px;
+  width: 100%;
 }
 
 @media (max-width: 1300px) {
@@ -69,15 +73,10 @@
 
 .project-header{
   font-size: 32px;
-  padding: 10px 10px;
+  padding: 5px 5px;
   text-align: center;
   background-color:white;
   border-radius: 20px;
   box-shadow: 0 0 12px #eae1f6;
+  width: 100%;
 }
-
-@media (max-width: 450px){
-  .project-header{
-    margin-top: 1rem;
-  }
-}

src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css

@@ -1,5 +1,5 @@
 .report-header {
-  min-height: 35vh;
+  min-height: 25vh;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -17,7 +17,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
   background: #a780d9;
   border: 3px solid #e5daf0;
 }