customers list

src/pages/customers/List.tsx

@@ -0,0 +1,207 @@
+import Button from '@/components/Button'
+import Table from '@/components/Table'
+import Filters from '@/components/Filters'
+import { Add, Eye } from 'iconsax-react'
+import { type FC, useState } from 'react'
+import type { RowDataType, ActionType } from '@/components/types/TableTypes'
+import type { FilterValues } from '@/components/Filters'
+
+interface CustomerData extends RowDataType {
+    id: number
+    name: string
+    phone: string
+    email: string
+    customerCode: string
+    ordersCount: number
+    ticketsCount: number
+}
+
+const CustomersList: FC = () => {
+    const [currentPage, setCurrentPage] = useState(1)
+    const totalPages = 10
+
+    const handlePageChange = (page: number) => {
+        setCurrentPage(page)
+    }
+
+    const handleFiltersChange = (newFilters: FilterValues) => {
+        // اینجا می‌توانید API call جدید برای فیلتر کردن داده‌ها بزنید
+        console.log('فیلترها:', newFilters)
+    }
+
+    const handleRowActions = (item: CustomerData): ActionType[] => {
+        return [
+            {
+                label: 'ویرایش',
+                onClick: () => {
+                    console.log('ویرایش مشتری:', item.id)
+                },
+            },
+            {
+                label: 'حذف',
+                onClick: () => {
+                    console.log('حذف مشتری:', item.id)
+                },
+            },
+        ]
+    }
+
+    const columns = [
+        {
+            key: 'name',
+            title: 'نام',
+        },
+        {
+            key: 'phone',
+            title: 'شماره تماس',
+        },
+        {
+            key: 'email',
+            title: 'ایمیل',
+        },
+        {
+            key: 'customerCode',
+            title: 'کد مشتری',
+        },
+        {
+            key: 'ordersCount',
+            title: 'سفارشات',
+            render: (item: CustomerData) => {
+                return (
+                    <button
+                        className="text-blue-600 hover:text-blue-800"
+                        onClick={(e) => {
+                            e.stopPropagation()
+                            console.log('مشاهده سفارشات:', item.id)
+                        }}
+                    >
+                        {item.ordersCount} سفارش
+                    </button>
+                )
+            },
+        },
+        {
+            key: 'ticketsCount',
+            title: 'تیکت‌ها',
+            render: (item: CustomerData) => {
+                return (
+                    <button
+                        className="text-blue-600 hover:text-blue-800"
+                        onClick={(e) => {
+                            e.stopPropagation()
+                            console.log('مشاهده تیکت‌ها:', item.id)
+                        }}
+                    >
+                        {item.ticketsCount} تیکت
+                    </button>
+                )
+            },
+        },
+        {
+            key: 'details',
+            title: 'جزییات',
+            render: () => {
+                return <Eye size={20} color="#8C90A3" />
+            },
+        },
+    ]
+
+    const data: CustomerData[] = [
+        {
+            id: 1,
+            name: 'مهرداد مظفری',
+            phone: '۰۹۱۲۹۲۸۳۳۹۵',
+            email: 'info@example.com',
+            customerCode: '۱۲۲',
+            ordersCount: 4,
+            ticketsCount: 4,
+        },
+        {
+            id: 2,
+            name: 'مهرداد مظفری',
+            phone: '۰۹۱۲۹۲۸۳۳۹۵',
+            email: 'info@example.com',
+            customerCode: '۱۲۲',
+            ordersCount: 4,
+            ticketsCount: 4,
+        },
+        {
+            id: 3,
+            name: 'مهرداد مظفری',
+            phone: '۰۹۱۲۹۲۸۳۳۹۵',
+            email: 'info@example.com',
+            customerCode: '۱۲۲',
+            ordersCount: 4,
+            ticketsCount: 4,
+        },
+        {
+            id: 4,
+            name: 'مهرداد مظفری',
+            phone: '۰۹۱۲۹۲۸۳۳۹۵',
+            email: 'info@example.com',
+            customerCode: '۱۲۲',
+            ordersCount: 4,
+            ticketsCount: 4,
+        },
+        {
+            id: 5,
+            name: 'مهرداد مظفری',
+            phone: '۰۹۱۲۹۲۸۳۳۹۵',
+            email: 'info@example.com',
+            customerCode: '۱۲۲',
+            ordersCount: 4,
+            ticketsCount: 4,
+        },
+        {
+            id: 6,
+            name: 'مهرداد مظفری',
+            phone: '۰۹۱۲۹۲۸۳۳۹۵',
+            email: 'info@example.com',
+            customerCode: '۱۲۲',
+            ordersCount: 4,
+            ticketsCount: 4,
+        },
+    ]
+
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>لیست مشتریان</h1>
+                <Button className='w-fit px-6'>
+                    <div className='flex gap-2 items-center'>
+                        <Add color='#fff' size={20} />
+                        <span>افزودن مشتری</span>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-8'>
+                <Filters
+                    fields={[
+                        {
+                            type: 'input',
+                            name: 'search',
+                            placeholder: 'جستجو',
+                        },
+                    ]}
+                    onChange={handleFiltersChange}
+                    searchField="search"
+                />
+            </div>
+
+            <Table
+                columns={columns}
+                data={data}
+                selectable={true}
+                rowActions={handleRowActions}
+                pagination={{
+                    currentPage,
+                    totalPages,
+                    onPageChange: handlePageChange,
+                }}
+            />
+        </div>
+    )
+}
+
+export default CustomersList

src/router/Main.tsx

@@ -9,6 +9,7 @@ import FoodsList from '@/pages/food/List'
 import { Pages } from '@/config/Pages'
 import CreateFood from '@/pages/food/Create'
 import CategoryFood from '@/pages/food/Category'
+import CustomersList from '@/pages/customers/List'
 
 const MainRouter: FC = () => {
 
@@ -30,6 +31,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.foods.list} element={<FoodsList />} />
                             <Route path={Pages.foods.add} element={<CreateFood />} />
                             <Route path={Pages.foods.category} element={<CategoryFood />} />
+                            <Route path={Pages.customers.list} element={<CustomersList />} />
                         </Routes>
                     </div>
                 </div>