From 26acc0ab5411a2474eb39764082e63d1e783064f Mon Sep 17 00:00:00 2001 From: wayanrivan Date: Mon, 19 May 2025 15:12:25 +0700 Subject: [PATCH] update --- .../blocks/DetailTransaction.tsx | 323 ++++++++---------- 1 file changed, 142 insertions(+), 181 deletions(-) diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx index 38dfbb2..7c10af3 100644 --- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx +++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx @@ -155,35 +155,6 @@ 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, '&').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 '' + match + ''; - }); - } - return ( @@ -392,7 +363,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'; } else if (transactionDetails?.kind === 'L') { kind = 'PURCHASE LOJA'; @@ -460,58 +431,58 @@ const DetailTransaction = () => { {activeTab === 'detail' && transactionDetails?.kind == 'P' && transactionDetails?.kind == 'P' && ( -
-

- Product Information - - Product Info - -

-
-
-

Product Name

-

- {transactionDetails?.purchase?.product?.name ?? "-"} -

-
-
-

Price Cash

-

- {transactionDetails?.purchase?.product?.price_cash != null - ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(transactionDetails.purchase.product.price_cash) +

+

+ Product Information + + Product Info + +

+
+
+

Product Name

+

+ {transactionDetails?.purchase?.product?.name ?? "-"} +

+
+
+

Price Cash

+

+ {transactionDetails?.purchase?.product?.price_cash != null + ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(transactionDetails.purchase.product.price_cash) + : "-"} +

+
+
+

Price Point

+

+ {transactionDetails?.purchase?.product?.price_point ?? "-"} +

+
+
+

Product Type

+

+ {transactionDetails?.purchase?.product?.type ?? "-"} +

+
+
+

Provider Name

+

+ {transactionDetails?.purchase?.product?.provider?.description ?? "-"} +

+
+
+

Provider Type

+

+ {transactionDetails?.purchase?.product?.provider?.type === "h2h" + ? "HOST TO HOST" + : transactionDetails?.purchase?.product?.provider?.type === "agent" + ? "AGENT" : "-"} -

-
-
-

Price Point

-

- {transactionDetails?.purchase?.product?.price_point ?? "-"} -

-
-
-

Product Type

-

- {transactionDetails?.purchase?.product?.type ?? "-"} -

-
-
-

Provider Name

-

- {transactionDetails?.purchase?.product?.provider?.description ?? "-"} -

-
-
-

Provider Type

-

- {transactionDetails?.purchase?.product?.provider?.type === "h2h" - ? "HOST TO HOST" - : transactionDetails?.purchase?.product?.provider?.type === "agent" - ? "AGENT" - : "-"} -

-
+

+
)} {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && ( @@ -555,47 +526,37 @@ const DetailTransaction = () => {

Status

{(() => { - let status; - let badgeClass; + let status = 'UNKNOWN'; + let badgeClass = 'bg-gray-100 text-gray-800'; - let badgeClass; - - if (transactionDetails?.status === 'C') { - status = 'COMPLETE'; - badgeClass = 'bg-green-100 text-green-800'; - badgeClass = 'bg-green-100 text-green-800'; - } else if (transactionDetails?.status === 'F') { - status = 'FAILED'; - badgeClass = 'bg-red-100 text-red-800'; - badgeClass = 'bg-red-100 text-red-800'; - } else if (transactionDetails?.status === 'O') { - status = 'ON PROCESS'; - badgeClass = 'bg-blue-100 text-blue-800'; - } else if (transactionDetails?.status === 'P') { - badgeClass = 'bg-blue-100 text-blue-800'; - } else if (transactionDetails?.status === 'P') { - status = 'PENDING'; - 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 ( - - {status} - - ); - 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'; + switch (transactionDetails?.status) { + case 'C': + status = 'COMPLETE'; + badgeClass = 'bg-green-100 text-green-800'; + break; + case 'F': + status = 'FAILED'; + badgeClass = 'bg-red-100 text-red-800'; + break; + case 'O': + status = 'ON PROCESS'; + badgeClass = 'bg-blue-100 text-blue-800'; + break; + case 'P': + status = 'PENDING'; + badgeClass = 'bg-gray-100 text-gray-800'; + break; + case 'R': + status = 'ROLLBACK'; + badgeClass = 'bg-yellow-100 text-yellow-800'; + break; + case 'S': + status = 'REVERSAL'; + badgeClass = 'bg-purple-100 text-purple-800'; + break; + default: + // optional: keep 'UNKNOWN' or set to null + break; } return ( @@ -604,6 +565,7 @@ const DetailTransaction = () => { ); })()} +

@@ -751,7 +713,6 @@ const DetailTransaction = () => {
)} - {activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && ( {activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && (

Destination Wallet

@@ -798,6 +759,7 @@ const DetailTransaction = () => { )}
+ )} @@ -883,68 +845,67 @@ const DetailTransaction = () => { )} {activeTab === 'approve' && transactionDetails?.kind == "P" && ( - {activeTab === 'approve' && transactionDetails?.kind == "P" && ( -
-

Approval Logs

- {transactionDetails?.log_approve.length === 0 ? ( -

No data available

- ) : ( -
- - - - - - {/* */} - - - - {transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? ( - transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => ( - - - - {/* */} - - )) - ) : ( - - +
+

Approval Logs

+ {transactionDetails?.log_approve.length === 0 ? ( +

No data available

+ ) : ( +
+
StatusDateUpdated At
- {(() => { - let status; - if (log.status === 'W') { - status = 'WAITING'; - } else if (log.status === 'Y') { - status = 'APPROVE'; - } else if (log.status === 'N') { - status = 'REJECT'; - } else if (log.status === 'T') { - status = 'NO NEED'; - } - return status; - })()} - - {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(' ', ' ')} - {log.updated_at}
- No logs available -
+ + + + + {/* */} - )} - -
StatusDateUpdated At
-
- )} -
- )} + + + {transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? ( + transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => ( + + + {(() => { + let status; + if (log.status === 'W') { + status = 'WAITING'; + } else if (log.status === 'Y') { + status = 'APPROVE'; + } else if (log.status === 'N') { + status = 'REJECT'; + } else if (log.status === 'T') { + status = 'NO NEED'; + } + return status; + })()} + + + {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(' ', ' ')} + + {/* {log.updated_at} */} + + )) + ) : ( + + + No logs available + + + )} + + +
+ )} + + )} {activeTab === 'p24' && (