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

design dashboard comments & messages & modals

Browse Source
This commit is contained in:
Ehsan
2024-09-04 03:00:36 +03:30
parent bc47663002
commit 52a745fcb8
34 changed files with 669 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dashboard/index.js
+3 -1
View File
@@ -1,13 +1,15 @@
import React from 'react'
import Layout from '../layout'
function DashboardPage({ user, children }) {
function DashboardPage({ user, children, value, setValue }) {
return (
<Layout
user={user}
value={value}
title='داشبورد'
name='dashboard'
isSidebar={true}
setValue={setValue}
>
{children}
</Layout>
components/dashboard/userAccount/ContentTabs.js
+41 -34
View File
@@ -9,52 +9,59 @@ import Comments from "./tabs/comments";
import Messages from "./tabs/messages";
import Tabs from "@/app/component/Tabs";
import Transactions from "./tabs/transactions";
import IsTurnsDetails from "./tabs/turns/isTurnsDetails";
const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش های من', 'نظرات من', 'پیام ها'];
function ContentTabs({ user }) {
function ContentTabs({ user, value, setValue }) {
const [value, setValue] = useState(0);
const [isTurnsDetails, setIsTurnsDetails] = useState(false);
const handleChange = (event, newValue) => setValue(newValue);
const components = [
<DetailUser user={user} />,
<Turns user={user} />,
<Turns user={user} setIsTurnsDetails={setIsTurnsDetails} />,
<Transactions user={user} />,
<Comments user={user} />,
<Messages />
]
<Messages user={user} />
];
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]">
<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]">
{components[value]}
</div>
{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]">
{components[value]}
</div>
</>
)}
</div>
)
}
components/dashboard/userAccount/Head.js
+2 -2
View File
@@ -25,7 +25,7 @@ function Head({ user }) {
/>
</div>
<div className='flex flex-col items-start justify-start gap-[12px]'>
<div className='py-[10px] flex items-center justify-start gap-[12px] pl-[20px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
<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]'>
<CardTickD />
</div>
@@ -34,7 +34,7 @@ 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] pl-[20px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
<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]'>
<CalendarAdD />
</div>
components/dashboard/userAccount/UserAccount.js
+7 -3
View File
@@ -1,11 +1,15 @@
import ContentTabs from "./ContentTabs"
import Head from "./Head"
function UserAccountPage({ user }) {
function UserAccountPage({ user, value, setValue }) {
return (
<div className='w-full'>
<div className='w-[72%]'>
<Head user={user} />
<ContentTabs user={user} />
<ContentTabs
user={user}
value={value}
setValue={setValue}
/>
</div>
)
}
components/dashboard/userAccount/tabs/comments/Comment.js
+25
View File
@@ -1,4 +1,8 @@
import CalndarD from "@/components/icons/CalndarD"
import TrashOrangeD from "@/components/icons/TrashOrangeD"
import { Button, Rating } from "@mui/material"
import Image from "next/image"
import ModalDeleteComment from "./modal"
function Comment({ data }) {
return (
@@ -13,8 +17,29 @@ function Comment({ data }) {
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>
</div>
<ModalDeleteComment />
</div>
<Rating
defaultValue={data.stars.value}
className="!mt-[8px]"
sx={{
'& .MuiSvgIcon-root': {
width: '16px',
height: '16px'
}
}}
/>
<p className="text-[#525252] text-[14px] font-normal leading-[33px]">{data.comment}</p>
<div className="flex items-center justify-start gap-[8px]">
<CalndarD />
<p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
</div>
<span className="w-full block h-px bg-[#EFEFEF]"></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 flex-col items-start justify-start">
<ul className="flex opacity-page flex-col items-start justify-start gap-[20px]">
{user.comments.map((item, idx) => (
<Comment
key={idx}
components/dashboard/userAccount/tabs/comments/modal/index.js
+67
View File
@@ -0,0 +1,67 @@
import { useState } from 'react';
import TrashOrangeD from '@/components/icons/TrashOrangeD';
import { Box, Button, Modal } from '@mui/material';
import { styleDefault } from '@/mui';
import CloseModalD from '@/components/icons/CloseModalD';
function ModalDeleteComment() {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<div>
{/* Button Modal */}
<Button
className="!gap-[5px] !p-1 !text-[#F17732] !text-[14px] !font-medium"
onClick={handleOpen}
variant="text"
>
<TrashOrangeD />
حذف نظر
</Button>
{/* Content Modal */}
<Modal
open={open}
onClose={handleClose}
>
<Box
sx={styleDefault}
className="!w-full 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>
<Button
onClick={handleClose}
className='!p-1'
variant='text'
>
<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]'>
<Button
variant='outlined'
onClick={handleClose}
className='!py-[8px] !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'
>
حذف نظر
</Button>
</div>
</Box>
</Modal>
</div>
)
}
export default ModalDeleteComment
components/dashboard/userAccount/tabs/messages/Message.js
+26
View File
@@ -0,0 +1,26 @@
import CalndarD from '@/components/icons/CalndarD'
import MessageNotifd from '@/components/icons/MessageNotifd'
import React from 'react'
function Message({ data }) {
return (
<li>
<div className="flex items-center justify-start gap-[8px]">
<div className="p-[6px] rounded-full bg-[#F17732]">
<MessageNotifd />
</div>
<p className="text-[#3B3B3B] 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 />
<p className='text-[#7E7E7E] text-[12px] font-normal'>{data.date}</p>
</div>
</div>
<span className='block bg-[#EFEFEF] h-px w-full mt-[12px]'></span>
</li>
)
}
export default Message
components/dashboard/userAccount/tabs/messages/index.js
+11 -2
View File
@@ -1,6 +1,15 @@
function Messages() {
import Message from "./Message";
function Messages({ user }) {
return (
<div>Messages</div>
<ul className="flex opacity-page flex-col gap-[16px]">
{user.messages.map((item, idx) => (
<Message
key={idx}
data={item}
/>
))}
</ul>
)
}
components/dashboard/userAccount/tabs/turns/List.js
+2 -1
View File
@@ -3,7 +3,7 @@ import ArrowLeftBlueD from '@/components/icons/ArrowLeftBlueD'
import { Button, TableCell, TableRow } from '@mui/material'
import Image from 'next/image'
function List({ user }) {
function List({ user, setIsTurnsDetails }) {
const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'عملیات']
const centerTable = [0, 5];
@@ -39,6 +39,7 @@ function List({ user }) {
<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'
>
مشاهده جزئیات
components/dashboard/userAccount/tabs/turns/index.js
+2 -2
View File
@@ -1,12 +1,12 @@
import Head from "./Head";
import List from "./List";
function Turns({ user }) {
function Turns({ user, setIsTurnsDetails }) {
return (
<div className="opacity-page">
<p className="text-[#3B3B3B] text-[16px] font-bold">تاریخچه نوبت ها</p>
<Head />
<List user={user} />
<List user={user} setIsTurnsDetails={setIsTurnsDetails} />
</div>
)
}
components/dashboard/userAccount/tabs/turns/isTurnsDetails/Detail.js
+66
View File
@@ -0,0 +1,66 @@
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/Head.js
+36
View File
@@ -0,0 +1,36 @@
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";
function Head({ user, setIsTurnsDetails }) {
return (
<div className="flex items-center justify-between">
<div className="flex items-center justify-start 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>
</div>
</div>
)
}
export default Head
components/dashboard/userAccount/tabs/turns/isTurnsDetails/index.js
+17
View File
@@ -0,0 +1,17 @@
import Detail from "./Detail"
import Head from "./Head"
function IsTurnsDetails({ user, setIsTurnsDetails }) {
return (
<div className="py-[20px] px-[24px] opacity-page">
<Head
user={user}
setIsTurnsDetails={setIsTurnsDetails}
/>
<Detail user={user} />
</div>
)
}
export default IsTurnsDetails
components/dashboard/userAccount/tabs/turns/isTurnsDetails/modal/index.js
+65
View File
@@ -0,0 +1,65 @@
import { useState } from 'react';
import { Box, Button, Modal } from '@mui/material';
import { styleDefault } from '@/mui';
import CloseModalD from '@/components/icons/CloseModalD';
function ModalDeleteComment() {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<div>
{/* Button Modal */}
<Button
className="!rounded-[4px] !border-[#828DE0] !py-[8px] !px-[12px]"
onClick={handleOpen}
variant="outlined"
>
لغو کردن نوبت
</Button>
{/* Content Modal */}
<Modal
open={open}
onClose={handleClose}
>
<Box
sx={styleDefault}
className="!w-full 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>
<Button
onClick={handleClose}
className='!p-1'
variant='text'
>
<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]'>
<Button
variant='outlined'
onClick={handleClose}
className='!py-[8px] !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'
>
لغو نوبت
</Button>
</div>
</Box>
</Modal>
</div>
)
}
export default ModalDeleteComment