diff --git a/src/pages/master/walletRule/blocks/AddDialog.tsx b/src/pages/master/walletRule/blocks/AddDialog.tsx
index 9228226..885c15a 100644
--- a/src/pages/master/walletRule/blocks/AddDialog.tsx
+++ b/src/pages/master/walletRule/blocks/AddDialog.tsx
@@ -30,6 +30,7 @@ import {
   CommandItem,
   CommandList
 } from '@/components/ui/command';
+import { NumericFormat } from 'react-number-format';
 
 interface GroupProps {
   ID: string;
@@ -58,11 +59,11 @@ const AddDialog = () => {
   const initialState: {
     id_wallet: string;
     id_group: string;
-    max_transaction_per_day: number | null;
-    balance_minimum: number | null;
-    balance_maximum: number | null;
-    credit_limit: number | null;
-    monthly_limit: number | null;
+    max_transaction_per_day: string | number | null;
+    balance_minimum: string | number | null;
+    balance_maximum: string | number | null;
+    credit_limit: string | number | null;
+    monthly_limit: string | number | null;
     status: string;
   } = {
     id_wallet: '',
@@ -235,16 +236,20 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Max Transaction Per Day<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
                       value={formField.max_transaction_per_day ?? ''}
-                      onChange={(e) =>
-                        setFormField({
-                          ...formField,
-                          max_transaction_per_day: parseInt(e.target.value)
-                        })
-                      }
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          max_transaction_per_day:
+                            values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Max Transaction Per Day"
                     />
                   </div>
                 </div>
@@ -254,13 +259,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Balance Minimum<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
                       value={formField.balance_minimum ?? ''}
-                      onChange={(e) =>
-                        setFormField({ ...formField, balance_minimum: parseInt(e.target.value) })
-                      }
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          balance_minimum: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Balance Minimum"
                     />
                   </div>
                 </div>
@@ -270,13 +281,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Balance Maximum<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
                       value={formField.balance_maximum ?? ''}
-                      onChange={(e) =>
-                        setFormField({ ...formField, balance_maximum: parseInt(e.target.value) })
-                      }
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          balance_maximum: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Balance Maximum"
                     />
                   </div>
                 </div>
@@ -286,13 +303,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Credit Limit<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
                       value={formField.credit_limit ?? ''}
-                      onChange={(e) =>
-                        setFormField({ ...formField, credit_limit: parseInt(e.target.value) })
-                      }
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          credit_limit: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Credit Limit"
                     />
                   </div>
                 </div>
@@ -302,13 +325,19 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Monthly Limit<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
                       value={formField.monthly_limit ?? ''}
-                      onChange={(e) =>
-                        setFormField({ ...formField, monthly_limit: parseInt(e.target.value) })
-                      }
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          monthly_limit: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Monthly Limit"
                     />
                   </div>
                 </div>
diff --git a/src/pages/master/walletRule/blocks/EditDialog.tsx b/src/pages/master/walletRule/blocks/EditDialog.tsx
index 127df2a..de2d497 100644
--- a/src/pages/master/walletRule/blocks/EditDialog.tsx
+++ b/src/pages/master/walletRule/blocks/EditDialog.tsx
@@ -30,6 +30,7 @@ import {
 } from '@/components/ui/command';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { NumericFormat } from 'react-number-format';
 
 interface GroupProps {
   ID: string;
@@ -51,7 +52,6 @@ const EditDialog = () => {
   const { showEditDialog, handleEditDialog, selectedWalletRule } = useManageWalletRuleContext();
   const { GetData, PutData } = useCallApi();
   const { reload } = useDataGrid();
-  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -59,11 +59,11 @@ const EditDialog = () => {
   const initialState: {
     id_wallet: string;
     id_group: string;
-    max_transaction_per_day: number | null;
-    balance_minimum: number | null;
-    balance_maximum: number | null;
-    credit_limit: number | null;
-    monthly_limit: number | null;
+    max_transaction_per_day: string | number | null;
+    balance_minimum: string | number | null;
+    balance_maximum: string | number | null;
+    credit_limit: string | number | null;
+    monthly_limit: string | number | null;
     status: string;
   } = {
     id_wallet: '',
@@ -89,7 +89,7 @@ const EditDialog = () => {
       e.preventDefault();
 
       const response = await PutData(
-        `${API_URL_WALLET}/dashboard/wallet_rule/${selectedWalletRule}`,
+        `${API_URL_WALLET}/dashboard/wallet_rule/${selectedWalletRule?.ID}`,
         formField
       );
 
@@ -192,10 +192,20 @@ const EditDialog = () => {
 
   useEffect(() => {
     if (selectedWalletRule) {
-      doFetchData(selectedWalletRule);
+      setFormField((prev) => ({
+        ...prev,
+        id_wallet: selectedWalletRule?.id_wallet,
+        id_group: selectedWalletRule?.id_group,
+        max_transaction_per_day: selectedWalletRule?.max_transaction_per_day,
+        balance_minimum: selectedWalletRule?.balance_minimum,
+        balance_maximum: selectedWalletRule?.balance_maximum,
+        credit_limit: selectedWalletRule?.credit_limit,
+        monthly_limit: selectedWalletRule?.monthly_limit,
+        status: selectedWalletRule?.status
+      }));
     }
   }, [selectedWalletRule]);
-// console.log(selectedWalletRule);
+  // console.log(selectedWalletRule);
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@@ -264,16 +274,20 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Max Transaction Per Day<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
                       value={formField.max_transaction_per_day ?? ''}
-                      onChange={(e) =>
-                        setFormField({
-                          ...formField,
-                          max_transaction_per_day: parseInt(e.target.value)
-                        })
-                      }
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          max_transaction_per_day:
+                            values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Max Transaction Per Day"
                     />
                   </div>
                 </div>
@@ -283,13 +297,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Balance Minimum<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
                       value={formField.balance_minimum ?? ''}
-                      onChange={(e) =>
-                        setFormField({ ...formField, balance_minimum: parseInt(e.target.value) })
-                      }
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          balance_minimum: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Balance Minimum"
                     />
                   </div>
                 </div>
@@ -299,13 +319,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Balance Maximum<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
                       value={formField.balance_maximum ?? ''}
-                      onChange={(e) =>
-                        setFormField({ ...formField, balance_maximum: parseInt(e.target.value) })
-                      }
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          balance_maximum: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Balance Maximum"
                     />
                   </div>
                 </div>
@@ -315,13 +341,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Credit Limit<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
                       value={formField.credit_limit ?? ''}
-                      onChange={(e) =>
-                        setFormField({ ...formField, credit_limit: parseInt(e.target.value) })
-                      }
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          credit_limit: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Credit Limit"
                     />
                   </div>
                 </div>
@@ -331,13 +363,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Monthly Limit<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
                       value={formField.monthly_limit ?? ''}
-                      onChange={(e) =>
-                        setFormField({ ...formField, monthly_limit: parseInt(e.target.value) })
-                      }
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          monthly_limit: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
+                      }}
+                      placeholder="Enter Monthly Limit"
                     />
                   </div>
                 </div>
diff --git a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
index 51d0e07..bbe1798 100644
--- a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
+++ b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
@@ -7,8 +7,14 @@ import React, { createContext, useCallback, useMemo, useState } from 'react';
 import ListToolbar from '../blocks/ListToolbar';
 
 interface WalletRuleProps {
-  name: string;
-  id_currency: string;
+  ID: string;
+  id_wallet: string;
+  id_group: string;
+  max_transaction_per_day: number | null;
+  balance_minimum: number | null;
+  balance_maximum: number | null;
+  credit_limit: number | null;
+  monthly_limit: number | null;
   status: string;
 }
 
@@ -17,10 +23,10 @@ interface ContextProps {
   showAddDialog: boolean;
   handleAddDialog: (show: boolean) => void;
   showEditDialog: boolean;
-  handleEditDialog: (show: boolean, selected_walletRule: string | null) => void;
+  handleEditDialog: (show: boolean, selected_walletRule: WalletRuleProps | null) => void;
   showDeleteDialog: boolean;
-  handleDeleteDialog: (show: boolean, selected_walletRule: string | null) => void;
-  selectedWalletRule: string | null;
+  handleDeleteDialog: (show: boolean, selected_walletRule: WalletRuleProps | null) => void;
+  selectedWalletRule: WalletRuleProps | null;
   getWalletRuleLists: (
     limit: number,
     page: number,
@@ -35,9 +41,9 @@ const initialProps: ContextProps = {
   showAddDialog: false,
   handleAddDialog: (show: boolean) => {},
   showEditDialog: false,
-  handleEditDialog: (show: boolean, selected_walletRule: string | null) => {},
+  handleEditDialog: (show: boolean, selected_walletRule: object | null) => {},
   showDeleteDialog: false,
-  handleDeleteDialog: (show: boolean, selected_walletRule: string | null) => {},
+  handleDeleteDialog: (show: boolean, selected_walletRule: object | null) => {},
   selectedWalletRule: null,
   getWalletRuleLists: async () => undefined
 };
@@ -50,22 +56,28 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [selectedWalletRule, setSelectedWalletRule] = useState<string | null>(null);
+  const [selectedWalletRule, setSelectedWalletRule] = useState<WalletRuleProps | null>(null);
   const { GetData } = useCallApi();
 
   const handleAddDialog = useCallback((show: boolean) => {
     setShowAddDialog(show);
   }, []);
 
-  const handleEditDialog = useCallback((show: boolean, selected_walletRule: string | null) => {
-    setShowEditDialog(show);
-    setSelectedWalletRule(show ? selected_walletRule : null);
-  }, []);
+  const handleEditDialog = useCallback(
+    (show: boolean, selected_walletRule: WalletRuleProps | null) => {
+      setShowEditDialog(show);
+      setSelectedWalletRule(show ? selected_walletRule : null);
+    },
+    []
+  );
 
-  const handleDeleteDialog = useCallback((show: boolean, selected_walletRule: string | null) => {
-    setShowDeleteDialog(show);
-    setSelectedWalletRule(show ? selected_walletRule : null);
-  }, []);
+  const handleDeleteDialog = useCallback(
+    (show: boolean, selected_walletRule: WalletRuleProps | null) => {
+      setShowDeleteDialog(show);
+      setSelectedWalletRule(show ? selected_walletRule : null);
+    },
+    []
+  );
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
@@ -142,13 +154,13 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
             <>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleEditDialog(true, row.ID)}
+                onClick={() => handleEditDialog(true, row)}
               >
                 <KeenIcon icon="notepad-edit" />
               </button>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleDeleteDialog(true, row.ID)}
+                onClick={() => handleDeleteDialog(true, row)}
               >
                 <KeenIcon icon="trash" />
               </button>
@@ -194,7 +206,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
         handleEditDialog,
         showDeleteDialog,
         handleDeleteDialog,
-        selectedWalletRule,
+        selectedWalletRule: selectedWalletRule,
         getWalletRuleLists
       }}
     >