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/notification-history/index.tsx

@@ -2,6 +2,7 @@
 import { EyeIcon } from "@/assets/icons";
 import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import IsVisible from "@/components/ui/IsVisible";
 import Pagination from "@/components/ui/pagination";
 import Status from "@/components/ui/Status";
 import {
@@ -14,7 +15,7 @@ import {
 } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
-import { truncateString, unixToDate } from "@/utils/shared";
+import { getPaginatedRowNumber, truncateString, unixToDate } from "@/utils/shared";
 import { Tooltip } from "react-tooltip";
 
 import Boolean from "@/components/ui/Boolean";
@@ -40,6 +41,7 @@ const NotificationHistoryTable = () => {
     watch,
     search,
     isMutating,
+    shouldShowPagination,
   } = useNotificationHistoryTablePresenter();
 
   return (
@@ -65,10 +67,17 @@ const NotificationHistoryTable = () => {
               list={notificationHistory ?? []}
               columns={columns}
               emptyMessage="No notifications were found"
+              isLoading={isLoading}
             >
               {(notificationHistory ?? []).map((item, index) => (
                 <TableRow key={item.id}>
-                  <TableCell colSpan={100}>{index + 1}</TableCell>
+                  <TableCell colSpan={100}>
+                    {getPaginatedRowNumber({
+                      index,
+                      page: metadata?.page,
+                      limit: metadata?.limit,
+                    })}
+                  </TableCell>
                   <TableCell colSpan={100}>{item.title}</TableCell>
                   <TableCell colSpan={100}>{item.event_type}</TableCell>
                   <TableCell colSpan={100}>
@@ -117,17 +126,19 @@ const NotificationHistoryTable = () => {
             </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>
       </ShowcaseSection>
       <Modal
         isOpen={isFilterModalOpen}

src/components/Tables/notification-history/useNotificationHistoryTablePresenter.ts

@@ -14,6 +14,8 @@ const useNotificationHistoryTablePresenter = () => {
     ...apiDefaultParams,
   });
   const { data, isLoading } = useGetNotificationHistoryQuery(params);
+  const shouldShowPagination =
+    !isLoading && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10;
   const isMutating = useIsMutating();
   const columns: string[] = [
     "row",
@@ -54,6 +56,7 @@ const useNotificationHistoryTablePresenter = () => {
     setIsFilterModalOpen,
     isMutating,
     search,
+    shouldShowPagination,
   };
 };