change design dashboard & side booking page

app/booking/[slug]/page.js

@@ -53,7 +53,9 @@ function Booking({ params: { slug } }) {
                     <BookingPage
                         disableSide={step === 5 || step === 6}
                         isFirst={step === 0}
+                        setStep={setStep}
                         doctor={doctor}
+                        step={step}
                     >
                         {elements[step]}
                     </BookingPage>

app/component/element/AutoCompleteSelect.js

@@ -25,9 +25,6 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
                     borderRadius: 2,
                     padding: '5px 16px !important'
                 },
-                '& .MuiOutlinedInput-notchedOutline': {
-                    border: isError ? '1px solid red' : ''
-                },
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: '1px solid #D7D7D7'
                 },
@@ -36,8 +33,10 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
                 },
                 '& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
                     border: '1px solid #5559CE !important'
+                },
+                '& .MuiOutlinedInput-notchedOutline': {
+                    border: isError ? '1px solid red !important' : ''
                 }
-
             }}
             renderInput={params =>
                 <TextField

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 Hour from "./hour";
-import PlaceVisit from "./PlaceVisit"
+import Time from "./Time";
-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
+                    {step < 5 && (
-                        className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+                        <Button
-                        variant="text"
+                            className="!p-1 !flex !items-center !justify-end !gap-[2px]"
-                    >
+                            onClick={() => setStep(0)}
-                        <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
+                            variant="text"
-                        <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 />
+                            <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
-                        </div>
+                            <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
-                    </Button>
+                                <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
+                    {step < 5 && (
-                        className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+                        <Button
-                        variant="text"
+                            className="!p-1 !flex !items-center !justify-end !gap-[2px]"
-                    >
+                            onClick={() => setStep(0)}
-                        <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
+                            variant="text"
-                        <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 />
+                            <p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
-                        </div>
+                            <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
-                    </Button>
+                                <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>
     )

components/dashboard/userAccount/ContentTabs.js

@@ -13,6 +13,7 @@ import IsTurnsDetails from "./tabs/turns/isTurnsDetails";
 import ArrowRightD from "@/components/icons/ArrowRightD";
 import { Button } from "@mui/material";
 import NotfoundDashboard from "./NotfoundDashboard";
+import DownloadD from "@/components/icons/DownloadD";
 
 const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش های من', 'نظرات من', 'پیام ها'];
 
@@ -44,14 +45,25 @@ function ContentTabs({ user, value, setValue, isOpenSide, setIsOpenSide }) {
             shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
             bg-transparent md:bg-[#FFF]"
         >
-            <Button
+            <div className="w-full flex items-center justify-between">
-                className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
+                <Button
-                onClick={() => isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)}
+                    className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
-                variant="text"
+                    onClick={() => isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)}
-            >
+                    variant="text"
-                <ArrowRightD />
+                >
-                <p className="text-[#525252] text-[14px] font-bold">{isTurnsDetails ? 'جزئیات نوبت ' : listTab[value]}</p>
+                    <ArrowRightD />
-            </Button>
+                    <p className="text-[#525252] text-[14px] font-bold">{isTurnsDetails ? 'جزئیات نوبت ' : listTab[value]}</p>
+                </Button>
+                {value === 1 && isTurnsDetails ? (
+                    <Button
+                        className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
+                        variant="text"
+                    >
+                        <DownloadD />
+                        دانلود اطلاعات نوبت
+                    </Button>
+                ) : undefined}
+            </div>
             {isTurnsDetails ?
                 <IsTurnsDetails loading={loading} user={user} setIsTurnsDetails={setIsTurnsDetails} /> : (
                     <>

components/dashboard/userAccount/tabs/turns/isTurnsDetails/DetailLg.js

@@ -3,6 +3,7 @@ import TextLoading from '@/app/component/loading/Text';
 import CalendarD from '@/components/icons/CalendarD';
 import CallD from '@/components/icons/CallD';
 import ClockClinic from '@/components/icons/ClockClinic';
+import DownloadD from '@/components/icons/DownloadD';
 import LocationClinic from '@/components/icons/LocationClinic';
 import RoutingC from '@/components/icons/RoutingC';
 import TicketD from '@/components/icons/TicketD';
@@ -74,12 +75,21 @@ function DetailLg({ user, loading }) {
                     </li>
                 </TextLoading>
             </ul>
-            <div className='py-[9px] lg:py-[18px] px-[12px] lg:pr-[16px] lg:pl-[40px] flex items-center gap-[4px] border border-solid border-[#EFEFEF] rounded-[4px] w-fit'>
+            <div className='flex items-center gap-[4px] w-fit'>
                 <TextLoading loading={loading} width={150} height={18}>
                     <TicketD />
                     <p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
                 </TextLoading>
             </div>
+            <Button
+                className='!px-[12px] !hidden md:!flex !mt-[24px] !py-[8px] !border !border-solid !border-[#D7D7D7] !rounded-[4px] !w-fit !items-center !justify-center !gap-[4px]'
+                variant='outlined'
+            >
+                <TextLoading loading={loading} width={150} height={18}>
+                    <DownloadD />
+                    <p className='text-[#616161] text-[16px] font-medium'>دانلود اطلاعات نوبت</p>
+                </TextLoading>
+            </Button>
         </div>
     )
 }

components/icons/DownloadD.js

@@ -0,0 +1,11 @@
+function DownloadD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M16.4405 8.89999C20.0405 9.20999 21.5105 11.06 21.5105 15.11V15.24C21.5105 19.71 19.7205 21.5 15.2505 21.5H8.74047C4.27047 21.5 2.48047 19.71 2.48047 15.24V15.11C2.48047 11.09 3.93047 9.23999 7.47047 8.90999" stroke="#616161" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M12 2V14.88" stroke="#616161" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M15.3484 12.65L11.9984 16L8.64844 12.65" stroke="#616161" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default DownloadD