fix responsive design

app/component/TimePickerField.js

@@ -69,7 +69,7 @@ function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
           }}
         />
         <p
-          className={`absolute dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
+          className={`absolute dark:bg-[#222433] dark:!text-[#A1A1A1] h-[calc(100%_-_16px)] flex items-center right-[4px] py-[8px] px-[8px] 
                 w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
                 ${disable && "!text-[rgba(126,126,126,0.5)]"}`}
         >

app/component/UploadFile.js

@@ -4,21 +4,42 @@ import { useRef } from "react";
 import { Button } from "@mui/material";
 import ProfileP from "@/components/icons/ProfileP";
 import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
+import { uploadImage } from "@/helper";
+import Image from "next/image";
 
-function UploadFile() {
+function UploadFile({ image, setImage }) {
   const fileRef = useRef();
 
   const openInput = () => fileRef.current.click();
+  const handleChange = async (e) => {
+    const result = await uploadImage(event);
+    setImage(result);
+  };
 
   return (
     <>
-      <input className="contents" ref={fileRef} type="file" />
-      <div
-        className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
-        onClick={openInput}
-      >
-        <ProfileP />
-      </div>
+      <input
+        className="contents"
+        ref={fileRef}
+        type="file"
+        onChange={handleChange}
+      />
+      {image && image.blob ? (
+        <Image
+          width={24}
+          height={24}
+          src={image.blob}
+          alt="img-uploaded"
+          className="w-[74px] h-[74px] rounded-full overflow-hidden object-cover"
+        />
+      ) : (
+        <div
+          className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
+          onClick={openInput}
+        >
+          <ProfileP />
+        </div>
+      )}
       <Button
         variant="text"
         onClick={openInput}

app/component/date/dateTime/Hours.js

@@ -9,7 +9,7 @@ function Hours({ doctor, hour, setHour, value, nameHours }) {
             onClick={() => setHour(idx)}
             disabled={!item.active}
             className={`
-                        !w-full !rounded-[8px] !bg-[#EFEFEF] !grid !place-items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
+                        !w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
                         ${idx === hour ? "!bg-[#F79463] " : ""}
                     `}
           >

app/component/element/AutoCompleteSelect.js

@@ -8,8 +8,8 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
       disablePortal
       options={list}
       className="!w-full !rounded-lg"
-      onChange={(event) =>{
-        updateData && updateData(event.target.innerText, "value", name)
+      onChange={(event) => {
+        updateData && updateData(event.target.innerText, "value", name);
       }}
       sx={{
         ...styleTextSelectRight,

app/component/element/Field.js

@@ -18,7 +18,7 @@ function Field({ title, type, isPlaceHolder }) {
         "& input[type=number]": {
           MozAppearance: "textfield",
         },
-
+        "& .MuiFormLabel-root": { top: "-7px !important" },
         "& .MuiInputBase-input": { padding: "12.5px 14px" },
         "& .MuiInputBase-root": { borderRadius: "6px !important" },
         "& .MuiOutlinedInput-notchedOutline": {