diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index 38dfbb2..7c10af3 100644
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@@ -155,35 +155,6 @@ 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">
@@ -392,7 +363,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';
@@ -460,58 +431,58 @@ const DetailTransaction = () => {
 
 
                         {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)
+                            <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"
                                                     : "-"}
-                                            </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>
+                                        </p>
                                     </div>
                                 </div>
+                            </div>
                         )}
 
                         {activeTab === 'detail' && transactionDetails?.kind != 'P' && transactionDetails?.transfer != null && (
@@ -555,47 +526,37 @@ const DetailTransaction = () => {
                                         <p className="text-sm text-gray-500">Status</p>
                                         <p className="font-medium">
                                             {(() => {
-                                                let status;
-                                                let badgeClass;
+                                                let status = 'UNKNOWN';
+                                                let badgeClass = 'bg-gray-100 text-gray-800';
 
-                                                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';
-                                                } 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}
-                                                    </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';
+                                                switch (transactionDetails?.status) {
+                                                    case 'C':
+                                                        status = 'COMPLETE';
+                                                        badgeClass = 'bg-green-100 text-green-800';
+                                                        break;
+                                                    case 'F':
+                                                        status = 'FAILED';
+                                                        badgeClass = 'bg-red-100 text-red-800';
+                                                        break;
+                                                    case 'O':
+                                                        status = 'ON PROCESS';
+                                                        badgeClass = 'bg-blue-100 text-blue-800';
+                                                        break;
+                                                    case 'P':
+                                                        status = 'PENDING';
+                                                        badgeClass = 'bg-gray-100 text-gray-800';
+                                                        break;
+                                                    case 'R':
+                                                        status = 'ROLLBACK';
+                                                        badgeClass = 'bg-yellow-100 text-yellow-800';
+                                                        break;
+                                                    case 'S':
+                                                        status = 'REVERSAL';
+                                                        badgeClass = 'bg-purple-100 text-purple-800';
+                                                        break;
+                                                    default:
+                                                        // optional: keep 'UNKNOWN' or set to null
+                                                        break;
                                                 }
 
                                                 return (
@@ -604,6 +565,7 @@ const DetailTransaction = () => {
                                                     </span>
                                                 );
                                             })()}
+
                                         </p>
                                     </div>
                                     <div>
@@ -751,7 +713,6 @@ 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>
@@ -798,6 +759,7 @@ const DetailTransaction = () => {
 
                                 )}
                             </div>
+
                         )}
 
 
@@ -883,68 +845,67 @@ const DetailTransaction = () => {
                         )}
 
                         {activeTab === 'approve' && transactionDetails?.kind == "P" && (
-                        {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
-                                                        </td>
+                                <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>
-                                                )}
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                )}
-                            </div>
-                        )}
+                                                </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
+                                                            </td>
+                                                        </tr>
+                                                    )}
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    )}
+                                </div>
+                            )}
 
                         {activeTab === 'p24' && (
                             <div className="space-y-4">