pagination with limit

src/components/Pagination.tsx

@@ -4,13 +4,17 @@ interface PaginationProps {
   currentPage: number;
   totalPages: number;
   onPageChange: (page: number) => void;
+  limit?: number;
+  onLimitChange?: (limit: number) => void;
+  limitOptions?: number[];
 }
 
-const Pagination: React.FC<PaginationProps> = ({
-    currentPage,
-    totalPages,
-    onPageChange,
-}) => {
+const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, onPageChange, limit = 10, onLimitChange, limitOptions = [10, 20, 50] }) => {
+  const handleLimitChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onLimitChange?.(Number(event.target.value));
+    onPageChange(1);
+  };
+
   const getPageNumbers = () => {
     const pageNumbers: (number | string)[] = [];
     const maxVisiblePages = 5;
@@ -56,7 +60,29 @@ const Pagination: React.FC<PaginationProps> = ({
   const pageNumbers = getPageNumbers();
 
   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 && (
+        <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
@@ -74,19 +100,19 @@ const Pagination: React.FC<PaginationProps> = ({
           typeof page === "number" ? (
             <button
               key={`page-${page}`}
-                        className={`size-8 rounded-md ${currentPage === page
-                            ? "bg-primary text-white"
-                            : "text-primary bg-[#EAECF5] hover:bg-gray-100"
-                            }`}
+              className={`size-8 rounded-md ${currentPage === page ? "bg-primary text-white" : "text-primary bg-[#EAECF5] hover:bg-gray-100"}`}
               onClick={() => onPageChange(page)}
             >
               {page}
             </button>
           ) : (
-                    <span key={`ellipsis-${index}`} className="px-3 py-1 text-gray-500">
+            <span
+              key={`ellipsis-${index}`}
+              className="px-3 py-1 text-gray-500"
+            >
               {page}
             </span>
-                )
+          ),
         )}
 
         {/* دکمه بعدی */}
@@ -101,6 +127,7 @@ const Pagination: React.FC<PaginationProps> = ({
                 بعدی
             </button> */}
       </div>
+    </div>
   );
 };
 

src/pages/customer/List.tsx

@@ -1,122 +1,120 @@
-import { FC, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Button from '../../components/Button'
-import { Add, Eye } from 'iconsax-react'
-import Select from '../../components/Select'
-import Input from '../../components/Input'
-import Td from '../../components/Td'
-import { Link } from 'react-router-dom'
-import { Pages } from '../../config/Pages'
-import { useGetCustomers } from './hooks/useCustomerData'
-import PageLoading from '../../components/PageLoading'
-import { CustomerItemType } from './types/CustomerTypes'
-import Pagination from '../../components/Pagination'
+import { Add, Eye } from "iconsax-react";
+import { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import Button from "../../components/Button";
+import Input from "../../components/Input";
+import PageLoading from "../../components/PageLoading";
+import Pagination from "../../components/Pagination";
+import Select from "../../components/Select";
+import Td from "../../components/Td";
+import { Pages } from "../../config/Pages";
+import { useGetCustomers } from "./hooks/useCustomerData";
+import { CustomerItemType } from "./types/CustomerTypes";
 
 const CustomerList: FC = () => {
-
-    const { t } = useTranslation('global')
-    const [page, setPage] = useState(1)
-    const getCustomers = useGetCustomers(page)
+  const { t } = useTranslation("global");
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+  const getCustomers = useGetCustomers(page, limit);
 
   return (
-        <div className='mt-4'>
-            <div className='flex w-full justify-between items-center'>
-                <div>
-                    {t('customer.customer_list')}
-                </div>
+    <div className="mt-4">
+      <div className="flex w-full justify-between items-center">
+        <div>{t("customer.customer_list")}</div>
         <Link to={Pages.customer.create}>
-                    <Button
-                        className='px-5'
-                    >
-                        <div className='flex gap-2'>
+          <Button className="px-5">
+            <div className="flex gap-2">
               <Add
-                                className='size-5'
-                                color='#fff'
+                className="size-5"
+                color="#fff"
               />
-                            <div>{t('customer.add_cutomer')}</div>
+              <div>{t("customer.add_cutomer")}</div>
             </div>
           </Button>
         </Link>
       </div>
 
-            <div className='flex justify-between items-center mt-12'>
-                <div className='flex gap-4'>
+      <div className="flex justify-between items-center mt-12">
+        <div className="flex gap-4">
           <Select
-                        className='w-36'
+            className="w-36"
             items={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
+              { label: "All", value: "all" },
+              { label: "Active", value: "active" },
+              { label: "Inactive", value: "inactive" },
             ]}
-                        placeholder={t('service.category')}
+            placeholder={t("service.category")}
           />
           <Select
-                        className='w-36'
+            className="w-36"
             items={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
+              { label: "All", value: "all" },
+              { label: "Active", value: "active" },
+              { label: "Inactive", value: "inactive" },
             ]}
-                        placeholder={t('service.status')}
+            placeholder={t("service.status")}
           />
         </div>
         <div>
           <Input
-                        variant='search'
-                        placeholder={t('service.search')}
-                        className='bg-white border border-border'
+            variant="search"
+            placeholder={t("service.search")}
+            className="bg-white border border-border"
           />
         </div>
       </div>
 
-            {
-                getCustomers.isPending ?
+      {getCustomers.isPending ? (
         <PageLoading />
-                    :
-                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
-                        <table className='w-full text-sm '>
-                            <thead className='thead'>
+      ) : (
+        <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={''} />
+                <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) => {
+              {getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
                 return (
-                                            <tr key={item.id} className='tr'>
-                                                <Td text={item.firstName + ' ' + item.lastName} />
+                  <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.email ? item.email : ""} />
                     <Td text={item.subscriptionsCount} />
-                                                <Td text={''}>
+                    <Td text={""}>
                       <Link to={Pages.receipts.index + `?user=${item.id}`}>
-                                                        <div className='text-[#0047FF]'>{item.invoicesCount} صورت حساب</div>
+                        <div className="text-[#0047FF]">{item.invoicesCount} صورت حساب</div>
                       </Link>
                     </Td>
-                                                <Td text={''}>
+                    <Td text={""}>
                       <Link to={Pages.ticket.list + `?user=${item.id}`}>
-                                                        <div className='text-[#0047FF]'>{item.ticketsCount} تیکت</div>
+                        <div className="text-[#0047FF]">{item.ticketsCount} تیکت</div>
                       </Link>
                     </Td>
-                                                <Td text={''}>
+                    <Td text={""}>
                       <Link to={Pages.customer.update + item.id}>
-                                                        <Eye size={20} color='#8C90A3' />
+                        <Eye
+                          size={20}
+                          color="#8C90A3"
+                        />
                       </Link>
                     </Td>
-                                                <Td text={''} />
+                    <Td text={""} />
                   </tr>
-                                        )
-                                    })
-                                }
-
+                );
+              })}
             </tbody>
           </table>
 
@@ -124,11 +122,13 @@ const CustomerList: FC = () => {
             totalPages={getCustomers.data?.data?.pager?.totalPages}
             currentPage={page}
             onPageChange={setPage}
+            limit={limit}
+            onLimitChange={setLimit}
           />
         </div>
-            }
+      )}
     </div>
-    )
-}
+  );
+};
 
-export default CustomerList
+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) => {
   return useQuery({
-    queryKey: ["customers", page],
-    queryFn: () => api.getCustomers(page, withoutPaginate),
+    queryKey: ["customers", page, limit],
+    queryFn: () => api.getCustomers(page, limit, withoutPaginate),
   });
 };
 
@@ -27,8 +27,7 @@ export const useGetCities = (provincesId: string) => {
 export const useCreateCustomer = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (variables: CreateCustomerType) =>
-      api.createCustomer(variables),
+    mutationFn: (variables: CreateCustomerType) => 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) =>
-      api.updateCustomer(id, variables),
+    mutationFn: (variables: CreateCustomerType) => api.updateCustomer(id, variables),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: ["customers"],

src/pages/customer/service/CustomerService.ts

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