added table filter

src/components/loanscom/LoansCom.jsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useQuery } from "@tanstack/react-query";
 import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
-import TableWrapper from '../tableWrapper/TableWrapper'
+// import TableWrapper from '../tableWrapper/TableWrapper'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper';
 import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
@@ -15,14 +16,16 @@ import RouteLinks from '../../RouteLinks';
 
 export default function LoansCom() {
 
+    const [page, setPage] = useState(1)
+
     const {data:allLoans, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.loans,
-        queryFn: () => getLoans()
+        queryKey: [...queryKeys.loans, page],
+        queryFn: () => getLoans({page}),
+        staleTime: 0,
     })
 
     const loans = allLoans?.data?.loans // LOANS LIST
-    const loansCount = allLoans?.data?.count // LOANS LIST COUNT
-    // console.log('LOANS', loans)
+    const pagination = allLoans?.data?.pagination
 
     return (
         <div className='w-full flex flex-col gap-8'>
@@ -36,7 +39,7 @@ export default function LoansCom() {
                 : isError ?
                     <p className='text-red-500'>{error.message}</p>
                 :
-                    <TableWrapper data={loans} itemsPerPage={15}>
+                    <TablePaginatedWrapper data={loans} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
                     {({ data }) => (
                         <>
                             <table className="table-auto py-2 w-full text-sm">
@@ -121,7 +124,7 @@ export default function LoansCom() {
                             </table>
                         </>
                     )}
-                    </TableWrapper>
+                    </TablePaginatedWrapper>
                 }
             </div>
         </div>