fix double click problem

src/pages/menu/manage-menu/blocks/EditDialog.tsx

@@ -259,8 +259,10 @@ const EditDialog = () => {
                   </div>
                 </div> */}
 
-                <div className="flex justify-end">
+                <div className="flex justify-end pt-2.5">
-                  <Button className="btn btn-primary">Save Changes</Button>
+                  <Button className="btn btn-primary" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? 'Saving...' : 'Save Changes'}
+                  </Button>
                 </div>
               </div>
             </form>

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

@@ -71,6 +71,7 @@ const EditDialog = () => {
   const { showEditDialog, handleEditDialog, menus, selectedPosition } = useManagePositionContext();
   const { reload } = useDataGrid();
   const { PutData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -91,6 +92,7 @@ const EditDialog = () => {
   const doEditPosition = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setIsSubmitting(true);
 
       if (formField.name.trim() === '') {
         setAlert((prev) => ({ ...prev, show: true, message: 'Please fill name field.' }));
@@ -102,26 +104,32 @@ const EditDialog = () => {
         return;
       }
 
-      const response = await PutData(`${API_URL}/user_role/update/${selectedPosition.id}`, {
+      try {
-        name: formField.name,
+        const response = await PutData(`${API_URL}/user_role/update/${selectedPosition.id}`, {
-        roles: selectMenus,
+          name: formField.name,
-        status: formField.status
+          roles: selectMenus,
-      });
+          status: formField.status
+        });
 
-      if (response?.status) {
+        if (response?.status) {
-        setAlert((prev) => ({ ...prev, show: false, message: '' }));
+          setAlert((prev) => ({ ...prev, show: false, message: '' }));
-        handleEditDialog(false, null);
+          handleEditDialog(false, null);
-        toast.success('Success Update Position');
+          toast.success('Success Update Position');
-        reload();
+          reload();
-        const createActivity = {
+          const createActivity = {
-          module: 'Manage Position',
+            module: 'Manage Position',
-          description: `Edit Position => ${selectedPosition.name}`,
+            description: `Edit Position => ${selectedPosition.name}`,
-          action: 'U'
+            action: 'U'
-        };
+          };
 
-        doSaveLogActivity(createActivity);
+          doSaveLogActivity(createActivity);
-      } else {
+        } else {
-        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+          setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [formField, selectMenus, selectedPosition]
@@ -217,9 +225,9 @@ const EditDialog = () => {
                   ))}
                 </div>
                 <hr />
-                <div className="flex justify-end">
+                <div className="flex justify-end pt-2.5">
-                  <Button className="btn btn-primary" type="submit">
+                  <Button className="btn btn-primary" type="submit" disabled={isSubmitting}>
-                    Save Changes
+                    {isSubmitting ? 'Saving...' : 'Save Changes'}
                   </Button>
                 </div>
               </div>

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

@@ -60,6 +60,7 @@ const EditDialog = () => {
   const [open, setOpen] = useState(false);
   const [roles, setRoles] = useState<RoleListProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -76,29 +77,44 @@ const EditDialog = () => {
   const doUpdateUser = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      const response = await PutData(`${API_URL}/user/update/${selectedUser}`, {
+      setIsSubmitting(true);
-        ...formField
-      });
 
-      if (formField.name.trim() === '') {
+      if (
+        !formField.name.trim() ||
+        !formField.username.trim() ||
+        !formField.email.trim() ||
+        !formField.id_role ||
+        !formField.status ||
+        !formField.customerid
+      ) {
         setAlert({ show: true, message: 'Please fill all required field' });
         return;
       }
 
-      if (response?.status) {
+      try {
-        resetForm();
+        const response = await PutData(`${API_URL}/user/update/${selectedUser}`, {
-        handleEditDialog(false, null);
+          ...formField
-        toast.success('Success Update User');
+        });
-        reload();
-        const createActivity = {
-          module: 'Manage User',
-          description: `Edit User => ${formField.username}`,
-          action: 'U'
-        };
 
-        doSaveLogActivity(createActivity);
+        if (response?.status) {
-      } else {
+          resetForm();
-        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+          handleEditDialog(false, null);
+          toast.success('Success Update User');
+          reload();
+          const createActivity = {
+            module: 'Manage User',
+            description: `Edit User => ${formField.username}`,
+            action: 'U'
+          };
+
+          doSaveLogActivity(createActivity);
+        } else {
+          setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [selectedUser, formField]
@@ -362,8 +378,10 @@ const EditDialog = () => {
                   </div>
                 </div>
 
-                <div className="flex justify-end">
+                <div className="flex justify-end pt-2.5">
-                  <Button className="btn btn-primary">Save Changes</Button>
+                  <Button className="btn btn-primary" type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? 'Saving...' : 'Save Changes'}
+                  </Button>
                 </div>
               </div>
             </form>