change design dashboard & side booking page

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
-                className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
-                onClick={() => isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)}
-                variant="text"
-            >
-                <ArrowRightD />
-                <p className="text-[#525252] text-[14px] font-bold">{isTurnsDetails ? 'جزئیات نوبت ' : listTab[value]}</p>
-            </Button>
+            <div className="w-full flex items-center justify-between">
+                <Button
+                    className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
+                    onClick={() => isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)}
+                    variant="text"
+                >
+                    <ArrowRightD />
+                    <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>
     )
 }