add modal page item doctor and date picker basic style

components/doctor/appointmentList/modal/index.js

@@ -1,6 +1,8 @@
 import { Box, Modal } from "@mui/material"
 import { styleDefault } from "@/mui"
-import DatePicker from "@/app/component/datePicker"
+import DatePicker from "@/app/component/date/datePicker"
+import CloseModalD from "@/components/icons/CloseModalD"
+import DateTime from "@/app/component/date/dateTime"
 
 function ModalDatePicker({ open, handleClose }) {
     return (
@@ -8,8 +10,25 @@ function ModalDatePicker({ open, handleClose }) {
             open={open}
             onClose={handleClose}
         >
-            <Box sx={styleDefault}>
-                <DatePicker />
+            <Box sx={styleDefault} className="!py-[24px] !px-[40px]">
+                <div className="flex justify-between items-center">
+                    <span></span>
+                    <p className="text-[#3B3B3B] text-[20px] font-medium">دریافت نوبت از دکتر مهران امینی</p>
+                    <div className="cursor-pointer" onClick={handleClose}>
+                        <CloseModalD />
+                    </div>
+                </div>
+                <div className="flex flex-col items-start justify-start gap-[16px] mt-[24px]">
+                    <p className="text-[#3B3B3B] text-[20px] font-bold">انتخاب روز</p>
+                    <div className="py-[24px] px-[32px] border border-solid border-[#E9ECEF] rounded-[16px] bg-[#FFF] flex items-center">
+                        <DatePicker />
+                        <DatePicker />
+                    </div>
+                </div>
+                <div className="mt-[24px]">
+                    <p className="text-[#3B3B3B] text-[20px] font-bold">انتخاب ساعت</p>
+                    <DateTime />
+                </div>
             </Box>
         </Modal>
     )