marco.pms.web/src/components/collections/PaymentHistoryTable.jsx

54 lines
2.2 KiB
JavaScript

import React from 'react'
import { formatUTCToLocalTime } from '../../utils/dateUtils'
import { formatFigure } from '../../utils/appUtils'
import Avatar from '../common/Avatar'
const PaymentHistoryTable = ({data}) => {
return (
<div>
{data?.receivedInvoicePayments?.length > 0 ? (
<div className="pt-1 data-tabe table-responsive">
<table className="table table-bordered table-responsive mt-2">
<thead className="table-light">
<tr>
<th className="text-center">Sr.No</th>
<th className="text-center">Transaction ID</th>
<th className="text-center"> Received Date</th>
<th className="text-center"> Payment Adjustment-Head</th>
<th className="text-center">Amount</th>
<th className="text-center">Updated By</th>
</tr>
</thead>
<tbody>
{data.receivedInvoicePayments.map((payment, index) => (
<tr key={payment.id}>
<td className="text-center">{index + 1}</td>
<td ><span className="mx-2">{payment.transactionId}</span></td>
<td className="text-center">{formatUTCToLocalTime(payment.paymentReceivedDate)}</td>
<td className="text-start">{payment?.paymentAdjustmentHead?.name ?? "--"}</td>
<td className="text-end">
<span className="px-1">{formatFigure(payment.amount, {
type: "currency",
currency: "INR",
})}</span>
</td>
<td>
<div className="d-flex align-items-center mx-2 py-1">
{payment.createdBy?.firstName}{" "}
{payment.createdBy?.lastName}
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
):(<div className='text-center py-2'><p>No History</p></div>)}
</div>
)
}
export default PaymentHistoryTable