changing response on edit and add in mater data module

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

@@ -56,12 +56,35 @@ const EditDialog = () => {
   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: 'Aldeia Name' },
+      { key: 'sucosId', label: 'Sucos ID' }
+    ];
+    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 doUpdateAldeias = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -139,15 +162,13 @@ const EditDialog = () => {
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
-    if (formField.name === '' || formField.sucosId === 0) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
+    setIsSubmitting(true);
+    if (!validateForm()) {
+      setIsSubmitting(false);
       return;
     }
 
     doUpdateAldeias(e);
-    console.log(formField);
-    setAlert({ show: false, message: '' });
   };
 
   useEffect(() => {
@@ -212,12 +233,19 @@ const EditDialog = () => {
                       <label className="form-label flex items-center gap-1 max-w-56">
                         Aldeia Name<span className="text-red-500">*</span>
                       </label>
-                      <Input
-                        className="input"
-                        type="text"
-                        value={formField.name}
-                        onChange={(e) => setFormField({ ...formField, name: e.target.value })}
-                      />
+                      <div className="grow flex flex-col">
+                        <Input
+                          className="input"
+                          type="text"
+                          value={formField.name}
+                          onChange={({ target }) => {
+                            setFormField((prev) => ({ ...prev, name: target.value }));
+                            if (target.value) {
+                              setErrors((prev) => ({ ...prev, name: '' }));
+                            }
+                          }}                            />
+                        {errors.name && <span className="text-red-500 text-sm">{errors.name}</span>}
+                      </div>
                     </div>
                   </div>
 
@@ -226,6 +254,7 @@ const EditDialog = () => {
                       <label className="form-label flex items-center gap-1 max-w-56">
                         Sucos ID<span className="text-red-500">*</span>
                       </label>
+                      <div className='grow flex flex-col'>
                       <Popover open={open} onOpenChange={setOpen}>
                         <PopoverTrigger asChild>
                           <button
@@ -253,6 +282,7 @@ const EditDialog = () => {
                                         sucosId: suco.id
                                       });
                                       setOpen(false);
+                                      setErrors((prev) => ({ ...prev, sucosId: '' }));
                                     }}
                                   >
                                     {suco.name}
@@ -262,7 +292,10 @@ const EditDialog = () => {
                             </CommandList>
                           </Command>
                         </PopoverContent>
+                      
                       </Popover>
+                      {errors.sucosId && <span className="text-red-500 text-sm">{errors.sucosId}</span>}
+                      </div>
                     </div>
                   </div>