From 8f8078416156885379a30b647cc9008dfa4ed414 Mon Sep 17 00:00:00 2001 From: wayanrivan Date: Thu, 27 Mar 2025 13:57:39 +0700 Subject: [PATCH] update detail transaction and transaction list --- .../transaction/blocks/DetailTransaction.tsx | 467 ++++++++++++++++-- .../transaction/hooks/TransactionContext.tsx | 30 +- yarn.lock | 22 +- 3 files changed, 453 insertions(+), 66 deletions(-) diff --git a/src/pages/transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/blocks/DetailTransaction.tsx index bd06276..ec5dd9f 100644 --- a/src/pages/transaction/blocks/DetailTransaction.tsx +++ b/src/pages/transaction/blocks/DetailTransaction.tsx @@ -47,12 +47,9 @@ const DetailTransaction = () => { return ( - + Transaction Details - {/* - Viewing details for transaction ID: {selectedTransactionId} - */} {/* Tabs Navigation */} @@ -63,6 +60,12 @@ const DetailTransaction = () => { > Detail Transaction + + {/* Tab Content */} -
- {activeTab === 'detail' && ( +
+ {activeTab === 'detail' && transactionDetails?.kind === 'P' && (
-

Transaction Information

+

+ Transaction Information + + Info + +

Transaction Date

-

2023-11-15 14:30:22

+

{transactionDetails?.transaction_date}

+
+
+

Full Name

+

{transactionDetails?.origin_customer.fullname}

Amount

-

$1,250.00

-
-
-

Status

-

COMPLETED

+

{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.amount)}

Fee

-

$5.00

+

+ {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' })} +

+
+
+

Status

+

+ {(() => { + let status; + if (transactionDetails?.status === 'C') { + status = 'COMPLETE'; + } else if (transactionDetails?.status === 'F') { + status = 'FAILED'; + } else if (transactionDetails?.status === 'O') { + status = 'ON PROCESS'; + } else { + status = 'PENDING'; + } + return status; + })()} +

+
+
+

Transaction Type

+

+ {(() => { + let kind; + if (transactionDetails?.kind === 'T') { + kind = 'TRANSFER'; + } else if (transactionDetails?.kind === 'P') { + kind = 'PURCHASE'; + } else if (transactionDetails?.kind === 'W') { + kind = 'WITHDRAW'; + } else if (transactionDetails?.kind === 'U') { + kind = 'TOP UP'; + } else if (transactionDetails?.kind === 'R') { + kind = 'RETURN'; + } + return kind; + })()} +

+
+
+

Description

+

{transactionDetails?.description}

+
+
+

Name

+

{transactionDetails?.type.name}

+
+
+ +

+ Origin Wallet + + Wallet + +

+
+
+

Name

+

{transactionDetails?.origin_wallet.name}

+
+
+

Description

+

{transactionDetails?.origin_wallet.description}

+
+
+ +

+ Purchase + + Purchase + +

+
+
+

Amount

+

{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.amount)}

+
+
+

Cashback

+

{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.cashback)}

+
+
+

Cashback Point

+

{transactionDetails?.purchase.cashback_point}

+
+
+

Fee Amount

+

{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.purchase.fee_amount)}

+
+
+
+ )} + + {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer!=null && ( +
+

+ Transaction Information + + Info + +

+
+
+

Transaction Date

+

{transactionDetails?.transaction_date}

+
+
+

Full Name

+

{transactionDetails?.origin_customer.fullname}

+
+
+

Amount

+

{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transactionDetails?.transfer.amount)}

+
+
+

Fee

+

+ {transactionDetails?.transfer.fee_amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })} +

+
+
+

Status

+

+ {(() => { + let status; + if (transactionDetails?.status === 'C') { + status = 'COMPLETE'; + } else if (transactionDetails?.status === 'F') { + status = 'FAILED'; + } else if (transactionDetails?.status === 'O') { + status = 'ON PROCESS'; + } else { + status = 'PENDING'; + } + return status; + })()} +

+
+
+

Transaction Type

+

+ {(() => { + let kind; + if (transactionDetails?.kind === 'T') { + kind = 'TRANSFER'; + } else if (transactionDetails?.kind === 'P') { + kind = 'PURCHASE'; + } else if (transactionDetails?.kind === 'W') { + kind = 'WITHDRAW'; + } else if (transactionDetails?.kind === 'U') { + kind = 'TOP UP'; + } else if (transactionDetails?.kind === 'R') { + kind = 'RETURN'; + } + return kind; + })()} +

+
+
+

Description

+

{transactionDetails?.description}

+
+
+

Name

+

{transactionDetails?.type.name}

+
+
+

Reference

+

{transactionDetails?.transfer.reference}

+
+
+

Destination Iban

+

{transactionDetails?.transfer.destination_iban}

+
+
+ +

+ Destination Wallet + + Wallet + +

+
+
+

Name

+

{transactionDetails?.transfer.destination_wallet.name}

+
+
+

Description

+

{transactionDetails?.transfer.destination_wallet.description}

+
+
+ +

+ Destination Customer + + Destination Customer + +

+
+
+

Name

+

{transactionDetails?.transfer.destination_customer.fullname}

+
+
+

MSISDN

+

{transactionDetails?.transfer.destination_customer.msisdn}

+
+
+

Email

+

{transactionDetails?.transfer.destination_customer.email}

+
+
+

MSISDN

+

{transactionDetails?.transfer.destination_customer.username}

+
+
+ +

+ Origin Wallet + + Wallet + +

+
+
+

Name

+

{transactionDetails?.origin_wallet.name}

+
+
+

Description

+

{transactionDetails?.origin_wallet.description}

+
+
+
+ )} + + + {activeTab === 'origincustomer' && ( +
+

Origin Customer

+
+
+

Full Name

+

{transactionDetails?.origin_customer.fullname}

+
+
+

Phone Number

+

{transactionDetails?.origin_customer.msisdn}

+
+
+

Email

+

{transactionDetails?.origin_customer.email}

+
+
+

Username

+

{transactionDetails?.origin_customer.username}

@@ -106,21 +381,53 @@ const DetailTransaction = () => { {activeTab === 'log' && (

Transaction Logs

-
-
-
- Status changed to COMPLETED - 2023-11-15 14:35:22 -
-

System processed the transaction successfully

-
-
-
- Status changed to PROCESSING - 2023-11-15 14:31:22 -
-

Transaction received by system

-
+
+ + + + + + + + + + + + + {transactionDetails?.log && transactionDetails?.log.length > 0 ? ( + transactionDetails.log.map((log: { request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => ( + + + + + + + + + )) + ) : ( + + + + )} + +
StatusRequest DateRequest BodyResponse BodyResponse CodeRequest End Point
+ {(() => { + let status; + if (log.status === 'P') { + status = 'PENDING'; + } else if (log.status === 'O') { + status = 'ON PROCESS'; + } else if (log.status === 'F') { + status = 'FAILED'; + } else if (log.status === 'C') { + status = 'COMPLETE'; + } + return status; + })()} + {log.request_date ?? '-'}{log.response_date ?? '-'}{log.request_body ?? '-'}{log.response_body ?? '-'}{log.request_endpoint ?? '-'}
+ No logs available +
)} @@ -128,17 +435,99 @@ const DetailTransaction = () => { {activeTab === 'approve' && (

Approval Logs

-
-
-
- Approved by Admin - 2023-11-15 14:32:22 -
-

Transaction approved automatically by system

+ {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) => ( + + + + + + )) + ) : ( + + + + )} + +
StatusCreated AtUpdated 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; + })()} + {log.created_at}{log.updated_at}
+ No logs available +
-
+ )}
)} + + {activeTab === 'p24' && ( +
+

P24 Logs

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

No data available

+ ) : ( +
+ + + + + + + + + + + + + {transactionDetails?.p24 && transactionDetails?.p24.length > 0 ? ( + transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => ( + + + + + + + + + )) + ) : ( + + + + )} + +
TypeRequest DateRequest BodyResponse BodyResponse CodeRequest Endpoint
{log.type}{log.request_date}{log.response_date}{log.request_body}{log.response_body}{log.request_endpoint ?? '-'}
+ No logs available +
+
+ )} +
+ )} +
@@ -146,4 +535,4 @@ const DetailTransaction = () => { ); }; -export default DetailTransaction; \ No newline at end of file +export default DetailTransaction; diff --git a/src/pages/transaction/hooks/TransactionContext.tsx b/src/pages/transaction/hooks/TransactionContext.tsx index eb87702..158808c 100644 --- a/src/pages/transaction/hooks/TransactionContext.tsx +++ b/src/pages/transaction/hooks/TransactionContext.tsx @@ -72,8 +72,12 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { } }, { - accessorFn: (row) => - new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(row.purchase.amount), + accessorFn: (row) => { + const purchaseAmount = row?.purchase?.amount; + const transferAmount = row?.transfer?.amount; + + return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0); + }, id: 'amount', header: ({ column }) => , enableSorting: false, @@ -84,19 +88,13 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { }, { accessorFn: (row) => { - let fee; - if (row.kind === 'P') { - fee = row.purchase.fee_amount; - } else { - fee = row.transfer.fee_amount; - } - return fee.toLocaleString('en-US', { - style: 'currency', - currency: 'USD', - }); + const purchaseAmount = row?.purchase?.fee_amount; + const transferAmount = row?.transfer?.fee_amount; + + return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(purchaseAmount ?? transferAmount ?? 0); }, - accessorKey: 'fee', - header: ({ column }) => , + id: 'feeamount', + header: ({ column }) => , enableSorting: false, enableHiding: false, meta: { @@ -152,8 +150,8 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { const row = data.row.original; return (
-