This commit is contained in:
wayanrivan
2025-05-06 15:42:51 +07:00
parent 896c472ce8
commit 4d0d6fd039
4 changed files with 125 additions and 97 deletions

View File

@ -202,14 +202,20 @@ const DetailApprovalTransaction = () => {
<div>
<p className="text-sm text-gray-500">Amount</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase?.amount) ?? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.transfer.amount)}</p>
<p className="font-medium">
{(transactionDetails?.purchase?.amount ?? transactionDetails?.transfer?.amount) != null
? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails.purchase?.amount ?? transactionDetails.transfer?.amount
)
: "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee</p>
<p className="font-medium">
{transactionDetails?.kind === 'P'
? transactionDetails?.purchase.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
: transactionDetails?.transfer.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
{(transactionDetails?.transfer?.fee_amount ?? transactionDetails?.purchase?.fee_amount ?? 0)
.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
</p>
</div>
<div>
@ -290,19 +296,33 @@ const DetailApprovalTransaction = () => {
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Amount</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.amount)}</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.amount ?? transactionDetails?.transfer?.amount ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.cashback)}</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.cashback ?? transactionDetails?.transfer?.cashback ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback Point</p>
<p className="font-medium">{transactionDetails?.purchase.cashback_point}</p>
<p className="font-medium">
{transactionDetails?.purchase?.cashback_point ?? transactionDetails?.transfer?.cashback_point ?? 0}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee Amount</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.fee_amount)}</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.fee_amount ?? transactionDetails?.transfer?.fee_amount ?? 0
)}
</p>
</div>
</div>
</div>

View File

@ -270,28 +270,19 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
});
}
// Constructing filter object with dynamic properties
const formattedFilter: any = {
"Transactions.transaction_date": {
from: `${startdate} 00:00:00`,
to: `${enddate} 23:59:59`,
},
to: `${enddate} 23:59:59`
}
};
if (transactioncode) {
formattedFilter["Transactions.code"] = { like: `%${transactioncode}%` };
}
if (transactioncode) {
formattedFilter["Transactions.msisdn"] = {
like: `${transactioncode}`
};
}
if (transactioncode) {
formattedFilter["Transactions.fullname"] = {
like: `${transactioncode}`
};
formattedFilter["$or"] = [
{ "Transactions.code": { like: `%${transactioncode}%` } },
{ "Transactions.msisdn": { like: `${transactioncode}` } },
{ "origin_customer.fullname": { like: `${transactioncode}` } }
];
}
// Handle approval status filter

View File

@ -49,7 +49,7 @@ const DetailTransaction = () => {
id: selectedTransactionId
});
setTransactionDetails(response?.data);
// console.log(response?.data.origin_customer.id);
// console.log(response?.data);
// console.log(selectedTransactionId);
} catch (error) {
console.error('Error fetching transaction', error);
@ -221,14 +221,20 @@ const DetailTransaction = () => {
</div>
<div>
<p className="text-sm text-gray-500">Amount</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase?.amount) ?? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.transfer.amount)}</p>
<p className="font-medium">
{(transactionDetails?.purchase?.amount ?? transactionDetails?.transfer?.amount) != null
? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails.purchase?.amount ?? transactionDetails.transfer?.amount
)
: "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee</p>
<p className="font-medium">
{transactionDetails?.kind === 'P'
? transactionDetails?.purchase.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
: transactionDetails?.transfer.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
{(transactionDetails?.transfer?.fee_amount ?? transactionDetails?.purchase?.fee_amount ?? 0)
.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
</p>
</div>
<div>
@ -299,69 +305,91 @@ const DetailTransaction = () => {
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Amount</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.amount)}</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.amount ?? transactionDetails?.transfer?.amount ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.cashback)}</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.cashback ?? transactionDetails?.transfer?.cashback ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback Point</p>
<p className="font-medium">{transactionDetails?.purchase.cashback_point}</p>
<p className="font-medium">
{transactionDetails?.purchase?.cashback_point ?? transactionDetails?.transfer?.cashback_point ?? 0}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee Amount</p>
<p className="font-medium">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.fee_amount)}</p>
</div>
</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;
})()}
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.fee_amount ?? transactionDetails?.transfer?.fee_amount ?? 0
)}
</p>
</div>
</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>
<p className="font-medium">
{transactionDetails?.purchase?.product?.price_cash != null
? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(transactionDetails.purchase.product.price_cash)
: "-"}
</p>
</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">
{transactionDetails?.purchase?.product?.provider?.type === "h2h"
? "HOST TO HOST"
: transactionDetails?.purchase?.product?.provider?.type === "agent"
? "AGENT"
: "-"}
</p>
</div>
</div>
</div>
{/* )} */}
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
<div className="space-y-4">
@ -397,7 +425,7 @@ const DetailTransaction = () => {
<div>
<p className="text-sm text-gray-500">Fee</p>
<p className="font-medium">
{transactionDetails?.transfer.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
{(transactionDetails?.transfer?.fee_amount ?? transactionDetails?.purchase?.fee_amount ?? 0).toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
</p>
</div>
<div>

View File

@ -265,30 +265,19 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
});
}
// Build filter object dynamically
const formattedFilter: any = {
"Transactions.transaction_date": {
from: `${startdate} 00:00:00`,
to: `${enddate} 23:59:59`
}
};
if (transactioncode) {
formattedFilter["Transactions.code"] = {
like: `%${transactioncode}%`
};
}
if (transactioncode) {
formattedFilter["Transactions.msisdn"] = {
like: `${transactioncode}`
};
}
if (transactioncode) {
formattedFilter["Transactions.fullname"] = {
like: `${transactioncode}`
};
formattedFilter["$or"] = [
{ "Transactions.code": { like: `%${transactioncode}%` } },
{ "Transactions.msisdn": { like: `${transactioncode}` } },
{ "origin_customer.fullname": { like: `${transactioncode}` } }
];
}
// if (transactionstatus) {
@ -298,7 +287,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
if (type) {
formattedFilter["Transactions.kind"] = type;
}
const response = await GetData(`${API_URL}/transaction/history`, {
limit,
page: page + 1,