diff --git a/src/pages/master/wallet/blocks/AddDialog.tsx b/src/pages/master/wallet/blocks/AddDialog.tsx
index a88bb23..99341d0 100644
--- a/src/pages/master/wallet/blocks/AddDialog.tsx
+++ b/src/pages/master/wallet/blocks/AddDialog.tsx
@@ -46,19 +46,21 @@ const AddDialog = () => {
 
   const handleGroupChange = (groupId: string) => {
     setFormField((prevState) => {
-      const isSelected = prevState.group.includes(groupId);
+      const currentGroup = prevState.group ?? [];
+
+      const isSelected = currentGroup.includes(groupId);
 
       if (isSelected) {
         // Remove the group if already selected
         return {
           ...prevState,
-          group: prevState.group.filter((id) => id !== groupId)
+          group: currentGroup.filter((id) => id !== groupId)
         };
       } else {
         // Add the group if not selected
         return {
           ...prevState,
-          group: [...prevState.group, groupId]
+          group: [...currentGroup, groupId]
         };
       }
     });
@@ -99,11 +101,11 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (!validateFormsWallet(formField, setErrors)) {
+    if (!validateFormsWallet(formField, setErrors, 'create')) {
       return;
     }
     console.log(formField);
-    // doCreateWallet(e);
+    doCreateWallet(e);
   };
 
   const getCurrencyLists = async (sorting: any) => {
@@ -137,7 +139,7 @@ const AddDialog = () => {
   };
 
   const selectedGroups = groups
-    .filter((g) => formField.group.includes(g.id))
+    .filter((g) => formField.group?.includes(g.id))
     .map((g) => g.name)
     .join(', ');
 
@@ -154,7 +156,7 @@ const AddDialog = () => {
 
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
-      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
+      <DialogContent className="container-fixed max-w-[1000px] flex flex-col p-5 overflow-hidden">
         <DialogHeader>
           <DialogTitle>Wallet - Create</DialogTitle>
           <DialogDescription></DialogDescription>
@@ -168,18 +170,22 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Wallet Name<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className={errors.name ? 'border-red-500' : ''}
-                      type="text"
-                      value={formField.name}
-                      onChange={(e) => {
-                        setFormField({ ...formField, name: e.target.value });
-                        setErrors({ ...errors, name: '' });
-                      }}
-                      placeholder="Wallet Name"
-                    />
+                    <div className="w-full">
+                      <Input
+                        className={errors.name ? 'border-red-500' : ''}
+                        type="text"
+                        value={formField.name}
+                        onChange={(e) => {
+                          setFormField({ ...formField, name: e.target.value });
+                          setErrors({ ...errors, name: '' });
+                        }}
+                        placeholder="Wallet Name"
+                      />
+                      {errors.name && (
+                        <div className="text-red-500 text-xs mt-1">{errors.name}</div>
+                      )}
+                    </div>
                   </div>
-                  {errors.name && <div className="text-red-500 text-xs mt-1">{errors.name}</div>}
                 </div>
 
                 <div className="w-full">
@@ -187,20 +193,22 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Description<span className="text-red-500">*</span>
                     </label>
-                    <Input
-                      className={errors.description ? 'border-red-500' : ''}
-                      type="text"
-                      value={formField.description}
-                      onChange={(e) => {
-                        setFormField({ ...formField, description: e.target.value });
-                        setErrors({ ...errors, description: '' });
-                      }}
-                      placeholder="Description"
-                    />
+                    <div className="w-full">
+                      <Input
+                        className={errors.description ? 'border-red-500' : ''}
+                        type="text"
+                        value={formField.description}
+                        onChange={(e) => {
+                          setFormField({ ...formField, description: e.target.value });
+                          setErrors({ ...errors, description: '' });
+                        }}
+                        placeholder="Description"
+                      />
+                      {errors.description && (
+                        <div className="text-red-500 text-xs mt-1">{errors.description}</div>
+                      )}
+                    </div>
                   </div>
-                  {errors.description && (
-                    <div className="text-red-500 text-xs mt-1">{errors.description}</div>
-                  )}
                 </div>
 
                 <div className="w-full">
@@ -208,25 +216,27 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Status<span className="text-red-500">*</span>
                     </label>
-                    <Select
-                      value={formField.status}
-                      onValueChange={(value) => {
-                        setFormField({ ...formField, status: value });
-                        setErrors({ ...errors, status: '' });
-                      }}
-                    >
-                      <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
-                        <SelectValue placeholder="Select Status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Active</SelectItem>
-                        <SelectItem value="N">Inactive</SelectItem>
-                      </SelectContent>
-                    </Select>
+                    <div className="w-full">
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) => {
+                          setFormField({ ...formField, status: value });
+                          setErrors({ ...errors, status: '' });
+                        }}
+                      >
+                        <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
+                          <SelectValue placeholder="Select Status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      {errors.status && (
+                        <div className="text-red-500 text-xs mt-1">{errors.status}</div>
+                      )}
+                    </div>
                   </div>
