From 2098b9409a214140804d5f5b7d0d10f3eb8a410b Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 25 Jan 2025 15:53:12 +0330
Subject: [PATCH] category ticket

---
 src/config/Pages.ts                     |   3 +-
 src/config/SideBarSubMenu.ts            |   1 +
 src/langs/fa.json                       |  15 ++-
 src/pages/ticket/Category.tsx           | 145 ++++++++++++++++++++++++
 src/router/Main.tsx                     |   2 +
 src/shared/SideBar.tsx                  |   5 +-
 src/shared/components/TicketSubMenu.tsx |  52 +++++++++
 7 files changed, 219 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/ticket/Category.tsx
 create mode 100644 src/shared/components/TicketSubMenu.tsx

diff --git a/src/config/Pages.ts b/src/config/Pages.ts
index bf97d43..1700fb3 100644
--- a/src/config/Pages.ts
+++ b/src/config/Pages.ts
@@ -20,9 +20,10 @@ export const Pages = {
     create: "/receipts/create",
   },
   ticket: {
-    list: "/tickets",
+    list: "/tickets/list",
     create: "/tickets/create",
     detail: "/tickets/messages/",
+    category: "/tickets/category",
   },
   announcement: {
     list: "/announcement",
diff --git a/src/config/SideBarSubMenu.ts b/src/config/SideBarSubMenu.ts
index 8f4557a..0c9c25c 100644
--- a/src/config/SideBarSubMenu.ts
+++ b/src/config/SideBarSubMenu.ts
@@ -4,4 +4,5 @@ export const SideBarItemHasSubMenu = [
   "receipts",
   "users",
   "transactions",
+  "tickets",
 ];
diff --git a/src/langs/fa.json b/src/langs/fa.json
index 7a8152d..f9c8255 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -73,7 +73,10 @@
     "add_service": "افزودن سرویس",
     "service_category": "دسته بندی سرویس ها",
     "customer_list": "لیست مشتریان",
-    "create_customer": "افزودن مشتری"
+    "create_customer": "افزودن مشتری",
+    "ticket_list": "لیست تیکت ها",
+    "send_ticket": "ارسال تیکت",
+    "category": "دسته بندی"
   },
   "header": {
     "search": "جستجو"
@@ -193,8 +196,16 @@
     "send_answer": "ارسال پاسخ",
     "close_ticket": "بستن تیکت",
     "info_ticket": "اطلاعات تیکت",
-    "update_sms": "به روزرسانی این تیکت از طریق پیامک اطلاع داده میشود"
+    "update_sms": "به روزرسانی این تیکت از طریق پیامک اطلاع داده میشود",
+    "category_ticket": "دسته بندی تیکت",
+    "users_count": "تعداد  کاربر",
+    "add_category": "اضافه کردن دسته بندی",
+    "status_category": "وضعیت دسته بندی",
+    "title_category": "عنوان دسته بندی",
+    "users": "کاربران"
   },
