change date-picker & add page login-verify & account & new user & payment

app/account/[slug]/page.js

@@ -0,0 +1,16 @@
+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/component/date/datePicker/index.js

@@ -1,33 +1,44 @@
-'use client'
+'use client';
 
 import { useState } from 'react';
-import { DatePicker as DatePickerJalali, RangePicker } from "jalaali-react-date-picker";
+import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
 
-function DatePicker({ type, date, updateDate, text, from }) {
+function DatePicker({ date, updateDate }) {
+    const [startDate, setStartDate] = useState(null);
+    const [endDate, setEndDate] = useState(null);
 
-    const [anchorEl, setAnchorEl] = useState(null);
-
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
+    const handleStartDateChange = (date) => {
+        if (date) {
+            setStartDate(date);
+            setEndDate(null); // Clear end date if start date is selected
+            // updateDate(date); // Notify parent about the selected date
+        }
     };
 
-    const handleClose = () => setAnchorEl(null);
-
-    const open = true;
-    const id = open ? 'simple-popover' : undefined;
+    const handleEndDateChange = (date) => {
+        if (date) {
+            setEndDate(date);
+            setStartDate(null); // Clear start date if end date is selected
+            // updateDate(date); // Notify parent about the selected date
+        }
+    };
 
     return (
-        <div>
-            <RangePicker
-                onChange={(e) => {
-                    // if (e._d) {
-                    //     updateDate(e._d, type)
-                    // }
-                    // handleClose()
-                }}
+        <div className='flex items-start gap-[40px]'>
+            <DatePickerJalali
+                value={startDate}
+                className='w-1/2'
+                timePicker={false}
+                onChange={handleStartDateChange}
+            />
+            <DatePickerJalali
+                value={endDate}
+                className='w-1/2'
+                timePicker={false}
+                onChange={handleEndDateChange}
             />
         </div>
-    )
+    );
 }
 
-export default DatePicker
+export default DatePicker;

app/component/date/dateTime/index.js

@@ -5,6 +5,7 @@ import Tabs from "../../Tabs";
 import Hours from "./Hours";
 import { Button } from "@mui/material";
 import ArrowLeftB from "@/components/icons/ArrowLeftB";
+import Link from "next/link";
 
 const listTab = ['صبح', 'بعد از ظهر'];
 const nameHours = ['hours_morning', 'hours_afternoon']
@@ -32,13 +33,20 @@ function DateTime({ doctor }) {
         nameHours={nameHours}
       />
       <div className="w-full flex justify-end">
-        <Button
-          className="!gap-[4px] !px-[12px] !py-[8px] !min-w-[157px]"
-          variant="contained"
+        <Link
+          href='/login-verify'
         >
-          <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
-          <ArrowLeftB />
-        </Button>
+          <Button
+            className="!gap-[4px] !px-[12px] !py-[8px] !min-w-[157px]"
+            onClick={() =>
+              localStorage.setItem('doctor-id', doctor?.id)
+            }
+            variant="contained"
+          >
+            <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
+            <ArrowLeftB />
+          </Button>
+        </Link>
       </div>
     </div>
   )

app/component/element/AutoCompleteSelect.js

@@ -7,7 +7,7 @@ function AutoCompleteSelect({ list, updateData, name, label }) {
         <Autocomplete
             disablePortal
             options={list}
-            className="!w-full !rounded-lg md:!w-[344px]"
+            className="!w-full !rounded-lg"
             onChange={(event) =>
                 updateData &&
                 updateData(event, name)

app/globals.css

@@ -183,6 +183,7 @@ html {
     background-size: cover !important;
     background-repeat: no-repeat !important;
     background-position: center !important;
+    z-index: -10;
 }
 
 .bg-banner-register {

app/login-verify/page.js

@@ -1,12 +1,23 @@
-import Layout from '@/components/layout'
-import LoginVerifyPage from '@/components/loginVerify'
-import React from 'react'
+'use client';
+
+import RegisterPage from '@/components/register';
+import SetCodePage from '@/components/register/SetCodePage';
+import SignInPage from '@/components/register/SignInPage';
+import { useState } from 'react';
 
 function LoginVerify() {
+
+    const [isSendMsg, setIsSendMsg] = useState(false);
+
     return (
-        <Layout title='وبلاگ ها' name='blogs'>
-            <LoginVerifyPage />
-        </Layout>
+        <RegisterPage>
+            {isSendMsg ?
+                <SetCodePage
+                    setIsSendMsg={setIsSendMsg}
+                    link={`/account/${localStorage.getItem('doctor-id')}`}
+                /> :
+                <SignInPage setIsSendMsg={setIsSendMsg} />}
+        </RegisterPage>
     )
 }
 

app/signin/page.js

@@ -12,7 +12,10 @@ function SignIn() {
         <div>
             <RegisterPage>
                 {isSendMsg ?
-                    <SetCodePage setIsSendMsg={setIsSendMsg} /> :
+                    <SetCodePage
+                        setIsSendMsg={setIsSendMsg}
+                        link='/'
+                    /> :
                     <SignInPage setIsSendMsg={setIsSendMsg} />}
             </RegisterPage>
         </div>