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

all tabs page dashboard and responsive

Browse Source
This commit is contained in:
Ehsan
2024-09-05 00:21:58 +03:30
parent 52a745fcb8
commit 087ed4a818
50 changed files with 860 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dashboard/index.js
+3 -1
View File
@@ -1,7 +1,7 @@
import React from 'react'
import Layout from '../layout'
function DashboardPage({ user, children, value, setValue }) {
function DashboardPage({ user, children, value, setValue, isOpenSide, setIsOpenSide }) {
return (
<Layout
user={user}
@@ -10,6 +10,8 @@ function DashboardPage({ user, children, value, setValue }) {
name='dashboard'
isSidebar={true}
setValue={setValue}
isOpenSide={isOpenSide}
setIsOpenSide={setIsOpenSide}
>
{children}
</Layout>
components/dashboard/userAccount/ContentTabs.js
+45 -29
View File
@@ -10,10 +10,12 @@ import Messages from "./tabs/messages";
import Tabs from "@/app/component/Tabs";
import Transactions from "./tabs/transactions";
import IsTurnsDetails from "./tabs/turns/isTurnsDetails";
import ArrowRightD from "@/components/icons/ArrowRightD";
import { Button } from "@mui/material";
const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش های من', 'نظرات من', 'پیام ها'];
function ContentTabs({ user, value, setValue }) {
function ContentTabs({ user, value, setValue, isOpenSide, setIsOpenSide }) {
const [isTurnsDetails, setIsTurnsDetails] = useState(false);
const handleChange = (event, newValue) => setValue(newValue);
@@ -27,37 +29,51 @@ function ContentTabs({ user, value, setValue }) {
];
return (
<div className="mt-[24px] pt-[12px] pb-[24px] w-full bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] bg-[#FFF]">
<div
className="md:mt-[12px] lg:mt-[24px] md:pt-[12px] pb-[24px] w-full rounded-[8px]
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>
{isTurnsDetails ?
<IsTurnsDetails user={user} setIsTurnsDetails={setIsTurnsDetails} /> : (
<>
<Tabs
style={{
'.MuiTabs-indicator': {
height: '2px',
borderRadius: '16px',
background: '#5559CE',
},
'& .MuiTabs-scroller': {
borderBottom: '1px solid #EFEFEF',
},
'& .MuiTabs-flexContainer': {
paddingRight: '15px',
paddingLeft: '15px',
},
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
color: '#5559CE !important'
},
'& .MuiButtonBase-root.Mui-selected': {
color: '#5559CE !important'
}
}}
value={value}
color='#5559CE'
listTab={listTab}
handleChange={handleChange}
/>
<div className="mt-[36px] px-[24px]">
<div className='!hidden md:!flex !w-full'>
<Tabs
style={{
'.MuiTabs-indicator': {
height: '2px',
borderRadius: '16px',
background: '#5559CE',
},
'& .MuiTabs-scroller': {
borderBottom: '1px solid #EFEFEF',
},
'& .MuiTabs-flexContainer': {
paddingRight: '15px',
paddingLeft: '15px',
},
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
color: '#5559CE !important'
},
'& .MuiButtonBase-root.Mui-selected': {
color: '#5559CE !important'
}
}}
value={value}
color='#5559CE'
listTab={listTab}
handleChange={handleChange}
/>
</div>
<div className="mt-[24px] sm:mt-[28px] md:mt-[32px] px-0 md:px-[24px]">
{components[value]}
</div>
</>
components/dashboard/userAccount/Head.js
+9 -10
View File
@@ -2,31 +2,30 @@ import CalendarAdD from '@/components/icons/CalendarAdD'
import CardTickD from '@/components/icons/CardTickD'
import { Button } from '@mui/material'
import Image from 'next/image'
import React from 'react'
function Head({ user }) {
return (
<div className='flex w-full items-stretch justify-center gap-[24px]'>
<div className='hidden md:flex flex-col lg:flex-row w-full items-stretch justify-center gap-[12px] lg:gap-[24px]'>
<div className='bg-head-dashboard rounded-[8px] relative w-full !bg-no-repeat !bg-cover py-[20px] px-[24px] !bg-center flex items-center'>
<div className='flex flex-col justify-start items-start gap-[8px]'>
<div className='flex w-full pl-[calc(5%+140px)] lg:pl-[calc(9%+171px)] flex-col justify-start items-start gap-[8px]'>
<p className='text-[3B3B3B] text-[16px] font-bold'>{user.name} <span className='text-[#3B3B3B] text-[16px] font-normal'>عزیز!</span></p>
<p className='text-[#616161] text-[12px] font-normal'>در این قسمت میتوانید اطلاعات حساب خود و نوبت های گرفته شده<br /> را مدیریت کنید. </p>
<p className='text-[#616161] text-[12px] font-normal'>در این قسمت میتوانید اطلاعات حساب خود و نوبت های گرفته شده را مدیریت کنید. </p>
<Button
variant='contained'
className='!bg-[#5559CE] !rounded-[4px] !py-[4px] !px-[8px] !text-[#EFEFEF] !text-[12px] !font-medium !leading-[22px]'
>مشاهده اطلاعات</Button>
</div>
<Image
className='absolute bottom-0 left-[72px] h-[calc(100%_+_16px)]'
className='w-[120px] lg:w-[140px] xl:w-[170px] xl:min-w-[170px] h-fit absolute bottom-0 left-[3%] md:left-[5%] lg:left-[9%]'
src='/assets/images/male-doctor-head-dashboard.png'
alt='doctor'
height={175}
width={171}
/>
</div>
<div className='flex flex-col items-start justify-start gap-[12px]'>
<div className='py-[10px] flex items-center justify-start gap-[12px] w-full pl-[20px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
<div className='bg-[#5559CE] rounded-full p-[8px]'>
<div className='flex flex-col md:flex-row lg:flex-col items-start justify-start gap-[12px]'>
<div className='py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
<div className='bg-[#5559CE] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]'>
<CardTickD />
</div>
<div className='flex flex-col gap-[8px] items-start justify-start'>
@@ -34,8 +33,8 @@ function Head({ user }) {
<p className='text-[#616161] text-nowrap text-[14px] font-normal'>مجموع تراکنش ها</p>
</div>
</div>
<div className='py-[10px] flex items-center justify-start gap-[12px] w-full pl-[20px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
<div className='bg-[#FFC051] rounded-full p-[8px]'>
<div className='py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
<div className='bg-[#FFC051] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]'>
<CalendarAdD />
</div>
<div className='flex flex-col gap-[8px] items-start justify-start'>
components/dashboard/userAccount/UserAccount.js
+4 -2
View File
@@ -1,14 +1,16 @@
import ContentTabs from "./ContentTabs"
import Head from "./Head"
function UserAccountPage({ user, value, setValue }) {
function UserAccountPage({ user, value, setValue, isOpenSide, setIsOpenSide }) {
return (
<div className='w-[72%]'>
<div className='w-full md:w-[68%] lg:w-[72%]'>
<Head user={user} />
<ContentTabs
user={user}
value={value}
setValue={setValue}
isOpenSide={isOpenSide}
setIsOpenSide={setIsOpenSide}
/>
</div>
)
components/dashboard/userAccount/tabs/comments/Comment.js
+13 -13
View File
@@ -1,32 +1,30 @@
import CalndarD from "@/components/icons/CalndarD"
import TrashOrangeD from "@/components/icons/TrashOrangeD"
import { Button, Rating } from "@mui/material"
import { Rating } from "@mui/material"
import Image from "next/image"
import ModalDeleteComment from "./modal"
function Comment({ data }) {
return (
<li
className="flex flex-col gap-[8px] w-full"
>
<li className="flex flex-col gap-[8px] w-full">
<div className="flex items-start justify-between w-full">
<div className="flex items-center justify-start gap-[16px]">
<div className="flex items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]">
<Image
className="w-[48px] sm:w-[61px] md:w-[75px] lg:w-[88px] h-[48px] sm:h-[61px] md:h-[75px] lg:h-[88px]"
src={data.profile}
alt="profile"
height={87}
width={87}
/>
<div className="flex flex-col items-start justify-center gap-[16px]">
<p className="text-[#3B3B3B] text-[16px] font-bold">{data.name_doctor}</p>
<p className="text-[#525252] text-[14px] font-medium">تخصص: {data.expertise}</p>
<div className="flex flex-col items-start justify-center gap-[8px] md:gap-[12px] lg:gap-[16px]">
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">{data.name_doctor}</p>
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {data.expertise}</p>
</div>
</div>
<ModalDeleteComment />
</div>
<Rating
defaultValue={data.stars.value}
className="!mt-[8px]"
className="!mt-[4px] md:!mt-[6px] lg:!mt-[8px]"
sx={{
'& .MuiSvgIcon-root': {
width: '16px',
@@ -34,12 +32,14 @@ function Comment({ data }) {
}
}}
/>
<p className="text-[#525252] text-[14px] font-normal leading-[33px]">{data.comment}</p>
<p className="text-[#525252] mt-[4px] md:mt-[2px] lg:mt-0 text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]">{data.comment}</p>
<div className="flex items-center justify-start gap-[8px]">
<CalndarD />
<div className="w-[20px] h-[20px] sm:w-[22px] sm:h-[22px] lg:w-[24px] lg:h-[24px]">
<CalndarD />
</div>
<p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
</div>
<span className="w-full block h-px bg-[#EFEFEF]"></span>
<span className="w-full block h-px bg-[#EFEFEF] mt-0 md:mt-[4px] mt-[8px]"></span>
</li>
)
}
components/dashboard/userAccount/tabs/comments/index.js
+1 -1
View File
@@ -2,7 +2,7 @@ import Comment from "./Comment"
function Comments({ user }) {
return (
<ul className="flex opacity-page flex-col items-start justify-start gap-[20px]">
<ul className="flex opacity-page flex-col items-start justify-start gap-[24px] md:gap-[22px] lg:gap-[20px]">
{user.comments.map((item, idx) => (
<Comment
key={idx}
components/dashboard/userAccount/tabs/comments/modal/index.js
+8 -8
View File
@@ -14,7 +14,7 @@ function ModalDeleteComment() {
<div>
{/* Button Modal */}
<Button
className="!gap-[5px] !p-1 !text-[#F17732] !text-[14px] !font-medium"
className="!gap-[5px] !p-1 !text-[#F17732] !text-[12px] md:!text-[14px] !font-medium"
onClick={handleOpen}
variant="text"
>
@@ -28,10 +28,10 @@ function ModalDeleteComment() {
>
<Box
sx={styleDefault}
className="!w-full md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
>
<div className='flex items-center justify-between w-full'>
<p className='text-[#3B3B3B] text-[20px] font-medium'>حذف نظر</p>
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>حذف نظر</p>
<Button
onClick={handleClose}
className='!p-1'
@@ -40,20 +40,20 @@ function ModalDeleteComment() {
<CloseModalD />
</Button>
</div>
<span className='block h-px w-full bg-[#EFEFEF] my-[16px]'></span>
<p className='text-[#525252] text-[16px] font-normal'>آیا این نظر حذف شود؟</p>
<div className='flex items-center justify-end gap-[16px]'>
<span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
<p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا این نظر حذف شود؟</p>
<div className='flex items-center justify-end gap-[16px] mt-[12px]'>
<Button
variant='outlined'
onClick={handleClose}
className='!py-[8px] !px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
>
انصراف
</Button>
<Button
variant='contained'
onClick={handleClose}
className='!py-[8px] !px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
>
حذف نظر
</Button>
components/dashboard/userAccount/tabs/detailUser/Content.js
+2 -1
View File
@@ -5,7 +5,8 @@ function Content({ isConfirmed, children, title }) {
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
{isConfirmed && (
<p
className='py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal'
className='py-[4px] md:py-[2px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF]
text-[10px] md:text-[12px] font-normal h-[26px] grid place-items-center'
>تایید شده</p>
)}
</div>
components/dashboard/userAccount/tabs/detailUser/DateBirthday.js
+2 -2
View File
@@ -47,8 +47,8 @@ function DateBirthday({ data, changeData }) {
}}
sx={{
'& .MuiPaper-root': {
padding: { xs: '12px 12px 0', sm: '24px 24px 0' },
background: '#FFF',
padding: '12px',
background: '#FAFAFA !important',
borderRadius: '16px',
border: '1px solid #E9ECEF',
boxShadow: '0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)'
components/dashboard/userAccount/tabs/detailUser/Form.js
+9 -9
View File
@@ -6,15 +6,15 @@ import { insurance, gender, blood_group, marital_status, education, job } from "
function Form({ data, selected, changeData, updateSelect }) {
return (
<div className='grid grid-cols-2 gap-[24px]'>
<div className='grid grid-cols-1 lg:grid-cols-2 gap-[24px]'>
<Content title='شماره موبایل' isConfirmed={true}>
<EditField iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
</Content>
<Content title='کد ملی' isConfirmed={false}>
<EditField iconGray={true} changeData={changeData} data={data?.national_code} name='national_code' />
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.national_code} name='national_code' />
</Content>
<Content title='نام و نام خانوادگی' isConfirmed={false}>
<EditField iconGray={true} changeData={changeData} data={data?.name} name='name' />
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
</Content>
<Content title='جنسیت'>
<AutoCompleteSelect
@@ -24,11 +24,11 @@ function Form({ data, selected, changeData, updateSelect }) {
list={gender}
/>
</Content>
<Content title='جنسیت'>
<Content title='تاریخ تولد'>
<DateBirthday data={data?.date_of_birth} isConfirmed={false} changeData={changeData} />
</Content>
<Content title='نام پدر' isConfirmed={false}>
<EditField iconGray={true} changeData={changeData} data={data?.father_name} name='father_name' />
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.father_name} name='father_name' />
</Content>
<Content title='نوع بیمه'>
<AutoCompleteSelect
@@ -39,7 +39,7 @@ function Form({ data, selected, changeData, updateSelect }) {
/>
</Content>
<Content title='شماره بیمه' isConfirmed={false}>
<EditField iconGray={true} changeData={changeData} data={data?.insurance_number} name='insurance_number' />
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.insurance_number} name='insurance_number' />
</Content>
<Content title='گروه خونی'>
<AutoCompleteSelect
@@ -58,7 +58,7 @@ function Form({ data, selected, changeData, updateSelect }) {
/>
</Content>
<Content title='تلفن منزل' isConfirmed={false}>
<EditField iconGray={true} changeData={changeData} data={data?.home_phone} name='home_phone' />
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.home_phone} name='home_phone' />
</Content>
<Content title='تحصیلات'>
<AutoCompleteSelect
@@ -77,7 +77,7 @@ function Form({ data, selected, changeData, updateSelect }) {
/>
</Content>
<Content title='تلفن محل کار' isConfirmed={false}>
<EditField iconGray={true} changeData={changeData} data={data?.work_phone} name='work_phone' />
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.work_phone} name='work_phone' />
</Content>
</div>
)
components/dashboard/userAccount/tabs/detailUser/index.js
+3 -1
View File
@@ -44,7 +44,9 @@ function DetailUser({ user }) {
updateSelect={updateSelect}
/>
<Button
className="!gap-[4px] !mr-auto !text-nowrap !flex !mt-[48px] !flex-nowrap !py-[8px] !px-[24px] !bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
!bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
!mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
>
ثبت اطلاعات
<ArrowLeftWhiteD />
components/dashboard/userAccount/tabs/messages/Message.js
+8 -6
View File
@@ -1,5 +1,5 @@
import CalndarD from '@/components/icons/CalndarD'
import MessageNotifd from '@/components/icons/MessageNotifd'
import MessageNotifd from '@/components/icons/MessageNotifD'
import React from 'react'
function Message({ data }) {
@@ -9,12 +9,14 @@ function Message({ data }) {
<div className="p-[6px] rounded-full bg-[#F17732]">
<MessageNotifd />
</div>
<p className="text-[#3B3B3B] text-[16px] font-bold">عنوان پیام</p>
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">عنوان پیام</p>
</div>
<div className='mr-[41px]'>
<p className='text-[#525252] text-[14px] font-normal leading-[33px]'>{data.text}</p>
<div className='flex items-center justify-start gap-[8px]'>
<CalndarD />
<div className='mr-0 lg:mr-[41px]'>
<p className='text-[#525252] text-[12px] md:text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]'>{data.text}</p>
<div className='flex items-center justify-start gap-[8px] mt-[8px] md:mt-[10px] lg:mt-[12px]'>
<div className='max-w-[20px] max-h-[20px] md:max-w-[22px] md:max-h-[22px] lg:max-w-[24px] lg:max-h-[24px]'>
<CalndarD />
</div>
<p className='text-[#7E7E7E] text-[12px] font-normal'>{data.date}</p>
</div>
</div>
components/dashboard/userAccount/tabs/messages/index.js
+1 -1
View File
@@ -2,7 +2,7 @@ import Message from "./Message";
function Messages({ user }) {
return (
<ul className="flex opacity-page flex-col gap-[16px]">
<ul className="flex opacity-page flex-col gap-[24px] md:gap-[20px] lg:gap-[16px]">
{user.messages.map((item, idx) => (
<Message
key={idx}
components/dashboard/userAccount/tabs/transactions/Card.js
+53
View File
@@ -0,0 +1,53 @@
import Image from "next/image"
function Card({ data }) {
return (
<li className="p-[12px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] bg-[#FFF] rounded-[8px]">
<div className="flex items-center justify-between w-full">
<div className="flex items-center justify-start gap-[8px]">
<Image
src={data.image}
alt="profile"
height={32}
width={32}
/>
<p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
</div>
<div
className={`
w-[100px] p-[4px] rounded-[4px] text-center text-[14px] font-medium cursor-pointer select-none
${data.status === 'success' ? 'bg-[#E8FADD] text-[#75E22E]' :
data.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
`}
variant='text'
>
{data.status === 'success' ? 'پرداخت شده' :
data.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
</div>
</div>
<ul className="flex flex-col mt-[16px]">
<li className="flex items-center justify-between gap-[12px]">
<p className="text-[#7E7E7E] text-[14px] font-normal">شناسه:</p>
<p className="text-[#616161] text-[14px] font-medium">{data.id}</p>
</li>
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
<li className="flex items-center justify-between gap-[12px]">
<p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
<p className="text-[#616161] text-[14px] font-medium">{data.date}</p>
</li>
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
<li className="flex items-center justify-between gap-[12px]">
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
<p className="text-[#616161] text-[14px] font-medium">{data.time}</p>
</li>
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
<li className="flex items-center justify-between gap-[12px]">
<p className="text-[#7E7E7E] text-[14px] font-normal">مبلغ پیش پرداخت:</p>
<p className="text-[#616161] text-[14px] font-medium">{data.amount} تومان</p>
</li>
</ul>
</li>
)
}
export default Card
components/dashboard/userAccount/tabs/transactions/List.js
+48 -37
View File
@@ -1,6 +1,7 @@
import CustomTable from "@/app/component/CustomTable";
import { TableCell, TableRow } from "@mui/material";
import Image from "next/image";
import Card from "./Card";
function List({ user }) {
@@ -9,47 +10,57 @@ function List({ user }) {
return (
<div className='!mt-[32px]'>
<CustomTable
tableHead={tableHead}
centerTable={centerTable}
>
{user.turns.map((row, idx) => (
<TableRow
key={idx}
className='!border-0 !border-b !border-[#DBDBDB]'
>
<TableCell className='!pr-[18px] !text-nowrap' align="center">{idx + 1}</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.id}</TableCell>
<TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
<Image
src={row.image}
alt='doctor'
height={32}
width={32}
/>
{row.name}
</div>
</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.date}</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.time}</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.amount}</TableCell>
<TableCell className='!pr-[18px] !text-nowrap' align="right">
<div
className={`
<div className="hidden md:block w-full">
<CustomTable
tableHead={tableHead}
centerTable={centerTable}
>
{user.turns.map((row, idx) => (
<TableRow
key={idx}
className='!border-0 !border-b !border-[#DBDBDB]'
>
<TableCell className='!pr-[18px] !text-nowrap' align="center">{idx + 1}</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.id}</TableCell>
<TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
<Image
src={row.image}
alt='doctor'
height={32}
width={32}
/>
{row.name}
</div>
</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.date}</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.time}</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.amount}</TableCell>
<TableCell className='!pr-[18px] !text-nowrap' align="right">
<div
className={`
w-[124px] py-[4px] px-[4px] rounded-[4px] text-center text-[16px] font-medium cursor-pointer select-none
${row.status === 'success' ? 'bg-[#E8FADD] text-[#75E22E]' :
row.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
row.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
`}
variant='text'
>
{row.status === 'success' ? 'پرداخت شده' :
row.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
</div>
</TableCell>
</TableRow>
variant='text'
>
{row.status === 'success' ? 'پرداخت شده' :
row.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
</div>
</TableCell>
</TableRow>
))}
</CustomTable>
</div>
<ul className="flex md:hidden flex-col gap-y-[24px]">
{user.turns.map((row, idx) => (
<Card
key={idx}
data={row}
/>
))}
</CustomTable>
</ul>
</div>
)
}
components/dashboard/userAccount/tabs/transactions/index.js
+1 -1
View File
@@ -3,7 +3,7 @@ import List from "./List";
function Transactions({ user }) {
return (
<div className="opacity-page">
<p className="text-[#3B3B3B] text-[16px] font-bold">تاریخچه تراکنش ها</p>
<p className="text-[#3B3B3B] hidden md:block text-[16px] font-bold">تاریخچه تراکنش ها</p>
<List user={user} />
</div>
)
components/dashboard/userAccount/tabs/turns/Card.js
+47
View File
@@ -0,0 +1,47 @@
import ArrowLeftCardD from "@/components/icons/ArrowLeftCardD"
import { Button } from "@mui/material"
import Image from "next/image"
function Card({ data, setIsTurnsDetails }) {
return (
<li
className="shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] pb-[8px] bg-[#FFF] rounded-[8px]"
>
<div className="flex items-center justify-start gap-[8px] p-[12px]">
<Image
width={32}
height={32}
alt="profile"
src={data.image}
/>
<div className="flex flex-col items-start justify-center gap-[8px]">
<p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
<p className="text-[#7E7E7E] text-[14px] font-normal">{data.expertise}</p>
</div>
</div>
<ul className="w-full py-[8px] px-[12px] bg-[#FAFAFA] flex flex-col gap-[12px]">
<li className="flex items-center justify-between">
<p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
<p className="text-[#525252] text-[14px] font-medium">{data.date}</p>
</li>
<li className="flex items-center justify-between">
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
<p className="text-[#525252] text-[14px] font-medium">{data.time}</p>
</li>
</ul>
<div className="mt-[12px] flex items-center justify-between px-[12px]">
<p className="text-[#7E7E7E] text-[12px] font-normal">مبلغ پیش پرداخت: {data.amount} تومان</p>
<Button
className="!flex !p-1 !items-center !justify-end !gap-[2px]"
onClick={() => setIsTurnsDetails(true)}
variant="text"
>
مشاهده
<ArrowLeftCardD />
</Button>
</div>
</li>
)
}
export default Card
components/dashboard/userAccount/tabs/turns/Head.js
+38 -4
View File
@@ -1,16 +1,50 @@
import Tabs from '@/app/component/Tabs';
import { Button } from '@mui/material'
function Head() {
const listTab = ['نوبت های جاری', 'نوبت های انجام شده'];
function Head({ value, setValue, handleChange }) {
return (
<div className="flex items-center justify-start gap-[32px] mt-[30px]">
<div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
<div className='block w-full lg:hidden'>
<Tabs
style={{
'.MuiTabs-indicator': {
height: '2px',
borderRadius: '16px',
background: '#5559CE',
},
'& .MuiButtonBase-root': {
color: '#7E7E7E',
fontSize: '14px',
fontStyle: 'normal',
fontWeight: '700'
},
'& .MuiTabs-flexContainer': {
paddingRight: '15px',
paddingLeft: '15px',
},
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
color: '#5559CE !important'
},
'& .MuiButtonBase-root.Mui-selected': {
color: '#5559CE !important'
}
}}
value={value}
color='#5559CE'
listTab={listTab}
handleChange={handleChange}
/>
</div>
<Button
className='!py-[8px] !shadow-none !px-[12px] !text-[#EFEFEF] !text-[16px] !font-medium'
className='!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#EFEFEF] !text-[16px] !font-medium'
variant='contained'
>
نوبت های جاری
</Button>
<Button
className='!py-[8px] !shadow-none !px-[12px] !text-[#5559CE] !text-[16px] !font-medium'
className='!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#5559CE] !text-[16px] !font-medium'
variant='outlined'
>
نوبت های انجام شده
components/dashboard/userAccount/tabs/turns/List.js
+48 -36
View File
@@ -2,6 +2,7 @@ import CustomTable from '@/app/component/CustomTable';
import ArrowLeftBlueD from '@/components/icons/ArrowLeftBlueD'
import { Button, TableCell, TableRow } from '@mui/material'
import Image from 'next/image'
import Card from './Card';
function List({ user, setIsTurnsDetails }) {
@@ -11,44 +12,55 @@ function List({ user, setIsTurnsDetails }) {
return (
<div className='!mt-[24px]'>
<CustomTable
tableHead={tableHead}
centerTable={centerTable}
>
{user.turns.map((row, idx) => (
<TableRow
<div className='hidden lg:block'>
<CustomTable
tableHead={tableHead}
centerTable={centerTable}
>
{user.turns.map((row, idx) => (
<TableRow
key={idx}
className='!border-0 !border-b !border-[#DBDBDB]'
>
<TableCell className='!pr-[18px] !text-nowrap' align="center">{idx + 1}</TableCell>
<TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
<Image
src={row.image}
alt='doctor'
height={32}
width={32}
/>
{row.name}
</div>
</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.expertise}</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.date}</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.time}</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.amount}</TableCell>
<TableCell className='!pr-[18px] !text-nowrap' align="right">
<Button
className='!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]'
onClick={() => setIsTurnsDetails(true)}
variant='text'
>
مشاهده جزئیات
<ArrowLeftBlueD />
</Button>
</TableCell>
</TableRow>
))}
</CustomTable>
</div>
<ul className='flex flex-col lg:hidden gap-[24px]'>
{user.turns.map((item, idx) => (
<Card
key={idx}
className='!border-0 !border-b !border-[#DBDBDB]'
>
<TableCell className='!pr-[18px] !text-nowrap' align="center">{idx + 1}</TableCell>
<TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
<Image
src={row.image}
alt='doctor'
height={32}
width={32}
/>
{row.name}
</div>
</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.expertise}</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.date}</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.time}</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.amount}</TableCell>
<TableCell className='!pr-[18px] !text-nowrap' align="right">
<Button
className='!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]'
onClick={() => setIsTurnsDetails(true)}
variant='text'
>
مشاهده جزئیات
<ArrowLeftBlueD />
</Button>
</TableCell>
</TableRow>
data={item}
setIsTurnsDetails={setIsTurnsDetails}
/>
))}
</CustomTable>
</ul>
</div>
)
}
components/dashboard/userAccount/tabs/turns/index.js
+11 -2
View File
@@ -1,11 +1,20 @@
import { useState } from "react";
import Head from "./Head";
import List from "./List";
function Turns({ user, setIsTurnsDetails }) {
const [value, setValue] = useState(0);
const handleChange = (event, newValue) => setValue(newValue);
return (
<div className="opacity-page">
<p className="text-[#3B3B3B] text-[16px] font-bold">تاریخچه نوبت ها</p>
<Head />
<p className="text-[#3B3B3B] hidden md:flex text-[16px] font-bold">تاریخچه نوبت ها</p>
<Head
value={value}
setValue={setValue}
handleChange={handleChange}
/>
<List user={user} setIsTurnsDetails={setIsTurnsDetails} />
</div>
)
components/dashboard/userAccount/tabs/turns/isTurnsDetails/ButtonData.js
+24
View File
@@ -0,0 +1,24 @@
import { Button } from "@mui/material"
import ModalDeleteComment from "./modal"
import EditTurnsD from "@/components/icons/EditTurnsD"
import ArrowLeftD from "@/components/icons/ArrowLeftD"
function ButtonData() {
return (
<div className="flex mt-[48px] md:mt-0 items-center justify-center md:justify-end gap-[16px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
<ModalDeleteComment />
<Button
className="!rounded-[4px] !shadow-none !gap-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
variant="contained"
>
<EditTurnsD />
ویرایش نوبت
<div className="mr-[4px]">
<ArrowLeftD />
</div>
</Button>
</div>
)
}
export default ButtonData
components/dashboard/userAccount/tabs/turns/isTurnsDetails/Detail.js
-66
View File
@@ -1,66 +0,0 @@
import CalendarD from '@/components/icons/CalendarD';
import CallD from '@/components/icons/CallD';
import ClockClinic from '@/components/icons/ClockClinic';
import LocationClinic from '@/components/icons/LocationClinic';
import RoutingC from '@/components/icons/RoutingC';
import TicketD from '@/components/icons/TicketD';
import { Button } from '@mui/material';
import Image from 'next/image'
import React from 'react'
function Detail({ user }) {
const data = user.turns[1];
return (
<div className='mt-[18px]'>
<div className='flex items-center justify-start gap-[16px]'>
<Image
height={95}
width={95}
alt='profile'
src={data.image}
/>
<div className='flex flex-col items-start justify-center gap-[20px]'>
<p className='text-[#3B3B3B] text-[20px] font-medium'>{data.name}</p>
<p className='text-[#616161] text-[16px] font-medium'>تخصص: {data.expertise}</p>
</div>
</div>
<ul className='flex mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start'>
<li className='flex items-center justify-start gap-[56px]'>
<div className='flex items-center justify-start gap-[4px]'>
<CalendarD />
<p className='text-[#616161] text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[20px] font-bold'>{data.date_turn}</span></p>
</div>
<div className='flex items-center justify-start gap-[4px]'>
<ClockClinic />
<p className='text-[#616161] text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[20px] font-bold'>ساعت {data.time}</span></p>
</div>
</li>
<li className='flex items-center justify-start gap-[32px]'>
<div className='flex items-center justify-start gap-[4px]'>
<LocationClinic />
<p className='text-[#616161] text-[16] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[16] font-normal'>{data.location}</span></p>
</div>
<Button
className='!py-[8px] !px-[12px] !gap-[8px]'
variant='text'
>
<RoutingC />
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
</Button>
</li>
<li className='flex items-center justify-start gap-[4px]'>
<CallD />
<p className='text-[#616161] text-[16] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[16] font-normal'>{data.phone}</span></p>
</li>
</ul>
<div className='py-[18px] pr-[16px] pl-[40px] flex items-center gap-[4px] border border-solid border-[#EFEFEF] rounded-[4px] w-fit'>
<TicketD />
<p className='text-[#616161] text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
</div>
</div>
)
}
export default Detail
components/dashboard/userAccount/tabs/turns/isTurnsDetails/DetailLg.js
+67
View File
@@ -0,0 +1,67 @@
import CalendarD from '@/components/icons/CalendarD';
import CallD from '@/components/icons/CallD';
import ClockClinic from '@/components/icons/ClockClinic';
import LocationClinic from '@/components/icons/LocationClinic';
import RoutingC from '@/components/icons/RoutingC';
import TicketD from '@/components/icons/TicketD';
import { Button } from '@mui/material';
import Image from 'next/image'
import React from 'react'
function DetailLg({ user }) {
const data = user.turns[1];
return (
<div className='lg:mt-[18px] hidden md:block'>
<div className='flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]'>
<Image
width={95}
height={95}
alt='profile'
src={data.image}
className='w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]'
/>
<div className='flex flex-col items-start justify-center gap-[20px]'>
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>{data.name}</p>
<p className='text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium'>تخصص: {data.expertise}</p>
</div>
</div>
<ul className='flex mt-[16px] sm:mt-[21px] md:mt-[27px] lg:mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start'>
<li className='flex items-center justify-start flex-wrap gap-[16px] lg:gap-[56px]'>
<div className='flex items-start justify-start gap-[4px]'>
<CalendarD />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.date_turn}</span></p>
</div>
<div className='flex items-start justify-start gap-[4px]'>
<ClockClinic />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>ساعت {data.time}</span></p>
</div>
</li>
<li className='flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]'>
<div className='flex items-start justify-start gap-[4px]'>
<LocationClinic />
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.location}</span></p>
</div>
<Button
className='!py-[8px] !px-[12px] !gap-[8px]'
variant='text'
>
<RoutingC />
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
</Button>
</li>
<li className='flex items-center justify-start gap-[4px]'>
<CallD />
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.phone}</span></p>
</li>
</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'>
<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>
</div>
</div>
)
}
export default DetailLg
components/dashboard/userAccount/tabs/turns/isTurnsDetails/DetailSm.js
+62
View File
@@ -0,0 +1,62 @@
import RoutingC from '@/components/icons/RoutingC';
import TicketD from '@/components/icons/TicketD';
import { Button } from '@mui/material';
import Image from 'next/image'
import React from 'react'
import ButtonData from './ButtonData';
function DetailSm({ user }) {
const data = user.turns[1];
return (
<div className='mt-[20px] block md:hidden'>
<div className='flex items-center justify-start gap-[8px]'>
<Image
src={data.image}
alt='profile'
height={32}
width={32}
/>
<div className='flex flex-col justify-center items-start gap-[8px]'>
<p className='text-[#616161] text-[14px] font-medium'>{data.name}</p>
<p className='text-[#7E7E7E] text-[14px] font-normal'>{data.expertise}</p>
</div>
</div>
<ul className='flex w-full flex-col items-start justify-start mt-[16px]'>
<li className="flex items-center w-full justify-between">
<p className="text-[#7E7E7E] text-[16px] font-normal">تاریخ نوبت:</p>
<p className="text-[#525252] text-[16px] font-medium">{data.date}</p>
</li>
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
<li className="flex flex-wrap items-center w-full justify-between">
<p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
<p className="text-[#525252] text-[16px] font-medium">{data.time}</p>
</li>
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
<li className="flex flex-wrap gap-y-[12px] items-center w-full justify-between">
<p className="text-[#7E7E7E] text-[14px] font-normal">آدرس:<span className='text-[#616161]'>{data.location}</span></p>
<Button
className='!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]'
variant='outlined'
>
<RoutingC />
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
</Button>
</li>
<p className='text-[#7E7E7E] text-[14px] font-normal mt-[12px]'>تلفن: <span className='text-[#616161]'>{data.phone}</span></p>
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
<li className='flex items-center justify-between w-full'>
<div className='flex items-center gap-[4px] w-fit'>
<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>
</div>
<p className='text-[#616161] text-[14px] font-bold'>{data.amount_paid} تومان</p>
</li>
</ul>
<ButtonData />
</div>
)
}
export default DetailSm
components/dashboard/userAccount/tabs/turns/isTurnsDetails/Head.js
+5 -19
View File
@@ -1,34 +1,20 @@
import ArrowRightS from "@/components/icons/ArrowRightS";
import ArrowLeftD from "@/components/icons/ArrowLeftD";
import EditTurnsD from "@/components/icons/EditTurnsD";
import { Button } from "@mui/material";
import ModalDeleteComment from "./modal";
import ButtonData from "./ButtonData";
function Head({ user, setIsTurnsDetails }) {
return (
<div className="flex items-center justify-between">
<div className="flex items-center justify-start gap-[24px]">
<div className="hidden md:flex flex-wrap gap-x-[24px] gap-y-[12px] items-center justify-between">
<div className="flex items-center justify-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
<Button
onClick={() => setIsTurnsDetails(false)}
className="!p-[6px] !border !border-solid !border-[#EFEFEF] !rounded-[4px] !min-w-0"
>
<ArrowRightS />
</Button>
<p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت شما</p>
</div>
<div className="flex items-center justify-end gap-[24px]">
<ModalDeleteComment />
<Button
className="!rounded-[4px] !shadow-none !gap-[4px] !py-[8px] !px-[12px]"
variant="contained"
>
<EditTurnsD />
ویرایش نوبت
<div className="mr-[4px]">
<ArrowLeftD />
</div>
</Button>
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">جزئیات نوبت شما</p>
</div>
<ButtonData />
</div>
)
}
components/dashboard/userAccount/tabs/turns/isTurnsDetails/index.js
+5 -3
View File
@@ -1,15 +1,17 @@
import Detail from "./Detail"
import DetailLg from "./DetailLg"
import DetailSm from "./DetailSm"
import Head from "./Head"
function IsTurnsDetails({ user, setIsTurnsDetails }) {
return (
<div className="py-[20px] px-[24px] opacity-page">
<div className="md:py-[20px] md:px-[24px] opacity-page">
<Head
user={user}
setIsTurnsDetails={setIsTurnsDetails}
/>
<Detail user={user} />
<DetailLg user={user} />
<DetailSm user={user} />
</div>
)
}
components/dashboard/userAccount/tabs/turns/isTurnsDetails/modal/index.js
+8 -8
View File
@@ -13,7 +13,7 @@ function ModalDeleteComment() {
<div>
{/* Button Modal */}
<Button
className="!rounded-[4px] !border-[#828DE0] !py-[8px] !px-[12px]"
className="!rounded-[4px] !border-[#828DE0] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
onClick={handleOpen}
variant="outlined"
>
@@ -26,10 +26,10 @@ function ModalDeleteComment() {
>
<Box
sx={styleDefault}
className="!w-full md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
>
<div className='flex items-center justify-between w-full'>
<p className='text-[#3B3B3B] text-[20px] font-medium'>لغو نوبت</p>
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>لغو نوبت</p>
<Button
onClick={handleClose}
className='!p-1'
@@ -38,20 +38,20 @@ function ModalDeleteComment() {
<CloseModalD />
</Button>
</div>
<span className='block h-px w-full bg-[#EFEFEF] my-[16px]'></span>
<p className='text-[#525252] text-[16px] font-normal'>آیا از لغو کردن نوبت مطمئن هستید؟</p>
<div className='flex items-center justify-end gap-[16px]'>
<span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
<p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا از لغو کردن نوبت مطمئن هستید؟</p>
<div className='flex items-center justify-end gap-[16px] mt-[12px]'>
<Button
variant='outlined'
onClick={handleClose}
className='!py-[8px] !px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
>
انصراف
</Button>
<Button
variant='contained'
onClick={handleClose}
className='!py-[8px] !px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
>
لغو نوبت
</Button>