|
|
|
@@ -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}}> |
|
|
|
|
