update manage user & manage reward

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

@@ -24,6 +24,12 @@ import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 
+interface RoleListProps {
+  id: string;
+  name: string;
+  status: string;
+}
+
 const API_URL = apiConfig.service_dashboard;
 
 const initialState = {
@@ -31,15 +37,15 @@ const initialState = {
   username: '',
   email: '',
   id_role: '',
-  id_role_old: '',
   status: ''
 };
 
 const EditDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showEditDialog, selectedUser, handleEditDialog, roles } = useUserContext();
+  const { showEditDialog, selectedUser, handleEditDialog } = useUserContext();
   const { reload } = useDataGrid();
   const { GetData, PutData } = useCallApi();
+  const [roles, setRoles] = useState<RoleListProps[]>([]);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -53,17 +59,11 @@ const EditDialog = () => {
   };
 
   /* actions */
-  const doResetForm = () => {
-    setAlert({ show: false, message: '' });
-    setFormField(initialState);
-  };
-
   const doUpdateUser = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       const response = await PutData(`${API_URL}/user/update/${selectedUser}`, {
-        ...formField,
-        id_role_old: undefined
+        ...formField
       });
 
       if (formField.name.trim() === '') {
@@ -90,18 +90,36 @@ const EditDialog = () => {
     [selectedUser, formField]
   );
 
+  const doFetchUserRole = useCallback(async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL}/user_role/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('User ID_ROLE:', response?.data.id_role);
+      // console.log('Role: ', response?.data.list);
+      setRoles(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching role', error);
+    }
+  }, []);
+
   const doFetchUserData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/user/detail/${id}`, { id });
-    if (response?.status) {
-      let id_role = response.data.role.id || '';
+    // console.log('User detail response:', response);
 
+    if (response?.status) {
       setFormField((prev) => ({
         ...prev,
         name: response.data.name,
         username: response.data.username,
         email: response.data.email,
-        id_role: id_role,
-        id_role_old: id_role,
+        id_role: response.data.idRole,
         status: response.data.status
       }));
     } else {
@@ -111,10 +129,10 @@ const EditDialog = () => {
         username: '',
         email: '',
         id_role: '0',
-        id_role_old: '',
         status: ''
       }));
     }
+    // console.log('Fetched ID Role:', response?.data.id_role);
   }, []);
 
   useEffect(() => {
@@ -129,6 +147,23 @@ const EditDialog = () => {
     }
   }, [showEditDialog]);
 
+  useEffect(() => {
+    const fetchAllData = async () => {
+      await doFetchUserRole([{ id: 'name', desc: false }]);
+      if (selectedUser) {
+        await doFetchUserData(selectedUser);
+      }
+    };
+
+    fetchAllData();
+  }, [selectedUser]);
+
+  // console.log('ini role: ', roles);
+  // useEffect(() => {
+  //   console.log('Selected User ID Role:', formField.id_role);
+  //   // console.log('Available Roles:', roles);
+  // }, [formField.id_role, roles]);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@@ -206,7 +241,10 @@ const EditDialog = () => {
                     <div className="grow">
                       <Select
                         value={formField.id_role}
-                        onValueChange={(id_role) => setFormField((prev) => ({ ...prev, id_role }))}
+                        onValueChange={(id_role) => {
+                          // console.log('Role changed to:', id_role);
+                          setFormField((prev) => ({ ...prev, id_role }));
+                        }}
                       >
                         <SelectTrigger>
                           <SelectValue placeholder="Select" />