added advance transaction records

src/components/AdvancePayment/AdvancePaymentList.jsx

@@ -2,16 +2,53 @@ import React from "react";
 import { useExpenseTransactions } from "../../hooks/useExpense";
 import Error from "../common/Error";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Loader, { SpinnerLoader } from "../common/Loader";
 
 const AdvancePaymentList = ({ employeeId }) => {
-  const { data, isError, isLoading, error } =
-    useExpenseTransactions(employeeId);
+  const { data, isError, isLoading, error, isFetching } =
+    useExpenseTransactions(employeeId, { enabled: !!employeeId });
 
-  const records = data?.json || [];
+  // Handle no employee selected
+  if (!employeeId) {
+    return (
+      <div
+        className="d-flex justify-content-center align-items-center"
+        style={{ height: "200px" }}
+      >
+        <p className="text-muted m-0">Please select an employee</p>
+      </div>
+    );
+  }
+
+  // Handle loading state
+  if (isLoading || isFetching) {
+    return (
+      <div
+        className="d-flex justify-content-center align-items-center"
+        style={{ height: "200px" }}
+      >
+        <SpinnerLoader/>
+      </div>
+    );
+  }
+
+  // Handle error state
+  if (isError) {
+    return (
+      <div className="text-center  py-3">
+        {error?.status === 404 ? (
+          "No advance payment transactions found."
+        ) : (
+          <Error error={error} />
+        )}
+      </div>
+    );
+  }
+
+  const records = Array.isArray(data) ? data : [];
 
   let currentBalance = 0;
-
-  const rowsWithBalance = data?.map((r) => {
+  const rowsWithBalance = records.map((r) => {
     const isCredit = r.amount > 0;
     const credit = isCredit ? r.amount : 0;
     const debit = !isCredit ? Math.abs(r.amount) : 0;
@@ -19,8 +56,8 @@ const AdvancePaymentList = ({ employeeId }) => {
 
     return {
       id: r.id,
-      description: r.title,
-      projectName: r.project?.name,
+      description: r.title || "-",
+      projectName: r.project?.name || "-",
       createdAt: r.createdAt,
       credit,
       debit,
@@ -33,41 +70,44 @@ const AdvancePaymentList = ({ employeeId }) => {
     {
       key: "credit",
       label: (
-        <span>
-          Credit (<i className="bx bx-rupee text-success"></i>)
-        </span>
+        <>
+          Credit <i className="bx bx-rupee text-success"></i>
+        </>
       ),
       align: "text-end",
     },
     {
       key: "debit",
       label: (
-        <span>
-          Debit (<i className="bx bx-rupee text-danger"></i>)
-        </span>
+        <>
+          Debit <i className="bx bx-rupee text-danger"></i>
+        </>
       ),
       align: "text-end",
     },
     {
       key: "balance",
       label: (
-        <span>
+        <>
           Balance <i className="bi bi-currency-rupee text-primary"></i>
-        </span>
+        </>
       ),
       align: "text-end fw-bold",
     },
   ];
 
-  if (isLoading) return <div>Loading...</div>;
-  if (isError){
-     return <div>{error.status  === 404 ? "No advance payment transactions found." : <Error error={error}/>}</div>
-  };
+  // Handle empty records
+  if (rowsWithBalance.length === 0) {
+    return (
+      <div className="text-center text-muted py-3">
+        No advance payment records found.
+      </div>
+    );
+  }
 
   return (
-    <div className="row ">
-      <div className="table-responsive">
-      {employeeId ? ( <table className="table align-middle">
+    <div className="table-responsive">
+      <table className="table align-middle">
         <thead className="table_header_border">
           <tr>
             {columns.map((col) => (
@@ -78,17 +118,16 @@ const AdvancePaymentList = ({ employeeId }) => {
           </tr>
         </thead>
         <tbody>
-          {rowsWithBalance?.map((row) => (
+          {rowsWithBalance.map((row) => (
             <tr key={row.id}>
               {columns.map((col) => (
                 <td key={col.key} className={`${col.align} p-2`}>
                   {["balance", "credit", "debit"].includes(col.key) ? (
-                    row[col.key].toLocaleString("en-IN", {
-                      style: "currency",
-                      currency: "INR",
-                    })
+                    <span>
+                      {row[col.key].toLocaleString("en-IN")}
+                    </span>
                   ) : (
-                    <div className="d-flex flex-column text-start ">
+                    <div className="d-flex flex-column text-start">
                       <small className="text-muted">
                         {formatUTCToLocalTime(row.createdAt)}
                       </small>
@@ -114,12 +153,7 @@ const AdvancePaymentList = ({ employeeId }) => {
             </td>
           </tr>
         </tfoot>
-      </table>):(
-         <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
-        <p className="text-muted  m-0">Please Select Employee</p>
-      </div>
-      )}
-    </div>
+      </table>
     </div>
   );
 };

src/components/common/Loader.jsx

@@ -26,7 +26,7 @@ export const SpinnerLoader = ()=>{
               <div className="spinner-border text-primary mb-3" role="status">
                 <span className="visually-hidden">Loading...</span>
               </div>
-              <p className="text-secondary mb-0">Loading attendance data...</p>
+              <p className="text-secondary mb-0">Loading  data... Please wait</p>
             </div>
   )
 }