From f95810bc347e5077089dcb15ae1d7fa292474b63 Mon Sep 17 00:00:00 2001 From: "Mac\\David" Date: Sun, 2 Jun 2024 00:28:01 +0800 Subject: [PATCH] update dashboard --- src/app/api/financialsummary/actions.ts | 1 + src/app/api/staffUtilization/index.ts | 43 ++++ .../CompanyTeamCashFlow.tsx | 42 ++-- .../ProjectCashFlow/ProjectCashFlow.tsx | 124 ++++------ .../ProjectFinancialSummary.tsx | 6 + .../StaffUtilization/StaffUtilization.tsx | 223 ++++++++++++++---- 6 files changed, 288 insertions(+), 151 deletions(-) diff --git a/src/app/api/financialsummary/actions.ts b/src/app/api/financialsummary/actions.ts index c1dda65..b56d3d2 100644 --- a/src/app/api/financialsummary/actions.ts +++ b/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; diff --git a/src/app/api/staffUtilization/index.ts b/src/app/api/staffUtilization/index.ts index 07988fb..bb6cfd6 100644 --- a/src/app/api/staffUtilization/index.ts +++ b/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(`${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(`${BASE_API_URL}/dashboard/searchMonthlyUnsubmittedTimeSheet?teamId=${teamId}&startdate=${startdate}&enddate=${enddate}&publicHolidayList=${publicHolidayList}`); }); + +export const fetchStaffCombo = cache(async () => { + return serverFetchJson(`${BASE_API_URL}/dashboard/searchStaffCombo`, { + next: { tags: ["staffs"] }, + }); +}); + +export const fetchDailyIndividualStaffManhours = cache(async (staffId:number,startdate:string) => { + return serverFetchJson(`${BASE_API_URL}/dashboard/searchTotalManhoursSpentByStaffDaily?staffId=${staffId}&startdate=${startdate}`); +}); + +export const fetchWeeklyIndividualStaffManhours = cache(async (staffId:number,startdate:string, enddate:string) => { + return serverFetchJson(`${BASE_API_URL}/dashboard/searchTotalManhoursSpentByStaffWeekly?staffId=${staffId}&startdate=${startdate}&enddate=${enddate}`); +}); + +export const fetchMonthlyIndividualStaffManhours = cache(async (staffId:number,startdate:string) => { + return serverFetchJson(`${BASE_API_URL}/dashboard/searchTotalManhoursSpentByStaffByMonth?staffId=${staffId}&startdate=${startdate}`); +}); \ No newline at end of file diff --git a/src/components/CompanyTeamCashFlow/CompanyTeamCashFlow.tsx b/src/components/CompanyTeamCashFlow/CompanyTeamCashFlow.tsx index 0175ad7..d1302a7 100644 --- a/src/components/CompanyTeamCashFlow/CompanyTeamCashFlow.tsx +++ b/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, diff --git a/src/components/ProjectCashFlow/ProjectCashFlow.tsx b/src/components/ProjectCashFlow/ProjectCashFlow.tsx index 4c5c935..2767704 100644 --- a/src/components/ProjectCashFlow/ProjectCashFlow.tsx +++ b/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, diff --git a/src/components/ProjectFinancialSummary/ProjectFinancialSummary.tsx b/src/components/ProjectFinancialSummary/ProjectFinancialSummary.tsx index 662ffa3..6611df0 100644 --- a/src/components/ProjectFinancialSummary/ProjectFinancialSummary.tsx +++ b/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', diff --git a/src/components/StaffUtilization/StaffUtilization.tsx b/src/components/StaffUtilization/StaffUtilization.tsx index 60748cf..73f33e7 100644 --- a/src/components/StaffUtilization/StaffUtilization.tsx +++ b/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 { @@ -199,9 +199,13 @@ const StaffUtilization: React.FC = () => { const [totalManHoursMonthlyToValue, setTotalManHoursMonthlyToValue] = React.useState(dayjs()); const [unsubmitMonthlyFromValue, setUnsubmitMonthlyFromValue] = - React.useState(dayjs(new Date()).subtract(6, "month")); + React.useState(dayjs(new Date())); const [unsubmitMonthlyToValue, setUnsubmitMonthlyToValue] = React.useState(dayjs()); + const [indivdualManHoursMonthlyFromValue, setIndivdualManHoursMonthlyFromValue] = + React.useState(dayjs()); + const [indivdualManHoursMonthlyToValue, setIndivdualManHoursMonthlyToValue] = + React.useState(dayjs()); const [ totalManHoursByStaffGradeMonthlyFromValue, setTotalManHoursByStaffGradeMonthlyFromValue, @@ -221,7 +225,7 @@ const StaffUtilization: React.FC = () => { const [ totalManHoursByIndividualStaffDailyFromValue, setTotalManHoursByIndividualStaffDailyFromValue, - ] = React.useState(dayjs(new Date()).subtract(6, "day")); + ] = React.useState(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"]} /> - selectUnsubmittedTimeSheetMonthlyPeriodTo(newValue) @@ -1464,7 +1566,7 @@ const StaffUtilization: React.FC = () => { } label={"To"} views={["month", "year"]} - /> + /> */} )} @@ -1492,16 +1594,20 @@ const StaffUtilization: React.FC = () => { Daily