Chỉnh sửa giao diện quản lí của admin giai đoạn 1

frontend/js/main_map.js

@@ -89,7 +89,7 @@ function applySystemSettings() {
             tabProfile: "Hồ sơ",
             tabScenes: "Quản lí scene",
             tabMedia: "Quản lí ảnh và media",
-            tabUsers: "Quản lí users",
+            tabUsers: "Quản lí người dùng",
             tabSystem: "Cài đặt hệ thống"
         },
         en: {
@@ -1467,19 +1467,23 @@ async function loadMyScenes() {
 /**
  * Tải danh sách người dùng dành cho Admin tối cao
  */
-async function loadAdminUsers() {
+async function loadAdminUsers(page = 1) {
     const token = localStorage.getItem('jwt');
     const container = document.getElementById('admin-users-list');
+    const paginationContainer = document.getElementById('admin-users-pagination');
     if (!container) return;
 
     container.innerHTML = '<p>Đang tải danh sách người dùng...</p>';
+    if (paginationContainer) paginationContainer.innerHTML = '';
 
     try {
-        const res = await fetch(`${API_BASE_URL}/admin/users`, {
+        const res = await fetch(`${API_BASE_URL}/admin/users?page=${page}&limit=10`, {
             headers: { 'Authorization': `Bearer ${token}` }
         });
-        const users = await res.json();
-        if (!res.ok) throw new Error(users.message);
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.message);
+
+        const { users, totalPages, currentPage, totalUsers } = data;
 
         let html = `
             <table class="admin-table">
@@ -1497,23 +1501,25 @@ async function loadAdminUsers() {
         `;
 
         users.forEach(user => {
+            const isRootAdmin = user.role === 'admin';
+            
             html += `
                 <tr>
                     <td><input type="text" id="adm-fn-${user._id}" value="${user.fullName || ''}"></td>
                     <td><strong>${user.username}</strong></td>
                     <td><input type="email" id="adm-em-${user._id}" value="${user.email || ''}"></td>
                     <td>
-                        <select id="adm-role-${user._id}">
+                        <select id="adm-role-${user._id}" ${isRootAdmin ? 'disabled' : ''}>
                             <option value="user" ${user.role === 'user' ? 'selected' : ''}>User</option>
                             <option value="editor" ${user.role === 'editor' ? 'selected' : ''}>Editor</option>
                             <option value="moderator" ${user.role === 'moderator' ? 'selected' : ''}>Moderator</option>
                             <option value="admin" ${user.role === 'admin' ? 'selected' : ''}>Admin</option>
                         </select>
                     </td>
-                    <td><input type="password" id="adm-pw-${user._id}" placeholder="Mật khẩu mới"></td>
+                    <td><input type="password" id="adm-pw-${user._id}" placeholder="${isRootAdmin ? 'N/A' : 'Mật khẩu mới'}" ${isRootAdmin ? 'disabled' : ''}></td>
                     <td>
                         <button class="edit-btn-small" onclick="updateUserByAdmin('${user._id}')">Lưu</button>
-                        <button class="delete-btn-small" onclick="deleteUserByAdmin('${user._id}')">Xóa</button>
+                        ${isRootAdmin ? '' : `<button class="delete-btn-small" onclick="deleteUserByAdmin('${user._id}')">Xóa</button>`}
                     </td>
                 </tr>
             `;
@@ -1521,6 +1527,15 @@ async function loadAdminUsers() {
 
         html += '</tbody></table>';
         container.innerHTML = html;
+
+        // Render Pagination UI
+        if (paginationContainer && totalPages > 1) {
+            paginationContainer.innerHTML = `
+                <button class="pagination-btn" ${currentPage === 1 ? 'disabled' : ''} onclick="loadAdminUsers(${currentPage - 1})">Trang trước</button>
+                <span class="pagination-info">Trang ${currentPage} / ${totalPages} (${totalUsers} người dùng)</span>
+                <button class="pagination-btn" ${currentPage === totalPages ? 'disabled' : ''} onclick="loadAdminUsers(${currentPage + 1})">Trang sau</button>
+            `;
+        }
     } catch (e) {
         container.innerHTML = `<p style="color:red">Lỗi: ${e.message}</p>`;
     }