From 6d7cd839d6999dfed61c859d0fbd74018df323dd Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Mon, 19 May 2025 11:39:10 +0700
Subject: [PATCH 1/7] 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 '_';
           }
         },

From c753fb45f023e44390d85f7b3a4b289d4c083297 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 19 May 2025 13:36:10 +0700
Subject: [PATCH 2/7] adding deduct origin on transfer fee

---
 .../transfer/transferfee/blocks/AddDialog.tsx |  98 +++++++++++++++-
 .../transferfee/blocks/EditDialog.tsx         | 109 +++++++++++++++++-
 .../hooks/ManageTransferFeeContext.tsx        |  28 ++++-
 3 files changed, 222 insertions(+), 13 deletions(-)

diff --git a/src/pages/transfer/transferfee/blocks/AddDialog.tsx b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
index ff0ff5a..f6a736e 100644
--- a/src/pages/transfer/transferfee/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
@@ -106,6 +106,7 @@ const AddFeeDialog = () => {
     created_by: '',
     created_at: '',
     deduct_from: '',
+    deduct_origin: '00000000-0000-0000-0000-000000000000',
     deduct_from_account: '',
     credit_to: '',
     credit_destination: '00000000-0000-0000-0000-000000000000',
@@ -296,6 +297,14 @@ const AddFeeDialog = () => {
         return;
       }
 
+      if (formField.deduct_from === 'I' && !formField.deduct_origin) {
+        setAlert({
+          show: true,
+          message: 'Deduct Origin is required when Input is selected'
+        });
+        setIsSubmitting(false);
+        return;
+      }
       setAlert({ show: false, message: '' });
 
       const payload = { ...formField };
@@ -304,6 +313,9 @@ const AddFeeDialog = () => {
         payload.credit_destination = '00000000-0000-0000-0000-000000000000';
       }
 
+      if (formField.deduct_from !== 'I') {
+        payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
+      }
       try {
         const response = await PostData(`${API_URL}/transactionfees/create`, payload);
 
@@ -557,7 +569,13 @@ const AddFeeDialog = () => {
                   </label>
                   <Select
                     value={formField.deduct_from}
-                    onValueChange={(value) => setFormField({ ...formField, deduct_from: value })}
+                    onValueChange={(value) =>
+                      setFormField({
+                        ...formField,
+                        deduct_from: value,
+                        deduct_origin: value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
+                      })
+                    }
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select Deduct From" />
@@ -565,12 +583,86 @@ const AddFeeDialog = () => {
                     <SelectContent>
                       <SelectItem value="D">Destination Member</SelectItem>
                       <SelectItem value="S">Source Member</SelectItem>
+                      <SelectItem value="I">Input</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
+                {formField.deduct_from === 'I' && (
+                  <div className="w-full">
+                    <label className="form-label">
+                      Deduct Origin <span className="text-red-500">*</span>
+                    </label>
+                    <div className="relative">
+                      <div
+                        className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+                        onClick={() => setOpen(!open)}
+                      >
+                        <span className="truncate">
+                          {customers.find((customer) => customer.id === formField.deduct_origin)
+                            ?.username || 'Search customer...'}
+                        </span>
+                        <path d="m6 9 6 6 6-6"></path>
+                      </div>
+
+                      {open && (
+                        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+                          <div className="sticky top-0 bg-white p-2 border-b">
+                            <Input
+                              className="h-8 text-sm"
+                              type="text"
+                              placeholder="Search customer..."
+                              value={customerSearchTerm}
+                              onChange={(e) => setCustomerSearchTerm(e.target.value)}
+                              autoComplete="off"
+                              onClick={(e) => e.stopPropagation()}
+                              autoFocus
+                            />
+                          </div>
+                          <div>
+                            {customers
+                              .filter(
+                                (customer) =>
+                                  customer.username
+                                    .toLowerCase()
+                                    .includes(customerSearchTerm.toLowerCase()) ||
+                                  customer.msisdn.includes(customerSearchTerm)
+                              )
+                              .map((customer) => (
+                                <div
+                                  key={customer.id}
+                                  className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                                  onClick={() => {
+                                    setFormField({
+                                      ...formField,
+                                      deduct_origin: customer.id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {customer.username}
+                                </div>
+                              ))}
+                            {customers.filter(
+                              (customer) =>
+                                customer.username
+                                  .toLowerCase()
+                                  .includes(customerSearchTerm.toLowerCase()) ||
+                                customer.msisdn.includes(customerSearchTerm)
+                            ).length === 0 && (
+                              <div className="px-3 py-2 text-sm text-gray-500">
+                                No customer found
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+
                 <div className="w-full">
                   <label className="form-label">
-                    Deduct From Destination <span className="text-red-500">*</span>
+                    Deduct From Account <span className="text-red-500">*</span>
                   </label>
                   {renderSelectWithLoading(
                     formField.deduct_from_account,
@@ -580,6 +672,7 @@ const AddFeeDialog = () => {
                     isLoadingWallets
                   )}
                 </div>
+
                 <div className="w-full">
                   <label className="form-label">
                     Credit To <span className="text-red-500">*</span>
@@ -678,6 +771,7 @@ const AddFeeDialog = () => {
                     </div>
                   </div>
                 )}
+
                 <div className="w-full">
                   <label className="form-label">
                     Credit Destination Account <span className="text-red-500">*</span>
diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
index bc1f1cc..1999404 100644
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -1,3 +1,4 @@
+
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import {
@@ -99,6 +100,7 @@ const EditFeeDialog = () => {
     updated_by: '',
     updated_at: '',
     deduct_from: '',
+    deduct_origin: '00000000-0000-0000-0000-000000000000',
     deduct_from_account: '',
     credit_to: '',
     credit_destination: '00000000-0000-0000-0000-000000000000',
@@ -167,6 +169,15 @@ const EditFeeDialog = () => {
         return;
       }
 
+      if (formField.deduct_from === 'I' && !formField.deduct_origin) {
+        setAlert({
+          show: true,
+          message: 'Deduct Origin is required when Input is selected'
+        });
+        setIsSubmitting(false);
+        return;
+      }
+
       setAlert({ show: false, message: '' });
 
       const payload = { ...formField };
@@ -175,6 +186,11 @@ const EditFeeDialog = () => {
         payload.credit_destination = '00000000-0000-0000-0000-000000000000';
       }
 
+      if (formField.deduct_from !== 'I') {
+        payload.deduct_origin = '00000000-0000-0000-0000-000000000000';
+      }
+
+      // console.log(payload);
       try {
         const response = await PutData(
           `${API_URL}/transactionfees/update/${selectedTransferFee}`,
@@ -293,7 +309,7 @@ const EditFeeDialog = () => {
       setIsLoadingTransferFee(true);
       try {
         const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, {});
-
+        // console.log(response);
         if (response?.status) {
           setFormField({
             ...initialState,
@@ -310,6 +326,7 @@ const EditFeeDialog = () => {
             status_include: response.data.status_include || '',
             deduct_from: response.data.deduct_from || '',
             deduct_from_account: response.data.deduct_from_account?.id || '',
+            deduct_origin: response.data.deduct_origin?.id || '00000000-0000-0000-0000-000000000000',
             credit_to: response.data.credit_to || '',
             credit_destination:
               response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
@@ -344,6 +361,7 @@ const EditFeeDialog = () => {
       hasFetchedRef.current = false;
     }
   }, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
+  
   const handleCloseDialog = () => {
     setFormField(initialState);
     setAlert({ show: false, message: '' });
@@ -351,12 +369,14 @@ const EditFeeDialog = () => {
     setOpen(false);
     handleEditFeeDialog(false, null);
   };
+  
   useEffect(() => {
     if (!showEditFeeDialog) {
       setCustomerSearchTerm('');
       setOpen(false);
     }
   }, [showEditFeeDialog]);
+  
   const renderSelectWithLoading = (
     value: string,
     onChangeHandler: (value: string) => void,
@@ -606,7 +626,13 @@ const EditFeeDialog = () => {
                     </label>
                     <Select
                       value={formField.deduct_from}
-                      onValueChange={(value) => setFormField({ ...formField, deduct_from: value })}
+                      onValueChange={(value) =>
+                        setFormField({
+                          ...formField,
+                          deduct_from: value,
+                          deduct_origin: value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
+                        })
+                      }
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select Deduct From" />
@@ -614,13 +640,87 @@ const EditFeeDialog = () => {
                       <SelectContent>
                         <SelectItem value="D">Destination Member</SelectItem>
                         <SelectItem value="S">Source Member</SelectItem>
+                        <SelectItem value="I">Input</SelectItem>
                       </SelectContent>
                     </Select>
                   </div>
 
+                  {formField.deduct_from === 'I' && (
+                    <div className="w-full">
+                      <label className="form-label">
+                        Deduct Origin <span className="text-red-500">*</span>
+                      </label>
+                      <div className="relative">
+                        <div
+                          className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+                          onClick={() => setOpen(!open)}
+                        >
+                          <span className="truncate">
+                            {customers.find((customer) => customer.id === formField.deduct_origin)
+                              ?.username || 'Search customer...'}
+                          </span>
+                          <path d="m6 9 6 6 6-6"></path>
+                        </div>
+
+                        {open && (
+                          <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+                            <div className="sticky top-0 bg-white p-2 border-b">
+                              <Input
+                                className="h-8 text-sm"
+                                type="text"
+                                placeholder="Search customer..."
+                                value={customerSearchTerm}
+                                onChange={(e) => setCustomerSearchTerm(e.target.value)}
+                                autoComplete="off"
+                                onClick={(e) => e.stopPropagation()}
+                                autoFocus
+                              />
+                            </div>
+                            <div>
+                              {customers
+                                .filter(
+                                  (customer) =>
+                                    customer.username
+                                      .toLowerCase()
+                                      .includes(customerSearchTerm.toLowerCase()) ||
+                                    customer.msisdn.includes(customerSearchTerm)
+                                )
+                                .map((customer) => (
+                                  <div
+                                    key={customer.id}
+                                    className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                                    onClick={() => {
+                                      setFormField({
+                                        ...formField,
+                                        deduct_origin: customer.id
+                                      });
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {customer.username}
+                                  </div>
+                                ))}
+                              {customers.filter(
+                                (customer) =>
+                                  customer.username
+                                    .toLowerCase()
+                                    .includes(customerSearchTerm.toLowerCase()) ||
+                                  customer.msisdn.includes(customerSearchTerm)
+                              ).length === 0 && (
+                                <div className="px-3 py-2 text-sm text-gray-500">
+                                  No customer found
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
                   <div className="w-full">
                     <label className="form-label">
-                      Deduct From Destination <span className="text-red-500">*</span>
+                      Deduct From Account <span className="text-red-500">*</span>
                     </label>
                     {renderSelectWithLoading(
                       formField.deduct_from_account,
@@ -630,7 +730,6 @@ const EditFeeDialog = () => {
                       isLoadingWallets
                     )}
                   </div>
-
                   <div className="w-full">
                     <label className="form-label">
                       Credit To <span className="text-red-500">*</span>
@@ -782,8 +881,6 @@ const EditFeeDialog = () => {
                     </Select>
                   </div>
 
-
-
                   <div className="flex justify-end pt-2.5 gap-5">
                     <Button variant={'outline'} type="button" onClick={resetForm}>
                       Reset
diff --git a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
index 1eee029..67e36c9 100644
--- a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
+++ b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
@@ -227,10 +227,11 @@ const ManageTransferFeeContextProvider = ({
         accessorFn: (row: { deduct_from: string }) => {
           const mapping: Record<string, string> = {
             D: 'Destination Member',
-            S: 'Source Member'
+            S: 'Source Member',
+            I: 'Input Customer'
           };
 
-          return mapping[row.deduct_from];
+          return mapping[row.deduct_from] || 'Unknown';
         },
         id: 'deduct_from',
         header: ({ column }) => <DataGridColumnHeader title="Deduct From" column={column} />,
@@ -239,16 +240,33 @@ const ManageTransferFeeContextProvider = ({
         meta: { headerClassName: 'w-[250px]' }
       },
       {
-        accessorFn: (row) => row.deduct_from_account?.description,
+        accessorFn: (row) => {
+          if (row.deduct_from === 'S' || row.deduct_from === 'D' || !row.deduct_from_account) {
+            return 'N/A';
+          }
+          return row.deduct_from_account.description;
+        },
         id: 'deduct_from_account',
         header: ({ column }) => (
-          <DataGridColumnHeader title="Deduct From Account" column={column} />
+          <DataGridColumnHeader title="Deduct From Destination" column={column} />
         ),
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
-
+      {
+        accessorFn: (row) => {
+          if (row.deduct_from === 'S' || row.deduct_from === 'D' || !row.deduct_origin) {
+            return 'N/A';
+          }
+          return row.deduct_origin?.fullname;
+        },
+        id: 'deduct_origin',
+        header: ({ column }) => <DataGridColumnHeader title="Deduct Origin" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
       {
         accessorFn: (row) => row.status,
         id: 'status',

From 08b9fcc2ea8d6d2a9c1cd4c37b92bef4e197a13f Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 19 May 2025 13:58:47 +0700
Subject: [PATCH 3/7] fixing tranfer fee

---
 .../transfer/transferfee/blocks/AddDialog.tsx |  43 ++-
 .../transferfee/blocks/EditDialog.tsx         | 287 +++++++++---------
 2 files changed, 169 insertions(+), 161 deletions(-)

diff --git a/src/pages/transfer/transferfee/blocks/AddDialog.tsx b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
index f6a736e..13469dc 100644
--- a/src/pages/transfer/transferfee/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
@@ -90,6 +90,10 @@ const AddFeeDialog = () => {
     id: customer.id,
     name: customer.username
   }));
+
+  const [openDeductOrigin, setOpenDeductOrigin] = useState(false);
+  const [openCreditDestination, setOpenCreditDestination] = useState(false);
+
   const [errors, setErrors] = useState<Record<string, string>>({});
   const initialState = {
     name: '',
@@ -120,6 +124,16 @@ const AddFeeDialog = () => {
     setTransactionTypeName('');
   };
 
+  const handleCloseDialog = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+    setCustomerSearchTerm('');
+    setOpenCreditDestination(false);
+    setOpenDeductOrigin(false);
+    setOpen(false);
+    handleEditFeeDialog(false, null);
+  };
+
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false);
   const parsedUser = getAuth()?.user;
@@ -376,7 +390,15 @@ const AddFeeDialog = () => {
   };
 
   return (
-    <Dialog open={showAddFeeDialog} onOpenChange={(open) => handleAddFeeDialog(open)}>
+    <Dialog
+      open={showAddFeeDialog}
+      onOpenChange={(open) => {
+        if (!open) {
+        handleAddFeeDialog(open);
+        handleCloseDialog();
+        }
+      }}
+    >
       <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogTitle></DialogTitle>
         <DialogDescription></DialogDescription>
@@ -595,16 +617,15 @@ const AddFeeDialog = () => {
                     <div className="relative">
                       <div
                         className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                        onClick={() => setOpen(!open)}
+                        onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
                       >
                         <span className="truncate">
                           {customers.find((customer) => customer.id === formField.deduct_origin)
                             ?.username || 'Search customer...'}
                         </span>
-                        <path d="m6 9 6 6 6-6"></path>
                       </div>
 
-                      {open && (
+                      {openDeductOrigin && (
                         <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
                           <div className="sticky top-0 bg-white p-2 border-b">
                             <Input
@@ -632,11 +653,8 @@ const AddFeeDialog = () => {
                                   key={customer.id}
                                   className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
                                   onClick={() => {
-                                    setFormField({
-                                      ...formField,
-                                      deduct_origin: customer.id
-                                    });
-                                    setOpen(false);
+                                    setFormField({ ...formField, deduct_origin: customer.id });
+                                    setOpenDeductOrigin(false);
                                   }}
                                 >
                                   {customer.username}
@@ -706,17 +724,16 @@ const AddFeeDialog = () => {
                     <div className="relative">
                       <div
                         className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                        onClick={() => setOpen(!open)}
+                        onClick={() => setOpenCreditDestination(!openCreditDestination)}
                       >
                         <span className="truncate">
                           {customers.find(
                             (customer) => customer.id === formField.credit_destination
                           )?.username || 'Search customer...'}
                         </span>
-                        <path d="m6 9 6 6 6-6"></path>
                       </div>
 
-                      {open && (
+                      {openCreditDestination && (
                         <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
                           <div className="sticky top-0 bg-white p-2 border-b">
                             <Input
@@ -748,7 +765,7 @@ const AddFeeDialog = () => {
                                       ...formField,
                                       credit_destination: customer.id
                                     });
-                                    setOpen(false);
+                                    setOpenCreditDestination(false);
                                   }}
                                 >
                                   {customer.username}
diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
index 1999404..eef2dca 100644
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -1,4 +1,3 @@
-
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import {
@@ -62,6 +61,8 @@ const EditFeeDialog = () => {
   const { reload } = useDataGrid();
   const { GetData, PutData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [openDeductOrigin, setOpenDeductOrigin] = useState(false);
+  const [openCreditDestination, setOpenCreditDestination] = useState(false);
 
   const [wallets, setWallets] = useState<WalletProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
@@ -326,7 +327,8 @@ const EditFeeDialog = () => {
             status_include: response.data.status_include || '',
             deduct_from: response.data.deduct_from || '',
             deduct_from_account: response.data.deduct_from_account?.id || '',
-            deduct_origin: response.data.deduct_origin?.id || '00000000-0000-0000-0000-000000000000',
+            deduct_origin:
+              response.data.deduct_origin?.id || '00000000-0000-0000-0000-000000000000',
             credit_to: response.data.credit_to || '',
             credit_destination:
               response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
@@ -361,22 +363,24 @@ const EditFeeDialog = () => {
       hasFetchedRef.current = false;
     }
   }, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
-  
+
   const handleCloseDialog = () => {
     setFormField(initialState);
     setAlert({ show: false, message: '' });
     setCustomerSearchTerm('');
+    setOpenCreditDestination(false);
+    setOpenDeductOrigin(false);
     setOpen(false);
     handleEditFeeDialog(false, null);
   };
-  
+
   useEffect(() => {
     if (!showEditFeeDialog) {
       setCustomerSearchTerm('');
       setOpen(false);
     }
   }, [showEditFeeDialog]);
-  
+
   const renderSelectWithLoading = (
     value: string,
     onChangeHandler: (value: string) => void,
@@ -645,78 +649,68 @@ const EditFeeDialog = () => {
                     </Select>
                   </div>
 
-                  {formField.deduct_from === 'I' && (
-                    <div className="w-full">
-                      <label className="form-label">
-                        Deduct Origin <span className="text-red-500">*</span>
-                      </label>
-                      <div className="relative">
-                        <div
-                          className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                          onClick={() => setOpen(!open)}
-                        >
-                          <span className="truncate">
-                            {customers.find((customer) => customer.id === formField.deduct_origin)
-                              ?.username || 'Search customer...'}
-                          </span>
-                          <path d="m6 9 6 6 6-6"></path>
-                        </div>
+{formField.deduct_from === 'I' && (
+  <div className="w-full">
+    <label className="form-label">
+      Deduct Origin <span className="text-red-500">*</span>
+    </label>
+    <div className="relative">
+      <div
+        className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+        onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
+      >
+        <span className="truncate">
+          {customers.find((customer) => customer.id === formField.deduct_origin)?.username || 'Search customer...'}
+        </span>
+      </div>
+
+      {openDeductOrigin && (
+        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+          <div className="sticky top-0 bg-white p-2 border-b">
+            <Input
+              className="h-8 text-sm"
+              type="text"
+              placeholder="Search customer..."
+              value={customerSearchTerm}
+              onChange={(e) => setCustomerSearchTerm(e.target.value)}
+              autoComplete="off"
+              onClick={(e) => e.stopPropagation()}
+              autoFocus
+            />
+          </div>
+          <div>
+            {customers
+              .filter(
+                (customer) =>
+                  customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
+                  customer.msisdn.includes(customerSearchTerm)
+              )
+              .map((customer) => (
+                <div
+                  key={customer.id}
+                  className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                  onClick={() => {
+                    setFormField({ ...formField, deduct_origin: customer.id });
+                    setOpenDeductOrigin(false);
+                  }}
+                >
+                  {customer.username}
+                </div>
+              ))}
+            {customers.filter(
+              (customer) =>
+                customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
+                customer.msisdn.includes(customerSearchTerm)
+            ).length === 0 && (
+              <div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+)}
 
-                        {open && (
-                          <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
-                            <div className="sticky top-0 bg-white p-2 border-b">
-                              <Input
-                                className="h-8 text-sm"
-                                type="text"
-                                placeholder="Search customer..."
-                                value={customerSearchTerm}
-                                onChange={(e) => setCustomerSearchTerm(e.target.value)}
-                                autoComplete="off"
-                                onClick={(e) => e.stopPropagation()}
-                                autoFocus
-                              />
-                            </div>
-                            <div>
-                              {customers
-                                .filter(
-                                  (customer) =>
-                                    customer.username
-                                      .toLowerCase()
-                                      .includes(customerSearchTerm.toLowerCase()) ||
-                                    customer.msisdn.includes(customerSearchTerm)
-                                )
-                                .map((customer) => (
-                                  <div
-                                    key={customer.id}
-                                    className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
-                                    onClick={() => {
-                                      setFormField({
-                                        ...formField,
-                                        deduct_origin: customer.id
-                                      });
-                                      setOpen(false);
-                                    }}
-                                  >
-                                    {customer.username}
-                                  </div>
-                                ))}
-                              {customers.filter(
-                                (customer) =>
-                                  customer.username
-                                    .toLowerCase()
-                                    .includes(customerSearchTerm.toLowerCase()) ||
-                                  customer.msisdn.includes(customerSearchTerm)
-                              ).length === 0 && (
-                                <div className="px-3 py-2 text-sm text-gray-500">
-                                  No customer found
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  )}
 
                   <div className="w-full">
                     <label className="form-label">
@@ -756,79 +750,76 @@ const EditFeeDialog = () => {
                     </Select>
                   </div>
 
-                  {formField.credit_to === 'I' && (
-                    <div className="w-full">
-                      <label className="form-label">
-                        Credit Destination <span className="text-red-500">*</span>
-                      </label>
-                      <div className="relative">
-                        <div
-                          className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                          onClick={() => setOpen(!open)}
-                        >
-                          <span className="truncate">
-                            {customers.find(
-                              (customer) => customer.id === formField.credit_destination
-                            )?.username || 'Search customer...'}
-                          </span>
-                          <path d="m6 9 6 6 6-6"></path>
-                        </div>
+{formField.credit_to === 'I' && (
+  <div className="w-full">
+    <label className="form-label">
+      Credit Destination <span className="text-red-500">*</span>
+    </label>
+    <div className="relative">
+      <div
+        className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+        onClick={() => setOpenCreditDestination(!openCreditDestination)}
+      >
+        <span className="truncate">
+          {customers.find((customer) => customer.id === formField.credit_destination)
+            ?.username || 'Search customer...'}
+        </span>
+      </div>
+
+      {openCreditDestination && (
+        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+          <div className="sticky top-0 bg-white p-2 border-b">
+            <Input
+              className="h-8 text-sm"
+              type="text"
+              placeholder="Search customer..."
+              value={customerSearchTerm}
+              onChange={(e) => setCustomerSearchTerm(e.target.value)}
+              autoComplete="off"
+              onClick={(e) => e.stopPropagation()}
+              autoFocus
+            />
+          </div>
+          <div>
+            {customers
+              .filter(
+                (customer) =>
+                  customer.username
+                    .toLowerCase()
+                    .includes(customerSearchTerm.toLowerCase()) ||
+                  customer.msisdn.includes(customerSearchTerm)
+              )
+              .map((customer) => (
+                <div
+                  key={customer.id}
+                  className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                  onClick={() => {
+                    setFormField({
+                      ...formField,
+                      credit_destination: customer.id
+                    });
+                    setOpenCreditDestination(false);
+                  }}
+                >
+                  {customer.username}
+                </div>
+              ))}
+            {customers.filter(
+              (customer) =>
+                customer.username
+                  .toLowerCase()
+                  .includes(customerSearchTerm.toLowerCase()) ||
+                customer.msisdn.includes(customerSearchTerm)
+            ).length === 0 && (
+              <div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+)}
 
-                        {open && (
-                          <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
-                            <div className="sticky top-0 bg-white p-2 border-b">
-                              <Input
-                                className="h-8 text-sm"
-                                type="text"
-                                placeholder="Search customer..."
-                                value={customerSearchTerm}
-                                onChange={(e) => setCustomerSearchTerm(e.target.value)}
-                                autoComplete="off"
-                                onClick={(e) => e.stopPropagation()}
-                                autoFocus
-                              />
-                            </div>
-                            <div>
-                              {customers
-                                .filter(
-                                  (customer) =>
-                                    customer.username
-                                      .toLowerCase()
-                                      .includes(customerSearchTerm.toLowerCase()) ||
-                                    customer.msisdn.includes(customerSearchTerm)
-                                )
-                                .map((customer) => (
-                                  <div
-                                    key={customer.id}
-                                    className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
-                                    onClick={() => {
-                                      setFormField({
-                                        ...formField,
-                                        credit_destination: customer.id
-                                      });
-                                      setOpen(false);
-                                    }}
-                                  >
-                                    {customer.username}
-                                  </div>
-                                ))}
-                              {customers.filter(
-                                (customer) =>
-                                  customer.username
-                                    .toLowerCase()
-                                    .includes(customerSearchTerm.toLowerCase()) ||
-                                  customer.msisdn.includes(customerSearchTerm)
-                              ).length === 0 && (
-                                <div className="px-3 py-2 text-sm text-gray-500">
-                                  No customer found
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  )}
 
                   <div className="w-full">
                     <label className="form-label">

From e1e03733cd9080252541bef97065c9a7366279c0 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Mon, 19 May 2025 14:13:29 +0700
Subject: [PATCH 4/7] update

---
 .../blocks/DetailApprovalTransaction.tsx      | 34 ++++++++++++++++---
 .../hooks/ApprovalTransactionContext.tsx      |  6 +++-
 .../blocks/DetailTransaction.tsx              | 30 ++++++++++++++--
 .../hooks/TransactionContext.tsx              | 16 +++++++--
 4 files changed, 75 insertions(+), 11 deletions(-)

diff --git a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
index dd878f6..82c4c59 100644
--- a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
@@ -223,6 +223,7 @@ const DetailApprovalTransaction = () => {
                                             {(() => {
                                                 let status;
                                                 let badgeClass;
+
                                                 if (transactionDetails?.status === 'C') {
                                                     status = 'COMPLETE';
                                                     badgeClass = 'bg-green-100 text-green-800';
@@ -232,9 +233,15 @@ const DetailApprovalTransaction = () => {
                                                 } else if (transactionDetails?.status === 'O') {
                                                     status = 'ON PROCESS';
                                                     badgeClass = 'bg-blue-100 text-blue-800';
-                                                } else {
+                                                } 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 (
@@ -261,7 +268,7 @@ const DetailApprovalTransaction = () => {
                                                     kind = 'TOP UP';
                                                 } else if (transactionDetails?.kind === 'R') {
                                                     kind = 'RETURN';
-                                                }else if (transactionDetails?.kind === 'E') {
+                                                } else if (transactionDetails?.kind === 'E') {
                                                     kind = 'REWARD';
                                                 }
                                                 return kind;
@@ -419,16 +426,33 @@ const DetailApprovalTransaction = () => {
                                         <p className="font-medium">
                                             {(() => {
                                                 let status;
+                                                let badgeClass;
+
                                                 if (transactionDetails?.status === 'C') {
                                                     status = 'COMPLETE';
+                                                    badgeClass = 'bg-green-100 text-green-800';
                                                 } else if (transactionDetails?.status === 'F') {
                                                     status = 'FAILED';
+                                                    badgeClass = 'bg-red-100 text-red-800';
                                                 } else if (transactionDetails?.status === 'O') {
                                                     status = 'ON PROCESS';
-                                                } else {
+                                                    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 status;
+
+                                                return (
+                                                    <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+                                                        {status}
+                                                    </span>
+                                                );
                                             })()}
                                         </p>
                                     </div>
@@ -447,7 +471,7 @@ const DetailApprovalTransaction = () => {
                                                     kind = 'TOP UP';
                                                 } else if (transactionDetails?.kind === 'R') {
                                                     kind = 'RETURN';
-                                                }else if (transactionDetails?.kind === 'E') {
+                                                } else if (transactionDetails?.kind === 'E') {
                                                     kind = 'REWARD';
                                                 }
                                                 return kind;
diff --git a/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx b/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
index 9ec95fa..666b219 100644
--- a/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
+++ b/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
@@ -158,11 +158,15 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorFn: (row) => {
+          
           switch (row.status) {
             case 'C': return 'COMPLETE';
             case 'F': return 'FAILED';
             case 'O': return 'ON PROCESS';
-            default: return 'PENDING';
+            case "P" : return 'PENDING';
+            case 'R': return 'ROLLBACK';
+            case 'S': return 'REVERSAL';
+            default: return 'UNKNOWN';
           }
         },
         id: 'status',
diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index 0c91626..2e12cf1 100644
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@@ -283,6 +283,7 @@ const DetailTransaction = () => {
                                             {(() => {
                                                 let status;
                                                 let badgeClass;
+
                                                 if (transactionDetails?.status === 'C') {
                                                     status = 'COMPLETE';
                                                     badgeClass = 'bg-green-100 text-green-800';
@@ -292,9 +293,15 @@ const DetailTransaction = () => {
                                                 } else if (transactionDetails?.status === 'O') {
                                                     status = 'ON PROCESS';
                                                     badgeClass = 'bg-blue-100 text-blue-800';
-                                                } else {
+                                                } 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 (
@@ -484,16 +491,33 @@ const DetailTransaction = () => {
                                         <p className="font-medium">
                                             {(() => {
                                                 let status;
+                                                let badgeClass;
+
                                                 if (transactionDetails?.status === 'C') {
                                                     status = 'COMPLETE';
+                                                    badgeClass = 'bg-green-100 text-green-800';
                                                 } else if (transactionDetails?.status === 'F') {
                                                     status = 'FAILED';
+                                                    badgeClass = 'bg-red-100 text-red-800';
                                                 } else if (transactionDetails?.status === 'O') {
                                                     status = 'ON PROCESS';
-                                                } else {
+                                                    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 status;
+
+                                                return (
+                                                    <span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
+                                                        {status}
+                                                    </span>
+                                                );
                                             })()}
                                         </p>
                                     </div>
diff --git a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
index 61c9de6..8f2a12c 100644
--- a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
+++ b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
@@ -81,7 +81,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
             case 'L': return 'PURCHASE LOJA';
             case 'B': return 'TOP UP P24';
             case 'A': return 'TRANSFER AGENT';
-            case 'M': return 'WITHDRAWAL AGENT'; 
+            case 'M': return 'WITHDRAWAL AGENT';
             default: return '_';
           }
         },
@@ -201,10 +201,22 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
               label = 'ON PROCESS';
               badgeClass = 'bg-blue-100 text-blue-800';
               break;
-            default:
+            case 'P':
               label = 'PENDING';
               badgeClass = 'bg-gray-100 text-gray-800';
               break;
+            case 'R':
+              label = 'ROLLBACK';
+              badgeClass = 'bg-yellow-100 text-yellow-800';
+              break;
+            case 'S':
+              label = 'REVERSAL';
+              badgeClass = 'bg-purple-100 text-purple-800';
+              break;
+            default:
+              label = '';
+              badgeClass = 'bg-gray-100 text-gray-800';
+              break;
           }
 
           return (

From 8d824daf19270f4f9bff6cf33410c431d76c5c77 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 19 May 2025 13:36:10 +0700
Subject: [PATCH 5/7] adding deduct origin on transfer fee

---
 src/pages/transfer/transferfee/blocks/EditDialog.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
index eef2dca..eefb38b 100644
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -1,3 +1,4 @@
+
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import {
@@ -363,7 +364,6 @@ const EditFeeDialog = () => {
       hasFetchedRef.current = false;
     }
   }, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
-
   const handleCloseDialog = () => {
     setFormField(initialState);
     setAlert({ show: false, message: '' });
@@ -373,14 +373,12 @@ const EditFeeDialog = () => {
     setOpen(false);
     handleEditFeeDialog(false, null);
   };
-
   useEffect(() => {
     if (!showEditFeeDialog) {
       setCustomerSearchTerm('');
       setOpen(false);
     }
   }, [showEditFeeDialog]);
-
   const renderSelectWithLoading = (
     value: string,
     onChangeHandler: (value: string) => void,

From 9837855db67465c93e6da8d80edc743a7e8701c5 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 19 May 2025 13:58:47 +0700
Subject: [PATCH 6/7] fixing tranfer fee

---
 src/pages/transfer/transferfee/blocks/EditDialog.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
index eefb38b..29f8851 100644
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -1,4 +1,3 @@
-
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import {

From 6535aebd7b8c7d1d3e28775c9ab166f85097f35a Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Mon, 19 May 2025 14:27:27 +0700
Subject: [PATCH 7/7] update detail

---
 .../approval-transaction/blocks/DetailApprovalTransaction.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
index 82c4c59..5a6802c 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')}