fix: remove duplicate /roles in API endpoints

- Fix getAllRole endpoint from roles/roles to roles
- Fix getRoleById endpoint from roles/roles/:id to roles/:id
- Fix createRole endpoint from roles/roles to roles
- Fix updateRole endpoint from roles/roles/:id to roles/:id
- Fix deleteRole endpoint from roles/roles/:id to roles/:id
- Add try-catch error handling in getAllRole
- Support both server-side and client-side pagination

This fixes SQL error: Conversion failed when converting the nvarchar value 'roles' to data type int
Backend was interpreting duplicate /roles as an ID parameter

src/api/role.jsx

@@ -1,30 +1,40 @@
 import { SendRequest } from '../components/Global/ApiRequest';
 
 const getAllRole = async (queryParams) => {
+    try {
         const response = await SendRequest({
             method: 'get',
-        prefix: `roles/roles?${queryParams.toString()}`,
+            prefix: `roles?${queryParams.toString()}`,
         });
 
         console.log('Role API Response:', response);
 
-    // Parse query params to get page and limit
+        // Check if backend returns paginated data
+        if (response.paging) {
+            // Backend already provides pagination info
+            return {
+                status: response.statusCode || 200,
+                data: {
+                    data: response.data || [],
+                    paging: response.paging,
+                    total: response.paging.total || 0
+                }
+            };
+        }
+
+        // Fallback: If backend returns all data without pagination
         const params = Object.fromEntries(queryParams);
         const currentPage = parseInt(params.page) || 1;
         const currentLimit = parseInt(params.limit) || 10;
 
-    // Backend returns all data, so we need to do client-side pagination
         const allData = response.data || [];
         const totalData = allData.length;
 
-    // Calculate start and end index for current page
+        // Client-side pagination
         const startIndex = (currentPage - 1) * currentLimit;
         const endIndex = startIndex + currentLimit;
-
-    // Slice data for current page
         const paginatedData = allData.slice(startIndex, endIndex);
 
-    // Transform response to match TableList expected structure
         return {
             status: response.statusCode || 200,
             data: {
@@ -38,12 +48,29 @@ const getAllRole = async (queryParams) => {
                 total: totalData,
             },
         };
+    } catch (error) {
+        console.error('getAllRole error:', error);
+        return {
+            status: 500,
+            data: {
+                data: [],
+                paging: {
+                    page: 1,
+                    limit: 10,
+                    total: 0,
+                    page_total: 0
+                },
+                total: 0
+            },
+            error: error.message
+        };
+    }
 };
 
 const getRoleById = async (id) => {
     const response = await SendRequest({
         method: 'get',
-        prefix: `roles/roles/${id}`,
+        prefix: `roles/${id}`,
     });
     return response.data;
 };
@@ -51,7 +78,7 @@ const getRoleById = async (id) => {
 const createRole = async (queryParams) => {
     const response = await SendRequest({
         method: 'post',
-        prefix: `roles/roles`,
+        prefix: `roles`,
         params: queryParams,
     });
 
@@ -90,7 +117,7 @@ const createRole = async (queryParams) => {
 const updateRole = async (role_id, queryParams) => {
     const response = await SendRequest({
         method: 'put',
-        prefix: `roles/roles/${role_id}`,
+        prefix: `roles/${role_id}`,
         params: queryParams,
     });
 
@@ -129,7 +156,7 @@ const updateRole = async (role_id, queryParams) => {
 const deleteRole = async (queryParams) => {
     const response = await SendRequest({
         method: 'delete',
-        prefix: `roles/roles/${queryParams}`,
+        prefix: `roles/${queryParams}`,
     });
 
     console.log('Delete API Response:', response);

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;
     };
 

src/pages/user/component/ListUser.jsx

@@ -8,6 +8,7 @@ import {
     SearchOutlined,
     CheckOutlined,
     CloseOutlined,
+    KeyOutlined,
 } from '@ant-design/icons';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
@@ -49,7 +50,7 @@ const getRoleColor = (role_name, role_level) => {
     return 'default';
 };
 
-const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveDialog) => [
+const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveDialog, showChangePasswordModal) => [
     {
         title: 'ID',
         dataIndex: 'user_id',
@@ -135,7 +136,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveD
         title: 'Aksi',
         key: 'aksi',
         align: 'center',
-        width: '15%',
+        width: '18%',
         render: (_, record) => (
             <Space>
                 <Button
@@ -158,6 +159,12 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveD
                     icon={<EditOutlined style={{ color: '#faad14' }} />}
                     onClick={() => showEditModal(record)}
                 />
+                <Button
+                    type="text"
+                    style={{ borderColor: '#722ed1' }}
+                    icon={<KeyOutlined style={{ color: '#722ed1' }} />}
+                    onClick={() => showChangePasswordModal(record)}
+                />
                 <Button
                     type="text"
                     danger
@@ -255,6 +262,11 @@ const ListUser = memo(function ListUser(props) {
         });
     };
 
+    const showChangePasswordModal = (param) => {
+        props.setSelectedUserForPassword(param);
+        props.setShowChangePasswordModal(true);
+    };
+
     const handleApprove = async (user_id) => {
         const response = await approveUser(user_id);
         if (response.statusCode == 200) {
@@ -366,7 +378,8 @@ const ListUser = memo(function ListUser(props) {
                                 showPreviewModal,
                                 showEditModal,
                                 showDeleteDialog,
-                                showApproveDialog
+                                showApproveDialog,
+                                showChangePasswordModal
                             )}
                             triger={trigerFilter}
                         />