UI FIx

src/components/StaffUtilization/StaffUtilization.tsx

@@ -275,6 +275,8 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
   const [totalLeaveHours, setTotalLeaveHours]: any = React.useState('NA');
   const [currentPage, setCurrentPage] = useState(1);
   const recordsPerPage = 10;
+  const [datePickerToLabel, setDatePickerToLabel] = React.useState("To");
+  const [datePickerToLabel2, setDatePickerToLabel2] = React.useState("To");
 
   const fetchComboData = async () => {
     const staffComboList = []
@@ -1398,6 +1400,12 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                                 setTeamManhoursTeamId(selectedOption.value);
                               }
                             }}
+                            onMenuOpen={() => {
+                              setDatePickerToLabel("")
+                            }}
+                            onMenuClose={() => {
+                              setDatePickerToLabel("To")
+                            }}
                           />
                         </div>
                       </div>}
@@ -1449,7 +1457,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                               selectMonthlyPeriodTo(newValue)
                             }
                             defaultValue={totalManHoursMonthlyToValue}
-                            label={"To"}
+                            label={datePickerToLabel}
                             views={["month", "year"]}
                           />
                         </LocalizationProvider>
@@ -1522,7 +1530,6 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                     )}
                   </div>
                   <div className="inline-block w-fit mt-2">
-                    <div className="inline-block mt-2 ml-6">
                     {abilityViewDashboardAll &&
                       <div className="inline-block">
                         <div className="inline-block ml-6">
@@ -1542,9 +1549,16 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                                 setStaffGradeTeamId(selectedOption.value);
                               }
                             }}
+                            onMenuOpen={() => {
+                              setDatePickerToLabel2("")
+                            }}
+                            onMenuClose={() => {
+                              setDatePickerToLabel2("To")
+                            }}
                           />
                         </div>
                       </div>}
+                      <div className="ml-6 mt-2" style={{ verticalAlign: "top" }}>
                       {staffGradeManhoursSpentSelect === "Weekly" && (
                         <LocalizationProvider dateAdapter={AdapterDayjs}>
                           <DatePicker
@@ -1572,6 +1586,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                         </LocalizationProvider>
                       )}
                       {staffGradeManhoursSpentSelect === "Monthly" && (
+                        
                         <LocalizationProvider dateAdapter={AdapterDayjs}>
                           <DatePicker
                             className="w-44 h-10 align-top"
@@ -1592,7 +1607,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                             defaultValue={
                               totalManHoursByStaffGradeMonthlyToValue
                             }
-                            label={"To"}
+                            label={datePickerToLabel2}
                             views={["month", "year"]}
                           />
                         </LocalizationProvider>