changing response on edit and add in mater data module

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

@@ -41,10 +41,30 @@ const AddDialog = () => {
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
   const [isSubmitting, setIsSubmitting] = useState(false);
-
+  const [errors, setErrors] = useState<Record<string, string>>({});
   const resetForm = () => {
     setFormField(initialState);
-    setAlert({ show: false, message: '' });
+    setErrors({});
+  };
+  const validateForm = () => {
+    const requiredFields = [{ key: 'name', label: 'Municipio Name' }];
+    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;
   };
 
   const doCreateMunicipio = useCallback(
@@ -82,16 +102,17 @@ const AddDialog = () => {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
-    if (formField.name.trim() === '') {
-      setAlert({ show: true, message: 'Please fill name field.' });
+    setIsSubmitting(true);
+    if(!validateForm()) {
+      setIsSubmitting(false);
       return;
     }
 
+
     doCreateMunicipio(e);
-    console.log(parsedUser.email);
-    console.log(formField);
-    setAlert({ show: false, message: '' });
+    // console.log(parsedUser.email);
+    // console.log(formField);
+    // setAlert({ show: false, message: '' });
   };
 
   const handleReset = () => {
@@ -133,21 +154,29 @@ const AddDialog = () => {
             <form onSubmit={handleSubmit}>
               <div className="card-body grid gap-5">
                 <div className="w-full">
-                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  <div className="flex items-baseline flex-wrap lg:flex-wrap gap-2.5 text-sm">
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Municipio Name<span className="text-red-500">*</span>
                     </label>
                     <Input
-                      className="input"
-                      type="text"
+                        className={`input ${errors.name ? 'border-red-500' : ''}`}
+                        type="text"
+                        autoComplete='off'
                       value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      onChange={({target})=>{
+                        setFormField((prev) => ({...prev,name:target.value}))
+                        if (target.value){
+                          setErrors((prev)=> ({...prev,name: ''}))
+                        }
+                      }
+                      }                      
                     />
+                    {errors.name && <span className="text-red-500">{errors.name}</span>}
                   </div>
                 </div>
 
                 <div className="flex justify-end pt-2.5 gap-5">
-                  <Button variant={'outline'} type="reset" onClick={handleReset}>
+                  <Button variant={'outline'} type="reset" onClick={resetForm}>
                     Reset
                   </Button>
                   <Button variant="default" type="submit" disabled={isSubmitting}>

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

@@ -44,9 +44,32 @@ const EditDialog = () => {
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
   const resetForm = () => {
     setFormField(initialState);
-    setAlert({ show: false, message: '' });
+    setErrors({});
+  };
+
+  const validateForm = () => {
+    const requiredFields = [{ key: 'name', label: 'Municipio Name' }];
+    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;
   };
 
   const doUpdateMunicipios = useCallback(
@@ -73,7 +96,7 @@ const EditDialog = () => {
 
           doSaveLogActivity(createActivity);
         } else {
-          toast.error('Failed update user');
+          toast.error('Failed update municipios');
           setAlert({ show: true, message: response?.message });
         }
       } catch (error) {
@@ -85,6 +108,21 @@ const EditDialog = () => {
     [selectedMunicipios, formField]
   );
 
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setIsSubmitting(true);
+      if(!validateForm()) {
+        setIsSubmitting(false);
+        return;
+      }
+  
+  
+      doUpdateMunicipios(e);
+      // console.log(parsedUser.email);
+      // console.log(formField);
+      // setAlert({ show: false, message: '' });
+    };
+
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
     const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
@@ -105,18 +143,18 @@ const EditDialog = () => {
     setIsLoading(false);
   }, []);
 
-  const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  // const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
+  //   e.preventDefault();
 
-    if (formField.name.trim() === '') {
-      setAlert({ show: true, message: 'Please fill name field.' });
-      return;
-    }
+  //   if (formField.name.trim() === '') {
+  //     setAlert({ show: true, message: 'Please fill name field.' });
+  //     return;
+  //   }
 
-    doUpdateMunicipios(e);
-    console.log(formField);
-    setAlert({ show: false, message: '' });
-  };
+  //   doUpdateMunicipios(e);
+  //   console.log(formField);
+  //   setAlert({ show: false, message: '' });
+  // };
 
   useEffect(() => {
     if (selectedMunicipios) {
@@ -170,21 +208,33 @@ const EditDialog = () => {
                 <p className="mt-4 text-gray-500">Loading Municipio Details...</p>
               </div>
             ) : (
-              <form onSubmit={handleUpdate}>
+              <form onSubmit={handleSubmit}>
                 <div className="card-body grid gap-5">
-                  <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">
-                        Municipio Name<span className="text-red-500">*</span>
-                      </label>
+                <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">
+                      Municipios Name
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow flex flex-col">
                       <Input
-                        className="input"
+                        className={`input ${errors.name ? 'border-red-500' : ''}`}
                         type="text"
+                        autoComplete="off"
                         value={formField.name}
-                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                        onChange={({ target }) => {
+                          setFormField((prev) => ({ ...prev, name: target.value }));
+                          if (target.value) {
+                            setErrors((prev) => ({ ...prev, name: '' }));
+                          }
+                        }}
                       />
+                      {errors.name && (
+                        <span className="text-red-500 text-xs mt-1">{errors.name}</span>
+                      )}
                     </div>
                   </div>
+                </div>
 
                   <div className="flex justify-end pt-2.5">
                     <Button variant="default" type="submit" disabled={isSubmitting}>