162 lines
4.2 KiB
JavaScript
162 lines
4.2 KiB
JavaScript
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, isFetching } =
|
|
useExpenseTransactions(employeeId, { enabled: !!employeeId });
|
|
|
|
// 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 = records.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: (
|
|
<>
|
|
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",
|
|
},
|
|
];
|
|
|
|
// 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="table-responsive">
|
|
<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) ? (
|
|
<span>
|
|
{row[col.key].toLocaleString("en-IN")}
|
|
</span>
|
|
) : (
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default AdvancePaymentList;
|