Update approval transaction
This commit is contained in:
wayanrivan
@ -66,6 +66,24 @@ const DetailApprovalTransaction = () => {
|
||||
>
|
||||
Origin Customer
|
||||
</button>
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationcustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('destinationcustomer')}
|
||||
>
|
||||
Destination Customer
|
||||
</button>
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'originwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('originwallet')}
|
||||
>
|
||||
Origin Wallet
|
||||
</button>
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('destinationwallet')}
|
||||
>
|
||||
Destination Wallet
|
||||
</button>
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('log')}
|
||||
@ -119,21 +137,32 @@ const DetailApprovalTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Status</p>
|
||||
<p className="font-medium">
|
||||
<div>
|
||||
{(() => {
|
||||
let status;
|
||||
let badgeClass;
|
||||
if (transactionDetails?.status === 'C') {
|
||||
status = 'COMPLETE';
|
||||
badgeClass = 'bg-green-100 text-green-800';
|
||||
} else if (transactionDetails?.status === 'F') {
|
||||
status = 'FAILED';
|
||||
badgeClass = 'bg-red-100 text-red-800';
|
||||
} else if (transactionDetails?.status === 'O') {
|
||||
status = 'ON PROCESS';
|
||||
badgeClass = 'bg-blue-100 text-blue-800';
|
||||
} else {
|
||||
status = 'PENDING';
|
||||
badgeClass = 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
return status;
|
||||
|
||||
return (
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
|
||||
{status}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Transaction Type</p>
|
||||
@ -172,14 +201,7 @@ const DetailApprovalTransaction = () => {
|
||||
</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Name</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Description</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold flex items-center">
|
||||
@ -208,8 +230,54 @@ const DetailApprovalTransaction = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 'detail' && transactionDetails?.kind === 'P' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold flex items-center">
|
||||
Product Information
|
||||
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
|
||||
Product Info
|
||||
</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Product Name</p>
|
||||
<p className="font-medium">{transactionDetails?.purchase.product.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Price Cash</p>
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.product.price_cash)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Price Point</p>
|
||||
<p className="font-medium">{transactionDetails?.purchase.product.price_point}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Product Type</p>
|
||||
<p className="font-medium">{transactionDetails?.purchase.product.type}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Provider Name</p>
|
||||
<p className="font-medium">{transactionDetails?.purchase.product.provider.description}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Provider Type</p>
|
||||
<p className="font-medium">
|
||||
{(() => {
|
||||
let providertype;
|
||||
if (transactionDetails?.purchase.product.provider.type === 'h2h') {
|
||||
providertype = 'HOST TO HOST';
|
||||
} else if (transactionDetails?.purchase.product.provider.type === 'agent') {
|
||||
providertype = 'AGENT';
|
||||
}
|
||||
return providertype;
|
||||
})()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer!=null && (
|
||||
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold flex items-center">
|
||||
Transaction Information
|
||||
@ -291,69 +359,9 @@ const DetailApprovalTransaction = () => {
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_iban}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold flex items-center">
|
||||
Destination Wallet
|
||||
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
|
||||
Wallet
|
||||
</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Name</p>
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Description</p>
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_wallet.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold flex items-center">
|
||||
Destination Customer
|
||||
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
|
||||
Destination Customer
|
||||
</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Name</p>
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">MSISDN</p>
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Email</p>
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">MSISDN</p>
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold flex items-center">
|
||||
Origin Wallet
|
||||
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
|
||||
Wallet
|
||||
</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Name</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Description</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{activeTab === 'origincustomer' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold">Origin Customer</h3>
|
||||
@ -378,6 +386,68 @@ const DetailApprovalTransaction = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'destinationcustomer' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold">Destination Customer</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Name</p>
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_customer.fullname}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">MSISDN</p>
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_customer.msisdn}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Email</p>
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_customer.email}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Username</p>
|
||||
<p className="font-medium">{transactionDetails?.transfer.destination_customer.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'originwallet' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold">Origin Wallet</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Name</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_wallet.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Description</p>
|
||||
<p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'destinationwallet' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold">Destination Wallet</h3>
|
||||
|
||||
{!transactionDetails?.transfer ? (
|
||||
<div className="text-center text-sm text-gray-500">No Data available</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Name</p>
|
||||
<p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Description</p>
|
||||
<p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{activeTab === 'log' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold">Transaction Logs</h3>
|
||||
@ -443,8 +513,8 @@ const DetailApprovalTransaction = () => {
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Created At</th>
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th>
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
|
||||
{/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -466,8 +536,19 @@ const DetailApprovalTransaction = () => {
|
||||
return status;
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.created_at}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
{new Date(log.created_at).toLocaleString('sv-SE', {
|
||||
timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false,
|
||||
}).replace(' ', ' ')}
|
||||
</td>
|
||||
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user