update dashboard

src/app/api/financialsummary/actions.ts

@@ -28,6 +28,7 @@ export interface FinancialSummaryByProjectResult {
   projectCode: string;
   projectName: string;
   customerName: string;
+  subsidiaryName: string;
   projectNo: number;
   totalFee: number;
   totalBudget: number;

src/app/api/staffUtilization/index.ts

@@ -34,6 +34,31 @@ export interface weeklyUnsubmitResult {
   UnsubmittedCount: number;
 }
 
+export interface records {
+  id: number;
+  name: string;
+  label: string;
+  // team: Team[];
+}
+
+export interface IndividualStaffManhoursDaily {
+  individualStaffManhoursSpentByDay: any[];
+  individualStaffTotalManhoursSpentByDay: any[];
+  individualStaffTotalLeaveHoursByDay: any[];
+}
+
+export interface IndividualStaffManhoursWeekly {
+  individualStaffManhoursSpentWeekly: any[];
+  individualStaffTotalManhoursSpentWeekly: any[];
+  individualStaffTotalLeaveHoursWeekly: any[];
+}
+
+export interface IndividualStaffManhoursMonthly {
+  individualStaffManhoursSpentByMonth: any[];
+  individualStaffTotalManhoursSpentByMonth: any[];
+  individualStaffTotalLeaveHoursByMonth: any[];
+}
+
 export const fetchTeamCombo = cache(async () => {
   return serverFetchJson<teamCombo>(`${BASE_API_URL}/team/combo`);
 });
@@ -56,3 +81,21 @@ export const fetchWeeklyUnsubmit = cache(async (teamId:number,startdate:string,
 export const fetchMonthlyUnsubmit = cache(async (teamId:number,startdate:string, enddate:string, publicHolidayList:string) => {
   return serverFetchJson<weeklyUnsubmitResult[]>(`${BASE_API_URL}/dashboard/searchMonthlyUnsubmittedTimeSheet?teamId=${teamId}&startdate=${startdate}&enddate=${enddate}&publicHolidayList=${publicHolidayList}`);
 });
+
+export const fetchStaffCombo = cache(async () => {
+  return serverFetchJson<records[]>(`${BASE_API_URL}/dashboard/searchStaffCombo`, {
+    next: { tags: ["staffs"] },
+  });
+});
+
+export const fetchDailyIndividualStaffManhours = cache(async (staffId:number,startdate:string) => {
+  return serverFetchJson<IndividualStaffManhoursDaily[]>(`${BASE_API_URL}/dashboard/searchTotalManhoursSpentByStaffDaily?staffId=${staffId}&startdate=${startdate}`);
+});
+
+export const fetchWeeklyIndividualStaffManhours = cache(async (staffId:number,startdate:string, enddate:string) => {
+  return serverFetchJson<IndividualStaffManhoursWeekly[]>(`${BASE_API_URL}/dashboard/searchTotalManhoursSpentByStaffWeekly?staffId=${staffId}&startdate=${startdate}&enddate=${enddate}`);
+});
+
+export const fetchMonthlyIndividualStaffManhours = cache(async (staffId:number,startdate:string) => {
+  return serverFetchJson<IndividualStaffManhoursMonthly[]>(`${BASE_API_URL}/dashboard/searchTotalManhoursSpentByStaffByMonth?staffId=${staffId}&startdate=${startdate}`);
+});

src/components/CompanyTeamCashFlow/CompanyTeamCashFlow.tsx

@@ -56,8 +56,8 @@ const CompanyTeamCashFlow: React.FC = () => {
         cumulativeIncome.push(cashFlowMonthlyChartData[0].teamCashFlowIncome[i].cumulativeIncome)
       }
       for (var i = 0; i < cashFlowMonthlyChartData[0].teamCashFlowExpenditure.length; i++) {
-        if (rightMax < cashFlowMonthlyChartData[0].teamCashFlowIncome[i].income || rightMax < cashFlowMonthlyChartData[0].teamCashFlowExpenditure[i].expenditure){
-          rightMax = Math.max(cashFlowMonthlyChartData[0].teamCashFlowIncome[i].income,cashFlowMonthlyChartData[0].teamCashFlowExpenditure[i].expenditure)
+        if (rightMax < cashFlowMonthlyChartData[0].teamCashFlowIncome[i].cumulativeIncome || rightMax < cashFlowMonthlyChartData[0].teamCashFlowExpenditure[i].cumulativeExpenditure){
+          rightMax = Math.max(cashFlowMonthlyChartData[0].teamCashFlowIncome[i].cumulativeIncome,cashFlowMonthlyChartData[0].teamCashFlowExpenditure[i].cumulativeExpenditure)
         }
         monthlyExpenditure.push(cashFlowMonthlyChartData[0].teamCashFlowExpenditure[i].expenditure)
         cumulativeExpenditure.push(cashFlowMonthlyChartData[0].teamCashFlowExpenditure[i].cumulativeExpenditure)
@@ -203,18 +203,18 @@ const CompanyTeamCashFlow: React.FC = () => {
     },
     xaxis: {
       categories: [
-        "Q1",
-        "Q2",
-        "Q3",
-        "Q4",
-        "Q5",
-        "Q6",
-        "Q7",
-        "Q8",
-        "Q9",
-        "Q10",
-        "Q11",
-        "Q12",
+        "JAN",
+        "FEB",
+        "MAR",
+        "APR",
+        "MAY",
+        "JUN",
+        "JUL",
+        "AUG",
+        "SEP",
+        "OCT",
+        "NOV",
+        "DEC",
       ],
     },
     yaxis: [
@@ -233,7 +233,7 @@ const CompanyTeamCashFlow: React.FC = () => {
       },
       {
         show: false,
-        seriesName: "Monthly_Expenditure",
+        seriesName: "Monthly Expenditure",
         title: {
           text: "Monthly Expenditure (HKD)",
         },
@@ -242,7 +242,7 @@ const CompanyTeamCashFlow: React.FC = () => {
         tickAmount: 5,
       },
       {
-        seriesName: "Cumulative_Income",
+        seriesName: "Cumulative Income",
         opposite: true,
         title: {
           text: "Cumulative Income and Expenditure(HKD)",
@@ -258,7 +258,7 @@ const CompanyTeamCashFlow: React.FC = () => {
       },
       {
         show: false,
-        seriesName: "Cumulative_Expenditure",
+        seriesName: "Cumulative Expenditure",
         opposite: true,
         title: {
           text: "Cumulative Expenditure (HKD)",
@@ -274,25 +274,25 @@ const CompanyTeamCashFlow: React.FC = () => {
     annotations: {},
     series: [
       {
-        name: "Monthly_Income",
+        name: "Monthly Income",
         type: "column",
         color: "#ffde91",
         data: monthlyIncomeList,
       },
       {
-        name: "Monthly_Expenditure",
+        name: "Monthly Expenditure",
         type: "column",
         color: "#82b59a",
         data: monthlyExpenditureList,
       },
       {
-        name: "Cumulative_Income",
+        name: "Cumulative Income",
         type: "line",
         color: "#EE6D7A",
         data: monthlyCumulativeIncomeList,
       },
       {
-        name: "Cumulative_Expenditure",
+        name: "Cumulative Expenditure",
         type: "line",
         color: "#7cd3f2",
         data: monthlyCumulativeExpenditureList,

src/components/ProjectCashFlow/ProjectCashFlow.tsx

@@ -41,9 +41,9 @@ const ProjectCashFlow: React.FC = () => {
   const [monthlyCumulativeIncomeList, setMonthlyCumulativeIncomeList]: any[] = React.useState([]);
   const [monthlyExpenditureList, setMonthlyExpenditureList]: any[] = React.useState([]);
   const [monthlyCumulativeExpenditureList, setMonthlyCumulativeExpenditureList]: any[] = React.useState([]);
-  const [monthlyChartLeftMax, setMonthlyChartLeftMax]: any[] = React.useState(0);
-  const [monthlyChartRightMax, setMonthlyChartRightMax]: any[] = React.useState(0);
-  const [monthlyAnticipateLeftMax, setMonthlyAnticipateLeftMax]: any[] = React.useState(0);
+  const [monthlyChartLeftMax, setMonthlyChartLeftMax]: any[] = React.useState(10);
+  const [monthlyChartRightMax, setMonthlyChartRightMax]: any[] = React.useState(10);
+  const [monthlyAnticipateLeftMax, setMonthlyAnticipateLeftMax]: any[] = React.useState(10);
   const [receivedPercentage,setReceivedPercentage]: any[] = React.useState(0);
   const [totalBudget,setTotalBudget]: any[] = React.useState(0);
   const [totalInvoiced,setTotalInvoiced]: any[] = React.useState(0);
@@ -335,18 +335,18 @@ const ProjectCashFlow: React.FC = () => {
     },
     xaxis: {
       categories: [
-        "Q1",
-        "Q2",
-        "Q3",
-        "Q4",
-        "Q5",
-        "Q6",
-        "Q7",
-        "Q8",
-        "Q9",
-        "Q10",
-        "Q11",
-        "Q12",
+        "JAN",
+        "FEB",
+        "MAR",
+        "APR",
+        "MAY",
+        "JUN",
+        "JUL",
+        "AUG",
+        "SEP",
+        "OCT",
+        "NOV",
+        "DEC",
       ],
     },
     yaxis: [
@@ -359,13 +359,13 @@ const ProjectCashFlow: React.FC = () => {
         tickAmount: 5,
         labels: {
           formatter: function (val) {
-              return val.toLocaleString()
+              return val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
           }
         }
       },
       {
         show: false,
-        seriesName: "Monthly_Expenditure",
+        seriesName: "Monthly Expenditure",
         title: {
           text: "Monthly Expenditure (HKD)",
         },
@@ -374,7 +374,7 @@ const ProjectCashFlow: React.FC = () => {
         tickAmount: 5,
       },
       {
-        seriesName: "Cumulative_Income",
+        seriesName: "Cumulative Income",
         opposite: true,
         title: {
           text: "Cumulative Income and Expenditure(HKD)",
@@ -384,13 +384,13 @@ const ProjectCashFlow: React.FC = () => {
         tickAmount: 5,
         labels: {
           formatter: function (val) {
-              return val.toLocaleString()
+              return val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
           }
         }
       },
       {
         show: false,
-        seriesName: "Cumulative_Expenditure",
+        seriesName: "Cumulative Expenditure",
         opposite: true,
         title: {
           text: "Cumulative Expenditure (HKD)",
@@ -398,6 +398,7 @@ const ProjectCashFlow: React.FC = () => {
         min: 0,
         max: monthlyChartRightMax,
         tickAmount: 5,
+        
       },
     ],
     grid: {
@@ -406,25 +407,25 @@ const ProjectCashFlow: React.FC = () => {
     annotations: {},
     series: [
       {
-        name: "Monthly_Income",
+        name: "Monthly Income",
         type: "column",
         color: "#ffde91",
         data: monthlyIncomeList,
       },
       {
-        name: "Monthly_Expenditure",
+        name: "Monthly Expenditure",
         type: "column",
         color: "#82b59a",
         data: monthlyExpenditureList,
       },
       {
-        name: "Cumulative_Income",
+        name: "Cumulative Income",
         type: "line",
         color: "#EE6D7A",
         data: monthlyCumulativeIncomeList,
       },
       {
-        name: "Cumulative_Expenditure",
+        name: "Cumulative Expenditure",
         type: "line",
         color: "#7cd3f2",
         data: monthlyCumulativeExpenditureList,
@@ -458,18 +459,18 @@ const ProjectCashFlow: React.FC = () => {
     },
     xaxis: {
       categories: [
-        "Q1",
-        "Q2",
-        "Q3",
-        "Q4",
-        "Q5",
-        "Q6",
-        "Q7",
-        "Q8",
-        "Q9",
-        "Q10",
-        "Q11",
-        "Q12",
+        "JAN",
+        "FEB",
+        "MAR",
+        "APR",
+        "MAY",
+        "JUN",
+        "JUL",
+        "AUG",
+        "SEP",
+        "OCT",
+        "NOV",
+        "DEC",
       ],
     },
     yaxis: [
@@ -480,48 +481,13 @@ const ProjectCashFlow: React.FC = () => {
         min: 0,
         max: monthlyAnticipateLeftMax,
         tickAmount: 5,
-        // labels: {
-        //   formatter: function (val) {
-        //       return val.toLocaleString()
-        //   }
-        // }
+        
+        labels: {
+          formatter: function (val) {
+              return val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+          }
+        }
       },
-      // {
-      //   show: false,
-      //   seriesName: "Monthly_Expenditure",
-      //   title: {
-      //     text: "Monthly Expenditure (HKD)",
-      //   },
-      //   min: 0,
-      //   max: monthlyAnticipateLeftMax,
-      //   tickAmount: 5,
-      // },
-      // {
-      //   seriesName: "Cumulative_Income",
-      //   opposite: true,
-      //   title: {
-      //     text: "Cumulative Income and Expenditure(HKD)",
-      //   },
-      //   min: 0,
-      //   max: MonthlyAnticipateLeftMax,
-      //   tickAmount: 5,
-      //   labels: {
-      //     formatter: function (val) {
-      //         return val.toLocaleString()
-      //     }
-      //   }
-      // },
-      // {
-      //   show: false,
-      //   seriesName: "Cumulative_Expenditure",
-      //   opposite: true,
-      //   title: {
-      //     text: "Cumulative Expenditure (HKD)",
-      //   },
-      //   min: 0,
-      //   max: monthlyChartRightMax,
-      //   tickAmount: 5,
-      // },
     ],
     grid: {
       borderColor: "#f1f1f1",
@@ -529,13 +495,13 @@ const ProjectCashFlow: React.FC = () => {
     annotations: {},
     series: [
       {
-        name: "Monthly_Income",
+        name: "Monthly Income",
         type: "column",
         color: "#f1c48a",
         data: monthlyAnticipateIncomeList,
       },
       {
-        name: "Monthly_Expenditure",
+        name: "Monthly Expenditure",
         type: "column",
         color: "#89d7f3",
         data: monthlyAnticipateExpenditureList,

src/components/ProjectFinancialSummary/ProjectFinancialSummary.tsx

@@ -269,6 +269,12 @@ const columns2 = [
     headerName: "Client Name",
     minWidth:50,
   },
+  {
+    id: 'subsidiaryName',
+    field: 'subsidiaryName',
+    headerName: "Subsidiary",
+    minWidth:50,
+  },
   {
     id: 'cashFlowStatus',
     field: 'cashFlowStatus',

src/components/StaffUtilization/StaffUtilization.tsx

@@ -31,7 +31,7 @@ import { PickersDay, PickersDayProps } from "@mui/x-date-pickers/PickersDay";
 import { styled } from "@mui/material/styles";
 import Holidays from "date-holidays";
 import moment from "moment";
-import {fetchTeamCombo, fetchweeklyTeamTotalManhours, fetchmonthlyTeamTotalManhours,fetchTotalManhoursByGrade,fetchWeeklyUnsubmit,fetchMonthlyUnsubmit} from "@/app/api/staffUtilization";
+import {fetchTeamCombo, fetchweeklyTeamTotalManhours, fetchmonthlyTeamTotalManhours,fetchTotalManhoursByGrade,fetchWeeklyUnsubmit,fetchMonthlyUnsubmit,fetchStaffCombo,fetchDailyIndividualStaffManhours,fetchWeeklyIndividualStaffManhours,fetchMonthlyIndividualStaffManhours} from "@/app/api/staffUtilization";
 
 dayjs.extend(isBetweenPlugin);
 interface CustomPickerDayProps extends PickersDayProps<Dayjs> {
@@ -199,9 +199,13 @@ const StaffUtilization: React.FC = () => {
   const [totalManHoursMonthlyToValue, setTotalManHoursMonthlyToValue] =
     React.useState<Dayjs>(dayjs());
   const [unsubmitMonthlyFromValue, setUnsubmitMonthlyFromValue] =
-    React.useState<Dayjs>(dayjs(new Date()).subtract(6, "month"));
+    React.useState<Dayjs>(dayjs(new Date()));
   const [unsubmitMonthlyToValue, setUnsubmitMonthlyToValue] =
     React.useState<Dayjs>(dayjs());
+  const [indivdualManHoursMonthlyFromValue, setIndivdualManHoursMonthlyFromValue] =
+    React.useState<Dayjs>(dayjs());
+  const [indivdualManHoursMonthlyToValue, setIndivdualManHoursMonthlyToValue] =
+    React.useState<Dayjs>(dayjs());
   const [
     totalManHoursByStaffGradeMonthlyFromValue,
     setTotalManHoursByStaffGradeMonthlyFromValue,
@@ -221,7 +225,7 @@ const StaffUtilization: React.FC = () => {
   const [
     totalManHoursByIndividualStaffDailyFromValue,
     setTotalManHoursByIndividualStaffDailyFromValue,
-  ] = React.useState<Dayjs>(dayjs(new Date()).subtract(6, "day"));
+  ] = React.useState<Dayjs>(dayjs(new Date()));
   const [
     totalManHoursByIndividualStaffDailyToValue,
     setTotalManHoursByIndividualStaffDailyToValue,
@@ -241,17 +245,32 @@ const StaffUtilization: React.FC = () => {
   const [totalManhourByGradePlannedManhours, setTotalManhourByGradePlannedManhours]:any[] = React.useState([]);
   const [gradeNameList, setGradeNameList]:any[] = React.useState([]);
   const [teamManhoursTeamOptions, setTeamManhoursTeamOptions]: any[] = React.useState([]);
+  const [staffOptions, setStaffOptions]: any[] = React.useState([]);
   const [teamManhoursTeamId, setTeamManhoursTeamId]: any[] = React.useState(0);
   const [teamUnsubmitTeamId, setTeamUnsubmitTeamId]: any[] = React.useState(0);
+  const [staffId, setStaffId]: any[] = React.useState(0);
   const [unsubmitCount, setUnsubmitCount]: any[] = React.useState([]);
   const [unsubmitStaffList, setUnsubmitStaffList]: any[] = React.useState([]);
+  const [individualStaffProjectList, setIndividualStaffProjectList]: any[] = React.useState([]);
+  const [individualStaffManhours, setIndividualStaffManhours]:any[] = React.useState([]);
+  const [individualStaffManhoursPercentage, setIndividualStaffManhoursPercentage]:any[] = React.useState([]);
+  const [totalNormalConsumption, setTotalNormalConsumption]:any = React.useState('NA');
+  const [totalOtConsumption, setTotalOtConsumption]:any = React.useState('NA');
+  const [totalLeaveHours, setTotalLeaveHours]:any = React.useState('NA');
+
   const fetchComboData = async () => {
+    const staffComboList = []
     const teamComboList = []
     const teamCombo = await fetchTeamCombo();
+    const staffCombo = await fetchStaffCombo();
     for (var i = 0; i < teamCombo.records.length; i++) {
       teamComboList.push({value: teamCombo.records[i].id, label: teamCombo.records[i].label})
     }
+    for (var i = 0; i < staffCombo.length; i++) {
+      staffComboList.push({value: staffCombo[i].id, label: staffCombo[i].label})
+    }
     setTeamManhoursTeamOptions(teamComboList)
+    setStaffOptions(staffComboList)
   }
 
   const fetchWeeklyTeamManhourSpentData = async () => {
@@ -448,7 +467,6 @@ const StaffUtilization: React.FC = () => {
   }
   const fetchMonthlyUnsubmittedData = async () => {
     const fetchResult = await fetchMonthlyUnsubmit(teamUnsubmitTeamId, unsubmitMonthlyFromValue.format('YYYY-MM-DD'), unsubmitMonthlyToValue.endOf('month').format('YYYY-MM-DD'), holidayDates);
-    console.log(fetchResult)
     const result = []
     const staffList = []
     for (var i = 0; i < fetchResult.length; i++) {
@@ -458,8 +476,80 @@ const StaffUtilization: React.FC = () => {
     setUnsubmitCount(result)
     setUnsubmitStaffList(staffList)
   }
+  const fetchDailyIndividualManhoursData = async () => {
+    console.log(weeklyValueByIndividualStaff.add(6, 'days').format('YYYY-MM-DD'))
+    const fetchResult = await fetchDailyIndividualStaffManhours(staffId, totalManHoursByIndividualStaffDailyFromValue.format('YYYY-MM-DD'));
+    console.log(fetchResult)
+    const manhoursResult = fetchResult[0].individualStaffManhoursSpentByDay
+    const totalResult = fetchResult[0].individualStaffTotalManhoursSpentByDay
+    const leaveResult = fetchResult[0].individualStaffTotalLeaveHoursByDay
+    const result = []
+    const projectList = []
+    const percentageList = []
+    if (manhoursResult.length > 0) {
+      for (var i = 0; i < manhoursResult.length; i++) {
+        result.push(manhoursResult[i].manhours)
+        projectList.push(manhoursResult[i].projectName)
+        percentageList.push(manhoursResult[i].percentage)
+      }
+      setIndividualStaffProjectList(projectList)
+      setIndividualStaffManhours(result)
+      setIndividualStaffManhoursPercentage(percentageList)
+      setTotalNormalConsumption(totalResult[0].normalManhours)
+      setTotalOtConsumption(totalResult[0].otManhours)
+      setTotalLeaveHours(leaveResult[0].leaveHours)
+    }
+    
+  }
 
+  const fetchWeeklyIndividualManhoursData = async () => {
+    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
+    const totalResult = fetchResult[0].individualStaffTotalManhoursSpentWeekly
+    const leaveResult = fetchResult[0].individualStaffTotalLeaveHoursWeekly
+    const result = []
+    const projectList = []
+    const percentageList = []
+    if (manhoursResult.length > 0) {
+      for (var i = 0; i < manhoursResult.length; i++) {
+        result.push(manhoursResult[i].manhours)
+        projectList.push(manhoursResult[i].projectName)
+        percentageList.push(manhoursResult[i].percentage)
+      }
+      setIndividualStaffProjectList(projectList)
+      setIndividualStaffManhours(result)
+      setIndividualStaffManhoursPercentage(percentageList)
+      setTotalNormalConsumption(totalResult[0].normalManhours)
+      setTotalOtConsumption(totalResult[0].otManhours)
+      setTotalLeaveHours(leaveResult[0].leaveHours)
+    }
+    
+  }
 
+  const fetchMonthlyIndividualManhoursData = async () => {
+    const fetchResult = await fetchMonthlyIndividualStaffManhours(staffId,indivdualManHoursMonthlyFromValue.format('YYYY-MM-01'));
+    const manhoursResult = fetchResult[0].individualStaffManhoursSpentByMonth
+    const totalResult = fetchResult[0].individualStaffTotalManhoursSpentByMonth
+    const leaveResult = fetchResult[0].individualStaffTotalLeaveHoursByMonth
+    const result = []
+    const projectList = []
+    const percentageList = []
+    if (manhoursResult.length > 0) {
+      for (var i = 0; i < manhoursResult.length; i++) {
+        result.push(manhoursResult[i].manhours)
+        projectList.push(manhoursResult[i].projectName)
+        percentageList.push(manhoursResult[i].percentage)
+      }
+      setIndividualStaffProjectList(projectList)
+      setIndividualStaffManhours(result)
+      setIndividualStaffManhoursPercentage(percentageList)
+      setTotalNormalConsumption(totalResult[0].normalManhours)
+      setTotalOtConsumption(totalResult[0].otManhours)
+      setTotalLeaveHours(leaveResult[0].leaveHours)
+    }
+    
+  }
 
   useEffect(() => {
     fetchComboData()
@@ -500,7 +590,25 @@ const StaffUtilization: React.FC = () => {
     if (unsubmittedTimeSheetSelect === "Monthly"){
       fetchMonthlyUnsubmittedData()
     }
-   }, [unsubmitMonthlyFromValue, unsubmitMonthlyToValue]);
+   }, [teamUnsubmitTeamId,unsubmitMonthlyFromValue, unsubmitMonthlyToValue]);
+
+   useEffect(() => {
+    if (individualStaffManhoursSpentSelect === "Daily"){
+      fetchDailyIndividualManhoursData()
+    }
+   }, [staffId, totalManHoursByIndividualStaffDailyFromValue]);
+
+   useEffect(() => {
+    if (individualStaffManhoursSpentSelect === "Weekly"){
+      fetchWeeklyIndividualManhoursData()
+    }
+   }, [staffId, weeklyValueByIndividualStaff]);
+
+   useEffect(() => {
+    if (individualStaffManhoursSpentSelect === "Monthly"){
+      fetchMonthlyIndividualManhoursData()
+    }
+   }, [staffId, indivdualManHoursMonthlyFromValue]);
 
 
    
@@ -680,13 +788,7 @@ const StaffUtilization: React.FC = () => {
       enabled: true,
     },
     xaxis: {
-      categories: [
-        "Consultancy Project 123 (CUST-001, Subsidiary A)",
-        "Consultancy Project 456 (CUST-001, Subsidiary A)",
-        "Construction Project A (CUST-001, Subsidiary A)",
-        "Construction Project B (CUST-001, Subsidiary A)",
-        "Construction Project C (CUST-001, Subsidiary A)",
-      ],
+      categories: individualStaffProjectList,
     },
     yaxis: [
       {
@@ -707,7 +809,7 @@ const StaffUtilization: React.FC = () => {
         name: "Manhours(Hour)",
         type: "bar",
         color: "#00acb1",
-        data: [12, 12, 11, 12, 0],
+        data: individualStaffManhours,
       },
     ],
   };
@@ -837,7 +939,7 @@ const StaffUtilization: React.FC = () => {
 
   const selectWeeklyPeriodIndividualStaff = (r: any) => {
     const selectDate = new Date(r);
-    const firstDayOfWeek = new Date();
+    const firstDayOfWeek = selectDate;
     firstDayOfWeek.setDate(selectDate.getDate() - selectDate.getDay() + 0);
     const weekDates: any[] = [];
     for (let i = 0; i < 7; i++) {
@@ -966,14 +1068,14 @@ const StaffUtilization: React.FC = () => {
   };
 
   const selectIndividualStaffMonthlyPeriodFrom = (r: any) => {
-    setTotalManHoursMonthlyFromValue(r)
+    setIndivdualManHoursMonthlyFromValue(r)
     const monthDates: any[] = [];
     const monthPlanData: any[] = [];
     const monthActualData: any[] = [];
     const selectFromDate = dayjs(r);
     for (
       let date = selectFromDate.clone();
-      date.isBefore(totalManHoursMonthlyToValue, "month");
+      date.isBefore(indivdualManHoursMonthlyToValue, "month");
       date = date.add(1, "month")
     ) {
       monthDates.push(date.format("MM-YYYY"));
@@ -989,13 +1091,13 @@ const StaffUtilization: React.FC = () => {
   };
 
   const selectUnsubmittedTimeSheetMonthlyPeriodTo = (r: any) => {
-    setUnsubmitMonthlyToValue(r)
+    setIndivdualManHoursMonthlyToValue(r)
     const monthDates: any[] = [];
     const monthPlanData: any[] = [];
     const monthActualData: any[] = [];
     const selectToDate = dayjs(r);
     for (
-      let date = unsubmitMonthlyFromValue.clone();
+      let date = indivdualManHoursMonthlyToValue.clone();
       date.isBefore(selectToDate, "month");
       date = date.add(1, "month")
     ) {
@@ -1066,8 +1168,8 @@ const StaffUtilization: React.FC = () => {
         },
       },
     },
-    series:[23.5,25.5,25.5,25.5],
-    labels: ["Consultancy Project 123","Consultancy Project ABC","Consultancy Project A","Consultancy Project B"],
+    series:individualStaffManhoursPercentage,
+    labels: individualStaffProjectList,
     legend: {
       show: false,
     },
@@ -1449,12 +1551,12 @@ const StaffUtilization: React.FC = () => {
                               selectUnsubmittedTimeSheetMonthlyPeriodFrom(newValue)
                             }
                             defaultValue={
-                              totalManHoursByIndividualStaffMonthlyFromValue
+                              unsubmitMonthlyFromValue
                             }
-                            label={"Form"}
+                            label={"On"}
                             views={["month", "year"]}
                           />
-                          <DatePicker
+                          {/* <DatePicker
                             className="w-40 h-10 align-top"
                             onChange={(newValue) =>
                               selectUnsubmittedTimeSheetMonthlyPeriodTo(newValue)
@@ -1464,7 +1566,7 @@ const StaffUtilization: React.FC = () => {
                             }
                             label={"To"}
                             views={["month", "year"]}
-                          />
+                          /> */}
                         </LocalizationProvider>
                       )}
                     </div>
@@ -1492,16 +1594,20 @@ const StaffUtilization: React.FC = () => {
                           Daily
                         </button>
                         <button
-                          onClick={() =>
+                          onClick={() => {
                             individualStaffManhoursSpentOnClick("Weekly")
+                            fetchMonthlyIndividualManhoursData()
+                            }
                           }
                           className="hover:cursor-pointer hover:bg-violet-50 text-lg bg-transparent border-violet-500 text-violet-500 border-solid w-32"
                         >
                           Weekly
                         </button>
                         <button
-                          onClick={() =>
+                          onClick={() => {
                             individualStaffManhoursSpentOnClick("Monthly")
+                            fetchMonthlyIndividualManhoursData()
+                            }
                           }
                           className="hover:cursor-pointer hover:bg-violet-50 text-lg bg-transparent border-violet-500 text-violet-500 border-solid rounded-r-md w-32"
                         >
@@ -1512,8 +1618,10 @@ const StaffUtilization: React.FC = () => {
                     {individualStaffManhoursSpentSelect === "Weekly" && (
                       <>
                         <button
-                          onClick={() =>
+                          onClick={() => {
                             individualStaffManhoursSpentOnClick("Daily")
+                            fetchDailyIndividualManhoursData()
+                            }
                           }
                           className="hover:cursor-pointer hover:bg-violet-50 text-lg bg-transparent border-violet-500 text-violet-500 border-solid rounded-l-md w-32"
                         >
@@ -1524,7 +1632,10 @@ const StaffUtilization: React.FC = () => {
                         </button>
                         <button
                           onClick={() =>
+                            {
                             individualStaffManhoursSpentOnClick("Monthly")
+                            fetchMonthlyIndividualManhoursData()
+                            }
                           }
                           className="hover:cursor-pointer hover:bg-violet-50 text-lg bg-transparent border-violet-500 text-violet-500 border-solid rounded-r-md w-32"
                         >
@@ -1535,16 +1646,20 @@ const StaffUtilization: React.FC = () => {
                     {individualStaffManhoursSpentSelect === "Monthly" && (
                       <>
                         <button
-                          onClick={() =>
+                          onClick={() => {
                             individualStaffManhoursSpentOnClick("Daily")
+                            fetchDailyIndividualManhoursData()
+                            }
                           }
                           className="hover:cursor-pointer hover:bg-violet-50 text-lg bg-transparent border-violet-500 text-violet-500 border-solid rounded-l-md w-32"
                         >
                           Daily
                         </button>
                         <button
-                          onClick={() =>
-                            individualStaffManhoursSpentOnClick("Weekly")
+                          onClick={() => {
+                              individualStaffManhoursSpentOnClick("Weekly")
+                              fetchMonthlyIndividualManhoursData()
+                            }
                           }
                           className="hover:cursor-pointer hover:bg-violet-50 text-lg bg-transparent border-violet-500 text-violet-500 border-solid w-32"
                         >
@@ -1564,14 +1679,14 @@ const StaffUtilization: React.FC = () => {
                     </div>
                     <div className="inline-block ml-1 w-60">
                       <Select
-                        placeholder="Please select a team"
-                        options={teamManhoursTeamOptions}
+                        placeholder="Please select a staff"
+                        options={staffOptions}
                         isClearable={true}
                         onChange={(selectedOption:any) => {
                           if (selectedOption === null) {
-                            setTeamUnsubmitTeamId(null);
+                            setStaffId(null);
                           } else {
-                            setTeamUnsubmitTeamId(selectedOption.value);
+                            setStaffId(selectedOption.value);
                           }
                         }}
                       />
@@ -1584,16 +1699,18 @@ const StaffUtilization: React.FC = () => {
                         <LocalizationProvider dateAdapter={AdapterDayjs}>
                           <DatePicker
                             className="w-40 h-10 align-top"
-                            onChange={(newValue) =>
-                              selectIndividualStaffMonthlyPeriodFrom(newValue)
+                            format="DD-MM-YYYY"
+                            onChange={(newValue:any) => 
+                              setTotalManHoursByIndividualStaffDailyFromValue(newValue)
+                              // selectIndividualStaffMonthlyPeriodFrom(newValue)
                             }
                             defaultValue={
                               totalManHoursByIndividualStaffDailyFromValue
                             }
-                            label={"Form"}
-                            views={["day", "month", "year"]}
+                            label={"On"}
+                            views={["day"]}
                           />
-                          <DatePicker
+                          {/* <DatePicker
                             className="w-40 h-10 align-top"
                             onChange={(newValue) =>
                               selectIndividualStaffMonthlyPeriodTo(newValue)
@@ -1603,7 +1720,7 @@ const StaffUtilization: React.FC = () => {
                             }
                             label={"To"}
                             views={["day", "month", "year"]}
-                          />
+                          /> */}
                         </LocalizationProvider>
                       )}
                       {individualStaffManhoursSpentSelect === "Weekly" && (
@@ -1636,16 +1753,19 @@ const StaffUtilization: React.FC = () => {
                         <LocalizationProvider dateAdapter={AdapterDayjs}>
                           <DatePicker
                             className="w-40 h-10 align-top"
-                            onChange={(newValue) =>
-                              selectIndividualStaffMonthlyPeriodFrom(newValue)
+                            onChange={(newValue:any) =>{
+                              console.log(newValue)
+                              setIndivdualManHoursMonthlyFromValue(newValue)
+                              }
+                              // selectIndividualStaffMonthlyPeriodFrom(newValue)
                             }
                             defaultValue={
-                              totalManHoursByIndividualStaffMonthlyFromValue
+                              indivdualManHoursMonthlyFromValue
                             }
-                            label={"Form"}
+                            label={"On"}
                             views={["month", "year"]}
                           />
-                          <DatePicker
+                          {/* <DatePicker
                             className="w-40 h-10 align-top"
                             onChange={(newValue) =>
                               selectIndividualStaffMonthlyPeriodTo(newValue)
@@ -1655,7 +1775,7 @@ const StaffUtilization: React.FC = () => {
                             }
                             label={"To"}
                             views={["month", "year"]}
-                          />
+                          /> */}
                         </LocalizationProvider>
                       )}
                     </div>
@@ -1686,7 +1806,7 @@ const StaffUtilization: React.FC = () => {
                       className="text-center w-full text-3xl font-bold"
                       style={{ color: "#92c1e9" }}
                     >
-                      40.00
+                      {totalNormalConsumption.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                     </div>
                   </Card>
                   <Card style={{ marginTop: 10, height: 90 }}>
@@ -1697,7 +1817,7 @@ const StaffUtilization: React.FC = () => {
                       className="text-center w-full text-3xl font-bold"
                       style={{ color: "#898d8d", marginTop: 10 }}
                     >
-                      0.00
+                      {totalLeaveHours.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                     </div>
                   </Card>
                 </div>
@@ -1707,6 +1827,7 @@ const StaffUtilization: React.FC = () => {
                     width: "47%",
                     marginTop: 10,
                     marginLeft: 10,
+                    verticalAlign: "top"
                   }}
                 >
                   <Card style={{ height: 90 }}>
@@ -1717,10 +1838,10 @@ const StaffUtilization: React.FC = () => {
                       className="text-center w-full text-3xl font-bold"
                       style={{ color: "#92c1e9" }}
                     >
-                      7.00
+                      {totalOtConsumption.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                     </div>
                   </Card>
-                  <Card style={{ marginTop: 10, height: 90 }}>
+                  {/* <Card style={{ marginTop: 10, height: 90 }}>
                     <div className="text-slate-500 text-center text-base">
                       Remaining Hours
                     </div>
@@ -1730,7 +1851,7 @@ const StaffUtilization: React.FC = () => {
                     >
                       0.00
                     </div>
-                  </Card>
+                  </Card> */}
                 </div>
               </div>
               <div style={{ display: "inline-block", width: "50%",verticalAlign:"top",marginTop:10}}>