customer search

src/components/Pagination.tsx

@@ -1,64 +1,90 @@
 import React from "react";
 
 interface PaginationProps {
-    currentPage: number;
+  currentPage: number;
-    totalPages: number;
+  totalPages: number;
-    onPageChange: (page: number) => void;
+  onPageChange: (page: number) => void;
+  limit?: number;
+  onLimitChange?: (limit: number) => void;
+  limitOptions?: number[];
 }
 
-const Pagination: React.FC<PaginationProps> = ({
+const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, onPageChange, limit = 10, onLimitChange, limitOptions = [10, 20, 50] }) => {
-    currentPage,
+  const handleLimitChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    totalPages,
+    onLimitChange?.(Number(event.target.value));
-    onPageChange,
+    onPageChange(1);
-}) => {
+  };
-    const getPageNumbers = () => {
-        const pageNumbers: (number | string)[] = [];
-        const maxVisiblePages = 5;
 
-        if (totalPages <= maxVisiblePages) {
+  const getPageNumbers = () => {
-            // اگر تعداد صفحات کم است، همه را نشان بده
+    const pageNumbers: (number | string)[] = [];
-            for (let i = 1; i <= totalPages; i++) {
+    const maxVisiblePages = 5;
-                pageNumbers.push(i);
-            }
-        } else {
-            // همیشه صفحه اول را نشان بده
-            pageNumbers.push(1);
 
-            if (currentPage <= 3) {
+    if (totalPages <= maxVisiblePages) {
-                // در صفحات اولیه (1, 2, 3)
+      // اگر تعداد صفحات کم است، همه را نشان بده
-                for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
+      for (let i = 1; i <= totalPages; i++) {
-                    pageNumbers.push(i);
+        pageNumbers.push(i);
-                }
+      }
-                if (totalPages > 5) {
+    } else {
-                    pageNumbers.push("...");
+      // همیشه صفحه اول را نشان بده
-                }
+      pageNumbers.push(1);
-                pageNumbers.push(totalPages);
+
-            } else if (currentPage >= totalPages - 2) {
+      if (currentPage <= 3) {
-                // در صفحات آخر
+        // در صفحات اولیه (1, 2, 3)
-                pageNumbers.push("...");
+        for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
-                for (let i = totalPages - 3; i <= totalPages; i++) {
+          pageNumbers.push(i);
-                    pageNumbers.push(i);
-                }
-            } else {
-                // در صفحات وسط
-                pageNumbers.push("...");
-                for (let i = currentPage - 1; i <= currentPage + 1; i++) {
-                    pageNumbers.push(i);
-                }
-                pageNumbers.push("...");
-                pageNumbers.push(totalPages);
-            }
         }
+        if (totalPages > 5) {
+          pageNumbers.push("...");
+        }
+        pageNumbers.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        // در صفحات آخر
+        pageNumbers.push("...");
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          pageNumbers.push(i);
+        }
+      } else {
+        // در صفحات وسط
+        pageNumbers.push("...");
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pageNumbers.push(i);
+        }
+        pageNumbers.push("...");
+        pageNumbers.push(totalPages);
+      }
+    }
 
-        return pageNumbers;
+    return pageNumbers;
-    };
+  };
 
-    const pageNumbers = getPageNumbers();
+  const pageNumbers = getPageNumbers();
 
