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

2024-08-26 20:04:33 +03:30
parent 31ed32fc21
commit 7925493681
34 changed files with 564 additions and 60 deletions
@@ -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
@@ -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;
@@ -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>
  )
@@ -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)
@@ -183,6 +183,7 @@ html {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
+    z-index: -10;
 }

 .bg-banner-register {
@@ -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>
    )
 }

@@ -12,7 +12,10 @@ function SignIn() {
        <div>
            <RegisterPage>
                {isSendMsg ?
-                    <SetCodePage setIsSendMsg={setIsSendMsg} /> :
+                    <SetCodePage
+                        setIsSendMsg={setIsSendMsg}
+                        link='/'
+                    /> :
                    <SignInPage setIsSendMsg={setIsSendMsg} />}
            </RegisterPage>
        </div>
@@ -0,0 +1,64 @@
+import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA"
+import CalendarA from "@/components/icons/CalendarA"
+import ClockA from "@/components/icons/ClockA"
+import LocationA from "@/components/icons/LocationA"
+import TickCircleOrange from "@/components/icons/TickCircleOrange"
+import { Button } from "@mui/material"
+
+function Detail({ doctor }) {
+    return (
+        <div className="mt-[8px]">
+            <ul className="flex flex-col items-start justify-start gap-[24px]">
+                <li className="flex items-center justify-start gap-[4px]">
+                    <LocationA />
+                    <p className="text-[#616161] text-[16px] font-normal">آدرس: {doctor.location}</p>
+                </li>
+                <li className="flex items-center justify-between w-full">
+                    <div className="flex items-center justify-start gap-[4px]">
+                        <CalendarA />
+                        <div className="flex items-center justify-start">
+                            <p className="text-[#616161] text-[16px] font-medium">تاریخ نوبت: </p>
+                            <p className="text-[#2F2F2F] text-[16px] font-medium mr-1">13 خرداد 1403</p>
+                        </div>
+                    </div>
+                    <Button
+                        className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+                        variant="text"
+                    >
+                        <p className="!text-[#F17732] !text-[14px] !font-normal">تغییر </p>
+                        <ArrowLeftOrangeA />
+                    </Button>
+                </li>
+                <li className="flex items-center justify-between w-full">
+                    <div className="flex items-center justify-start gap-[4px]">
+                        <ClockA />
+                        <div className="flex items-center justify-start">
+                            <p className="text-[#616161] text-[16px] font-medium">زمان نوبت: </p>
+                            <p className="text-[#2F2F2F] text-[16px] font-medium mr-1">ساعت 17:20</p>
+                        </div>
+                    </div>
+                    <Button
+                        className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+                        variant="text"
+                    >
+                        <p className="!text-[#F17732] !text-[14px] !font-normal">تغییر </p>
+                        <ArrowLeftOrangeA />
+                    </Button>
+                </li>
+            </ul>
+            <span className="mt-[28px] mb-[24px] w-full h-px bg-[#D7D7D7] block"></span>
+            <ul className="flex flex-col items-start justify-start gap-[24px]">
+                <li className="flex items-center justify-start gap-[8px]">
+                    <TickCircleOrange />
+                    <p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p>
+                </li>
+                <li className="flex items-center justify-start gap-[8px]">
+                    <TickCircleOrange />
+                    <p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p>
+                </li>
+            </ul>
+        </div>
+    )
+}
+
+export default Detail
@@ -0,0 +1,20 @@
+import Image from "next/image"
+
+function Head({ doctor }) {
+    return (
+        <div className="flex items-center justify-start gap-[16px] my-[24px]">
+            <Image
+                alt="profile doctor"
+                src={doctor.img}
+                height={95}
+                width={95}
+            />
+            <div className="flex flex-col items-start justify-center gap-[20px]">
+                <p className="text-[#3B3B3B] text-[20px] font-medium">{doctor.name}</p>
+                <p className="text-[#616161] text-[16px] font-medium">تخصص: {doctor.expertise}</p>
+            </div>
+        </div>
+    )
+}
+
+export default Head
@@ -0,0 +1,14 @@
+import Detail from "./Detail"
+import Head from "./Head"
+
+function DetailDoctor({ doctor }) {
+    return (
+        <div className="p-[24px] w-[41%] rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
+            <p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
+            <Head doctor={doctor} />
+            <Detail doctor={doctor} />
+        </div>
+    )
+}
+
+export default DetailDoctor
@@ -0,0 +1,17 @@
+import DetailDoctor from "./detailDoctor"
+import Information from "./information";
+
+function AccountPage({ doctor }) {
+    return (
+        <div
+            className="padding-responsive pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] 
+            md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
+            flex items-start gap-[24px]"
+        >
+            <DetailDoctor doctor={doctor} />
+            <Information />
+        </div>
+    )
+}
+
+export default AccountPage
@@ -0,0 +1,17 @@
+function Content({ isConfirmed, children, title }) {
+  return (
+    <div className='flex w-full flex-col items-start justify-start gap-[16px]'>
+      <div className='flex min-h-[32px] items-center justify-start gap-[4px]'>
+        <p className="text-[#525252] text-[14px] font-medium">{title}</p>
+        {isConfirmed && (
+          <p
+            className='py-[2px] px-[5px] leading-[28px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[12px] font-normal'
+          >تایید شده</p>
+        )}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export default Content
@@ -0,0 +1,42 @@
+import EditOrangeA from "@/components/icons/EditOrangeA"
+import { Button, TextField } from "@mui/material"
+
+function EditField({ changeData, data, name }) {
+    return (
+        <div className="relative w-full">
+            <TextField
+                value={data.value}
+                disabled={!data.isEdit}
+                type='text'
+                className="!bg-[#FFF] !w-full"
+                onChange={e => {
+                    changeData(e.target.value, 'value', name)
+                }}
+                sx={{
+                    '& .MuiFormLabel-root': {
+                        top: '-4px !important'
+                    },
+                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
+                    '& .MuiInputBase-root': { borderRadius: '6px !important' },
+                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
+                    ".Mui-focused": {
+                        '& .MuiOutlinedInput-notchedOutline': {
+                            border: '1px solid #5559CE !important',
+                            transition: '0.5s all'
+                        }
+                    }
+                }}
+            />
+            <Button
+                className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
+                onClick={() => {
+                    changeData(!data.isEdit, 'isEdit', name)
+                }}
+            >
+                <EditOrangeA />
+            </Button>
+        </div>
+    )
+}
+
+export default EditField
@@ -0,0 +1,35 @@
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import EditField from "./EditField";
+import Content from "./Content";
+
+const bime = [
+    { label: 'بیمه 1', id: 10 },
+    { label: 'بیمه 2', id: 20 },
+    { label: 'بیمه 3', id: 30 }
+];
+
+function Form({ changeData, data, updateSelect, isForAnother }) {
+    return (
+        <div className="grid mt-[20px] items-start justify-center gap-x-[24px] gap-y-[16px] grid-cols-2">
+            <Content title='شماره موبایل' isConfirmed={isForAnother ? false : true}>
+                <EditField changeData={changeData} data={data.phone} name='phone' />
+            </Content>
+            <Content title='کد ملی'>
+                <EditField changeData={changeData} data={data.codemeli} name='codemeli' />
+            </Content>
+            <Content title='نام و نام خانوادگی'>
+                <EditField changeData={changeData} data={data.name} name='name' />
+            </Content>
+            <Content title='نوع بیمه'>
+                <AutoCompleteSelect
+                    updateData={updateSelect}
+                    label='نوع بیمه'
+                    name='first'
+                    list={bime}
+                />
+            </Content>
+        </div>
+    )
+}
+
+export default Form
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import Form from "./Form";
+import { Button } from "@mui/material";
+import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
+import ArrowLeftB from "@/components/icons/ArrowLeftB";
+
+function Detail({ isForAnother, setIsForAnother, setIsPay }) {
+
+
+    const [selected, setSelected] = useState({
+        first: '',
+        second: ''
+    });
+    const [data, setData] = useState({
+        phone: { value: '09121056987', isEdit: false },
+        codemeli: { value: '1741025645', isEdit: false },
+        name: { value: 'ساغر صابری نژاد', isEdit: false }
+    });
+
+    const changeData = (value, type, name) =>
+        setData({
+            ...data,
+            [name]: {
+                ...data[name],
+                [type]: value
+            }
+        });
+
+    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
+
+    return (
+        <>
+            <p className="text-[#3B3B3B] text-[20px] font-bold">
+                {isForAnother ? 'اطلاعات کاربر جدید' : 'اطلاعات حساب کاربری'}
+            </p>
+            <Form
+                isForAnother={isForAnother}
+                updateSelect={updateSelect}
+                changeData={changeData}
+                data={data}
+            />
+            {!isForAnother && (
+                <Button
+                    className="!flex !items-center !justify-start !gap-[8px] !mt-[24px] !p-1"
+                    onClick={() => {
+                        setIsForAnother(true);
+                        setData({
+                            phone: { value: '09121056987', isEdit: false },
+                            codemeli: { value: '1741025645', isEdit: false },
+                            name: { value: 'ساغر صابری نژاد', isEdit: false }
+                        });
+                    }}
+                >
+                    <AddCircleBlueA />
+                    <p className="text-[#5559CE] text-[16px] font-medium">دریافت نوبت برای فرد دیگر </p>
+                </Button>
+            )}
+            <Button
+                className={`
+                    !gap-[4px] !mr-auto !flex !px-[12px] !py-[8px] !min-w-[150px] 
+                    ${isForAnother ? '!mt-[94px]' : '!mt-[32px]'}`}
+                variant="contained"
+                onClick={() => setIsPay(true)}
+            >
+                <p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
+                <ArrowLeftB />
+            </Button>
+        </>
+    )
+}
+
+export default Detail
@@ -0,0 +1,27 @@
+'use client';
+
+import { useState } from "react";
+import Detail from "./detail";
+import Payment from "./payment";
+
+function Information() {
+
+    const [isForAnother, setIsForAnother] = useState(false)
+
+    const [isPay, setIsPay] = useState(false);
+
+    return (
+        <div className="w-[59%] p-[24px] bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
+            {isPay ?
+                <Payment /> :
+                <Detail
+                    setIsPay={setIsPay}
+                    isForAnother={isForAnother}
+                    setIsForAnother={setIsForAnother}
+                />
+            }
+        </div>
+    )
+}
+
+export default Information
@@ -0,0 +1,7 @@
+function FailedPay() {
+    return (
+        <div>FailedPay</div>
+    )
+}
+
+export default FailedPay
@@ -0,0 +1,30 @@
+import ArrowLeftB from '@/components/icons/ArrowLeftB';
+import { Button } from '@mui/material';
+
+function Paying({ setTypePay }) {
+    return (
+        <>
+            <p className="text-[#3B3B3B] text-[20px] font-bold">
+                اطلاعات پرداخت
+            </p>
+            <div className='flex justify-between items-center mt-[30px]'>
+                <p className='text-[#616161] tet-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
+                <p className='text-[#525252] text-[16px] font-bold'>20،000 تومان</p>
+            </div>
+            <span className='bg-[#D7D7D7] h-px w-full mt-[32px] mb-[25px] block'></span>
+            <div className='flex items-center justify-between'>
+                <p className='text-[#3B3B3B] text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
+                <Button
+                    className='!gap-[4px] !mr-auto !flex !px-[12px] !py-[9px] !min-w-[157px]'
+                    onClick={() => setTypePay(true)}
+                    variant="contained"
+                >
+                    <p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
+                    <ArrowLeftB />
+                </Button>
+            </div>
+        </>
+    )
+}
+
+export default Paying
@@ -0,0 +1,7 @@
+function SuccessPay() {
+    return (
+        <div>SuccessPay</div>
+    )
+}
+
+export default SuccessPay
@@ -0,0 +1,22 @@
+import { useState } from "react";
+import SuccessPay from "./SuccessPay";
+import FailedPay from "./FailedPay";
+import Paying from "./Paying";
+
+function Payment() {
+
+    const [typePay, setTypePay] = useState('default');
+
+    return (
+        <>
+            {typePay === 'default' ?
+                <Paying setTypePay={setTypePay} /> :
+                typePay === 'success' ?
+                    <SuccessPay /> :
+                    <FailedPay />
+            }
+        </>
+    )
+}
+
+export default Payment
@@ -72,7 +72,7 @@ function ModalSearchCity() {
                    </div>
                    <div className="md:p-[24px] pt-0">
                        <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
-                        <div className="flex flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
+                        <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
                            <AutoCompleteSelect
                                updateData={updateData}
                                list={states}
@@ -0,0 +1,11 @@
+function AddCircleBlueA() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M8 12H16" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 16V8" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default AddCircleBlueA
@@ -1,8 +1,8 @@
 function ArrowLeftB() {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path d="M7.97435 4.94165L2.91602 9.99998L7.97435 15.0583" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M17.0836 10H3.05859" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M7.97435 4.94165L2.91602 9.99998L7.97435 15.0583" stroke="#EFEFEF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M17.0836 10H3.05859" stroke="#EFEFEF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
    )
 }
@@ -0,0 +1,9 @@
+function ArrowLeftOrangeA() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
+      <path d="M14.9993 21.17C14.8093 21.17 14.6193 21.1 14.4693 20.95L7.9493 14.43C6.8893 13.37 6.8893 11.63 7.9493 10.57L14.4693 4.04999C14.7593 3.75999 15.2393 3.75999 15.5293 4.04999C15.8193 4.33999 15.8193 4.81999 15.5293 5.10999L9.0093 11.63C8.5293 12.11 8.5293 12.89 9.0093 13.37L15.5293 19.89C15.8193 20.18 15.8193 20.66 15.5293 20.95C15.3793 21.09 15.1893 21.17 14.9993 21.17Z" fill="#F17732" />
+    </svg>
+  )
+}
+
+export default ArrowLeftOrangeA
@@ -0,0 +1,18 @@
+function CalendarA() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M6.66602 1.66666V4.16666" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.334 1.66666V4.16666" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M2.91602 7.57501H17.0827" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M17.5 7.08332V14.1667C17.5 16.6667 16.25 18.3333 13.3333 18.3333H6.66667C3.75 18.3333 2.5 16.6667 2.5 14.1667V7.08332C2.5 4.58332 3.75 2.91666 6.66667 2.91666H13.3333C16.25 2.91666 17.5 4.58332 17.5 7.08332Z" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.0781 11.4167H13.0856" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.0781 13.9167H13.0856" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9.99607 11.4167H10.0036" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9.99607 13.9167H10.0036" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6.91209 11.4167H6.91957" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6.91209 13.9167H6.91957" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default CalendarA
@@ -0,0 +1,10 @@
+function ClockA() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M18.3327 9.99999C18.3327 14.6 14.5993 18.3333 9.99935 18.3333C5.39935 18.3333 1.66602 14.6 1.66602 9.99999C1.66602 5.39999 5.39935 1.66666 9.99935 1.66666C14.5993 1.66666 18.3327 5.39999 18.3327 9.99999Z" stroke="#616161" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13.0914 12.65L10.5081 11.1084C10.0581 10.8417 9.69141 10.2 9.69141 9.67503V6.25836" stroke="#616161" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default ClockA
@@ -0,0 +1,11 @@
+function EditOrangeA() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M4.61763 16.2667C4.1093 16.2667 3.6343 16.0917 3.29263 15.7667C2.8593 15.3583 2.65097 14.7417 2.72597 14.075L3.0343 11.375C3.09263 10.8667 3.40097 10.1917 3.7593 9.82499L10.601 2.58332C12.3093 0.77499 14.0926 0.72499 15.901 2.43332C17.7093 4.14166 17.7593 5.92499 16.051 7.73332L9.2093 14.975C8.8593 15.35 8.2093 15.7 7.70096 15.7833L5.01763 16.2417C4.87597 16.25 4.75097 16.2667 4.61763 16.2667ZM13.276 2.42499C12.6343 2.42499 12.076 2.82499 11.5093 3.42499L4.66763 10.675C4.50097 10.85 4.3093 11.2667 4.27597 11.5083L3.96763 14.2083C3.9343 14.4833 4.00097 14.7083 4.15097 14.85C4.30097 14.9917 4.52597 15.0417 4.80097 15L7.4843 14.5417C7.72597 14.5 8.12597 14.2833 8.29263 14.1083L15.1343 6.86666C16.1676 5.76666 16.5426 4.74999 15.0343 3.33332C14.3676 2.69166 13.7926 2.42499 13.276 2.42499Z" fill="#F17732" />
+            <path d="M14.4497 9.12501C14.433 9.12501 14.408 9.12501 14.3914 9.12501C11.7914 8.86667 9.69971 6.89167 9.29971 4.30834C9.24971 3.96667 9.48305 3.65001 9.82471 3.59167C10.1664 3.54167 10.483 3.77501 10.5414 4.11667C10.858 6.13334 12.4914 7.68334 14.5247 7.88334C14.8664 7.91667 15.1164 8.22501 15.083 8.56667C15.0414 8.88334 14.7664 9.12501 14.4497 9.12501Z" fill="#F17732" />
+            <path d="M17.5 18.9583H2.5C2.15833 18.9583 1.875 18.675 1.875 18.3333C1.875 17.9917 2.15833 17.7083 2.5 17.7083H17.5C17.8417 17.7083 18.125 17.9917 18.125 18.3333C18.125 18.675 17.8417 18.9583 17.5 18.9583Z" fill="#F17732" />
+        </svg>
+    )
+}
+
+export default EditOrangeA
@@ -0,0 +1,10 @@
+function LocationA() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M10.0004 11.1917C11.4363 11.1917 12.6004 10.0276 12.6004 8.59167C12.6004 7.15573 11.4363 5.99167 10.0004 5.99167C8.56445 5.99167 7.40039 7.15573 7.40039 8.59167C7.40039 10.0276 8.56445 11.1917 10.0004 11.1917Z" stroke="#616161" strokeWidth="1.5" />
+            <path d="M3.01675 7.07499C4.65842 -0.141675 15.3501 -0.133341 16.9834 7.08333C17.9417 11.3167 15.3084 14.9 13.0001 17.1167C11.3251 18.7333 8.67508 18.7333 6.99175 17.1167C4.69175 14.9 2.05842 11.3083 3.01675 7.07499Z" stroke="#616161" strokeWidth="1.5" />
+        </svg>
+    )
+}
+
+export default LocationA
@@ -1,12 +1,12 @@
 function RoutingWhiteC() {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d="M12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5C7.85786 4.5 4.5 7.85786 4.5 12C4.5 16.1421 7.85786 19.5 12 19.5Z" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M12 4V2" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M4 12H2" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M12 20V22" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            <path d="M20 12H22" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5C7.85786 4.5 4.5 7.85786 4.5 12C4.5 16.1421 7.85786 19.5 12 19.5Z" stroke="#FAFAFA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#FAFAFA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 4V2" stroke="#FAFAFA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M4 12H2" stroke="#FAFAFA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 20V22" stroke="#FAFAFA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M20 12H22" stroke="#FAFAFA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
    )
 }
