Invoice list should display according to the selected date range in Collection module.

src/components/collections/CollectionList.jsx

@@ -29,14 +29,14 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
   const searchDebounce = useDebounce(searchString, 500);
   
   const { data, isLoading, isError, error } = useCollections(
-    ITEMS_PER_PAGE,
+    selectedProject,
-    currentPage,
+    searchDebounce,
     localToUtc(fromDate),
     localToUtc(toDate),
-    isPending,
+    ITEMS_PER_PAGE,
+    currentPage,
     true,
-    selectedProject,
+    isPending
-    searchDebounce
   );
   const { setProcessedPayment, setAddPayment, setViewCollection } =
     useCollectionContext();

src/hooks/useCollections.jsx

@@ -2,39 +2,80 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { CollectionRepository } from "../repositories/ColllectionRepository";
 import showToast from "../services/toastService";
 
+// export const useCollections = (
+//   pageSize,
+//   pageNumber,
+//   fromDate,
+//   toDate,
+//   isPending,
+//   isActive,
+//   projectId,
+//   searchString
+// ) => {
+//   return useQuery({
+//     queryKey: [
+//       "collections",
+//       pageSize,
+//       pageNumber,
+//       fromDate,
+//       toDate,
+//       isPending,
+//       isActive,
+//       projectId,
+//       searchString,
+//     ],
+
+//     queryFn: async () => {
+//       const response = await CollectionRepository.getCollections(
+//         pageSize,
+//         pageNumber,
+//         fromDate,
+//         toDate,
+//         isPending,
+//         isActive,
+//         projectId,
+//         searchString
+//       );
+//       return response.data;
+//     },
+
+//     keepPreviousData: true,
+//     staleTime: 1000 * 60 * 1,
+//   });
+// };
 export const useCollections = (
-  pageSize,
+  projectId,
-  pageNumber,
+  searchString,
   fromDate,
   toDate,
-  isPending,
+  pageSize,
+  pageNumber,
   isActive,
-  projectId,
+  isPending
-  searchString
 ) => {
   return useQuery({
     queryKey: [
       "collections",
-      pageSize,
-      pageNumber,
-      fromDate,
-      toDate,
-      isPending,
-      isActive,
       projectId,
       searchString,
+      fromDate,
+      toDate,
+      pageSize,
+      pageNumber,
+      isActive,
+      isPending,
     ],
 
     queryFn: async () => {
       const response = await CollectionRepository.getCollections(
-        pageSize,
+        projectId,
-        pageNumber,
+        searchString,
         fromDate,
         toDate,
-        isPending,
+        pageSize,
+        pageNumber,
         isActive,
-        projectId,
+        isPending
-        searchString
       );
       return response.data;
     },
@@ -44,7 +85,6 @@ export const useCollections = (
   });
 };
 
-
 export const useCollection = (collectionId) => {
   return useQuery({
     queryKey: ["collection", collectionId],

src/pages/collections/CollectionPage.jsx

@@ -117,7 +117,8 @@ const CollectionPage = () => {
             {/* Left side: Date Picker + Show Pending (stacked on mobile) */}
             <div className="col-12 col-md-6 d-flex flex-column flex-md-row flex-wrap align-items-start align-md-items-center gap-2 gap-md-3 mb-3 mb-md-0">
               <FormProvider {...methods}>
-                <DateRangePicker1 howManyDay={180} />
+                <DateRangePicker1 howManyDay={180} startField="fromDate"
+                  endField="toDate" />
               </FormProvider>
 
               <div className="form-check form-switch d-flex align-items-center mt-1">

src/repositories/ColllectionRepository.jsx

@@ -7,17 +7,37 @@ export const CollectionRepository = {
   updateCollection: (id, data) => {
     api.put(`/api/Collection/invoice/edit/${id}`, data)
   },
-  getCollections: (pageSize, pageNumber,fromDate,toDate, isPending,isActive,projectId, searchString) => {
+  // getCollections: (pageSize, pageNumber,fromDate,toDate, isPending,isActive,projectId, searchString) => {
-    let url = `/api/Collection/invoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isPending=${isPending}&isActive=${isActive}&searchString=${searchString}`;
+  //   let url = `/api/Collection/invoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isPending=${isPending}&isActive=${isActive}&searchString=${searchString}`;
 
+  //   const params = [];
+  //   if (fromDate) params.push(`fromDate=${fromDate}`);
+  //   if (toDate) params.push(`toDate=${toDate}`);
+  //   if(projectId) params.push(`projectId=${projectId}`)
+
+  //   if (params.length > 0) {
+  //     url += `&${params.join("&")}`;
+  //   }
+  //  return api.get(url);
+  // },
+
+  getCollections: (projectId, searchString, fromDate, toDate, pageSize, pageNumber, isActive, isPending) => {
+    let url = `/api/Collection/invoice/list`;
     const params = [];
-    if (fromDate) params.push(`fromDate=${fromDate}`);
+
-    if (toDate) params.push(`toDate=${toDate}`);
+    if (projectId) params.push(`projectId=${projectId}`);
-    if(projectId) params.push(`projectId=${projectId}`)
+    if (searchString) params.push(`search=${searchString}`);
+    if (fromDate) params.push(`dateFrom=${fromDate}`);
+    if (toDate) params.push(`dateTo=${toDate}`);
+    if (pageSize) params.push(`pageSize=${pageSize}`);
+    if (pageNumber) params.push(`pageNumber=${pageNumber}`);
+    if (isActive) params.push(`isActive=${isActive}`);
+    if (isPending) params.push(`isPending=${isPending}`);
 
     if (params.length > 0) {
-      url += `&${params.join("&")}`;
+      url += "?" + params.join("&");
     }
+
     return api.get(url);
   },