change form reseponse on manage position

src/pages/settings/user/manage-position/blocks/EditDialog.tsx

@@ -81,7 +81,35 @@ const EditDialog = () => {
     name: '',
     status: ''
   });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const validateForm = () => {
+    const requiredFields = [{ key: 'name', label: 'Position 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 handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    if (!validateForm()) {
+      setIsSubmitting(false);
+      return;
+    }
+    doEditPosition(e);
+  };
   /* actions */
   const handleCheckboxChange = useCallback((key: string) => {
     setSelectMenus((prev) =>
@@ -94,11 +122,6 @@ const EditDialog = () => {
       e.preventDefault();
       setIsSubmitting(true);
 
-      if (formField.name.trim() === '') {
-        setAlert((prev) => ({ ...prev, show: true, message: 'Please fill name field.' }));
-        return;
-      }
-
       if (!selectedPosition) {
         toast.success('Please Select Position');
         return;
@@ -164,29 +187,32 @@ const EditDialog = () => {
               <KeenIcon icon="cross" className="text-1.5xl" />
             </div>
           </div>
-          {alert.show && (
+          {/* {alert.show && (
             <div className="absolute left-1/2 -translate-x-1/2 top-0 mt-2 z-50 max-w-[20rem]">
               <Alert variant="danger">
                 <h3>{alert.message}</h3>
               </Alert>
             </div>
-          )}
+          )} */}
         </DialogHeader>
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
           <div className="flex flex-col px-0">
-            <form action="" onSubmit={doEditPosition}>
+            <form action="" onSubmit={handleSubmit}>
               <div className="card-body grid gap-5 p-0">
                 <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">Name</label>
-                    <Input
-                      className="input"
-                      type="text"
-                      value={formField.name}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, name: target.value }))
-                      }
-                    />
+                    <div className="grow flex flex-col">
+                      <Input
+                        className={errors.name ? 'border-red-500' : ''}
+                        type="text"
+                        value={formField.name}
+                        onChange={({ target }) =>
+                          setFormField((prev) => ({ ...prev, name: target.value }))
+                        }
+                      />
+                      {errors.name && <span className="text-red-500 text-sm">{errors.name}</span>}
+                    </div>
                   </div>
                 </div>