victorAnumudu
77 lines
4.0 KiB
React
77 lines
4.0 KiB
React
|
|
export default function CustomerPaymentsView({payments}) {
|
|
return <>
|
|
<div className="pb-5">
|
|
<div className="flex flex-col gap-1">
|
|
<div className="w-full">
|
|
<h4 className="font-semibold text-lg">Payments</h4>
|
|
</div>
|
|
<div className="w-full overflow-x-auto">
|
|
<>
|
|
<table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
|
|
<thead className="py-2 text-sm text-slate-500 text-left">
|
|
<tr>
|
|
<th scope="col" className="px-2 py-2">
|
|
#
|
|
</th>
|
|
<th scope="col" className="px-2">
|
|
Added
|
|
</th>
|
|
<th scope="col" className="px-2">
|
|
Option Name
|
|
</th>
|
|
<th scope="col" className="px-2">
|
|
Amount
|
|
</th>
|
|
<th scope="col" className="px-2">
|
|
Currency
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{(payments && payments.length > 0) ? payments?.map((item, index) => (
|
|
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
|
<td className="px-2 py-2">
|
|
<div className="text-left">
|
|
<div className="text-base font-semibold">{index+1}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-left">
|
|
<div className="text-base font-semibold">{item?.added}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-left">
|
|
<div className="text-base font-semibold">{item?.option_name}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-left">
|
|
<div className="text-base font-semibold">{item?.amount}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-left">
|
|
<div className="text-base font-semibold">Dollars</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
:
|
|
<tr className="py-2 border-t border-dashed border-slate-300">
|
|
<td className="px-3 py-2" colSpan={4}>
|
|
<div className="flex justify-center items-center">
|
|
No Record Found
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
} |