handle disable hour time end greater than time start

app/component/TimePickerField.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"
 
-function TimePickerField({ dataChange, setData, data }) {
+function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
 
     const [value, setValue] = useState('00:00');
 
@@ -11,13 +11,21 @@ function TimePickerField({ dataChange, setData, data }) {
             <LocalizationProvider dateAdapter={AdapterDayjs}>
                 <TimePicker
                     ampm={false}
+                    disabled={disable}
                     format="hh:mm"
                     className="!w-full"
                     shouldDisableTime={(timeValue, clockType) => {
                         if (clockType === 'hours') {
+                            const { idx, is_morgen } = dataChange;
+                            const value = data[idx][is_morgen ? 'morning_time' : 'evening_time'][0];
+                            const hourSelected = value ? +value.split(':')[0] : false
+
+                            const disableMinHour = timeStart || !value ? false :
+                                (hourSelected + 1 > timeValue.$H)
                             return dataChange.is_morgen ?
-                                !(16 > timeValue.$H && timeValue.$H > 5) :
+                                !(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour) :
-                                !(24 > timeValue.$H && timeValue.$H > 11)
+                                !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour)
+
                         }
                     }}
                     views={['hours', 'minutes']}
@@ -29,8 +37,8 @@ function TimePickerField({ dataChange, setData, data }) {
                         const newValue = `${handleTwoLength(hours)}:${handleTwoLength(minute)}`;
 
                         const newData = data;
-                        const { idx, is_morning } = dataChange;
+                        const { idx, is_morgen } = dataChange;
-                        newData[idx][is_morning ? 'morning_time' : 'evening_time'] = newValue
+                        newData[idx][is_morgen ? 'morning_time' : 'evening_time'][timeStart ? 0 : 1] = newValue;
 
                         setValue(newValue);
                     }}
@@ -54,7 +62,9 @@ function TimePickerField({ dataChange, setData, data }) {
                         }
                     }}
                 />
