feat: add role fetching functionality to DetailUser component

src/pages/user/component/DetailUser.jsx

@@ -2,12 +2,15 @@ import React, { useEffect, useState } from 'react';
 import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
 import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
 import { createUser, updateUser } from '../../../api/user';
+import { getAllRole } from '../../../api/role';
 
 const { Text } = Typography;
 const { Option } = Select;
 
 const DetailUser = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
+    const [roleList, setRoleList] = useState([]);
+    const [loadingRoles, setLoadingRoles] = useState(false);
 
     const defaultData = {
         user_id: '',
@@ -208,6 +211,35 @@ const DetailUser = (props) => {
         });
     };
 
+    // Fetch all roles when component mounts or modal opens
+    const fetchRoles = async () => {
+        setLoadingRoles(true);
+        try {
+            // Create query params for fetching all roles without pagination limit
+            const queryParams = new URLSearchParams({
+                page: 1,
+                limit: 100, // Get all roles
+                search: '',
+            });
+
+            const response = await getAllRole(queryParams);
+            console.log('Fetched roles:', response);
+
+            if (response && response.data && response.data.data) {
+                setRoleList(response.data.data);
+            }
+        } catch (error) {
+            console.error('Error fetching roles:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: 'Gagal memuat daftar role',
+            });
+        } finally {
+            setLoadingRoles(false);
+        }
+    };
+
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
@@ -234,6 +266,9 @@ const DetailUser = (props) => {
                 setFormData(defaultData);
             }
             setErrors({});
+
+            // Fetch roles when modal opens
+            fetchRoles();
         }
     }, [props.showModal]);
 
@@ -420,14 +455,16 @@ const DetailUser = (props) => {
                             value={FormData.role_id}
                             onChange={handleSelectChange}
                             disabled={props.readOnly}
+                            loading={loadingRoles}
                             style={{ width: '100%' }}
-                            placeholder="Pilih role"
+                            placeholder={loadingRoles ? 'Memuat role...' : 'Pilih role'}
                             allowClear
                         >
-                            <Option value={1}>Administrator</Option>
-                            <Option value={2}>Operator</Option>
-                            <Option value={3}>Engineer</Option>
-                            <Option value={4}>Guest</Option>
+                            {roleList.map((role) => (
+                                <Option key={role.role_id} value={role.role_id}>
+                                    {role.role_name} (Level {role.role_level})
+                                </Option>
+                            ))}
                         </Select>
                     </div>