-                  {errors.status && (
-                    <div className="text-red-500 text-xs mt-1">{errors.status}</div>
-                  )}
                 </div>
 
                 <div className="w-full">
@@ -234,28 +244,30 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Currency<span className="text-red-500">*</span>
                     </label>
-                    <Select
-                      value={formField.id_currency}
-                      onValueChange={(value) => {
-                        setFormField({ ...formField, id_currency: value });
-                        setErrors({ ...errors, id_currency: '' });
-                      }}
-                    >
-                      <SelectTrigger className={errors.id_currency ? 'border-red-500' : ''}>
-                        <SelectValue placeholder="Select Currency Type" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {currencies.map((currency) => (
-                          <SelectItem key={currency.ID} value={currency.ID}>
-                            {currency.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                    <div className="w-full">
+                      <Select
+                        value={formField.id_currency}
+                        onValueChange={(value) => {
+                          setFormField({ ...formField, id_currency: value });
+                          setErrors({ ...errors, id_currency: '' });
+                        }}
+                      >
+                        <SelectTrigger className={errors.id_currency ? 'border-red-500' : ''}>
+                          <SelectValue placeholder="Select Currency Type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {currencies.map((currency) => (
+                            <SelectItem key={currency.ID} value={currency.ID}>
+                              {currency.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      {errors.id_currency && (
+                        <div className="text-red-500 text-xs mt-1">{errors.id_currency}</div>
+                      )}
+                    </div>
                   </div>
-                  {errors.id_currency && (
-                    <div className="text-red-500 text-xs mt-1">{errors.id_currency}</div>
-                  )}
                 </div>
 
                 <div className="w-full">
@@ -263,36 +275,37 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Groups<span className="text-red-500">*</span>
                     </label>
-                    <div className="relative w-full">
-                      <Input
-                        type="text"
-                        placeholder="No groups selected"
-                        value={selectedGroups || ''}
-                        readOnly
-                        className="bg-gray-100 mb-2"
-                      />
-                      {errors.group && (
-                        <div className="text-red-500 text-xs mt-1">{errors.group}</div>
-                      )}
-
-                      <div className="border rounded-md p-3 max-h-48 overflow-y-auto">
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-                          {groups.map((group) => (
-                            <div key={group.id} className="flex items-center space-x-2">
-                              <Checkbox
-                                id={`group-${group.id}`}
-                                checked={formField.group.includes(group.id)}
-                                onCheckedChange={() => handleGroupChange(group.id)}
-                              />
-                              <label
-                                htmlFor={`group-${group.id}`}
-                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                              >
-                                {group.name}
-                              </label>
-                            </div>
-                          ))}
+                    <div className="w-full">
+                      <div className="relative w-full">
+                        <Input
+                          type="text"
+                          placeholder="No groups selected"
+                          value={selectedGroups || ''}
+                          readOnly
+                          className={`bg-gray-100 mb-2 ${errors.group ? 'border-red-500' : ''}`}
+                        />
+                        <div className="border rounded-md p-3 max-h-48 overflow-y-auto">
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                            {groups.map((group) => (
+                              <div key={group.id} className="flex items-center space-x-2">
+                                <Checkbox
+                                  id={`group-${group.id}`}
+                                  checked={formField.group?.includes(group.id)}
+                                  onCheckedChange={() => handleGroupChange(group.id)}
+                                />
+                                <label
+                                  htmlFor={`group-${group.id}`}
+                                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                >
+                                  {group.name}
+                                </label>
+                              </div>
+                            ))}
+                          </div>
                         </div>
+                        {errors.group && (
+                          <div className="text-red-500 text-xs mt-1">{errors.group}</div>
+                        )}
                       </div>
                     </div>
                   </div>
diff --git a/src/pages/master/wallet/blocks/EditDialog.tsx b/src/pages/master/wallet/blocks/EditDialog.tsx
index f7590ac..f7190b6 100644
--- a/src/pages/master/wallet/blocks/EditDialog.tsx
+++ b/src/pages/master/wallet/blocks/EditDialog.tsx
@@ -23,21 +23,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { RefreshCw } from 'lucide-react';
-
-interface CurrencyProps {
-  ID: string;
-  code: string;
-  name: string;
-  prefix: string;
-  status: string;
-}
-
-interface GroupProps {
-  id: string;
-  name: string;
-  description: string;
-  status: string;
-}
+import { CurrencyProps, GroupProps, initialStateWallet, validateFormsWallet } from './Types';
 
 const API_URL_WALLET = apiConfig.service_wallet;
 const API_URL_MASTER_DATA = apiConfig.service_master_data;
@@ -47,31 +33,15 @@ const EditDialog = () => {
   const { reload } = useDataGrid();
   const { GetData, PutData } = useCallApi();
   const [isLoading, setIsLoading] = useState(false);
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-  const initialState: {
-    name: string;
-    description: string;
-    status: string;
-    currency_id: string;
-    group: string[];
-  } = {
-    name: '',
-    description: '',
-    status: '',
-    currency_id: '',
-    group: []
-  };
-  const [formField, setFormField] = useState(initialState);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [formField, setFormField] = useState(initialStateWallet);
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
   const [groups, setGroups] = useState<GroupProps[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
-    setFormField(initialState);
-    setAlert({ show: false, message: '' });
+    setFormField(initialStateWallet);
+    setErrors({});
   };
 
   const doUpdateWallet = useCallback(
@@ -98,8 +68,7 @@ const EditDialog = () => {
 
           doSaveLogActivity(createActivity);
         } else {
-          toast.error('Failed Update Wallet');
-          setAlert({ show: true, message: response?.message });
+          toast.error(response?.message);
         }
       } catch (error) {
         toast.error('Something went wrong, please try again.');
@@ -119,9 +88,11 @@ const EditDialog = () => {
       description: formField.description,
       status: formField.status
     };
-    // console.log(payload);
+
+    if (!validateFormsWallet(payload, setErrors, 'update')) {
+      return;
+    }
     doUpdateWallet(payload);
-    setAlert({ show: false, message: '' });
   };
 
   const doFetchData = useCallback(async (id: string) => {
@@ -179,10 +150,10 @@ const EditDialog = () => {
     }
   };
 
-  const selectedCurrency = currencies.find((currency) => currency.ID === formField.currency_id);
+  const selectedCurrency = currencies.find((currency) => currency.ID === formField.id_currency);
 
   const selectedGroupNames = groups
-    .filter((g) => formField.group.includes(g.id))
+    .filter((g) => formField.group?.includes(g.id))
     .map((g) => g.name)
     .join(', ');
 
@@ -193,14 +164,6 @@ const EditDialog = () => {
 
   useEffect(() => {
     if (selectedWallet) {
-      // setFormField((prev) => ({
-      //   ...prev,
-      //   name: selectedWallet?.Wallet_name,
-      //   description: selectedWallet?.Wallet_description,
-      //   status: selectedWallet?.Wallet_status,
-      //   currency_id: selectedWallet?.Wallet_currency_id,
-      //   group: selectedWallet?.Wallet_group
-      // }));
       doFetchData(selectedWallet?.id);
     }
   }, [selectedWallet]);
@@ -220,12 +183,6 @@ const EditDialog = () => {
         </DialogHeader>
         <DialogBody className="scrollable">
           <div className="flex flex-col">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-
             {isLoading ? (
               <div className="flex flex-col items-center justify-center p-8">
                 <div className="animate-pulse flex space-x-4 w-full">
@@ -245,48 +202,74 @@ const EditDialog = () => {
                   <div className="w-full">
                     <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                       <label className="form-label flex items-center gap-1 max-w-56">
-                        Wallet Name
+                        Wallet Name<span className="text-red-500">*</span>
                       </label>
-                      <Input
-                        type="text"
-                        value={formField.name}
-                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                        placeholder="Wallet Name"
-                      />
+                      <div className="w-full">
+                        <Input
+                          className={errors.name ? 'border-red-500' : ''}
+                          type="text"
+                          value={formField.name}
+                          onChange={(e) => {
+                            setFormField({ ...formField, name: e.target.value });
+                            setErrors({ ...errors, name: '' });
+                          }}
+                          placeholder="Wallet Name"
+                        />
+                        {errors.name && (
+                          <div className="text-red-500 text-xs mt-1">{errors.name}</div>
+                        )}
+                      </div>
                     </div>
                   </div>
 
                   <div className="w-full">
                     <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                       <label className="form-label flex items-center gap-1 max-w-56">
-                        Description
+                        Description<span className="text-red-500">*</span>
                       </label>
-                      <Input
-                        type="text"
-                        value={formField.description}
-                        onChange={(e) =>
-                          setFormField({ ...formField, description: e.target.value })
-                        }
-                        placeholder="Description"
-                      />
+                      <div className="w-full">
+                        <Input
+                          className={errors.description ? 'border-red-500' : ''}
+                          type="text"
+                          value={formField.description}
+                          onChange={(e) => {
+                            setFormField({ ...formField, description: e.target.value });
+                            setErrors({ ...errors, description: '' });
+                          }}
+                          placeholder="Description"
+                        />
+                        {errors.description && (
+                          <div className="text-red-500 text-xs mt-1">{errors.description}</div>
+                        )}
+                      </div>
                     </div>
                   </div>
 
                   <div className="w-full">
                     <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">Status</label>
-                      <Select
-                        value={formField.status}
-                        onValueChange={(value) => setFormField({ ...formField, status: value })}
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select Status" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="Y">Active</SelectItem>
-                          <SelectItem value="N">Inactive</SelectItem>
-                        </SelectContent>
-                      </Select>
+                      <label className="form-label flex items-center gap-1 max-w-56">
+                        Status<span className="text-red-500">*</span>
+                      </label>
+                      <div className="w-full">
+                        <Select
+                          value={formField.status}
+                          onValueChange={(value) => {
+                            setFormField({ ...formField, status: value });
+                            setErrors({ ...errors, status: '' });
+                          }}
+                        >
+                          <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
+                            <SelectValue placeholder="Select Status" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="Y">Active</SelectItem>
+                            <SelectItem value="N">Inactive</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        {errors.status && (
+                          <div className="text-red-500 text-xs mt-1">{errors.status}</div>
+                        )}
+                      </div>
                     </div>
                   </div>
 
diff --git a/src/pages/master/wallet/blocks/Types.ts b/src/pages/master/wallet/blocks/Types.ts
new file mode 100644
index 0000000..58db1ed
--- /dev/null
+++ b/src/pages/master/wallet/blocks/Types.ts
@@ -0,0 +1,68 @@
+import React from 'react';
+import { toast } from 'sonner';
+
+export interface CurrencyProps {
+  ID: string;
+  code: string;
+  name: string;
+  prefix: string;
+  status: string;
+}
+
+export interface GroupProps {
+  id: string;
+  name: string;
+  description: string;
+  status: string;
+}
+
+export const initialStateWallet: {
+  name: string;
+  description: string;
+  status: string;
+  group?: string[];
+  id_currency?: string;
+} = {
+  name: '',
+  description: '',
+  status: '',
+  group: [],
+  id_currency: ''
+};
+
+export const validateFormsWallet = (
+  formField: typeof initialStateWallet,
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>,
+  mode: 'create' | 'update' = 'create' // default: create
+) => {
+  const requiredFields =
+    mode === 'create'
+      ? [
+          { key: 'name', label: 'Name' },
+          { key: 'description', label: 'Description' },
+          { key: 'status', label: 'Status' },
+          { key: 'group', label: 'Group' },
+          { key: 'id_currency', label: 'Currency' }
+        ]
+      : [
+          { key: 'name', label: 'Name' },
+          { key: 'description', label: 'Description' },
+          { key: 'status', label: 'Status' }
+        ];
+
+  const newErrors: Record<string, string> = {};
+  let isValid = true;
+
+  requiredFields.forEach(({ key, label }) => {
+    const value = formField[key as keyof typeof formField];
+
+    if (value === '' || value === null || value === undefined) {
+      newErrors[key] = `${label} is required`;
+      toast.error(`${label} is required`);
+      isValid = false;
+    }
+  });
+
+  setErrors(newErrors);
+  return isValid;
+};
diff --git a/src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx b/src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx
index 34d28da..b023836 100644
--- a/src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx
+++ b/src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx
@@ -137,7 +137,6 @@ const TransactionDisbursement = () => {
       });
       return;
     }
-    console.log(form);
     setAlert({ show: false, message: '' });
     setShowConfirmation(true);
   };