-                <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>
+                <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
+                ${disable && '!text-[rgba(126,126,126,0.5)]'}`}>{value}</p>
             </LocalizationProvider>
         </div>
     )

components/icons/EditOrangeAD.js

@@ -0,0 +1,11 @@
+function EditOrangeAD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M11.0504 3.00002L4.20878 10.2417C3.95045 10.5167 3.70045 11.0584 3.65045 11.4334L3.34211 14.1334C3.23378 15.1084 3.93378 15.775 4.90045 15.6084L7.58378 15.15C7.95878 15.0834 8.48378 14.8084 8.74211 14.525L15.5838 7.28335C16.7671 6.03335 17.3004 4.60835 15.4588 2.86668C13.6254 1.14168 12.2338 1.75002 11.0504 3.00002Z" stroke="#F17732" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9.9082 4.20801C10.2665 6.50801 12.1332 8.26634 14.4499 8.49967" stroke="#F17732" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M2.5 18.333H17.5" stroke="#F17732" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default EditOrangeAD

components/panel/addDoctor/listMenu/workingDays/List.js

@@ -1,17 +1,18 @@
 import { useState } from "react";
 import ModalAddTime from "./modal/ModalAddTime";
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
+import { Button, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
 import ContentModal from "./modal/ContentModal";
+import EditOrangeAD from "@/components/icons/EditOrangeAD";
 
 function List() {
 
     const [data, setData] = useState([
-        { name: 'شنبه', morning_time: '', evening_time: '' },
+        { name: 'شنبه', morning_time: ['', ''], evening_time: ['', ''] },
-        { name: 'یکشنبه', morning_time: '', evening_time: '' },
+        { name: 'یکشنبه', morning_time: ['', ''], evening_time: ['', ''] },
-        { name: 'دوشنبه', morning_time: '', evening_time: '' },
+        { name: 'دوشنبه', morning_time: ['', ''], evening_time: ['', ''] },
-        { name: 'سه شنبه', morning_time: '', evening_time: '' },
+        { name: 'سه شنبه', morning_time: ['', ''], evening_time: ['', ''] },
-        { name: 'چهار شنبه', morning_time: '', evening_time: '' },
+        { name: 'چهار شنبه', morning_time: ['', ''], evening_time: ['', ''] },
-        { name: 'پنج شنبه', morning_time: '', evening_time: '' },
+        { name: 'پنج شنبه', morning_time: ['', ''], evening_time: ['', ''] },
     ]);
 
     const [open, setOpen] = useState(false);
@@ -21,6 +22,8 @@ function List() {
         is_morgen: false,
         idx: undefined
     });
+    console.log(data);
+
 
     return (
         <div className="w-full flex justify-center">
@@ -55,7 +58,21 @@ function List() {
                                     {row.name}
                                 </TableCell>
                                 <TableCell className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
-                                    {row.morning_time || (
+                                    {row.morning_time[0] || row.morning_time[1] ? (
+                                        <Button
+                                            onClick={() => {
+                                                handleOpen();
+                                                setDataChange({
+                                                    is_morgen: true,
+                                                    idx
+                                                })
+                                            }}
+                                            className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
+                                        >
+                                            {`${row.morning_time[0]} - ${row.morning_time[1]}`}
+                                            <EditOrangeAD />
+                                        </Button>
+                                    ) : (
                                         <ModalAddTime
                                             setDataChange={setDataChange}
                                             handleOpen={handleOpen}
@@ -66,7 +83,21 @@ function List() {
                                     )}
                                 </TableCell>
                                 <TableCell className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
-                                    {row.evening_time || (
+                                    {row.evening_time[0] || row.evening_time[1] ? (
+                                        <Button
+                                            onClick={() => {
+                                                handleOpen();
+                                                setDataChange({
+                                                    is_morgen: false,
+                                                    idx
+                                                })
+                                            }}
+                                            className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
+                                        >
+                                            {`${row.evening_time[0]} - ${row.evening_time[1]}`}
+                                            <EditOrangeAD />
+                                        </Button>
+                                    ) : (
                                         <ModalAddTime
                                             setDataChange={setDataChange}
                                             handleOpen={handleOpen}

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

@@ -3,8 +3,14 @@ import { styleDefault } from "@/mui"
 import { Box, Button, Modal } from "@mui/material"
 import Radios from "./Radios"
 import Form from "./Form"
+import { useState } from "react"
 
 function ContentModal({ open, data, setOpen, setData, dataChange, handleClose }) {
+
+    const [value, setValue] = useState(0);
+
+    const handleChange = event => setValue(+event.target.value);
+
     return (
         <Modal
             open={open}
@@ -25,11 +31,15 @@ function ContentModal({ open, data, setOpen, setData, dataChange, handleClose })
                     </Button>
                 </div>
                 <div className="mx-0 md:mx-[52px]">
-                    <Radios />
+                    <Radios
+                        value={value}
+                        handleChange={handleChange}
+                    />
                     <Form
                         handleClose={handleClose}
                         dataChange={dataChange}
                         setData={setData}
+                        value={value}
                         data={data}
                     />
                 </div>

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

@@ -2,20 +2,24 @@ import { Button } from "@mui/material";
 import ContentText from "@/components/panel/ContentText";
 import TimePickerField from "@/app/component/TimePickerField";
 
-function Form({ handleClose, setData, dataChange, data }) {
+function Form({ handleClose, setData, dataChange, data, value }) {
     return (
         <div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
             <ContentText text='زمان شروع'>
                 <TimePickerField
                     dataChange={dataChange}
+                    disable={value === 1}
                     setData={setData}
+                    timeStart={true}
                     data={data}
                 />
             </ContentText>
             <ContentText text='زمان پایان'>
                 <TimePickerField
                     dataChange={dataChange}
+                    disable={value === 1}
                     setData={setData}
+                    timeStart={false}
                     data={data}
                 />
             </ContentText>

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

@@ -14,7 +14,7 @@ function ModalAddTime({ handleOpen, isMorgen, idx, setDataChange }) {
                         idx
                     })
                 }}
-                className='!gap-[2px] sm:!gap-[4px] md:!gap-[6px] lg:!gap-[8px] !p-1 !text-[#5559CE] !text-[14px] md:!text-[16px] !font-medium'
+                className='!gap-[2px] !min-w-[146px] sm:!gap-[4px] md:!gap-[6px] lg:!gap-[8px] !p-1 !text-[#5559CE] !text-[14px] md:!text-[16px] !font-medium'
             >
                 <AddTimeP />
                 انتخاب کنید

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

@@ -1,19 +1,20 @@
 import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
 
-function Radios() {
+function Radios({ value, handleChange }) {
     return (
         <RadioGroup
             dir="ltr"
+            defaultValue={value}
+            onChange={handleChange}
             className="!flex !flex-row !mb-[32px] md:!mb-[36px] !my-[40px] !gap-[36px] !items-center !justify-end"
-            defaultValue='workingDay'
             sx={{
                 '& .muirtl-j204z7-MuiFormControlLabel-root': {
                     marginLeft: '0 !important'
                 }
             }}
         >
-            <FormControlLabel value="workingDay" control={<Radio />} label="روز کاری" />
+            <FormControlLabel value={0} control={<Radio />} label="روز کاری" />
-            <FormControlLabel value="holiday" control={<Radio />} label="تعطیل" />
+            <FormControlLabel value={1} control={<Radio />} label="تعطیل" />
         </RadioGroup>
     )
 }