design dashboard comments & messages & modals

2024-09-04 03:00:36 +03:30
parent bc47663002
commit 52a745fcb8
34 changed files with 669 additions and 128 deletions
@@ -0,0 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+
+import userData from '@/data/userData.json';
+import DashboardPage from "@/components/dashboard";
+import UserAccountPage from "@/components/dashboard/userAccount/UserAccount";
+
+function UserAccount() {
+
+    const [value, setValue] = useState(0);
+
+    return (
+        <DashboardPage
+            value={value}
+            setValue={setValue}
+            user={userData.data}
+        >
+            <UserAccountPage
+                value={value}
+                setValue={setValue}
+                user={userData.data}
+            />
+        </DashboardPage>
+    )
+}
+
+export default UserAccount
@@ -1,13 +0,0 @@
-import userData from '@/data/userData.json';
-import DashboardPage from "@/components/dashboard";
-import UserAccountPage from "@/components/dashboard/userAccount/UserAccount";
-
-function UserAccount() {
-    return (
-        <DashboardPage user={userData.data} >
-            <UserAccountPage user={userData.data} />
-        </DashboardPage>
-    )
-}
-
-export default UserAccount
@@ -28,7 +28,7 @@ function SuccessPay({ setStep }) {
                        </div>
                        <span className="w-full block h-px bg-[#EFEFEF]"></span>
                    </div>
-                    <Link href='/dashboard/user-account'>
+                    <Link href='/dashboard'>
                        <Button
                            variant="text"
                            className="!flex !items-center !justify-center !gap-[4px]"
@@ -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>
@@ -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>
    )
 }
@@ -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>
@@ -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>
    )
 }
@@ -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>
    )
 }
@@ -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}
@@ -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
@@ -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
@@ -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>
    )
 }

@@ -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'
                            >
                                مشاهده جزئیات
@@ -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>
    )
 }
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,18 @@
+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" />
+        </svg>
+    )
+}
+
+export default CalendarD
@@ -0,0 +1,9 @@
+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" />
+        </svg>
+    )
+}
+
+export default CallD
@@ -1,16 +1,16 @@
-function CalndarD() {
+function CalndarD({ active }) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d="M8 2V5" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M16 2V5" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M3.5 9.09H20.5" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M15.6937 13.7H15.7027" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M15.6937 16.7H15.7027" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M11.9945 13.7H12.0035" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M11.9945 16.7H12.0035" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M8.29529 13.7H8.30427" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M8.29529 16.7H8.30427" stroke="#616161" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <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" />
+            <path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M15.6937 13.7H15.7027" stroke={active ? '#5559CE' : '#616161'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M15.6937 16.7H15.7027" stroke={active ? '#5559CE' : '#616161'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M11.9945 13.7H12.0035" stroke={active ? '#5559CE' : '#616161'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M11.9945 16.7H12.0035" stroke={active ? '#5559CE' : '#616161'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M8.29529 13.7H8.30427" stroke={active ? '#5559CE' : '#616161'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M8.29529 16.7H8.30427" stroke={active ? '#5559CE' : '#616161'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
    )
 }
@@ -1,10 +1,10 @@
-function CardD() {
+function CardD({ active }) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d="M2 8.50496H22" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M6 16.505H8" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M10.5 16.505H14.5" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M6.44 3.50496H17.55C21.11 3.50496 22 4.38496 22 7.89496V16.105C22 19.615 21.11 20.495 17.56 20.495H6.44C2.89 20.505 2 19.625 2 16.115V7.89496C2 4.38496 2.89 3.50496 6.44 3.50496Z" stroke="#616161" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M2 8.50496H22" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6 16.505H8" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10.5 16.505H14.5" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6.44 3.50496H17.55C21.11 3.50496 22 4.38496 22 7.89496V16.105C22 19.615 21.11 20.495 17.56 20.495H6.44C2.89 20.505 2 19.625 2 16.115V7.89496C2 4.38496 2.89 3.50496 6.44 3.50496Z" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
    )
 }
@@ -0,0 +1,11 @@
+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" />
+        </svg>
+    )
+}
+
+export default EditTurnsD
@@ -1,9 +1,9 @@
-function LogoutD() {
+function LogoutD({ active }) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d="M17.4414 14.62L20.0014 12.06L17.4414 9.5" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M9.76172 12.06H19.9317" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M11.7617 20C7.34172 20 3.76172 17 3.76172 12C3.76172 7 7.34172 4 11.7617 4" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M17.4414 14.62L20.0014 12.06L17.4414 9.5" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9.76172 12.06H19.9317" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M11.7617 20C7.34172 20 3.76172 17 3.76172 12C3.76172 7 7.34172 4 11.7617 4" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
    )
 }
