update manage user & manage reward

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

@@ -25,6 +25,13 @@ import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import clsx from 'clsx';
 
+interface RoleListProps {
+  id: string;
+  name: string;
+  roles: string;
+  status: string;
+}
+
 interface CreateUserParams {
   email: string;
   username: string;
@@ -40,9 +47,10 @@ type PasswordType = 'password' | 'retype_password';
 
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog, roles } = useUserContext();
+  const { showAddDialog, handleAddDialog } = useUserContext();
   const { reload } = useDataGrid();
-  const { PostData, PutData } = useCallApi();
+  const { PostData, GetData } = useCallApi();
+  const [roles, setRoles] = useState<RoleListProps[]>([]);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -57,10 +65,6 @@ const AddDialog = () => {
     status: ''
   };
   const [formField, setFormField] = useState(initialState);
-  const resetForm = () => {
-    setFormField(initialState);
-    setAlert({ show: false, message: '' });
-  };
   const [showPassword, setShowPassword] = useState({
     password: false,
     retype_password: false
@@ -97,6 +101,87 @@ const AddDialog = () => {
     };
   };
 
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
+  /* actions */
+  const doCreateUser = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      const response = await PostData(`${API_URL}/user/create`, formField);
+
+      if (response?.status) {
+        handleAddDialog(false);
+        resetForm();
+        reload();
+        const createActivity = {
+          module: 'Manage User',
+          description: `Create New User => ${formField.username}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
+        toast.success('Success Create User');
+      } else {
+        toast.error('Failed to create user');
+        setAlert({ show: true, message: 'Failed to create user. Please try again.' });
+      }
+    },
+    [formField]
+  );
+
+  const fetchRoles = useCallback(async () => {
+    const params = {
+      limit: 100,
+      page: 1,
+      with_deleted: false,
+      order_field: 'name',
+      order_direction: 'ASC',
+      filter: JSON.stringify({
+        status: 'Y'
+      })
+    };
+    const response = await GetData(`${API_URL}/user_role/list`, params);
+    // console.log('ini data:', response);
+    if (response?.status) {
+      const roleList = response.data?.list || [];
+      setRoles(roleList);
+    } else {
+      setRoles(() => []);
+    }
+    // console.log('ini data user_role:', response?.data);
+  }, []);
+
+  useEffect(() => {
+    fetchRoles();
+  }, [fetchRoles]);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    console.log('Form data before submit:', formField);
+
+    if (
+      formField.email.trim() === '' ||
+      formField.username.trim() === '' ||
+      formField.password.trim() === '' ||
+      formField.retype_password.trim() === '' ||
+      formField.name.trim() === '' ||
+      formField.id_role.trim() === '' ||
+      formField.status.trim() === ''
+    ) {
+      setAlert({ show: true, message: 'Please fill name field.' });
+      return;
+    }
+
+    doCreateUser(e);
+    // console.log(formField);
+    setAlert({ show: false, message: '' });
+  };
+
   useEffect(() => {
     const validation = validatePassword(formField.password, formField.retype_password);
     setMessagePassword(validation.isValid);
@@ -111,38 +196,6 @@ const AddDialog = () => {
     }
   }, [showAddDialog]);
 
-  /* actions */
-  const doCreateUser = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-
-      const response = await PostData(`${API_URL}/user/create`, {
-        ...formField,
-        id_role: undefined
-      });
-      if (response?.status) {
-        const responseUserAddRole = await PutData(
-          `${API_URL}/user/add_role/${response?.message?.id}/${formField.id_role}`,
-          {}
-        );
-        resetForm();
-        handleAddDialog(false);
-        toast.success('Success Create User');
-        reload();
-        const createActivity = {
-          module: 'Manage User',
-          description: `Create New User => ${formField.username}`,
-          action: 'C'
-        };
-
-        doSaveLogActivity(createActivity);
-      } else {
-        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
-      }
-    },
-    [formField]
-  );
-
   const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
     event.preventDefault();
     setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
@@ -177,7 +230,7 @@ const AddDialog = () => {
                 <h3>{alert.message}</h3>
               </Alert>
             )}
-            <form action="" onSubmit={doCreateUser}>
+            <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">
@@ -231,7 +284,10 @@ const AddDialog = () => {
                     <div className="grow">
                       <Select
                         value={formField.id_role}
-                        onValueChange={(id_role) => setFormField((prev) => ({ ...prev, id_role }))}
+                        onValueChange={(value) => {
+                          console.log('Role selected:', value);
+                          setFormField((prev) => ({ ...prev, id_role: value }));
+                        }}
                       >
                         <SelectTrigger>
                           <SelectValue placeholder="Select" />