diff --git a/package.json b/package.json
index 89c60d4..09bf451 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
     "styled-components": "^6.1.13",
     "stylis": "^4.3.4",
     "stylis-plugin-rtl": "^2.1.1",
+    "sweetalert2": "^11.19.1",
     "tabs": "^0.2.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
diff --git a/src/config/api.config.ts b/src/config/api.config.ts
index 47c5471..56e9c15 100644
--- a/src/config/api.config.ts
+++ b/src/config/api.config.ts
@@ -2,6 +2,7 @@ interface apiConfigProps {
   service_dashboard: string;
   service_customer: string;
   service_master_data: string;
+  // service_master_data2: string;
   service_transaction: string;
   service_wallet: string;
   transaction: string;
@@ -18,7 +19,7 @@ const apiConfig: apiConfigProps = {
   // service_dashboard: `${API_URL}${import.meta.env.VITE_ENV != 'development' ? '/d' : ''}`,
   service_dashboard: `${API_URL}/d`,
   service_customer: `${API_URL}/c`,
-  // service_master_data: `${API_URL}/m`
+  // service_master_data2: `${API_URL}/m`,
   service_master_data: `${API_URL}/t`,
   service_transaction: `${API_URL}/tt`,
   service_wallet: `${API_URL}/w`,
diff --git a/src/pages/account/home/user-profile/blocks/PinCode.tsx b/src/pages/account/home/user-profile/blocks/PinCode.tsx
index da647ca..64fcd3f 100644
--- a/src/pages/account/home/user-profile/blocks/PinCode.tsx
+++ b/src/pages/account/home/user-profile/blocks/PinCode.tsx
@@ -1,96 +1,74 @@
-import { useState, useContext, useEffect, useCallback, MouseEvent } from 'react';
+import { useState, useContext, useCallback, MouseEvent } from 'react';
 import { AccountUserProfileContext } from '../hooks';
 import { toast } from 'sonner';
-import { useAuthContext } from '@/auth';
+import { getAuth,useAuthContext } from '@/auth';
 import { KeenIcon } from '@/components';
-import clsx from 'clsx';
 
-type PasswordType = 'password' | 'retype_password' | 'current_password';
+type PasswordType = 'current' | 'new' | 'retype';
+
 const PinCode = () => {
-  const { setPassword } = useContext(AccountUserProfileContext);
-  const { getUser } = useAuthContext();
+  const { setPincode } = useContext(AccountUserProfileContext);
 
-  const [newPassword, setNewPassword] = useState('');
-  const [currentPassword, setCurrentPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const [currentPincode, setCurrentPincode] = useState('');
+  const [newPincode, setNewPincode] = useState('');
+  const [retypePincode, setRetypePincode] = useState('');
+  const [errorRetype, setErrorRetype] = useState(''); 
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [messagePassword, setMessagePassword] = useState(true);
   const [showPassword, setShowPassword] = useState({
-    current_password: false,
-    password: false,
-    retype_password: false
+    current: false,
+    new: false,
+    retype: false,
   });
 
-  const [passwordErrors, setPasswordErrors] = useState<string[]>([]);
-
-  const validatePassword = (password: string) => {
-    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
-    const hasCapitalLetter = /[A-Z]/.test(password);
-    const hasNumber = /[0-9]/.test(password);
-    return hasSpecialChar && hasCapitalLetter && hasNumber;
-  };
-
-  useEffect(() => {
-    const passwordsMatch = newPassword === confirmPassword;
-    const isPasswordValid = validatePassword(newPassword);
-    setMessagePassword(passwordsMatch && isPasswordValid);
-
-    const errors: string[] = [];
-    if (newPassword) {
-      if (!/[A-Z]/.test(newPassword)) {
-        errors.push('Password must contain at least one capital letter');
-      }
-      if (!/[0-9]/.test(newPassword)) {
-        errors.push('Password must contain at least one number');
-      }
-      if (!/[!@#$%^&*(),.?":{}|<>]/.test(newPassword)) {
-        errors.push('Password must contain at least one special character');
-      }
-      if (newPassword !== confirmPassword) {
-        errors.push('Passwords do not match');
-      }
-    }
-    setPasswordErrors(errors);
-  }, [newPassword, confirmPassword]);
-
   const handleResetPassword = useCallback(async () => {
-    const user: any = await getUser();
-
-    if (!messagePassword) {
-      toast.error('Passwords do not match!');
+    if (newPincode !== retypePincode) {
+      toast.error('New Pin Code and Retype Pin Code do not match.');
+      setErrorRetype('New Pin Code and Retype Pin Code do not match.');
       return;
     }
 
     setIsSubmitting(true);
 
     try {
-      await setPassword({
-        current_password: currentPassword,
-        password: newPassword,
-        retype_password: confirmPassword,
-        username: user.data.username ?? ''
+      await setPincode({
+        currentpincode: currentPincode,
+        newpincode: newPincode,
+        retypepincode: retypePincode,
       });
 
-      setNewPassword('');
-      setConfirmPassword('');
-      setCurrentPassword('');
+      setCurrentPincode('');
+      setNewPincode('');
+      setRetypePincode('');
+      setErrorRetype(''); // Clear error after success
     } catch (error: any) {
       const errorMessage =
         error?.response?.data?.message ||
         error?.message ||
-        'An error occurred while resetting the password.';
+        'An error occurred while updating the pin code.';
       toast.error(errorMessage);
     } finally {
       setIsSubmitting(false);
     }
-  }, [currentPassword, newPassword, newPassword, messagePassword, getUser]);
+  }, [currentPincode, newPincode, retypePincode, setPincode]);
 
-  const isButtonDisabled = isSubmitting || !newPassword || !confirmPassword || !messagePassword;
+  const isButtonDisabled = isSubmitting || !currentPincode || !newPincode || !retypePincode;
 
-  const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
-    event.preventDefault();
-    setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
-  }, []);
+  const togglePassword = useCallback(
+    (event: MouseEvent<HTMLButtonElement>, key: PasswordType) => {
+      event.preventDefault();
+      setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+    },
+    []
+  );
+
+  const handleRetypeChange = (value: string) => {
+    setRetypePincode(value);
+    if (newPincode && value && newPincode !== value) {
+      setErrorRetype('New Pin Code and Retype Pin Code do not match.');
+    } else {
+      setErrorRetype('');
+    }
+  };
 
   return (
     <div className="card pb-2.5">
@@ -98,91 +76,97 @@ const PinCode = () => {
         <h3 className="card-title">Pin Code</h3>
       </div>
       <div className="card-body grid gap-5">
+        {/* Current Pin Code */}
         <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
           <label className="form-label max-w-56">Current Pin Code</label>
-          <div className="input">
+          <div className="input relative">
             <input
-              type={showPassword.current_password ? 'text' : 'password'}
-              className="form-control"
+              className="form-control pr-10"
               placeholder="Current Pin Code"
-              value={currentPassword}
-              onChange={(e) => setCurrentPassword(e.target.value)}
+              value={currentPincode}
+              onChange={(e) => setCurrentPincode(e.target.value)}
               disabled={isSubmitting}
+              type={showPassword.current ? 'text' : 'password'}
             />
-            <button className="btn btn-icon" onClick={(e) => togglePassword(e, 'current_password')}>
+            <button
+              className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
+              onClick={(e) => togglePassword(e, 'current')}
+              type="button"
+            >
               <KeenIcon
-                icon="eye"
-                className={clsx('text-gray-500', { hidden: showPassword.current_password })}
-              />
-              <KeenIcon
-                icon="eye-slash"
-                className={clsx('text-gray-500', { hidden: !showPassword.current_password })}
+                icon={showPassword.current ? 'eye-slash' : 'eye'}
+                className="text-gray-500"
               />
             </button>
           </div>
         </div>
-        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-          <label className="form-label max-w-56">Pin Code</label>
-          <div className="input">
-            <input
-              className="form-control"
-              placeholder="New Pin Code"
-              value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)}
-              disabled={isSubmitting}
-              type={showPassword.password ? 'text' : 'password'}
-            />
-            <button className="btn btn-icon" onClick={(e) => togglePassword(e, 'password')}>
-              <KeenIcon
-                icon="eye"
-                className={clsx('text-gray-500', { hidden: showPassword.password })}
-              />
-              <KeenIcon
-                icon="eye-slash"
-                className={clsx('text-gray-500', { hidden: !showPassword.password })}
-              />
-            </button>
-          </div>
-        </div>
-        <div className="mb-2.5">
-          <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-            <label className="form-label max-w-56">Confirm New Pin Code</label>
-            <div className="input">
-              <input
-                type={showPassword.retype_password ? 'text' : 'password'}
-                className="form-control"
-                placeholder="Confirm New Pin Code"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                disabled={isSubmitting}
-              />
-              <button
-                className="btn btn-icon"
-                onClick={(e) => togglePassword(e, 'retype_password')}
-              >
-                <KeenIcon
-                  icon="eye"
-                  className={clsx('text-gray-500', { hidden: showPassword.retype_password })}
-                />
-                <KeenIcon
-                  icon="eye-slash"
-                  className={clsx('text-gray-500', { hidden: !showPassword.retype_password })}
-                />
-              </button>
-            </div>
-          </div>
-          <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-            <label className="form-label max-w-56 text-white">Confirm New Pin Code</label>
-            {passwordErrors.length > 0 && (
-              <div className="text-xs text-red-500 mt-1 ms-3">
-                {passwordErrors.map((error, index) => (
-                  <p key={index}>{error}</p>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
 
+        {/* New Pin Code */}
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">New Pin Code</label>
+          <div className="input relative">
+            <input
+              className="form-control pr-10"
+              placeholder="New Pin Code"
+              value={newPincode}
+              onChange={(e) => {
+                setNewPincode(e.target.value);
+                // Kalau retype sudah diisi, cek lagi error
+                if (retypePincode) {
+                  if (e.target.value !== retypePincode) {
+                    setErrorRetype('New Pin Code and Retype Pin Code do not match.');
+                  } else {
+                    setErrorRetype('');
+                  }
+                }
+              }}
+              disabled={isSubmitting}
+              type={showPassword.new ? 'text' : 'password'}
+            />
+            <button
+              className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
+              onClick={(e) => togglePassword(e, 'new')}
+              type="button"
+            >
+              <KeenIcon
+                icon={showPassword.new ? 'eye-slash' : 'eye'}
+                className="text-gray-500"
+              />
+            </button>
+          </div>
+        </div>
+
+        {/* Retype Pin Code */}
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">Retype Pin Code</label>
+          <div className="input relative w-full">
+            <input
+              className={`form-control pr-10 ${errorRetype ? 'border-red-500' : ''}`}
+              placeholder="Retype Pin Code"
+              value={retypePincode}
+              onChange={(e) => handleRetypeChange(e.target.value)}
+              disabled={isSubmitting}
+              type={showPassword.retype ? 'text' : 'password'}
+            />
+            <button
+              className="btn btn-icon absolute right-2 top-1/2 transform -translate-y-1/2"
+              onClick={(e) => togglePassword(e, 'retype')}
+              type="button"
+            >
+              <KeenIcon
+                icon={showPassword.retype ? 'eye-slash' : 'eye'}
+                className="text-gray-500"
+              />
+            </button>
+          </div>
+        </div>
+
+        {/* Error message under Retype */}
+        {errorRetype && (
+          <div className="text-red-500 text-sm -mt-4 ml-[calc(14rem+10px)]">{errorRetype}</div>
+        )}
+
+        {/* Submit button */}
         <div className="flex justify-end">
           <button
             className="btn btn-primary"
diff --git a/src/pages/account/home/user-profile/blocks/index.ts b/src/pages/account/home/user-profile/blocks/index.ts
index 623b2f0..00174e5 100644
--- a/src/pages/account/home/user-profile/blocks/index.ts
+++ b/src/pages/account/home/user-profile/blocks/index.ts
@@ -1,2 +1,3 @@
 export * from './BasicSettings';
 export * from './Password';
+export * from './PinCode';
diff --git a/src/pages/account/home/user-profile/hooks/AccountUserProfileContext.tsx b/src/pages/account/home/user-profile/hooks/AccountUserProfileContext.tsx
index 0b174b9..30fc219 100644
--- a/src/pages/account/home/user-profile/hooks/AccountUserProfileContext.tsx
+++ b/src/pages/account/home/user-profile/hooks/AccountUserProfileContext.tsx
@@ -2,8 +2,7 @@ import React, { createContext, useState } from 'react';
 import { apiConfig } from '@/config/api.config';
 import { useCallApi } from '@/hooks';
 import { toast } from 'sonner';
-import axios from 'axios';
-import { useAuthContext } from '@/auth';
+import { getAuth,useAuthContext } from '@/auth';
 
 interface Password {
   password: string;
@@ -18,9 +17,17 @@ interface Profile {
   username: string;
 }
 
+interface PinCodePayload {
+  currentpincode: string;
+  newpincode: string;
+  retypepincode: string;
+}
+
 interface ContextProps {
   password: Password | null;
   profile: Profile | null;
+  pincode: PinCodePayload | null;
+  setPincode: (pincode: PinCodePayload) => Promise<void>;
   setPassword: (password: Password) => Promise<void>;
   setProfile: (profile: Profile) => Promise<void>;
 }
@@ -28,39 +35,39 @@ interface ContextProps {
 const initialProps: ContextProps = {
   profile: null,
   password: null,
+  pincode: null,
   setPassword: async () => {},
-  setProfile: async () => {}
+  setProfile: async () => {},
+  setPincode: async () => {},
 };
 
 const AccountUserProfileContext = createContext<ContextProps>(initialProps);
 
 const API_URL = apiConfig.service_dashboard;
+const API_URL2 = apiConfig.service_customer;
 
 const AccountUserProfileContextProvider = ({ children }: { children: React.ReactNode }) => {
-  /* state */
   const { login } = useAuthContext();
-  const [profile, setProfile] = useState<Profile | null>(null);
-  const [password, setPassword] = useState<Password | null>(null);
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
+  const [profile, setProfileState] = useState<Profile | null>(null);
+  const [password, setPasswordState] = useState<Password | null>(null);
+  const [pinCode, setPincodeState] = useState<PinCodePayload | null>(null);
+  const [alert, setAlert] = useState({ show: false, message: '' });
+
+  const { PutData, PostData } = useCallApi();
+
+  const handleError = (error: any, defaultMessage: string) => {
+    const errorMessage = error?.response?.data?.message || error?.message || defaultMessage;
+    setAlert({ show: true, message: errorMessage });
+    toast.error(errorMessage);
+  };
 
-  const { PutData } = useCallApi();
-  const { PostData } = useCallApi();
   const handleSetPassword = async (newPassword: Password) => {
-    setPassword(newPassword);
-
-    const handleError = (error: any, defaultMessage: string) => {
-      const errorMessage = error?.response?.data?.message || error?.message || defaultMessage;
-      setAlert({ show: true, message: errorMessage });
-      toast.error(errorMessage);
-    };
+    setPasswordState(newPassword);
 
     try {
       const validate = await PostData(`${API_URL}/login`, {
         password: newPassword.current_password,
-        username: newPassword.username
+        username: newPassword.username,
       });
 
       if (!validate || !validate.status) {
@@ -70,7 +77,7 @@ const AccountUserProfileContextProvider = ({ children }: { children: React.React
 
       const response = await PutData(`${API_URL}/user/update_password`, {
         password: newPassword.password,
-        retype_password: newPassword.retype_password
+        retype_password: newPassword.retype_password,
       });
 
       if (response && response.status) {
@@ -85,19 +92,37 @@ const AccountUserProfileContextProvider = ({ children }: { children: React.React
 
   const handleSetProfile = async (newProfile: Profile) => {
     try {
-      setProfile(newProfile);
+      setProfileState(newProfile);
 
-      const response = await PutData(`${API_URL}/user/update_profile/`, {
+      await PutData(`${API_URL}/user/update_profile/`, {
         name: newProfile.name,
         email: newProfile.email,
-        username: newProfile.username
+        username: newProfile.username,
       });
 
       toast.success('Profile updated successfully.');
     } catch (error: any) {
-      const errorMessage = error?.message || 'Failed to update Profile. Please try again.';
-      setAlert({ show: true, message: errorMessage });
-      toast.error(errorMessage);
+      handleError(error, 'Failed to update profile. Please try again.');
+    }
+  };
+
+  const handleSetPinCode = async (newPinCode: PinCodePayload) => {
+    try {
+      setPincodeState(newPinCode);
+      const customerid = getAuth()?.user?.customer?.id;
+      const response = await PutData(`${API_URL2}/customer/pin/${customerid}`, {
+        old_pin: newPinCode.currentpincode,
+        new_pin: newPinCode.newpincode,
+        retype_new_pin: newPinCode.retypepincode,
+      });
+
+      if (response && response.status) {
+        toast.success('Pin code updated successfully.');
+      } else {
+        toast.error(response?.message || 'Failed to update pin code.');
+      }
+    } catch (error: any) {
+      handleError(error, 'Failed to update Pin Code. Please try again.');
     }
   };
 
@@ -106,8 +131,10 @@ const AccountUserProfileContextProvider = ({ children }: { children: React.React
       value={{
         password,
         profile,
+        pincode: pinCode,
         setPassword: handleSetPassword,
-        setProfile: handleSetProfile
+        setProfile: handleSetProfile,
+        setPincode: handleSetPinCode,
       }}
     >
       {children}
diff --git a/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx b/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
index 016fd45..da5a4b8 100644
--- a/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
@@ -22,6 +22,7 @@ import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { toast } from 'sonner';
 import { Input } from '@/components/ui/input';
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import Swal from 'sweetalert2'; // ✅ IMPORT sweetalert2
 
 const API_URL = apiConfig.transaction;
 
@@ -63,34 +64,48 @@ const ApprovalDialog = () => {
                 return;
             }
 
-            const response = await PostData(`${API_URL}/transaction/set-approval`, {
-                id_transaction: transactionDetails.id,
-                notes: formField.notes,
-                status: formField.status,
-                pin: formField.pin,
+            // ✅ TUTUP Dialog sebelum munculkan SweetAlert
+            setShowApprovalDialog(false);
+
+            // ✅ TAMPILKAN SWEETALERT
+            const result = await Swal.fire({
+                title: 'Are you sure?',
+                text: "You want to save changes?",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Yes, save it!',
+                cancelButtonText: 'Cancel'
             });
 
-            if (response?.status === false) {
-                setAlert({
-                    show: true,
-                    message: response?.message?.error?.message || 'Approval failed',
+            if (result.isConfirmed) {
+                // ✅ Kalau tekan YES, baru tembak API
+                const response = await PostData(`${API_URL}/transaction/set-approval`, {
+                    id_transaction: transactionDetails.id,
+                    notes: formField.notes,
+                    status: formField.status,
+                    pin: formField.pin,
                 });
-                return;
-            }
 
-            if (response?.status) {
-                setAlert({ show: false, message: '' });
-                toast.success('Success Update Approval');
-                const createActivity = {
-                    module: 'Approval Transaction',
-                    description: `Change status approve for transaction => ${transactionDetails.code}`,
-                    action: 'U',
-                };
-                doSaveLogActivity(createActivity);
-                setShowApprovalDialog(false);
-                reload();
+                if (response?.status === false) {
+                    toast.error(response?.message?.error?.message || 'Approval failed');
+                    return;
+                }
+
+                if (response?.status) {
+                    toast.success('Success Update Approval');
+                    const createActivity = {
+                        module: 'Approval Transaction',
+                        description: `Change status approve for transaction => ${transactionDetails.code}`,
+                        action: 'U',
+                    };
+                    doSaveLogActivity(createActivity);
+                    reload();
+                }
             } else {
-                setAlert({ show: true, message: response?.message });
+                // ✅ Kalau tekan Cancel
+                console.log('User cancelled');
             }
         },
         [formField, transactionDetails]
@@ -102,7 +117,7 @@ const ApprovalDialog = () => {
                 transaction_code: '',
                 notes: '',
                 status: '',
-                pin:''
+                pin: ''
             });
             setTransactionDetails(null);
             setAlert({ show: false, message: '' });
@@ -171,7 +186,6 @@ const ApprovalDialog = () => {
                                     </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
diff --git a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
index 6a15c17..4b5d549 100644
--- a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
@@ -125,7 +125,17 @@ const DetailApprovalTransaction = () => {
                                 <div className="grid grid-cols-2 gap-4">
                                     <div>
                                         <p className="text-sm text-gray-500">Transaction Date</p>
-                                        <p className="font-medium">{transactionDetails?.transaction_date}</p>
+                                        <p className="font-medium">{transactionDetails?.transaction_date
+                                            ? new Date(transactionDetails.transaction_date).toLocaleDateString('en-GB', {
+                                                day: '2-digit',
+                                                month: '2-digit',
+                                                year: 'numeric',
+                                                hour: '2-digit',
+                                                minute: '2-digit',
+                                                second: '2-digit',
+                                                hour12: false
+                                            })
+                                            : ''}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
@@ -299,8 +309,17 @@ const DetailApprovalTransaction = () => {
                                 <div className="grid grid-cols-2 gap-4">
                                     <div>
                                         <p className="text-sm text-gray-500">Transaction Date</p>
-                                        <p className="font-medium">{transactionDetails?.transaction_date}</p>
-                                    </div>
+                                        <p className="font-medium">{transactionDetails?.transaction_date
+                                            ? new Date(transactionDetails.transaction_date).toLocaleDateString('en-GB', {
+                                                day: '2-digit',
+                                                month: '2-digit',
+                                                year: 'numeric',
+                                                hour: '2-digit',
+                                                minute: '2-digit',
+                                                second: '2-digit',
+                                                hour12: false
+                                            })
+                                            : ''}</p>                                    </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
                                         <p className="font-medium">
@@ -485,38 +504,44 @@ const DetailApprovalTransaction = () => {
                                     <table className="min-w-full table-auto">
                                         <thead>
                                             <tr className="bg-gray-100">
-                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
+                                                <th className="px-4 py-2 text-left text-sm text-gray-500">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">Request Body</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 Code</th>
-                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Request End Point</th>
+                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
                                             </tr>
                                         </thead>
                                         <tbody>
                                             {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
-                                                transactionDetails.log.map((log: { request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
+                                                transactionDetails.log.map((log: { type: string, request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
                                                     <tr key={index} className="border-t">
-                                                        <td className="px-4 py-2 font-medium">
-                                                            {(() => {
-                                                                let status;
-                                                                if (log.status === 'P') {
-                                                                    status = 'PENDING';
-                                                                } else if (log.status === 'O') {
-                                                                    status = 'ON PROCESS';
-                                                                } else if (log.status === 'F') {
-                                                                    status = 'FAILED';
-                                                                } else if (log.status === 'C') {
-                                                                    status = 'COMPLETE';
-                                                                }
-                                                                return status;
-                                                            })()}
-                                                        </td>
-                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_date ?? '-'}</td>
-                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.response_date ?? '-'}</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_endpoint ?? '-'}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.type}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
+                                                            ? new Date(log.request_date).toLocaleDateString('en-GB', {
+                                                                day: '2-digit',
+                                                                month: '2-digit',
+                                                                year: 'numeric',
+                                                                hour: '2-digit',
+                                                                minute: '2-digit',
+                                                                second: '2-digit',
+                                                                hour12: false
+                                                            })
+                                                            : ''}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.response_date
+                                                            ? new Date(log.response_date).toLocaleDateString('en-GB', {
+                                                                day: '2-digit',
+                                                                month: '2-digit',
+                                                                year: 'numeric',
+                                                                hour: '2-digit',
+                                                                minute: '2-digit',
+                                                                second: '2-digit',
+                                                                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_endpoint}</td>
                                                     </tr>
                                                 ))
                                             ) : (
@@ -607,7 +632,7 @@ const DetailApprovalTransaction = () => {
                                                 <tr className="bg-gray-100">
                                                     <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">Request Body</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 Code</th>
                                                     <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
@@ -618,8 +643,29 @@ const DetailApprovalTransaction = () => {
                                                     transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
                                                         <tr key={index} className="border-t">
                                                             <td className="px-4 py-2 text-sm text-gray-500">{log.type}</td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_date}</td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.response_date}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
+                                                                ? new Date(log.request_date).toLocaleDateString('en-GB', {
+                                                                    day: '2-digit',
+                                                                    month: '2-digit',
+                                                                    year: 'numeric',
+                                                                    hour: '2-digit',
+                                                                    minute: '2-digit',
+                                                                    second: '2-digit',
+                                                                    hour12: false
+                                                                })
+                                                                : ''}</td>
+
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.response_date
+                                                                ? new Date(log.response_date).toLocaleDateString('en-GB', {
+                                                                    day: '2-digit',
+                                                                    month: '2-digit',
+                                                                    year: 'numeric',
+                                                                    hour: '2-digit',
+                                                                    minute: '2-digit',
+                                                                    second: '2-digit',
+                                                                    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_endpoint ?? '-'}</td>
diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index 39f5b07..de6a873 100644
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@@ -45,8 +45,8 @@ const DetailTransaction = () => {
                         id: selectedTransactionId
                     });
                     setTransactionDetails(response?.data);
-                    console.log(response?.data);
-                    console.log(selectedTransactionId);
+                    // console.log(response?.data);
+                    // console.log(selectedTransactionId);
                 } catch (error) {
                     console.error('Error fetching transaction', error);
                 }
@@ -141,7 +141,20 @@ const DetailTransaction = () => {
                                 <div className="grid grid-cols-2 gap-4">
                                     <div>
                                         <p className="text-sm text-gray-500">Transaction Date</p>
-                                        <p className="font-medium">{transactionDetails?.transaction_date}</p>
+                                        <p className="font-medium">
+                                            {transactionDetails?.transaction_date
+                                                ? new Date(transactionDetails.transaction_date).toLocaleDateString('en-GB', {
+                                                    day: '2-digit',
+                                                    month: '2-digit',
+                                                    year: 'numeric',
+                                                    hour: '2-digit',
+                                                    minute: '2-digit',
+                                                    second: '2-digit',
+                                                    hour12: false
+                                                })
+                                                : ''}
+                                        </p>
+
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
@@ -312,7 +325,17 @@ const DetailTransaction = () => {
                                 <div className="grid grid-cols-2 gap-4">
                                     <div>
                                         <p className="text-sm text-gray-500">Transaction Date</p>
-                                        <p className="font-medium">{transactionDetails?.transaction_date}</p>
+                                        <p className="font-medium">{transactionDetails?.transaction_date
+                                            ? new Date(transactionDetails.transaction_date).toLocaleDateString('en-GB', {
+                                                day: '2-digit',
+                                                month: '2-digit',
+                                                year: 'numeric',
+                                                hour: '2-digit',
+                                                minute: '2-digit',
+                                                second: '2-digit',
+                                                hour12: false
+                                            })
+                                            : ''}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Full Name</p>
@@ -492,38 +515,44 @@ const DetailTransaction = () => {
                                     <table className="min-w-full table-auto">
                                         <thead>
                                             <tr className="bg-gray-100">
-                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
+                                                <th className="px-4 py-2 text-left text-sm text-gray-500">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">Request Body</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 Code</th>
-                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Request End Point</th>
+                                                <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
                                             </tr>
                                         </thead>
                                         <tbody>
                                             {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
-                                                transactionDetails.log.map((log: { request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
+                                                transactionDetails.log.map((log: { type: string, request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
                                                     <tr key={index} className="border-t">
-                                                        <td className="px-4 py-2 font-medium">
-                                                            {(() => {
-                                                                let status;
-                                                                if (log.status === 'P') {
-                                                                    status = 'PENDING';
-                                                                } else if (log.status === 'O') {
-                                                                    status = 'ON PROCESS';
-                                                                } else if (log.status === 'F') {
-                                                                    status = 'FAILED';
-                                                                } else if (log.status === 'C') {
-                                                                    status = 'COMPLETE';
-                                                                }
-                                                                return status;
-                                                            })()}
-                                                        </td>
-                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_date ?? '-'}</td>
-                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.response_date ?? '-'}</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_endpoint ?? '-'}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.type}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
+                                                            ? new Date(log.request_date).toLocaleDateString('en-GB', {
+                                                                day: '2-digit',
+                                                                month: '2-digit',
+                                                                year: 'numeric',
+                                                                hour: '2-digit',
+                                                                minute: '2-digit',
+                                                                second: '2-digit',
+                                                                hour12: false
+                                                            })
+                                                            : ''}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.response_date
+                                                            ? new Date(log.response_date).toLocaleDateString('en-GB', {
+                                                                day: '2-digit',
+                                                                month: '2-digit',
+                                                                year: 'numeric',
+                                                                hour: '2-digit',
+                                                                minute: '2-digit',
+                                                                second: '2-digit',
+                                                                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_endpoint}</td>
                                                     </tr>
                                                 ))
                                             ) : (
@@ -614,7 +643,7 @@ const DetailTransaction = () => {
                                                 <tr className="bg-gray-100">
                                                     <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">Request Body</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 Code</th>
                                                     <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
@@ -625,8 +654,29 @@ const DetailTransaction = () => {
                                                     transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
                                                         <tr key={index} className="border-t">
                                                             <td className="px-4 py-2 text-sm text-gray-500">{log.type}</td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_date}</td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.response_date}</td>
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
+                                                                ? new Date(log.request_date).toLocaleDateString('en-GB', {
+                                                                    day: '2-digit',
+                                                                    month: '2-digit',
+                                                                    year: 'numeric',
+                                                                    hour: '2-digit',
+                                                                    minute: '2-digit',
+                                                                    second: '2-digit',
+                                                                    hour12: false
+                                                                })
+                                                                : ''}</td>
+
+                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.response_date
+                                                                ? new Date(log.response_date).toLocaleDateString('en-GB', {
+                                                                    day: '2-digit',
+                                                                    month: '2-digit',
+                                                                    year: 'numeric',
+                                                                    hour: '2-digit',
+                                                                    minute: '2-digit',
+                                                                    second: '2-digit',
+                                                                    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_endpoint ?? '-'}</td>
diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
index 2253d83..1167b49 100644
--- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
+++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
@@ -22,6 +22,15 @@ function useDebounce<T>(value: T, delay: number): T {
   return debouncedValue;
 }
 
+const formatNumber = (num: number): string => {
+  return num.toLocaleString('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+};
+
 interface AccountProps {
   id: string;
   name: string;
@@ -147,6 +156,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         accessorFn: (row) => row.maximum_amount,
         id: 'maximum_amount',
         header: ({ column }) => <DataGridColumnHeader title="Maximum Amount" column={column} />,
+        cell: ({ row }) => formatNumber(row.original.maximum_amount),
         enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
@@ -155,6 +165,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         accessorFn: (row) => row.minimum_amount,
         id: 'minimum_amount',
         header: ({ column }) => <DataGridColumnHeader title="Minimum Amount" column={column} />,
+        cell: ({ row }) => formatNumber(row.original.minimum_amount),
         enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
@@ -165,6 +176,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         header: ({ column }) => (
           <DataGridColumnHeader title="Max Transaction Per Day" column={column} />
         ),
+        cell: ({ row }) => formatNumber(row.original.max_transaction_per_day),
         enableSorting: false,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
diff --git a/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx b/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
index 546a14a..683e9ae 100644
--- a/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
+++ b/src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
@@ -1,40 +1,189 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
-import { useManageWalletContext } from '../hooks/useManageWalletHistoryContext';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+const API_URL_WALLET = apiConfig.service_wallet;
+
+interface WalletProps {
+  ID: string;
+  name: string;
+}
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
-  const { handleAddDialog } = useManageWalletContext();
+  const { GetData } = useCallApi();
+
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('msisdn')?.getFilterValue() as string) ?? ''
+  );
+  const [dateRange, setDateRange] = useState({ from: '', to: '' });
+  const [walletId, setWalletId] = useState<string>(
+    (table.getColumn('id_wallet')?.getFilterValue() as string) ?? ''
+  );
+  const [wallets, setWallets] = useState<WalletProps[]>([]);
+
+  const formatDate = (date: Date): string => date.toISOString().split('T')[0];
+
+  useEffect(() => {
+    const today = new Date();
+    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+    setDateRange({ from: formatDate(firstDayOfMonth), to: formatDate(today) });
+  }, []);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('msisdn')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
+  const handleFilterByDate = useCallback(() => {
+    try {
+      table.getColumn('CreatedAt')?.setFilterValue(dateRange);
+    } catch (error) {
+      toast.error('Error applying date filter');
+      console.error('Error applying date filter:', error);
+    }
+  }, [dateRange, table]);
+
+  useEffect(() => {
+    table.getColumn('id_wallet')?.setFilterValue(walletId);
+    table.setPageIndex(0);
+  }, [walletId, table]);
+
+  useEffect(() => {
+    if (dateRange.from && dateRange.to) {
+      handleFilterByDate();
+    }
+  }, [dateRange, handleFilterByDate]);
+
+  const fetchWallets = async () => {
+    try {
+      const response = await GetData(`${API_URL_WALLET}/dashboard/wallet/`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: 'created_at',
+        order_direction: 'ASC'
+      });
+      setWallets(response?.data.list || []);
+    } catch (error) {
+      console.error('Error fetching wallets', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchWallets();
+  }, []);
+
+  const handleClearAllFilters = () => {
+    setSearchValue('');
+    setWalletId('');
+
+    const today = new Date();
+    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+    setDateRange({
+      from: formatDate(firstDayOfMonth),
+      to: formatDate(today)
+    });
+
+    table.getAllColumns().forEach((column) => {
+      if (column.id !== 'CreatedAt') {
+        column.setFilterValue(undefined);
+      }
+    });
+
+    table.setPageIndex(0);
+
+    table.getColumn('CreatedAt')?.setFilterValue({
+      from: formatDate(firstDayOfMonth),
+      to: formatDate(today)
+    });
+  };
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
-          <div className="flex w-[50%] gap-3 items-center">
-            {/* <label className="input input-sm w-1/3">
+          <div className="flex gap-3 items-center flex-wrap">
+            <label className="input input-sm w-[160px]">
+              From
+              <input
+                type="date"
+                value={dateRange.from}
+                onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
+              />
+            </label>
+
+            <label className="input input-sm w-[160px]">
+              To
+              <input
+                type="date"
+                value={dateRange.to}
+                onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
+              />
+            </label>
+
+            <label className="input input-sm w-1/3">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Wallet"
-                value={(table.getColumn('msisdn')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('msisdn')?.setFilterValue(event.target.value)}
+                placeholder="Search MSISDN"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
               />
-            </label> */}
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
+            </label>
+
+            <div className="w-[220px]">
+              <Select
+                value={walletId}
+                onValueChange={(value) => {
+                  setWalletId(value);
+                }}
               >
-                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip> */}
+                <SelectTrigger>
+                  <SelectValue placeholder="Select Wallet" />
+                </SelectTrigger>
+                <SelectContent>
+                  {wallets.map((wallet) => (
+                    <SelectItem key={wallet.ID} value={wallet.ID}>
+                      {wallet.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <Button variant="outline" size="sm" onClick={handleClearAllFilters}>
+              Clear Filter
+            </Button>
           </div>
+
           <div className="flex gap-3 items-center">
             <DefaultTooltip title={'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+              <Button
+                variant="outline"
+                className="h-7.5"
+                onClick={() => {
+                  setSearchValue('');
+                  setWalletId('');
+                  table.setColumnFilters((prev) => prev.filter((f) => f.id === 'CreatedAt'));
+                  table.setPageIndex(0);
+                  reload();
+                }}
+              >
                 <KeenIcon icon="arrows-circle" />
               </Button>
             </DefaultTooltip>
diff --git a/src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx b/src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx
index e2b2edd..c2a99d3 100644
--- a/src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx
+++ b/src/pages/wallet/wallet-history/hooks/ManageWalletHistoryContext.tsx
@@ -6,6 +6,16 @@ import { ColumnDef } from '@tanstack/react-table';
 import React, { createContext, useCallback, useMemo, useState } from 'react';
 import ListToolbar from '../blocks/ListToolbar';
 
+// Helper function for number formatting with currency format
+const formatNumber = (num: number, currencyCode: string = 'USD'): string => {
+  return num.toLocaleString('en-US', {
+    style: 'currency',
+    currency: currencyCode,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+};
+
 interface WalletProps {
   id: string;
   name: string;
@@ -23,11 +33,10 @@ interface ContextProps {
   handleDeleteDialog: (show: boolean, selected_wallet: WalletProps | null) => void;
   selectedWallet: WalletProps | null;
   getWalletLists: (
-    limit: number,
     page: number,
-    with_deleted: boolean,
-    order_field: any,
-    order_direction: any
+    limit: number,
+    sorting: any,
+    filter: any
   ) => Promise<{ data: WalletProps[]; totalCount: number } | undefined>;
 }
 
@@ -81,8 +90,22 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorKey: 'amount' ,
+        accessorKey: 'id_wallet',
+        header: ({ column }) => <DataGridColumnHeader title="Wallet ID" column={column} />,
+        enableSorting: false,
+        enableHiding: true, // Hide this column from view but use it for filtering
+        meta: {
+          headerClassName: 'w-[200px]'
+        }
+      },
+      {
+        accessorKey: 'amount',
         header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
+        cell: ({ row }) => {
+          // Get currency code from the nested data structure if available
+          const currencyCode = row.original.balance_type?.currency?.code || 'USD';
+          return formatNumber(row.original.amount, currencyCode);
+        },
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -90,8 +113,10 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorKey: 'trx_count_today' ,
-        header: ({ column }) => <DataGridColumnHeader title="Transaction Count Today" column={column} />,
+        accessorKey: 'trx_count_today',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Transaction Count Today" column={column} />
+        ),
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -99,8 +124,13 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         }
       },
       {
-        accessorKey: 'amount_this_month' ,
-        header: ({ column }) => <DataGridColumnHeader title="Ammount This Month" column={column} />,
+        accessorKey: 'amount_this_month',
+        header: ({ column }) => <DataGridColumnHeader title="Amount This Month" column={column} />,
+        cell: ({ row }) => {
+          // Get currency code from the nested data structure if available
+          const currencyCode = row.original.balance_type?.currency?.code || 'USD';
+          return formatNumber(row.original.amount_this_month, currencyCode);
+        },
         enableSorting: false,
         enableHiding: false,
         meta: {
@@ -109,16 +139,14 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
       },
       {
         accessorKey: 'CreatedAt',
-        header: ({ column }) => (
-          <DataGridColumnHeader title="Created At" column={column} />
-        ),
-        cell: ({ row }) => 
+        header: ({ column }) => <DataGridColumnHeader title="Created At" column={column} />,
+        cell: ({ row }) =>
           new Date(row.original.CreatedAt).toLocaleString('id-ID', {
             day: '2-digit',
             month: 'short',
             year: 'numeric',
             hour: '2-digit',
-            minute: '2-digit',
+            minute: '2-digit'
           }),
         enableSorting: false,
         enableHiding: false,
@@ -182,22 +210,54 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
 
   const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
-      const sortField = 'CreatedAt';
-      const sortDirection = 'ASC';
-      
-      filter = filter.length == 0 ? {} : { name: filter[0].value?.toLowerCase() };
+      const sortField = sorting.length > 0 ? sorting[0].id : 'created_at';
+      const sortDirection = sorting.length > 0 ? (sorting[0].desc ? 'ASC' : 'DESC') : 'DESC';
+
+      // Initialize filter object
+      let filterParams: any = {};
+
+      // Process filter array
+      if (Array.isArray(filter)) {
+        filter.forEach((f: any) => {
+          // Handle MSISDN search
+          if (f.id === 'msisdn' && f.value) {
+            filterParams.msisdn = { like: `%${f.value.toLowerCase()}%` };
+          }
+
+          // Handle date range filter
+          if (f.id === 'CreatedAt' && f.value?.from && f.value?.to) {
+            filterParams.created_at = {
+              from: `${f.value.from} 00:00:00`,
+              to: `${f.value.to} 23:59:59`
+            };
+          }
+
+          // Handle wallet ID filter
+          if (f.id === 'id_wallet' && f.value) {
+            filterParams.id_wallet = f.value;
+          }
+        });
+      }
+
       const response = await GetData(`${API_URL_WALLET}/dashboard/balance/`, {
         limit,
         page: page + 1,
         with_deleted: false,
         order_field: sortField,
         order_direction: sortDirection,
-        // filter: JSON.stringify(filter)
+        filter: JSON.stringify(filterParams)
       });
+
+      if (!response || !response.data) {
+        console.warn('No data received:', response);
+        return { data: [], totalCount: 0 };
+      }
+
       setWallets(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
       console.error('Error fetching Wallet', error);
+      return { data: [], totalCount: 0 };
     }
   };
 
@@ -221,7 +281,6 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
         pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        // sorting={[{ id: 'created_at', desc: true }]} 
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getWalletLists(pageIndex, pageSize, sorting, columnFilters)