fix alert empty validation on manage wallet rule

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[];