added purchase list

src/components/purchase/PurchaseList.jsx

@@ -1,13 +1,33 @@
-import React from 'react'
-
-const PurchaseList = ({purchaseId}) => {
+import React, { useState } from "react";
+import { usePurchasesList } from "../../hooks/usePurchase";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+import Pagination from "../common/Pagination";
 
+const PurchaseList = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, isLoading, isError, error } = usePurchasesList(
+    ITEMS_PER_PAGE,
+    currentPage,
+    true,
+    {}
+  );
+  const paginate = (page) => {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
+      setCurrentPage(page);
+    }
+  };
   return (
-    <div className='row'>
-      
+    <div className="row">
+      {data?.data?.length > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={data.totalPages}
+          onPageChange={paginate}
+        />
+      )}
     </div>
-  )
-}
+  );
+};
 
 export default PurchaseList;
-``
+``;

src/hooks/usePurchase.jsx

@@ -1,8 +1,45 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { PurchaseRepository } from "../repositories/PurchaseRepository";
 import showToast from "../services/toastService";
 
+export const usePurchasesList = (
+  pageSize,
+  pageNumber,
+  isActive,
+  filter,
+  searchString
+) => {
+  return useQuery({
+    queryKey: [
+      "purchase_list",
+      pageSize,
+      pageNumber,
+      isActive,
+      filter,
+      searchString,
+    ],
+    queryFn: async () => {
+      const resp = await PurchaseRepository.GetPurchaseList(
+        pageSize,
+        pageNumber,
+        isActive,
+        filter,
+        searchString
+      );
+      return resp.data;
+    },
+  });
+};
 
+export const usePurchase = (id) => {
+  return useQuery({
+    queryKey: ["purchase", id],
+    queryFn: async () => {
+      const resp = await PurchaseRepository.GetPurchase(id);
+      return resp.data;
+    },
+  });
+};
 
 export const useCreatePurchaseInvoice = (onSuccessCallback) => {
   const queryClient = useQueryClient();

src/pages/purchase/PurchasePage.jsx

@@ -3,6 +3,7 @@ import Breadcrumb from "../../components/common/Breadcrumb";
 import showToast from "../../services/toastService";
 import GlobalModel from "../../components/common/GlobalModel";
 import ManagePurchase from "../../components/purchase/ManagePurchase";
+import PurchaseList from "../../components/purchase/PurchaseList";
 
 export const PurchaseContext = createContext();
 export const usePurchaseContext = () => {
@@ -40,7 +41,7 @@ const PurchasePage = () => {
           </div>
         </div>
 
-        {/* MOdals */}
+        <PurchaseList />
 
         <GlobalModel
           isOpen={addePurchase}

src/repositories/PurchaseRepository.jsx

@@ -3,5 +3,14 @@ import { api } from "../utils/axiosClient";
 export const PurchaseRepository = {
   CreatePurchase: (data) => api.post("/api/PurchaseInvoice/create", data),
   GetPurchaseList: (pageSize, pageNumber, isActive, filter, searchString) =>
-    api.get(`/api/PurchaseInvoice/list`),
+    api.get(
+      `/api/PurchaseInvoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isActive=${isActive}&filter=${filter}&searchString=${searchString}`
+    ),
+
+  GetPurchase:(id)=>api.get(`/api/PurchaseInvoice/details/${id}`)
 };
+
+//  const filterPayload = JSON.stringify({
+//       sortFilters,
+//       groupByColumn: groupBy || null,
+//     });