change design dashboard & side booking page

components/booking/date/PlaceVisit.js

@@ -1,7 +1,6 @@
 'use client';
 
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
-import { useState } from "react";
 
 function PlaceVisit({ locateVisit, setLocateVisit, isError }) {
 

components/booking/date/index.js

@@ -1,7 +1,7 @@
 import { useState } from "react";
-import Hour from "./hour"
-import PlaceVisit from "./PlaceVisit"
-import Time from "./Time"
+import Hour from "./hour";
+import Time from "./Time";
+import PlaceVisit from "./PlaceVisit";
 
 function Date({ doctor, setStep }) {
 

components/booking/index.js

@@ -1,7 +1,7 @@
 import Information from "./information"
 import Location from "./location"
 
-function BookingPage({ doctor, children, isFirst, disableSide }) {
+function BookingPage({ doctor, step, setStep, children, isFirst, disableSide }) {
     return (
         <div
             className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
@@ -9,7 +9,7 @@ function BookingPage({ doctor, children, isFirst, disableSide }) {
             {isFirst ? (
                 <Location disableSide={disableSide} doctor={doctor} />
             ) : (
-                <Information disableSide={disableSide} doctor={doctor} />
+                <Information disableSide={disableSide} doctor={doctor} step={step} setStep={setStep} />
             )}
             {children}
         </div>

components/booking/information/Detail.js

@@ -5,7 +5,7 @@ import LocationA from "@/components/icons/LocationA"
 import TickCircleOrange from "@/components/icons/TickCircleOrange"
 import { Button } from "@mui/material"
 
-function Detail({ doctor }) {
+function Detail({ doctor, step, setStep }) {
     return (
         <div className="">
             <ul className="flex flex-col items-start justify-start gap-[24px]">
@@ -25,15 +25,18 @@ function Detail({ doctor }) {
                             <p className="text-[#2F2F2F] text-[14px] md: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-[12px] md:!text-[14px] !font-normal">تغییر </p>
-                        <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
-                            <ArrowLeftOrangeA />
-                        </div>
-                    </Button>
+                    {step < 5 && (
+                        <Button
+                            className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+                            onClick={() => setStep(0)}
+                            variant="text"
+                        >
+                            <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
+                            <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
+                                <ArrowLeftOrangeA />
+                            </div>
+                        </Button>
+                    )}
                 </li>
                 <li className="flex items-center justify-between w-full">
                     <div className="flex items-center justify-start gap-[4px]">
@@ -45,15 +48,18 @@ function Detail({ doctor }) {
                             <p className="text-[#2F2F2F] text-[14px] md: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-[12px] md:!text-[14px] !font-normal">تغییر </p>
-                        <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
-                            <ArrowLeftOrangeA />
-                        </div>
-                    </Button>
+                    {step < 5 && (
+                        <Button
+                            className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+                            onClick={() => setStep(0)}
+                            variant="text"
+                        >
+                            <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
+                            <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
+                                <ArrowLeftOrangeA />
+                            </div>
+                        </Button>
+                    )}
                 </li>
             </ul>
             <span

components/booking/information/index.js

@@ -1,7 +1,7 @@
 import Detail from "./Detail"
 import Head from "./Head"
 
-function Information({ doctor, typePay, isPay, disableSide }) {
+function Information({ doctor, step, setStep, typePay, isPay, disableSide }) {
     return (
         <div className={`w-full lg:w-[41%] relative ${disableSide ? 'hidden lg:flex' : ''}`}>
             <div
@@ -13,7 +13,7 @@ function Information({ doctor, typePay, isPay, disableSide }) {
             >
                 <p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
                 <Head doctor={doctor} />
-                <Detail doctor={doctor} />
+                <Detail doctor={doctor} step={step} setStep={setStep} />
             </div>
         </div>
     )