-    return (
+  return (
-        <div className="flex gap-2 text-xs justify-center items-center mt-4">
+    <div className="flex flex-wrap gap-4 text-xs justify-center items-center mt-4">
-            {/* دکمه قبلی */}
+      {onLimitChange && (
-            {/* <button
+        <label className="flex items-center gap-2 text-gray-600">
+          <span>تعداد در صفحه</span>
+          <select
+            aria-label="تعداد آیتم در صفحه"
+            className="h-8 rounded-md border border-[#EAECF5] bg-white px-2 outline-none focus:border-primary"
+            value={limit}
+            onChange={handleLimitChange}
+          >
+            {limitOptions.map((option) => (
+              <option
+                key={option}
+                value={option}
+              >
+                {option}
+              </option>
+            ))}
+          </select>
+        </label>
+      )}
+
+      <div className="flex gap-2 items-center">
+        {/* دکمه قبلی */}
+        {/* <button
                 className={`px-3 py-1 rounded-md ${currentPage === 1
                         ? "text-gray-400 cursor-not-allowed"
                         : "text-blue-600 hover:bg-gray-100"
@@ -69,28 +95,28 @@ const Pagination: React.FC<PaginationProps> = ({
                 قبلی
             </button> */}
 
-            {/* شماره صفحات */}
+        {/* شماره صفحات */}
-            {pageNumbers.map((page, index) =>
+        {pageNumbers.map((page, index) =>
-                typeof page === "number" ? (
+          typeof page === "number" ? (
-                    <button
+            <button
-                        key={`page-${page}`}
+              key={`page-${page}`}
-                        className={`size-8 rounded-md ${currentPage === page
+              className={`size-8 rounded-md ${currentPage === page ? "bg-primary text-white" : "text-primary bg-[#EAECF5] hover:bg-gray-100"}`}
-                            ? "bg-primary text-white"
+              onClick={() => onPageChange(page)}
-                            : "text-primary bg-[#EAECF5] hover:bg-gray-100"
+            >
-                            }`}
+              {page}
-                        onClick={() => onPageChange(page)}
+            </button>
-                    >
+          ) : (
-                        {page}
+            <span
-                    </button>
+              key={`ellipsis-${index}`}
-                ) : (
+              className="px-3 py-1 text-gray-500"
-                    <span key={`ellipsis-${index}`} className="px-3 py-1 text-gray-500">
+            >
-                        {page}
+              {page}
-                    </span>
+            </span>
-                )
+          ),
-            )}
+        )}
 
-            {/* دکمه بعدی */}
+        {/* دکمه بعدی */}
-            {/* <button
+        {/* <button
                 className={`px-3 py-1 rounded-md ${currentPage === totalPages
                         ? "text-gray-400 cursor-not-allowed"
                         : "text-blue-600 hover:bg-gray-100"
@@ -100,8 +126,9 @@ const Pagination: React.FC<PaginationProps> = ({
             >
                 بعدی
             </button> */}
-        </div>
+      </div>
-    );
+    </div>
+  );
 };
 
-export default Pagination;
+export default Pagination;

src/pages/customer/List.tsx

@@ -1,134 +1,120 @@
-import { FC, useState } from 'react'
+import { Add, Eye } from "iconsax-react";
-import { useTranslation } from 'react-i18next'
+import { FC, useState } from "react";
-import Button from '../../components/Button'
+import { useTranslation } from "react-i18next";
-import { Add, Eye } from 'iconsax-react'
+import { Link } from "react-router-dom";
-import Select from '../../components/Select'
+import Button from "../../components/Button";
-import Input from '../../components/Input'
+import Input from "../../components/Input";
-import Td from '../../components/Td'
+import PageLoading from "../../components/PageLoading";
-import { Link } from 'react-router-dom'
+import Pagination from "../../components/Pagination";
-import { Pages } from '../../config/Pages'
+import Td from "../../components/Td";
-import { useGetCustomers } from './hooks/useCustomerData'
+import { Pages } from "../../config/Pages";
-import PageLoading from '../../components/PageLoading'
+import { useGetCustomers } from "./hooks/useCustomerData";
-import { CustomerItemType } from './types/CustomerTypes'
+import { CustomerItemType } from "./types/CustomerTypes";
-import Pagination from '../../components/Pagination'
 
 const CustomerList: FC = () => {
+  const { t } = useTranslation("global");
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+  const [search, setSearch] = useState("");
+  const getCustomers = useGetCustomers(page, limit, false, search);
 
-    const { t } = useTranslation('global')
+  const handleSearch = (value: string) => {
-    const [page, setPage] = useState(1)
+    setPage(1);
-    const getCustomers = useGetCustomers(page)
+    setSearch(value);
+  };
 
-    return (
+  return (
-        <div className='mt-4'>
+    <div className="mt-4">
-            <div className='flex w-full justify-between items-center'>
+      <div className="flex w-full justify-between items-center">
-                <div>
+        <div>{t("customer.customer_list")}</div>
-                    {t('customer.customer_list')}
+        <Link to={Pages.customer.create}>
-                </div>
+          <Button className="px-5">
-                <Link to={Pages.customer.create}>
+            <div className="flex gap-2">
-                    <Button
+              <Add
-                        className='px-5'
+                className="size-5"
-                    >
+                color="#fff"
-                        <div className='flex gap-2'>
+              />
-                            <Add
+              <div>{t("customer.add_cutomer")}</div>
-                                className='size-5'
-                                color='#fff'
-                            />
-                            <div>{t('customer.add_cutomer')}</div>
-                        </div>
-                    </Button>
-                </Link>
             </div>
+          </Button>
+        </Link>
+      </div>
 
-            <div className='flex justify-between items-center mt-12'>
+      <div className="flex justify-end items-center mt-12">
-                <div className='flex gap-4'>
+        <div>
-                    <Select
+          <Input
-                        className='w-36'
+            variant="search"
-                        items={[
+            placeholder={t("search")}
-                            { label: 'All', value: 'all' },
+            className="bg-white border border-border"
-                            { label: 'Active', value: 'active' },
+            onChangeSearchFinal={handleSearch}
-                            { label: 'Inactive', value: 'inactive' },
+          />
-                        ]}
-                        placeholder={t('service.category')}
-                    />
-                    <Select
-                        className='w-36'
-                        items={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
-                        ]}
-                        placeholder={t('service.status')}
-                    />
-                </div>
-                <div>
-                    <Input
-                        variant='search'
-                        placeholder={t('service.search')}
-                        className='bg-white border border-border'
-                    />
-                </div>
-            </div>
-
-            {
-                getCustomers.isPending ?
-                    <PageLoading />
-                    :
-                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
-                        <table className='w-full text-sm '>
-                            <thead className='thead'>
-                                <tr>
-                                    <Td text={t('customer.name')} />
-                                    <Td text={t('customer.company')} />
-                                    <Td text={t('customer.email')} />
-                                    <Td text={t('customer.active_services')} />
-                                    <Td text={t('customer.factor')} />
-                                    <Td text={t('customer.tickets')} />
-                                    <Td text={t('customer.detail')} />
-                                    <Td text={''} />
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {
-                                    getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
-                                        return (
-                                            <tr key={item.id} className='tr'>
-                                                <Td text={item.firstName + ' ' + item.lastName} />
-                                                <Td text={item?.legalUser?.registrationName} />
-                                                <Td text={item.email ? item.email : ''} />
-                                                <Td text={item.subscriptionsCount} />
-                                                <Td text={''}>
-                                                    <Link to={Pages.receipts.index + `?user=${item.id}`}>
-                                                        <div className='text-[#0047FF]'>{item.invoicesCount} صورت حساب</div>
-                                                    </Link>
-                                                </Td>
-                                                <Td text={''}>
-                                                    <Link to={Pages.ticket.list + `?user=${item.id}`}>
-                                                        <div className='text-[#0047FF]'>{item.ticketsCount} تیکت</div>
-                                                    </Link>
-                                                </Td>
-                                                <Td text={''}>
-                                                    <Link to={Pages.customer.update + item.id}>
-                                                        <Eye size={20} color='#8C90A3' />
-                                                    </Link>
-                                                </Td>
-                                                <Td text={''} />
-                                            </tr>
-                                        )
-                                    })
-                                }
-
-                            </tbody>
-                        </table>
-
-                        <Pagination
-                            totalPages={getCustomers.data?.data?.pager?.totalPages}
-                            currentPage={page}
-                            onPageChange={setPage}
-                        />
-                    </div>
-            }
         </div>
-    )
+      </div>
-}
 
