added pagination

src/components/Documents/DocumentsList.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useDocumentListByEntityId } from "../../hooks/useDocument";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import Avatar from "../common/Avatar";
@@ -6,25 +6,10 @@ import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import Loader from "../common/Loader";
 import { useDebounce } from "../../utils/appUtils";
 import { DocumentTableSkeleton } from "./DocumentSkeleton";
-import { useDocumentContext } from "./Documents";
+import { getDocuementsStatus, useDocumentContext } from "./Documents";
+import Pagination from "../common/Pagination";
+
 
-export const getDocuementsStatus = (status) => {
-  switch (status) {
-    case true:
-      return (
-        <span className="badge rounded-pill bg-label-success">Verified</span>
-      );
-    case false:
-      return (
-        <span className="badge rounded-pill bg-label-danger">Rejected</span>
-      );
-    case null:
-    default:
-      return (
-        <span className="badge rounded-pill bg-label-primary">Pending</span>
-      );
-  }
-};
 const DocumentsList = ({
   Document_Entity,
   Entity,
@@ -34,12 +19,13 @@ const DocumentsList = ({
   setRefetchFn,
 }) => {
   const debouncedSearch = useDebounce(searchText, 500);
+  const [currentPage,setCurrentPage] = useState(1)
   const { data, isError, isLoading, error, refetch, isFetching } =
     useDocumentListByEntityId(
       Document_Entity,
       Entity,
       ITEMS_PER_PAGE,
-      1,
+      currentPage,
       filters,
       debouncedSearch
     );
@@ -54,14 +40,18 @@ const DocumentsList = ({
     setIsRefetching(isFetching);
   }, [isFetching, setIsRefetching]);
 
-  const {setManageDoc} = useDocumentContext()
+  const {setManageDoc,setViewDoc} = useDocumentContext()
 
   // check no data scenarios
-  const noData = !isLoading && !isError && data?.length === 0;
+  const noData = !isLoading && !isError && data?.data.length === 0;
   const isSearchEmpty = noData && !!debouncedSearch;
   const isFilterEmpty = noData && false;
   const isInitialEmpty = noData && !debouncedSearch;
-
+   const paginate = (page) => {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
+      setCurrentPage(page);
+    }
+  };
   if (isLoading || isFetching) return <DocumentTableSkeleton />
   if (isError)
     return <div>Error: {error?.message || "Something went wrong"}</div>;
@@ -138,7 +128,7 @@ const DocumentsList = ({
           </tr>
         </thead>
         <tbody className="text-start">
-          {data?.map((doc) => (
+          {data?.data?.map((doc) => (
             <tr key={doc.id}>
               {DocumentColumns.map((col) => (
                 <td key={col.key} className={`sorting ${col.align}`}>
@@ -147,7 +137,7 @@ const DocumentsList = ({
               ))}
               <td className="text-center">
                 <div className="d-flex justify-content-center gap-2">
-                  <i className="bx bx-show text-primary cursor-pointer"></i>
+                  <i className="bx bx-show text-primary cursor-pointer" onClick={()=>setViewDoc({document:doc?.id,isOpen:true})}></i>
 
                   <i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>setManageDoc({document:doc?.id,isOpen:true})}></i>
 
@@ -158,6 +148,13 @@ const DocumentsList = ({
           ))}
         </tbody>
       </table>
+      {data?.data?.length > 0 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={data?.totalPages}
+            onPageChange={paginate}
+          />
+        )}
     </div>
   );
 };