check responsive & page dashboard user account & turns & transactions & comments

2024-09-03 03:04:55 +03:30
parent bb154ac63f
commit 13cc7796c3
55 changed files with 1887 additions and 92 deletions
@@ -0,0 +1,62 @@
+'use client'
+
+import { useState } from "react";
+
+// Tabs
+import Turns from "./tabs/turns";
+import DetailUser from "./tabs/detailUser";
+import Comments from "./tabs/comments";
+import Messages from "./tabs/messages";
+import Tabs from "@/app/component/Tabs";
+import Transactions from "./tabs/transactions";
+
+const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش های من', 'نظرات من', 'پیام ها'];
+
+function ContentTabs({ user }) {
+
+    const [value, setValue] = useState(0);
+    const handleChange = (event, newValue) => setValue(newValue);
+    const components = [
+        <DetailUser user={user} />,
+        <Turns user={user} />,
+        <Transactions user={user} />,
+        <Comments user={user} />,
+        <Messages />
+    ]
+
+    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>
+        </div>
+    )
+}
+
+export default ContentTabs
@@ -0,0 +1,51 @@
+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='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]'>
+                    <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>
+                    <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)]'
+                    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] 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>
+                    <div className='flex flex-col gap-[8px] items-start justify-start'>
+                        <p className='text-[#3B3B3B] text-nowrap text-[16px] font-medium'>{user.total_transactions} <span className='text-[12px]'>تومان</span></p>
+                        <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='bg-[#FFC051] rounded-full p-[8px]'>
+                        <CalendarAdD />
+                    </div>
+                    <div className='flex flex-col gap-[8px] items-start justify-start'>
+                        <p className='text-[#3B3B3B] text-nowrap text-[16px] font-medium'>{user.number_of_turns}</p>
+                        <p className='text-[#616161] text-nowrap text-[14px] font-normal'>تعداد نوبت های شما</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Head
@@ -0,0 +1,13 @@
+import ContentTabs from "./ContentTabs"
+import Head from "./Head"
+
+function UserAccountPage({ user }) {
+    return (
+        <div className='w-full'>
+            <Head user={user} />
+            <ContentTabs user={user} />
+        </div>
+    )
+}
+
+export default UserAccountPage
@@ -0,0 +1,22 @@
+import Image from "next/image"
+
+function Comment({ data }) {
+    return (
+        <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]">
+                    <Image
+                        src={data.profile}
+                        alt="profile"
+                        height={87}
+                        width={87}
+                    />
+                </div>
+            </div>
+        </li>
+    )
+}
+
+export default Comment
@@ -0,0 +1,16 @@
+import Comment from "./Comment"
+
+function Comments({ user }) {
+    return (
+        <ul className="flex flex-col items-start justify-start">
+            {user.comments.map((item, idx) => (
+                <Comment
+                    key={idx}
+                    data={item}
+                />
+            ))}
+        </ul>
+    )
+}
+
+export default Comments
@@ -0,0 +1,17 @@
+function Content({ isConfirmed, children, title }) {
+    return (
+        <div className='flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]'>
+            <div className='flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]'>
+                <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'
+                    >تایید شده</p>
+                )}
+            </div>
+            {children}
+        </div>
+    )
+}
+
+export default Content
@@ -0,0 +1,70 @@
+import CalendarEdit from '@/components/icons/CalendarEdit';
+import { convertToJalali } from '@/helper';
+import { Button, Popover } from '@mui/material'
+import { DatePicker } from 'jalaali-react-date-picker'
+import React, { useState } from 'react'
+
+function DateBirthday({ data, changeData }) {
+
+    const [anchorEl, setAnchorEl] = useState(null);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const open = Boolean(anchorEl);
+    const id = open ? 'simple-popover' : undefined;
+
+    return (
+        <div className='w-full'>
+            <div
+                className="relative w-full border cursor-pointer py-[15px] px-[16px] border-solid border-[#D7D7D7] rounded-[8px] h-[48px]"
+                onClick={handleClick}
+            >
+                <p className='text-[#7E7E7E] text-[14px] font-normal cursor-pointer'>{data.value}</p>
+                <Button
+                    className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
+                >
+                    <CalendarEdit />
+                </Button>
+            </div>
+            <Popover
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                sx={{
+                    '& .MuiPaper-root': {
+                        padding: { xs: '12px 12px 0', sm: '24px 24px 0' },
+                        background: '#FFF',
+                        borderRadius: '16px',
+                        border: '1px solid #E9ECEF',
+                        boxShadow: '0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)'
+                    },
+                }}
+            >
+                <DatePicker
+                    locale='fa'
+                    onChange={e => {
+                        changeData(convertToJalali(e._d), 'value', 'date_of_birth');
+                        handleClose();
+                    }}
+                />
+            </Popover>
+        </div>
+    )
+}
+
+export default DateBirthday
@@ -0,0 +1,86 @@
+import Content from './Content'
+import EditField from '@/app/component/EditField'
+import AutoCompleteSelect from '@/app/component/element/AutoCompleteSelect'
+import DateBirthday from './DateBirthday'
+import { insurance, gender, blood_group, marital_status, education, job } from "./listSelector";
+
+function Form({ data, selected, changeData, updateSelect }) {
+    return (
+        <div className='grid grid-cols-2 gap-[24px]'>
+            <Content title='شماره موبایل' isConfirmed={true}>
+                <EditField 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' />
+            </Content>
+            <Content title='نام و نام خانوادگی' isConfirmed={false}>
+                <EditField iconGray={true} changeData={changeData} data={data?.name} name='name' />
+            </Content>
+            <Content title='جنسیت'>
+                <AutoCompleteSelect
+                    updateData={updateSelect}
+                    label='جنسیت'
+                    name='gender'
+                    list={gender}
+                />
+            </Content>
+            <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' />
+            </Content>
+            <Content title='نوع بیمه'>
+                <AutoCompleteSelect
+                    updateData={updateSelect}
+                    label='نوع بیمه'
+                    name='insurance'
+                    list={insurance}
+                />
+            </Content>
+            <Content title='شماره بیمه' isConfirmed={false}>
+                <EditField iconGray={true} changeData={changeData} data={data?.insurance_number} name='insurance_number' />
+            </Content>
+            <Content title='گروه خونی'>
+                <AutoCompleteSelect
+                    updateData={updateSelect}
+                    label='گروه خونی'
+                    name='blood_group'
+                    list={blood_group}
+                />
+            </Content>
+            <Content title='وضعیت تاهل'>
+                <AutoCompleteSelect
+                    updateData={updateSelect}
+                    label='وضعیت تاهل'
+                    name='marital_status'
+                    list={marital_status}
+                />
+            </Content>
+            <Content title='تلفن منزل' isConfirmed={false}>
+                <EditField iconGray={true} changeData={changeData} data={data?.home_phone} name='home_phone' />
+            </Content>
+            <Content title='تحصیلات'>
+                <AutoCompleteSelect
+                    updateData={updateSelect}
+                    label='تحصیلات'
+                    name='education'
+                    list={education}
+                />
+            </Content>
+            <Content title='شغل'>
+                <AutoCompleteSelect
+                    updateData={updateSelect}
+                    label='شغل'
+                    name='job'
+                    list={job}
+                />
+            </Content>
+            <Content title='تلفن محل کار' isConfirmed={false}>
+                <EditField iconGray={true} changeData={changeData} data={data?.work_phone} name='work_phone' />
+            </Content>
+        </div>
+    )
+}
+
+export default Form
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import Form from "./Form";
+import { Button } from "@mui/material";
+import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
+
+function DetailUser({ user }) {
+
+    const [data, setData] = useState({
+        phone: { value: user.phone, isEdit: false },
+        national_code: { value: user.national_code, isEdit: false },
+        name: { value: user.name, isEdit: false },
+        date_of_birth: { value: user.date_of_birth, isEdit: false },
+        father_name: { value: user.father_name, isEdit: false },
+        insurance_number: { value: user.insurance_number, isEdit: false },
+        home_phone: { value: user.home_phone, isEdit: false },
+        work_phone: { value: user.work_phone, isEdit: false },
+    });
+    const [selected, setSelected] = useState({
+        gender: '',
+        blood_group: '',
+        insurance: '',
+        marital_status: '',
+        education: '',
+        job: '',
+    });
+
+    const changeData = (value, type, name) =>
+        setData({
+            ...data,
+            [name]: {
+                ...data[name],
+                [type]: value
+            }
+        });
+
+    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
+
+    return (
+        <div className="opacity-page">
+            <Form
+                data={data}
+                selected={selected}
+                changeData={changeData}
+                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"
+            >
+                ثبت اطلاعات
+                <ArrowLeftWhiteD />
+            </Button>
+        </div>
+    )
+}
+
+export default DetailUser
@@ -0,0 +1,34 @@
+export const gender = [
+    { label: 'مرد', id: 10 },
+    { label: 'زن', id: 20 }
+];
+
+export const blood_group = [
+    { label: 'A+', id: 10 },
+    { label: 'B+', id: 20 },
+    { label: 'AB', id: 30 },
+    { label: 'O+', id: 40 }
+];
+
+export const marital_status = [
+    { label: 'متاهل', id: 10 },
+    { label: 'مجرد', id: 20 }
+]
+
+export const education = [
+    { label: 'دیپلم', id: 10 },
+    { label: 'فوق دیپلم', id: 20 },
+    { label: 'لیسانس', id: 30 },
+    { label: 'کارشناسی ارشد', id: 40 }
+]
+
+export const job = [
+    { label: 'آزاد', id: 10 },
+    { label: 'دولتی', id: 20 },
+]
+
+export const insurance = [
+    { label: 'بیمه 1', id: 10 },
+    { label: 'بیمه 2', id: 20 },
+    { label: 'بیمه 3', id: 30 }
+];
@@ -0,0 +1,7 @@
+function Messages() {
+    return (
+        <div>Messages</div>
+    )
+}
+
+export default Messages
@@ -0,0 +1,57 @@
+import CustomTable from "@/app/component/CustomTable";
+import { TableCell, TableRow } from "@mui/material";
+import Image from "next/image";
+
+function List({ user }) {
+
+    const tableHead = ['ردیف', 'شناسه', 'نام پزشک', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'وضعیت']
+    const centerTable = [0, 4, 5];
+
+    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={`
+                                    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]'}
+                                `}
+                                variant='text'
+                            >
+                                {row.status === 'success' ? 'پرداخت شده' :
+                                    row.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
+                            </div>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </CustomTable>
+        </div>
+    )
+}
+
+export default List
@@ -0,0 +1,12 @@
+import List from "./List";
+
+function Transactions({ user }) {
+    return (
+        <div className="opacity-page">
+            <p className="text-[#3B3B3B] text-[16px] font-bold">تاریخچه تراکنش ها</p>
+            <List user={user} />
+        </div>
+    )
+}
+
+export default Transactions
@@ -0,0 +1,22 @@
+import { Button } from '@mui/material'
+
+function Head() {
+    return (
+        <div className="flex items-center justify-start gap-[32px] mt-[30px]">
+            <Button
+                className='!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'
+                variant='outlined'
+            >
+                نوبت های انجام شده
+            </Button>
+        </div>
+    )
+}
+
+export default Head
@@ -0,0 +1,55 @@
+import CustomTable from '@/app/component/CustomTable';
+import ArrowLeftBlueD from '@/components/icons/ArrowLeftBlueD'
+import { Button, TableCell, TableRow } from '@mui/material'
+import Image from 'next/image'
+
+function List({ user }) {
+
+    const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'عملیات']
+    const centerTable = [0, 5];
+
+
+    return (
+        <div className='!mt-[24px]'>
+            <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]'
+                                variant='text'
+                            >
+                                مشاهده جزئیات
+                                <ArrowLeftBlueD />
+                            </Button>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </CustomTable>
+        </div>
+    )
+}
+
+export default List
@@ -0,0 +1,14 @@
+import Head from "./Head";
+import List from "./List";
+
+function Turns({ user }) {
+    return (
+        <div className="opacity-page">
+            <p className="text-[#3B3B3B] text-[16px] font-bold">تاریخچه نوبت ها</p>
+            <Head />
+            <List user={user} />
+        </div>
+    )
+}
+
+export default Turns