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

@@ -15,12 +15,14 @@ import useTenderListPresenter from "./useTenderListPresenter";
 
 import { ExclamationIcon, EyeIcon } from "@/assets/icons";
 
+import IsVisible from "@/components/ui/IsVisible";
 import ListHeader from "@/components/ui/ListHeader";
 import Modal from "@/components/ui/modal";
 import Pagination from "@/components/ui/pagination";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { cn } from "@/lib/utils";
+import { getPaginatedRowNumber } from "@/utils/shared";
 import Link from "next/link";
 import TenderListFilters from "./TenderListFilters";
 const TendersTable = () => {
@@ -39,6 +41,7 @@ const TendersTable = () => {
     watch,
     setFilterValue,
     isMutating,
+    shouldShowPagination,
   } = useTenderListPresenter();
 
   return (
@@ -64,6 +67,7 @@ const TendersTable = () => {
             list={allTenders?.data.tenders ?? []}
             columns={columns}
             emptyMessage="No tenders were found"
+            isLoading={isPending}
           >
             {(allTenders?.data.tenders ?? []).map((item, index) => (
               <TableRow
@@ -71,7 +75,11 @@ const TendersTable = () => {
                 className="odd:bg-gray-2 dark:odd:bg-gray-7"
               >
                 <TableCell className="text-start" colSpan={100}>
-                  {index + 1}
+                  {getPaginatedRowNumber({
+                    index,
+                    page: allTenders?.meta?.page,
+                    limit: allTenders?.meta?.limit,
+                  })}
                 </TableCell>
                 <TableCell className="text-start" colSpan={100}>
                   {item.title}
@@ -145,17 +153,19 @@ const TendersTable = () => {
           watch={watch}
         />
       </Modal>
-      <Pagination
-        currentPage={allTenders?.meta?.page ? allTenders?.meta?.page - 1 : 0}
-        totalPages={allTenders?.meta?.pages ?? 1}
-        onPageChange={(e) => {
-          setParams((currentParams) => ({
-            ...currentParams,
-            offset: e.selected * (allTenders?.meta?.limit ?? 10),
-            limit: allTenders?.meta?.limit ?? 10,
-          }));
-        }}
-      />
+      <IsVisible condition={shouldShowPagination}>
+        <Pagination
+          currentPage={allTenders?.meta?.page ? allTenders?.meta?.page - 1 : 0}
+          totalPages={allTenders?.meta?.pages ?? 1}
+          onPageChange={(e) => {
+            setParams((currentParams) => ({
+              ...currentParams,
+              offset: e.selected * (allTenders?.meta?.limit ?? 10),
+              limit: allTenders?.meta?.limit ?? 10,
+            }));
+          }}
+        />
+      </IsVisible>
     </div>
   );
 };

src/components/Tables/tenders/useTenderListPresenter.ts

@@ -43,6 +43,8 @@ const useTenderListPresenter = () => {
   }, [searchParams, filterFormReset]);
 
   const { data, error, isPending } = useTendersQuery(params);
+  const shouldShowPagination =
+    !isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10;
 
   const search = (data: any) => {
     const newParams = { ...params, ...data, offset: 0 };
@@ -82,6 +84,7 @@ const useTenderListPresenter = () => {
     watch,
     setFilterValue,
     isMutating,
+    shouldShowPagination,
   };
 };