design dark mode add-doctor & change field time to date-picker

app/component/TimePickerField.js

@@ -1,8 +1,16 @@
 import { useState } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
+import { handleTwoLength } from "@/helper";
 
-function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
+function TimePickerField({
+  dataChange,
+  isVacation,
+  disable,
+  setData,
+  timeStart,
+  data,
+}) {
   const [value, setValue] = useState("00:00");
 
   return (
@@ -10,7 +18,7 @@ function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           ampm={false}
-          disabled={disable}
+          disabled={isVacation}
           format="hh:mm"
           className="!w-full"
           shouldDisableTime={(timeValue, clockType) => {
@@ -32,8 +40,6 @@ function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
           onChange={(e) => {
             const hours = e.$H;
             const minute = e.$m;
-            const handleTwoLength = (value) =>
-              String(value).length === 1 ? `0${value}` : value;
             const newValue = `${handleTwoLength(hours)}:${handleTwoLength(
               minute
             )}`;