modify users list page

2026-06-18 20:16:28 +03:30
parent 1137780cf0
commit 3ba1290e56
5 changed files with 128 additions and 98 deletions
@@ -1,29 +1,36 @@
 import Table from '@/components/Table'
-import Filters, { type FilterValues, type FieldType } from '@/components/Filters'
-import { type FC, useState, useMemo, useCallback } from 'react'
+import Filters, { type FieldType } from '@/components/Filters'
+import { type FC, useMemo } from 'react'
 import { useGetUsers } from './hooks/useUsersData'
-import type { Customer, CustomerListRow } from '@/pages/customers/types/Types'
+import { useCustomerFilters } from './hooks/useCustomerFilters'
+import type { CustomerListRow, UserRestaurant } from '@/pages/customers/types/Types'
 import { formatOptionalDate, formatFaNumber } from '@/helpers/func'

-const mapCustomerToRow = (customer: Customer): CustomerListRow => {
-    const fullName = [customer.firstName, customer.lastName].filter(Boolean).join(' ').trim()
+const mapUserRestaurantToRow = (userRestaurant: UserRestaurant): CustomerListRow => {
+    const { user, orderCount, totalOrderAmount } = userRestaurant
+    const fullName = [user.firstName, user.lastName].filter(Boolean).join(' ').trim()
    return {
-        id: customer.id,
+        id: user.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 ? 'فعال' : 'غیرفعال',
+        phone: user.phone || '-',
+        birthDate: formatOptionalDate(user.birthDate),
+        marriageDate: formatOptionalDate(user.marriageDate),
+        orderCount: formatFaNumber(orderCount),
+        totalOrderAmount: formatFaNumber(totalOrderAmount),
+        status: user.isActive !== false ? 'فعال' : 'غیرفعال',
    }
 }

 const CustomersList: FC = () => {
-    const { data: usersData, isLoading } = useGetUsers()
-    const [filters, setFilters] = useState<FilterValues>({ search: '', status: 'all' })
-    const [currentPage, setCurrentPage] = useState(1)
-    const limit = 10
+    const {
+        filters,
+        currentPage,
+        apiParams,
+        handleFiltersChange,
+        handlePageChange,
+    } = useCustomerFilters()
+
+    const { data: usersData, isLoading } = useGetUsers(apiParams)

    const filterFields = useMemo<FieldType[]>(() => [
        {
@@ -31,49 +38,15 @@ const CustomersList: FC = () => {
            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 userRestaurants = usersData?.data ?? []
+    const tableData = useMemo<CustomerListRow[]>(
+        () => userRestaurants.map(mapUserRestaurantToRow),
+        [userRestaurants],
+    )

-    const filteredCustomers = useMemo(() => {
-        const searchValue = (filters.search as string || '').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 totalPages = usersData?.meta?.totalPages || 1

    const columns = useMemo(() => [
        {
@@ -93,12 +66,12 @@ const CustomersList: FC = () => {
            title: 'تاریخ ازدواج',
        },
        {
-            key: 'wallet',
-            title: 'کیف پول (تومان)',
+            key: 'orderCount',
+            title: 'تعداد سفارش',
        },
        {
-            key: 'points',
-            title: 'امتیاز',
+            key: 'totalOrderAmount',
+            title: 'مجموع سفارش (تومان)',
        },
        {
            key: 'status',
@@ -117,27 +90,10 @@ const CustomersList: FC = () => {
        },
    ], [])

-    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>
-                {/* <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'>
@@ -164,4 +120,4 @@ const CustomersList: FC = () => {
    )
 }

-export default CustomersList
+export default CustomersList
@@ -0,0 +1,43 @@
+import { useState, useMemo } from "react";
+import type { FilterValues } from "@/components/Filters";
+import type { GetUsersParams } from "../types/Types";
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 10;
+
+export const useCustomerFilters = () => {
+  const [filters, setFilters] = useState<FilterValues>({});
+  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
+  const [limit] = useState(DEFAULT_LIMIT);
+
+  const apiParams = useMemo<GetUsersParams>(() => {
+    const params: GetUsersParams = {
+      page: currentPage,
+      limit,
+    };
+
+    if (filters.search) {
+      params.search = filters.search as string;
+    }
+
+    return params;
+  }, [filters, currentPage, limit]);
+
+  const handleFiltersChange = (newFilters: FilterValues) => {
+    setFilters(newFilters);
+    setCurrentPage(DEFAULT_PAGE);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return {
+    filters,
+    currentPage,
+    apiParams,
+    handleFiltersChange,
+    handlePageChange,
+    limit,
+  };
+};
@@ -1,9 +1,10 @@
 import * as api from "../service/UsersService";
 import { useQuery } from "@tanstack/react-query";
+import type { GetUsersParams } from "../types/Types";

-export const useGetUsers = () => {
+export const useGetUsers = (params?: GetUsersParams) => {
  return useQuery({
-    queryKey: ["users"],
-    queryFn: api.getUsers,
+    queryKey: ["users", params],
+    queryFn: () => api.getUsers(params),
  });
 };
@@ -1,7 +1,12 @@
 import axios from "@/config/axios";
-import type { GetCustomersResponse } from "@/pages/customers/types/Types";
+import type {
+  GetCustomersResponse,
+  GetUsersParams,
+} from "@/pages/customers/types/Types";

-export const getUsers = async () => {
-  const { data } = await axios.get<GetCustomersResponse>(`/admin/users`);
+export const getUsers = async (params?: GetUsersParams) => {
+  const { data } = await axios.get<GetCustomersResponse>(`/admin/users`, {
+    params,
+  });
  return data;
 };
@@ -1,32 +1,57 @@
 import type { IResponse } from "@/types/response.types";
 import type { RowDataType } from "@/components/types/TableTypes";

-export interface Customer {
+export type User = {
  id: string;
  createdAt: string;
  updatedAt: string;
  deletedAt: string | null;
-  restaurant: string;
  firstName: string;
-  lastName: string;
+  lastName?: string;
  phone: string;
-  birthDate: string;
-  marriageDate: string;
-  referrer: string | null;
-  isActive: boolean;
-  gender: boolean;
-  wallet: number;
-  points: number;
-}
+  birthDate?: string;
+  marriageDate?: string;
+  referrer?: string | null;
+  isActive?: boolean;
+  gender?: boolean;
+};

-export type GetCustomersResponse = IResponse<Customer[]>;
+export type UserRestaurant = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  user: User;
+  restaurant: string;
+  orderCount: number;
+  totalOrderAmount: number;
+};
+
+export type PaginationMeta = {
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+};
+
+export type GetUsersParams = {
+  page?: number;
+  limit?: number;
+  search?: string;
+  orderBy?: string;
+  order?: "asc" | "desc";
+};
+
+export type GetCustomersResponse = IResponse<UserRestaurant[]> & {
+  meta: PaginationMeta;
+};

 export type CustomerListRow = RowDataType & {
  fullName: string;
  phone: string;
  birthDate: string;
  marriageDate: string;
-  wallet: string;
-  points: string;
+  orderCount: string;
+  totalOrderAmount: string;
  status: string;
 };