changing response on edit and add in mater data module

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

@@ -43,12 +43,12 @@ const EditDialog = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
-
+  const [errors, setErrors] = useState<Record<string, string>>({});
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
-
+  
   const initialState = {
     name: '',
     postoId: 0,
@@ -62,12 +62,31 @@ const EditDialog = () => {
 
   const resetForm = () => {
     setFormField(initialState);
-    setAlert({
-      show: false,
-      message: ''
-    });
+    setErrors({});
   };
+  const validateForm = () => {
+    const requiredFields = [
+      { key: 'name', label: 'Sucos Name' },
+      { key: 'postoId', label: 'Posto Administrativo 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 doUpdateSucos = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -144,15 +163,15 @@ const EditDialog = () => {
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
-    if (formField.name.trim() === '' || formField.postoId === 0) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
+    setIsSubmitting(true);
+    if (!validateForm()) {
+      setIsSubmitting(false);
       return;
     }
+    
 
     // console.log('Form Field before update:', formField);
     doUpdateSucos(e);
-    setAlert({ show: false, message: '' });
   };
 
   useEffect(() => {
@@ -217,12 +236,24 @@ const EditDialog = () => {
                       <label className="form-label flex items-center gap-1 max-w-56">
                         Sucos Name<span className="text-red-500">*</span>
                       </label>
+                      <div className='grow flex flex-col'>
+
                       <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 text-xs mt-1">{errors.name}</span>
+                    )}
+                      </div>
                     </div>
                   </div>