change form reseponse on manage position

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

@@ -17,6 +17,7 @@ import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
 import { Checkbox } from '@/components/ui/checkbox';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { set } from 'date-fns';
 
 const API_URL = apiConfig.service_dashboard;
 
@@ -74,7 +75,7 @@ const AddDialog = () => {
   });
   const [selectMenus, setSelectMenus] = useState<string[]>([]);
   const [formField, setFormField] = useState(initialState);
-
+  const [errors, setErrors] = useState<Record<string, string>>({});
   /* actions */
   const handleCheckboxChange = useCallback((key: string) => {
     setSelectMenus((prev) =>
@@ -82,21 +83,48 @@ const AddDialog = () => {
     );
   }, []);
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   const resetForm = () => {
     setFormField(() => ({ name: '' }));
-    setAlert({ show: false, message: '' });
+    setErrors(() => ({}));
     setSelectMenus([]);
   };
 
+  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;
+    }
+
+    doCreatePosition(e);
+  };
+
   const doCreatePosition = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
 
-      if (formField.name.trim() === '') {
-        setAlert({ show: true, message: 'Please fill in all required fields.' });
-        return;
-      }
-
       const response = await PostData(`${API_URL}/user_role/create`, {
         name: formField.name,
         roles: selectMenus,
@@ -150,29 +178,29 @@ const AddDialog = () => {
               Close
             </Button>
           </div>
-          {alert.show && (
-            <div className="absolute top-5 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 py-0 mb-5 ps-0 pe-3 -me-7" ref={parentRef}>
           <div className="flex flex-col items-stretch grow gap-5 lg:gap-7.5">
-            <form action="" onSubmit={doCreatePosition}>
+            <form action="" 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">Name</label>
+                    <label className="form-label flex items-center gap-1 max-w-56">
-                    <Input
+                      Name <span className="text-danger">*</span>
-                      className="input"
+                    </label>
-                      type="text"
+                    <div className="grow flex flex-col">
-                      value={formField.name}
+                      <Input
-                      onChange={({ target }) =>
+                        className={`input ${errors.name ? 'border-danger' : ''}`}
-                        setFormField((prev) => ({ ...prev, name: target.value }))
+                        type="text"
-                      }
+                        value={formField.name}
-                    />
+                        onChange={({ target }) =>
+                          setFormField((prev) => ({ ...prev, name: target.value }))
+                        }
+                      />
+                      {errors.name && (
+                        <span className="text-red-500 text-sm mt-1">{errors.name}</span>
+                      )}
+                    </div>
                   </div>
                 </div>
 

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
+                    <div className="grow flex flex-col">
-                      className="input"
+                      <Input
-                      type="text"
+                        className={errors.name ? 'border-red-500' : ''}
-                      value={formField.name}
+                        type="text"
-                      onChange={({ target }) =>
+                        value={formField.name}
-                        setFormField((prev) => ({ ...prev, name: target.value }))
+                        onChange={({ target }) =>
-                      }
+                          setFormField((prev) => ({ ...prev, name: target.value }))
-                    />
+                        }
+                      />
+                      {errors.name && <span className="text-red-500 text-sm">{errors.name}</span>}
+                    </div>
                   </div>
                 </div>