add service part 1

package-lock.json

@@ -31,6 +31,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.17.0",
+        "@types/draft-js": "^0.11.18",
         "@types/react": "^18.3.17",
         "@types/react-dom": "^18.3.5",
         "@types/swiper": "^5.4.3",
@@ -1815,6 +1816,17 @@
       "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
       "license": "MIT"
     },
+    "node_modules/@types/draft-js": {
+      "version": "0.11.18",
+      "resolved": "https://registry.npmjs.org/@types/draft-js/-/draft-js-0.11.18.tgz",
+      "integrity": "sha512-lP6yJ+EKv5tcG1dflWgDKeezdwBa8wJ7KkiNrrHqXuXhl/VGes1SKjEfKHDZqOz19KQbrAhFvNhDPWwnQXYZGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "immutable": "~3.7.4"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -3296,6 +3308,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
+      "integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",

package.json

@@ -33,6 +33,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@types/draft-js": "^0.11.18",
     "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "@types/swiper": "^5.4.3",

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')}
+                    isActive={isActive('list')}
-                    link='/services'
+                    link={Pages.services.mine}
+                />
+                <SubMenuItem
+                    title={t('submenu.add_service')}
+                    isActive={isActive('add')}
+                    link={Pages.services.add}
                 />
             </div>
         </div>

vite.config.ts

@@ -1,7 +1,10 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react'
+import react from "@vitejs/plugin-react";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  define: {
+    global: "window", // تعریف `global` برای مرورگر
+  },
+});