update page transaction
This commit is contained in:
wayanrivan
@ -118,12 +118,12 @@ const DetailApprovalTransaction = () => {
|
||||
<DialogBody>
|
||||
{/* Tabs Navigation */}
|
||||
<div className="flex border-b border-gray-200">
|
||||
<button
|
||||
{/* <button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'detail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('detail')}
|
||||
>
|
||||
Detail Transaction
|
||||
</button>
|
||||
</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')}
|
||||
|
||||
@ -49,7 +49,6 @@ const DetailTransaction = () => {
|
||||
id: selectedTransactionId
|
||||
});
|
||||
setTransactionDetails(response?.data);
|
||||
// console.log(response?.data);
|
||||
// console.log(selectedTransactionId);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
@ -127,6 +126,35 @@ const DetailTransaction = () => {
|
||||
return null;
|
||||
};
|
||||
|
||||
const [formattedJson, setFormattedJson] = useState('');
|
||||
const [highlightedJson, setHighlightedJson] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] };
|
||||
const str = JSON.stringify(obj, undefined, 4);
|
||||
setFormattedJson(str);
|
||||
setHighlightedJson(syntaxHighlight(str));
|
||||
}, []);
|
||||
|
||||
function syntaxHighlight(json: any) {
|
||||
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])"(\s:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match: any) {
|
||||
let cls = 'number';
|
||||
if (/^"/.test(match)) {
|
||||
if (/:$/.test(match)) {
|
||||
cls = 'key';
|
||||
} else {
|
||||
cls = 'string';
|
||||
}
|
||||
} else if (/true|false/.test(match)) {
|
||||
cls = 'boolean';
|
||||
} else if (/null/.test(match)) {
|
||||
cls = 'null';
|
||||
}
|
||||
return '<span className="' + cls + '">' + match + '</span>';
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
|
||||
<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
|
||||
@ -137,12 +165,15 @@ const DetailTransaction = () => {
|
||||
<DialogBody>
|
||||
{/* Tabs Navigation */}
|
||||
<div className="flex border-b border-gray-200">
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'detail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('detail')}
|
||||
>
|
||||
Detail Transaction
|
||||
</button>
|
||||
{transactionDetails?.kind == 'P' && (
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'detail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('detail')}
|
||||
>
|
||||
Detail Transaction
|
||||
</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')}
|
||||
@ -161,30 +192,39 @@ const DetailTransaction = () => {
|
||||
>
|
||||
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>
|
||||
{transactionDetails?.kind !== 'P' && (
|
||||
<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')}
|
||||
>
|
||||
Transaction Log
|
||||
</button>
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'approve' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('approve')}
|
||||
>
|
||||
Approval Log
|
||||
</button>
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'p24' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('p24')}
|
||||
>
|
||||
Log P24
|
||||
</button>
|
||||
{transactionDetails?.kind !== 'P' && (
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'approve' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('approve')}
|
||||
>
|
||||
Approval Log
|
||||
</button>
|
||||
)}
|
||||
|
||||
{transactionDetails?.kind !== 'P' && (
|
||||
<button
|
||||
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'p24' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
onClick={() => setActiveTab('p24')}
|
||||
>
|
||||
Log P24
|
||||
</button>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
@ -281,8 +321,16 @@ const DetailTransaction = () => {
|
||||
kind = 'TOP UP';
|
||||
} else if (transactionDetails?.kind === 'R') {
|
||||
kind = 'RETURN';
|
||||
}else if (transactionDetails?.kind === 'E') {
|
||||
} else if (transactionDetails?.kind === 'E') {
|
||||
kind = 'REWARD';
|
||||
} else if (transactionDetails?.kind === 'L') {
|
||||
kind = 'PURCHASE LOJA';
|
||||
} else if (transactionDetails?.kind === 'B') {
|
||||
kind = 'TOP UP P24';
|
||||
} else if (transactionDetails?.kind === 'A') {
|
||||
kind = 'TRANSFER AGENT';
|
||||
} else if (transactionDetails?.kind === 'M') {
|
||||
kind = 'WITHDRAWAL AGENT';
|
||||
}
|
||||
return kind;
|
||||
})()}
|
||||
@ -338,59 +386,60 @@ const DetailTransaction = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 'detail' && (
|
||||
<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"
|
||||
|
||||
{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>
|
||||
</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>
|
||||
)}
|
||||
|
||||
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
|
||||
@ -463,7 +512,7 @@ const DetailTransaction = () => {
|
||||
kind = 'TOP UP';
|
||||
} else if (transactionDetails?.kind === 'R') {
|
||||
kind = 'RETURN';
|
||||
}else if (transactionDetails?.kind === 'E') {
|
||||
} else if (transactionDetails?.kind === 'E') {
|
||||
kind = 'REWARD';
|
||||
}
|
||||
return kind;
|
||||
@ -592,7 +641,7 @@ const DetailTransaction = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'destinationwallet' && (
|
||||
{activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold">Destination Wallet</h3>
|
||||
|
||||
@ -651,7 +700,7 @@ const DetailTransaction = () => {
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Type</th>
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
|
||||
{/* <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th> */}
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
|
||||
</tr>
|
||||
@ -683,8 +732,18 @@ const DetailTransaction = () => {
|
||||
hour12: false
|
||||
})
|
||||
: ''}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td>
|
||||
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td> */}
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
<pre
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: syntaxHighlight(
|
||||
typeof log.response_body === 'string'
|
||||
? log.response_body
|
||||
: JSON.stringify(log.response_body, null, 4)
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint}</td>
|
||||
</tr>
|
||||
))
|
||||
@ -701,7 +760,7 @@ const DetailTransaction = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'approve' && (
|
||||
{activeTab === 'approve' && transactionDetails?.kind == "P" && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold">Approval Logs</h3>
|
||||
{transactionDetails?.log_approve.length === 0 ? (
|
||||
@ -777,7 +836,7 @@ const DetailTransaction = () => {
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Type</th>
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
|
||||
{/* <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th> */}
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
|
||||
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
|
||||
</tr>
|
||||
@ -810,8 +869,18 @@ const DetailTransaction = () => {
|
||||
hour12: false
|
||||
})
|
||||
: ''}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td>
|
||||
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td> */}
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
<pre
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: syntaxHighlight(
|
||||
typeof log.response_body === 'string'
|
||||
? log.response_body
|
||||
: JSON.stringify(log.response_body, null, 4)
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td>
|
||||
</tr>
|
||||
))
|
||||
|
||||
@ -178,6 +178,10 @@ const ListToolbar = () => {
|
||||
<SelectItem value="R">RETURN</SelectItem>
|
||||
<SelectItem value="N">TOP UP PARTNER</SelectItem>
|
||||
<SelectItem value="E">REWARD</SelectItem>
|
||||
<SelectItem value="L">PURCHASE LOJA</SelectItem>
|
||||
<SelectItem value="B">TOP UP P24</SelectItem>
|
||||
<SelectItem value="A">TRANSFER AGENT</SelectItem>
|
||||
<SelectItem value="M">WITHDRAWAL AGENT</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
|
||||
@ -78,6 +78,10 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
case 'R': return 'RETURN';
|
||||
case 'N': return 'TOP UP PARTNER';
|
||||
case 'E': return 'REWARD';
|
||||
case 'L': return 'PURCHASE LOJA';
|
||||
case 'B': return 'TOP UP P24';
|
||||
case 'A': return 'TRANSFER AGENT';
|
||||
case 'M': return 'WITHDRAWAL AGENT';
|
||||
default: return '_';
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user