From 3e731b60b5c9f39dc6831a4568cadac14d88627a Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Tue, 20 May 2025 10:14:07 +0700
Subject: [PATCH] update

---
 .../blocks/DetailApprovalTransaction.tsx      | 102 ++++----
 .../blocks/DetailTransaction.tsx              | 220 ++++++++----------
 2 files changed, 139 insertions(+), 183 deletions(-)

diff --git a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
index f2bf6fa..3cc956f 100644
--- a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
@@ -107,34 +107,34 @@ const DetailApprovalTransaction = () => {
         return null;
     };
 
-    const [formattedJson, setFormattedJson] = useState('');
-    const [highlightedJson, setHighlightedJson] = useState('');
+    // 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));
-    }, []);
+    // 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>';
-        });
-    }
+    // 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 (
@@ -719,26 +719,15 @@ const DetailApprovalTransaction = () => {
                                                             })
                                                             : ''}</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)
-                                                                    ),
-                                                                }}
-                                                            />
+                                                            {
+                                                                JSON.stringify(log.request_body ?? '', null, 2)
+                                                            }
+
                                                         </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)
-                                                                    ),
-                                                                }}
-                                                            />
+                                                            {
+                                                                JSON.stringify(log.response_body ?? '', null, 2)
+                                                            }
                                                         </td>
 
                                                         <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint || ''}</td>
@@ -867,26 +856,15 @@ const DetailApprovalTransaction = () => {
                                                                 })
                                                                 : ''}</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)
-                                                                        ),
-                                                                    }}
-                                                                />
+                                                                {
+                                                                    JSON.stringify(log.request_body ?? '', null, 2)
+                                                                }
+
                                                             </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)
-                                                                        ),
-                                                                    }}
-                                                                />
+                                                                {
+                                                                    JSON.stringify(log.response_body ?? '', null, 2)
+                                                                }
                                                             </td>
 
                                                             <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td>
diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index cd4675b..8ec6d98 100644
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@@ -126,34 +126,34 @@ const DetailTransaction = () => {
         return null;
     };
 
-    const [formattedJson, setFormattedJson] = useState('');
-    const [highlightedJson, setHighlightedJson] = useState('');
+    // 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));
-    }, []);
+    // 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>';
-        });
-    }
+    // 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}>
@@ -780,26 +780,15 @@ const DetailTransaction = () => {
                                                             })
                                                             : ''}</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)
-                                                                    ),
-                                                                }}
-                                                            />
+                                                            {
+                                                                JSON.stringify(log.request_body ?? '', null, 2)
+                                                            }
+
                                                         </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)
-                                                                    ),
-                                                                }}
-                                                            />
+                                                            {
+                                                                JSON.stringify(log.response_body ?? '', null, 2)
+                                                            }
                                                         </td>
 
                                                         <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint || ''}</td>
@@ -819,67 +808,67 @@ const DetailTransaction = () => {
                         )}
 
                         {activeTab === 'approve' && transactionDetails?.kind == "P" && (
-                                <div className="space-y-4">
-                                    <h3 className="font-semibold">Approval Logs</h3>
-                                    {transactionDetails?.log_approve.length === 0 ? (
-                                        <p className="text-sm text-gray-500">No data available</p>
-                                    ) : (
-                                        <div className="border rounded-lg overflow-x-auto">
-                                            <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">Status</th>
-                                                        <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
-                                                        {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    {transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
-                                                        transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
-                                                            <tr key={index} className="border-t">
-                                                                <td className="px-4 py-2 font-medium">
-                                                                    {(() => {
-                                                                        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;
-                                                                    })()}
-                                                                </td>
-                                                                <td className="px-4 py-2 text-sm text-gray-500">
-                                                                    {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(' ', ' ')}
-                                                                </td>
-                                                                {/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
-                                                            </tr>
-                                                        ))
-                                                    ) : (
-                                                        <tr>
-                                                            <td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
-                                                                No logs available
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Approval Logs</h3>
+                                {transactionDetails?.log_approve.length === 0 ? (
+                                    <p className="text-sm text-gray-500">No data available</p>
+                                ) : (
+                                    <div className="border rounded-lg overflow-x-auto">
+                                        <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">Status</th>
+                                                    <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
+                                                    {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
+                                                    transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
+                                                        <tr key={index} className="border-t">
+                                                            <td className="px-4 py-2 font-medium">
+                                                                {(() => {
+                                                                    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;
+                                                                })()}
                                                             </td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">
+                                                                {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(' ', ' ')}
+                                                            </td>
+                                                            {/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
                                                         </tr>
-                                                    )}
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                    )}
-                                </div>
-                            )}
+                                                    ))
+                                                ) : (
+                                                    <tr>
+                                                        <td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
+                                                            No logs available
+                                                        </td>
+                                                    </tr>
+                                                )}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                )}
+                            </div>
+                        )}
 
                         {activeTab === 'p24' && (
                             <div className="space-y-4">
@@ -928,26 +917,15 @@ const DetailTransaction = () => {
                                                                 })
                                                                 : ''}</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)
-                                                                        ),
-                                                                    }}
-                                                                />
+                                                                {
+                                                                    JSON.stringify(log.request_body ?? '', null, 2)
+                                                                }
+
                                                             </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)
-                                                                        ),
-                                                                    }}
-                                                                />
+                                                                {
+                                                                    JSON.stringify(log.response_body ?? '', null, 2)
+                                                                }
                                                             </td>
 
                                                             <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td>