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

backend/routes/apiRoutes.js

@@ -952,8 +952,38 @@ router.get('/admin/users', protect, async (req, res) => {
         return res.status(403).json({ message: 'Bạn không có quyền truy cập quản trị' });
     }
     try {
-        const users = await User.find({}).sort({ createdAt: -1 });
+        const page = parseInt(req.query.page) || 1;
-        res.json(users);
+        const limit = parseInt(req.query.limit) || 10;
+        const skip = (page - 1) * limit;
+
+        const totalUsers = await User.countDocuments();
+        
+        // Sử dụng Aggregation để sắp xếp Role ưu tiên và Phân trang
+        const users = await User.aggregate([
+            {
+                $addFields: {
+                    roleOrder: {
+                        $switch: {
+                            branches: [
+                                { case: { $eq: ["$role", "admin"] }, then: 0 },
+                                { case: { $eq: ["$role", "Chủ sở hữu"] }, then: 1 }
+                            ],
+                            default: 2
+                        }
+                    }
+                }
+            },
+            { $sort: { roleOrder: 1, createdAt: -1 } },
+            { $skip: skip },
+            { $limit: limit }
+        ]);
+
+        res.json({
+            users,
+            totalPages: Math.ceil(totalUsers / limit),
+            currentPage: page,
+            totalUsers
+        });
     } catch (error) {
         res.status(500).json({ message: error.message });
     }
@@ -970,14 +1000,20 @@ router.put('/admin/users/:id', protect, async (req, res) => {
         const user = await User.findById(req.params.id);
         if (!user) return res.status(404).json({ message: 'Người dùng không tồn tại' });
 
-        // Cập nhật thông tin cơ bản
+        if (user.role === 'admin') {
-        if (fullName) user.fullName = fullName;
+            // Theo yêu cầu: Admin tối cao chỉ được sửa Họ tên và Email
-        if (email) user.email = email;
+            if (fullName) user.fullName = fullName;
-        if (role) user.role = role;
+            if (email) user.email = email;
-        
+            // Bỏ qua role và password để bảo vệ tài khoản root
-        // Nếu có nhập mật khẩu mới thì cập nhật (Middleware pre-save sẽ tự hash)
+        } else {
-        if (password && password.trim() !== '') {
+            // User bình thường được sửa tất cả
-            user.password = password;
+            if (fullName) user.fullName = fullName;
+            if (email) user.email = email;
+            if (role) user.role = role;
+            
+            if (password && password.trim() !== '') {
+                user.password = password;
+            }
         }
 
         await user.save();
@@ -997,8 +1033,8 @@ router.delete('/admin/users/:id', protect, async (req, res) => {
         const user = await User.findById(req.params.id);
         if (!user) return res.status(404).json({ message: 'Người dùng không tồn tại' });
         
-        if (user.role === 'admin' && user._id.toString() === req.user._id.toString()) {
+        if (user.role === 'admin') {
-            return res.status(400).json({ message: 'Bạn không thể tự xóa chính mình' });
+            return res.status(400).json({ message: 'Không thể xóa tài khoản Admin tối cao' });
         }
 
         // Lưu ý: Trong thực tế bạn có thể muốn xóa cả các Scene của user này

frontend/css/style.css

@@ -992,6 +992,7 @@ html, body {
     padding: 12px;
     text-align: left;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    vertical-align: middle;
 }
 
 .admin-table th {
@@ -999,6 +1000,32 @@ html, body {
     font-weight: 600;
     text-transform: uppercase;
     font-size: 12px;
+    white-space: nowrap;
+}
+
+/* Thiết lập độ rộng tối thiểu để tránh co rúm nội dung */
+.admin-table th:nth-child(1) { min-width: 160px; } /* Họ tên */
+.admin-table th:nth-child(2) { min-width: 120px; } /* Username */
+.admin-table th:nth-child(3) { min-width: 200px; } /* Email */
+.admin-table th:nth-child(4) { min-width: 130px; } /* Quyền hạn */
+.admin-table th:nth-child(5) { min-width: 140px; } /* Reset Password */
+.admin-table th:nth-child(6) { min-width: 140px; } /* Thao tác */
+
+.admin-table td input, .admin-table td select {
+    background: #2a2a2a !important;
+    border: 1px solid #444 !important;
+    color: #fff !important;
+    padding: 8px !important;
+    border-radius: 4px;
+    width: 100%;
+    font-size: 13px;
+}
+
+/* Fix lỗi dropdown trắng trên nền trắng */
+.admin-table select option {
+    background-color: #1e1e1e;
+    color: #ffffff;
+    padding: 10px;
 }
 
 .admin-table input, .admin-table select {
@@ -1010,6 +1037,43 @@ html, body {
     width: 100%;
 }
 
+/* Pagination Styles */
+.pagination-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    margin-top: 25px;
+    padding-top: 15px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.pagination-btn {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #fff;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    transition: all 0.2s;
+}
+
+.pagination-btn:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: #007bff;
+}
+
+.pagination-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.pagination-info {
+    color: #888;
+    font-size: 13px;
+}
+
 /* --- Privacy Settings Enhancements --- */
 .privacy-settings-btn {
     background: rgba(255, 255, 255, 0.1);

frontend/index.html

@@ -84,7 +84,7 @@
                 <button class="tab-btn active" onclick="openDashboardTab('profile')">Hồ sơ</button>
                 <button class="tab-btn" onclick="openDashboardTab('my-scenes')">Quản lí scene</button>
                 <button class="tab-btn" onclick="openDashboardTab('media-library')">Quản lí ảnh và media</button>
-                <button class="tab-btn admin-only" id="admin-tab-users" onclick="openDashboardTab('user-management')">Quản lí users</button>
+                <button class="tab-btn admin-only" id="admin-tab-users" onclick="openDashboardTab('user-management')">Quản lí người dùng</button>
                 <button class="tab-btn admin-only" id="admin-tab-system" onclick="openDashboardTab('system-settings')">Cài đặt hệ thống</button>
                 <!-- Dòng 9: Đăng xuất -->
                 <button class="tab-btn logout-item" onclick="showLogoutConfirm()">Đăng xuất</button>
@@ -119,8 +119,9 @@
                     </div>
                 </div>
                 <div id="tab-user-management" class="dashboard-tab-pane admin-only">
-                    <h3>Quản lý người dùng</h3>
+                    <h3>Quản lí người dùng</h3>
                     <div id="admin-users-list" class="dashboard-list"></div>
+                    <div id="admin-users-pagination" class="pagination-container"></div>
                 </div>
                 <div id="tab-system-settings" class="dashboard-tab-pane admin-only">
                     <h3>Cài đặt hệ thống</h3>

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();
+        const data = await res.json();
-        if (!res.ok) throw new Error(users.message);
+        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>`;
     }