101 lines
3.6 KiB
JavaScript
101 lines
3.6 KiB
JavaScript
import React from 'react'
|
|
import Avatar from "../../components/common/Avatar"; // <-- ADD THIS
|
|
import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { formatFigure } from '../../utils/appUtils';
|
|
|
|
const AdvancePaymentList1 = ({ searchString }) => {
|
|
|
|
const { data, isError, isLoading, error } =
|
|
useExpenseAllTransactionsList(searchString);
|
|
|
|
const rows = data || [];
|
|
const navigate = useNavigate();
|
|
|
|
const columns = [
|
|
{
|
|
key: "employee",
|
|
label: "Employee Name",
|
|
align: "text-start",
|
|
customRender: (r) => (
|
|
<div className="d-flex align-items-center gap-2" onClick={() => navigate(`/advance-payment/${r.id}`)}
|
|
style={{ cursor: "pointer" }}>
|
|
<Avatar firstName={r.firstName} lastName={r.lastName} />
|
|
|
|
<span className="fw-medium">
|
|
{r.firstName} {r.lastName}
|
|
</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: "jobRoleName",
|
|
label: "Job Role",
|
|
align: "text-start",
|
|
customRender: (r) => (
|
|
<span className="fw-semibold">
|
|
{r.jobRoleName}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: "balanceAmount",
|
|
label: "Balance (₹)",
|
|
align: "text-end",
|
|
customRender: (r) => (
|
|
<span className="fw-semibold fs-6">
|
|
{formatFigure(r.balanceAmount, {
|
|
// type: "currency",
|
|
currency: "INR",
|
|
})}
|
|
</span>
|
|
),
|
|
},
|
|
];
|
|
|
|
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.customRender
|
|
? col.customRender(row)
|
|
: 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;
|