change tabs dashboard & handle hour functionality code page add timer

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() {
+function TimePickerField({ dataChange, setData, data }) {
 
     const [value, setValue] = useState('00:00');
 
@@ -13,14 +13,26 @@ function TimePickerField() {
                     ampm={false}
                     format="hh:mm"
                     className="!w-full"
+                    shouldDisableTime={(timeValue, clockType) => {
+                        if (clockType === 'hours') {
+                            return dataChange.is_morgen ?
+                                !(16 > timeValue.$H && timeValue.$H > 5) :
+                                !(24 > timeValue.$H && timeValue.$H > 11)
+                        }
+                    }}
                     views={['hours', 'minutes']}
                     placeholder="انتخاب کنید..."
                     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)}`;
 
-                        setValue(`${handleTwoLength(hours)}:${handleTwoLength(minute)}`)
+                        const newData = data;
+                        const { idx, is_morning } = dataChange;
+                        newData[idx][is_morning ? 'morning_time' : 'evening_time'] = newValue
+
+                        setValue(newValue);
                     }}
                     sx={{
                         '& .MuiFormLabel-root': {

app/component/date/dateTime/index.js

@@ -50,7 +50,7 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
       />
       <div className="w-full flex justify-end">
         <Button
-          className="!gap-[4px] !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
+          className="!gap-[4px] !shadow-none !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
           onClick={() => {
             if (locateVisit) {
               localStorage.setItem('doctor-id', doctor?.id);

components/booking/date/Time/index.js

@@ -1,10 +1,13 @@
 import SelectDatePicker from "./SelectDatePicker"
 
-function Time() {
+function Time({ isStep }) {
     return (
-        <div className="flex mt-[24px] flex-col items-start gap-[19px] justify-start">
+        <div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
             <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">2. انتخاب روز</p>
             <SelectDatePicker />
+            {!isStep && (
+                <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
+            )}
         </div>
     )
 }

components/booking/date/hour/index.js

@@ -1,8 +1,8 @@
 import DateTime from "@/app/component/date/dateTime"
 
-function Hour({ doctor, setStep, setIsError, locateVisit }) {
+function Hour({ doctor, setStep, setIsError, locateVisit, isStep }) {
     return (
-        <div className="flex mt-[24px] flex-col items-start gap-[12px] justify-start">
+        <div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
             <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">3. انتخاب ساعت</p>
             <DateTime
                 doctor={doctor}
@@ -10,6 +10,9 @@ function Hour({ doctor, setStep, setIsError, locateVisit }) {
                 setIsError={setIsError}
                 locateVisit={locateVisit}
             />
+            {!isStep && (
+                <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
+            )}
         </div>
     )
 }

components/booking/date/index.js

@@ -10,14 +10,19 @@ function Date({ doctor, setStep }) {
 
     return (
         <div className="w-full lg:w-[61%]">
-            <div className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] bg-transparent lg:bg-[#FFF]">
+            <div className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] 
+            bg-transparent lg:bg-[#FFF]">
                 <PlaceVisit
                     setLocateVisit={setLocateVisit}
                     locateVisit={locateVisit}
                     isError={isError}
                 />
-                <Time />
+                <Time
+                    isStep={doctor.multiwork ? locateVisit : true}
+                    locateVisit={locateVisit}
+                />
                 <Hour
+                    isStep={doctor.multiwork ? locateVisit : true}
                     setLocateVisit={setLocateVisit}
                     locateVisit={locateVisit}
                     setIsError={setIsError}

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

@@ -17,6 +17,10 @@ function List() {
     const [open, setOpen] = useState(false);
     const handleOpen = () => setOpen(true);
     const handleClose = () => setOpen(false);
+    const [dataChange, setDataChange] = useState({
+        is_morgen: false,
+        idx: undefined
+    });
 
     return (
         <div className="w-full flex justify-center">
@@ -42,7 +46,7 @@ function List() {
                         </TableRow>
                     </TableHead>
                     <TableBody>
-                        {data.map((row) => (
+                        {data.map((row, idx) => (
                             <TableRow
                                 key={row.name}
                                 sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
@@ -50,14 +54,26 @@ function List() {
                                 <TableCell className="!border-[1px] !border-[#DBDBDB]" component="th" scope="row">
                                     {row.name}
                                 </TableCell>
-                                <TableCell className="!border-[1px] !border-[#DBDBDB]" align="right">
+                                <TableCell className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
-                                    {row.morning_time ? '' : (
+                                    {row.morning_time || (
-                                        <ModalAddTime handleOpen={handleOpen} />
+                                        <ModalAddTime
+                                            setDataChange={setDataChange}
+                                            handleOpen={handleOpen}
+                                            setData={setData}
+                                            isMorgen={true}
+                                            idx={idx}
+                                        />
                                     )}
                                 </TableCell>
-                                <TableCell className="!border-[1px] !border-[#DBDBDB]" align="right">
+                                <TableCell className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
-                                    {row.evening_time ? '' : (
+                                    {row.evening_time || (
-                                        <ModalAddTime handleOpen={handleOpen} />
+                                        <ModalAddTime
+                                            setDataChange={setDataChange}
+                                            handleOpen={handleOpen}
+                                            setData={setData}
+                                            isMorgen={false}
+                                            idx={idx}
+                                        />
                                     )}
                                 </TableCell>
                             </TableRow>
@@ -67,7 +83,10 @@ function List() {
             </TableContainer>
             <ContentModal
                 open={open}
+                data={data}
                 setOpen={setOpen}
+                setData={setData}
+                dataChange={dataChange}
                 handleClose={handleClose}
             />
         </div>

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

@@ -4,7 +4,7 @@ import { Box, Button, Modal } from "@mui/material"
 import Radios from "./Radios"
 import Form from "./Form"
 
-function ContentModal({ open, setOpen, handleClose }) {
+function ContentModal({ open, data, setOpen, setData, dataChange, handleClose }) {
     return (
         <Modal
             open={open}
@@ -26,7 +26,12 @@ function ContentModal({ open, setOpen, handleClose }) {
                 </div>
                 <div className="mx-0 md:mx-[52px]">
                     <Radios />
-                    <Form handleClose={handleClose} />
+                    <Form
+                        handleClose={handleClose}
+                        dataChange={dataChange}
+                        setData={setData}
+                        data={data}
+                    />
                 </div>
             </Box>
         </Modal>

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

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

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

@@ -2,12 +2,18 @@ import AddTimeP from '@/components/icons/AddTimeP'
 import { Button } from '@mui/material'
 import React from 'react'
 
-function ModalAddTime({ handleOpen }) {
+function ModalAddTime({ handleOpen, isMorgen, idx, setDataChange }) {
     return (
         <div>
             <Button
                 variant='text'
-                onClick={handleOpen}
+                onClick={() => {
+                    handleOpen();
+                    setDataChange({
+                        is_morgen: isMorgen,
+                        idx
+                    })
+                }}
                 className='!gap-[2px] sm:!gap-[4px] md:!gap-[6px] lg:!gap-[8px] !p-1 !text-[#5559CE] !text-[14px] md:!text-[16px] !font-medium'
             >
                 <AddTimeP />

data/doctors.json

@@ -2,6 +2,7 @@
     {
         "id": 1,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -604,6 +605,7 @@
     {
         "id": 2,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -1206,6 +1208,7 @@
     {
         "id": 3,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -1808,6 +1811,7 @@
     {
         "id": 4,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -2410,6 +2414,7 @@
     {
         "id": 5,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -3012,6 +3017,7 @@
     {
         "id": 6,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -3614,6 +3620,7 @@
     {
         "id": 7,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -4216,6 +4223,7 @@
     {
         "id": 8,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -4818,6 +4826,7 @@
     {
         "id": 9,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -5420,6 +5429,7 @@
     {
         "id": 10,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -6022,6 +6032,7 @@
     {
         "id": 11,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -6624,6 +6635,7 @@
     {
         "id": 12,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -7226,6 +7238,7 @@
     {
         "id": 13,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -7828,6 +7841,7 @@
     {
         "id": 14,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -8430,6 +8444,7 @@
     {
         "id": 15,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -9032,6 +9047,7 @@
     {
         "id": 16,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -9634,6 +9650,7 @@
     {
         "id": 17,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -10236,6 +10253,7 @@
     {
         "id": 18,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -10838,6 +10856,7 @@
     {
         "id": 19,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -11440,6 +11459,7 @@
     {
         "id": 20,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -12042,6 +12062,7 @@
     {
         "id": 21,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -12644,6 +12665,7 @@
     {
         "id": 22,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -13246,6 +13268,7 @@
     {
         "id": 23,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -13848,6 +13871,7 @@
     {
         "id": 24,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -14450,6 +14474,7 @@
     {
         "id": 25,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -15052,6 +15077,7 @@
     {
         "id": 26,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -15654,6 +15680,7 @@
     {
         "id": 27,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -16256,6 +16283,7 @@
     {
         "id": 28,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -16858,6 +16886,7 @@
     {
         "id": 29,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -17460,6 +17489,7 @@
     {
         "id": 30,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -18062,6 +18092,7 @@
     {
         "id": 31,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -18664,6 +18695,7 @@
     {
         "id": 32,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -19266,6 +19298,7 @@
     {
         "id": 33,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -19868,6 +19901,7 @@
     {
         "id": 34,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -20470,6 +20504,7 @@
     {
         "id": 35,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -21072,6 +21107,7 @@
     {
         "id": 36,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -21674,6 +21710,7 @@
     {
         "id": 37,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -22276,6 +22313,7 @@
     {
         "id": 38,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -22878,6 +22916,7 @@
     {
         "id": 39,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -23480,6 +23519,7 @@
     {
         "id": 40,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -24082,6 +24122,7 @@
     {
         "id": 41,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -24684,6 +24725,7 @@
     {
         "id": 42,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -25286,6 +25328,7 @@
     {
         "id": 43,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -25888,6 +25931,7 @@
     {
         "id": 44,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -26490,6 +26534,7 @@
     {
         "id": 45,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -27092,6 +27137,7 @@
     {
         "id": 46,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -27694,6 +27740,7 @@
     {
         "id": 47,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",
@@ -28296,6 +28343,7 @@
     {
         "id": 48,
         "name": "دکتر مهران امینی",
+        "multiwork": true,
         "hours_morning": [
             {
                 "hour": "09.00",