perfoama invoice

src/components/Filters.tsx

@@ -188,13 +188,8 @@ const Filters: FC<FiltersProps> = ({
 
             <div className="hidden md:flex md:flex-row justify-between items-center gap-4 w-full">
                 <div className={fieldClassName}>
-                    {otherFields.map(renderField)}
+                    {fields.map(renderField)}
                 </div>
-                {searchFieldObj && (
-                    <div className="w-full md:w-auto">
-                        {renderField(searchFieldObj)}
-                    </div>
-                )}
             </div>
 
             <DefaulModal

src/config/Paths.tsx

@@ -1,7 +1,8 @@
 export const Paths = {
     home: '/home',
     myOrders: '/my-orders',
-    preFactors: '/pre-factors',
+    proformaInvoice: '/proforma-invoice',
+    newOrder: '/new-order',
     tickets: {
         list: '/tickets',
     },

src/pages/invoice/ProformaInvoice.tsx

@@ -0,0 +1,104 @@
+import Tabs from '@/components/Tabs'
+import { useState, type FC } from 'react'
+import { ProformaInvoiceStatusEnum } from './enum/InvoiceEnum'
+import Filters from '@/components/Filters'
+import Table from '@/components/Table'
+
+const ProformaInvoice: FC = () => {
+
+    const [activeTab, setactiveTab] = useState<ProformaInvoiceStatusEnum>(ProformaInvoiceStatusEnum.ALL)
+
+    return (
+        <div className='mt-5'>
+            <h1>
+                پیش فاکتورها
+            </h1>
+            <div className='mt-8'>
+                <Tabs
+                    items={[
+                        { label: 'همه', value: 'all' },
+                        { label: 'تایید نشده', value: 'not_confirmed' },
+                        { label: 'تایید شده', value: 'confirmed' },
+                    ]}
+                    activeTab={activeTab}
+                    onTabChange={(tab) => setactiveTab(tab as ProformaInvoiceStatusEnum)}
+                />
+            </div>
+
+            <div className='mt-8'>
+                <Filters
+                    fields={[
+                        {
+                            type: 'input',
+                            name: 'search',
+                            placeholder: 'جستجو',
+                        },
+                        {
+                            type: 'date',
+                            name: 'date',
+                            placeholder: 'تاریخ',
+                        },
+                    ]}
+                    onChange={() => { }}
+                />
+            </div>
+
+            <div className='mt-8'>
+                <Table
+                    columns={[
+                        {
+                            key: 'id',
+                            title: 'شماره',
+                        },
+                        {
+                            key: 'service',
+                            title: 'خدمت',
+                        },
+                        {
+                            key: 'issueDate',
+                            title: 'تاریخ صدور',
+                        },
+                        {
+                            key: 'lastConfirmDate',
+                            title: 'آخرین مهلت تایید',
+                        },
+                        {
+                            key: 'total',
+                            title: 'مجموع',
+                        },
+                        {
+                            key: 'confirmStatus',
+                            title: 'وضعیت تایید',
+                        },
+                        {
+                            key: 'paymentStatus',
+                            title: 'وضعیت پرداخت',
+                        }
+                    ]}
+                    data={[
+                        {
+                            id: 1,
+                            service: 'خدمت 1',
+                            issueDate: '2021-01-01',
+                            lastConfirmDate: '2021-01-01',
+                            total: 100000,
+                            confirmStatus: 'تایید شده',
+                            paymentStatus: 'پرداخت شده',
+                        },
+                        {
+                            id: 2,
+                            service: 'خدمت 2',
+                            issueDate: '2021-01-01',
+                            lastConfirmDate: '2021-01-01',
+                            total: 100000,
+                            confirmStatus: 'تایید شده',
+                            paymentStatus: 'پرداخت شده',
+                        },
+                    ]}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default ProformaInvoice

src/pages/invoice/enum/InvoiceEnum.tsx

@@ -0,0 +1,5 @@
+export const enum ProformaInvoiceStatusEnum {
+    ALL = 'all',
+    NOT_CONFIRMED = 'not_confirmed',
+    CONFIRMED = 'confirmed',
+}

src/pages/order/NewOrder.tsx

@@ -0,0 +1,9 @@
+import { type FC } from 'react'
+
+const NewOrder: FC = () => {
+    return (
+        <div>NewOrder</div>
+    )
+}
+
+export default NewOrder

src/router/MainRouter.tsx

@@ -5,6 +5,8 @@ import SideBar from '../shared/Sidebar'
 import Header from '../shared/Header'
 import { Paths } from '@/config/Paths'
 import MyOrders from '@/pages/order/MyOrders'
+import ProformaInvoice from '@/pages/invoice/ProformaInvoice'
+import NewOrder from '@/pages/order/NewOrder'
 
 const MainRouter: FC = () => {
     return (
@@ -19,6 +21,8 @@ const MainRouter: FC = () => {
                             <Route path="/" element={<Home />} />
                             <Route path={Paths.home} element={<Home />} />
                             <Route path={Paths.myOrders} element={<MyOrders />} />
+                            <Route path={Paths.proformaInvoice} element={<ProformaInvoice />} />
+                            <Route path={Paths.newOrder} element={<NewOrder />} />
                         </Routes>
                     </div>
                 </div>

src/shared/Sidebar.tsx

@@ -60,8 +60,8 @@ const SideBar: FC = () => {
                         <SideBarItem
                             icon={<Receipt21 size={iconSizeSideBar} color='#4F5260' />}
                             title={t('sidebar.preFactors')}
-                            isActive={isActive('/pre-factors')}
-                            link={Paths.preFactors}
+                            isActive={isActive('/proforma-invoice')}
+                            link={Paths.proformaInvoice}
                         />
 
                     </div>