add component hour field to page add-doctor

app/component/TimePickerField.js

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"
+
+function TimePickerField() {
+
+    const [value, setValue] = useState('00:00');
+
+    return (
+        <div className="w-full relative">
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <TimePicker
+                    ampm={false}
+                    format="hh:mm"
+                    className="!w-full"
+                    views={['hours', 'minutes']}
+                    placeholder="انتخاب کنید..."
+                    onChange={e => {
+                        const hours = e.$H;
+                        const minute = e.$m;
+                        const handleTwoLength = value => String(value).length === 1 ? `0${value}` : value
+
+                        setValue(`${handleTwoLength(hours)}:${handleTwoLength(minute)}`)
+                    }}
+                    sx={{
+                        '& .MuiFormLabel-root': {
+                            top: '-4px !important'
+                        },
+                        '& .MuiInputBase-input': { padding: '12.5px 14px' },
+                        '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
+                        '& .MuiInputBase-root': {
+                            borderRadius: '8px !important'
+                        },
+                        '.Mui-focused': {
+                            '& .MuiOutlinedInput-notchedOutline': {
+                                border: '1px solid #5559CE !important',
+                                transition: '0.5s all'
+                            }
+                        },
+                        '& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after': {
+                            display: 'none !important'
+                        }
+                    }}
+                />
+                <p className="absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px] w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2">{value}</p>
+            </LocalizationProvider>
+        </div>
+    )
+}
+
+export default TimePickerField

components/panel/addDoctor/index.js

@@ -16,7 +16,7 @@ const listTab = ['اطلاعات عمومی', 'اطلاعات مطب', 'نوبت
 
 function AddDoctorPage() {
 
-    const [value, setValue] = useState(0);
+    const [value, setValue] = useState(3);
     const [open, setOpen] = useState(false);
 
     const handleChange = (event, newValue) => setValue(newValue);

components/panel/addDoctor/listMenu/workingDays/modal/Form.js

@@ -1,35 +1,15 @@
-import { useState } from "react";
-import ClockP from "@/components/icons/ClockP";
-import FieldIcon from "@/app/component/FieldIcon";
-import ContentText from "@/components/panel/ContentText";
 import { Button } from "@mui/material";
+import ContentText from "@/components/panel/ContentText";
+import TimePickerField from "@/app/component/TimePickerField";
 
 function Form({ handleClose }) {
-
-    const [data, setData] = useState({
-        start_time: '',
-        end_time: ''
-    });
-
-    const changeData = (value, name) => setData({ ...data, [name]: value })
-
     return (
         <div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
             <ContentText text='زمان شروع'>
-                <FieldIcon
+                <TimePickerField />
-                    placeholder='انتخاب کنید...'
-                    changeData={changeData}
-                    icon={<ClockP />}
-                    name='start_time'
-                />
             </ContentText>
             <ContentText text='زمان پایان'>
-                <FieldIcon
+                <TimePickerField />
-                    placeholder='انتخاب کنید...'
-                    changeData={changeData}
-                    icon={<ClockP />}
-                    name='end_time'
-                />
             </ContentText>
             <div className="flex flex-wrap items-center justify-center gap-[16px]">
                 <Button
@@ -43,7 +23,7 @@ function Form({ handleClose }) {
                     className="!text-[16px] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px] !px-[46px]"
                 >ذخیره</Button>
             </div>
-        </div>
+        </div >
     )
 }
 

package-lock.json

@@ -15,8 +15,10 @@
         "@mui/material": "^5.16.7",
         "@mui/styled-engine-sc": "^6.0.0-alpha.18",
         "@mui/x-charts": "^7.16.0",
+        "@mui/x-date-pickers": "^7.17.0",
         "aos": "^2.3.4",
         "date-fns": "^3.6.0",
+        "dayjs": "^1.11.13",
         "i": "^0.3.7",
         "jalaali-react-date-picker": "^1.0.18",
         "jalali-moment": "^3.3.11",
@@ -3753,6 +3755,90 @@
         "robust-predicates": "^3.0.2"
       }
     },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.17.0.tgz",
+      "integrity": "sha512-3mIw1uOZU/yKweZsVAo9QnwVFzLHqXgXG1TbGbDJ4AU6FhN2TCUlR9tzKHSlYdAHZ0bEWDS1/bgeGsQC7skXMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.6",
+        "@mui/utils": "^5.16.6",
+        "@mui/x-internals": "7.17.0",
+        "@types/react-transition-group": "^4.4.11",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0",
+        "date-fns": "^2.25.0 || ^3.2.0",
+        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers/node_modules/@mui/x-internals": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.17.0.tgz",
+      "integrity": "sha512-FLlAGSJl/vsuaA/8hPGazXFppyzIzxApJJDZMoTS0geUmHd0hyooISV2ltllLmrZ/DGtHhI08m8GGnHL6/vVeg==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.6",
+        "@mui/utils": "^5.16.6"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@mui/x-internals": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.16.0.tgz",
@@ -4909,9 +4995,9 @@
       }
     },
     "node_modules/@types/react-transition-group": {
-      "version": "4.4.10",
+      "version": "4.4.11",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
-      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
       "dependencies": {
         "@types/react": "*"
       }
@@ -7698,6 +7784,11 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
     "node_modules/debug": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",

package.json

@@ -16,8 +16,10 @@
     "@mui/material": "^5.16.7",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@mui/x-charts": "^7.16.0",
+    "@mui/x-date-pickers": "^7.17.0",
     "aos": "^2.3.4",
     "date-fns": "^3.6.0",
+    "dayjs": "^1.11.13",
     "i": "^0.3.7",
     "jalaali-react-date-picker": "^1.0.18",
     "jalali-moment": "^3.3.11",