TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.telkomcel.tl/TPAY/dashboard

Browse Source
This commit is contained in:
wayanrivan
2025-05-19 15:07:01 +07:00
parent 30971718bf 6535aebd7b
commit cc506ae949
1 changed files with 141 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
View File

@ -49,7 +49,6 @@ const DetailTransaction = () => {
id: selectedTransactionId id: selectedTransactionId
}); });
setTransactionDetails(response?.data); setTransactionDetails(response?.data);
// console.log(response?.data);
// console.log(selectedTransactionId); // console.log(selectedTransactionId);
} catch (error) { } catch (error) {
console.error('Error fetching transaction', error); console.error('Error fetching transaction', error);
@ -156,6 +155,35 @@ const DetailTransaction = () => {
}); });
} }
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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
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 ( return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}> <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
@ -202,6 +230,15 @@ const DetailTransaction = () => {
</button> </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 <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'}`} 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')} onClick={() => setActiveTab('log')}
@ -226,6 +263,24 @@ const DetailTransaction = () => {
</button> </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> </div>
{/* Tab Content */} {/* Tab Content */}
@ -285,6 +340,7 @@ const DetailTransaction = () => {
let status; let status;
let badgeClass; let badgeClass;
if (transactionDetails?.status === 'C') { if (transactionDetails?.status === 'C') {
status = 'COMPLETE'; status = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800'; badgeClass = 'bg-green-100 text-green-800';
@ -294,6 +350,7 @@ const DetailTransaction = () => {
} else if (transactionDetails?.status === 'O') { } else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS'; status = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800'; badgeClass = 'bg-blue-100 text-blue-800';
} else if (transactionDetails?.status === 'P') {
} else if (transactionDetails?.status === 'P') { } else if (transactionDetails?.status === 'P') {
status = 'PENDING'; status = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800'; badgeClass = 'bg-gray-100 text-gray-800';
@ -303,6 +360,12 @@ const DetailTransaction = () => {
} else if (transactionDetails?.status === 'S') { } else if (transactionDetails?.status === 'S') {
status = 'REVERSAL'; status = 'REVERSAL';
badgeClass = 'bg-purple-100 text-purple-800'; badgeClass = 'bg-purple-100 text-purple-800';
} else if (transactionDetails?.status === 'R') {
status = 'ROLLBACK';
badgeClass = 'bg-yellow-100 text-yellow-800';
} else if (transactionDetails?.status === 'S') {
status = 'REVERSAL';
badgeClass = 'bg-purple-100 text-purple-800';
} }
return ( return (
@ -329,7 +392,7 @@ const DetailTransaction = () => {
kind = 'TOP UP'; kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') { } else if (transactionDetails?.kind === 'R') {
kind = 'RETURN'; kind = 'RETURN';
} else if (transactionDetails?.kind === 'E') { }else if (transactionDetails?.kind === 'E') {
kind = 'REWARD'; kind = 'REWARD';
} else if (transactionDetails?.kind === 'L') { } else if (transactionDetails?.kind === 'L') {
kind = 'PURCHASE LOJA'; kind = 'PURCHASE LOJA';
@ -395,59 +458,60 @@ const DetailTransaction = () => {
</div> </div>
)} )}
{activeTab === 'detail' && transactionDetails?.kind == 'P' && (
<div className="space-y-4"> {activeTab === 'detail' && transactionDetails?.kind == 'P' && transactionDetails?.kind == 'P' && (
<h3 className="font-semibold flex items-center"> <div className="space-y-4">
Product Information <h3 className="font-semibold flex items-center">
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded"> Product Information
Product Info <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
</span> Product Info
</h3> </span>
<div className="grid grid-cols-2 gap-4"> </h3>
<div> <div className="grid grid-cols-2 gap-4">
<p className="text-sm text-gray-500">Product Name</p> <div>
<p className="font-medium"> <p className="text-sm text-gray-500">Product Name</p>
{transactionDetails?.purchase?.product?.name ?? "-"} <p className="font-medium">
</p> {transactionDetails?.purchase?.product?.name ?? "-"}
</div> </p>
<div> </div>
<p className="text-sm text-gray-500">Price Cash</p> <div>
<p className="font-medium"> <p className="text-sm text-gray-500">Price Cash</p>
{transactionDetails?.purchase?.product?.price_cash != null <p className="font-medium">
? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(transactionDetails.purchase.product.price_cash) {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> </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> </div>
</div>
)} )}
{activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && ( {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
@ -494,15 +558,21 @@ const DetailTransaction = () => {
let status; let status;
let badgeClass; let badgeClass;
let badgeClass;
if (transactionDetails?.status === 'C') { if (transactionDetails?.status === 'C') {
status = 'COMPLETE'; status = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800'; badgeClass = 'bg-green-100 text-green-800';
badgeClass = 'bg-green-100 text-green-800';
} else if (transactionDetails?.status === 'F') { } else if (transactionDetails?.status === 'F') {
status = 'FAILED'; status = 'FAILED';
badgeClass = 'bg-red-100 text-red-800'; badgeClass = 'bg-red-100 text-red-800';
badgeClass = 'bg-red-100 text-red-800';
} else if (transactionDetails?.status === 'O') { } else if (transactionDetails?.status === 'O') {
status = 'ON PROCESS'; status = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800'; badgeClass = 'bg-blue-100 text-blue-800';
} else if (transactionDetails?.status === 'P') {
badgeClass = 'bg-blue-100 text-blue-800';
} else if (transactionDetails?.status === 'P') { } else if (transactionDetails?.status === 'P') {
status = 'PENDING'; status = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800'; badgeClass = 'bg-gray-100 text-gray-800';
@ -514,6 +584,20 @@ const DetailTransaction = () => {
badgeClass = 'bg-purple-100 text-purple-800'; badgeClass = 'bg-purple-100 text-purple-800';
} }
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{status}
</span>
);
badgeClass = 'bg-gray-100 text-gray-800';
} else if (transactionDetails?.status === 'R') {
status = 'ROLLBACK';
badgeClass = 'bg-yellow-100 text-yellow-800';
} else if (transactionDetails?.status === 'S') {
status = 'REVERSAL';
badgeClass = 'bg-purple-100 text-purple-800';
}
return ( return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}> <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{status} {status}
@ -537,6 +621,7 @@ const DetailTransaction = () => {
kind = 'TOP UP'; kind = 'TOP UP';
} else if (transactionDetails?.kind === 'R') { } else if (transactionDetails?.kind === 'R') {
kind = 'RETURN'; kind = 'RETURN';
} else if (transactionDetails?.kind === 'E') {
} else if (transactionDetails?.kind === 'E') { } else if (transactionDetails?.kind === 'E') {
kind = 'REWARD'; kind = 'REWARD';
} }
@ -666,6 +751,7 @@ const DetailTransaction = () => {
</div> </div>
)} )}
{activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && (
{activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && ( {activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Destination Wallet</h3> <h3 className="font-semibold">Destination Wallet</h3>
@ -725,7 +811,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">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">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 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">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
</tr> </tr>
@ -796,6 +882,7 @@ const DetailTransaction = () => {
</div> </div>
)} )}
{activeTab === 'approve' && transactionDetails?.kind == "P" && (
{activeTab === 'approve' && transactionDetails?.kind == "P" && ( {activeTab === 'approve' && transactionDetails?.kind == "P" && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Approval Logs</h3> <h3 className="font-semibold">Approval Logs</h3>
@ -872,7 +959,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">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">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 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">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
</tr> </tr>