From 267cae76e28a7c0d51fa585f7f6177f93c1fa8c7 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Tue, 20 May 2025 11:00:07 +0700
Subject: [PATCH] add column status

---
 .../blocks/DetailApprovalTransaction.tsx      | 54 +++++++++++++++----
 .../blocks/DetailTransaction.tsx              | 51 +++++++++++++++---
 2 files changed, 89 insertions(+), 16 deletions(-)

diff --git a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
index fd9a907..03e2708 100644
--- a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
@@ -683,7 +683,7 @@ const DetailApprovalTransaction = () => {
                                     <table className="min-w-full table-auto">
                                         <thead>
                                             <tr className="bg-gray-100">
-                                                <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">Transaction Status</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>
@@ -695,7 +695,25 @@ const DetailApprovalTransaction = () => {
                                             {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
                                                 transactionDetails.log.map((log: { type: string, request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
                                                     <tr key={index} className="border-t">
-                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.type || ''}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">
+                                                            {(() => {
+                                                                let status;
+                                                                if (log.status === 'C') {
+                                                                    status = 'COMPLETE';
+                                                                } else if (log.status === 'F') {
+                                                                    status = 'FAILED';
+                                                                } else if (log.status === 'O') {
+                                                                    status = 'ON PROCESS';
+                                                                } else if (log.status === 'P') {
+                                                                    status = 'PENDING';
+                                                                } else if (log.status === 'R') {
+                                                                    status = 'ROLLBACK';
+                                                                } else if (log.status === 'S') {
+                                                                    status = 'REVERSAL';
+                                                                }
+                                                                return status;
+                                                            })()}
+                                                        </td>
                                                         <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
                                                             ? new Date(log.request_date).toLocaleDateString('en-GB', {
                                                                 day: '2-digit',
@@ -737,10 +755,10 @@ const DetailApprovalTransaction = () => {
                                                             <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
                                                                 {(() => {
                                                                     try {
-                                                                        if (log.request_body === null) {
+                                                                        if (log.response_body === null) {
                                                                             return '';
                                                                         }
-                                                                        const parsed = JSON.parse(log.request_body);
+                                                                        const parsed = JSON.parse(log.response_body);
                                                                         return JSON.stringify(parsed, null, 2) ?? '';
                                                                     } catch (e) {
                                                                         return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse
@@ -840,7 +858,7 @@ const DetailApprovalTransaction = () => {
                                         <table className="min-w-full table-auto">
                                             <thead>
                                                 <tr className="bg-gray-100">
-                                                    <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">Status</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>
@@ -850,9 +868,27 @@ const DetailApprovalTransaction = () => {
                                             </thead>
                                             <tbody>
                                                 {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) => (
+                                                    transactionDetails.p24.map((log: { status: string,request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
                                                         <tr key={index} className="border-t">
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.type ?? ''}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">
+                                                                {(() => {
+                                                                    let status;
+                                                                    if (log.status === 'C') {
+                                                                        status = 'COMPLETE';
+                                                                    } else if (log.status === 'F') {
+                                                                        status = 'FAILED';
+                                                                    } else if (log.status === 'O') {
+                                                                        status = 'ON PROCESS';
+                                                                    } else if (log.status === 'P') {
+                                                                        status = 'PENDING';
+                                                                    } else if (log.status === 'R') {
+                                                                        status = 'ROLLBACK';
+                                                                    } else if (log.status === 'S') {
+                                                                        status = 'REVERSAL';
+                                                                    }
+                                                                    return status;
+                                                                })()}
+                                                            </td>
                                                             <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
                                                                 ? new Date(log.request_date).toLocaleDateString('en-GB', {
                                                                     day: '2-digit',
@@ -883,10 +919,10 @@ const DetailApprovalTransaction = () => {
                                                                             if (log.response_code === null) {
                                                                                 return '';
                                                                             }
-                                                                            const parsed = JSON.parse(log.request_body);
+                                                                            const parsed = JSON.parse(log.response_body);
                                                                             return JSON.stringify(parsed, null, 2);
                                                                         } catch (e) {
-                                                                            return log.request_body; // fallback: tampilkan as-is jika gagal parse
+                                                                            return log.response_body; // fallback: tampilkan as-is jika gagal parse
                                                                         }
                                                                     })()}
                                                                 </pre>
diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index 09f8ff1..9876b39 100644
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@@ -49,6 +49,7 @@ const DetailTransaction = () => {
                         id: selectedTransactionId
                     });
                     setTransactionDetails(response?.data);
+                    console.log(response?.data);
                     // console.log(selectedTransactionId);
                 } catch (error) {
                     console.error('Error fetching transaction', error);
@@ -744,7 +745,7 @@ const DetailTransaction = () => {
                                     <table className="min-w-full table-auto">
                                         <thead>
                                             <tr className="bg-gray-100">
-                                                <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">Status</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>
@@ -756,7 +757,25 @@ const DetailTransaction = () => {
                                             {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
                                                 transactionDetails.log.map((log: { type: string, request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
                                                     <tr key={index} className="border-t">
-                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.type || ''}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">
+                                                            {(() => {
+                                                                let status;
+                                                                if (log.status === 'C') {
+                                                                    status = 'COMPLETE';
+                                                                } else if (log.status === 'F') {
+                                                                    status = 'FAILED';
+                                                                } else if (log.status === 'O') {
+                                                                    status = 'ON PROCESS';
+                                                                } else if (log.status === 'P') {
+                                                                    status = 'PENDING';
+                                                                } else if (log.status === 'R') {
+                                                                    status = 'ROLLBACK';
+                                                                } else if (log.status === 'S') {
+                                                                    status = 'REVERSAL';
+                                                                }
+                                                                return status;
+                                                            })()}
+                                                        </td>
                                                         <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
                                                             ? new Date(log.request_date).toLocaleDateString('en-GB', {
                                                                 day: '2-digit',
@@ -798,10 +817,10 @@ const DetailTransaction = () => {
                                                             <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
                                                                 {(() => {
                                                                     try {
-                                                                        if (log.request_body === null) {
+                                                                        if (log.response_body === null) {
                                                                             return '';
                                                                         }
-                                                                        const parsed = JSON.parse(log.request_body);
+                                                                        const parsed = JSON.parse(log.response_body);
                                                                         return JSON.stringify(parsed, null, 2) ?? '';
                                                                     } catch (e) {
                                                                         return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse
@@ -900,7 +919,7 @@ const DetailTransaction = () => {
                                         <table className="min-w-full table-auto">
                                             <thead>
                                                 <tr className="bg-gray-100">
-                                                    <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">Status</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>
@@ -910,9 +929,27 @@ const DetailTransaction = () => {
                                             </thead>
                                             <tbody>
                                                 {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) => (
+                                                    transactionDetails.p24.map((log: { status: string,request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
                                                         <tr key={index} className="border-t">
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.type ?? ''}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">
+                                                                {(() => {
+                                                                    let status;
+                                                                    if (log.status === 'C') {
+                                                                        status = 'COMPLETE';
+                                                                    } else if (log.status === 'F') {
+                                                                        status = 'FAILED';
+                                                                    } else if (log.status === 'O') {
+                                                                        status = 'ON PROCESS';
+                                                                    } else if (log.status === 'P') {
+                                                                        status = 'PENDING';
+                                                                    } else if (log.status === 'R') {
+                                                                        status = 'ROLLBACK';
+                                                                    } else if (log.status === 'S') {
+                                                                        status = 'REVERSAL';
+                                                                    }
+                                                                    return status;
+                                                                })()}
+                                                            </td>
                                                             <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
                                                                 ? new Date(log.request_date).toLocaleDateString('en-GB', {
                                                                     day: '2-digit',