@@ -1,8 +1,8 @@
-function MessageD() {
+function MessageD({ active }) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d="M22 6.25V11.35C22 12.62 21.58 13.69 20.83 14.43C20.09 15.18 19.02 15.6 17.75 15.6V17.41C17.75 18.09 16.99 18.5 16.43 18.12L15.46 17.48C15.55 17.17 15.59 16.83 15.59 16.47V12.4C15.59 10.36 14.23 9 12.19 9H5.39999C5.25999 9 5.13 9.01002 5 9.02002V6.25C5 3.7 6.7 2 9.25 2H17.75C20.3 2 22 3.7 22 6.25Z" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M15.59 12.4V16.47C15.59 16.83 15.55 17.17 15.46 17.48C15.09 18.95 13.87 19.87 12.19 19.87H9.47L6.45 21.88C6 22.19 5.39999 21.86 5.39999 21.32V19.87C4.37999 19.87 3.53 19.53 2.94 18.94C2.34 18.34 2 17.49 2 16.47V12.4C2 10.5 3.18 9.19002 5 9.02002C5.13 9.01002 5.25999 9 5.39999 9H12.19C14.23 9 15.59 10.36 15.59 12.4Z" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M22 6.25V11.35C22 12.62 21.58 13.69 20.83 14.43C20.09 15.18 19.02 15.6 17.75 15.6V17.41C17.75 18.09 16.99 18.5 16.43 18.12L15.46 17.48C15.55 17.17 15.59 16.83 15.59 16.47V12.4C15.59 10.36 14.23 9 12.19 9H5.39999C5.25999 9 5.13 9.01002 5 9.02002V6.25C5 3.7 6.7 2 9.25 2H17.75C20.3 2 22 3.7 22 6.25Z" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M15.59 12.4V16.47C15.59 16.83 15.55 17.17 15.46 17.48C15.09 18.95 13.87 19.87 12.19 19.87H9.47L6.45 21.88C6 22.19 5.39999 21.86 5.39999 21.32V19.87C4.37999 19.87 3.53 19.53 2.94 18.94C2.34 18.34 2 17.49 2 16.47V12.4C2 10.5 3.18 9.19002 5 9.02002C5.13 9.01002 5.25999 9 5.39999 9H12.19C14.23 9 15.59 10.36 15.59 12.4Z" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
    )
 }
