From 0fada02155354752dc35e018220cbecb1fb3a284 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Mon, 19 May 2025 11:39:10 +0700
Subject: [PATCH] update page transaction

---
 .../dashboards/home/blocks/MemberActivity.tsx |  86 ++++---
 .../home/blocks/TransactionPieChart.tsx       |   6 +-
 .../home/blocks/TransactionValue.tsx          |  12 +
 .../blocks/DetailApprovalTransaction.tsx      |   4 +-
 .../blocks/DetailTransaction.tsx              | 239 +++++++++++-------
 .../blocks/ListToolbar.tsx                    |   4 +
 .../hooks/TransactionContext.tsx              |   4 +
 7 files changed, 233 insertions(+), 122 deletions(-)

diff --git a/src/pages/dashboards/home/blocks/MemberActivity.tsx b/src/pages/dashboards/home/blocks/MemberActivity.tsx
index 79c998d..badc8b0 100644
--- a/src/pages/dashboards/home/blocks/MemberActivity.tsx
+++ b/src/pages/dashboards/home/blocks/MemberActivity.tsx
@@ -10,12 +10,37 @@ interface Props {
     enddate: string;
 }
 
+const polarToCartesian = (cx: number, cy: number, radius: number, angleInDegrees: number) => {
+    const angleInRadians = (angleInDegrees * Math.PI) / 180.0;
+    return {
+        x: cx + radius * Math.cos(angleInRadians),
+        y: cy + radius * Math.sin(angleInRadians),
+    };
+};
+
+const describeArc = (
+    x: number,
+    y: number,
+    radius: number,
+    startAngle: number,
+    endAngle: number
+) => {
+    const start = polarToCartesian(x, y, radius, endAngle);
+    const end = polarToCartesian(x, y, radius, startAngle);
+    const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+
+    return [
+        "M", start.x, start.y,
+        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y,
+    ].join(" ");
+};
+
 const MemberActivity = ({ startdate, enddate }: Props) => {
     const { GetData } = useCallApi();
     const [responseTransactionValue, setResponseTransactionValue] = useState<any>(null);
 
     useEffect(() => {
-        const fetchDataTransactionValue = async () => {
+        const fetchData = async () => {
             try {
                 const res = await GetData(`${API_URL}/active-user`, {
                     date_from: startdate,
@@ -23,43 +48,33 @@ const MemberActivity = ({ startdate, enddate }: Props) => {
                 });
                 setResponseTransactionValue(res);
             } catch (error) {
-                console.error('Error fetching transaction value:', error);
+                console.error('Error fetching data:', error);
             }
         };
 
-        fetchDataTransactionValue();
+        fetchData();
     }, [startdate, enddate, GetData]);
 
-    const percentage = parseFloat((responseTransactionValue?.data?.total_customer_active_percentage ?? 0).toFixed(2)) ?? 0;
+    const percentage = parseFloat((responseTransactionValue?.data?.total_customer_active_percentage ?? 0).toFixed(2));
     const totalCustomer = responseTransactionValue?.data?.total_customer ?? 0;
     const activeCustomer = responseTransactionValue?.data?.total_customer_active ?? 0;
     const reguler = responseTransactionValue?.data?.reguler ?? 0;
     const premium = responseTransactionValue?.data?.premium ?? 0;
     const agent = responseTransactionValue?.data?.agent ?? 0;
 
-    // Hitung sudut pointer
-    const angle = (percentage / 100) * 180; // 0° (kiri) ke 180° (kanan)
-    const radians = (angle * Math.PI) / 180;
-    const radius = 40; // Radius dari setengah lingkaran
-    const center = 50; // Titik pusat lingkaran
-    const pointerLength = 25; // Panjang pointer
-
-    const x = center + pointerLength * Math.cos(radians - Math.PI); // offset agar mulai dari kiri
-    const y = center + pointerLength * Math.sin(radians - Math.PI);
-
-    // Hitung titik akhir untuk arc aktif
-    const arcAngle = (Math.PI * percentage) / 100;
-    const arcX = 50 + radius * Math.cos(Math.PI - arcAngle);
-    const arcY = 50 - radius * Math.sin(arcAngle);
+    // Calculate pointer angle
+    const angle = (percentage / 100) * 180;
+    const pointerX = 50 + 25 * Math.cos((angle - 180) * Math.PI / 180);
+    const pointerY = 50 + 25 * Math.sin((angle - 180) * Math.PI / 180);
 
     return (
-        <div className="p-6 bg-white rounded-lg shadow-md w-1/3">
-            <div className="flex justify-between items-center pb-3 mb-4">
+        <div className="p-6 bg-white rounded-lg shadow-md w-full max-w-md">
+            <div className="pb-3 mb-4">
                 <h2 className="text-lg font-semibold text-gray-700">Member Activity</h2>
             </div>
 
             <div className="flex gap-6">
-                {/* Sidebar */}
+                {/* Sidebar Info */}
                 <ul className="space-y-4 w-1/2 text-gray-700 text-sm">
                     <li className="flex items-center gap-2">
                         <UsersIcon className="w-4 h-4" />
@@ -70,15 +85,15 @@ const MemberActivity = ({ startdate, enddate }: Props) => {
                         <span>Active Customer: {activeCustomer}</span>
                     </li>
                     <li className="flex items-center gap-2">
-                        <UserCheckIcon className="w-4 h-4" color='blue'/>
+                        <UserCheckIcon className="w-4 h-4" color='blue' />
                         <span>Reguler: {reguler}</span>
                     </li>
                     <li className="flex items-center gap-2">
-                        <UserCheckIcon className="w-4 h-4" color='green'/>
+                        <UserCheckIcon className="w-4 h-4" color='green' />
                         <span>Premium: {premium}</span>
                     </li>
                     <li className="flex items-center gap-2">
-                        <UserCheckIcon className="w-4 h-4" color='orange'/>
+                        <UserCheckIcon className="w-4 h-4" color='orange' />
                         <span>Agent: {agent}</span>
                     </li>
                 </ul>
@@ -88,7 +103,7 @@ const MemberActivity = ({ startdate, enddate }: Props) => {
                     <div className="border border-gray-200 rounded-md p-4 text-center">
                         <h3 className="text-sm text-gray-600 font-medium mb-2">Active User</h3>
                         <div className="relative h-24 w-full">
-                            <svg className="w-full h-full" viewBox="0 0 100 50">
+                            <svg viewBox="0 0 100 50" className="w-full h-full">
                                 {/* Background arc */}
                                 <path
                                     d="M 10 50 A 40 40 0 0 1 90 50"
@@ -97,24 +112,27 @@ const MemberActivity = ({ startdate, enddate }: Props) => {
                                     strokeWidth="10"
                                 />
                                 {/* Active arc */}
-                                <path
-                                    d={`M 10 50 A 40 40 0 ${percentage > 50 ? 1 : 0} 1 ${arcX} ${arcY}`}
-                                    fill="none"
-                                    stroke="#34d399"
-                                    strokeWidth="10"
-                                />
+                                {percentage > 0 && (
+                                    <path
+                                        d={describeArc(50, 50, 40, 180, 180 + (percentage * 180 / 100))}
+                                        fill="none"
+                                        stroke="#34d399"
+                                        strokeWidth="10"
+                                        strokeLinecap="round"
+                                    />
+                                )}
                                 {/* Pointer */}
                                 <line
                                     x1="50"
                                     y1="50"
-                                    x2={x}
-                                    y2={y}
+                                    x2={pointerX}
+                                    y2={pointerY}
                                     stroke="#111827"
                                     strokeWidth="4"
                                     strokeLinecap="round"
                                 />
                             </svg>
-                            <div className="flex justify-between text-xs text-gray-500 px-1">
+                            <div className="flex justify-between text-xs text-gray-500 px-1 mt-1">
                                 <span>{percentage}%</span>
                                 <span>100%</span>
                             </div>
diff --git a/src/pages/dashboards/home/blocks/TransactionPieChart.tsx b/src/pages/dashboards/home/blocks/TransactionPieChart.tsx
index 904b962..d5b0aae 100644
--- a/src/pages/dashboards/home/blocks/TransactionPieChart.tsx
+++ b/src/pages/dashboards/home/blocks/TransactionPieChart.tsx
@@ -43,7 +43,11 @@ const TransactionPieChart = ({ startdate, enddate }: Props) => {
             { name: 'Purchase', value: parseFloat((responseTransactionValue?.data?.P ?? 0).toFixed(2)), color: '#baf7c5' },
             { name: 'Withdraw', value: parseFloat((responseTransactionValue?.data?.W ?? 0).toFixed(2)), color: '#f56565' },
             { name: 'Top Up Partner', value: parseFloat((responseTransactionValue?.data?.N ?? 0).toFixed(2)), color: '#f7fa52' },
-            { name: 'Reward', value: parseFloat((responseTransactionValue?.data?.E ?? 0).toFixed(2)), color: '#f7fa52' },
+            { name: 'Reward', value: parseFloat((responseTransactionValue?.data?.E ?? 0).toFixed(2)), color: '#f50a19' },
+            { name: 'Purchase Loja', value: parseFloat((responseTransactionValue?.data?.L ?? 0).toFixed(2)), color: '#F0A04B' },
+            { name: 'Top Up P24', value: parseFloat((responseTransactionValue?.data?.B ?? 0).toFixed(2)), color: '#FADA7A' },
+            { name: 'Transfer Agent', value: parseFloat((responseTransactionValue?.data?.A ?? 0).toFixed(2)), color: '#B1C29E' },
+            { name: 'Withdrawal Agent', value: parseFloat((responseTransactionValue?.data?.M ?? 0).toFixed(2)), color: '#FCE7C8' },
         ];        
 
     return (
diff --git a/src/pages/dashboards/home/blocks/TransactionValue.tsx b/src/pages/dashboards/home/blocks/TransactionValue.tsx
index 451decc..3892b15 100644
--- a/src/pages/dashboards/home/blocks/TransactionValue.tsx
+++ b/src/pages/dashboards/home/blocks/TransactionValue.tsx
@@ -67,6 +67,18 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
                 case "E":
                     type = "Reward";
                     break;
+                case "L":
+                    type = "Purchase Loja"
+                    break;
+                case "B":
+                    type ="Top Up P24";
+                    break;
+                case "A":
+                    type = " Transfer Agent";
+                    break;
+                case "M":
+                    type = "Withdrawal Agent";
+                    break;
                 default:
                     type = "Unknown";
                     break;
diff --git a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
index 53541be..dd878f6 100644
--- a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
@@ -118,12 +118,12 @@ const DetailApprovalTransaction = () => {
                 <DialogBody>
                     {/* Tabs Navigation */}
                     <div className="flex border-b border-gray-200">
-                        <button
+                        {/* <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> */}
                         <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'}`}
                             onClick={() => setActiveTab('origincustomer')}
diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index 34e6b81..0c91626 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);
@@ -127,6 +126,35 @@ const DetailTransaction = () => {
         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}>
             <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
@@ -137,12 +165,15 @@ const DetailTransaction = () => {
                 <DialogBody>
                     {/* Tabs Navigation */}
                     <div className="flex border-b border-gray-200">
-                        <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'}`}
                             onClick={() => setActiveTab('origincustomer')}
@@ -161,30 +192,39 @@ const DetailTransaction = () => {
                         >
                             Origin Wallet
                         </button>
-                        <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>
+                        {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')}
                         >
                             Transaction Log
                         </button>
-                        <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>
-                        <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>
+                        {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 */}
@@ -281,8 +321,16 @@ 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';
+                                                } else if (transactionDetails?.kind === 'B') {
+                                                    kind = 'TOP UP P24';
+                                                } else if (transactionDetails?.kind === 'A') {
+                                                    kind = 'TRANSFER AGENT';
+                                                } else if (transactionDetails?.kind === 'M') {
+                                                    kind = 'WITHDRAWAL AGENT';
                                                 }
                                                 return kind;
                                             })()}
@@ -338,59 +386,60 @@ const DetailTransaction = () => {
                                 </div>
                             </div>
                         )}
-                        {activeTab === 'detail' && (
-                        <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' && (
+                            <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 && (
@@ -463,7 +512,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';
                                                 }
                                                 return kind;
@@ -592,7 +641,7 @@ const DetailTransaction = () => {
                             </div>
                         )}
 
-                        {activeTab === 'destinationwallet' && (
+                        {activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Destination Wallet</h3>
 
@@ -651,7 +700,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>
@@ -683,8 +732,18 @@ 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">{log.response_body}</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)
+                                                                    ),
+                                                                }}
+                                                            />
+                                                        </td>
                                                         <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint}</td>
                                                     </tr>
                                                 ))
@@ -701,7 +760,7 @@ const DetailTransaction = () => {
                             </div>
                         )}
 
-                        {activeTab === 'approve' && (
+                        {activeTab === 'approve' && transactionDetails?.kind == "P" && (
                             <div className="space-y-4">
                                 <h3 className="font-semibold">Approval Logs</h3>
                                 {transactionDetails?.log_approve.length === 0 ? (
@@ -777,7 +836,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>
@@ -810,8 +869,18 @@ 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">{log.response_body}</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)
+                                                                        ),
+                                                                    }}
+                                                                />
+                                                            </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/ListToolbar.tsx b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
index 342c24e..413b7ef 100644
--- a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
@@ -178,6 +178,10 @@ const ListToolbar = () => {
               <SelectItem value="R">RETURN</SelectItem>
               <SelectItem value="N">TOP UP PARTNER</SelectItem>
               <SelectItem value="E">REWARD</SelectItem>
+              <SelectItem value="L">PURCHASE LOJA</SelectItem>
+              <SelectItem value="B">TOP UP P24</SelectItem>
+              <SelectItem value="A">TRANSFER AGENT</SelectItem>
+              <SelectItem value="M">WITHDRAWAL AGENT</SelectItem>
             </SelectContent>
           </Select>
 
diff --git a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
index bfd2355..61c9de6 100644
--- a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
+++ b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
@@ -78,6 +78,10 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
             case 'R': return 'RETURN';
             case 'N': return 'TOP UP PARTNER';
             case 'E': return 'REWARD';
+            case 'L': return 'PURCHASE LOJA';
+            case 'B': return 'TOP UP P24';
+            case 'A': return 'TRANSFER AGENT';
+            case 'M': return 'WITHDRAWAL AGENT'; 
             default: return '_';
           }
         },