Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

src/pages/master/wallet/Types.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import { toast } from 'sonner';
+
+export interface WalletProps {
+  id: string;
+  name: string;
+  description: string;
+  id_currency: string;
+  status: string;
+  group: WalletGroupProps[];
+}
+
+export interface WalletGroupProps {
+  id: string;
+  name: string;
+  description: string;
+  status: string;
+}
+
+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;
+};

src/pages/master/wallet/blocks/AddDialog.tsx

@@ -24,21 +24,7 @@ import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { RefreshCw } from 'lucide-react';
-
+import { CurrencyProps, GroupProps, initialStateWallet, validateFormsWallet } from '../Types';
-interface CurrencyProps {
-  ID: string;
-  code: string;
-  name: string;
-  prefix: string;
-  status: string;
-}
-
-interface GroupProps {
-  id: string;
-  name: string;
-  description: string;
-  status: string;
-}
 
 const API_URL_WALLET = apiConfig.service_wallet;
 const API_URL_MASTER_DATA = apiConfig.service_master_data;
@@ -47,48 +33,34 @@ const AddDialog = () => {
   const { showAddDialog, handleAddDialog, selectedWallet } = useManageWalletContext();
   const { GetData, PostData } = useCallApi();
   const { reload } = useDataGrid();
-  const [alert, setAlert] = useState({
+  const [errors, setErrors] = useState<Record<string, string>>({});
-    show: false,
+  const [formField, setFormField] = useState(initialStateWallet);
-    message: ''
-  });
-  const initialState: {
-    name: string;
-    description: string;
-    status: string;
-    group: string[];
-    id_currency: string;
-  } = {
-    name: '',
-    description: '',
-    status: '',
-    group: [],
-    id_currency: ''
-  };
-  const [formField, setFormField] = useState(initialState);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
   const [groups, setGroups] = useState<GroupProps[]>([]);
 
   const resetForm = () => {
-    setFormField(initialState);
+    setFormField(initialStateWallet);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   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]
         };
       }
     });
@@ -115,8 +87,7 @@ const AddDialog = () => {
 
           doSaveLogActivity(createActivity);
         } else {
-          toast.error('Failed Create Wallet');
+          toast.error(response?.message);
-          setAlert({ show: true, message: response?.message });
         }
       } catch (error) {
         toast.error('Something went wrong, please try again.');
@@ -130,20 +101,11 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (
+    if (!validateFormsWallet(formField, setErrors, 'create')) {
-      formField.name.trim() === '' ||
-      formField.description.trim() === '' ||
-      formField.status.trim() === '' ||
-      formField.group.length === 0 ||
-      formField.id_currency.trim() === ''
-    ) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
-
+    console.log(formField);
-    // console.log(formField);
     doCreateWallet(e);
-    setAlert({ show: false, message: '' });
   };
 
   const getCurrencyLists = async (sorting: any) => {
@@ -155,7 +117,6 @@ const AddDialog = () => {
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
       });
-      // console.log('Currency: ', response?.data);
       setCurrencies(response?.data.list);
     } catch (error) {
       console.error('Error fetching currency', error);
@@ -171,13 +132,17 @@ const AddDialog = () => {
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
       });
-      // console.log('Group: ', response?.data);
       setGroups(response?.data.list);
     } catch (error) {
       console.error('Error fetching group', error);
     }
   };
 
