ticket

src/components/DefaulModal.tsx

@@ -45,7 +45,7 @@ const DefaulModal: FC<Props> = (props: Props) => {
                             </div>
                         </div>
 
-                        <div onClick={props.close} className='fixed modalGlass inset-0 z-50 '></div>
+                        <div onClick={props.close} className='fixed size-full bottom-0 right-0 modalGlass inset-0 z-50 '></div>
                     </Fragment>
                 )
             }

src/components/ServiceSection.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+
+const ServiceSection: FC = () => {
+    return (
+        <div className='flex gap-4'>
+            <div className='size-10 rounded-xl bg-green-300'></div>
+            <div>
+                <div className='text-sm'>
+                    دی منو
+                </div>
+                <div className='text-xs text-description'>
+                    منو رستوران
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ServiceSection

src/components/StatusCircle.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+
+type Props = {
+    color: string
+}
+
+const StatusCircle: FC<Props> = (props: Props) => {
+    return (
+        <div style={{ background: props.color }} className='size-1.5 rounded-full'>
+
+        </div>
+    )
+}
+
+export default StatusCircle

src/components/Tabs.tsx

@@ -0,0 +1,38 @@
+import { FC, ReactNode } from 'react'
+import { clx } from '../helpers/utils'
+
+type Item = {
+    icon: ReactNode,
+    label: string,
+    value: string,
+}
+
+type Props = {
+    items: Item[],
+    onChange: (value: string) => void,
+    active: string,
+}
+
+const Tabs: FC<Props> = (props: Props) => {
+    return (
+        <div className='px-10  w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white bg-opacity-45'>
+            {
+                props.items.map((item: Item) => {
+                    return (
+                        <div onClick={() => props.onChange(item.value)} key={item.value} className={clx(
+                            'flex flex-col items-center gap-2 cursor-pointer',
+                            props.active === item.value && 'text-black'
+                        )}>
+                            {item.icon}
+                            <div className='text-xs'>
+                                {item.label}
+                            </div>
+                        </div>
+                    )
+                })
+            }
+        </div>
+    )
+}
+
+export default Tabs

src/components/Td.tsx

@@ -0,0 +1,22 @@
+import { FC, ReactNode } from 'react'
+
+interface Props {
+    text: string,
+    children?: ReactNode,
+    dir?: string,
+}
+
+const Td: FC<Props> = (props: Props) => {
+    return (
+        <td className='td' style={{ direction: props.dir === "ltr" ? "ltr" : "rtl" }}>
+            {
+                props.text ?
+                    props.text
+                    :
+                    props.children
+            }
+        </td>
+    )
+}
+
+export default Td

src/index.css

@@ -34,6 +34,28 @@ textarea::placeholder {
   .rowTwoInput {
     @apply flex flex-col sm:flex-row sm:gap-5 gap-5;
   }
+  .td {
+    @apply px-6 py-4 whitespace-nowrap text-xs;
+  }
+  .thead {
+    @apply h-[69px] bg-white text-sm text-[#8C90A3] rounded-3xl overflow-hidden;
+  }
+  .tr {
+    @apply w-full h-[74px] bg-white border-t border-[#EAEDF5] hover:bg-secondary;
+  }
+}
+
+tbody tr {
+  background-color: white;
+}
+
+.thead tr td:first-child {
+  border-top-right-radius: 23px;
+  /* border-bottom-right-radius: 23px; */
+}
+.thead tr td:last-child {
+  border-top-left-radius: 23px;
+  /* border-bottom-left-radius: 23px; */
 }
 .rmdp-input {
   min-height: 40px;

src/langs/fa.json

@@ -75,5 +75,25 @@
     "see_all": "دیدن همه",
     "create_new_access": "ایجاد دسترسی سریع"
   },
-  "all": "همه"
+  "all": "همه",
+  "service": {
+    "my_service": "سرویس های من",
+    "search": "جستجو در سرویس ها",
+    "active_menu": "منو فعال"
+  },
+  "ticket": {
+    "tickets": "تیکت ها",
+    "new_ticket": "تیکت جدید",
+    "answered": "پاسخ داده شده",
+    "checking": "در حال بررسی",
+    "wait_answered": "در انتظار پاسخ",
+    "closed": "بسته شده",
+    "number": "شماره",
+    "title": "عنوان",
+    "team": "تیم",
+    "date": "تاریخ",
+    "status": "وضعیت",
+    "priority": "الویت",
+    "detail": "جزییات"
+  }
 }

src/pages/auth/store/AuthStore.ts

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import { AuthStoreType } from "../auth/types/AuthTypes";
+import { AuthStoreType } from "../../auth/types/AuthTypes";
 
 export const useAuthStore = create<AuthStoreType>((set) => ({
   phone: "",

src/pages/service/MyServices.tsx

@@ -0,0 +1,99 @@
+import { FC } from 'react'
+import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
+import { useTranslation } from 'react-i18next'
+import Input from '../../components/Input'
+import Select from '../../components/Select'
+import ServiceSection from '../../components/ServiceSection'
+import StatusCircle from '../../components/StatusCircle'
+import BannerImage from '../../assets/images/banner.png'
+
+const MyServices: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='w-full flex gap-6 mt-4'>
+            <div className='flex-1'>
+                <div>
+                    {t('service.my_service')}
+                </div>
+
+                <div className='mt-8 flex  gap-6 items-center'>
+                    <div className='w-[300px]'>
+                        <Input
+                            variant='search'
+                            placeholder={t('service.search')}
+                            className='bg-white w-full'
+                        />
+                    </div>
+
+                    <Select
+                        items={[
+                            { label: t('all'), value: 'all' },
+                            { label: 'Active', value: 'active' },
+                            { label: 'Inactive', value: 'inactive' },
+                        ]}
+                        className='max-w-[100px]'
+                    />
+                </div>
+
+                <div className='flex gap-6 items-center mt-8'>
+                    <div className='flex-1 bg-white rounded-3xl p-6'>
+                        <ServiceSection
+                        />
+                        <div className='mt-6 flex gap-1 items-center'>
+                            <StatusCircle
+                                color='#00BA4B'
+                            />
+                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
+                        </div>
+                    </div>
+                    <div className='flex-1 bg-white rounded-3xl p-6'>
+                        <ServiceSection
+                        />
+                        <div className='mt-6 flex gap-1 items-center'>
+                            <StatusCircle
+                                color='#00BA4B'
+                            />
+                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
+                        </div>
+                    </div>
+                    <div className='flex-1 bg-white rounded-3xl p-6'>
+                        <ServiceSection
+                        />
+                        <div className='mt-6 flex gap-1 items-center'>
+                            <StatusCircle
+                                color='#00BA4B'
+                            />
+                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
+                        </div>
+                    </div>
+                    <div className='flex-1 bg-white rounded-3xl p-6'>
+                        <ServiceSection
+                        />
+                        <div className='mt-6 flex gap-1 items-center'>
+                            <StatusCircle
+                                color='#00BA4B'
+                            />
+                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white rounded-3xl overflow-hidden relative'>
+                <img
+                    src={BannerImage}
+                    className='w-full backdrop-blur-[100px] h-[550px] object-cover'
+                />
+
+                <div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
+                    <div className='max-w-[80%] text-sm leading-6 text-white'>
+                        سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default MyServices

src/pages/ticket/TicketList.tsx

@@ -0,0 +1,103 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { Add, Message2, MessageRemove, MessageTick, MessageTime } from 'iconsax-react'
+import Tabs from '../../components/Tabs'
+import Td from '../../components/Td'
+
+const TicketList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [activeTab, setActiveTab] = useState<string>('answered')
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('ticket.tickets')}
+                </div>
+
+                <Button
+                    className='w-[172px]'
+                >
+                    <div className='flex gap-2 items-center'>
+                        <Add size={20} color='white' />
+                        <div>
+                            {t('ticket.new_ticket')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-14'>
+                <Tabs
+                    active={activeTab}
+                    items={[
+                        {
+                            icon: <MessageTick color={activeTab === 'answered' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('ticket.answered'),
+                            value: 'answered'
+                        },
+                        {
+                            icon: <MessageTime color={activeTab === 'checking' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('ticket.checking'),
+                            value: 'checking'
+                        },
+                        {
+                            icon: <Message2 color={activeTab === 'wating' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('ticket.wait_answered'),
+                            value: 'wating'
+                        },
+                        {
+                            icon: <MessageRemove color={activeTab === 'closed' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('ticket.closed'),
+                            value: 'closed'
+                        },
+                    ]}
+                    onChange={setActiveTab}
+                />
+            </div>
+
+            <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                <table className='w-full text-sm '>
+                    <thead className='thead'>
+                        <tr>
+                            <Td text={t('ticket.number')} />
+                            <Td text={t('ticket.title')} />
+                            <Td text={t('ticket.team')} />
+                            <Td text={t('ticket.date')} />
+                            <Td text={t('ticket.status')} />
+                            <Td text={t('ticket.priority')} />
+                            <Td text={t('ticket.detail')} />
+                            <Td text={''} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr className='tr'>
+                            <Td text={t('ticket.number')} />
+                            <Td text={t('ticket.title')} />
+                            <Td text={t('ticket.team')} />
+                            <Td text={t('ticket.date')} />
+                            <Td text={t('ticket.status')} />
+                            <Td text={t('ticket.priority')} />
+                            <Td text={t('ticket.detail')} />
+                            <Td text={''} />
+                        </tr>
+                        <tr className='tr'>
+                            <Td text={t('ticket.number')} />
+                            <Td text={t('ticket.title')} />
+                            <Td text={t('ticket.team')} />
+                            <Td text={t('ticket.date')} />
+                            <Td text={t('ticket.status')} />
+                            <Td text={t('ticket.priority')} />
+                            <Td text={t('ticket.detail')} />
+                            <Td text={''} />
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default TicketList

src/router/Main.tsx

@@ -4,6 +4,8 @@ import Header from '../shared/Header'
 import { Route, Routes } from 'react-router-dom'
 import { Pages } from '../config/Pages'
 import Home from '../pages/home/Home'
+import MyServices from '../pages/service/MyServices'
+import TicketList from '../pages/ticket/TicketList'
 
 const MainRouter: FC = () => {
     return (
@@ -14,6 +16,8 @@ const MainRouter: FC = () => {
                 <div className=' overflow-auto h-[calc(100vh-113px)] '>
                     <Routes>
                         <Route path={Pages.dashboard} element={<Home />} />
+                        <Route path={Pages.services.mine} element={<MyServices />} />
+                        <Route path={Pages.ticket.list} element={<TicketList />} />
                     </Routes>
                 </div>
             </div>