diff --git a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
index 5a6802c..f2bf6fa 100644
--- a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
@@ -107,6 +107,35 @@ const DetailApprovalTransaction = () => {
         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, '&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 (
         <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@@ -666,7 +695,7 @@ 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">{log.type || ''}</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',
@@ -689,9 +718,30 @@ const DetailApprovalTransaction = () => {
                                                                 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_endpoint}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">
+                                                            <pre
+                                                                dangerouslySetInnerHTML={{
+                                                                    __html: syntaxHighlight(
+                                                                        typeof (log.request_body ?? '') === 'string'
+                                                                            ? (log.request_body ?? '')
+                                                                            : JSON.stringify(log.request_body ?? '', null, 4)
+                                                                    ),
+                                                                }}
+                                                            />
+                                                        </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>
                                                 ))
                                             ) : (
@@ -792,7 +842,7 @@ const DetailApprovalTransaction = () => {
                                                 {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) => (
                                                         <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">{log.type ?? ''}</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',
@@ -816,9 +866,30 @@ const DetailApprovalTransaction = () => {
                                                                     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_endpoint ?? '-'}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">
+                                                                <pre
+                                                                    dangerouslySetInnerHTML={{
+                                                                        __html: syntaxHighlight(
+                                                                            typeof (log.request_body ?? '') === 'string'
+                                                                                ? (log.request_body ?? '')
+                                                                                : JSON.stringify(log.request_body ?? '', null, 4)
+                                                                        ),
+                                                                    }}
+                                                                />
+                                                            </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>
                                                     ))
                                                 ) : (
diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index 2e12cf1..0d8dc59 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);
@@ -165,14 +166,14 @@ const DetailTransaction = () => {
                 <DialogBody>
                     {/* Tabs Navigation */}
                     <div className="flex border-b border-gray-200">
-                        {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>
-                        )}
+                        {/* {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'}`}
@@ -724,7 +725,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>
@@ -733,7 +734,7 @@ 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">{log.type || ''}</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',
@@ -756,19 +757,30 @@ 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">
                                                             <pre
                                                                 dangerouslySetInnerHTML={{
                                                                     __html: syntaxHighlight(
-                                                                        typeof log.response_body === 'string'
-                                                                            ? log.response_body
-                                                                            : JSON.stringify(log.response_body, null, 4)
+                                                                        typeof (log.request_body ?? '') === 'string'
+                                                                            ? (log.request_body ?? '')
+                                                                            : JSON.stringify(log.request_body ?? '', null, 4)
                                                                     ),
                                                                 }}
                                                             />
                                                         </td>
-                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint}</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>
                                                 ))
                                             ) : (
@@ -860,7 +872,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>
@@ -869,7 +881,7 @@ const DetailTransaction = () => {
                                                 {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) => (
                                                         <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">{log.type ?? ''}</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',
@@ -893,19 +905,30 @@ 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">
                                                                 <pre
                                                                     dangerouslySetInnerHTML={{
                                                                         __html: syntaxHighlight(
-                                                                            typeof log.response_body === 'string'
-                                                                                ? log.response_body
-                                                                                : JSON.stringify(log.response_body, null, 4)
+                                                                            typeof (log.request_body ?? '') === 'string'
+                                                                                ? (log.request_body ?? '')
+                                                                                : JSON.stringify(log.request_body ?? '', null, 4)
                                                                         ),
                                                                     }}
                                                                 />
                                                             </td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</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>
                                                     ))
                                                 ) : (