change design all page & component page booking and account & cleancode

app/account/[slug]/page.js

@@ -1,16 +0,0 @@
-import AccountPage from '@/components/account';
-import doctors from '@/data/doctors.json';
-import Layout from '@/components/layout';
-
-function Account({ params: { slug } }) {
-
-    const doctor = doctors.find(item => item.id === +slug);
-
-    return (
-        <Layout title='وبلاگ ها' name='blogs' disableFooter={true}>
-            <AccountPage doctor={doctor} />
-        </Layout>
-    )
-}
-
-export default Account

app/booking/[slug]/page.js

@@ -1,17 +1,65 @@
-import BookingPage from '@/components/booking';
+'use client'
+
+import { useState } from 'react';
+
 import Layout from '@/components/layout';
 import doctors from '@/data/doctors.json';
+import Date from '@/components/booking/date';
+import BookingPage from '@/components/booking';
+import RegisterPage from '@/components/register';
+import SetCodePage from '@/components/register/SetCodePage';
+import Paying from '@/components/booking/paying';
+import LogInPage from '@/components/register/LogInPage';
+import SuccessPay from '@/components/booking/successPay';
+import FailedPay from '@/components/booking/failedPay';
+import Detail from '@/components/booking/detail';
 
 function Booking({ params: { slug } }) {
 
     const doctor = doctors.find(item => item.id === +slug);
 
+    const [step, setStep] = useState(0);
+    const [isForAnother, setIsForAnother] = useState(false);
+
+    const [data, setData] = useState({
+        phone: { value: '09121056987', isEdit: false },
+        codemeli: { value: '1741025645', isEdit: false },
+        name: { value: 'ساغر صابری نژاد', isEdit: false }
+    });
+
+    const elements = [
+        <Date doctor={doctor} setStep={setStep} />,
+        <LogInPage setIsSendMsg={false} setStep={setStep} />,
+        <SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />,
+        <Detail isForAnother={isForAnother} setIsForAnother={setIsForAnother} setStep={setStep} data={data} setData={setData} />,
+        <Paying setStep={setStep} />,
+        <SuccessPay setStep={setStep} />,
+        <FailedPay setStep={setStep} />
+    ]
+
     return (
-        <Layout title='رزرو' name='booking'>
-            <BookingPage
-                doctor={doctor}
-            />
-        </Layout>
+        <>
+            {step === 1 || step === 2 ? (
+                <RegisterPage>
+                    {elements[step]}
+                </RegisterPage>
+            ) : (
+                <Layout
+                    title='رزرو'
+                    name='booking'
+                    disableFooter={step > 2}
+                    paddingBottom='pb-[80px]'
+                >
+                    <BookingPage
+                        disableSide={step === 5 || step === 6}
+                        isFirst={step === 0}
+                        doctor={doctor}
+                    >
+                        {elements[step]}
+                    </BookingPage>
+                </Layout>
+            )}
+        </>
     )
 }
 

app/component/Tabs.js

@@ -24,6 +24,10 @@ function Tabs({ value, handleChange, listTab, isSm }) {
                         borderRadius: isSm ? '8px' : '10px',
                         background: '#F17732'
                     },
+                    '& .MuiTabs-flexContainer': {
+                        borderBottom: isSm ? '2px solid #EFEFEF' : '',
+                        marginBottom: isSm ? '1px' : ''
+                    },
                     '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
                         color: '#F17732 !important'
                     },

app/component/date/datePicker/index.js