@@ -0,0 +1,13 @@
+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" />
+        </svg>
+    )
+}
+
+export default MessageNotifd
@@ -1,9 +1,9 @@
-function NotificationD() {
+function NotificationD({ active }) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d="M12.0199 20.53C9.68987 20.53 7.35987 20.16 5.14987 19.42C4.30987 19.13 3.66987 18.54 3.38987 17.77C3.09987 17 3.19987 16.15 3.65987 15.39L4.80987 13.48C5.04987 13.08 5.26987 12.28 5.26987 11.81V8.92C5.26987 5.2 8.29987 2.17 12.0199 2.17C15.7399 2.17 18.7699 5.2 18.7699 8.92V11.81C18.7699 12.27 18.9899 13.08 19.2299 13.49L20.3699 15.39C20.7999 16.11 20.8799 16.98 20.5899 17.77C20.2999 18.56 19.6699 19.16 18.8799 19.42C16.6799 20.16 14.3499 20.53 12.0199 20.53ZM12.0199 3.67C9.12987 3.67 6.76987 6.02 6.76987 8.92V11.81C6.76987 12.54 6.46987 13.62 6.09987 14.25L4.94987 16.16C4.72987 16.53 4.66987 16.92 4.79987 17.25C4.91987 17.59 5.21987 17.85 5.62987 17.99C9.80987 19.39 14.2399 19.39 18.4199 17.99C18.7799 17.87 19.0599 17.6 19.1899 17.24C19.3199 16.88 19.2899 16.49 19.0899 16.16L17.9399 14.25C17.5599 13.6 17.2699 12.53 17.2699 11.8V8.92C17.2699 6.02 14.9199 3.67 12.0199 3.67Z" fill="#616161" />
-            <path d="M13.8806 3.93999C13.8106 3.93999 13.7406 3.92999 13.6706 3.90999C13.3806 3.82999 13.1006 3.76999 12.8306 3.72999C11.9806 3.61999 11.1606 3.67999 10.3906 3.90999C10.1106 3.99999 9.8106 3.90999 9.6206 3.69999C9.4306 3.48999 9.3706 3.18999 9.4806 2.91999C9.8906 1.86999 10.8906 1.17999 12.0306 1.17999C13.1706 1.17999 14.1706 1.85999 14.5806 2.91999C14.6806 3.18999 14.6306 3.48999 14.4406 3.69999C14.2906 3.85999 14.0806 3.93999 13.8806 3.93999Z" fill="#616161" />
-            <path d="M12.0195 22.81C11.0295 22.81 10.0695 22.41 9.36953 21.71C8.66953 21.01 8.26953 20.05 8.26953 19.06H9.76953C9.76953 19.65 10.0095 20.23 10.4295 20.65C10.8495 21.07 11.4295 21.31 12.0195 21.31C13.2595 21.31 14.2695 20.3 14.2695 19.06H15.7695C15.7695 21.13 14.0895 22.81 12.0195 22.81Z" fill="#616161" />
+            <path d="M12.0199 20.53C9.68987 20.53 7.35987 20.16 5.14987 19.42C4.30987 19.13 3.66987 18.54 3.38987 17.77C3.09987 17 3.19987 16.15 3.65987 15.39L4.80987 13.48C5.04987 13.08 5.26987 12.28 5.26987 11.81V8.92C5.26987 5.2 8.29987 2.17 12.0199 2.17C15.7399 2.17 18.7699 5.2 18.7699 8.92V11.81C18.7699 12.27 18.9899 13.08 19.2299 13.49L20.3699 15.39C20.7999 16.11 20.8799 16.98 20.5899 17.77C20.2999 18.56 19.6699 19.16 18.8799 19.42C16.6799 20.16 14.3499 20.53 12.0199 20.53ZM12.0199 3.67C9.12987 3.67 6.76987 6.02 6.76987 8.92V11.81C6.76987 12.54 6.46987 13.62 6.09987 14.25L4.94987 16.16C4.72987 16.53 4.66987 16.92 4.79987 17.25C4.91987 17.59 5.21987 17.85 5.62987 17.99C9.80987 19.39 14.2399 19.39 18.4199 17.99C18.7799 17.87 19.0599 17.6 19.1899 17.24C19.3199 16.88 19.2899 16.49 19.0899 16.16L17.9399 14.25C17.5599 13.6 17.2699 12.53 17.2699 11.8V8.92C17.2699 6.02 14.9199 3.67 12.0199 3.67Z" fill={active ? '#5559CE' : '#616161'} />
+            <path d="M13.8806 3.93999C13.8106 3.93999 13.7406 3.92999 13.6706 3.90999C13.3806 3.82999 13.1006 3.76999 12.8306 3.72999C11.9806 3.61999 11.1606 3.67999 10.3906 3.90999C10.1106 3.99999 9.8106 3.90999 9.6206 3.69999C9.4306 3.48999 9.3706 3.18999 9.4806 2.91999C9.8906 1.86999 10.8906 1.17999 12.0306 1.17999C13.1706 1.17999 14.1706 1.85999 14.5806 2.91999C14.6806 3.18999 14.6306 3.48999 14.4406 3.69999C14.2906 3.85999 14.0806 3.93999 13.8806 3.93999Z" fill={active ? '#5559CE' : '#616161'} />
+            <path d="M12.0195 22.81C11.0295 22.81 10.0695 22.41 9.36953 21.71C8.66953 21.01 8.26953 20.05 8.26953 19.06H9.76953C9.76953 19.65 10.0095 20.23 10.4295 20.65C10.8495 21.07 11.4295 21.31 12.0195 21.31C13.2595 21.31 14.2695 20.3 14.2695 19.06H15.7695C15.7695 21.13 14.0895 22.81 12.0195 22.81Z" fill={active ? '#5559CE' : '#616161'} />
        </svg>
    )
 }
