diff --git a/src/components/CompanyTeamCashFlow/CompanyTeamCashFlow.tsx b/src/components/CompanyTeamCashFlow/CompanyTeamCashFlow.tsx index d1302a7..dcf2ab2 100644 --- a/src/components/CompanyTeamCashFlow/CompanyTeamCashFlow.tsx +++ b/src/components/CompanyTeamCashFlow/CompanyTeamCashFlow.tsx @@ -21,13 +21,20 @@ import { Suspense } from "react"; import ProgressCashFlowSearch from "@/components/ProgressCashFlowSearch"; import { Input, Label } from "reactstrap"; import Select, { components } from "react-select"; -import {fetchTeamCombo,fetchTeamCashFlowChartData} from "@/app/api/teamCashflow"; +import { fetchTeamCombo, fetchTeamCashFlowChartData } from "@/app/api/teamCashflow"; +import { VIEW_DASHBOARD_ALL } from "@/middleware"; +import { SessionStaff } from "@/config/authConfig"; -const CompanyTeamCashFlow: React.FC = () => { +interface Props { + abilities: string[], + staff: SessionStaff, +} + +const CompanyTeamCashFlow: React.FC = ({ abilities, staff }) => { const todayDate = new Date(); const [selectionModel, setSelectionModel]: any[] = React.useState([]); const [teamOptions, setTeamOptions]: any[] = React.useState([]); - const [teamId, setTeamId]:any = React.useState(null); + const [teamId, setTeamId]: any = React.useState(null); const [monthlyIncomeList, setMonthlyIncomeList]: any[] = React.useState([]); const [monthlyCumulativeIncomeList, setMonthlyCumulativeIncomeList]: any[] = React.useState([]); const [monthlyExpenditureList, setMonthlyExpenditureList]: any[] = React.useState([]); @@ -39,25 +46,27 @@ const CompanyTeamCashFlow: React.FC = () => { ); const fetchChartData = async () => { - const cashFlowMonthlyChartData:any = await fetchTeamCashFlowChartData(cashFlowYear,teamId); - console.log(cashFlowMonthlyChartData[0]) - const monthlyIncome = [] - const cumulativeIncome = [] - const monthlyExpenditure = [] - const cumulativeExpenditure = [] - var leftMax = 0 - var rightMax = 0 - // if (cashFlowMonthlyChartData.length !== 0) { + if (teamOptions.length > 0) { + const tempTeamId = abilities.includes(VIEW_DASHBOARD_ALL) ? teamId : teamOptions[0]?.value + const cashFlowMonthlyChartData: any = await fetchTeamCashFlowChartData(cashFlowYear, tempTeamId); + console.log(cashFlowMonthlyChartData[0]) + const monthlyIncome = [] + const cumulativeIncome = [] + const monthlyExpenditure = [] + const cumulativeExpenditure = [] + var leftMax = 0 + var rightMax = 0 + // if (cashFlowMonthlyChartData.length !== 0) { for (var i = 0; i < cashFlowMonthlyChartData[0].teamCashFlowIncome.length; i++) { - if (leftMax < cashFlowMonthlyChartData[0].teamCashFlowIncome[i].income || leftMax < cashFlowMonthlyChartData[0].teamCashFlowExpenditure[i].expenditure){ - leftMax = Math.max(cashFlowMonthlyChartData[0].teamCashFlowIncome[i].income,cashFlowMonthlyChartData[0].teamCashFlowExpenditure[i].expenditure) + if (leftMax < cashFlowMonthlyChartData[0].teamCashFlowIncome[i].income || leftMax < cashFlowMonthlyChartData[0].teamCashFlowExpenditure[i].expenditure) { + leftMax = Math.max(cashFlowMonthlyChartData[0].teamCashFlowIncome[i].income, cashFlowMonthlyChartData[0].teamCashFlowExpenditure[i].expenditure) } monthlyIncome.push(cashFlowMonthlyChartData[0].teamCashFlowIncome[i].income) cumulativeIncome.push(cashFlowMonthlyChartData[0].teamCashFlowIncome[i].cumulativeIncome) } for (var i = 0; i < cashFlowMonthlyChartData[0].teamCashFlowExpenditure.length; i++) { - 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) + 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) @@ -68,30 +77,38 @@ const CompanyTeamCashFlow: React.FC = () => { setMonthlyCumulativeExpenditureList(cumulativeExpenditure) setMonthlyChartLeftMax(leftMax) setMonthlyChartRightMax(rightMax) - // } else { - // setMonthlyIncomeList([0,0,0,0,0,0,0,0,0,0,0,0]) - // setMonthlyCumulativeIncomeList([0,0,0,0,0,0,0,0,0,0,0,0]) - // setMonthlyExpenditureList([0,0,0,0,0,0,0,0,0,0,0,0]) - // setMonthlyCumulativeExpenditureList([0,0,0,0,0,0,0,0,0,0,0,0]) - // } + // } else { + // setMonthlyIncomeList([0,0,0,0,0,0,0,0,0,0,0,0]) + // setMonthlyCumulativeIncomeList([0,0,0,0,0,0,0,0,0,0,0,0]) + // setMonthlyExpenditureList([0,0,0,0,0,0,0,0,0,0,0,0]) + // setMonthlyCumulativeExpenditureList([0,0,0,0,0,0,0,0,0,0,0,0]) + // } + } } const fetchComboData = async () => { const teamComboList = [] const teamCombo = await fetchTeamCombo(); - for (var i = 0; i < teamCombo.records.length; i++) { - teamComboList.push({value: teamCombo.records[i].id, label: teamCombo.records[i].label}) + + if (abilities.includes(VIEW_DASHBOARD_ALL)) { + for (var i = 0; i < teamCombo.records.length; i++) { + teamComboList.push({ value: teamCombo.records[i].id, label: teamCombo.records[i].label }) + } + } else { + const tempTeam = teamCombo.records.find(record => record.id === staff.teamId) + teamComboList.push({ value: tempTeam?.id, label: tempTeam?.label }) } + setTeamOptions(teamComboList) } useEffect(() => { fetchComboData() - }, []); + }, []); - useEffect(() => { + useEffect(() => { fetchChartData() - }, [cashFlowYear,teamId]); + }, [cashFlowYear, teamId, teamOptions]); const columns = [ { @@ -180,7 +197,7 @@ const CompanyTeamCashFlow: React.FC = () => { const options: ApexOptions = { tooltip: { y: { - formatter: function(val) { + formatter: function (val) { return val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } } @@ -227,7 +244,7 @@ const CompanyTeamCashFlow: React.FC = () => { tickAmount: 5, labels: { formatter: function (val) { - return val.toLocaleString() + return val.toLocaleString() } } }, @@ -252,7 +269,7 @@ const CompanyTeamCashFlow: React.FC = () => { tickAmount: 5, labels: { formatter: function (val) { - return val.toLocaleString() + return val.toLocaleString() } } }, @@ -339,25 +356,27 @@ const CompanyTeamCashFlow: React.FC = () => { > -
- -
-
- { + if (selectedOption === null) { + setTeamId(null); + } else { + setTeamId(selectedOption.value); + } + }} + /> +
+ } { + const [abilities, staff] = await Promise.all([getUserAbilities(), getUserStaff()]); + + return ; +}; + +export default CompanyTeamCashFlowWrapper; \ No newline at end of file diff --git a/src/components/CompanyTeamCashFlow/index.ts b/src/components/CompanyTeamCashFlow/index.ts index 61dd944..94bec07 100644 --- a/src/components/CompanyTeamCashFlow/index.ts +++ b/src/components/CompanyTeamCashFlow/index.ts @@ -1 +1 @@ -export { default } from "./CompanyTeamCashFlow"; +export { default } from "./CompanyTeamCashFlowWrapper"; diff --git a/src/components/NavigationContent/NavigationContent.tsx b/src/components/NavigationContent/NavigationContent.tsx index d47b6e2..a35794d 100644 --- a/src/components/NavigationContent/NavigationContent.tsx +++ b/src/components/NavigationContent/NavigationContent.tsx @@ -40,6 +40,8 @@ import { MAINTAIN_PROJECT, MAINTAIN_TASK_TEMPLATE, MAINTAIN_USER, + VIEW_DASHBOARD_ALL, + VIEW_DASHBOARD_SELF, VIEW_MASTERDATA, VIEW_PROJECT, VIEW_USER, @@ -73,6 +75,9 @@ const NavigationContent: React.FC = ({ abilities }) => { icon: , label: "Dashboard", path: "", + isHidden: ![VIEW_DASHBOARD_ALL, VIEW_DASHBOARD_SELF].some((ability) => + abilities!.includes(ability), + ), children: [ { icon: , diff --git a/src/components/ProjectResourceSummary/ProjectResourceSummary.tsx b/src/components/ProjectResourceSummary/ProjectResourceSummary.tsx index 7805def..5050323 100644 --- a/src/components/ProjectResourceSummary/ProjectResourceSummary.tsx +++ b/src/components/ProjectResourceSummary/ProjectResourceSummary.tsx @@ -658,7 +658,7 @@ const columns2 = [
- {actualResourcesSpent.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} Manhours + {(actualResourcesSpent ?? 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} Manhours
@@ -668,7 +668,7 @@ const columns2 = [
- {remainingResources.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} Manhours + {(remainingResources ?? 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} Manhours
diff --git a/src/components/StaffUtilization/StaffUtilization.tsx b/src/components/StaffUtilization/StaffUtilization.tsx index 73f33e7..5c9db6d 100644 --- a/src/components/StaffUtilization/StaffUtilization.tsx +++ b/src/components/StaffUtilization/StaffUtilization.tsx @@ -31,7 +31,9 @@ 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,fetchStaffCombo,fetchDailyIndividualStaffManhours,fetchWeeklyIndividualStaffManhours,fetchMonthlyIndividualStaffManhours} from "@/app/api/staffUtilization"; +import { fetchTeamCombo, fetchweeklyTeamTotalManhours, fetchmonthlyTeamTotalManhours, fetchTotalManhoursByGrade, fetchWeeklyUnsubmit, fetchMonthlyUnsubmit, fetchStaffCombo, fetchDailyIndividualStaffManhours, fetchWeeklyIndividualStaffManhours, fetchMonthlyIndividualStaffManhours } from "@/app/api/staffUtilization"; +import { SessionStaff } from "@/config/authConfig"; +import { VIEW_DASHBOARD_ALL } from "@/middleware"; dayjs.extend(isBetweenPlugin); interface CustomPickerDayProps extends PickersDayProps { @@ -95,7 +97,14 @@ function Day( ); } -const StaffUtilization: React.FC = () => { +interface Props { + abilities: string[]; + staff: SessionStaff; +} + +const StaffUtilization: React.FC = ({ abilities, staff }) => { + const abilityViewDashboardAll = abilities.includes(VIEW_DASHBOARD_ALL) + const todayDate = new Date(); const firstDayOfWeek = new Date(); const lastDayOfWeek = new Date(); @@ -190,7 +199,7 @@ const StaffUtilization: React.FC = () => { React.useState(dayjs().startOf('week').add(6, 'day')); const [weeklyValueByIndividualStaff, setWeeklyValueByIndividualStaff] = React.useState(dayjs().startOf('week')); - const [weeklyUnsubmittedTimeSheet, setWeeklyUnsubmittedTimeSheet ] = + const [weeklyUnsubmittedTimeSheet, setWeeklyUnsubmittedTimeSheet] = React.useState(dayjs().startOf('week')); const [staffGradeManhoursSpentValue, setStaffGradeManhoursSpentValue] = React.useState(dayjs()); @@ -232,7 +241,7 @@ const StaffUtilization: React.FC = () => { ] = React.useState(dayjs()); const hd = new Holidays('HK'); const currentYear = new Date().getFullYear(); - const years = [currentYear -2, currentYear - 1, currentYear, currentYear + 1, currentYear + 2]; + const years = [currentYear - 2, currentYear - 1, currentYear, currentYear + 1, currentYear + 2]; let allHolidays: any[] = []; years.forEach(year => { const holidays = hd.getHolidays(year); @@ -241,40 +250,45 @@ const StaffUtilization: React.FC = () => { const holidayDates = allHolidays.map(holiday => moment(holiday.date).format('YYYY-MM-DD')).join(','); const [totalManHoursMaxValue, setTotalManHoursMaxValue] = React.useState(5); const [totalManHoursByGradeMaxValue, setTotalManHoursByGradeMaxValue] = React.useState(5); - const [totalManhourByGradeActualManhours, setTotalManhourByGradeActualManhours]:any[] = React.useState([]); - const [totalManhourByGradePlannedManhours, setTotalManhourByGradePlannedManhours]:any[] = React.useState([]); - const [gradeNameList, setGradeNameList]:any[] = React.useState([]); + const [totalManhourByGradeActualManhours, setTotalManhourByGradeActualManhours]: any[] = React.useState([]); + 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 [teamManhoursTeamId, setTeamManhoursTeamId]: any[] = React.useState(abilityViewDashboardAll ? 0 : staff.teamId); + const [teamUnsubmitTeamId, setTeamUnsubmitTeamId]: any[] = React.useState(abilityViewDashboardAll ? 0 : staff.teamId); 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 [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}) + if (abilityViewDashboardAll) { + for (var i = 0; i < teamCombo.records.length; i++) { + teamComboList.push({ value: teamCombo.records[i].id, label: teamCombo.records[i].label }) + } + } else { + const tempTeam = teamCombo.records.find(team => team.id === staff.teamId) + teamComboList.push({ value: tempTeam?.id, label: tempTeam?.label }) } for (var i = 0; i < staffCombo.length; i++) { - staffComboList.push({value: staffCombo[i].id, label: staffCombo[i].label}) + staffComboList.push({ value: staffCombo[i].id, label: staffCombo[i].label }) } setTeamManhoursTeamOptions(teamComboList) setStaffOptions(staffComboList) } const fetchWeeklyTeamManhourSpentData = async () => { - const fetchResult = await fetchweeklyTeamTotalManhours(teamManhoursTeamId,value.format('YYYY-MM-DD')); + const fetchResult = await fetchweeklyTeamTotalManhours(teamManhoursTeamId, value.format('YYYY-MM-DD')); const weeklyActual = fetchResult[0].weeklyActualTeamTotalManhoursSpent const weeklyPlanned = fetchResult[0].weeklyPlannedTeamTotalManhoursSpent const weeklyActualList = [] @@ -368,7 +382,7 @@ const StaffUtilization: React.FC = () => { const gradeList = [] const actualList = [] const plannedList = [] - + var manhours = 0 for (var i = 0; i < actualManhours.length; i++) { actualList.push(actualManhours[i].manhours.toFixed(2)) @@ -381,13 +395,13 @@ const StaffUtilization: React.FC = () => { var gradeId = plannedManhours[0].id for (var i = 0; i < plannedManhours.length; i++) { if (plannedManhours[i].id === gradeId) { - manhours += (plannedManhours[i].searchDuration - plannedManhours[i].startDiff - plannedManhours[i].endDiff) * plannedManhours[i].avgGradeManhour - if (chartMax < manhours) { - chartMax = manhours - } - if (i === plannedManhours.length - 1) { - plannedList.push(manhours.toFixed(2)) - } + manhours += (plannedManhours[i].searchDuration - plannedManhours[i].startDiff - plannedManhours[i].endDiff) * plannedManhours[i].avgGradeManhour + if (chartMax < manhours) { + chartMax = manhours + } + if (i === plannedManhours.length - 1) { + plannedList.push(manhours.toFixed(2)) + } } else { plannedList.push(manhours.toFixed(2)) manhours = 0 @@ -415,7 +429,7 @@ const StaffUtilization: React.FC = () => { const gradeList = [] const actualList = [] const plannedList = [] - + var manhours = 0 for (var i = 0; i < actualManhours.length; i++) { actualList.push(actualManhours[i].manhours.toFixed(2)) @@ -428,13 +442,13 @@ const StaffUtilization: React.FC = () => { var gradeId = plannedManhours[0].id for (var i = 0; i < plannedManhours.length; i++) { if (plannedManhours[i].id === gradeId) { - manhours += (plannedManhours[i].searchDuration - plannedManhours[i].startDiff - plannedManhours[i].endDiff) * plannedManhours[i].avgGradeManhour - if (chartMax < manhours) { - chartMax = manhours - } - if (i === plannedManhours.length - 1) { - plannedList.push(manhours.toFixed(2)) - } + manhours += (plannedManhours[i].searchDuration - plannedManhours[i].startDiff - plannedManhours[i].endDiff) * plannedManhours[i].avgGradeManhour + if (chartMax < manhours) { + chartMax = manhours + } + if (i === plannedManhours.length - 1) { + plannedList.push(manhours.toFixed(2)) + } } else { plannedList.push(manhours.toFixed(2)) manhours = 0 @@ -486,11 +500,15 @@ const StaffUtilization: React.FC = () => { const result = [] const projectList = [] const percentageList = [] + + console.log(manhoursResult) 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) + if (manhoursResult[i].id !== null) { + result.push(manhoursResult[i].manhours) + projectList.push(manhoursResult[i].projectName) + percentageList.push(manhoursResult[i].percentage) + } } setIndividualStaffProjectList(projectList) setIndividualStaffManhours(result) @@ -499,11 +517,11 @@ const StaffUtilization: React.FC = () => { 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')); + 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 @@ -524,11 +542,11 @@ const StaffUtilization: React.FC = () => { setTotalOtConsumption(totalResult[0].otManhours) setTotalLeaveHours(leaveResult[0].leaveHours) } - + } const fetchMonthlyIndividualManhoursData = async () => { - const fetchResult = await fetchMonthlyIndividualStaffManhours(staffId,indivdualManHoursMonthlyFromValue.format('YYYY-MM-01')); + 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 @@ -548,70 +566,70 @@ const StaffUtilization: React.FC = () => { setTotalOtConsumption(totalResult[0].otManhours) setTotalLeaveHours(leaveResult[0].leaveHours) } - + } useEffect(() => { fetchComboData() - }, []); + }, []); + - useEffect(() => { - if (teamTotalManhoursSpentSelect === "Weekly"){ + if (teamTotalManhoursSpentSelect === "Weekly") { fetchWeeklyTeamManhourSpentData() } - }, [value,teamManhoursTeamId]); + }, [value, teamManhoursTeamId]); - useEffect(() => { - if (teamTotalManhoursSpentSelect === "Monthly"){ - fetchMonthlyTeamManhourSpentData() + useEffect(() => { + if (teamTotalManhoursSpentSelect === "Monthly") { + fetchMonthlyTeamManhourSpentData() } - }, [totalManHoursMonthlyFromValue,totalManHoursMonthlyToValue,teamManhoursTeamId]); + }, [totalManHoursMonthlyFromValue, totalManHoursMonthlyToValue, teamManhoursTeamId]); - useEffect(() => { - if (staffGradeManhoursSpentSelect === "Weekly"){ + useEffect(() => { + if (staffGradeManhoursSpentSelect === "Weekly") { fetchTotalManhoursByGradeData() } - }, [weeklyValueByStaffGrade,weeklyToValueByStaffGrade]); + }, [weeklyValueByStaffGrade, weeklyToValueByStaffGrade]); - useEffect(() => { - if (staffGradeManhoursSpentSelect === "Monthly"){ + useEffect(() => { + if (staffGradeManhoursSpentSelect === "Monthly") { fetchMonthlyTotalManhoursByGradeData() } - }, [totalManHoursMonthlyFromValue,totalManHoursMonthlyToValue]); + }, [totalManHoursMonthlyFromValue, totalManHoursMonthlyToValue]); - useEffect(() => { - if (unsubmittedTimeSheetSelect === "Weekly"){ + useEffect(() => { + if (unsubmittedTimeSheetSelect === "Weekly") { fetchWeeklyUnsubmittedData() } - }, [teamUnsubmitTeamId, weeklyUnsubmittedTimeSheet]); + }, [teamUnsubmitTeamId, weeklyUnsubmittedTimeSheet]); - useEffect(() => { - if (unsubmittedTimeSheetSelect === "Monthly"){ + useEffect(() => { + if (unsubmittedTimeSheetSelect === "Monthly") { fetchMonthlyUnsubmittedData() } - }, [teamUnsubmitTeamId,unsubmitMonthlyFromValue, unsubmitMonthlyToValue]); + }, [teamUnsubmitTeamId, unsubmitMonthlyFromValue, unsubmitMonthlyToValue]); - useEffect(() => { - if (individualStaffManhoursSpentSelect === "Daily"){ + useEffect(() => { + if (individualStaffManhoursSpentSelect === "Daily") { fetchDailyIndividualManhoursData() } - }, [staffId, totalManHoursByIndividualStaffDailyFromValue]); + }, [staffId, totalManHoursByIndividualStaffDailyFromValue]); - useEffect(() => { - if (individualStaffManhoursSpentSelect === "Weekly"){ + useEffect(() => { + if (individualStaffManhoursSpentSelect === "Weekly") { fetchWeeklyIndividualManhoursData() } - }, [staffId, weeklyValueByIndividualStaff]); + }, [staffId, weeklyValueByIndividualStaff]); - useEffect(() => { - if (individualStaffManhoursSpentSelect === "Monthly"){ + useEffect(() => { + if (individualStaffManhoursSpentSelect === "Monthly") { fetchMonthlyIndividualManhoursData() } - }, [staffId, indivdualManHoursMonthlyFromValue]); + }, [staffId, indivdualManHoursMonthlyFromValue]); + - const teamOptions = [ { value: 1, label: "XXX Team" }, @@ -1140,7 +1158,7 @@ const StaffUtilization: React.FC = () => { chart: { type: "donut", }, - colors: ['#f57f90','#94f7d6','#87c5f5','#ab95f5','#ab95f5'], + colors: ['#f57f90', '#94f7d6', '#87c5f5', '#ab95f5', '#ab95f5'], plotOptions: { pie: { donut: { @@ -1168,7 +1186,7 @@ const StaffUtilization: React.FC = () => { }, }, }, - series:individualStaffManhoursPercentage, + series: individualStaffManhoursPercentage, labels: individualStaffProjectList, legend: { show: false, @@ -1234,25 +1252,28 @@ const StaffUtilization: React.FC = () => { )}
-
- -
-
- { + if (selectedOption === null) { + setTeamManhoursTeamId(null); + } else { + setTeamManhoursTeamId(selectedOption.value); + } + }} + /> +
+
}
{/*