128 lines
3.6 KiB
JavaScript
128 lines
3.6 KiB
JavaScript
import React from "react";
|
|
import { useExpenseTransactions } from "../../hooks/useExpense";
|
|
import Error from "../common/Error";
|
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
|
|
const AdvancePaymentList = ({ employeeId }) => {
|
|
const { data, isError, isLoading, error } =
|
|
useExpenseTransactions(employeeId);
|
|
|
|
const records = data?.json || [];
|
|
|
|
let currentBalance = 0;
|
|
|
|
const rowsWithBalance = data?.map((r) => {
|
|
const isCredit = r.amount > 0;
|
|
const credit = isCredit ? r.amount : 0;
|
|
const debit = !isCredit ? Math.abs(r.amount) : 0;
|
|
currentBalance += credit - debit;
|
|
|
|
return {
|
|
id: r.id,
|
|
description: r.title,
|
|
projectName: r.project?.name,
|
|
createdAt: r.createdAt,
|
|
credit,
|
|
debit,
|
|
balance: currentBalance,
|
|
};
|
|
});
|
|
|
|
const columns = [
|
|
{ key: "description", label: "Description", align: "text-start" },
|
|
{
|
|
key: "credit",
|
|
label: (
|
|
<span>
|
|
Credit (<i className="bx bx-rupee text-success"></i>)
|
|
</span>
|
|
),
|
|
align: "text-end",
|
|
},
|
|
{
|
|
key: "debit",
|
|
label: (
|
|
<span>
|
|
Debit (<i className="bx bx-rupee text-danger"></i>)
|
|
</span>
|
|
),
|
|
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>
|
|
};
|
|
|
|
return (
|
|
<div className="row ">
|
|
<div className="table-responsive">
|
|
{employeeId ? ( <table className="table align-middle">
|
|
<thead className="table_header_border">
|
|
<tr>
|
|
{columns.map((col) => (
|
|
<th key={col.key} className={col.align}>
|
|
{col.label}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{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",
|
|
})
|
|
) : (
|
|
<div className="d-flex flex-column text-start ">
|
|
<small className="text-muted">
|
|
{formatUTCToLocalTime(row.createdAt)}
|
|
</small>
|
|
<small className="fw-semibold text-dark">
|
|
{row.projectName}
|
|
</small>
|
|
<small>{row.description}</small>
|
|
</div>
|
|
)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
<tfoot className="table-secondary fw-bold">
|
|
<tr>
|
|
<td className="text-start p-3">Final Balance</td>
|
|
<td className="text-end" colSpan="3">
|
|
{currentBalance.toLocaleString("en-IN", {
|
|
style: "currency",
|
|
currency: "INR",
|
|
})}
|
|
</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>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdvancePaymentList;
|