-export default CustomerList
+      {getCustomers.isPending ? (
+        <PageLoading />
+      ) : (
+        <div className="relative overflow-x-auto rounded-3xl mt-9 w-full">
+          <table className="w-full text-sm ">
+            <thead className="thead">
+              <tr>
+                <Td text={t("customer.name")} />
+                <Td text={t("customer.company")} />
+                <Td text={t("customer.email")} />
+                <Td text={t("customer.active_services")} />
+                <Td text={t("customer.factor")} />
+                <Td text={t("customer.tickets")} />
+                <Td text={t("customer.detail")} />
+                <Td text={""} />
+              </tr>
+            </thead>
+            <tbody>
+              {getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
+                return (
+                  <tr
+                    key={item.id}
+                    className="tr"
+                  >
+                    <Td text={item.firstName + " " + item.lastName} />
+                    <Td text={item?.legalUser?.registrationName} />
+                    <Td text={item.email ? item.email : ""} />
+                    <Td text={item.subscriptionsCount} />
+                    <Td text={""}>
+                      <Link to={Pages.receipts.index + `?user=${item.id}`}>
+                        <div className="text-[#0047FF]">{item.invoicesCount} صورت حساب</div>
+                      </Link>
+                    </Td>
+                    <Td text={""}>
+                      <Link to={Pages.ticket.list + `?user=${item.id}`}>
+                        <div className="text-[#0047FF]">{item.ticketsCount} تیکت</div>
+                      </Link>
+                    </Td>
+                    <Td text={""}>
+                      <Link to={Pages.customer.update + item.id}>
+                        <Eye
+                          size={20}
+                          color="#8C90A3"
+                        />
+                      </Link>
+                    </Td>
+                    <Td text={""} />
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+
+          <Pagination
+            totalPages={getCustomers.data?.data?.pager?.totalPages}
+            currentPage={page}
+            onPageChange={setPage}
+            limit={limit}
+            onLimitChange={setLimit}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomerList;

src/pages/customer/hooks/useCustomerData.ts

@@ -1,11 +1,11 @@
-import * as api from "../service/CustomerService";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/CustomerService";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const useGetCustomers = (page: number, withoutPaginate?: boolean) => {
+export const useGetCustomers = (page: number, limit: number, withoutPaginate?: boolean, search?: string) => {
   return useQuery({
-    queryKey: ["customers", page],
+    queryKey: ["customers", page, limit, withoutPaginate, search],
-    queryFn: () => api.getCustomers(page, withoutPaginate),
+    queryFn: () => api.getCustomers(page, limit, withoutPaginate, search),
   });
 };
 
@@ -27,8 +27,7 @@ export const useGetCities = (provincesId: string) => {
 export const useCreateCustomer = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (variables: CreateCustomerType) =>
+    mutationFn: (variables: CreateCustomerType) => api.createCustomer(variables),
-      api.createCustomer(variables),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: ["customers"],
@@ -48,8 +47,7 @@ export const useGetCustomerDetail = (id?: string) => {
 export const useUpdateCustomer = (id: string) => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (variables: CreateCustomerType) =>
+    mutationFn: (variables: CreateCustomerType) => api.updateCustomer(id, variables),
-      api.updateCustomer(id, variables),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: ["customers"],

src/pages/customer/service/CustomerService.ts

@@ -1,9 +1,9 @@
 import axios from "../../../config/axios";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const getCustomers = async (page: number, withoutPaginate?: boolean) => {
+export const getCustomers = async (page: number, limit: number, withoutPaginate?: boolean, search?: string) => {
   const { data } = await axios.get(
-    `/users/customers?page=${page}&paginate=${withoutPaginate ? "0" : "1"}`
+    `/users/customers?page=${page}&limit=${limit}&paginate=${withoutPaginate ? "0" : "1"}&q=${encodeURIComponent(search ?? "")}`,
   );
   return data;
 };
@@ -28,10 +28,7 @@ export const getDetailCustomer = async (id: string) => {
   return data;
 };
 
-export const updateCustomer = async (
+export const updateCustomer = async (id: string, params: CreateCustomerType) => {
-  id: string,
-  params: CreateCustomerType
-) => {
   const { data } = await axios.patch(`/users/customers/${id}`, params);
   return data;
 };