diff --git a/package.json b/package.json
index 7745b80..89c60d4 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "react-query": "^3.39.3",
     "react-router": "^6.28.0",
     "react-router-dom": "^6.28.0",
+    "recharts": "^2.15.3",
     "sonner": "^1.7.0",
     "styled-components": "^6.1.13",
     "stylis": "^4.3.4",
diff --git a/src/pages/dashboards/home/DashboardHomePage.tsx b/src/pages/dashboards/home/DashboardHomePage.tsx
index c2c53b2..c591184 100644
--- a/src/pages/dashboards/home/DashboardHomePage.tsx
+++ b/src/pages/dashboards/home/DashboardHomePage.tsx
@@ -21,6 +21,8 @@ import { getAuth } from '@/auth';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
 import TransactionValue from './blocks/TransactionValue';
+import TransactionPieChart from './blocks/TransactionPieChart';
+import MemberActivity from './blocks/MemberActivity';
 
 // sum -> nominal, count-> total
 type CountType = 'sum' | 'count';
@@ -339,10 +341,11 @@ const DashboardHomePage = () => {
           </div>
         </div>
 
-        <TransactionValue
-          startdate={fromDate.toISOString()}  // Invoke the toISOString method
-          enddate={toDate.toISOString()}      // Invoke the toISOString method
-        />
+        <div className="flex space-x-4 mt-5">
+          <TransactionValue startdate={fromDate.toISOString()} enddate={toDate.toISOString()} />
+          <TransactionPieChart startdate={fromDate.toISOString()} enddate={toDate.toISOString()} />
+          <MemberActivity startdate={fromDate.toISOString()} enddate={toDate.toISOString()} />
+        </div>
 
       </Container>
     </>
diff --git a/src/pages/dashboards/home/blocks/MemberActivity.tsx b/src/pages/dashboards/home/blocks/MemberActivity.tsx
new file mode 100644
index 0000000..172c019
--- /dev/null
+++ b/src/pages/dashboards/home/blocks/MemberActivity.tsx
@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { UsersIcon, UserCheckIcon } from "lucide-react";
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+
+const API_URL = apiConfig.api_dashboard;
+
+interface Props {
+    startdate: string;
+    enddate: string;
+}
+
+const MemberActivity = ({ startdate, enddate }: Props) => {
+    const { GetData } = useCallApi();
+    const [responseTransactionValue, setResponseTransactionValue] = useState<any>(null);
+
+    useEffect(() => {
+        const fetchDataTransactionValue = async () => {
+            try {
+                const res = await GetData(`${API_URL}/active-user`, {
+                    date_from: startdate,
+                    date_to: enddate,
+                });
+                setResponseTransactionValue(res);
+            } catch (error) {
+                console.error('Error fetching transaction value:', error);
+            }
+        };
+
+        fetchDataTransactionValue();
+    }, [startdate, enddate, GetData]);
+
+    const percentage = parseFloat((responseTransactionValue?.data?.total_customer_active_percentage ?? 0).toFixed(2)) ?? 0;
+    const totalCustomer = responseTransactionValue?.data?.total_customer ?? 0;
+    const activeCustomer = responseTransactionValue?.data?.total_customer_active ?? 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);
+
+    return (
+        <div className="p-6 bg-white rounded-lg shadow-md w-full max-w-xl">
+            <div className="flex justify-between items-center pb-3 mb-4">
+                <h2 className="text-lg font-semibold text-gray-700">Member Activity</h2>
+            </div>
+
+            <div className="flex gap-6">
+                {/* Sidebar */}
+                <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" />
+                        <span>Total Customer: {totalCustomer}</span>
+                    </li>
+                    <li className="flex items-center gap-2">
+                        <UserCheckIcon className="w-4 h-4" />
+                        <span>Active Customer: {activeCustomer}</span>
+                    </li>
+                </ul>
+
+                {/* Gauge Chart */}
+                <div className="w-1/2">
+                    <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">
+                                {/* Background arc */}
+                                <path
+                                    d="M 10 50 A 40 40 0 0 1 90 50"
+                                    fill="none"
+                                    stroke="#e5e7eb"
+                                    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"
+                                />
+                                {/* Pointer */}
+                                <line
+                                    x1="50"
+                                    y1="50"
+                                    x2={x}
+                                    y2={y}
+                                    stroke="#111827"
+                                    strokeWidth="4"
+                                    strokeLinecap="round"
+                                />
+                            </svg>
+                            <div className="flex justify-between text-xs text-gray-500 px-1">
+                                <span>{percentage}%</span>
+                                <span>100%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default MemberActivity;
diff --git a/src/pages/dashboards/home/blocks/TransactionPieChart.tsx b/src/pages/dashboards/home/blocks/TransactionPieChart.tsx
new file mode 100644
index 0000000..d7b768d
--- /dev/null
+++ b/src/pages/dashboards/home/blocks/TransactionPieChart.tsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import {
+    PieChart,
+    Pie,
+    Cell,
+    ResponsiveContainer,
+} from 'recharts';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+
+const API_URL = apiConfig.api_dashboard;
+
+interface Props {
+    startdate: string;
+    enddate: string;
+}
+
+const TransactionPieChart = ({ startdate, enddate }: Props) => {
+
+    const { GetData } = useCallApi();
+        const [responseTransactionValue, setResponseTransactionValue] = useState<any>(null);
+    
+        useEffect(() => {
+            const fetchDataTransactionValue = async () => {
+                try {
+                    const res = await GetData(`${API_URL}/transaction-chart`, {
+                        date_from: startdate,
+                        date_to: enddate,
+                    });
+                    setResponseTransactionValue(res);
+                } catch (error) {
+                    console.error('Error fetching transaction value:', error);
+                }
+            };
+    
+            fetchDataTransactionValue();
+        }, [startdate, enddate, GetData]);
+
+        const data = [
+            { name: 'Transfer', value: parseFloat((responseTransactionValue?.data?.T ?? 0).toFixed(2)), color: '#3490dc' },
+            { name: 'Return', value: parseFloat((responseTransactionValue?.data?.R ?? 0).toFixed(2)), color: '#a0aec0' },
+            { name: 'Topup', value: parseFloat((responseTransactionValue?.data?.U ?? 0).toFixed(2)), color: '#9f7aea' },
+            { name: 'Purchase', value: parseFloat((responseTransactionValue?.data?.P ?? 0).toFixed(2)), color: '#baf7c5' },
+            { name: 'Withdraw', value: parseFloat((responseTransactionValue?.data?.W ?? 0).toFixed(2)), color: '#f56565' },
+        ];        
+
+    return (
+        <div className="bg-white rounded-lg shadow-md p-6 w-full max-w-md">
+            <div className="flex justify-between items-center mb-4">
+                <h2 className="text-lg font-semibold text-gray-700">Transaction Chart</h2>
+            </div>
+
+            <div className="flex items-center space-x-6">
+                <div className="w-40 h-40">
+                    <ResponsiveContainer width="100%" height="100%">
+                        <PieChart>
+                            <Pie
+                                data={data}
+                                dataKey="value"
+                                innerRadius={40}
+                                outerRadius={60}
+                                paddingAngle={3}
+                            >
+                                {data.map((entry, index) => (
+                                    <Cell key={`cell-${index}`} fill={entry.color} />
+                                ))}
+                            </Pie>
+                        </PieChart>
+                    </ResponsiveContainer>
+                </div>
+
+                <div className="text-sm space-y-2">
+                    <div className="font-semibold text-gray-500">Active Transaction</div>
+                    {data.map((entry, index) => (
+                        <div key={index} className="flex items-center justify-between w-48">
+                            <div className="flex items-center">
+                                <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: entry.color }}></div>
+                                <span className="text-gray-700">{entry.name}</span>
+                            </div>
+                            <span className="text-gray-700">{entry.value}%</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TransactionPieChart;
diff --git a/src/pages/dashboards/home/blocks/TransactionValue.tsx b/src/pages/dashboards/home/blocks/TransactionValue.tsx
index 63c43d5..bb6c53d 100644
--- a/src/pages/dashboards/home/blocks/TransactionValue.tsx
+++ b/src/pages/dashboards/home/blocks/TransactionValue.tsx
@@ -10,7 +10,7 @@ interface Props {
 }
 
 const TransactionValue = ({ startdate, enddate }: Props) => {
-    const { GetData } = useCallApi(); 
+    const { GetData } = useCallApi();
     const [responseTransactionValue, setResponseTransactionValue] = useState<any>(null);
 
     useEffect(() => {
@@ -30,21 +30,22 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
     }, [startdate, enddate, GetData]);
 
     let transactionData: any[] = [];
-    if (responseTransactionValue?.data.length > 0) {
-        for (let i = 0; i < responseTransactionValue?.data.length; i++) {
-            let type = ""; 
+    if (responseTransactionValue?.data?.length > 0) {
+        for (let i = 0; i < responseTransactionValue.data.length; i++) {
+            let type = "";
             let unit = "";
 
-            if(responseTransactionValue?.data[i].total_amount>=1000 && responseTransactionValue?.data[i].total_amount<1000000){
-                unit = "K"
-            }else if(responseTransactionValue?.data[i].total_amount>=1000000 && responseTransactionValue?.data[i].total_amount<1000000000){
-                unit = "M"
-            }
-            else if(responseTransactionValue?.data[i].total_amount>=1000000000){
-                unit = "B"
+            const amount = responseTransactionValue.data[i].total_amount;
+
+            if (amount >= 1000 && amount < 1000000) {
+                unit = "K";
+            } else if (amount >= 1000000 && amount < 1000000000) {
+                unit = "M";
+            } else if (amount >= 1000000000) {
+                unit = "B";
             }
 
-            switch (responseTransactionValue?.data[i].kind) {
+            switch (responseTransactionValue.data[i].kind) {
                 case "P":
                     type = "Purchase";
                     break;
@@ -61,13 +62,13 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
                     type = "Return";
                     break;
                 default:
-                    type = "Unknown"; 
+                    type = "Unknown";
                     break;
             }
 
             transactionData.push({
                 label: type,
-                value: responseTransactionValue?.data[i].total_amount,
+                value: amount,
                 unit: unit
             });
         }
@@ -76,26 +77,32 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
     const maxValue = transactionData.length > 0 ? Math.max(...transactionData.map(item => item.value)) : 1;
 
     return (
-        <div className="bg-white rounded-xl shadow p-6 w-full max-w-md mt-5">
+        <div className="bg-white rounded-xl shadow p-6 w-full max-w-md">
             <div className="flex justify-between items-center mb-4">
                 <h2 className="text-lg font-semibold text-gray-800">Transaction Value</h2>
             </div>
-            <div className="space-y-4">
-                {transactionData.map((item, index) => (
-                    <div key={index} className="flex items-center justify-between">
-                        <span className="w-24 text-sm text-gray-700">{item.label}</span>
-                        <div className="flex-1 mx-2">
-                            <div className="w-full h-3 bg-gray-200 rounded-full">
-                                <div
-                                    className="h-3 bg-teal-500 rounded-full"
-                                    style={{ width: `${(item.value / maxValue) * 100}%` }}
-                                ></div>
+            {transactionData.length > 0 ? (
+                <div className="space-y-4">
+                    {transactionData.map((item, index) => (
+                        <div key={index} className="flex items-center justify-between">
+                            <span className="w-24 text-sm text-gray-700">{item.label}</span>
+                            <div className="flex-1 mx-2">
+                                <div className="w-full h-3 bg-gray-200 rounded-full">
+                                    <div
+                                        className="h-3 bg-teal-500 rounded-full"
+                                        style={{ width: `${(item.value / maxValue) * 100}%` }}
+                                    ></div>
+                                </div>
                             </div>
+                            <span className="w-14 text-right text-sm text-gray-700">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(item.value)}{item.unit}</span>
                         </div>
-                        <span className="w-14 text-right text-sm text-gray-700">{item.value}{item.unit}</span>
-                    </div>
-                ))}
-            </div>
+                    ))}
+                </div>
+            ) : (
+                <div className="text-center text-sm text-gray-500 mt-4">
+                    No Data Available
+                </div>
+            )}
         </div>
     );
 };
diff --git a/src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx b/src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx
index 8c4862b..c4418cd 100644
--- a/src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx
+++ b/src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx
@@ -248,7 +248,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         limit,
         page: page + 1,
         with_deleted: false,
-        order_field: "id",
+        order_field: "execution_date",
         order_direction: 'DESC',
         filter: JSON.stringify(formattedFilter)
       });
@@ -286,7 +286,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'id', desc: false }]}
+        sorting={[{ id: 'execution_date', desc: false }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
diff --git a/src/pages/master/conversion/hooks/ManageConversionContext.tsx b/src/pages/master/conversion/hooks/ManageConversionContext.tsx
index 730bae1..eceb4fa 100644
--- a/src/pages/master/conversion/hooks/ManageConversionContext.tsx
+++ b/src/pages/master/conversion/hooks/ManageConversionContext.tsx
@@ -137,16 +137,16 @@ const ManageConversionContextProvider = ({ children }: { children: React.ReactNo
               >
                 <KeenIcon icon="notepad-edit" />
               </button>
-              <button
+              {/* <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
                 onClick={() => handleDeleteDialog(true, row.ID)}
               >
                 <KeenIcon icon="trash" />
-              </button>
+              </button> */}
             </>
           );
         },
-        meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
+        meta: { headerClassName: 'w-[100px] text-center', cellClassName: 'text-center' }
       }
     ],
     [handleEditDialog, handleDeleteDialog]
diff --git a/src/pages/master/currency/hooks/ManageCurrencyContext.tsx b/src/pages/master/currency/hooks/ManageCurrencyContext.tsx
index f025f87..2795014 100644
--- a/src/pages/master/currency/hooks/ManageCurrencyContext.tsx
+++ b/src/pages/master/currency/hooks/ManageCurrencyContext.tsx
@@ -124,16 +124,16 @@ const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode
               >
                 <KeenIcon icon="notepad-edit" />
               </button>
-              <button
+              {/* <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
                 onClick={() => handleDeleteDialog(true, row.ID)}
               >
                 <KeenIcon icon="trash" />
-              </button>
+              </button> */}
             </>
           );
         },
-        meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
+        meta: { headerClassName: 'w-[100px] text-center', cellClassName: 'text-center' }
       }
     ],
     [handleEditDialog, handleDeleteDialog]
