diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index 0d8dc59..38dfbb2 100644
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@@ -49,7 +49,6 @@ const DetailTransaction = () => {
                         id: selectedTransactionId
                     });
                     setTransactionDetails(response?.data);
-                    // console.log(response?.data);
                     // console.log(selectedTransactionId);
                 } catch (error) {
                     console.error('Error fetching transaction', error);
@@ -156,6 +155,35 @@ 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, '&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}>
             <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
@@ -202,6 +230,15 @@ const DetailTransaction = () => {
                             </button>
                         )}
 
+                        {transactionDetails?.kind !== 'P' && (
+                            <button
+                                className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'destinationwallet' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                                onClick={() => setActiveTab('destinationwallet')}
+                            >
+                                Destination Wallet
+                            </button>
+                        )}
+
                         <button
                             className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
                             onClick={() => setActiveTab('log')}
@@ -226,6 +263,24 @@ const DetailTransaction = () => {
                             </button>
                         )}
 
+                        {transactionDetails?.kind !== 'P' && (
+                            <button
+                                className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'approve' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                                onClick={() => setActiveTab('approve')}
+                            >
+                                Approval Log
+                            </button>
+                        )}
+
+                        {transactionDetails?.kind !== 'P' && (
+                            <button
+                                className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'p24' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                                onClick={() => setActiveTab('p24')}
+                            >
+                                Log P24
+                            </button>
+                        )}
+
                     </div>
 
                     {/* Tab Content */}
@@ -285,6 +340,7 @@ const DetailTransaction = () => {
                                                 let status;
                                                 let badgeClass;
 
+
                                                 if (transactionDetails?.status === 'C') {
                                                     status = 'COMPLETE';
                                                     badgeClass = 'bg-green-100 text-green-800';
@@ -294,6 +350,7 @@ const DetailTransaction = () => {
                                                 } else if (transactionDetails?.status === 'O') {
                                                     status = 'ON PROCESS';
                                                     badgeClass = 'bg-blue-100 text-blue-800';
+                                                } else if (transactionDetails?.status === 'P') {
                                                 } else if (transactionDetails?.status === 'P') {
                                                     status = 'PENDING';
                                                     badgeClass = 'bg-gray-100 text-gray-800';
@@ -303,6 +360,12 @@ const DetailTransaction = () => {
                                                 } else if (transactionDetails?.status === 'S') {
                                                     status = 'REVERSAL';
                                                     badgeClass = 'bg-purple-100 text-purple-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 (
@@ -329,7 +392,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';
@@ -395,59 +458,60 @@ const DetailTransaction = () => {
                             </div>
                         )}
 
-                        {activeTab === 'detail' && transactionDetails?.kind == 'P' && (
-                            <div className="space-y-4">
-                                <h3 className="font-semibold flex items-center">
-                                    Product Information
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Product Info
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <p className="text-sm text-gray-500">Product Name</p>
-                                        <p className="font-medium">
-                                            {transactionDetails?.purchase?.product?.name ?? "-"}
-                                        </p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Price Cash</p>
-                                        <p className="font-medium">
-                                            {transactionDetails?.purchase?.product?.price_cash != null
-                                                ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(transactionDetails.purchase.product.price_cash)
-                                                : "-"}
-                                        </p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Price Point</p>
-                                        <p className="font-medium">
-                                            {transactionDetails?.purchase?.product?.price_point ?? "-"}
-                                        </p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Product Type</p>
-                                        <p className="font-medium">
-                                            {transactionDetails?.purchase?.product?.type ?? "-"}
-                                        </p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Provider Name</p>
-                                        <p className="font-medium">
-                                            {transactionDetails?.purchase?.product?.provider?.description ?? "-"}
-                                        </p>
-                                    </div>
-                                    <div>
-                                        <p className="text-sm text-gray-500">Provider Type</p>
-                                        <p className="font-medium">
-                                            {transactionDetails?.purchase?.product?.provider?.type === "h2h"
-                                                ? "HOST TO HOST"
-                                                : transactionDetails?.purchase?.product?.provider?.type === "agent"
-                                                    ? "AGENT"
+
+                        {activeTab === 'detail' && transactionDetails?.kind == 'P' && transactionDetails?.kind == 'P' && (
+                                <div className="space-y-4">
+                                    <h3 className="font-semibold flex items-center">
+                                        Product Information
+                                        <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
+                                            Product Info
+                                        </span>
+                                    </h3>
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <div>
+                                            <p className="text-sm text-gray-500">Product Name</p>
+                                            <p className="font-medium">
+                                                {transactionDetails?.purchase?.product?.name ?? "-"}
+                                            </p>
+                                        </div>
+                                        <div>
+                                            <p className="text-sm text-gray-500">Price Cash</p>
+                                            <p className="font-medium">
+                                                {transactionDetails?.purchase?.product?.price_cash != null
+                                                    ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(transactionDetails.purchase.product.price_cash)
                                                     : "-"}
-                                        </p>
+                                            </p>
+                                        </div>
+                                        <div>
+                                            <p className="text-sm text-gray-500">Price Point</p>
+                                            <p className="font-medium">
+                                                {transactionDetails?.purchase?.product?.price_point ?? "-"}
+                                            </p>
+                                        </div>
+                                        <div>
+                                            <p className="text-sm text-gray-500">Product Type</p>
+                                            <p className="font-medium">
+                                                {transactionDetails?.purchase?.product?.type ?? "-"}
+                                            </p>
+                                        </div>
+                                        <div>
+                                            <p className="text-sm text-gray-500">Provider Name</p>
+                                            <p className="font-medium">
+                                                {transactionDetails?.purchase?.product?.provider?.description ?? "-"}
+                                            </p>
+                                        </div>
+                                        <div>
+                                            <p className="text-sm text-gray-500">Provider Type</p>
+                                            <p className="font-medium">
+                                                {transactionDetails?.purchase?.product?.provider?.type === "h2h"
+                                                    ? "HOST TO HOST"
+                                                    : transactionDetails?.purchase?.product?.provider?.type === "agent"
+                                                        ? "AGENT"
+                                                        : "-"}
+                                            </p>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
                         )}
 
                         {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
@@ -494,15 +558,21 @@ const DetailTransaction = () => {
                                                 let status;
                                                 let badgeClass;
 
+                                                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';
@@ -514,6 +584,20 @@ const DetailTransaction = () => {
                                                     badgeClass = 'bg-purple-100 text-purple-800';
                                                 }
 
+                                                return (
+                                                    <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+                                                        {status}
+                                                    </span>
+                                                );
+                                                    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 (
                                                     <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
                                                         {status}
@@ -537,6 +621,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';
                                                 }
@@ -666,6 +751,7 @@ const DetailTransaction = () => {
                             </div>
                         )}
 
+                        {activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && (
                         {activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Destination Wallet</h3>
@@ -725,7 +811,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>
@@ -796,6 +882,7 @@ const DetailTransaction = () => {
                             </div>
                         )}
 
+                        {activeTab === 'approve' && transactionDetails?.kind == "P" && (
                         {activeTab === 'approve' && transactionDetails?.kind == "P" && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Approval Logs</h3>
@@ -872,7 +959,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>