diff --git a/src/pages/master/products/blocks/AddDialog.tsx b/src/pages/master/products/blocks/AddDialog.tsx
index 0690b4b..0a5e192 100644
--- a/src/pages/master/products/blocks/AddDialog.tsx
+++ b/src/pages/master/products/blocks/AddDialog.tsx
@@ -130,7 +130,7 @@ const AddDialog = () => {
     }
 
     doCreateProduct(e);
-    console.log(formField);
+    // console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
diff --git a/src/pages/master/products/blocks/EditDialog.tsx b/src/pages/master/products/blocks/EditDialog.tsx
index 66c809d..fa670fe 100644
--- a/src/pages/master/products/blocks/EditDialog.tsx
+++ b/src/pages/master/products/blocks/EditDialog.tsx
@@ -109,7 +109,7 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
-    console.log(response);
+    // console.log(response);
 
     if (response?.status) {
       setFormField((prev) => ({
diff --git a/src/pages/master/reward/blocks/AddDialog.tsx b/src/pages/master/reward/blocks/AddDialog.tsx
index 40df444..9f44be0 100644
--- a/src/pages/master/reward/blocks/AddDialog.tsx
+++ b/src/pages/master/reward/blocks/AddDialog.tsx
@@ -14,6 +14,7 @@ import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
 import { getAuth } from '@/auth';
 import { useCallApi } from '@/hooks';
+import { NumericFormat } from 'react-number-format';
 import { useManageRewardContext } from '../hooks/useManageRewardContext';
 import {
   Select,
@@ -57,7 +58,7 @@ const AddDialog = () => {
   const doCreateReward = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      console.log('Data yang akan dikirim:', formField);
+      // console.log('Data yang akan dikirim:', formField);
       const response = await PostData(`${API_URL}/reward/create`, formField);
 
       if (response?.status) {
@@ -91,20 +92,15 @@ const AddDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
-  const handleReset = () => {
-    resetForm();
-    setAlert({ show: false, message: '' });
-  };
-
   useEffect(() => {
     if (showAddDialog) {
-      setFormField({
-        ...formField,
+      setFormField((prev) => ({
+        ...prev,
         created_by: parsedUser?.username,
         created_at: formattedTime
-      });
+      }));
     }
-  }, [formattedTime]);
+  }, [showAddDialog, parsedUser?.username, formattedTime]);
 
   useEffect(() => {
     if (showAddDialog === false) {
@@ -159,19 +155,19 @@ const AddDialog = () => {
                     Amount<span className="text-red-500">*</span>
                   </label>
 
-                  <Input
+                  <NumericFormat
                     className="input col-span-6"
-                    type="number"
-                    min={0}
-                    step={0.01}
                     value={formField.amount}
-                    onChange={(e) => {
-                      const value = parseFloat(e.target.value);
-                      setFormField({
-                        ...formField,
-                        amount: isNaN(value) ? 0 : value
-                      });
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        amount: values.floatValue || 0
+                      }));
                     }}
+                    placeholder="Enter Amount"
                   />
                 </div>
                 <div className="grid grid-cols-8 gap-2 w-full items-center">
diff --git a/src/pages/master/reward/blocks/DeleteDialog.tsx b/src/pages/master/reward/blocks/DeleteDialog.tsx
index dd7639c..70aaf5e 100644
--- a/src/pages/master/reward/blocks/DeleteDialog.tsx
+++ b/src/pages/master/reward/blocks/DeleteDialog.tsx
@@ -25,13 +25,16 @@ const DeleteDialog = () => {
     message: ''
   });
 
+  // console.log('ini data :', selectedReward);
+
   const doDeleteReward = useCallback(async () => {
     if (!selectedReward) {
       toast.error('No Reward selected');
       return;
     }
-    const response = await DeleteData(`${API_URL}/reward/delete/${selectedReward}`, {
-      id: selectedReward
+    // console.log('Ini datanya:', selectedReward);
+    const response = await DeleteData(`${API_URL}/reward/delete/${selectedReward?.id}/true`, {
+      id: selectedReward.id
     });
 
     if (response?.status) {
diff --git a/src/pages/master/reward/blocks/EditDialog.tsx b/src/pages/master/reward/blocks/EditDialog.tsx
index cb3695a..2dc8c83 100644
--- a/src/pages/master/reward/blocks/EditDialog.tsx
+++ b/src/pages/master/reward/blocks/EditDialog.tsx
@@ -14,6 +14,7 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { NumericFormat } from 'react-number-format';
 import {
   Select,
   SelectContent,
@@ -58,7 +59,8 @@ const EditDialog = () => {
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
 
-      const response = await PutData(`${API_URL}/reward/update/${selectedReward}`, formField);
+      // console.log('Ini datanya:', selectedReward);
+      const response = await PutData(`${API_URL}/reward/update/${selectedReward?.id}`, formField);
 
       if (response?.status) {
         resetForm();
@@ -74,16 +76,17 @@ const EditDialog = () => {
   );
 
   const doFetchData = useCallback(async (id: string) => {
+    // console.log('Ini datanya:', id);
     const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
-    console.log('API Response:', response);
+    // console.log('API Response:', response);
 
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
-        name: response?.data.name,
-        type: response?.data.type,
-        amount: response?.data.amount,
-        status: response?.data.status
+        name: response.data.name,
+        type: response.data.type,
+        amount: response.data.amount,
+        status: response.data.status
       }));
     }
   }, []);
@@ -107,21 +110,20 @@ const EditDialog = () => {
   // };
 
   useEffect(() => {
-    // console.log('Selected Reward:', selectedReward);
     if (selectedReward) {
-      doFetchData(selectedReward);
+      doFetchData(selectedReward.id.toString());
     }
   }, [selectedReward]);
 
   useEffect(() => {
-    if (showEditDialog) {
-      setFormField({
-        ...formField,
+    if (showEditDialog && selectedReward) {
+      setFormField((prev) => ({
+        ...prev,
         updated_by: parsedUser.username,
         updated_at: formattedTime
-      });
+      }));
     }
-  }, [formattedTime]);
+  }, [showEditDialog, selectedReward]);
 
   useEffect(() => {
     if (showEditDialog === false) {
@@ -142,67 +144,71 @@ const EditDialog = () => {
 
             <form onSubmit={doUpdateReward}>
               <div className="card-body grid gap-5">
-                <div className="w-full">
-                  <label className="form-label">
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
                     Name<span className="text-red-500">*</span>
                   </label>
 
                   <Input
-                    className="input"
+                    className="input col-span-6"
                     type="text"
                     value={formField.name}
                     onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
                   />
                 </div>
-                <div className="w-full">
-                  <label className="form-label">
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
                     Type<span className="text-red-500">*</span>
                   </label>
 
                   <Input
-                    className="input"
+                    className="input col-span-6"
                     type="text"
                     value={formField.type}
                     onChange={(e) => setFormField({ ...formField, type: e.target.value })}
                   />
                 </div>
-                <div className="w-full">
-                  <label className="form-label">
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
                     Amount<span className="text-red-500">*</span>
                   </label>
 
-                  <Input
-                    className="input"
-                    type="number"
-                    min={0}
-                    step={0.01}
+                  <NumericFormat
+                    className="input col-span-6"
                     value={formField.amount}
-                    onChange={(e) => {
-                      const value = parseFloat(e.target.value);
-                      setFormField({
-                        ...formField,
-                        amount: isNaN(value) ? 0 : value
-                      });
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        amount: values.floatValue || 0
+                      }));
                     }}
+                    placeholder="Enter Amount"
                   />
                 </div>
-                <div className="w-full">
-                  <label className="form-label">
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
                     Status<span className="text-red-500">*</span>
                   </label>
 
-                  <Select
-                    value={formField.status}
-                    onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Select" defaultValue={formField.status} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="Y">Active</SelectItem>
-                      <SelectItem value="N">InActive</SelectItem>
-                    </SelectContent>
-                  </Select>
+                  <div className="col-span-6">
+                    <Select
+                      value={formField.status}
+                      onValueChange={(value) =>
+                        setFormField((prev) => ({ ...prev, status: value }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select" defaultValue={formField.status} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">InActive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
                 <div className="flex justify-end gap-5">
                   <Button type="button" variant="outline" onClick={resetForm}>
diff --git a/src/pages/master/reward/hooks/ManageRewardContext.tsx b/src/pages/master/reward/hooks/ManageRewardContext.tsx
index 0a62967..78eeb62 100644
--- a/src/pages/master/reward/hooks/ManageRewardContext.tsx
+++ b/src/pages/master/reward/hooks/ManageRewardContext.tsx
@@ -26,10 +26,10 @@ interface ContextProps {
   showAddDialog: boolean;
   handleAddDialog: (show: boolean) => void;
   showEditDialog: boolean;
-  handleEditDialog: (show: boolean, selected_reward: string | null) => void;
+  handleEditDialog: (show: boolean, selected_reward: Reward | null) => void;
   showDeleteDialog: boolean;
-  handleDeleteDialog: (show: boolean, selected_rewad: string | null) => void;
-  selectedReward: string | null;
+  handleDeleteDialog: (show: boolean, selected_rewad: Reward | null) => void;
+  selectedReward: Reward | null;
   reward: string | null;
 }
 
@@ -52,19 +52,19 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [selectedReward, setSelectedReward] = useState<string | null>(null);
+  const [selectedReward, setSelectedReward] = useState<Reward | null>(null);
   const { GetData } = useCallApi();
 
   const handleAddDialog = useCallback((show: boolean) => {
     setShowAddDialog(show);
   }, []);
 
-  const handleEditDialog = useCallback((show: boolean, selected_reward: string | null) => {
+  const handleEditDialog = useCallback((show: boolean, selected_reward: Reward | null) => {
     setShowEditDialog(show);
     setSelectedReward(show ? selected_reward : null);
   }, []);
 
-  const handleDeleteDialog = useCallback((show: boolean, selected_reward: string | null) => {
+  const handleDeleteDialog = useCallback((show: boolean, selected_reward: Reward | null) => {
     setShowDeleteDialog(show);
     setSelectedReward(show ? selected_reward : null);
   }, []);