@@ -8,7 +8,7 @@ import Aos from "aos";
 import "aos/dist/aos.css";
 import { useEffect } from "react";

-function Layout({ children, title, name }) {
+function Layout({ children, title, name, disableFooter }) {

    useEffect(() => {
        Aos.init({ duration: 1000 });
@@ -24,11 +24,13 @@ function Layout({ children, title, name }) {
                    {children}
                </section>
            </main>
-            <footer className="bg-[#F5F5F5] pt-[44px] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
-                <div className='padding-responsive'>
-                    <Footer />
-                </div>
-            </footer>
+            {disableFooter ? undefined : (
+                <footer className="bg-[#F5F5F5] pt-[44px] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
+                    <div className='padding-responsive'>
+                        <Footer />
+                    </div>
+                </footer>
+            )}
        </div>
    )
 }
@@ -4,7 +4,7 @@ import OTPForm from "./element/OTPForm"
 import ArrowLeftOrangeS from "../icons/ArrowLeftOrangeS"
 import Link from "next/link"

-function SetCodePage({ setIsSendMsg }) {
+function SetCodePage({ setIsSendMsg, link }) {

    const handleOTP = (e) => {
        e.target.nextElementSibling &&
@@ -37,7 +37,7 @@ function SetCodePage({ setIsSendMsg }) {
                    <ArrowLeftOrangeS />
                </Button>
            </div>
-            <Link href='/'>
+            <Link href={link}>
                <Button
                    fullWidth
                    variant='contained'
@@ -15,14 +15,12 @@ function SignInPage({ setIsSendMsg }) {
                    title='شماره همراه'
                />
            </div>
-            <Link href='/signin'>
-                <Button
-                    fullWidth
-                    variant='contained'
-                    onClick={() => setIsSendMsg(true)}
-                    className='!rounded-[8px] !bg-[#5559CE]'
-                >ورود</Button>
-            </Link>
+            <Button
+                fullWidth
+                variant='contained'
+                onClick={() => setIsSendMsg(true)}
+                className='!rounded-[8px] !bg-[#5559CE]'
+            >ورود</Button>
            <p className='text-[#525252] text-[14px] font-normal text-center mt-[49px] sm:mt-[58px] md:mt-[67px] lg:mt-[76px]'>
                <span className='text-[#F17732] underline'>قوانین استفاده</span> از نوبت 724 را می پذیرم.
            </p>
@@ -14,6 +14,7 @@
        "@mui/material": "^5.14.17",
        "@mui/styled-engine-sc": "^6.0.0-alpha.18",
        "aos": "^2.3.4",
+        "date-fns": "^3.6.0",
        "i": "^0.3.7",
        "jalaali-react-date-picker": "^1.0.18",
        "next": "14.2.3",
@@ -7142,6 +7143,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
    "node_modules/debug": {
      "version": "4.3.6",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
@@ -15,6 +15,7 @@
    "@mui/material": "^5.14.17",
    "@mui/styled-engine-sc": "^6.0.0-alpha.18",
    "aos": "^2.3.4",
+    "date-fns": "^3.6.0",
    "i": "^0.3.7",
    "jalaali-react-date-picker": "^1.0.18",
    "next": "14.2.3",