Adding AdvancePayment a list view.

src/components/AdvancePayment/AdvancePaymentList.jsx

@@ -1,6 +1,6 @@
 
 import React, { useEffect, useMemo } from "react";
-import { useExpenseTransactions } from "../../hooks/useExpense";
+import { useExpenseAllTransactionsList, useExpenseTransactions } from "../../hooks/useExpense";
 import Error from "../common/Error";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import Loader, { SpinnerLoader } from "../common/Loader";
@@ -11,11 +11,16 @@ import { employee } from "../../data/masters";
 import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPage";
 import { formatFigure } from "../../utils/appUtils";
 
-const AdvancePaymentList = ({ employeeId }) => {
+const AdvancePaymentList = ({ employeeId, searchString }) => {
   const { setBalance } = useAdvancePaymentContext();
   const { data, isError, isLoading, error, isFetching } =
     useExpenseTransactions(employeeId, { enabled: !!employeeId });
 
+  const { data: getAllData } =
+    useExpenseAllTransactionsList(searchString ?? "");
+
+  console.log("Kartik", getAllData)
+
   const records = Array.isArray(data) ? data : [];
 
   let currentBalance = 0;
@@ -154,8 +159,8 @@ const AdvancePaymentList = ({ employeeId }) => {
           </tr>
         </thead>
         <tbody>
-          {Array.isArray(data) && data.length > 0 ? (
-            data.map((row) => (
+          {Array.isArray(getAllData) && getAllData.length > 0 ? (
+            getAllData.map((row) => (
               <tr key={row.id}>
                 {columns.map((col) => (
                   <td key={col.key} className={`${col.align} p-2`}>

src/components/AdvancePayment/AdvancePaymentList1.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
+
+const AdvancePaymentList1 = ({searchString}) => {
+    const { data, isError, isLoading, error, isFetching } =
+        useExpenseAllTransactionsList();
+    return (
+        <div className="card page-min-h table-responsive px-sm-4">
+            <div className="card-datatable" id="payment-request-table">
+
+            </div>
+        </div>
+    )
+}
+
+export default AdvancePaymentList1

src/hooks/useExpense.js

@@ -438,6 +438,15 @@ export const useExpenseTransactions = (employeeId)=>{
     keepPreviousData:true,
   })
 }
+export const useExpenseAllTransactionsList = (searchString) => {
+  return useQuery({
+    queryKey: ["transaction", searchString], 
+    queryFn: async () => {
+      const resp = await ExpenseRepository.getAllTranctionList(searchString);
+      return resp.data;
+    },    
+  });
+};
 //#endregion
 
 // ---------------------------Put Post Recurring Expense---------------------------------------

src/pages/AdvancePayment/AdvancePaymentPage.jsx

@@ -29,10 +29,13 @@ const AdvancePaymentPage = () => {
   const { control, reset, watch } = useForm({
     defaultValues: {
       employeeId: "",
+      searchString: "",
     },
   });
 
   const selectedEmployeeId = watch("employeeId");
+  const searchString = watch("searchString");
+
   useEffect(() => {
     const selectedEmpoyee = sessionStorage.getItem("transaction-empId");
     reset({
@@ -68,8 +71,7 @@ const AdvancePaymentPage = () => {
                 <>
                   <label className="fs-5 fw-semibold">Current Balance : </label>
                   <span
-                    className={`${
-                      balance > 0 ? "text-success" : "text-danger"
+                    className={`${balance > 0 ? "text-success" : "text-danger"
                       } fs-5 fw-bold ms-1`}
                   >
                     {balance > 0 ? (
@@ -88,7 +90,7 @@ const AdvancePaymentPage = () => {
               )}
             </div>
           </div>
-          <AdvancePaymentList employeeId={selectedEmployeeId} />
+          <AdvancePaymentList employeeId={selectedEmployeeId} searchString={searchString} />
         </div>
       </div>
     </AdvancePaymentContext.Provider>

src/pages/AdvancePayment/AdvancePaymentPage1.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Breadcrumb from '../../components/common/Breadcrumb'
+import AdvancePaymentList1 from '../../components/AdvancePayment/AdvancePaymentList1'
+import { useForm } from 'react-hook-form';
+
+const AdvancePaymentPage1 = () => {
+    const { control, reset, watch } = useForm({
+        defaultValues: {
+            searchString: "",
+        },
+    });
+    const searchString = watch("searchString");
+    return (
+        <div className="container-fluid">
+            <Breadcrumb
+                data={[
+                    { label: "Home", link: "/dashboard" },
+                    { label: "Finance", link: "/advance-payment" },
+                    { label: "Advance Payment" },
+                ]}
+            />
+            <div className="card px-4 py-2 page-min-h ">
+                <AdvancePaymentList1 searchString={searchString} />
+            </div>
+        </div>
+    )
+}
+
+export default AdvancePaymentPage1

src/repositories/ExpsenseRepository.jsx

@@ -70,6 +70,8 @@ const ExpenseRepository = {
   //#region Advance Payment
   GetTranctionList: (employeeId) =>
     api.get(`/api/Expense/get/transactions/${employeeId}`),
+  getAllTranctionList: (searchString) =>
+    api.get(`/api/Expense/get/advance-payment/employee/list?searchString=${searchString}`),
   //#endregion
 
 

src/router/AppRoutes.jsx

@@ -61,6 +61,7 @@ import RecurringExpensePage from "../pages/RecurringExpense/RecurringExpensePage
 import AdvancePaymentPage from "../pages/AdvancePayment/AdvancePaymentPage";
 import ServiceProjectDetail from "../pages/ServiceProject/ServiceProjectDetail";
 import ManageJob from "../components/ServiceProject/ManageJob";
+import AdvancePaymentPage1 from "../pages/AdvancePayment/AdvancePaymentPage1";
 const router = createBrowserRouter(
   [
     {
@@ -116,7 +117,7 @@ const router = createBrowserRouter(
             { path: "/expenses", element: <ExpensePage /> },
             { path: "/payment-request", element: <PaymentRequestPage /> },
             { path: "/recurring-payment", element: <RecurringExpensePage /> },
-            { path: "/advance-payment", element: <AdvancePaymentPage /> },
+            { path: "/advance-payment", element: <AdvancePaymentPage1 /> },
             { path: "/collection", element: <CollectionPage /> },
             { path: "/masters", element: <MasterPage /> },
             { path: "/tenants", element: <TenantPage /> },