update

src/components/CustomDatagrid/CustomDatagrid.tsx

@@ -197,6 +197,7 @@ const CustomDatagrid: React.FC<CustomDatagridProps> = ({
                 rows={rowsWithDefaultValues}
                 columns={modifiedColumns}
                 editMode="row"
+                getRowHeight={() => 'auto'}
                 onRowClick={onRowClick}
                 checkboxSelection={checkboxSelection}
                 onRowSelectionModelChange={onRowSelectionModelChange}
@@ -229,6 +230,7 @@ const CustomDatagrid: React.FC<CustomDatagridProps> = ({
                 rows={rowsWithDefaultValues}
                 columns={modifiedColumns}
                 editMode="row"
+                getRowHeight={() => 'auto'}
                 onRowClick={onRowClick}
                 checkboxSelection={checkboxSelection}
                 onRowSelectionModelChange={onRowSelectionModelChange}
@@ -261,6 +263,7 @@ const CustomDatagrid: React.FC<CustomDatagridProps> = ({
           rows={rowsWithDefaultValues}
           columns={modifiedColumns}
           editMode="row"
+          getRowHeight={() => 'auto'}
           onRowClick={onRowClick}
           checkboxSelection={checkboxSelection}
           onRowSelectionModelChange={onRowSelectionModelChange}
@@ -294,6 +297,7 @@ const CustomDatagrid: React.FC<CustomDatagridProps> = ({
           rows={rowsWithDefaultValues}
           columns={modifiedColumns}
           editMode="row"
+          getRowHeight={() => 'auto'}
           onRowClick={onRowClick}
           style={{ marginRight: 0 }}
           checkboxSelection={checkboxSelection}

src/components/ProgressByClient/ProgressByClient.tsx

@@ -246,7 +246,22 @@ const ProgressByClient: React.FC<Props> = () => {
       id: "expectedStage",
       field: "expectedStage",
       headerName: "Expected Stage",
-      minWidth: 300
+      minWidth: 300,
+      renderCell: (params: any) => {
+        if (params.row.expectedStage != null){
+          const expectedStage = params.row.expectedStage;
+          const lines = expectedStage.split(",").map((line:any, index:any) => (
+            <React.Fragment key={index}>
+              {line.trim()}
+              <br />
+            </React.Fragment>
+          ));
+          return <div>{lines}</div>;
+        } else {
+          return <div>-</div>;
+        }
+        
+      },
     },
     {
       id: "budgetedManhour",

src/components/ProgressByTeam/ProgressByTeam.tsx

@@ -76,6 +76,11 @@ const ProgressByTeam: React.FC = () => {
   "#d4feed", "#0ab2ff", "#ff88a2", "#4fda21", "#cefb2f",
   "#d1fef0", "#04afff", "#ff859e", "#4bdd15", "#ccfb2b"];
   const [teamProjectResult, setTeamProjectResult]:any[] = useState([]);
+  const [currentPageProjectList, setCurrentPageProjectList]: any[] = React.useState([]);
+  const [currentPagePercentage, setCurrentPagePercentage]: any[] = React.useState([]);
+  const [currentPageColor, setCurrentPageColor]: any[] = React.useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const recordsPerPage = 10;
 
   const fetchData = async () => {
     if (teamLeadId) {
@@ -277,7 +282,22 @@ const ProgressByTeam: React.FC = () => {
       id: "expectedStage",
       field: "expectedStage",
       headerName: "Expected Stage",
-      minWidth: 300
+      minWidth: 300,
+      renderCell: (params: any) => {
+        if (params.row.expectedStage != null){
+          const expectedStage = params.row.expectedStage;
+          const lines = expectedStage.split(",").map((line:any, index:any) => (
+            <React.Fragment key={index}>
+              {line.trim()}
+              <br />
+            </React.Fragment>
+          ));
+          return <div>{lines}</div>;
+        } else {
+          return <div>-</div>;
+        }
+        
+      },
     },
     {
       id: "budgetedManhour",
@@ -446,33 +466,9 @@ const ProgressByTeam: React.FC = () => {
     },
     series: [{
       name: "Project Resource Consumption Percentage",
-      data: chartManhourConsumptionPercentage,
+      data: currentPagePercentage,
     },],
-    colors: ["#f57f90", "#94f7d6", "#87c5f5", "#ab95f5", "#fcd68b",
-    "#f58a9b", "#8ef4d1", "#92caf9", "#a798f9", "#fad287",
-    "#f595a6", "#88f1cc", "#9dcff5", "#a39bf5", "#f8de83",
-    "#f5a0b1", "#82eec7", "#a8d4f1", "#9f9ef1", "#f6ea7f",
-    "#f5abb4", "#7cebca", "#b3d9ed", "#9ba1ed", "#f4f67b",
-    "#f5b6b7", "#76e8cd", "#bed6e9", "#97a4e9", "#f2fa77",
-    "#f5c1ba", "#70e5d0", "#c9d3e5", "#93a7e5", "#f0fe73",
-    "#f5ccbd", "#6ae2d3", "#d4d0e1", "#8faae1", "#eefe6f",
-    "#f5d7c0", "#64dfd6", "#dfc5dd", "#8badd5", "#ecfe6b",
-    "#f5e2c3", "#5edcd9", "#eabada", "#87b0c9", "#eafc67",
-    "#f5edc6", "#58d9dc", "#f5afd6", "#83b3bd", "#e8fc63",
-    "#f5f8c9", "#52d6df", "#ffacd2", "#7fb6b1", "#e6fc5f",
-    "#f5ffcc", "#4cd3e2", "#ffa9ce", "#7bb9a5", "#e4fc5b",
-    "#f2ffcf", "#46d0e5", "#ffa6ca", "#77bc99", "#e2fc57",
-    "#efffd2", "#40cde8", "#ffa3c6", "#73bf8d", "#e0fc53",
-    "#ecffd5", "#3acaeb", "#ffa0c2", "#6fc281", "#defb4f",
-    "#e9ffd8", "#34c7ee", "#ff9dbe", "#6bc575", "#dcfb4b",
-    "#e6ffdb", "#2ec4f1", "#ff9aba", "#67c869", "#dafb47",
-    "#e3ffde", "#28c1f4", "#ff97b6", "#63cb5d", "#d8fb43",
-    "#e0ffe1", "#22bef7", "#ff94b2", "#5fce51", "#d6fb3f",
-    "#ddfee4", "#1cbbfa", "#ff91ae", "#5bd145", "#d4fb3b",
-    "#dafee7", "#16b8fd", "#ff8eaa", "#57d439", "#d2fb37",
-    "#d7feea", "#10b5ff", "#ff8ba6", "#53d72d", "#d0fb33",
-    "#d4feed", "#0ab2ff", "#ff88a2", "#4fda21", "#cefb2f",
-    "#d1fef0", "#04afff", "#ff859e", "#4bdd15", "#ccfb2b"],
+    colors: currentPageColor,
     plotOptions: {
       bar: {
         horizontal: true,
@@ -483,7 +479,7 @@ const ProgressByTeam: React.FC = () => {
       enabled: false,
     },
     xaxis: {
-      categories: chartProjectName,
+      categories: currentPageProjectList,
     },
     yaxis: {
       title: {
@@ -563,6 +559,32 @@ const ProgressByTeam: React.FC = () => {
     }
   };
 
+  const startIndex = (currentPage - 1) * recordsPerPage;
+  const endIndex = startIndex + recordsPerPage;
+  useEffect(() => {
+    console.log(chartManhourConsumptionPercentage)
+  const currentPageProjectData = chartProjectName.slice(startIndex, endIndex)
+  const currentPageData = chartManhourConsumptionPercentage.slice(startIndex, endIndex);
+  const colorArray = color.slice(startIndex, endIndex);
+  console.log(currentPage)
+  console.log(Math.ceil(chartManhourConsumptionPercentage.length / recordsPerPage))
+  setCurrentPageProjectList(currentPageProjectData)
+  setCurrentPagePercentage(currentPageData)
+  setCurrentPageColor(colorArray)
+  }, [chartManhourConsumptionPercentage,currentPage]);
+
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (endIndex < chartManhourConsumptionPercentage.length) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
   const applySearch = (data: any) => {
     console.log(data);
     setSearchCriteria(data);
@@ -582,6 +604,38 @@ const ProgressByTeam: React.FC = () => {
                 type="bar"
                 height={350}
               />
+              <div className="float-right mr-4 mb-10">
+                  {currentPage === 1 && (
+                    <button className="bg-blue-500 text-white font-bold py-2 px-4 opacity-50 cursor-not-allowed rounded-l">
+                    Pervious
+                    </button>
+                  )}
+                  {currentPage !== 1 && (
+                    <button onClick={handlePrevPage} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 outline-none rounded-l">
+                    Previous
+                    </button>
+                  )}
+                  {endIndex >= chartManhourConsumptionPercentage.length && (
+                    <button className="bg-blue-500 text-white font-bold py-2 px-4 opacity-50 cursor-not-allowed rounded-r mr-2">
+                    Next
+                    </button>
+                  )}
+                  {endIndex < chartManhourConsumptionPercentage.length && (
+                  <button onClick={handleNextPage} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 outline-none rounded-r mr-2">
+                    Next
+                  </button>
+                  )}
+                  Page&nbsp;
+                  {chartManhourConsumptionPercentage.length === 0 && (
+                    0
+                  )}
+                  {chartManhourConsumptionPercentage.length > 0 && (
+                    currentPage
+                  )}
+                  &nbsp;of&nbsp;
+                  {Math.ceil(chartManhourConsumptionPercentage.length / recordsPerPage)}
+                  
+                 </div>
             </div>
             {/* <div style={{display:"inline-block",width:"20%",verticalAlign:"top",textAlign:"center"}}>
                     <p><strong><u>Stage Deadline</u></strong></p>

src/components/StaffUtilization/StaffUtilization.tsx

@@ -556,6 +556,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
   }
 
   const fetchWeeklyIndividualManhoursData = async () => {
+    console.log(weeklyValueByIndividualStaff)
     const fetchResult = await fetchWeeklyIndividualStaffManhours(staffId, weeklyValueByIndividualStaff.format('YYYY-MM-DD'), weeklyValueByIndividualStaff.add(6, 'days').format('YYYY-MM-DD'));
     console.log(fetchResult)
     const manhoursResult = fetchResult[0].individualStaffManhoursSpentWeekly
@@ -688,7 +689,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
     if (individualStaffManhoursSpentSelect === "Daily") {
       fetchDailyIndividualManhoursData()
     }
-  }, [staffId, totalManHoursByIndividualStaffDailyFromValue]);
+  }, [staffId, totalManHoursByIndividualStaffDailyFromValue, individualStaffManhoursSpentSelect]);
 
   useEffect(() => {
     if (individualStaffManhoursSpentSelect === "Weekly") {
@@ -1765,7 +1766,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                         <button
                           onClick={() => {
                             individualStaffManhoursSpentOnClick("Weekly")
-                            fetchMonthlyIndividualManhoursData()
+                            fetchWeeklyIndividualManhoursData()
                           }
                           }
                           className="hover:cursor-pointer hover:bg-violet-50 text-lg bg-transparent border-violet-500 text-violet-500 border-solid w-32"
@@ -1826,7 +1827,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                         <button
                           onClick={() => {
                             individualStaffManhoursSpentOnClick("Weekly")
-                            fetchMonthlyIndividualManhoursData()
+                            fetchWeeklyIndividualManhoursData()
                           }
                           }
                           className="hover:cursor-pointer hover:bg-violet-50 text-lg bg-transparent border-violet-500 text-violet-500 border-solid w-32"