update page dashboard conditional for cards bank and transaction detail
This commit is contained in:
wayanrivan
@ -268,7 +268,7 @@ const DashboardHomePage = () => {
|
||||
) : null}
|
||||
|
||||
<div className="flex space-x-4 mt-5">
|
||||
{bankaccount?.data && bankaccount?.data.length > 0 ? (
|
||||
{bankaccount?.data && bankaccount?.data.length > 0 && getAuth()?.statusbalance=='Y' ? (
|
||||
bankaccount?.data.map((bankaccountdatas: { amount: string, creditlimit: string, monthlylimit: string; wallet: string; }, index: number) => (
|
||||
<BankSaldo
|
||||
title={bankaccountdatas.wallet}
|
||||
|
||||
@ -175,6 +175,24 @@ const DetailTransaction = () => {
|
||||
</button>
|
||||
{/* )} */}
|
||||
|
||||
{transactionDetails?.kind == 'P' && (
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'purchase' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('purchase')}
|
||||
>
|
||||
Purchase Detail
|
||||
</button>
|
||||
)}
|
||||
|
||||
{transactionDetails?.kind == 'P' && (
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'productdetail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('productdetail')}
|
||||
>
|
||||
Product Detail
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'origincustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('origincustomer')}
|
||||
@ -229,15 +247,105 @@ const DetailTransaction = () => {
|
||||
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
{activeTab === 'purchase' && (
|
||||
<>
|
||||
<h3 className="font-semibold flex items-center mt-4">
|
||||
Purchase
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4 mt-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 ?? 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 ?? 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 ?? 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 ?? transactionDetails?.transfer?.fee_amount ?? 0
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === 'productdetail' && (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold flex items-center mt-4">
|
||||
Product Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4 mt-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>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="py-4 overflow-y-auto max-h-[400px]">
|
||||
{activeTab === 'detail' && transactionDetails?.kind === 'P' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold flex items-center">
|
||||
Transaction Information
|
||||
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
|
||||
Info
|
||||
</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
@ -363,100 +471,6 @@ const DetailTransaction = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold flex items-center">
|
||||
Purchase
|
||||
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
|
||||
Purchase
|
||||
</span>
|
||||
</h3>
|
||||
<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 ?? 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 ?? 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 ?? 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 ?? transactionDetails?.transfer?.fee_amount ?? 0
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{activeTab === 'detail' && transactionDetails?.kind == 'P' && 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>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user