feat(Tables): implement pagination and loading state handling across multiple tables

- Added `getPaginatedRowNumber` utility function to calculate the correct row number based on pagination.
- Integrated `isLoading` prop in `EmptyListWrapper` to conditionally render loading state.
- Updated various table components (Admins, CMS, Companies, Inquiries, etc.) to utilize the new pagination logic and loading state handling.
- Wrapped pagination components in `IsVisible` to conditionally display based on data availability.

src/components/Tables/customers/index.tsx

@@ -3,6 +3,7 @@ import { ExclamationIcon, PencilSquareIcon, TrashIcon } from "@/assets/icons";
 import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
 import { Building } from "@/components/Layouts/sidebar/icons";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import IsVisible from "@/components/ui/IsVisible";
 import ListHeader from "@/components/ui/ListHeader";
 import Modal from "@/components/ui/modal";
 import Pagination from "@/components/ui/pagination";
@@ -17,7 +18,7 @@ import {
 } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
-import { unixToDate } from "@/utils/shared";
+import { getPaginatedRowNumber, unixToDate } from "@/utils/shared";
 import { toast } from "react-toastify";
 import { Tooltip } from "react-tooltip";
 import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
@@ -52,7 +53,9 @@ const CustomersTable = () => {
     isMutating,
     setParams,
     assignCompanyCompaniesQuery,
+    shouldShowPagination,
   } = useCustomerListPresenter();
+
   return (
     <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
       <ListHeader
@@ -79,10 +82,17 @@ const CustomersTable = () => {
             list={allCustomers ?? []}
             columns={columns}
             emptyMessage="No Customers were found"
+            isLoading={isPending}
           >
             {allCustomers?.map((customer, index) => (
               <TableRow key={customer?.id ?? index}>
-                <TableCell colSpan={100}>{index + 1}</TableCell>
+                <TableCell colSpan={100}>
+                  {getPaginatedRowNumber({
+                    index,
+                    page: metadata?.page,
+                    limit: metadata?.limit,
+                  })}
+                </TableCell>
                 <TableCell colSpan={100}>{customer?.full_name}</TableCell>
                 <TableCell colSpan={100}>{customer?.email}</TableCell>
                 <TableCell colSpan={100}>
@@ -174,17 +184,19 @@ const CustomersTable = () => {
           </EmptyListWrapper>
         </TableBody>
       </Table>
-      <Pagination
-        currentPage={metadata?.page ? metadata?.page - 1 : 0}
-        totalPages={metadata?.pages ?? 1}
-        onPageChange={(e) => {
-          setParams((currentParams) => ({
-            ...currentParams,
-            offset: e.selected * (metadata?.limit ?? 10),
-            limit: metadata?.limit ?? 10,
-          }));
-        }}
-      />
+      <IsVisible condition={shouldShowPagination}>
+        <Pagination
+          currentPage={metadata?.page ? metadata?.page - 1 : 0}
+          totalPages={metadata?.pages ?? 1}
+          onPageChange={(e) => {
+            setParams((currentParams) => ({
+              ...currentParams,
+              offset: e.selected * (metadata?.limit ?? 10),
+              limit: metadata?.limit ?? 10,
+            }));
+          }}
+        />
+      </IsVisible>
       <Modal
         isOpen={isFilterModalOpen}
         onClose={() => setIsFilterModalOpen(false)}

src/components/Tables/customers/useCustomerListPresenter.ts

@@ -82,6 +82,9 @@ const useCustomerListPresenter = () => {
   };
 
   const customers = data?.data?.customers ?? [];
+  const shouldShowPagination =
+    !isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10;
+
   return {
     allCustomers: customers,
     metadata: data?.meta,
@@ -109,6 +112,7 @@ const useCustomerListPresenter = () => {
     isMutating,
     setParams,
     assignCompanyCompaniesQuery,
+    shouldShowPagination,
   };
 };