@@ -1,12 +1,17 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
+import Image from 'next/image';
+import { Button, Skeleton } from '@mui/material';
 
 function DatePicker({ date, updateDate }) {
 
+    const nextIconDatePicker = useRef();
+
     const [startDate, setStartDate] = useState(null);
-    const [endDate, setEndDate] = useState(null);
+    const [endDate, setEndDate] = useState();
+    const [loading, setLoading] = useState(true);
 
     const handleStartDateChange = (date) => {
         if (date) {
@@ -24,20 +29,67 @@ function DatePicker({ date, updateDate }) {
         }
     };
 
+    const handleDisableDate = e => {
+        const today = new Date();
+        return today >= e._d
+    }
+
+    useEffect(() => {
+        if (nextIconDatePicker.current) {
+            nextIconDatePicker.current.click()
+            setLoading(false)
+        }
+    }, [nextIconDatePicker])
+
     return (
         <div className='flex items-start justify-evenly w-full'>
-            <DatePickerJalali
-                value={startDate}
-                className='w-1/2'
-                timePicker={false}
-                onChange={handleStartDateChange}
-            />
-            <div className='w-1/2 hidden md:flex lg:hidden xl:flex'>
+            <div className='w-1/2 relative flex justify-center'>
                 <DatePickerJalali
-                    value={endDate}
+                    value={startDate}
+                    className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
                     timePicker={false}
-                    onChange={handleEndDateChange}
+                    onChange={handleStartDateChange}
+                    disabledDates={e => handleDisableDate(e)}
                 />
+                {loading && (
+                    <Skeleton
+                        variant="rectangular"
+                        className='!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10'
+                        height={352}
+                    />
+                )}
+            </div>
+            <div className='w-1/2 hidden md:flex lg:hidden xl:flex'>
+                <div className='w-full relative flex justify-center'>
+                    <DatePickerJalali
+                        value={endDate}
+                        timePicker={false}
+                        className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
+                        nextIcon={
+                            <Button
+                                className='!min-w-0 !p-0 !rounded-full'
+                                ref={nextIconDatePicker}
+                                onClick={e => e.preventDefault()}
+                            >
+                                <Image
+                                    src='/assets/icons/arrow-right.svg'
+                                    className='icon-left-datepicker'
+                                    height={24}
+                                    width={24}
+                                />
+                            </Button>
+                        }
+                        onChange={handleEndDateChange}
+                        disabledDates={e => handleDisableDate(e)}
+                    />
+                    {loading && (
+                        <Skeleton
+                            variant="rectangular"
+                            className='!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10'
+                            height={352}
+                        />
+                    )}
+                </div>
             </div>
         </div>
     );

app/component/date/dateTime/Hours.js

@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
 function Hours({ doctor, hour, setHour, value, nameHours }) {
     return (
         <ul
-            className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[24px] mt-[24px] mb-[40px]"
+            className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]"
         >
             {doctor[nameHours[value]].map((item, idx) => (
                 <li
@@ -11,13 +11,14 @@ function Hours({ doctor, hour, setHour, value, nameHours }) {
                 >
                     <Button
                         onClick={() => setHour(idx)}
+                        disabled={!item.active}
                         className={`
-                        !w-full !rounded-[8px] !grid !place-items-center !bg-[#EFEFEF] !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
+                        !w-full !rounded-[8px] !bg-[#EFEFEF] !grid !place-items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
                         ${idx === hour ? '!bg-[#F79463] ' : ''}
                     `}
                     >
                         <p className={`
-                        text-[16px] font-semibold
+                        text-[16px] font-semibold text-[#525252]
                         ${item.active ? 'text-[#525252]' : 'text-[#D7D7D7]'}
                         ${idx === hour ? '!text-[#FAFAFA] ' : ''}
                     `}>{item.hour}</p>

app/component/date/dateTime/index.js

@@ -1,16 +1,15 @@
 'use client';
 
 import { useState } from "react";
-import Tabs from "../../Tabs";
 import Hours from "./Hours";
+import Tabs from "../../Tabs";
 import { Button } from "@mui/material";
 import ArrowLeftB from "@/components/icons/ArrowLeftB";
-import Link from "next/link";
 
 const listTab = ['صبح', 'بعد از ظهر'];
 const nameHours = ['hours_morning', 'hours_afternoon']
 
-function DateTime({ doctor }) {
+function DateTime({ doctor, setStep, setIsError, locateVisit }) {
 
   const [value, setValue] = useState(0);
   const [hour, setHour] = useState(0);
@@ -32,21 +31,23 @@ function DateTime({ doctor }) {
         setHour={setHour}
         nameHours={nameHours}
       />
-      <Link
-        href='/login-verify'
-        className="w-full flex justify-end"
-      >
+      <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]"
-          onClick={() =>
-            localStorage.setItem('doctor-id', doctor?.id)
-          }
+          onClick={() => {
+            if (locateVisit) {
+              localStorage.setItem('doctor-id', doctor?.id);
+              setStep(prev => prev + 1);
+            } else {
+              setIsError(true);
+            }
+          }}
           variant="contained"
         >
           <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
           <ArrowLeftB />
         </Button>
-      </Link>
+      </div>
     </div>
   )
 }

app/component/element/AutoCompleteSelect.js

@@ -2,7 +2,7 @@ import BottomSelect from "@/components/icons/BottomSelect";
 import { Autocomplete, TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function AutoCompleteSelect({ list, updateData, name, label }) {
+function AutoCompleteSelect({ list, isError, updateData, name, label }) {
     return (
         <Autocomplete
             disablePortal
@@ -25,6 +25,9 @@ function AutoCompleteSelect({ list, updateData, name, label }) {
                     borderRadius: 2,
                     padding: '5px 16px !important'
                 },
+                '& .MuiOutlinedInput-notchedOutline': {
+                    border: isError ? '1px solid red' : ''
+                }
             }}
             renderInput={params =>
                 <TextField

app/globals.css

@@ -359,6 +359,10 @@ html {
     rotate: 180deg;
 }
 
+.icon-left-datepicker {
+    rotate: 180deg;
+}
+
 .panel-date-holder-item span {
     /* font-family: Iran Sans !important; */
     font-size: 18px !important;
@@ -422,6 +426,14 @@ html {
     background: #FFF !important;
 }
 
+.day-item-outer .day-item-chain .day {
+    border-radius: 50%;
+}
+
+.panel-jalaali .today {
+    border-color: transparent !important;
+}
+
 @media (max-width: 1024px) {
 
     .day-label-bar-inner-rtl,

app/login-verify/page.js

@@ -2,7 +2,7 @@
 
 import RegisterPage from '@/components/register';
 import SetCodePage from '@/components/register/SetCodePage';
-import SignInPage from '@/components/register/SignInPage';
+import LogInPage from '@/components/register/LoginPage';
 import { useState } from 'react';
 
 function LoginVerify() {
@@ -16,7 +16,7 @@ function LoginVerify() {
                     setIsSendMsg={setIsSendMsg}
                     link={`/account/${localStorage.getItem('doctor-id')}`}
                 /> :
-                <SignInPage setIsSendMsg={setIsSendMsg} />}
+                <LogInPage setIsSendMsg={setIsSendMsg} />}
         </RegisterPage>
     )
 }

app/login/page.js

@@ -1,12 +1,12 @@
 'use client';
 import RegisterPage from '@/components/register';
 import SetCodePage from '@/components/register/SetCodePage';
-import SignInPage from '@/components/register/SignInPage';
+import LogInPage from '@/components/register/LogInPage';
 import { useState } from 'react';
 
-function SignIn() {
+function LogIn() {
 
-    const [isSendMsg, setIsSendMsg] = useState(true);
+    const [isSendMsg, setIsSendMsg] = useState(false);
 
     return (
         <div>
@@ -14,12 +14,13 @@ function SignIn() {
                 {isSendMsg ?
                     <SetCodePage
                         setIsSendMsg={setIsSendMsg}
+                        setStep={false}
                         link='/'
                     /> :
-                    <SignInPage setIsSendMsg={setIsSendMsg} />}
+                    <LogInPage setStep={false} setIsSendMsg={setIsSendMsg} />}
             </RegisterPage>
         </div>
     )
 }
 
-export default SignIn
+export default LogIn

app/signup/page.js

@@ -1,9 +0,0 @@
-import React from 'react'
-
-function SignUp() {
-  return (
-    <div>SignUp</div>
-  )
-}
-
-export default SignUp