@@ -1,10 +1,8 @@
-import React from 'react'
-
-function ProfileD() {
+function ProfileD({ active }) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d="M12.1586 10.87C12.0586 10.86 11.9386 10.86 11.8286 10.87C9.44859 10.79 7.55859 8.84 7.55859 6.44C7.55859 3.99 9.53859 2 11.9986 2C14.4486 2 16.4386 3.99 16.4386 6.44C16.4286 8.84 14.5386 10.79 12.1586 10.87Z" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M7.15875 14.56C4.73875 16.18 4.73875 18.82 7.15875 20.43C9.90875 22.27 14.4188 22.27 17.1688 20.43C19.5888 18.81 19.5888 16.17 17.1688 14.56C14.4288 12.73 9.91875 12.73 7.15875 14.56Z" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12.1586 10.87C12.0586 10.86 11.9386 10.86 11.8286 10.87C9.44859 10.79 7.55859 8.84 7.55859 6.44C7.55859 3.99 9.53859 2 11.9986 2C14.4486 2 16.4386 3.99 16.4386 6.44C16.4286 8.84 14.5386 10.79 12.1586 10.87Z" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M7.15875 14.56C4.73875 16.18 4.73875 18.82 7.15875 20.43C9.90875 22.27 14.4188 22.27 17.1688 20.43C19.5888 18.81 19.5888 16.17 17.1688 14.56C14.4288 12.73 9.91875 12.73 7.15875 14.56Z" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
    )
 }
