add service part 1

src/config/Pages.ts

@@ -9,6 +9,7 @@ export const Pages = {
     mine: "/services",
     other: "/other-service",
     detail: "/services/detail/",
+    add: "/services/add",
   },
   transactions: "/transactions",
   receipts: {

src/langs/fa.json

@@ -69,7 +69,8 @@
     "logout": "خروج"
   },
   "submenu": {
-    "services_list": "لیست سرویس ها"
+    "services_list": "لیست سرویس ها",
+    "add_service": "افزودن سرویس"
   },
   "header": {
     "search": "جستجو"
@@ -118,8 +119,13 @@
     "enter_title_comment": "عنوان نظر خود را وارد کنید",
     "your_comment": "نظر شما",
     "write_your_comment": "نظر خود را راجع به این سرویس بنویسید",
-    "users_comments": "نظرات کاربران"
+    "users_comments": "نظرات کاربران",
+    "add_service": "افزودن سرویس",
+    "service_name": "نام سرویس",
+    "description_short": "توضیح کوتاه سرویس",
+    "company_developed": "شرکت توسعه دهنده"
   },
+  "select": "انتخاب",
   "footer": {
     "home": "صفحه اصلی",
     "other_services": "سایر سرویس ها",

src/pages/service/AddService.tsx

@@ -0,0 +1,67 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '../../components/Input'
+import Select from '../../components/Select'
+
+const AddService: FC = () => {
+
+    const { t } = useTranslation('global')
+
+
+    return (
+        <div className='w-full flex gap-6 mt-4'>
+            <div className='flex-1'>
+                <div>
+                    {t('service.add_service')}
+                </div>
+
+                <div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+                    <Input
+                        label={t('service.service_name')}
+                    />
+                    <div className='mt-8'>
+                        <Input
+                            label={t('service.description_short')}
+                        />
+                    </div>
+
+                    <div className='mt-8 rowTwoInput'>
+                        <Input
+                            label={t('service.company_developed')}
+                        />
+                        <Input
+                            label={t('service.year_make')}
+                        />
+                    </div>
+
+                    <div className='mt-8 rowTwoInput'>
+                        <Input
+                            label={t('service.user_count')}
+                        />
+
+                        <Select
+                            label={t('service.lang_app')}
+                            items={[
+                                {
+                                    label: 'فارسی',
+                                    value: ''
+                                }
+                            ]}
+                            placeholder={t('select')}
+                        />
+                    </div>
+
+                    <div className='mt-8'>
+
+                    </div>
+                </div>
+            </div>
+
+            <div className='bg-white w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
+
+            </div>
+        </div>
+    )
+}
+
+export default AddService

src/router/Main.tsx

@@ -24,6 +24,7 @@ import DetailService from '../pages/service/DetailService'
 import { clx } from '../helpers/utils'
 import { useSharedStore } from '../shared/store/sharedStore'
 import CreateReceipt from '../pages/receipts/Create'
+import AddService from '../pages/service/AddService'
 
 const MainRouter: FC = () => {
 
@@ -46,6 +47,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.services.mine} element={<MyServices />} />
                             <Route path={Pages.services.other} element={<OtherServices />} />
                             <Route path={Pages.services.detail + ':id'} element={<DetailService />} />
+                            <Route path={Pages.services.add} element={<AddService />} />
                             <Route path={Pages.ticket.list} element={<TicketList />} />
                             <Route path={Pages.ticket.create} element={<CreateTicket />} />
                             <Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />

src/shared/components/ServicesSubMenu.tsx

@@ -3,6 +3,7 @@ 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 ServicesSubMenu: FC = () => {
 
@@ -30,8 +31,13 @@ const ServicesSubMenu: FC = () => {
             <div className='flex flex-col mt-10 gap-4'>
                 <SubMenuItem
                     title={t('submenu.services_list')}
-                    isActive={isActive('services')}
-                    link='/services'
+                    isActive={isActive('list')}
+                    link={Pages.services.mine}
+                />
+                <SubMenuItem
+                    title={t('submenu.add_service')}
+                    isActive={isActive('add')}
+                    link={Pages.services.add}
                 />
             </div>
         </div>