Update approval transaction
This commit is contained in:
wayanrivan
@ -30,7 +30,6 @@ const DetailTransaction = () => {
|
||||
const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
|
||||
id: selectedTransactionId
|
||||
});
|
||||
// console.log(response?.data);
|
||||
setTransactionDetails(response?.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
@ -66,6 +65,24 @@ const DetailTransaction = () => {
|
||||
>
|
||||
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 +136,32 @@ const DetailTransaction = () => {
|
||||
</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 +200,7 @@ const DetailTransaction = () => {
|
||||
</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">
|
||||
@ -246,7 +267,7 @@ const DetailTransaction = () => {
|
||||
providertype = 'HOST TO HOST';
|
||||
} else if (transactionDetails?.purchase.product.provider.type === 'agent') {
|
||||
providertype = 'AGENT';
|
||||
}
|
||||
}
|
||||
return providertype;
|
||||
})()}
|
||||
</p>
|
||||
@ -337,69 +358,9 @@ const DetailTransaction = () => {
|
||||
<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>
|
||||
@ -424,6 +385,68 @@ const DetailTransaction = () => {
|
||||
</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>
|
||||
@ -489,8 +512,8 @@ const DetailTransaction = () => {
|
||||
<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>
|
||||
@ -512,8 +535,19 @@ const DetailTransaction = () => {
|
||||
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>
|
||||
))
|
||||
) : (
|
||||
|
||||
@ -18,12 +18,10 @@ const ListToolbar = () => {
|
||||
// useEffect to set the default date values
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
const nextWeek = new Date(today);
|
||||
nextWeek.setDate(today.getDate() + 7);
|
||||
|
||||
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
settrxDate({
|
||||
from: formatDate(today), // Set 'from' to today
|
||||
to: formatDate(nextWeek), // Set 'to' to 7 days later
|
||||
from: formatDate(firstDayOfMonth),
|
||||
to: formatDate(today),
|
||||
});
|
||||
}, []);
|
||||
|
||||
|
||||
@ -84,7 +84,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
});
|
||||
return formattedDateTime; // Format DD-MM-YYYY HH:MM:SS (menggunakan waktu yang sudah ada)
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'origin_customer.fullname',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Full Name" column={column} />,
|
||||
@ -125,19 +125,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => {
|
||||
let status;
|
||||
if (row.status === 'C') {
|
||||
status = 'COMPLETE';
|
||||
} else if (row.status === 'F') {
|
||||
status = 'FAILED';
|
||||
} else if (row.status === 'O') {
|
||||
status = 'ON PROCESS';
|
||||
} else {
|
||||
status = 'PENDING';
|
||||
}
|
||||
return status;
|
||||
},
|
||||
accessorKey: 'status',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
|
||||
enableSorting: false,
|
||||
@ -145,7 +132,37 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
meta: {
|
||||
headerClassName: 'w-[250px]',
|
||||
},
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const statusCode = row.original.status;
|
||||
let label = '';
|
||||
let badgeClass = '';
|
||||
|
||||
switch (statusCode) {
|
||||
case 'C':
|
||||
label = 'COMPLETE';
|
||||
badgeClass = 'bg-green-100 text-green-800';
|
||||
break;
|
||||
case 'F':
|
||||
label = 'FAILED';
|
||||
badgeClass = 'bg-red-100 text-red-800';
|
||||
break;
|
||||
case 'O':
|
||||
label = 'ON PROCESS';
|
||||
badgeClass = 'bg-blue-100 text-blue-800';
|
||||
break;
|
||||
default:
|
||||
label = 'PENDING';
|
||||
badgeClass = 'bg-gray-100 text-gray-800';
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'description',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
|
||||
@ -201,11 +218,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
if (filter == undefined || filter.length == 0) {
|
||||
const today = new Date();
|
||||
const nextWeek = new Date();
|
||||
nextWeek.setDate(today.getDate() + 7);
|
||||
|
||||
startdate = today.toISOString().split('T')[0];
|
||||
enddate = nextWeek.toISOString().split('T')[0];
|
||||
// Tanggal 1 di bulan sekarang
|
||||
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
|
||||
startdate = firstDayOfMonth.toISOString().split('T')[0];
|
||||
enddate = today.toISOString().split('T')[0];
|
||||
} else if (filter != undefined || filter.length != 0) {
|
||||
startdate = filter[0].value.from;
|
||||
enddate = filter[0].value.to;
|
||||
|
||||
Reference in New Issue
Block a user