changing response on edit and add in mater data module

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

@@ -29,7 +29,7 @@ const AddDialog = () => {
     show: false,
     message: ''
   });
-
+  const [errors, setErrors] = useState<Record<string, string>>({});
   const initialState = {
     name: '',
     created_by: '',
@@ -40,9 +40,31 @@ const AddDialog = () => {
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
+
+  const validateForm = () => {
+    const requiredFields = [{ key: 'name', label: 'Profession 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 resetForm = () => {
     setFormField(initialState);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const doCreateProfession = useCallback(
@@ -81,15 +103,13 @@ 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;
     }
 
     doCreateProfession(e);
-    console.log(formField);
-    setAlert({ show: false, message: '' });
   };
 
   useEffect(() => {
@@ -130,12 +150,21 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       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-sm">{errors.name}</span>}
+                    </div>
                   </div>
                 </div>