feat: integrate dynamic role selection in user form

- Add getAllRole API import to fetch roles dynamically
- Add roleList and loadingRoles state management
- Implement fetchRoles function to get all roles from API
- Update Select component to display roles dynamically from database
- Display role format: Role Name (Level X)
- Add loading indicator while fetching roles
- Fetch roles automatically when modal opens

src/pages/user/component/DetailUser.jsx

@@ -41,11 +41,32 @@ const DetailUser = (props) => {
 
     const validatePassword = (password) => {
         if (!password) return 'Password wajib diisi';
-        if (password.length < 8) return 'Password minimal 8 karakter';
-        if (!/[A-Z]/.test(password)) return 'Password harus ada huruf besar';
-        if (!/[a-z]/.test(password)) return 'Password harus ada huruf kecil';
-        if (!/\d/.test(password)) return 'Password harus ada angka';
-        if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) return 'Password harus ada karakter spesial';
+
+        // Must be at least 8 characters long
+        if (password.length < 8) {
+            return 'Password must be at least 8 characters long';
+        }
+
+        // Must contain at least one uppercase letter
+        if (!/[A-Z]/.test(password)) {
+            return 'Password must contain at least one uppercase letter';
+        }
+
+        // Must contain at least one lowercase letter
+        if (!/[a-z]/.test(password)) {
+            return 'Password must contain at least one lowercase letter';
+        }
+
+        // Must contain at least one number
+        if (!/\d/.test(password)) {
+            return 'Password must contain at least one number';
+        }
+
+        // Must contain at least one special character
+        if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+            return 'Password must contain at least one special character';
+        }
+
         return null;
     };