@@ -0,0 +1,10 @@
+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" />
+        </svg>
+    )
+}
+
+export default TicketD
@@ -0,0 +1,13 @@
+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" />
+        </svg>
+    )
+}
+
+export default TrashOrangeD
@@ -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 }) {
+function Layout({ children, title, name, disableFooter, isSidebar, user, value, setValue }) {

    useEffect(() => {
        Aos.init({ duration: 1000 });
@@ -31,6 +31,8 @@ function Layout({ children, title, name, disableFooter, isSidebar, user }) {
                    {isSidebar && (
                        <Sidebar
                            user={user}
+                            value={value}
+                            setValue={setValue}
                        />
                    )}
                    {children}
@@ -5,20 +5,17 @@ import MessageD from "@/components/icons/MessageD";
 import ProfileD from "@/components/icons/ProfileD";
 import NotificationD from "@/components/icons/NotificationD";
 import { Button } from "@mui/material";
-import { useState } from "react";

-const listMenu = [
-    { name: 'حساب کاربری', icon: <ProfileD /> },
-    { name: 'نوبت های من', icon: <CalndarD /> },
-    { name: 'تراکنش های من', icon: <CardD /> },
-    { name: 'نظرات من', icon: <MessageD /> },
-    { name: 'پیام ها', icon: <NotificationD /> },
-    { name: 'خروج', icon: <LogoutD /> },
-]
+function List({ value, setValue }) {

-function List() {
-
-    const [active, setActive] = useState(0);
+    const listMenu = [
+        { name: 'حساب کاربری', icon: <ProfileD active={value === 0} /> },
+        { name: 'نوبت های من', icon: <CalndarD active={value === 1} /> },
+        { name: 'تراکنش های من', icon: <CardD active={value === 2} /> },
+        { name: 'نظرات من', icon: <MessageD active={value === 3} /> },
+        { name: 'پیام ها', icon: <NotificationD active={value === 4} /> },
+        { name: 'خروج', icon: <LogoutD active={value === 5} /> },
+    ];

    return (
        <ul className="flex flex-col items-start justify-start w-full">
@@ -31,17 +28,17 @@ function List() {
                        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
                            before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
-                            ${active === idx ?
+                            ${value === idx ?
                                'before:!bg-[#5559CE]' :
                                'before:!bg-transparent'
                            }`}
-                        variant=""
+                        onClick={() => setValue(idx)}
                    >
                        {item.icon}
                        <p
                            className={`
                                text-[16px] 
-                                ${active === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
+                                ${value === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
                            `}
                        >{item.name}</p>
                    </Button>
@@ -1,17 +1,36 @@
+import { useState } from "react"
 import Head from "./Head"
 import List from "./List"

-function Sidebar({ user }) {
+function Sidebar({ user, value, setValue }) {
+
+    const [open, setOpen] = useState(false);
+
    return (
-        <aside
-            className="h-fit lg:h-screen w-full lg:w-[39%]"
-        >
-            <div className="sticky pt-[10px] pb-[26px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] 
-            min-w-[288px] top-[calc(12px_+_58px_+_32px)] sm:top-[calc(21px_+_58px_+_45px)] md:top-[calc(30px_+_58px_+_58px)] lg:top-[calc(40px_+_58px_+_78px)]">
-                <Head user={user} />
-                <List user={user} />
-            </div>
-        </aside>
+        // ${open ? 'lg:w-[39%]' : 'min-w-[80px]'}
+        <div className="flex-1 w-[28%]">
+
+            <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)]"
+            >
+                <div className="
+                
+                pt-[10px] pb-[26px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] 
+               
+            ">
+                    <Head user={user} />
+                    <List
+                        user={user}
+                        value={value}
+                        setValue={setValue}
+                    />
+                </div>
+            </aside>
+        </div>
    )
 }

@@ -24,19 +24,27 @@
                "id": 12345678,
                "status": "success",
                "expertise": "دندان پزشکی",
+                "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد 12",
+                "phone": 6133916589,
+                "date_turn": "13 خرداد 1403",
                "date": "1403-03-27",
                "time": "15:30",
-                "amount": "2350000"
+                "amount": "2350000",
+                "amount_paid": 20000
            },
            {
-                "name": "دنیا خلیلی",
-                "image": "/assets/images/doctor-1.png",
+                "name": "علی بدیعی زاده",
+                "image": "/assets/images/doctor.png",
                "id": 12345678,
                "status": "success",
                "expertise": "دندان پزشکی",
+                "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد 12",
+                "phone": 6133916589,
+                "date_turn": "13 خرداد 1403",
                "date": "1403-03-27",
                "time": "16:30",
-                "amount": "2350000"
+                "amount": "2350000",
+                "amount_paid": 20000
            },
            {
                "name": "دنیا خلیلی",
@@ -44,9 +52,13 @@
                "id": 12345678,
                "status": "pending",
                "expertise": "دندان پزشکی",
+                "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد 12",
+                "phone": 6133916589,
+                "date_turn": "13 خرداد 1403",
                "date": "1403-03-27",
                "time": "17:30",
-                "amount": "2350000"
+                "amount": "2350000",
+                "amount_paid": 20000
            },
            {
                "name": "دنیا خلیلی",
@@ -54,9 +66,13 @@
                "id": 12345678,
                "status": "pending",
                "expertise": "دندان پزشکی",
+                "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد 12",
+                "phone": 6133916589,
+                "date_turn": "13 خرداد 1403",
                "date": "1403-03-27",
                "time": "18:30",
-                "amount": "2350000"
+                "amount": "2350000",
+                "amount_paid": 20000
            },
            {
                "name": "دنیا خلیلی",
@@ -64,15 +80,22 @@
                "id": 12345678,
                "status": "failed",
                "expertise": "دندان پزشکی",
+                "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد 12",
+                "phone": 6133916589,
+                "date_turn": "13 خرداد 1403",
                "date": "1403-03-27",
                "time": "19:30",
-                "amount": "2350000"
+                "amount": "2350000",
+                "amount_paid": 20000
            }
        ],
        "comments": [
            {
                "id": 1,
                "is_open_answer": false,
+                "name_doctor": "دکتر مهران امینی",
+                "date": "1403-03-27",
+                "expertise": "چشم پزشکی",
                "profile": "/assets/images/doctor.png",
                "name": "میثم امیری",
                "location": "اهواز _ خوزستان",
@@ -94,6 +117,9 @@
                    {
                        "id": 1,
                        "is_open_answer": false,
+                        "name_doctor": "دکتر مهران امینی",
+                        "date": "1403-03-27",
+                        "expertise": "چشم پزشکی",
                        "profile": "/assets/images/doctor.png",
                        "name": "میثم امیری",
                        "location": "اهواز _ خوزستان",
@@ -109,13 +135,16 @@
                            "information": 5,
                            "location": 4,
                            "security": 4,
-                            "value": 3
+                            "value": 4
                        },
                        "replays": []
                    },
                    {
                        "id": 2,
                        "is_open_answer": false,
+                        "name_doctor": "دکتر مهران امینی",
+                        "date": "1403-03-27",
+                        "expertise": "چشم پزشکی",
                        "profile": "/assets/images/doctor.png",
                        "name": "میثم امیری",
                        "location": "اهواز _ خوزستان",
@@ -131,13 +160,16 @@
                            "information": 5,
                            "location": 4,
                            "security": 4,
-                            "value": 3
+                            "value": 2
                        },
                        "replays": []
                    },
                    {
                        "id": 3,
                        "is_open_answer": false,
+                        "name_doctor": "دکتر مهران امینی",
+                        "date": "1403-03-27",
+                        "expertise": "چشم پزشکی",
                        "profile": "/assets/images/doctor.png",
                        "name": "میثم امیری",
                        "location": "اهواز _ خوزستان",
@@ -153,7 +185,7 @@
                            "information": 5,
                            "location": 4,
                            "security": 4,
-                            "value": 3
+                            "value": 5
                        },
                        "replays": []
                    }
@@ -162,6 +194,9 @@
            {
                "id": 2,
                "is_open_answer": false,
+                "name_doctor": "دکتر مهران امینی",
+                "date": "1403-03-27",
+                "expertise": "چشم پزشکی",
                "profile": "/assets/images/doctor.png",
                "name": "ساغر صابری",
                "location": "اهواز _ خوزستان",
@@ -184,6 +219,9 @@
            {
                "id": 3,
                "is_open_answer": false,
+                "name_doctor": "دکتر مهران امینی",
+                "date": "1403-03-27",
+                "expertise": "چشم پزشکی",
                "profile": "/assets/images/doctor.png",
                "name": "ساغر صابری",
                "location": "اهواز _ خوزستان",
@@ -206,6 +244,9 @@
            {
                "id": 4,
                "is_open_answer": false,
+                "name_doctor": "دکتر مهران امینی",
+                "date": "1403-03-27",
+                "expertise": "چشم پزشکی",
                "profile": "/assets/images/doctor.png",
                "name": "ساغر صابری",
                "location": "اهواز _ خوزستان",
@@ -227,6 +268,9 @@
                    {
                        "id": 1,
                        "is_open_answer": false,
+                        "name_doctor": "دکتر مهران امینی",
+                        "date": "1403-03-27",
+                        "expertise": "چشم پزشکی",
                        "profile": "/assets/images/doctor.png",
                        "name": "میثم امیری",
                        "location": "اهواز _ خوزستان",
@@ -249,6 +293,9 @@
                    {
                        "id": 2,
                        "is_open_answer": false,
+                        "name_doctor": "دکتر مهران امینی",
+                        "date": "1403-03-27",
+                        "expertise": "چشم پزشکی",
                        "profile": "/assets/images/doctor.png",
                        "name": "میثم امیری",
                        "location": "اهواز _ خوزستان",
@@ -271,6 +318,9 @@
                    {
                        "id": 3,
                        "is_open_answer": false,
+                        "name_doctor": "دکتر مهران امینی",
+                        "date": "1403-03-27",
+                        "expertise": "چشم پزشکی",
                        "profile": "/assets/images/doctor.png",
                        "name": "میثم امیری",
                        "location": "اهواز _ خوزستان",
@@ -295,6 +345,9 @@
            {
                "id": 5,
                "is_open_answer": false,
+                "name_doctor": "دکتر مهران امینی",
+                "date": "1403-03-27",
+                "expertise": "چشم پزشکی",
                "profile": "/assets/images/doctor.png",
                "name": "ساغر صابری",
                "location": "اهواز _ خوزستان",
@@ -317,6 +370,9 @@
            {
                "id": 6,
                "is_open_answer": false,
+                "name_doctor": "دکتر مهران امینی",
+                "date": "1403-03-27",
+                "expertise": "چشم پزشکی",
                "profile": "/assets/images/doctor.png",
                "name": "ساغر صابری",
                "location": "اهواز _ خوزستان",
@@ -338,6 +394,9 @@
                    {
                        "id": 1,
                        "is_open_answer": false,
+                        "name_doctor": "دکتر مهران امینی",
+                        "date": "1403-03-27",
+                        "expertise": "چشم پزشکی",
                        "profile": "/assets/images/doctor.png",
                        "name": "میثم امیری",
                        "location": "اهواز _ خوزستان",
@@ -360,6 +419,9 @@
                    {
                        "id": 2,
                        "is_open_answer": false,
+                        "name_doctor": "دکتر مهران امینی",
+                        "date": "1403-03-27",
+                        "expertise": "چشم پزشکی",
                        "profile": "/assets/images/doctor.png",
                        "name": "میثم امیری",
                        "location": "اهواز _ خوزستان",
@@ -382,6 +444,9 @@
                    {
                        "id": 3,
                        "is_open_answer": false,
+                        "name_doctor": "دکتر مهران امینی",
+                        "date": "1403-03-27",
+                        "expertise": "چشم پزشکی",
                        "profile": "/assets/images/doctor.png",
                        "name": "میثم امیری",
                        "location": "اهواز _ خوزستان",
@@ -406,6 +471,9 @@
            {
                "id": 7,
                "is_open_answer": false,
+                "name_doctor": "دکتر مهران امینی",
+                "date": "1403-03-27",
+                "expertise": "چشم پزشکی",
                "profile": "/assets/images/doctor.png",
                "name": "ساغر صابری",
                "location": "اهواز _ خوزستان",
@@ -428,6 +496,9 @@
            {
                "id": 8,
                "is_open_answer": false,
+                "name_doctor": "دکتر مهران امینی",
+                "date": "1403-03-27",
+                "expertise": "چشم پزشکی",
                "profile": "/assets/images/doctor.png",
                "name": "ساغر صابری",
                "location": "اهواز _ خوزستان",
@@ -450,6 +521,9 @@
            {
                "id": 9,
                "is_open_answer": false,
+                "name_doctor": "دکتر مهران امینی",
+                "date": "1403-03-27",
+                "expertise": "چشم پزشکی",
                "profile": "/assets/images/doctor.png",
                "name": "ساغر صابری",
                "location": "اهواز _ خوزستان",
@@ -472,6 +546,9 @@
            {
                "id": 10,
                "is_open_answer": false,
+                "name_doctor": "دکتر مهران امینی",
+                "date": "1403-03-27",
+                "expertise": "چشم پزشکی",
                "profile": "/assets/images/doctor.png",
                "name": "ساغر صابری",
                "location": "اهواز _ خوزستان",
@@ -491,6 +568,40 @@
                },
                "replays": []
            }
+        ],
+        "messages": [
+            {
+                "text": "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.",
+                "date": "1402/11/13"
+            },
+            {
+                "text": "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.",
+                "date": "1402/11/14"
+            },
+            {
+                "text": "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.",
+                "date": "1402/11/15"
+            },
+            {
+                "text": "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.",
+                "date": "1402/11/16"
+            },
+            {
+                "text": "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.",
+                "date": "1402/11/17"
+            },
+            {
+                "text": "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.",
+                "date": "1402/11/18"
+            },
+            {
+                "text": "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.",
+                "date": "1402/11/19"
+            },
+            {
+                "text": "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.",
+                "date": "1402/11/20"
+            }
        ]
    }
 }