From 10e54637d56e9263ed4c73c74fbc2a9f69838765 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Wed, 19 Nov 2025 10:47:11 +0530
Subject: [PATCH] Adding list view in Advance payment list.

---
 .../AdvancePayment/AdvancePaymentList1.jsx    | 255 +++++++++++-------
 1 file changed, 159 insertions(+), 96 deletions(-)

diff --git a/src/components/AdvancePayment/AdvancePaymentList1.jsx b/src/components/AdvancePayment/AdvancePaymentList1.jsx
index eb35942c..2269f23f 100644
--- a/src/components/AdvancePayment/AdvancePaymentList1.jsx
+++ b/src/components/AdvancePayment/AdvancePaymentList1.jsx
@@ -1,109 +1,172 @@
+// import React from 'react'
+// import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
+
+// const AdvancePaymentList1 = ({ searchString }) => {
+//     const { data, isError, isLoading, error, isFetching } =
+//         useExpenseAllTransactionsList(searchString);
+//     console.log("Kartik", data)
+
+//     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>
+//     )
+// }
+
+// export default AdvancePaymentList1
+
 import React from 'react'
 import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
 
 const AdvancePaymentList1 = ({ searchString }) => {
-    const { data, isError, isLoading, error, isFetching } =
+
+    const { data, isError, isLoading, error } =
         useExpenseAllTransactionsList(searchString);
-    console.log("Kartik", data)
 
-    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",
-        },
+    const rows = data;
 
+    const columns = [
+        { key: "employee", label: "Employee Name", align: "text-start", getValue: (r) => r.firstName + " " + r.lastName },
+        { key: "jobRoleName", label: "Job Role", align: "text-start", getValue: (r) => r.jobRoleName },
+        { key: "balanceAmount", label: "Balance (₹)", align: "text-end", getValue: (r) => r.balanceAmount },
     ];
-    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>
+    if (isLoading) return <p className="text-center py-4">Loading...</p>;
+    if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
+
+    return (
+        <div className="card-datatable" id="payment-request-table">
+            <div className="mx-2">
+
+                <table className="table border-top dataTable text-nowrap align-middle">
+                    <thead>
+                        <tr>
+                            {columns.map((col) => (
+                                <th key={col.key} className={`sorting ${col.align}`}>
+                                    {col.label}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        {rows.length > 0 ? (
+                            rows.map((row) => (
+                                <tr key={row.id} className="align-middle" style={{ height: "40px" }}>
+                                    {columns.map((col) => (
+                                        <td key={col.key} className={`d-table-cell ${col.align} py-3`}>
+                                            {col.getValue(row)}
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))
+                        ) : (
+                            <tr>
+                                <td colSpan={columns.length} className="text-center border-0 py-3">
+                                    No Employees Found
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+
             </div>
+        </div>
     )
 }
 
-export default AdvancePaymentList1
+export default AdvancePaymentList1;
+