Merge branch 'Service_Project_Managment' of https://git.marcoaiot.com/admin/marco.pms.web into Service_Project_Managment

src/components/Dashboard/AttendanceOverview.jsx

@@ -100,9 +100,9 @@ const AttendanceOverview = () => {
   };
 
   return (
-    <div className="bg-white p-4 rounded shadow d-flex flex-column h-100">
+    <div className="bg-white px-4 rounded shadow d-flex flex-column h-100">
       {/* Header */}
-      <div className="d-flex justify-content-between align-items-center mb-3">
+      <div className="d-flex mt-2 justify-content-between align-items-center mb-3">
         <div className="card-title mb-0 text-start">
           <h5 className="mb-1 fw-bold">Attendance Overview</h5>
           <p className="card-subtitle">Role-wise present count</p>

src/components/Dashboard/Dashboard.jsx

@@ -12,11 +12,11 @@ import Teams from "./Teams";
 import TasksCard from "./Tasks";
 import ProjectCompletionChart from "./ProjectCompletionChart";
 import ProjectProgressChart from "./ProjectProgressChart";
-import ProjectOverview from "../Project/ProjectOverview";
+import AttendanceOverview from "./AttendanceOverview";
-import AttendanceOverview from "./AttendanceChart";
 import ExpenseAnalysis from "./ExpenseAnalysis";
 import ExpenseStatus from "./ExpenseStatus";
 import ExpenseByProject from "./ExpenseByProject";
+import ProjectStatistics from "../Project/ProjectStatistics";
 
 const Dashboard = () => {
 
@@ -46,32 +46,31 @@ const Dashboard = () => {
                         <ProjectCompletionChart />
                     </div>
                 )}
-
-                {!isAllProjectsSelected && (
-                    <div className="col-xxl-6 col-lg-6">
-                        <ProjectOverview />
-                    </div>
-                )}
-
                 <div className="col-xxl-6 col-lg-6">
                     <ProjectProgressChart />
                 </div>
-                <div className="col-12 col-xl-8">
-                    <div className="card h-100">
-                        <ExpenseAnalysis />
-                    </div>
-                </div>
-
-                <div className="col-12 col-xl-4 col-md-6">
-                    <div className="card h-100">
-                        <ExpenseStatus />
-                    </div>
-                </div>
                 {!isAllProjectsSelected && (
                     <div className="col-12 col-md-6 mb-sm-0 mb-4">
                         <AttendanceOverview />
                     </div>
                 )}
+
+                {!isAllProjectsSelected && (
+                    <div className="col-xxl-4 col-lg-4">
+                        <ProjectStatistics />
+                    </div>
+                )}
+                <div className="col-12 col-xl-4 col-md-6">
+                    <div className="card ">
+                        <ExpenseStatus />
+                    </div>
+                </div>
+
+                <div className="col-12 col-xl-8">
+                    <div className="card h-100">
+                        <ExpenseAnalysis />
+                    </div>
+                </div>
                 <div className="col-12 col-md-6">
                     <ExpenseByProject />
                 </div>

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -7,11 +7,12 @@ import { FormProvider, useForm } from "react-hook-form";
 import { formatCurrency, localToUtc } from "../../utils/appUtils";
 import { useProjectName } from "../../hooks/useProjects";
 import { SpinnerLoader } from "../common/Loader";
+import flatColors from "../Charts/flatColor";
 
 const ExpenseAnalysis = () => {
   const projectId = useSelectedProject();
   const [projectName, setProjectName] = useState("All Project");
-  const { projectNames, loading } = useProjectName();
+  const { projectNames } = useProjectName();
 
   const methods = useForm({
     defaultValues: { startDate: "", endDate: "" },
@@ -50,7 +51,7 @@ const ExpenseAnalysis = () => {
     labels,
     legend: { show: false },
     dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
-    colors: ["#7367F0", "#28C76F", "#FF9F43", "#EA5455", "#00CFE8", "#FF78B8"],
+    colors: flatColors,
     plotOptions: {
       pie: {
         donut: {
@@ -79,11 +80,9 @@ const ExpenseAnalysis = () => {
 
   return (
     <>
-
       <div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
         <div className="text-start">
           <h5 className="mb-1 card-title">Expense Breakdown</h5>
-          {/* <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p> */}
           <p className="card-subtitle m-0">{projectName}</p>
         </div>
 
@@ -94,7 +93,6 @@ const ExpenseAnalysis = () => {
         </div>
       </div>
 
-      {/* Card body */}
       <div className="card-body position-relative">
         {isLoading && (
           <div
@@ -114,7 +112,6 @@ const ExpenseAnalysis = () => {
           </div>
         )}
 
-
         {!isLoading && report.length > 0 && (
           <>
             {isFetching && (
@@ -123,50 +120,59 @@ const ExpenseAnalysis = () => {
               </div>
             )}
 
-            <div className="d-flex justify-content-center mb-3">
+            <div className="row">
+              {/* Chart Column */}
+              <div className="col-12 col-lg-6 d-flex justify-content-center mt-5 mb-3 mb-lg-0">
                 <Chart
                   options={donutOptions}
                   series={series}
                   type="donut"
-                width="100%"
+                  width="70%"
                   height={320}
                 />
               </div>
 
-            <div className="mb-2 w-100">
+              {/* Data/Legend Column */}
-              <div className="row g-2">
+              <div className="col-12 mt-6 col-lg-6">
+                <div className="row g-4">
                   {report.map((item, idx) => (
                     <div
-                    className="col-12 col-sm-6 d-flex align-items-start"
+                      className="col-6"
                       key={idx}
-                  >
-                    <div className="avatar me-2">
-                      <span
-                        className="avatar-initial rounded-2"
                       style={{
-                          backgroundColor:
+                        borderLeft: `3px solid ${flatColors[idx % flatColors.length]}`,
-                            donutOptions.colors[idx % donutOptions.colors.length],
+                      }}
+                    >
+                      <div className="d-flex flex-column text-start">
+                        <small
+                          className="fw-semibold text-wrap text-dark"
+                          style={{
+                            fontSize: "0.8rem",
+                            whiteSpace: "normal",
+                            wordBreak: "break-word",
+                            lineHeight: "1.2",
+                          }}
+                        >
+                          {item.projectName}
+                        </small>
+                        <span
+                          className="fw-semibold text-muted"
+                          style={{
+                            fontSize: "0.75rem",
                           }}
                         >
-                        <i className="bx bx-receipt fs-4"></i>
-                      </span>
-                    </div>
-                    <div className="d-flex flex-column gap-1 text-start">
-                      <small className="fw-semibold">{item.projectName}</small>
-                      <span className="fw-semibold text-muted ms-1">
                           {formatCurrency(item.totalApprovedAmount)}
                         </span>
                       </div>
                     </div>
+
                   ))}
                 </div>
               </div>
+            </div>
           </>
         )}
       </div>
-
-      {/* Header */}
-
     </>
   );
 };

src/components/Dashboard/ExpenseByProject.jsx

@@ -92,7 +92,7 @@ const ExpenseByProject = () => {
     <div className="card shadow-sm h-100 rounded ">
       {/* Header */}
       <div className="card-header">
-        <div className="d-flex justify-content-start align-items-center mb-1 mt-1">
+        <div className="d-flex justify-content-between align-items-center mb-1 mt-1">
           <div className="text-start">
             <h5 className="mb-1 me-6 card-title">Monthly Expense -</h5>
             <p className="card-subtitle m-0">{projectName}</p>

src/components/Dashboard/ExpenseStatus.jsx

@@ -103,7 +103,7 @@ const ExpenseStatus = () => {
                   </div>
                   <div>
                     <small
-                      className={`text-royalblue ${countDigit(item?.count || 0) >= 3 ? "text-xl" : "text-2xl"
+                      className={`text-royalblue ${countDigit(item?.count || 0) >= 3 ? "text-xl" : "text-xl"
                         } text-gray-500`}
                     >
                       {item?.count || 0}
@@ -137,7 +137,7 @@ const ExpenseStatus = () => {
               </div>
               <div className="d-flex align-items-center gap-2">
                 <span
-                  className={`text-end text-royalblue ${countDigit(data?.totalAmount || 0) > 3 ? "text-" : "text-3xl"
+                  className={`text-end text-royalblue ${countDigit(data?.totalAmount || 0) > 3 ? "text-xl" : "text-3xl"
                     } text-md`}
                 >
                   {formatCurrency(data?.totalAmount || 0)}

src/components/Dashboard/ProjectCompletionChart.jsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
 import HorizontalBarChart from "../Charts/HorizontalBarChart";
 import { useProjects } from "../../hooks/useProjects";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
 
 const ProjectCompletionChart = () => {
-  const { data: projects = [], isLoading: loading, isError, error } = useProjects();
 
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data: projects, isLoading: loading, isError, error } = useProjects(currentPage, ITEMS_PER_PAGE);
 
+  console.log("Kartik", projects)
   // Bar chart logic
   const projectNames = projects?.map((p) => p.name) || [];
   const projectProgress =

src/components/Layout/Sidebar.jsx

@@ -99,7 +99,7 @@ const MenuItem = (item) => {
         className={`menu-link ${hasSubmenu ? "menu-toggle" : ""}`}
         target={item.link?.includes("http") ? "_blank" : undefined}
       >
-        <i className={`menu-icon tf-icons ${item.icon}`}></i>
+        {item.icon && <i className={`menu-icon tf-icons ${item.icon}`}></i>}
         <div>{item.name}</div>
         {item.available === false && (
           <div className="badge bg-label-primary fs-tiny rounded-pill ms-auto">

src/components/Project/ProjectStatistics.jsx

@@ -9,7 +9,7 @@ import {
 import ReactApexChart from "react-apexcharts";
 import Chart from "react-apexcharts";
 
-const ProjectOverview = ({ project }) => {
+const ProjectStatistics = ({ project }) => {
   const { data } = useProjects();
   const [current_project, setCurrentProject] = useState(
     data?.find((pro) => pro.id == project)
@@ -165,7 +165,7 @@ const ProjectOverview = ({ project }) => {
   }, [selectedProject]);
 
   return (
-    <div className="card" style={{ minHeight: "490px" }}>
+    <div className="card h-100">
       <div className="card-header text-start">
         <h5 className="card-action-title mb-0">
           {" "}
@@ -247,4 +247,4 @@ const ProjectOverview = ({ project }) => {
   );
 };
 
-export default ProjectOverview;
+export default ProjectStatistics;

src/components/collections/AddPayment.jsx

@@ -72,7 +72,7 @@ const AddPayment = ({ onClose }) => {
 
             <div className="col-12 col-md-6  mb-2">
               <Label required>Transaction Date </Label>
-              <DatePicker
+              <DatePicker className="w-100"
                 name="paymentReceivedDate"
                 control={control}
                 minDate={

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/hooks/useProjects.js

@@ -20,13 +20,13 @@ export const useCurrentService = () => {
 
 // ------------------------------Query-------------------
 
-export const useProjects = (pageSize,pageNumber) => {
+export const useProjects = (pageNumber,pageSize) => {
   const loggedUser = useSelector((store) => store.globalVariables.loginUser);
   return useQuery({
-    queryKey: ["ProjectsList",pageSize,pageNumber],
+    queryKey: ["ProjectsList",pageNumber,pageSize],
     queryFn: async () => {
-      const response = await ProjectRepository.getProjectList(pageSize,pageNumber);
+      const response = await ProjectRepository.getProjectList(pageNumber,pageSize);
-      return response.data;
+      return response?.data?.data;
     },
     enabled: !!loggedUser,
   });

src/pages/AdvancePayment/AdvancePaymentPage.jsx

@@ -40,13 +40,12 @@ const AdvancePaymentPage = () => {
     });
   }, [reset]);
 
-
   return (
     <AdvancePaymentContext.Provider value={{ setBalance }}>
       <div className="container-fluid">
         <Breadcrumb
           data={[
-            { label: "Home", link: "/" },
+            { label: "Home", link: "/dashboard" },
             { label: "Finance", link: "/advance-payment" },
             { label: "Advance Payment" },
           ]}
@@ -73,7 +72,12 @@ const AdvancePaymentPage = () => {
                       balance > 0 ? "text-success" : "text-danger"
                     } fs-5 fw-bold ms-1`}
                   >
-                  { balance > 0 ? <i className="bx bx-plus b-sm"></i> : <i className="bx bx-minus b-sm"></i>}  {formatFigure(balance, {
+                    {balance > 0 ? (
+                      <i className="bx bx-plus b-sm"></i>
+                    ) : (
+                      <i className="bx bx-minus b-sm"></i>
+                    )}{" "}
+                    {formatFigure(balance, {
                       type: "currency",
                       currency: "INR",
                     })}
@@ -85,8 +89,6 @@ const AdvancePaymentPage = () => {
             </div>
           </div>
           <AdvancePaymentList employeeId={selectedEmployeeId} />
-
-       
         </div>
       </div>
     </AdvancePaymentContext.Provider>

src/pages/Expense/ExpensePage.jsx

@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useState, useEffect, useRef } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+} from "react";
 import { useForm, useFormContext } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useSelector } from "react-redux";
@@ -19,7 +25,10 @@ import {
   VIEW_SELF_EXPENSE,
 } from "../../utils/constants";
 
-import { defaultFilter, SearchSchema } from "../../components/Expenses/ExpenseSchema";
+import {
+  defaultFilter,
+  SearchSchema,
+} from "../../components/Expenses/ExpenseSchema";
 import PreviewDocument from "../../components/Expenses/PreviewDocument";
 
 // Context
@@ -102,14 +111,14 @@ const ExpensePage = () => {
     setManageExpenseModal,
     setDocumentView,
     filterData,
-    removeFilterChip
+    removeFilterChip,
   };
 
   return (
     <ExpenseContext.Provider value={contextValue}>
       <div className="container-fluid">
         <Breadcrumb
-          data={[{ label: "Home", link: "/" }, { label: "Expense" }]}
+          data={[{ label: "Home", link: "/dashboard" }, { label: "Expense" }]}
         />
 
         {IsViewAll || IsViewSelf || IsCreatedAble ? (
@@ -128,7 +137,6 @@ const ExpensePage = () => {
                   </div>
 
                   <div className="col-6 text-end mt-2 mt-sm-0">
-
                     {IsCreatedAble && (
                       <button
                         className="btn btn-sm btn-primary"
@@ -151,8 +159,6 @@ const ExpensePage = () => {
               </div>
             </div>
 
-
-
             <ExpenseList
               filters={filters}
               groupBy={groupBy}

src/pages/Gallary/ImageGallaryPage.jsx

@@ -36,11 +36,10 @@ export const useGalleryContext = () => {
 };
 
 const ImageGalleryPage = () => {
-   const [filter,setFilter]  = useState()
+  const [filter, setFilter] = useState();
   const selectedProjectId = useSelectedProject();
   const { projectNames } = useProjectName();
 
-
   const [openGallery, setOpenGallery] = useState({ isOpen: false, data: null });
 
   const { data: assignedServices = [], isLoading } =
@@ -60,20 +59,22 @@ const ImageGalleryPage = () => {
 
   useEffect(() => {
     setShowTrigger(true);
-    setOffcanvasContent("Gallery Filter",<GalleryFilterPanel  onApply={setFilter}/>);
+    setOffcanvasContent(
+      "Gallery Filter",
+      <GalleryFilterPanel onApply={setFilter} />
+    );
 
     return () => {
-        setOffcanvasContent("",null)
+      setOffcanvasContent("", null);
       setShowTrigger(false);
-    }
+    };
-   },[])
+  }, []);
-
 
   return (
     <GalleryContext.Provider value={contextMessager}>
       <div className="container-fluid">
         <Breadcrumb
-          data={[{ label: "Home", link: "/" }, { label: "Gallery" }]}
+          data={[{ label: "Home", link: "/dashboard" }, { label: "Gallery" }]}
         />
 
         <div className="card page-min-h p-2">

src/pages/Organization/OrganizationPage.jsx

@@ -6,12 +6,15 @@ import OrganizationsList from "../../components/Organization/OrganizationsList";
 const OrganizationPage = () => {
   const { isOpen, orgData, startStep, onOpen, flowType } =
     useOrganizationModal();
-  const [searchText, setSearchText] = useState("")
+  const [searchText, setSearchText] = useState("");
 
   return (
     <div className="container-fluid">
       <Breadcrumb
-        data={[{ label: "Home", link: "/" }, { label: "Organizations" }]}
+        data={[
+          { label: "Home", link: "/dashboard" },
+          { label: "Organizations" },
+        ]}
       />
       <div className="card my-3 px-sm-4 px-0">
         <div className="card-body py-2 px-3">
@@ -42,14 +45,11 @@ const OrganizationPage = () => {
               </button>
             </div>
           </div>
-    
-
         </div>
       </div>
       <div className="card page-min-h px-sm-4">
         <OrganizationsList searchText={searchText} />
       </div>
-
     </div>
   );
 };

src/pages/PaymentRequest/PaymentRequestPage.jsx

@@ -6,7 +6,10 @@ import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
 import { useFab } from "../../Context/FabContext";
 import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestList";
 import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel";
-import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
+import {
+  defaultPaymentRequestFilter,
+  SearchPaymentRequestSchema,
+} from "../../components/PaymentRequest/PaymentRequestSchema";
 import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
 import PreviewDocument from "../../components/Expenses/PreviewDocument";
 import MakeExpense from "../../components/PaymentRequest/MakeExpense";
@@ -15,7 +18,9 @@ export const PaymentRequestContext = createContext();
 export const usePaymentRequestContext = () => {
   const context = useContext(PaymentRequestContext);
   if (!context) {
-    throw new Error("usePaymentRequestContext must be used within an ExpenseProvider");
+    throw new Error(
+      "usePaymentRequestContext must be used within an ExpenseProvider"
+    );
   }
   return context;
 };
@@ -24,16 +29,21 @@ const PaymentRequestPage = () => {
     IsOpen: null,
     RequestId: null,
   });
-  const [ViewRequest,setVieRequest] = useState({view:false,requestId:null})
+  const [ViewRequest, setVieRequest] = useState({
+    view: false,
+    requestId: null,
+  });
   const { setOffcanvasContent, setShowTrigger } = useFab();
   const [filters, setFilters] = useState(defaultPaymentRequestFilter);
   const [ViewDocument, setDocumentView] = useState({
     IsOpen: false,
     Image: null,
   });
-    const [isExpenseGenerate,setIsExpenseGenerate] = useState({IsOpen: null,
+  const [isExpenseGenerate, setIsExpenseGenerate] = useState({
-    RequestId: null,})
+    IsOpen: null,
-    const [modalSize,setModalSize] = useState("md")
+    RequestId: null,
+  });
+  const [modalSize, setModalSize] = useState("md");
   const [search, setSearch] = useState("");
 
   const contextValue = {
@@ -42,11 +52,10 @@ const PaymentRequestPage = () => {
     setDocumentView,
     setModalSize,
     setIsExpenseGenerate,
-    isExpenseGenerate
+    isExpenseGenerate,
   };
 
   useEffect(() => {
-
     setShowTrigger(true);
     setOffcanvasContent(
       "Payment Request Filters",
@@ -65,7 +74,7 @@ const PaymentRequestPage = () => {
         {/* Breadcrumb */}
         <Breadcrumb
           data={[
-            { label: "Home", link: "/" },
+            { label: "Home", link: "/dashboard" },
             { label: "Finance", link: "/Payment Request" },
             { label: "Payment Request" },
           ]}
@@ -106,10 +115,7 @@ const PaymentRequestPage = () => {
             </div>
           </div>
         </div>
-        <PaymentRequestList
+        <PaymentRequestList search={search} filters={filters} />
-          search={search}
-          filters={filters}
-        />
 
         {/* Add/Edit Modal */}
         {ManageRequest.IsOpen && (
@@ -144,10 +150,16 @@ const PaymentRequestPage = () => {
           <GlobalModel
             isOpen
             size="md"
-            closeModal={() => setIsExpenseGenerate({IsOpen:false, requestId: null})}
+            closeModal={() =>
+              setIsExpenseGenerate({ IsOpen: false, requestId: null })
+            }
           >
             <MakeExpe
-            nse   onClose={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} />
+              nse
+              onClose={() =>
+                setIsExpenseGenerate({ IsOpen: false, requestId: null })
+              }
+            />
           </GlobalModel>
         )}
 
@@ -161,7 +173,6 @@ const PaymentRequestPage = () => {
             <PreviewDocument imageUrl={ViewDocument.Image} />
           </GlobalModel>
         )}
-        
       </div>
     </PaymentRequestContext.Provider>
   );

src/pages/collections/CollectionPage.jsx

@@ -101,7 +101,7 @@ const CollectionPage = () => {
   ) {
     return (
       <AccessDenied
-        data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
+        data={[{ label: "Home", link: "/dashboard" }, { label: "Collection" }]}
       />
     );
   }
@@ -109,7 +109,10 @@ const CollectionPage = () => {
     <CollectionContext.Provider value={contextMassager}>
       <div className="container-fluid">
         <Breadcrumb
-          data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
+          data={[
+            { label: "Home", link: "/dashboard" },
+            { label: "Collection" },
+          ]}
         />
 
         <div className="card my-3 py-2 px-sm-4 px-2">
@@ -117,7 +120,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">
@@ -152,16 +156,18 @@ const CollectionPage = () => {
                 <button
                   className="btn btn-sm btn-primary"
                   type="button"
-                  onClick={() => setCollection({ isOpen: true, invoiceId: null })}
+                  onClick={() =>
+                    setCollection({ isOpen: true, invoiceId: null })
+                  }
                 >
                   <i className="bx bx-plus-circle me-2"></i>
-                  <span className="d-none d-md-inline-block">Add New Collection</span>
+                  <span className="d-none d-md-inline-block">
+                    Add New Collection
+                  </span>
                 </button>
               )}
             </div>
-
           </div>
-
         </div>
 
         <CollectionList

src/pages/project/ProjectDetails.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
-import ProjectOverview from "../../components/Project/ProjectOverview";
+import ProjectOverview from "../../components/Project/ProjectStatistics";
 import AboutProject from "../../components/Project/AboutProject";
 import ProjectNav from "../../components/Project/ProjectNav";
 import Teams from "../../components/Project/Team/Teams";
@@ -15,7 +15,7 @@ import { useProjectDetails, useProjectName } from "../../hooks/useProjects";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
 import eventBus from "../../services/eventBus";
 import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
-import AttendanceOverview from "../../components/Dashboard/AttendanceChart";
+import AttendanceOverview from "../../components/Dashboard/AttendanceOverview";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import ProjectDocuments from "../../components/Project/ProjectDocuments";
 import ProjectSetting from "../../components/Project/ProjectSetting";

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);
   },
 

src/repositories/ProjectRepository.jsx

@@ -1,7 +1,7 @@
 import { api } from "../utils/axiosClient";
 
 const ProjectRepository = {
-  getProjectList: (pageSize,pageNumber) => api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
+  getProjectList: (pageNumber,pageSize) => api.get(`/api/project/list?&pageNumber=${pageNumber}&pageSize=${pageSize}`),
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${projetid}`),