added advance list inside Advance payments

src/components/AdvancePayment/AdvancePaymentList.jsx

@@ -3,6 +3,76 @@ import { useEmployeesName } from '../../hooks/useEmployees'
 
 const AdvancePaymentList = ({employeeId}) => {
     
+
+  const TransactionsColumns = [
+      {
+        key: "TransactionId",
+        label: "Transaction Id" ,
+        getValue: (e) => e.financeUId || "N/A",
+        align: "text-start mx-2",
+      },
+      {
+        key: "expensesType",
+        label: "Expense Type",
+        getValue: (e) => e.expensesType?.name || "N/A",
+        align: "text-start",
+      },
+      {
+        key: "",
+        label: "Payment Mode",
+        getValue: (e) => e.paymentMode?.name || "N/A",
+        align: "text-start",
+      },
+      {
+        key: "Submitted By",
+        label: "Submitted By",
+        align: "text-start",
+        getValue: (e) =>
+          `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+            }`.trim() || "N/A",
+        customRender: (e) => (
+          <div className="d-flex align-items-center cursor-pointer"
+            onClick={() => navigate(`/employee/${e.createdBy?.id}`)}>
+            <Avatar
+              size="xs"
+              classAvatar="m-0"
+              firstName={e.createdBy?.firstName}
+              lastName={e.createdBy?.lastName}
+            />
+            <span className="text-truncate">
+              {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+                }`.trim() || "N/A"}
+            </span>
+          </div>
+        ),
+      },
+      {
+        key: "submitted",
+        label: "Submitted",
+        getValue: (e) => formatUTCToLocalTime(e?.createdAt),
+        isAlwaysVisible: true,
+      },
+      {
+        key: "amount",
+        label: "Amount",
+        getValue: (e) => <>{formatCurrency(e?.amount)}</>,
+        isAlwaysVisible: true,
+        align: "text-end",
+      },
+      {
+        key: "status",
+        label: "Status",
+        align: "text-center",
+        getValue: (e) => (
+          <span
+            className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
+              }`}
+          >
+            {e.status?.name || "Unknown"}
+          </span>
+        ),
+      },
+    ];
   return (
     <div className='row'>