customers list
This commit is contained in:
hamid zarghami
+120
-157
@@ -1,205 +1,168 @@
|
||||
import Button from '@/components/Button'
|
||||
import Table from '@/components/Table'
|
||||
import Filters from '@/components/Filters'
|
||||
import Filters, { type FilterValues, type FieldType } 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'
|
||||
import { type FC, useState, useMemo, useCallback } from 'react'
|
||||
import { Pages } from '@/config/Pages'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useGetUsers } from './hooks/useUsersData'
|
||||
import type { Customer, CustomerListRow } from '@/pages/customers/types/Types'
|
||||
import { formatOptionalDate, formatFaNumber } from '@/helpers/func'
|
||||
|
||||
interface CustomerData extends RowDataType {
|
||||
id: number
|
||||
name: string
|
||||
phone: string
|
||||
email: string
|
||||
customerCode: string
|
||||
ordersCount: number
|
||||
ticketsCount: number
|
||||
const mapCustomerToRow = (customer: Customer): CustomerListRow => {
|
||||
const fullName = [customer.firstName, customer.lastName].filter(Boolean).join(' ').trim()
|
||||
return {
|
||||
id: customer.id,
|
||||
fullName: fullName || 'بدون نام',
|
||||
phone: customer.phone || '-',
|
||||
birthDate: formatOptionalDate(customer.birthDate),
|
||||
marriageDate: formatOptionalDate(customer.marriageDate),
|
||||
wallet: formatFaNumber(customer.wallet),
|
||||
points: formatFaNumber(customer.points),
|
||||
status: customer.isActive ? 'فعال' : 'غیرفعال',
|
||||
}
|
||||
}
|
||||
|
||||
const CustomersList: FC = () => {
|
||||
const { data: usersData, isLoading } = useGetUsers()
|
||||
const [filters, setFilters] = useState<FilterValues>({ search: '', status: 'all' })
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const totalPages = 10
|
||||
const limit = 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 = [
|
||||
const filterFields = useMemo<FieldType[]>(() => [
|
||||
{
|
||||
key: 'name',
|
||||
title: 'نام',
|
||||
type: 'input',
|
||||
name: 'search',
|
||||
placeholder: 'نام یا شماره تماس',
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'status',
|
||||
placeholder: 'انتخاب وضعیت',
|
||||
defaultValue: 'all',
|
||||
options: [
|
||||
{ label: 'همه وضعیتها', value: 'all' },
|
||||
{ label: 'فعال', value: 'active' },
|
||||
{ label: 'غیرفعال', value: 'inactive' },
|
||||
],
|
||||
},
|
||||
], [])
|
||||
|
||||
const customers = useMemo(() => usersData?.data ?? [], [usersData])
|
||||
|
||||
const filteredCustomers = useMemo(() => {
|
||||
const searchValue = (filters.search || '').toLowerCase().trim()
|
||||
const statusFilter = filters.status || 'all'
|
||||
|
||||
return customers.filter((customer) => {
|
||||
const fullName = [customer.firstName, customer.lastName].filter(Boolean).join(' ').toLowerCase().trim()
|
||||
const matchesSearch =
|
||||
searchValue === '' ||
|
||||
fullName.includes(searchValue) ||
|
||||
(customer.phone || '').includes(searchValue)
|
||||
|
||||
const matchesStatus =
|
||||
statusFilter === 'all' ||
|
||||
(statusFilter === 'active' && customer.isActive) ||
|
||||
(statusFilter === 'inactive' && !customer.isActive)
|
||||
|
||||
return matchesSearch && matchesStatus
|
||||
})
|
||||
}, [customers, filters])
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(filteredCustomers.length / limit) || 1)
|
||||
|
||||
const paginatedCustomers = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * limit
|
||||
return filteredCustomers.slice(startIndex, startIndex + limit)
|
||||
}, [filteredCustomers, currentPage, limit])
|
||||
|
||||
const tableData = useMemo<CustomerListRow[]>(() => paginatedCustomers.map(mapCustomerToRow), [paginatedCustomers])
|
||||
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
key: 'fullName',
|
||||
title: 'نام و نام خانوادگی',
|
||||
},
|
||||
{
|
||||
key: 'phone',
|
||||
title: 'شماره تماس',
|
||||
},
|
||||
{
|
||||
key: 'email',
|
||||
title: 'ایمیل',
|
||||
key: 'birthDate',
|
||||
title: 'تاریخ تولد',
|
||||
},
|
||||
{
|
||||
key: 'customerCode',
|
||||
title: 'کد مشتری',
|
||||
key: 'marriageDate',
|
||||
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: 'wallet',
|
||||
title: 'کیف پول (تومان)',
|
||||
},
|
||||
{
|
||||
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: 'points',
|
||||
title: 'امتیاز',
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: 'وضعیت',
|
||||
render: (item: CustomerListRow) => (
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs ${item.status === 'فعال' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-600'}`}
|
||||
>
|
||||
{item.status}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'details',
|
||||
title: 'جزییات',
|
||||
render: (item: CustomerData) => {
|
||||
return (
|
||||
<Link to={Pages.customers.detail + item.id}>
|
||||
<Eye size={20} color="#8C90A3" />
|
||||
</Link>
|
||||
)
|
||||
},
|
||||
title: 'جزئیات',
|
||||
render: (item: CustomerListRow) => (
|
||||
<Link to={`${Pages.customers.detail}${item.id}`} className='inline-flex items-center justify-center'>
|
||||
<Eye size={20} color="#8C90A3" />
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
]
|
||||
], [])
|
||||
|
||||
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,
|
||||
},
|
||||
]
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page)
|
||||
}
|
||||
|
||||
const handleFiltersChange = useCallback((newFilters: FilterValues) => {
|
||||
setFilters(newFilters)
|
||||
setCurrentPage(1)
|
||||
}, [])
|
||||
|
||||
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>
|
||||
<Link to={Pages.customers.add}>
|
||||
<Button className='w-fit px-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Add color='#fff' size={20} />
|
||||
<span>افزودن مشتری</span>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Filters
|
||||
fields={[
|
||||
{
|
||||
type: 'input',
|
||||
name: 'search',
|
||||
placeholder: 'جستجو',
|
||||
},
|
||||
]}
|
||||
fields={filterFields}
|
||||
onChange={handleFiltersChange}
|
||||
initialValues={filters}
|
||||
searchField="search"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
selectable={true}
|
||||
rowActions={handleRowActions}
|
||||
data={tableData}
|
||||
isloading={isLoading}
|
||||
selectable
|
||||
pagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
|
||||
Reference in New Issue
Block a user