adding list view in advance payment list.

src/components/AdvancePayment/AdvancePaymentList1.jsx

@@ -1,15 +1,108 @@
 import React from 'react'
 import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
 
-const AdvancePaymentList1 = ({searchString}) => {
+const AdvancePaymentList1 = ({ searchString }) => {
     const { data, isError, isLoading, error, isFetching } =
-        useExpenseAllTransactionsList();
+        useExpenseAllTransactionsList(searchString);
-    return (
+    console.log("Kartik", data)
-        <div className="card page-min-h table-responsive px-sm-4">
-            <div className="card-datatable" id="payment-request-table">
 
+    const recurringExpenseColumns = [
+        {
+            key: "date",
+            label: (
+                <>
+                    Date
+                </>
+            ),
+            align: "text-start",
+        },
+        { key: "description", label: "Description", align: "text-start" },
+        {
+            key: "credit",
+            label: (
+                <>
+                    Credit <i className="bx bx-rupee text-success"></i>
+                </>
+            ),
+            align: "text-end",
+        },
+        {
+            key: "debit",
+            label: (
+                <>
+                    Debit <i className="bx bx-rupee text-danger"></i>
+                </>
+            ),
+            align: "text-end",
+        },
+
+        {
+            key: "balance",
+            label: (
+                <>
+                    Balance <i className="bi bi-currency-rupee text-primary"></i>
+                </>
+            ),
+            align: "text-end fw-bold",
+        },
+
+    ];
+    return (
+            <div className="card-datatable" id="payment-request-table">
+                <div className="mx-2">
+                    {/* {Array.isArray(data) && data.length > 0 && ( */}
+                    <table className="table border-top dataTable text-nowrap  align-middle">
+                        <thead>
+                            <tr>
+                                {recurringExpenseColumns.map((col) => (
+                                    <th key={col.key} className={`sorting ${col.align}`}>
+                                        {col.label}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                                {data?.length > 0 ? (
+                                    data?.map((recurringExpense) => (
+                                        <tr
+                                            key={recurringExpense.id}
+                                            className="align-middle"
+                                            style={{ height: "40px" }}
+                                        >
+                                            {recurringExpenseColumns.map((col) => (
+                                                <td
+                                                    key={col.key}
+                                                    className={`d-table-cell ${col.align ?? ""} py-3`}
+                                                >
+                                                    {col?.customRender
+                                                        ? col?.customRender(recurringExpense)
+                                                        : col?.getValue(recurringExpense)}
+                                                </td>
+                                            ))}
+                                           
+                                        </tr>
+                                    ))
+                                ) : (
+                                    <tr>
+                                        <td
+                                            colSpan={recurringExpenseColumns?.length + 1}
+                                            className="text-center border-0 py-8"
+                                        ></td>
+                                    </tr>
+                                )}
+                            </tbody>
+                    </table>
+                    {/* )} */}
+                    {/* {!data ||
+                        data.length === 0
+                        && (
+                            <div className="d-flex justify-content-center align-items-center h-64">
+                                {isError ? (<p>{error.message}</p>) : (<p>No Recurring Expense Found</p>)}
+                            </div>
+                        )} */}
+                </div>
             </div>
-        </div>
     )
 }
 

src/components/RecurringExpense/RecurringExpenseList.jsx

@@ -166,7 +166,7 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
       }
     );
   };
-
+console.log("Tanish",filteredData)
   return (
     <>
       {IsDeleteModalOpen && (

src/pages/AdvancePayment/AdvancePaymentPage1.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Breadcrumb from '../../components/common/Breadcrumb'
 import AdvancePaymentList1 from '../../components/AdvancePayment/AdvancePaymentList1'
 import { useForm } from 'react-hook-form';
+import EmployeeSearchInput from '../../components/common/EmployeeSearchInput';
 
 const AdvancePaymentPage1 = () => {
     const { control, reset, watch } = useForm({
@@ -19,9 +20,25 @@ const AdvancePaymentPage1 = () => {
                     { label: "Advance Payment" },
                 ]}
             />
-            <div className="card px-4 py-2 page-min-h ">
+            <div className="card px-4 py-2 page-min-h">
-                <AdvancePaymentList1 searchString={searchString} />
+                <div className="row py-1">
+                    <div className="col-12 col-md-4 mb-3">
+                        <div className="d-block  text-start">
+                            <EmployeeSearchInput
+                                control={control}
+                                name="employeeId"
+                                projectId={null}
+                                forAll={true}
+                                placeholder={"Enter Employee Name"}
+                            />
+                        </div>
+                    </div>
+                     <AdvancePaymentList1 searchString={searchString} />
+                </div>
             </div>
+
+           
+
         </div>
     )
 }