diff --git a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
index 14e66c3..eb25709 100644
--- a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
+++ b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
@@ -192,17 +192,17 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
               >
                 <KeenIcon icon="notepad-edit" />
               </button>
-              <button
+              {/* <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
                 onClick={() => handleDeleteDialog(true, row)}
               >
                 <KeenIcon icon="trash" />
-              </button>
+              </button> */}
             </>
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }
diff --git a/src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx b/src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx
index 48e4608..e36ab10 100644
--- a/src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx
+++ b/src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx
@@ -209,6 +209,15 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
           headerClassName: 'w-[350px]'
         }
       },
+      {
+        accessorFn: (row) => row.msisdn,
+        id: 'msdisdn',
+        header: ({ column }) => <DataGridColumnHeader title="Phone Number" column={column} />,
+        enableSorting: true,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
       {
         accessorFn: (row) => row.registered_email,
         id: 'email',
diff --git a/src/pages/members/kyc/Columns.tsx b/src/pages/members/kyc/Columns.tsx
index 55d3d28..5002030 100644
--- a/src/pages/members/kyc/Columns.tsx
+++ b/src/pages/members/kyc/Columns.tsx
@@ -70,6 +70,20 @@ export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Members
       );
     }
   },
+  {
+    accessorKey: 'msisdn',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Phone Number
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
   {
     accessorKey: 'group_name',
     header: ({ column }) => {
diff --git a/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx b/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
index 03f8069..016fd45 100644
--- a/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
@@ -8,6 +8,7 @@ import {
     DialogContent,
     DialogHeader,
     DialogTitle,
+    DialogDescription,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import {
@@ -26,7 +27,7 @@ const API_URL = apiConfig.transaction;
 
 const ApprovalDialog = () => {
     const { GetData, PostData } = useCallApi();
-    const {  reload } = useDataGrid();
+    const { reload } = useDataGrid();
 
     const {
         showApprovalDialog,
@@ -40,6 +41,7 @@ const ApprovalDialog = () => {
         transaction_code: '',
         status: '',
         notes: '',
+        pin: ''
     });
 
     const [alert, setAlert] = useState({
@@ -63,8 +65,9 @@ const ApprovalDialog = () => {
 
             const response = await PostData(`${API_URL}/transaction/set-approval`, {
                 id_transaction: transactionDetails.id,
-                status: formField.status,
                 notes: formField.notes,
+                status: formField.status,
+                pin: formField.pin,
             });
 
             if (response?.status === false) {
@@ -97,8 +100,9 @@ const ApprovalDialog = () => {
         if (showApprovalDialog) {
             setFormField({
                 transaction_code: '',
-                status: '',
                 notes: '',
+                status: '',
+                pin:''
             });
             setTransactionDetails(null);
             setAlert({ show: false, message: '' });
@@ -142,6 +146,7 @@ const ApprovalDialog = () => {
                 <DialogHeader>
                     <DialogTitle>Approval Transaction</DialogTitle>
                 </DialogHeader>
+                <DialogDescription></DialogDescription>
                 <DialogBody>
                     <form onSubmit={doApproval}>
                         <div className="card-body grid gap-5 p-0">
@@ -165,6 +170,26 @@ const ApprovalDialog = () => {
                                         </Select>
                                     </div>
                                 </div>
+                                <div className="flex items-center flex-wrap gap-2.5 mt-3 mb-3">
+
+                                    <label className="form-label max-w-56">PIN</label>
+                                    <div className="grow">
+                                        <Input
+                                            required
+                                            type="password"
+                                            placeholder="PIN"
+                                            name="pin"
+                                            id="pin"
+                                            value={formField.pin}
+                                            onChange={(e) =>
+                                                setFormField((prev) => ({
+                                                    ...prev,
+                                                    pin: e.target.value,
+                                                }))
+                                            }
+                                        />
+                                    </div>
+                                </div>
 
                                 {formField.status === 'N' && (
                                     <div className="flex items-center flex-wrap gap-2.5 mt-4">
diff --git a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
index 7ddb01c..6a15c17 100644
--- a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
@@ -58,6 +58,7 @@ const DetailApprovalTransaction = () => {
                 <DialogHeader>
                     <DialogTitle>Transaction Details</DialogTitle>
                 </DialogHeader>
+                <DialogDescription></DialogDescription>
                 <DialogBody>
                     {/* Tabs Navigation */}
                     <div className="flex border-b border-gray-200">
diff --git a/src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx b/src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx
index 72c660d..c6a6ff6 100644
--- a/src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx
+++ b/src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx
@@ -1,31 +1,86 @@
-import { Container, DataGridInner } from '@/components';
+import { Alert, Container, DataGridInner } from '@/components';
 import { TransactionDisbursementProvider } from './hooks/TransactionDisbursementContext';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { useState ,useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
 import { getAuth } from '@/auth';
+import { RefreshCw } from 'lucide-react';
 
 const TransactionDisbursement = () => {
-  const [form, setForm] = useState({
+  const initialForm: {
+    msisdn: string;
+    amount: string;
+    pin: string;
+  } = {
     msisdn: '',
     amount: '',
     pin: ''
-  });
+  };
+
+  const [form, setForm] = useState(initialForm);
   const [wallets, setWallets] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [customerMsisdn, setCustomerMsisdn] = useState<{ value: string; label: string }[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const { GetData, PostData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
   const parsedUser = getAuth()?.user;
   const API_URL = apiConfig.transaction;
-  const API_URL_WALLET = apiConfig.service_wallet
+  const API_URL_WALLET = apiConfig.service_wallet;
+  const API_URL_CUSTOMER = apiConfig.service_customer;
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const fetchCustomerMsisdn = async (sorting: any, filterValue: string) => {
+    const filter: any =
+      filterValue.trim().length === 0 ? {} : { msisdn: { like: `%${filterValue}%` } };
+
+    const query: any = {
+      limit: 25,
+      page: 1,
+      with_deleted: false,
+      order_field: sorting[0].id,
+      order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+    };
+
+    if (filter && Object.keys(filter).length > 0) {
+      query.filter = JSON.stringify(filter);
+      // query.page = page + 1;
+    }
+
+    try {
+      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
+      setCustomerMsisdn(
+        response?.data.list.map((item: any) => ({
+          value: item.msisdn,
+          label: `${item.msisdn} - ${item.fullname}`
+        }))
+      );
+    } catch (error) {
+      toast.error('Failed to fetch customer msisdn');
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   useEffect(() => {
     const fetchWallets = async () => {
       try {
-        const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`, {});
+        const response = await GetData(
+          `${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`,
+          {}
+        );
         if (response?.status === true) {
           setWallets(response.data || []);
         } else {
@@ -37,32 +92,84 @@ const TransactionDisbursement = () => {
     };
 
     fetchWallets();
+    fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], '');
+
+    const handleClickOutside = (event: any) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
   }, []);
 
-  const handleSubmit = async (e: any) => {
-    e.preventDefault();
-    console.log('Submitted Data:', form);
-    if (form.amount == '' || form.msisdn == '' || form.pin == '') {
-      toast.warning('Please fill in all required fields.')
-      return
-    }
+  const doPostData = async (form: typeof initialForm) => {
+    setIsSubmitting(true);
+
     try {
-      let requestTopup = await PostData(`${API_URL}/transaction/topup-downline`, {
+      let response = await PostData(`${API_URL}/transaction/topup-downline`, {
         msisdn_destination: form.msisdn,
         amount: form.amount,
         pin: form.pin
-      })
-      if (requestTopup?.status == true) {
-        toast.success('Success Request Topup')
+      });
+      if (response?.status == true) {
+        toast.success('Success Request Topup');
       } else {
-        toast.warning(`${requestTopup?.message}`)
+        toast.error(`${response?.message?.message}`);
       }
-    } catch (error) {
-      toast.warning('Failed')
+    } catch (error: any) {
+      const errorMessage =
+        error?.response?.data?.message || error?.message || 'Something went wrong';
+      toast.error(errorMessage);
+      setAlert({ show: true, message: errorMessage });
+    } finally {
+      setIsSubmitting(false);
+      setShowConfirmation(false);
     }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (form.amount == '' || form.msisdn == '' || form.pin == '') {
+      setAlert({
+        show: true,
+        message: 'Please fill in all required fields.'
+      });
+      return;
+    }
+    setAlert({ show: false, message: '' });
+    setShowConfirmation(true);
     // TODO: Kirim ke backend atau proses lainnya
   };
 
+  const handleCancelSubmit = () => {
+    setShowConfirmation(false);
+  };
+
+  const handleMsisdnSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsLoading(true);
+    setSearchTerm(e.target.value);
+    setDropdownOpen(true);
+    const timer = setTimeout(() => {
+      fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], e.target.value);
+    }, 500);
+    return () => clearTimeout(timer);
+  };
+
+  const handleMsisdnSelect = (msisdn: string) => {
+    setForm({ ...form, msisdn });
+    setDropdownOpen(false);
+    setSearchTerm(msisdn);
+  };
+
+  const filteredMsisdn = customerMsisdn
+    .filter((item) => item.label.toLowerCase().includes(searchTerm.toLowerCase()))
+    .slice(0, 10);
+
   return (
     <>
       <Helmet>
@@ -70,7 +177,9 @@ const TransactionDisbursement = () => {
       </Helmet>
       <TransactionDisbursementProvider>
         <Container className="mb-7">
-          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION DISBURSEMENT SALDO</h1>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">
+            MANAGE TRANSACTION DISBURSEMENT SALDO
+          </h1>
           <Breadcrumbs sx={{ mb: 2 }}>
             <Link underline="none" color="inherit" href="/">
               <span className="text-sm hover:underline">Dashboard</span>
@@ -90,51 +199,121 @@ const TransactionDisbursement = () => {
                 <div key={wallet.id_wallet} className="border rounded-lg p-4 bg-white">
                   <p className="text-sm text-gray-500">{wallet.wallet}</p>
                   <p className="text-lg font-semibold text-green-600">
-                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(wallet.amount)}
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+                      wallet.amount
+                    )}
                   </p>
                 </div>
               ))}
             </div>
           </div>
+
           <Container className="flex items-center justify-center">
             <div className="card max-w-[750px] w-full">
               <div className="card-body p-10">
+                {alert.show && (
+                  <Alert variant="danger">
+                    <h3>{alert.message}</h3>
+                  </Alert>
+                )}
                 {/* form */}
-                <form onSubmit={handleSubmit} className="space-y-6">
-                <div>
-                  <label htmlFor="msisdn">Destination MSISDN</label><span className="text-red-500">*</span>
-                  <Input
-                    id="msisdn"
-                    type="number"
-                    value={form.msisdn}
-                    onChange={(e) => setForm({ ...form, msisdn: e.target.value })}
-                  />
-                </div>
-                <div>
-                  <label htmlFor="amount">Amount</label><span className="text-red-500">*</span>
-                  <Input
-                    id="amount"
-                    type="number"
-                    value={form.amount}
-                    onChange={(e) => setForm({ ...form, amount: e.target.value })}
-                  />
-                </div>
-                <div>
-                  <label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
-                  <Input
-                    id="pin"
-                    type="password"
-                    value={form.pin}
-                    onChange={(e) => setForm({ ...form, pin: e.target.value })}
-                  />
-                </div>
-                <div>
-                  <Button type="submit">Submit</Button>
-                </div>
-              </form>
+                <form onSubmit={handleSubmit} className="space-y-6 mt-5">
+                  <div className="relative" ref={dropdownRef}>
+                    <label htmlFor="msisdn">MSISDN (Phone Number)</label>
+                    <span className="text-red-500">*</span>
+                    <div className="relative">
+                      <Input
+                        id="msisdn"
+                        type="text"
+                        value={searchTerm}
+                        onChange={handleMsisdnSearch}
+                        placeholder="Search MSISDN"
+                        onClick={() => setDropdownOpen(true)}
+                      />
+                      {dropdownOpen && (
+                        <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
+                          {filteredMsisdn.length > 0 ? (
+                            filteredMsisdn.map((item, index) => (
+                              <div
+                                key={index}
+                                className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+                                onClick={() => handleMsisdnSelect(item.value)}
+                              >
+                                {item.label}
+                              </div>
+                            ))
+                          ) : (
+                            <div className="px-4 py-2 text-gray-500">
+                              {isLoading ? 'Loading...' : 'No results found'}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <div>
+                    <label htmlFor="amount">Amount</label>
+                    <span className="text-red-500">*</span>
+                    <Input
+                      id="amount"
+                      type="number"
+                      value={form.amount}
+                      onChange={(e) => setForm({ ...form, amount: e.target.value })}
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="pin">PIN</label>
+                    <span className="text-red-500">*</span>
+                    <Input
+                      id="pin"
+                      type="password"
+                      value={form.pin}
+                      onChange={(e) => setForm({ ...form, pin: e.target.value })}
+                    />
+                  </div>
+                  <div>
+                    <Button type="button" onClick={handleSubmit}>
+                      Submit
+                    </Button>
+                  </div>
+                </form>
               </div>
             </div>
           </Container>
+
+          {showConfirmation && (
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
+                <h3 className="text-lg font-semibold mb-4">Confirm Transaction</h3>
+                <p className="mb-6">
+                  Are you sure you want to disbursement saldo of{' '}
+                  <span className="font-semibold">
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+                      Number(form.amount)
+                    )}{' '}
+                  </span>
+                  ?
+                </p>
+                <div className="flex justify-end space-x-3">
+                  <Button
+                    variant="outline"
+                    onClick={handleCancelSubmit}
+                    className="border-gray-300 text-gray-700"
+                  >
+                    Cancel
+                  </Button>
+                  <Button onClick={() => doPostData(form)} disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Confirm'
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
         </Container>
       </TransactionDisbursementProvider>
     </>
diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index 199a8bc..39f5b07 100644
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@@ -45,6 +45,8 @@ const DetailTransaction = () => {
                         id: selectedTransactionId
                     });
                     setTransactionDetails(response?.data);
+                    console.log(response?.data);
+                    console.log(selectedTransactionId);
                 } catch (error) {
                     console.error('Error fetching transaction', error);
                 }
@@ -72,6 +74,7 @@ const DetailTransaction = () => {
                 <DialogHeader>
                     <DialogTitle>Transaction Details</DialogTitle>
                 </DialogHeader>
+                <DialogDescription></DialogDescription>
                 <DialogBody>
                     {/* Tabs Navigation */}
                     <div className="flex border-b border-gray-200">
@@ -207,7 +210,7 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Description</p>
-                                        <p className="font-medium">{transactionDetails?.description}</p>
+                                        <p className="font-medium">{transactionDetails?.description || '-'}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Name</p>
diff --git a/src/pages/transaction/topup/TransactionTopup.tsx b/src/pages/transaction/topup/TransactionTopup.tsx
index a05fb95..1b339a0 100644
--- a/src/pages/transaction/topup/TransactionTopup.tsx
+++ b/src/pages/transaction/topup/TransactionTopup.tsx
@@ -1,31 +1,46 @@
-import { Container, DataGridInner } from '@/components';
+import { Alert, Container, DataGridInner } from '@/components';
 import { TransactionTopupProvider } from './hooks/TransactionTopupContext';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
 import { getAuth } from '@/auth';
+import { RefreshCw } from 'lucide-react';
 
 const TransactionTopup = () => {
-  const [form, setForm] = useState({
+  const initialState: {
+    topupAmount: string;
+    pin: string;
+  } = {
     topupAmount: '',
     pin: ''
+  };
+
+  const [form, setForm] = useState(initialState);
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
   });
 
   const [wallets, setWallets] = useState([]);
   const { GetData, PostData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
   const parsedUser = getAuth()?.user;
   const API_URL = apiConfig.transaction;
-  const API_URL_WALLET = apiConfig.service_wallet
+  const API_URL_WALLET = apiConfig.service_wallet;
 
   useEffect(() => {
     const fetchWallets = async () => {
       try {
-        const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`, {});
+        const response = await GetData(
+          `${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`,
+          {}
+        );
         if (response?.status === true) {
           setWallets(response.data || []);
         } else {
@@ -39,30 +54,49 @@ const TransactionTopup = () => {
     fetchWallets();
   }, []);
 
-  const handleSubmit = async (e: any) => {
-    e.preventDefault();
-    console.log('Submitted Data:', form);
+  const doPostData = async (form: typeof initialState) => {
+    setIsSubmitting(true);
 
-    if (form.pin == '' || form.topupAmount == '') {
-      toast.warning('Please fill in all required fields.')
-      return
-    }
     try {
-      let requestTopup = await PostData(`${API_URL}/transaction/request-topup`, {
+      let response = await PostData(`${API_URL}/transaction/request-topup`, {
         amount: form.topupAmount,
         pin: form.pin
-      })
-      if (requestTopup?.status == true) {
-        toast.success('Success Request Topup')
+      });
+      console.log(response);
+      if (response?.status == true) {
+        toast.success('Success Request Topup');
       } else {
-        toast.warning(`${requestTopup?.message}`)
+        toast.warning(`${response?.message}`);
       }
-    } catch (error) {
-      toast.warning('Failed')
+    } catch (error: any) {
+      const errorMessage =
+        error?.response?.data?.message || error?.message || 'Something went wrong';
+      toast.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+      setShowConfirmation(false);
     }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    // console.log('Submitted Data:', form);
+
+    if (form.pin == '' || form.topupAmount == '') {
+      setAlert({ show: true, message: 'Please fill in all required fields.' });
+      return;
+    }
+
+    setAlert({ show: false, message: '' });
+    setShowConfirmation(true);
+
     // TODO: Kirim ke backend atau proses lainnya
   };
 
+  const handleCancelSubmit = () => {
+    setShowConfirmation(false);
+  };
+
   return (
     <>
       <Helmet>
@@ -70,7 +104,9 @@ const TransactionTopup = () => {
       </Helmet>
       <TransactionTopupProvider>
         <Container className="mb-7">
-          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION TOPUP REQUEST</h1>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">
+            MANAGE TRANSACTION TOPUP REQUEST
+          </h1>
           <Breadcrumbs sx={{ mb: 2 }}>
             <Link underline="none" color="inherit" href="/">
               <span className="text-sm hover:underline">Dashboard</span>
@@ -82,6 +118,7 @@ const TransactionTopup = () => {
               <span className="text-sm">Topup</span>
             </Link>
           </Breadcrumbs>
+
           {/* Wallet Section */}
           <div className="mb-6">
             <h2 className="text-md font-semibold text-gray-700 mb-3">Your Wallets</h2>
@@ -90,7 +127,9 @@ const TransactionTopup = () => {
                 <div key={wallet.id_wallet} className="border rounded-lg p-4 bg-white">
                   <p className="text-sm text-gray-500">{wallet.wallet}</p>
                   <p className="text-lg font-semibold text-green-600">
-                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(wallet.amount)}
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+                      wallet.amount
+                    )}
                   </p>
                 </div>
               ))}
@@ -99,10 +138,16 @@ const TransactionTopup = () => {
           <Container className="flex items-center justify-center">
             <div className="card max-w-[750px] w-full">
               <div className="card-body p-10">
+                {alert.show && (
+                  <Alert variant="danger">
+                    <h3>{alert.message}</h3>
+                  </Alert>
+                )}
                 {/* form */}
-                <form onSubmit={handleSubmit} className="space-y-6">
+                <form onSubmit={handleSubmit} className="space-y-6 mt-5">
                   <div>
-                    <label htmlFor="topupAmount">Topup Amount</label><span className="text-red-500">*</span>
+                    <label htmlFor="topupAmount">Topup Amount</label>
+                    <span className="text-red-500">*</span>
                     <Input
                       id="topupAmount"
                       type="number"
@@ -111,7 +156,8 @@ const TransactionTopup = () => {
                     />
                   </div>
                   <div>
-                    <label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
+                    <label htmlFor="pin">PIN</label>
+                    <span className="text-red-500">*</span>
                     <Input
                       id="pin"
                       type="password"
@@ -120,12 +166,46 @@ const TransactionTopup = () => {
                     />
                   </div>
                   <div>
-                    <Button type="submit">Submit</Button>
+                    <Button type="button" onClick={handleSubmit}>
+                      Submit
+                    </Button>
                   </div>
                 </form>
               </div>
             </div>
           </Container>
+          {showConfirmation && (
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
+                <h3 className="text-lg font-semibold mb-4">Confirm Transaction</h3>
+                <p className="mb-6">
+                  Are you sure you want to request a topup of{' '}
+                  <span className="font-semibold">
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+                      Number(form.topupAmount)
+                    )}{' '}
+                  </span>{' '}
+                  ?
+                </p>
+                <div className="flex justify-end space-x-3">
+                  <Button
+                    variant="outline"
+                    onClick={handleCancelSubmit}
+                    className="border-gray-300 text-gray-700"
+                  >
+                    Cancel
+                  </Button>
+                  <Button onClick={() => doPostData(form)} disabled={isSubmitting}>
+                    {isSubmitting ? (
+                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                    ) : (
+                      'Confirm'
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
         </Container>
       </TransactionTopupProvider>
     </>