+  const selectedGroups = groups
+    .filter((g) => formField.group?.includes(g.id))
+    .map((g) => g.name)
+    .join(', ');
+
   useEffect(() => {
     getCurrencyLists([{ id: 'name', desc: false }]);
     getGroupLists([{ id: 'name', desc: false }]);
@@ -191,19 +156,13 @@ 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>
         </DialogHeader>
         <DialogBody className="scrollable">
           <div className="flex flex-col">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-
             <form onSubmit={handleSubmit}>
               <div className="card-body grid gap-5">
                 <div className="w-full">
@@ -211,12 +170,21 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Wallet Name<span className="text-red-500">*</span>
                     </label>
+                    <div className="w-full">
                       <Input
+                        className={errors.name ? 'border-red-500' : ''}
                         type="text"
                         value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                        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>
 
@@ -225,12 +193,21 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Description<span className="text-red-500">*</span>
                     </label>
+                    <div className="w-full">
                       <Input
+                        className={errors.description ? 'border-red-500' : ''}
                         type="text"
                         value={formField.description}
-                      onChange={(e) => setFormField({ ...formField, description: e.target.value })}
+                        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>
 
@@ -239,11 +216,15 @@ const AddDialog = () => {
                     <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 })}
+                        onValueChange={(value) => {
+                          setFormField({ ...formField, status: value });
+                          setErrors({ ...errors, status: '' });
+                        }}
                       >
-                      <SelectTrigger>
+                        <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
                           <SelectValue placeholder="Select Status" />
                         </SelectTrigger>
                         <SelectContent>
@@ -251,6 +232,10 @@ const AddDialog = () => {
                           <SelectItem value="N">Inactive</SelectItem>
                         </SelectContent>
                       </Select>
+                      {errors.status && (
+                        <div className="text-red-500 text-xs mt-1">{errors.status}</div>
+                      )}
+                    </div>
                   </div>
                 </div>
 
@@ -259,11 +244,15 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Currency<span className="text-red-500">*</span>
                     </label>
+                    <div className="w-full">
                       <Select
                         value={formField.id_currency}
-                      onValueChange={(value) => setFormField({ ...formField, id_currency: value })}
+                        onValueChange={(value) => {
+                          setFormField({ ...formField, id_currency: value });
+                          setErrors({ ...errors, id_currency: '' });
+                        }}
                       >
-                      <SelectTrigger>
+                        <SelectTrigger className={errors.id_currency ? 'border-red-500' : ''}>
                           <SelectValue placeholder="Select Currency Type" />
                         </SelectTrigger>
                         <SelectContent>
@@ -274,6 +263,10 @@ const AddDialog = () => {
                           ))}
                         </SelectContent>
                       </Select>
+                      {errors.id_currency && (
+                        <div className="text-red-500 text-xs mt-1">{errors.id_currency}</div>
+                      )}
+                    </div>
                   </div>
                 </div>
 
@@ -282,20 +275,40 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Groups<span className="text-red-500">*</span>
                     </label>
