feat(inquiries): Add pagination functionality to inquiries list table

- Import and integrate Pagination component into inquiries table
- Add allInquiries data exposure to access pagination metadata
- Expose setParams function to allow dynamic pagination updates
- Initialize default offset and limit parameters (10 items per page)
- Reset offset to 0 when applying new filters for consistent pagination
- Implement page change handler to update offset based on selected page
- Maintain filter state while navigating between pages

src/components/Tables/inquiries/index.tsx

@@ -3,6 +3,8 @@ import { TrashIcon } from "@/assets/icons";
 import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import ListHeader from "@/components/ui/ListHeader";
+import Modal from "@/components/ui/modal";
+import Pagination from "@/components/ui/pagination";
 import Status from "@/components/ui/Status";
 import {
   Table,
@@ -16,14 +18,14 @@ import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { formatPhoneNumber, unixToDate } from "@/utils/shared";
 import { Tooltip } from "react-tooltip";
-import useInquiriesListPresenter from "./useInquiriesListPresenter";
 import InquiriesListFilters from "./InquiriesListFilters";
-import Modal from "@/components/ui/modal";
+import useInquiriesListPresenter from "./useInquiriesListPresenter";
 
 const InquiriesTable = () => {
   const {
     columns,
     inquiries,
+    allInquiries,
     isFilterModalOpen,
     setIsFilterModalOpen,
     isPending,
@@ -38,6 +40,7 @@ const InquiriesTable = () => {
     watch,
     setFilterValue,
     isMutating,
+    setParams,
   } = useInquiriesListPresenter();
   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">
@@ -118,6 +121,19 @@ const InquiriesTable = () => {
           watch={watch}
         />
       </Modal>
+      <Pagination
+        currentPage={
+          allInquiries?.meta?.page ? allInquiries?.meta?.page - 1 : 0
+        }
+        totalPages={allInquiries?.meta?.pages ?? 1}
+        onPageChange={(e) => {
+          setParams((currentParams) => ({
+            ...currentParams,
+            offset: e.selected * (allInquiries?.meta?.limit ?? 10),
+            limit: allInquiries?.meta?.limit ?? 10,
+          }));
+        }}
+      />
       {isDeleteModalOpen && (
         <ConfirmationModal
           isOpen={isDeleteModalOpen}

src/components/Tables/inquiries/useInquiriesListPresenter.ts

@@ -38,7 +38,10 @@ const useInquiriesListPresenter = () => {
   } = useForm();
 
   useEffect(() => {
-    const newParams: Record<string, any> = {};
+    const newParams: Record<string, any> = {
+      offset: 0,
+      limit: 10,
+    };
     for (const [key, value] of searchParams.entries()) {
       newParams[key] = value;
     }
@@ -50,7 +53,7 @@ const useInquiriesListPresenter = () => {
   const { mutate } = useDeleteInquiry(() => setIsDeleteModalOpen(false));
 
   const search = (data: any) => {
-    const newParams = { ...params, ...data };
+    const newParams = { ...params, ...data, offset: 0 };
     const cleanedParams = deleteEmptyKeys(newParams);
     const queryString = new URLSearchParams(cleanedParams).toString();
     router.push(`${pathname}?${queryString}`);
@@ -65,6 +68,7 @@ const useInquiriesListPresenter = () => {
   return {
     columns,
     inquiries: data?.data.inquiries,
+    allInquiries: data,
     isFilterModalOpen,
     setIsFilterModalOpen,
     isPending,
@@ -79,6 +83,7 @@ const useInquiriesListPresenter = () => {
     watch,
     setFilterValue,
     isMutating,
+    setParams,
   };
 };