+  "status": "وضعیت",
+  "title": "عنوان",
   "receip": {
     "receips": "صورتحساب ها",
     "receip_list": "لیست صورتحساب ها",
diff --git a/src/pages/ticket/Category.tsx b/src/pages/ticket/Category.tsx
new file mode 100644
index 0000000..7e0ad9c
--- /dev/null
+++ b/src/pages/ticket/Category.tsx
@@ -0,0 +1,145 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Select from '../../components/Select'
+import Input from '../../components/Input'
+import Td from '../../components/Td'
+import SwitchComponent from '../../components/Switch'
+import { CloseCircle } from 'iconsax-react'
+
+const TicketCategory: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='mt-4'>
+            <div>
+                {t('ticket.category_ticket')}
+            </div>
+
+            <div className='flex gap-6 xl:mt-8 mt-4'>
+                <div className='flex-1'>
+                    <div className='flex w-full  justify-between items-center'>
+                        <div className='w-28'>
+                            <Select
+                                items={[
+                                    {
+                                        label: '',
+                                        value: ''
+                                    }
+                                ]}
+                                placeholder={t('status')}
+                                className='border'
+                            />
+                        </div>
+
+                        <div>
+                            <Input
+                                variant='search'
+                                placeholder={t('search')}
+                                className='bg-white border'
+                            />
+                        </div>
+                    </div>
+                    <div className='bg-white mt-5 py-3 xl:px-10 px-4 rounded-3xl flex-1'>
+                        <div className='relative overflow-x-auto rounded-3xl w-full'>
+                            <table className='w-full text-sm '>
+                                <thead className='thead'>
+                                    <tr>
+                                        <Td text={t('title')} />
+                                        <Td text={t('ticket.users_count')} />
+                                        <Td text={t('status')} />
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr className='tr'>
+                                        <Td text='بخش فنی' />
+                                        <Td text={'2'} />
+                                        <Td text={''}>
+                                            <SwitchComponent
+                                                active
+                                                onChange={() => null}
+                                            />
+                                        </Td>
+
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
+                    <div className='text-sm'>
+                        {t('ticket.add_category')}
+                    </div>
+
+                    <div className='mt-6 flex justify-between items-center'>
+                        <div className='text-xs'>
+                            {t('ticket.status_category')}
+                        </div>
+
+                        <SwitchComponent
+                            active
+                            onChange={() => null}
+                        />
+                    </div>
+
+                    <div className='mt-6'>
+                        <Input
+                            label={t('ticket.title_category')}
+                        />
+                    </div>
+
+                    <div className='mt-6'>
+                        <Select
+                            label={t('ticket.users')}
+                            items={[
+                                {
+                                    label: '',
+                                    value: ''
+                                }
+                            ]}
+                            placeholder={t('select')}
+                            className='border'
+                        />
+                    </div>
+
+                    <div className='mt-6 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap'>
+                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
+                            <div className='  '>
+                                سیما فرهادی
+                            </div>
+                            <CloseCircle
+                                variant='Bold'
+                                className='size-4'
+                                color='red'
+                            />
+                        </div>
+                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
+                            <div className='  '>
+                                سیما فرهادی
+                            </div>
+                            <CloseCircle
+                                variant='Bold'
+                                className='size-4'
+                                color='red'
+                            />
+                        </div>
+                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
+                            <div className='  '>
+                                سیما فرهادی
+                            </div>
+                            <CloseCircle
+                                variant='Bold'
+                                className='size-4'
+                                color='red'
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default TicketCategory
\ No newline at end of file
diff --git a/src/router/Main.tsx b/src/router/Main.tsx
index 6493a99..acf0d00 100644
--- a/src/router/Main.tsx
+++ b/src/router/Main.tsx
@@ -29,6 +29,7 @@ import ListService from '../pages/service/List'
 import Category from '../pages/service/Category'
 import CustomerList from '../pages/customer/List'
 import CreateCustomer from '../pages/customer/Create'
+import TicketCategory from '../pages/ticket/Category'
 
 const MainRouter: FC = () => {
 
@@ -56,6 +57,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.services.category} element={<Category />} />
                             <Route path={Pages.ticket.list} element={<TicketList />} />
                             <Route path={Pages.ticket.create} element={<CreateTicket />} />
+                            <Route path={Pages.ticket.category} element={<TicketCategory />} />
                             <Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
                             <Route path={Pages.transactions} element={<TransactionList />} />
                             <Route path={Pages.receipts.index} element={<ReceiptsList />} />
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index cad6863..2e53fdc 100644
--- a/src/shared/SideBar.tsx
+++ b/src/shared/SideBar.tsx
@@ -13,6 +13,7 @@ import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
 import TransactionsSubMenu from './components/TransactionsSubMenu'
 import ReceiptSubMenu from './components/ReceiptSubMenu'
 import CustomerSubMenu from './components/CustomerSubMenu'
+import TicketSubMenu from './components/TicketSubMenu'
 
 const SideBar: FC = () => {
 
@@ -256,7 +257,9 @@ const SideBar: FC = () => {
                                     <ReceiptSubMenu />
                                     : subMenuName === 'customers' ?
                                         <CustomerSubMenu />
-                                        : null
+                                        : subMenuName === 'tickets' ?
+                                            <TicketSubMenu />
+                                            : null
                     }
                 </div>
             }
diff --git a/src/shared/components/TicketSubMenu.tsx b/src/shared/components/TicketSubMenu.tsx
new file mode 100644
index 0000000..6d9436d
--- /dev/null
+++ b/src/shared/components/TicketSubMenu.tsx
@@ -0,0 +1,52 @@
+import { Messages3 } from 'iconsax-react'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import SubMenuItem from './SubMenuItem'
+import { useLocation } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+
+const TicketSubMenu: FC = () => {
+
+    const location = useLocation()
+    const { t } = useTranslation('global')
+
+
+    const isActive = (name: string) => {
+        return location.pathname.includes(name)
+    }
+
+    return (
+        <div className='py-12'>
+            <div className='flex gap-3 items-center border-b pb-10 px-6'>
+                <Messages3
+                    size={24}
+                    color='#000'
+                    variant='Bold'
+                />
+                <div className='text-xs'>
+                    {t('sidebar.ticket')}
+                </div>
+            </div>
+
+            <div className='flex flex-col mt-10 gap-4'>
+                <SubMenuItem
+                    title={t('submenu.ticket_list')}
+                    isActive={isActive('list')}
+                    link={Pages.ticket.list}
+                />
+                <SubMenuItem
+                    title={t('submenu.send_ticket')}
+                    isActive={isActive('create')}
+                    link={Pages.ticket.create}
+                />
+                <SubMenuItem
+                    title={t('submenu.category')}
+                    isActive={isActive('category')}
+                    link={Pages.ticket.category}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default TicketSubMenu
\ No newline at end of file