-                    <div className="flex flex-wrap gap-3">
+                    <div className="w-full">
-                      {groups.map((group) => (
+                      <div className="relative w-full">
-                        <label key={group.id} className="inline-flex items-center">
+                        <Input
-                          <input
+                          type="text"
-                            type="checkbox"
+                          placeholder="No groups selected"
-                            className="h-4 w-4"
+                          value={selectedGroups || ''}
-                            checked={formField.group.includes(group.id)}
+                          readOnly
-                            onChange={() => handleGroupChange(group.id)}
+                          className={`bg-gray-100 mb-2 ${errors.group ? 'border-red-500' : ''}`}
                         />
-                          <span className="ml-2">{group.name}</span>
+                        <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>
                 </div>
 
                 <div className="flex justify-end gap-5">

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';
-
+import { CurrencyProps, GroupProps, initialStateWallet, validateFormsWallet } from '../Types';
-interface CurrencyProps {
-  ID: string;
-  code: string;
-  name: string;
-  prefix: string;
-  status: string;
-}
-
-interface GroupProps {
-  id: string;
-  name: string;
-  description: string;
-  status: string;
-}
 
 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({
+  const [errors, setErrors] = useState<Record<string, string>>({});
-    show: false,
+  const [formField, setFormField] = useState(initialStateWallet);
-    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 [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
   const [groups, setGroups] = useState<GroupProps[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
-    setFormField(initialState);
+    setFormField(initialStateWallet);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const doUpdateWallet = useCallback(
@@ -98,8 +68,7 @@ const EditDialog = () => {
 
           doSaveLogActivity(createActivity);
         } else {
-          toast.error('Failed Update Wallet');
+          toast.error(response?.message);
-          setAlert({ show: true, message: 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,41 +202,63 @@ 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>
+                      <div className="w-full">
                         <Input
+                          className={errors.name ? 'border-red-500' : ''}
                           type="text"
                           value={formField.name}
-                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                          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>
+                      <div className="w-full">
                         <Input
+                          className={errors.description ? 'border-red-500' : ''}
                           type="text"
                           value={formField.description}
-                        onChange={(e) =>
+                          onChange={(e) => {
-                          setFormField({ ...formField, description: e.target.value })
+                            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>
+                      <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 })}
+                          onValueChange={(value) => {
+                            setFormField({ ...formField, status: value });
+                            setErrors({ ...errors, status: '' });
+                          }}
                         >
-                        <SelectTrigger>
+                          <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
                             <SelectValue placeholder="Select Status" />
                           </SelectTrigger>
                           <SelectContent>
@@ -287,6 +266,10 @@ const EditDialog = () => {
                             <SelectItem value="N">Inactive</SelectItem>
                           </SelectContent>
                         </Select>
+                        {errors.status && (
+                          <div className="text-red-500 text-xs mt-1">{errors.status}</div>
+                        )}
+                      </div>
                     </div>
                   </div>
 

src/pages/master/wallet/hooks/ManageWalletContext.tsx

@@ -5,15 +5,7 @@ import { ColumnDef } from '@tanstack/react-table';
 import React, { createContext, useCallback, useMemo, useState } from 'react';
 import { Toaster } from 'sonner';
 import ListToolbar from '../blocks/ListToolbar';
-
+import { WalletProps } from '../Types';
-interface WalletProps {
-  id: string;
-  name: string;
-  status: string;
-  description: string;
-  group: string[];
-  currency_id: string;
-}
 
 interface ContextProps {
   wallet: WalletProps[];
@@ -146,7 +138,10 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
   const getWalletLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      filter = filter.length == 0 ? {} : { 'wallets.name': { like: `%${filter[0].value?.toLowerCase()}%` } };
+      filter =
+        filter.length == 0
+          ? {}
+          : { 'wallets.name': { like: `%${filter[0].value?.toLowerCase()}%` } };
 
       const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, {
         limit,

src/pages/master/walletRule/Types.ts

@@ -0,0 +1,81 @@
+import { toast } from 'sonner';
+
+export interface WalletRuleProps {
+  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;
+}
+
+export const initialStateWalletRule: {
+  id_wallet: string;
+  id_group: string;
+  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: '',
+  id_group: '',
+  max_transaction_per_day: null,
+  balance_minimum: null,
+  balance_maximum: null,
+  credit_limit: null,
+  monthly_limit: null,
+  status: ''
+};
+
+export interface GroupProps {
+  ID: string;
+  is_bank: string;
+  name: string;
+  status: string;
+}
+
+export interface WalletProps {
+  ID: string;
+  name: string;
+  id_currency: string;
+  status: string;
+}
+
+export const validateFormsWalletRule = (
+  formField: typeof initialStateWalletRule,
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>
+) => {
+  const requiredFields = [
+    { key: 'id_wallet', label: 'Wallet' },
+    { key: 'id_group', label: 'Group' },
+    { key: 'max_transaction_per_day', label: 'Max Transaction Per Day' },
+    { key: 'balance_minimum', label: 'Balance Minimum' },
+    { key: 'balance_maximum', label: 'Balance Maximum' },
+    { key: 'credit_limit', label: 'Credit Limit' },
+    { key: 'monthly_limit', label: 'Monthly Limit' },
+    { key: 'status', label: 'Status' }
+  ];
+
+  const newErrors: Record<string, string> = {};
+  let isValid = true;
+
+  requiredFields.forEach(({ key, label }) => {
+    if (
+      formField[key as keyof typeof formField] === '' ||
+      formField[key as keyof typeof formField] === null ||
+      formField[key as keyof typeof formField] === undefined
+    ) {
+      newErrors[key] = `${label} is required`;
+      toast.error(`${label} is required`);
+      isValid = false;
+    }
+  });
+
+  setErrors(newErrors);
+  return isValid;
+};

src/pages/master/walletRule/blocks/AddDialog.tsx

@@ -33,28 +33,8 @@ import {
 import { NumericFormat } from 'react-number-format';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { RefreshCw } from 'lucide-react';
-
+import { initialStateWalletRule, validateFormsWalletRule } from '../Types';
-interface GroupProps {
+import { WalletProps } from '../../wallet/Types';
-  ID: string;
-  is_bank: string;
-  name: string;
-  status: string;
-}
-
-interface WalletGroupProps {
-  id: string;
-  name: string;
-  description: string;
-  status: string;
-}
-
-interface WalletProps {
-  id: string;
-  name: string;
-  id_currency: string;
-  status: string;
-  group: WalletGroupProps[];
-}
 
 const API_URL_WALLET = apiConfig.service_wallet;
 const API_URL_MASTERDATA = apiConfig.service_master_data;
@@ -63,37 +43,14 @@ const AddDialog = () => {
   const { showAddDialog, handleAddDialog, selectedWalletRule } = useManageWalletRuleContext();
   const { reload } = useDataGrid();
   const { PostData, GetData } = useCallApi();
-  const [open, setOpen] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [alert, setAlert] = useState({
+  const [formField, setFormField] = useState(initialStateWalletRule);
-    show: false,
-    message: ''
-  });
-  const initialState: {
-    id_wallet: string;
-    id_group: string;
-    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: '',
-    id_group: '',
-    max_transaction_per_day: null,
-    balance_minimum: null,
-    balance_maximum: null,
-    credit_limit: null,
-    monthly_limit: null,
-    status: ''
-  };
-  const [formField, setFormField] = useState(initialState);
   const [wallets, setWallets] = useState<WalletProps[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
-    setFormField(initialState);
+    setFormField(initialStateWalletRule);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const doCreateWalletRule = useCallback(
@@ -117,8 +74,7 @@ const AddDialog = () => {
 
           doSaveLogActivity(createActivity);
         } else {
-          toast.error('Failed Create Wallet Rule');
+          toast.error(response?.message);
-          setAlert({ show: true, message: response?.message });
         }
       } catch (error) {
         toast.error('Something went wrong, please try again.');
@@ -132,23 +88,11 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (
+    if (!validateFormsWalletRule(formField, setErrors)) {
-      formField.id_group.trim() === '' ||
-      formField.status.trim() === '' ||
-      formField.id_wallet.trim() === '' ||
-      formField.max_transaction_per_day === null ||
-      formField.balance_minimum === null ||
-      formField.balance_maximum === null ||
-      formField.credit_limit === null ||
-      formField.monthly_limit === null
-    ) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
-    console.log(formField);
     doCreateWalletRule(e);
-    setAlert({ show: false, message: '' });
   };
 
   const getWalletLists = async (sorting: any) => {
@@ -160,8 +104,6 @@ const AddDialog = () => {
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
       });
-
-      // console.log('WALLET: ', response?.data);
       setWallets(response?.data.list);
     } catch (error) {
       console.error('Error fetching wallet', error);
@@ -190,12 +132,6 @@ const AddDialog = () => {
         </DialogHeader>
         <DialogBody className="scrollable">
           <div className="flex flex-col">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-
             <form onSubmit={handleSubmit}>
               <div className="card-body grid gap-5">
                 <div className="w-full">
@@ -203,13 +139,15 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Wallet<span className="text-red-500">*</span>
                     </label>
+                    <div className="w-full">
                       <Select
                         value={formField.id_wallet}
-                      onValueChange={(value) =>
+                        onValueChange={(value) => {
-                        setFormField({ ...formField, id_wallet: value, id_group: '' })
+                          setFormField({ ...formField, id_wallet: value, id_group: '' });
-                      }
+                          setErrors({ ...errors, id_group: '' });
+                        }}
                       >
-                      <SelectTrigger>
+                        <SelectTrigger className={errors.id_wallet ? 'border-red-500' : ''}>
                           <SelectValue placeholder="Select Wallet Type" />
                         </SelectTrigger>
                         <SelectContent>
@@ -220,6 +158,10 @@ const AddDialog = () => {
                           ))}
                         </SelectContent>
                       </Select>
+                      {errors.id_wallet && (
+                        <div className="text-red-500 text-xs mt-1">{errors.id_wallet}</div>
+                      )}
+                    </div>
                   </div>
                 </div>
 
@@ -228,12 +170,16 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Group<span className="text-red-500">*</span>
                     </label>
+                    <div className="w-full">
                       <Select
                         value={formField.id_group}
-                      onValueChange={(value) => setFormField({ ...formField, id_group: value })}
+                        onValueChange={(value) => {
+                          setFormField({ ...formField, id_group: value });
+                          setErrors({ ...errors, id_group: '' });
+                        }}
                         disabled={filteredGroups.length === 0}
                       >
-                      <SelectTrigger>
+                        <SelectTrigger className={errors.id_group ? 'border-red-500' : ''}>
                           <SelectValue placeholder="Select Group Type" />
                         </SelectTrigger>
                         <SelectContent>
@@ -248,6 +194,10 @@ const AddDialog = () => {
                           )}
                         </SelectContent>
                       </Select>
+                      {errors.id_group && (
+                        <div className="text-red-500 text-xs mt-1">{errors.id_group}</div>
+                      )}
+                    </div>
                   </div>
                 </div>
 
@@ -256,9 +206,10 @@ 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>
+                    <div className="w-full">
                       <NumericFormat
-                      className="input"
+                        className={`input ${errors.max_transaction_per_day ? 'border-red-500' : ''}`}
-                      value={formField.max_transaction_per_day ?? ''}
+                        value={formField.max_transaction_per_day ?? null}
                         thousandSeparator="."
                         decimalSeparator=","
                         allowNegative={false}
@@ -268,9 +219,16 @@ const AddDialog = () => {
                             max_transaction_per_day:
                               values.floatValue !== undefined ? values.floatValue : ''
                           }));
+                          setErrors({ ...errors, max_transaction_per_day: '' });
                         }}
                         placeholder="Enter Max Transaction Per Day"
                       />
+                      {errors.max_transaction_per_day && (
+                        <div className="text-red-500 text-xs mt-1">
+                          {errors.max_transaction_per_day}
+                        </div>
+                      )}
+                    </div>
                   </div>
                 </div>
 
@@ -279,8 +237,9 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Balance Minimum<span className="text-red-500">*</span>
                     </label>
+                    <div className="w-full">
                       <NumericFormat
-                      className="input"
+                        className={`input ${errors.balance_minimum ? 'border-red-500' : ''}`}
                         value={formField.balance_minimum ?? ''}
                         thousandSeparator="."
                         decimalSeparator=","
@@ -288,11 +247,17 @@ const AddDialog = () => {
                         onValueChange={(values) => {
                           setFormField((prev) => ({
                             ...prev,
-                          balance_minimum: values.floatValue !== undefined ? values.floatValue : ''
+                            balance_minimum:
+                              values.floatValue !== undefined ? values.floatValue : ''
                           }));
+                          setErrors({ ...errors, balance_minimum: '' });
                         }}
                         placeholder="Enter Balance Minimum"
                       />
+                      {errors.balance_minimum && (
+                        <div className="text-red-500 text-xs mt-1">{errors.balance_minimum}</div>
+                      )}
+                    </div>
                   </div>
                 </div>
 
@@ -301,8 +266,9 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Balance Maximum<span className="text-red-500">*</span>
                     </label>
+                    <div className="w-full">
                       <NumericFormat
-                      className="input"
+                        className={`input ${errors.balance_maximum ? 'border-red-500' : ''}`}
                         value={formField.balance_maximum ?? ''}
                         thousandSeparator="."
                         decimalSeparator=","
@@ -310,11 +276,17 @@ const AddDialog = () => {
                         onValueChange={(values) => {
                           setFormField((prev) => ({
                             ...prev,
-                          balance_maximum: values.floatValue !== undefined ? values.floatValue : ''
+                            balance_maximum:
+                              values.floatValue !== undefined ? values.floatValue : ''
                           }));
+                          setErrors({ ...errors, balance_maximum: '' });
                         }}
                         placeholder="Enter Balance Maximum"
                       />
+                      {errors.balance_maximum && (
+                        <div className="text-red-500 text-xs mt-1">{errors.balance_maximum}</div>
+                      )}
+                    </div>
                   </div>
                 </div>
 
@@ -323,8 +295,9 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Credit Limit<span className="text-red-500">*</span>
                     </label>
+                    <div className="w-full">
                       <NumericFormat
-                      className="input"
+                        className={`input ${errors.credit_limit ? 'border-red-500' : ''}`}
                         value={formField.credit_limit ?? ''}
                         thousandSeparator="."
                         decimalSeparator=","
@@ -334,9 +307,14 @@ const AddDialog = () => {
                             ...prev,
                             credit_limit: values.floatValue !== undefined ? values.floatValue : ''
                           }));
+                          setErrors({ ...errors, credit_limit: '' });
                         }}
                         placeholder="Enter Credit Limit"
                       />
+                      {errors.credit_limit && (
+                        <div className="text-red-500 text-xs mt-1">{errors.credit_limit}</div>
+                      )}
+                    </div>
                   </div>
                 </div>
 
@@ -345,8 +323,9 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Monthly Limit<span className="text-red-500">*</span>
                     </label>
+                    <div className="w-full">
                       <NumericFormat
-                      className="input"
+                        className={`input ${errors.monthly_limit ? 'border-red-500' : ''}`}
                         value={formField.monthly_limit ?? ''}
                         thousandSeparator="."
                         decimalSeparator=","
@@ -356,9 +335,14 @@ const AddDialog = () => {
                             ...prev,
                             monthly_limit: values.floatValue !== undefined ? values.floatValue : ''
                           }));
+                          setErrors({ ...errors, monthly_limit: '' });
                         }}
                         placeholder="Enter Monthly Limit"
                       />
+                      {errors.monthly_limit && (
+                        <div className="text-red-500 text-xs mt-1">{errors.monthly_limit}</div>
+                      )}
+                    </div>
                   </div>
                 </div>
 
@@ -367,11 +351,15 @@ const AddDialog = () => {
                     <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 })}
+                        onValueChange={(value) => {
+                          setFormField({ ...formField, status: value });
+                          setErrors({ ...errors, status: '' });
+                        }}
                       >
-                      <SelectTrigger>
+                        <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
                           <SelectValue placeholder="Select Status" />
                         </SelectTrigger>
                         <SelectContent>
@@ -379,6 +367,10 @@ const AddDialog = () => {
                           <SelectItem value="N">Inactive</SelectItem>
                         </SelectContent>
                       </Select>
+                      {errors.status && (
+                        <div className="text-red-500 text-xs mt-1">{errors.status}</div>
+                      )}
+                    </div>
                   </div>
                 </div>
 

src/pages/master/walletRule/blocks/EditDialog.tsx

@@ -33,20 +33,7 @@ import { Button } from '@/components/ui/button';
 import { NumericFormat } from 'react-number-format';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { RefreshCw } from 'lucide-react';
-
+import { GroupProps, initialStateWalletRule, validateFormsWalletRule, WalletProps } from '../Types';
-interface GroupProps {
-  ID: string;
-  is_bank: string;
-  name: string;
-  status: string;
-}
-
-interface WalletProps {
-  ID: string;
-  name: string;
-  id_currency: string;
-  status: string;
-}
 
 const API_URL_WALLET = apiConfig.service_wallet;
 
@@ -54,37 +41,15 @@ const EditDialog = () => {
   const { showEditDialog, handleEditDialog, selectedWalletRule } = useManageWalletRuleContext();
   const { GetData, PutData } = useCallApi();
   const { reload } = useDataGrid();
-  const [alert, setAlert] = useState({
+  const [errors, setErrors] = useState<Record<string, string>>({});
-    show: false,
+  const [formField, setFormField] = useState(initialStateWalletRule);
-    message: ''
-  });
-  const initialState: {
-    id_wallet: string;
-    id_group: string;
-    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: '',
-    id_group: '',
-    max_transaction_per_day: null,
-    balance_minimum: null,
-    balance_maximum: null,
-    credit_limit: null,
-    monthly_limit: null,
-    status: ''
-  };
-  const [formField, setFormField] = useState(initialState);
   const [groups, setGroups] = useState<GroupProps[]>([]);
   const [wallets, setWallets] = useState<WalletProps[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
-    setFormField(initialState);
+    setFormField(initialStateWalletRule);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const doUpdateWalletRule = useCallback(
@@ -111,8 +76,7 @@ const EditDialog = () => {
 
           doSaveLogActivity(createActivity);
         } else {
-          toast.error('Failed Update Wallet Rule');
+          toast.error(response?.message);
-          setAlert({ show: true, message: response?.message });
         }
       } catch (error) {
         toast.error('Something went wrong, please try again');
@@ -126,14 +90,11 @@ const EditDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (formField.id_group.trim() === '' || formField.status.trim() === '') {
+    if (!validateFormsWalletRule(formField, setErrors)) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
 
-    // console.log(formField);
     doUpdateWalletRule(e);
-    setAlert({ show: false, message: '' });
   };
 
   const getGroupLists = async (sorting: any) => {
@@ -146,7 +107,6 @@ const EditDialog = () => {
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
       });
 
-      // console.log('GROUPS: ', response?.data);
       setGroups(response?.data.list);
     } catch (error) {
       console.error('Error fetching groups', error);
@@ -163,7 +123,6 @@ const EditDialog = () => {
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
       });
 
-      // console.log('WALLET: ', response?.data);
       setWallets(response?.data.list);
     } catch (error) {
       console.error('Error fetching wallet', error);
@@ -215,7 +174,7 @@ const EditDialog = () => {
       }));
     }
   }, [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">
@@ -225,12 +184,6 @@ const EditDialog = () => {
         </DialogHeader>
         <DialogBody className="scrollable">
           <div className="flex flex-col">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-
             <form onSubmit={handleSubmit}>
               <div className="card-body grid gap-5">
                 <div className="w-full">

src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx

@@ -5,18 +5,7 @@ import { useCallApi } from '@/hooks';
 import { ColumnDef } from '@tanstack/react-table';
 import React, { createContext, useCallback, useMemo, useState } from 'react';
 import ListToolbar from '../blocks/ListToolbar';
-
+import { WalletRuleProps } from '../Types';
-interface WalletRuleProps {
-  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;
-}
 
 interface ContextProps {
   walletRules: WalletRuleProps[];

src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx

@@ -137,7 +137,6 @@ const TransactionDisbursement = () => {
       });
       return;
     }
-    console.log(form);
     setAlert({ show: false, message: '' });
     setShowConfirmation(true);
   };