all tabs page dashboard and responsive
This commit is contained in:
Ehsan
@@ -2,8 +2,8 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from
|
||||
|
||||
function CustomTable({ tableHead, centerTable, children }) {
|
||||
return (
|
||||
<TableContainer className='!shadow-none !rounded-[8px] !border !border-solid !border-[#DBDBDB]'>
|
||||
<Table className='!rounded-[8px] !overflow-hidden'>
|
||||
<TableContainer className='!shadow-none table-shadow-none !rounded-[8px] !border !border-solid !border-[#DBDBDB]'>
|
||||
<Table className='!rounded-[8px] !shadow-none !overflow-hidden'>
|
||||
<TableHead>
|
||||
<TableRow
|
||||
className='!bg-[#EFEFEF]'
|
||||
|
||||
@@ -2,14 +2,14 @@ import EditGrayA from "@/components/icons/EditGrayA"
|
||||
import EditOrangeA from "@/components/icons/EditOrangeA"
|
||||
import { Button, TextField } from "@mui/material"
|
||||
|
||||
function EditField({ changeData, data, name, iconGray }) {
|
||||
function EditField({ changeData, data, name, iconGray, isTransparent }) {
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<TextField
|
||||
value={data?.value}
|
||||
disabled={!data?.isEdit}
|
||||
type='text'
|
||||
className="!bg-[#FFF] !w-full res-field-account"
|
||||
className={`!w-full res-field-account ${isTransparent ? '!bg-transparent lg:!bg-[#FFF]' : '!bg-[#FFF]'}`}
|
||||
onChange={e => {
|
||||
changeData(e.target.value, 'value', name)
|
||||
}}
|
||||
|
||||
@@ -10,7 +10,7 @@ function a11yProps(index) {
|
||||
function Tabs({ value, handleChange, listTab, isSm, style }) {
|
||||
return (
|
||||
<Box
|
||||
className="!border-none"
|
||||
className="!border-none !w-full"
|
||||
>
|
||||
<TabsMUI
|
||||
value={value}
|
||||
|
||||
@@ -9,17 +9,22 @@ import UserAccountPage from "@/components/dashboard/userAccount/UserAccount";
|
||||
function UserAccount() {
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
const [isOpenSide, setIsOpenSide] = useState(false);
|
||||
|
||||
return (
|
||||
<DashboardPage
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
user={userData.data}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
>
|
||||
<UserAccountPage
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
user={userData.data}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
/>
|
||||
</DashboardPage>
|
||||
)
|
||||
|
||||
+11
-3
@@ -266,7 +266,8 @@ html {
|
||||
|
||||
/* Hidden Scroll */
|
||||
|
||||
.MuiPaper-root {
|
||||
.MuiPaper-root,
|
||||
.MuiTableContainer-root {
|
||||
box-shadow: 0px 0px 18px 0px rgba(187, 187, 187, 0.25) !important;
|
||||
border-radius: 4px !important;
|
||||
border: 1px solid var(--colors-gray-50, #EFEFEF) !important;
|
||||
@@ -274,12 +275,14 @@ html {
|
||||
}
|
||||
|
||||
.hidden-scroll::-webkit-scrollbar-thumb,
|
||||
.MuiTabs-scroller::-webkit-scrollbar-thumb {
|
||||
.MuiTabs-scroller::-webkit-scrollbar-thumb,
|
||||
.MuiTableContainer-root::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hidden-scroll::-webkit-scrollbar,
|
||||
.MuiTabs-scroller::-webkit-scrollbar {
|
||||
.MuiTabs-scroller::-webkit-scrollbar,
|
||||
.MuiTableContainer-root::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@@ -292,6 +295,11 @@ html {
|
||||
animation: rotate 1s;
|
||||
}
|
||||
|
||||
.table-shadow-none {
|
||||
box-shadow: none !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
rotate: 90;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
|
||||
@@ -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'>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)'
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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
|
||||
@@ -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'
|
||||
>
|
||||
نوبت های انجام شده
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
function ArrowLeftCardD() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
|
||||
<path d="M12.5005 17.1L7.06719 11.6667C6.42552 11.025 6.42552 9.975 7.06719 9.33334L12.5005 3.9" stroke="#5559CE" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowLeftCardD
|
||||
@@ -0,0 +1,9 @@
|
||||
function ArrowLeftSideBar({ active }) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M14.9998 19.92L8.47984 13.4C7.70984 12.63 7.70984 11.37 8.47984 10.6L14.9998 4.08" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowLeftSideBar
|
||||
@@ -0,0 +1,10 @@
|
||||
function ArrowRightD() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M14.4297 5.92999L20.4997 12L14.4297 18.07" stroke="#525252" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M3.5 12H20.33" stroke="#525252" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowRightD
|
||||
@@ -1,6 +1,6 @@
|
||||
function CalendarAdD() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
|
||||
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
|
||||
<path d="M8 2.5V5.5" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M16 2.5V5.5" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M3.5 9.59H20.5" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
function CalendarD() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M6.66797 1.66667V4.16667" stroke="#616161" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M13.332 1.66667V4.16667" stroke="#616161" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M2.91797 7.575H17.0846" stroke="#616161" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M17.5 7.08334V14.1667C17.5 16.6667 16.25 18.3333 13.3333 18.3333H6.66667C3.75 18.3333 2.5 16.6667 2.5 14.1667V7.08334C2.5 4.58334 3.75 2.91667 6.66667 2.91667H13.3333C16.25 2.91667 17.5 4.58334 17.5 7.08334Z" stroke="#616161" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M13.0801 11.4167H13.0875" stroke="#616161" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M13.0801 13.9167H13.0875" stroke="#616161" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M9.99803 11.4167H10.0055" stroke="#616161" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M9.99803 13.9167H10.0055" stroke="#616161" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M6.91209 11.4167H6.91957" stroke="#616161" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M6.91209 13.9167H6.91957" stroke="#616161" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M6.66797 1.66667V4.16667" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M13.332 1.66667V4.16667" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M2.91797 7.575H17.0846" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M17.5 7.08334V14.1667C17.5 16.6667 16.25 18.3333 13.3333 18.3333H6.66667C3.75 18.3333 2.5 16.6667 2.5 14.1667V7.08334C2.5 4.58334 3.75 2.91667 6.66667 2.91667H13.3333C16.25 2.91667 17.5 4.58334 17.5 7.08334Z" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M13.0801 11.4167H13.0875" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M13.0801 13.9167H13.0875" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M9.99803 11.4167H10.0055" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M9.99803 13.9167H10.0055" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M6.91209 11.4167H6.91957" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M6.91209 13.9167H6.91957" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
function CallD() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M18.3096 15.275C18.3096 15.575 18.243 15.8833 18.1013 16.1833C17.9596 16.4833 17.7763 16.7667 17.5346 17.0333C17.1263 17.4833 16.6763 17.8083 16.168 18.0167C15.668 18.225 15.1263 18.3333 14.543 18.3333C13.693 18.3333 12.7846 18.1333 11.8263 17.725C10.868 17.3167 9.90964 16.7667 8.95964 16.075C8.0013 15.375 7.09297 14.6 6.2263 13.7417C5.36797 12.875 4.59297 11.9667 3.9013 11.0167C3.21797 10.0667 2.66797 9.11666 2.26797 8.17499C1.86797 7.22499 1.66797 6.31666 1.66797 5.44999C1.66797 4.88332 1.76797 4.34166 1.96797 3.84166C2.16797 3.33332 2.48464 2.86666 2.9263 2.44999C3.45964 1.92499 4.04297 1.66666 4.65964 1.66666C4.89297 1.66666 5.1263 1.71666 5.33464 1.81666C5.5513 1.91666 5.74297 2.06666 5.89297 2.28332L7.8263 5.00832C7.9763 5.21666 8.08464 5.40832 8.15964 5.59166C8.23464 5.76666 8.2763 5.94166 8.2763 6.09999C8.2763 6.29999 8.21797 6.49999 8.1013 6.69166C7.99297 6.88332 7.83464 7.08332 7.63464 7.28332L7.0013 7.94166C6.90964 8.03332 6.86797 8.14166 6.86797 8.27499C6.86797 8.34166 6.8763 8.39999 6.89297 8.46666C6.91797 8.53332 6.94297 8.58332 6.95964 8.63332C7.10964 8.90832 7.36797 9.26666 7.73464 9.69999C8.10964 10.1333 8.50964 10.575 8.94297 11.0167C9.39297 11.4583 9.8263 11.8667 10.268 12.2417C10.7013 12.6083 11.0596 12.8583 11.343 13.0083C11.3846 13.025 11.4346 13.05 11.493 13.075C11.5596 13.1 11.6263 13.1083 11.7013 13.1083C11.843 13.1083 11.9513 13.0583 12.043 12.9667L12.6763 12.3417C12.8846 12.1333 13.0846 11.975 13.2763 11.875C13.468 11.7583 13.6596 11.7 13.868 11.7C14.0263 11.7 14.193 11.7333 14.3763 11.8083C14.5596 11.8833 14.7513 11.9917 14.9596 12.1333L17.718 14.0917C17.9346 14.2417 18.0846 14.4167 18.1763 14.625C18.2596 14.8333 18.3096 15.0417 18.3096 15.275Z" stroke="#616161" stroke-width="1.5" stroke-miterlimit="10" />
|
||||
<path d="M18.3096 15.275C18.3096 15.575 18.243 15.8833 18.1013 16.1833C17.9596 16.4833 17.7763 16.7667 17.5346 17.0333C17.1263 17.4833 16.6763 17.8083 16.168 18.0167C15.668 18.225 15.1263 18.3333 14.543 18.3333C13.693 18.3333 12.7846 18.1333 11.8263 17.725C10.868 17.3167 9.90964 16.7667 8.95964 16.075C8.0013 15.375 7.09297 14.6 6.2263 13.7417C5.36797 12.875 4.59297 11.9667 3.9013 11.0167C3.21797 10.0667 2.66797 9.11666 2.26797 8.17499C1.86797 7.22499 1.66797 6.31666 1.66797 5.44999C1.66797 4.88332 1.76797 4.34166 1.96797 3.84166C2.16797 3.33332 2.48464 2.86666 2.9263 2.44999C3.45964 1.92499 4.04297 1.66666 4.65964 1.66666C4.89297 1.66666 5.1263 1.71666 5.33464 1.81666C5.5513 1.91666 5.74297 2.06666 5.89297 2.28332L7.8263 5.00832C7.9763 5.21666 8.08464 5.40832 8.15964 5.59166C8.23464 5.76666 8.2763 5.94166 8.2763 6.09999C8.2763 6.29999 8.21797 6.49999 8.1013 6.69166C7.99297 6.88332 7.83464 7.08332 7.63464 7.28332L7.0013 7.94166C6.90964 8.03332 6.86797 8.14166 6.86797 8.27499C6.86797 8.34166 6.8763 8.39999 6.89297 8.46666C6.91797 8.53332 6.94297 8.58332 6.95964 8.63332C7.10964 8.90832 7.36797 9.26666 7.73464 9.69999C8.10964 10.1333 8.50964 10.575 8.94297 11.0167C9.39297 11.4583 9.8263 11.8667 10.268 12.2417C10.7013 12.6083 11.0596 12.8583 11.343 13.0083C11.3846 13.025 11.4346 13.05 11.493 13.075C11.5596 13.1 11.6263 13.1083 11.7013 13.1083C11.843 13.1083 11.9513 13.0583 12.043 12.9667L12.6763 12.3417C12.8846 12.1333 13.0846 11.975 13.2763 11.875C13.468 11.7583 13.6596 11.7 13.868 11.7C14.0263 11.7 14.193 11.7333 14.3763 11.8083C14.5596 11.8833 14.7513 11.9917 14.9596 12.1333L17.718 14.0917C17.9346 14.2417 18.0846 14.4167 18.1763 14.625C18.2596 14.8333 18.3096 15.0417 18.3096 15.275Z" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
function CalndarD({ active }) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M8 2V5" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M16 2V5" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M3.5 9.09H20.5" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
function CardTickD() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
|
||||
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
|
||||
<path d="M2 9H13.5" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M6 17H8" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10.5 17H14.5" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
function EditTurnsD() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M11.0514 3L4.20976 10.2417C3.95142 10.5167 3.70142 11.0583 3.65142 11.4333L3.34309 14.1333C3.23476 15.1083 3.93476 15.775 4.90142 15.6083L7.58476 15.15C7.95976 15.0833 8.48475 14.8083 8.74309 14.525L15.5848 7.28333C16.7681 6.03333 17.3014 4.60833 15.4598 2.86667C13.6264 1.14167 12.2348 1.75 11.0514 3Z" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M9.91016 4.20833C10.2685 6.50833 12.1352 8.26667 14.4518 8.5" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M2.5 18.3333H17.5" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M11.0514 3L4.20976 10.2417C3.95142 10.5167 3.70142 11.0583 3.65142 11.4333L3.34309 14.1333C3.23476 15.1083 3.93476 15.775 4.90142 15.6083L7.58476 15.15C7.95976 15.0833 8.48475 14.8083 8.74309 14.525L15.5848 7.28333C16.7681 6.03333 17.3014 4.60833 15.4598 2.86667C13.6264 1.14167 12.2348 1.75 11.0514 3Z" stroke="#EFEFEF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M9.91016 4.20833C10.2685 6.50833 12.1352 8.26667 14.4518 8.5" stroke="#EFEFEF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M2.5 18.3333H17.5" stroke="#EFEFEF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
function MessageNotifd() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M18.3346 8.33333V10.8333C18.3346 14.1667 16.668 15.8333 13.3346 15.8333H12.918C12.6596 15.8333 12.4096 15.9583 12.2513 16.1667L11.0013 17.8333C10.4513 18.5667 9.5513 18.5667 9.0013 17.8333L7.7513 16.1667C7.61797 15.9833 7.30964 15.8333 7.08464 15.8333H6.66797C3.33464 15.8333 1.66797 15 1.66797 10.8333V6.66667C1.66797 3.33333 3.33464 1.66667 6.66797 1.66667H11.668" stroke="#FAFAFA" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M16.2513 5.83333C17.4019 5.83333 18.3346 4.90059 18.3346 3.75C18.3346 2.59941 17.4019 1.66667 16.2513 1.66667C15.1007 1.66667 14.168 2.59941 14.168 3.75C14.168 4.90059 15.1007 5.83333 16.2513 5.83333Z" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M13.3301 9.16667H13.3375" stroke="#FAFAFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M9.99803 9.16667H10.0055" stroke="#FAFAFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M6.66209 9.16667H6.66957" stroke="#FAFAFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M18.3346 8.33333V10.8333C18.3346 14.1667 16.668 15.8333 13.3346 15.8333H12.918C12.6596 15.8333 12.4096 15.9583 12.2513 16.1667L11.0013 17.8333C10.4513 18.5667 9.5513 18.5667 9.0013 17.8333L7.7513 16.1667C7.61797 15.9833 7.30964 15.8333 7.08464 15.8333H6.66797C3.33464 15.8333 1.66797 15 1.66797 10.8333V6.66667C1.66797 3.33333 3.33464 1.66667 6.66797 1.66667H11.668" stroke="#FAFAFA" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M16.2513 5.83333C17.4019 5.83333 18.3346 4.90059 18.3346 3.75C18.3346 2.59941 17.4019 1.66667 16.2513 1.66667C15.1007 1.66667 14.168 2.59941 14.168 3.75C14.168 4.90059 15.1007 5.83333 16.2513 5.83333Z" stroke="#FAFAFA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M13.3301 9.16667H13.3375" stroke="#FAFAFA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M9.99803 9.16667H10.0055" stroke="#FAFAFA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M6.66209 9.16667H6.66957" stroke="#FAFAFA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
function TicketD() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M16.2513 10.4167C16.2513 9.26668 17.1846 8.33334 18.3346 8.33334V7.50001C18.3346 4.16668 17.5013 3.33334 14.168 3.33334H5.83464C2.5013 3.33334 1.66797 4.16668 1.66797 7.50001V7.91668C2.81797 7.91668 3.7513 8.85001 3.7513 10C3.7513 11.15 2.81797 12.0833 1.66797 12.0833V12.5C1.66797 15.8333 2.5013 16.6667 5.83464 16.6667H14.168C17.5013 16.6667 18.3346 15.8333 18.3346 12.5C17.1846 12.5 16.2513 11.5667 16.2513 10.4167Z" stroke="#616161" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M8.33203 3.33334L8.33203 16.6667" stroke="#616161" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 5" />
|
||||
<path d="M16.2513 10.4167C16.2513 9.26668 17.1846 8.33334 18.3346 8.33334V7.50001C18.3346 4.16668 17.5013 3.33334 14.168 3.33334H5.83464C2.5013 3.33334 1.66797 4.16668 1.66797 7.50001V7.91668C2.81797 7.91668 3.7513 8.85001 3.7513 10C3.7513 11.15 2.81797 12.0833 1.66797 12.0833V12.5C1.66797 15.8333 2.5013 16.6667 5.83464 16.6667H14.168C17.5013 16.6667 18.3346 15.8333 18.3346 12.5C17.1846 12.5 16.2513 11.5667 16.2513 10.4167Z" stroke="#616161" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8.33203 3.33334L8.33203 16.6667" stroke="#616161" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="5 5" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
function TrashOrangeD() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
|
||||
<path d="M17.5 5.48333C14.725 5.20833 11.9333 5.06667 9.15 5.06667C7.5 5.06667 5.85 5.15 4.2 5.31667L2.5 5.48333" stroke="#F17732" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M7.08203 4.64167L7.26536 3.55C7.3987 2.75833 7.4987 2.16667 8.90703 2.16667H11.0904C12.4987 2.16667 12.607 2.79167 12.732 3.55833L12.9154 4.64167" stroke="#F17732" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15.7096 8.11667L15.168 16.5083C15.0763 17.8167 15.0013 18.8333 12.6763 18.8333H7.3263C5.0013 18.8333 4.9263 17.8167 4.83464 16.5083L4.29297 8.11667" stroke="#F17732" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M8.60938 14.25H11.3844" stroke="#F17732" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M7.91797 10.9167H12.0846" stroke="#F17732" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M17.5 5.48333C14.725 5.20833 11.9333 5.06667 9.15 5.06667C7.5 5.06667 5.85 5.15 4.2 5.31667L2.5 5.48333" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M7.08203 4.64167L7.26536 3.55C7.3987 2.75833 7.4987 2.16667 8.90703 2.16667H11.0904C12.4987 2.16667 12.607 2.79167 12.732 3.55833L12.9154 4.64167" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M15.7096 8.11667L15.168 16.5083C15.0763 17.8167 15.0013 18.8333 12.6763 18.8333H7.3263C5.0013 18.8333 4.9263 17.8167 4.83464 16.5083L4.29297 8.11667" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8.60938 14.25H11.3844" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M7.91797 10.9167H12.0846" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import "aos/dist/aos.css";
|
||||
import { useEffect } from "react";
|
||||
import Sidebar from './sidebar';
|
||||
|
||||
function Layout({ children, title, name, disableFooter, isSidebar, user, value, setValue }) {
|
||||
function Layout({ children, title, name, isOpenSide, setIsOpenSide, disableFooter, isSidebar, user, value, setValue }) {
|
||||
|
||||
useEffect(() => {
|
||||
Aos.init({ duration: 1000 });
|
||||
@@ -25,7 +25,7 @@ function Layout({ children, title, name, disableFooter, isSidebar, user, value,
|
||||
<section className={`
|
||||
opacity-page
|
||||
${isSidebar &&
|
||||
'padding-responsive min-h-screen pt-[120px] flex items-stretch justify-center gap-[24px] mt-[56px]'
|
||||
'padding-responsive min-h-screen flex items-stretch justify-center gap-[12px] lg:gap-[24px] pt-[76px] sm:pt-[109px] mt:pt-[142px] lg:pt-[176px]'
|
||||
}
|
||||
`}>
|
||||
{isSidebar && (
|
||||
@@ -33,6 +33,8 @@ function Layout({ children, title, name, disableFooter, isSidebar, user, value,
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
import CalendarAdD from "@/components/icons/CalendarAdD"
|
||||
import CardTickD from "@/components/icons/CardTickD"
|
||||
|
||||
function Cards({ user }) {
|
||||
return (
|
||||
<div className='flex md:hidden mt-[16px] mb-[24px] items-start justify-center gap-[16px]'>
|
||||
<div className='py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[6px] 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-[7px]'>
|
||||
<div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<CardTickD />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-[8px] items-start justify-start'>
|
||||
<p className='text-[#3B3B3B] text-nowrap text-[14px] font-medium'>{user.total_transactions} <span className='text-[11px]'>تومان</span></p>
|
||||
<p className='text-[#616161] text-nowrap text-[12px] font-normal'>مجموع تراکنش ها</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[12px] 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-[7px]'>
|
||||
<div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<CalendarAdD />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-[8px] items-start justify-start'>
|
||||
<p className='text-[#3B3B3B] text-nowrap text-[14px] font-medium'>{user.number_of_turns}</p>
|
||||
<p className='text-[#616161] text-nowrap text-[12px] font-normal'>تعداد نوبت های شما</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cards
|
||||
@@ -3,16 +3,19 @@ import Image from "next/image"
|
||||
function Head({ user }) {
|
||||
return (
|
||||
<div
|
||||
className="w-full flex flex-col items-center justify-start gap-[4px]"
|
||||
className="w-full flex flex-row md:flex-col items-center justify-center md:justify-start gap-[12px] md:gap-[4px]"
|
||||
>
|
||||
<Image
|
||||
className="rounded-full border-[3px] border-solid border-[#F8F8FF] shadow-[0px_1px_25.6px_0px_rgba(85,_89,_205,_0.20)]"
|
||||
src={user.profile}
|
||||
alt="profile"
|
||||
height={73}
|
||||
width={73}
|
||||
/>
|
||||
<p className="text-[#3B3B3B] text-[14px] font-bold">{user.name}</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">{user.phone}</p>
|
||||
<div className="flex flex-col items-start md:items-center justify-center gap-[8px] md:gap-[4px]">
|
||||
<p className="text-[#3B3B3B] text-[14px] font-bold">{user.name}</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">{user.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,8 +5,9 @@ import MessageD from "@/components/icons/MessageD";
|
||||
import ProfileD from "@/components/icons/ProfileD";
|
||||
import NotificationD from "@/components/icons/NotificationD";
|
||||
import { Button } from "@mui/material";
|
||||
import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
|
||||
|
||||
function List({ value, setValue }) {
|
||||
function List({ value, setValue, setIsOpenSide }) {
|
||||
|
||||
const listMenu = [
|
||||
{ name: 'حساب کاربری', icon: <ProfileD active={value === 0} /> },
|
||||
@@ -25,25 +26,35 @@ function List({ value, setValue }) {
|
||||
key={idx}
|
||||
>
|
||||
<Button
|
||||
className={`!flex !py-[24px] hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
||||
!items-center !justify-start !gap-[8px] !relative before:!absolute before:!right-0
|
||||
className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
||||
!relative before:!absolute before:!right-0 !flex !justify-between !items-center
|
||||
before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
|
||||
${value === idx ?
|
||||
'before:!bg-[#5559CE]' :
|
||||
'before:md:!bg-[#5559CE]' :
|
||||
'before:!bg-transparent'
|
||||
}`}
|
||||
onClick={() => setValue(idx)}
|
||||
onClick={() => {
|
||||
setValue(idx);
|
||||
setIsOpenSide(false);
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
<p
|
||||
className={`
|
||||
text-[16px]
|
||||
<div className="!flex !w-full !items-center !justify-start !gap-[8px] md:px-[24px]">
|
||||
<div className="w-[24px] h-[24px]">
|
||||
{item.icon}
|
||||
</div>
|
||||
<p
|
||||
className={`
|
||||
text-[16px] transition-all duration-500
|
||||
${value === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
|
||||
`}
|
||||
>{item.name}</p>
|
||||
>{item.name}</p>
|
||||
</div>
|
||||
<div className="flex md:hidden">
|
||||
<ArrowLeftSideBar active={value === idx} />
|
||||
</div>
|
||||
</Button>
|
||||
{listMenu.length > idx + 1 && (
|
||||
<span className="block bg-[#EFEFEF] h-px w-full"></span>
|
||||
<span className="block bg-[#EFEFEF] h-px mx-[24px] w-[calc(100%-48px)]"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
import { useState } from "react"
|
||||
import Head from "./Head"
|
||||
import List from "./List"
|
||||
import Cards from "./Cards";
|
||||
import Head from "./Head";
|
||||
import List from "./List";
|
||||
|
||||
function Sidebar({ user, value, setValue }) {
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
function Sidebar({ user, value, setValue, isOpenSide, setIsOpenSide }) {
|
||||
|
||||
return (
|
||||
// ${open ? 'lg:w-[39%]' : 'min-w-[80px]'}
|
||||
<div className="flex-1 w-[28%]">
|
||||
|
||||
// ${open ? 'md:w-[39%]' : 'min-w-[80px]'}
|
||||
<div className={`
|
||||
md:block absolute md:relative flex-1 z-[7] w-full sm:bg-[#FAFAFA] sm:px-[24px] md:w-[32%] lg:w-[28%]
|
||||
bg-[#FAFAFA] padding-responsive transition-all duration-700
|
||||
h-screen md:h-auto pt-[24px] md:pt-0
|
||||
z-5 top-[60px] sm:top-[77px] md:top-0 md:px-0
|
||||
${isOpenSide ?
|
||||
'right-0' :
|
||||
'md:flex -right-full md:right-0'}
|
||||
`}>
|
||||
<aside
|
||||
// className={`
|
||||
// flex-1 overflow-hidden lg:w-[39%] w-full
|
||||
// `}
|
||||
className="
|
||||
sticky top-[calc(12px_+_58px_+_32px)] sm:top-[calc(21px_+_58px_+_45px)] md:top-[calc(30px_+_58px_+_58px)] lg:top-[calc(40px_+_58px_+_78px)]"
|
||||
className="relative md:sticky top-0 h-fit
|
||||
md:top-[110px] lg:top-[calc(40px_+_58px_+_78px)] w-full"
|
||||
>
|
||||
<div className="
|
||||
|
||||
pt-[10px] pb-[26px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]
|
||||
|
||||
">
|
||||
pt-0 md:pt-[10px] pb-[26px] bg-[#FAFAFA] sm:bg-[#FAFAFA] md:bg-[#FFF] shadow-none
|
||||
md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]
|
||||
">
|
||||
<Head user={user} />
|
||||
<Cards user={user} />
|
||||
<List
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
+171
-171
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user