hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change design dashboard & side booking page

Browse Source
This commit is contained in:
Ehsan
2024-09-09 18:22:10 +03:30
parent cb41f926e2
commit 60749d3b8c
10 changed files with 79 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/booking/[slug]/page.js
+2
View File
@@ -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
+3 -4
View File
@@ -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
View File
@@ -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
+3 -3
View File
@@ -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
+2 -2
View File
@@ -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
+25 -19
View File
@@ -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
+2 -2
View File
@@ -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
+20 -8
View File
@@ -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
+11 -1
View File
@@ -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
+11
View File
@@ -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