chỉnh sửa dashboard quản lí của thành viên

frontend/css/style.css

@@ -17,54 +17,6 @@ html, body {
     z-index: 1;
 }
 
-/* Floating panels on top of the map */
-.floating-panel {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background: rgba(255, 255, 255, 0.95);
-    padding: 15px;
-    border-radius: 8px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
-    z-index: 1000;
-    width: 280px;
-}
-
-.floating-panel h3 {
-    margin-bottom: 10px;
-    font-size: 16px;
-    color: #333;
-}
-
-.floating-panel input {
-    width: 100%;
-    padding: 8px;
-    margin-bottom: 8px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-
-.btn-group {
-    display: flex;
-    gap: 10px;
-}
-
-.btn-group button, .floating-panel button {
-    flex: 1;
-    padding: 8px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-weight: bold;
-    transition: background-color 0.2s;
-}
-
-.btn-group button:hover, .floating-panel button:hover {
-    background-color: #0056b3;
-}
-
 /* Modal Styling */
 .modal {
     display: none;
@@ -92,14 +44,18 @@ html, body {
 .close-btn {
     position: absolute;
     top: 15px;
-    right: 20px;
-    font-size: 24px;
+    right: 25px;
+    font-size: 30px;
     cursor: pointer;
-    color: #666;
+    color: #fff; /* Chuyển sang màu trắng để nổi bật trên nền tối */
+    z-index: 5000; /* Đảm bảo nằm trên cùng của tất cả các pane */
+    transition: all 0.2s ease;
+    text-shadow: 0 0 10px rgba(0,0,0,0.5);
 }
 
 .close-btn:hover {
-    color: #000;
+    color: #ff4d4d; /* Chuyển sang màu đỏ khi di chuột để dễ nhận biết */
+    transform: scale(1.1);
 }
 
 .form-group {
@@ -176,10 +132,331 @@ html, body {
     position: fixed;
     top: 0; left: 0; width: 100%; height: 100%;
     background: rgba(0,0,0,0.7);
-    display: flex; align-items: center; justify-content: center;
+    align-items: center; justify-content: center;
     z-index: 4000;
 }
 
+/* Top Bar */
+#top-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60px; /* Fixed height */
+    background: rgba(20, 20, 20, 0.8); /* Màu tối transparent */
+    color: #fff;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
+    z-index: 1500; /* Above map, below modals */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+}
+
+.app-brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.app-brand h1 {
+    font-size: 20px;
+    color: #fff;
+    margin: 0;
+}
+
+#user-controls {
+    position: relative;
+}
+
+#user-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #007bff;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 18px;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#user-dropdown {
+    display: none; /* Hidden by default */
+    position: absolute;
+    top: 50px; /* Below the avatar */
+    right: -20px; /* Canh sát mép màn hình, bù trừ padding của top-bar */
+    background: rgba(30, 30, 30, 0.98);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    border-radius: 8px;
+    padding: 10px 0; /* Remove horizontal padding to let hover cover full width */
+    width: auto; /* Tự động điều chỉnh theo nội dung */
+    z-index: 1600; /* Above top-bar */
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    min-width: 180px; /* Đảm bảo không quá nhỏ */
+}
+
+#user-dropdown.show {
+    display: block;
+}
+
+#user-dropdown h3 {
+    margin: 10px 20px;
+    font-size: 16px;
+    color: #fff; /* Giữ màu trắng cho các tiêu đề khác trong dropdown nếu có */
+    /* Nếu đây là tiêu đề "Welcome", nó sẽ bị ẩn bởi quy tắc bên dưới */
+}
+
+#user-dropdown input {
+    width: calc(100% - 40px);
+    margin: 0 20px 10px 20px;
+    padding: 8px;
+    border: 1px solid #444;
+    background: #222;
+    color: #fff;
+    border-radius: 4px;
+}
+
+#user-dropdown .btn-group {
+    display: flex;
+    flex-direction: column; /* Sắp xếp theo cột */
+    gap: 0;
+}
+
+#user-dropdown .btn-group button, #user-dropdown button {
+    width: 100%;
+    padding: 10px 15px; /* Giảm padding để hộp nhỏ gọn hơn */
+    background-color: transparent; /* Không sử dụng background button */
+    color: #ccc;
+    text-align: left; /* Căn lề trái giống menu text */
+    border: none;
+    border-radius: 0;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 14px;
+    transition: all 0.2s ease;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+#user-dropdown .btn-group button:hover, #user-dropdown button:hover {
+    background-color: rgba(255, 255, 255, 0.1); /* Hiệu ứng hover nhẹ */
+    color: #fff;
+}
+
+#user-dropdown button:last-child {
+    border-bottom: none;
+}
+
+/* Dashboard Overlay */
+#dashboard-overlay {
+    /* Inherits .modal-overlay styles */
+    z-index: 4500; /* Above all other modals */
+}
+
+.dashboard-content {
+    /* Các thuộc tính đã được sửa ở lần trước */
+    max-width: 800px !important; /* Mở rộng chiều rộng tối đa lên 1800px */
+    width: 95% !important;
+    height: 85vh;
+    overflow: hidden; /* Cắt bỏ phần tràn nếu có */
+    position: relative; /* Làm mốc cho nút close-btn absolute */
+    display: flex !important;
+    flex-direction: row !important; /* Ép buộc luôn nằm ngang */
+    flex-wrap: nowrap; /* Ngăn chặn các thành phần nhảy xuống hàng dọc */
+    gap: 0; /* Loại bỏ khoảng hở giữa 2 pane để tạo khối thống nhất */
+    background: transparent !important; /* Loại bỏ nền chung của panel */
+    box-shadow: none !important; /* Loại bỏ bóng chung */
+    padding: 0;
+}
+
+.dashboard-tabs {
+    /* Các thuộc tính đã được sửa ở lần trước */
+    display: flex;
+    flex-direction: column; /* Danh mục menu dọc */
+    background: rgba(30, 30, 30, 0.9);
+    backdrop-filter: blur(10px);
+    width: 220px;
+    flex-shrink: 0; /* Không cho phép menu bị thu nhỏ */
+    border-radius: 15px 0 0 15px; /* Chỉ bo góc bên trái */
+    padding: 20px 10px;
+    gap: 2px; /* Khoảng cách hẹp giữa các dòng menu */
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    height: 100%; /* Đảm bảo sidebar chiếm toàn bộ chiều cao của dashboard-content */
+    overflow-y: auto; /* Cho phép cuộn nếu nội dung sidebar quá dài */
+}
+
+.dashboard-tabs .tab-btn {
+    /* Các thuộc tính đã được sửa ở lần trước */
+    padding: 12px 15px;
+    border: none;
+    border-radius: 10px;
+    background: none;
+    cursor: pointer;
+    font-weight: 400;
+    color: #aaa;
+    text-align: left;
+    transition: all 0.3s ease;
+    flex: none; /* Ngăn button thay đổi kích thước theo chiều cao của dashboard */
+}
+
+.dashboard-tabs .tab-btn.active {
+    /* Các thuộc tính đã được sửa ở lần trước */
+    color: #fff;
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
+}
+
+.dashboard-tabs .tab-btn:hover:not(.active) {
+    background: rgba(255, 255, 255, 0.05);
+    color: #fff;
+}
+
+#dashboard-tab-content {
+    flex: 1; /* Quan trọng: Giúp phần nội dung chiếm toàn bộ không gian còn lại bên phải */
+    min-width: 0; /* Ngăn chặn nội dung bên trong đẩy bung layout */
+    height: 100%;
+    display: block;
+    overflow-y: auto;
+}
+
+.dashboard-tab-pane {
+    display: none !important; /* Ẩn tuyệt đối các tab không hoạt động */
+    width: 100%;
+    height: 100%; /* Đảm bảo mỗi tab pane chiếm toàn bộ chiều cao của #dashboard-tab-content */
+    background: rgba(30, 30, 30, 0.9); /* Đồng nhất màu tối với sidebar */
+    color: #fff; /* Chuyển màu chữ sang trắng cho dark mode */
+    backdrop-filter: blur(5px);
+    border-radius: 0 15px 15px 0; /* Chỉ bo góc bên phải */
+    padding: 30px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    overflow-y: auto;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-left: 1px solid rgba(255, 255, 255, 0.05); /* Đường ngăn cách mờ giữa 2 pane */
+}
+
+.dashboard-tab-pane.active {
+    display: block !important; /* Chỉ tab active mới được phép hiển thị */
+}
+
+/* Điều chỉnh các phần tử bên trong tab pane cho phù hợp với nền tối */
+.dashboard-tab-pane h3 {
+    color: #fff;
+    margin-bottom: 20px;
+}
+
+.dashboard-tab-pane label {
+    color: #ccc;
+}
+
+/* Dashboard List Styles */
+.dashboard-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 10px;
+}
+
+.dashboard-item {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 15px;
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: background 0.2s;
+}
+
+.dashboard-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.item-info {
+    flex: 1; /* Chiếm toàn bộ không gian bên trái */
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-right: 20px; /* Khoảng cách an toàn với các nút bấm */
+}
+
+.item-info strong { color: #fff; font-size: 16px; }
+.item-info span { color: #888; font-size: 13px; }
+
+.item-actions { display: flex; gap: 10px; flex-shrink: 0; }
+.item-actions button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 13px;
+    transition: opacity 0.2s;
+}
+
+.edit-btn { background: #007bff; color: white; }
+.delete-btn { background: #dc3545; color: white; }
+.item-actions button:hover { opacity: 0.9; }
+
+/* Tùy chỉnh các dòng trong Sidebar */
+.sidebar-user-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 10px 10px 10px;
+}
+
+.avatar-circle {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    background: #007bff;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 600;
+    font-size: 20px;
+}
+
+.user-name-text {
+    font-size: 16px;
+    font-weight: 600;
+    color: #fff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.user-status-text {
+    font-size: 13px;
+    color: #888;
+    padding: 0 10px 15px 10px;
+}
+
+.sidebar-divider {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    margin: 5px 10px 15px 10px;
+}
+
+.dashboard-tabs .tab-btn.logout-item {
+    margin-top: 10px;
+    color: #ff4d4d;
+}
+
+.dashboard-tabs .tab-btn.logout-item:hover {
+    background: rgba(255, 77, 77, 0.1);
+    color: #ff4d4d;
+}
+
+.admin-only {
+    /* Style for admin-specific elements, or hide by default */
+    display: none;
+}
 .modal-content {
     background: #fff;
     padding: 20px;

frontend/index.html

@@ -19,20 +19,111 @@
     <!-- Map container -->
     <div id="map"></div>
 
-    <!-- Login/User Control Panel -->
-    <div id="user-panel" class="floating-panel">
-        <div id="auth-guest">
-            <h3>Login / Register</h3>
-            <input type="text" id="username-input" placeholder="Username">
-            <input type="password" id="password-input" placeholder="Password">
-            <div class="btn-group">
-                <button onclick="handleLogin()">Login</button>
-                <button onclick="handleRegister()">Register</button>
+    <!-- Top Bar -->
+    <div id="top-bar">
+        <div class="app-brand">
+            <h1>Virtual 3D Tour Map</h1>
+        </div>
+        <div id="user-controls">
+            <div id="user-avatar" onclick="toggleDropdown()">
+                <span id="avatar-initials">?</span>
+            </div>
+            <div id="user-dropdown" class="dropdown-content">
+                <div id="auth-guest">
+                    <h3>Login / Register</h3>
+                    <input type="text" id="username-input" placeholder="Username">
+                    <input type="password" id="password-input" placeholder="Password">
+                    <div class="btn-group">
+                        <button onclick="handleLogin()">Login</button>
+                        <button onclick="handleRegister()">Register</button>
+                    </div>
+                </div>
+                <div id="auth-logged-in" style="display: none;">
+                    <!--<p>Welcome, <strong id="logged-username"></strong> (<span id="logged-role"></span>)</p>-->
+                    <button onclick="openDashboard()">Manage Profile</button>
+                    <button onclick="handleLogout()">Logout</button>
+                </div>
             </div>
         </div>
-        <div id="auth-logged-in" style="display: none;">
-            <p>Welcome, <strong id="logged-username"></strong> (<span id="logged-role"></span>)</p>
-            <button onclick="handleLogout()">Logout</button>
+    </div>
+
+    <!-- Dashboard Overlay -->
+    <div id="dashboard-overlay" class="modal-overlay">
+        <div class="modal-content dashboard-content">
+            <span class="close-btn" onclick="closeDashboard()">&times;</span>
+            <div class="dashboard-tabs">
+                <!-- Dòng 1: Avatar và Tên -->
+                <div class="sidebar-user-header">
+                    <div id="sidebar-avatar" class="avatar-circle">?</div>
+                    <div id="sidebar-username" class="user-name-text">Username</div>
+                </div>
+                <!-- Dòng 2: Status -->
+                <div id="sidebar-status" class="user-status-text">Status...</div>
+                <!-- Dòng 3: Dòng kẻ ngang -->
+                <hr class="sidebar-divider">
+                <!-- Dòng 4-8: Menu điều hướng -->
+                <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-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="handleLogout()">Đăng xuất</button>
+            </div>
+            <div id="dashboard-tab-content">
+                <div id="tab-profile" class="dashboard-tab-pane active">
+                    <h3>Thông tin hồ sơ</h3>
+                    <form id="profile-form" onsubmit="updateProfile(event)">
+                        <div class="form-group">
+                            <label>Username</label>
+                            <input type="text" id="profile-username" name="username" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Mật khẩu mới (để trống nếu không đổi)</label>
+                            <input type="password" id="profile-password" name="password" placeholder="********">
+                        </div>
+                        <button type="submit" class="submit-btn">Cập nhật hồ sơ</button>
+                    </form>
+                </div>
+                <div id="tab-my-scenes" class="dashboard-tab-pane">
+                    <h3>Các scene đã tạo</h3>
+                    <div id="my-scenes-list" class="dashboard-list">
+                        <!-- Nạp dữ liệu qua JS -->
+                        <p>Đang tải danh sách...</p>
+                    </div>
+                </div>
+                <div id="tab-media-library" class="dashboard-tab-pane">
+                    <h3>Quản lí ảnh và media</h3>
+                    <div id="media-library-list" class="dashboard-grid">
+                        <!-- Nạp dữ liệu qua JS -->
+                        <p>Đang tải kho ảnh...</p>
+                    </div>
+                </div>
+                <div id="tab-user-management" class="dashboard-tab-pane admin-only">
+                    <h3>Quản lý người dùng</h3>
+                    <div id="admin-users-list" class="dashboard-list"></div>
+                </div>
+                <div id="tab-system-settings" class="dashboard-tab-pane admin-only">
+                    <h3>Cài đặt hệ thống</h3>
+                    <form id="system-settings-form" onsubmit="updateSystemSettings(event)">
+                        <div class="form-group">
+                            <label>Múi giờ (Timezone)</label>
+                            <select id="sys-timezone" name="timezone">
+                                <option value="Asia/Ho_Chi_Minh">Asia/Ho Chi Minh (GMT+7)</option>
+                                <option value="UTC">UTC</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label>Ngôn ngữ mặc định</label>
+                            <select id="sys-language" name="language">
+                                <option value="vi">Tiếng Việt</option>
+                                <option value="en">English</option>
+                            </select>
+                        </div>
+                        <button type="submit" class="submit-btn">Lưu cấu hình</button>
+                    </form>
+                </div>
+            </div>
         </div>
     </div>
 

frontend/js/main_map.js

@@ -7,11 +7,15 @@ let currentSceneId = null;
 let previousSceneId = null;
 let miniMap = null;
 let miniMapMarker = null;
+let systemSettings = { timezone: 'Asia/Ho_Chi_Minh', language: 'vi' };
 
 // Initialize when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
     try {
         console.log("--- Bắt đầu khởi tạo Frontend ---");
+        // Ưu tiên nạp cấu hình hệ thống trước
+        fetchSystemSettings();
+
         if (document.getElementById('map')) {
             console.log("1. Đang khởi tạo bản đồ Leaflet...");
             initMap();
@@ -22,17 +26,140 @@ document.addEventListener('DOMContentLoaded', () => {
         
         // Đảm bảo map đã sẵn sàng trước khi nạp data
         if (map) {
-            loadScenes().then(() => {
-                console.log("4. Đang chuẩn bị khôi phục Scene cũ (nếu có)...");
-                // Chỉ khôi phục khi bản đồ đã nạp xong các marker
-                setTimeout(restoreActiveScene, 500);
-            });
+            // Chỉ nạp danh sách Scene để vẽ marker lên bản đồ
+            loadScenes();
         }
     } catch (error) {
         console.error("Ứng dụng không thể khởi tạo:", error);
     }
 });
 
+/**
+ * Lấy cấu hình hệ thống từ Backend
+ */
+async function fetchSystemSettings() {
+    try {
+        const res = await fetch(`${API_BASE_URL}/system/settings`);
+        if (res.ok) {
+            systemSettings = await res.json();
+            applySystemSettings();
+        }
+    } catch (e) {
+        console.warn("Không thể nạp cấu hình hệ thống, dùng mặc định.");
+    }
+}
+
+/**
+ * Áp dụng cấu hình Múi giờ và Ngôn ngữ vào UI
+ */
+function applySystemSettings() {
+    console.log(`[System] Applying settings: Language=${systemSettings.language}, Timezone=${systemSettings.timezone}`);
+    
+    // 1. Cập nhật nhãn (Labels) dựa trên ngôn ngữ
+    const translations = {
+        vi: {
+            brand: "Bản đồ Tour 3D Ảo",
+            login: "Đăng nhập / Đăng ký",
+            profile: "Quản lý hồ sơ",
+            logout: "Đăng xuất",
+            dashboardTitle: "Bảng điều khiển người dùng",
+            tabProfile: "Hồ sơ",
+            tabScenes: "Quản lí scene",
+            tabMedia: "Quản lí ảnh và media",
+            tabUsers: "Quản lí users",
+            tabSystem: "Cài đặt hệ thống"
+        },
+        en: {
+            brand: "Virtual 3D Tour Map",
+            login: "Login / Register",
+            profile: "Manage Profile",
+            logout: "Logout",
+            dashboardTitle: "User Dashboard",
+            tabProfile: "Profile",
+            tabScenes: "My Scenes",
+            tabMedia: "Media Library",
+            tabUsers: "User Management",
+            tabSystem: "System Settings"
+        }
+    };
+
+    const lang = systemSettings.language || 'vi';
+    const t = translations[lang];
+
+    // Cập nhật các phần tử cố định
+    const brandH1 = document.querySelector('.app-brand h1');
+    if (brandH1) brandH1.innerText = t.brand;
+
+    const dashboardH2 = document.querySelector('.dashboard-content h2');
+    if (dashboardH2) dashboardH2.innerText = t.dashboardTitle;
+
+    // Cập nhật các nút Tab
+    const tabButtons = document.querySelectorAll('.dashboard-tabs .tab-btn');
+    if (tabButtons.length >= 3) {
+        tabButtons[0].innerText = t.tabProfile;
+        tabButtons[1].innerText = t.tabScenes;
+        tabButtons[2].innerText = t.tabMedia;
+        if (tabButtons[3]) tabButtons[3].innerText = t.tabUsers;
+        if (tabButtons[4]) tabButtons[4].innerText = t.tabSystem;
+    }
+
+    const profileBtn = document.querySelector('button[onclick="openDashboard()"]');
+    if (profileBtn) profileBtn.innerText = t.profile;
+
+    const logoutBtn = document.querySelector('button[onclick="handleLogout()"]');
+    if (logoutBtn) logoutBtn.innerText = t.logout;
+}
+
+/**
+ * Cập nhật nội dung tab Hồ sơ với thông tin người dùng
+ */
+function updateProfileTabContent() {
+    const username = localStorage.getItem('username');
+    const role = localStorage.getItem('role');
+
+    if (username) {
+        document.getElementById('profile-avatar-initials').innerText = username.charAt(0).toUpperCase();
+        document.getElementById('profile-username-display').innerText = username;
+        document.getElementById('profile-status-display').innerText = role || 'Thành viên'; // Hiển thị vai trò làm trạng thái
+    }
+}
+
+/**
+ * Cập nhật nội dung tab Hồ sơ với thông tin người dùng
+ */
+function updateProfileTabContent() {
+    const username = localStorage.getItem('username');
+    const role = localStorage.getItem('role');
+
+    if (username) {
+        document.getElementById('profile-avatar-initials').innerText = username.charAt(0).toUpperCase();
+        document.getElementById('profile-username-display').innerText = username;
+        document.getElementById('profile-status-display').innerText = role || 'Thành viên'; // Hiển thị vai trò làm trạng thái
+    }
+}
+
+/**
+ * Hàm bổ trợ định dạng ngày tháng theo múi giờ hệ thống
+ */
+function formatSystemDate(dateString) {
+    if (!dateString) return 'N/A';
+    const date = new Date(dateString);
+    
+    try {
+        return new Intl.DateTimeFormat(systemSettings.language === 'vi' ? 'vi-VN' : 'en-US', {
+            timeZone: systemSettings.timezone,
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+        }).format(date);
+    } catch (e) {
+        // Fallback nếu timezone không hợp lệ
+        return date.toLocaleDateString();
+    }
+}
+
 /**
  * Initializes the full-screen Leaflet Map
  */
@@ -50,12 +177,14 @@ function initMap() {
     if (isNaN(startLat)) startLat = 21.0285;
     if (isNaN(startLng)) startLng = 105.8542;
     if (isNaN(startZoom)) startZoom = 13;
-
-    map = L.map('map', { zoomControl: true }).setView([startLat, startLng], startZoom);
+    
+    // Khởi tạo bản đồ với zoomControl và tắt attribution mặc định của Leaflet
+    map = L.map('map', { zoomControl: true, attributionControl: false }).setView([startLat, startLng], startZoom);
 
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
-        attribution: '© OpenStreetMap contributors'
+        // Attribution sẽ được thêm thủ công bên dưới để chỉ hiển thị OpenStreetMap
+        // attribution: '© OpenStreetMap contributors' 
     }).addTo(map);
 
     // Khởi tạo Marker Cluster Group CHỈ dành cho Scene (Ảnh mẹ)
@@ -88,6 +217,9 @@ function initMap() {
         a.layer.spiderfy();
     });
 
+    // Thêm attribution chỉ với OpenStreetMap, không có Leaflet
+    L.control.attribution({ prefix: false }).addAttribution('OpenStreetMap contributors').addTo(map);
+
     map.addLayer(markerClusterGroup);
 
     // Lưu vị trí bản đồ mỗi khi người dùng di chuyển hoặc zoom xong
@@ -127,14 +259,25 @@ function checkAuthStatus() {
     const authGuest = document.getElementById('auth-guest');
     const authLoggedIn = document.getElementById('auth-logged-in');
 
+    const avatarInitials = document.getElementById('avatar-initials');
+
     if (token && username) {
-        authGuest.style.display = 'none';
-        authLoggedIn.style.display = 'block';
-        document.getElementById('logged-username').innerText = username;
-        document.getElementById('logged-role').innerText = role || 'Thành viên';
+        authGuest.style.display = 'none'; // Hide login form
+        authLoggedIn.style.display = 'block'; // Show welcome message and buttons
+        avatarInitials.innerText = username.charAt(0).toUpperCase();
+        
+        // Chỉ hiển thị các NÚT BẤM menu admin trong sidebar
+        const adminButtons = document.querySelectorAll('.dashboard-tabs .admin-only');
+        if (role === 'Chủ sở hữu' || role === 'admin') {
+            adminButtons.forEach(btn => btn.style.display = 'block');
+        } else {
+            adminButtons.forEach(btn => btn.style.display = 'none');
+        }
     } else {
-        authGuest.style.display = 'block';
-        authLoggedIn.style.display = 'none';
+        authGuest.style.display = 'block'; // Show login form
+        authLoggedIn.style.display = 'none'; // Hide welcome message
+        avatarInitials.innerText = '?';
+        document.getElementById('user-dropdown').classList.remove('show'); // Đóng dropdown nếu không đăng nhập
     }
 }
 
@@ -166,6 +309,7 @@ async function handleLogin() {
         localStorage.setItem('userId', data.user.id);
 
         checkAuthStatus();
+        toggleDropdown(); // Đóng dropdown sau khi đăng nhập
         loadScenes(); // Reload scenes to show member/private scenes
         alert('Logged in successfully!');
     } catch (error) {
@@ -219,6 +363,7 @@ function handleLogout() {
     }
     
     checkAuthStatus();
+    toggleDropdown(); // Đóng dropdown sau khi đăng xuất
     loadScenes(); // Reload scenes to filter out private ones
     alert('Logged out successfully');
 }
@@ -411,7 +556,7 @@ async function loadScenes() {
             });
             
             // Tạo nội dung thông tin khi Hover (Tooltip)
-            const createdDate = scene.assetId?.createdAt ? new Date(scene.assetId.createdAt).toLocaleDateString('vi-VN') : 'N/A';
+            const createdDate = formatSystemDate(scene.assetId?.createdAt);
             const tooltipContent = `
                 <div class="scene-hover-info">
                     <strong>${sceneName}</strong><br>
@@ -518,6 +663,7 @@ function openEditSceneModal(scene) {
  * Deletes a scene via API
  */
 async function deleteScene(sceneId) {
+    if (!confirm('Bạn có chắc chắn muốn xóa scene này?')) return;
     const token = localStorage.getItem('jwt');
     try {
         const response = await fetch(`${API_BASE_URL}/scenes/${sceneId}`, {
@@ -527,6 +673,7 @@ async function deleteScene(sceneId) {
         if (!response.ok) throw new Error('Failed to delete scene');
         alert('Scene deleted successfully');
         loadScenes();
+        if (document.getElementById('tab-my-scenes').classList.contains('active')) loadMyScenes();
     } catch (error) {
         alert(error.message);
     }
@@ -939,3 +1086,119 @@ async function deleteHotspot(hotspotId) {
         alert(e.message);
     }
 }
+
+/**
+ * Toggles the visibility of the user dropdown menu.
+ */
+function toggleDropdown() {
+    document.getElementById('user-dropdown').classList.toggle('show');
+}
+
+/**
+ * Opens the user dashboard overlay.
+ */
+function openDashboard() {
+    const username = localStorage.getItem('username');
+    const role = localStorage.getItem('role');
+    
+    if (username) {
+        document.getElementById('sidebar-avatar').innerText = username.charAt(0).toUpperCase();
+        document.getElementById('sidebar-username').innerText = username;
+        document.getElementById('sidebar-status').innerText = role || 'Thành viên';
+    }
+
+    document.getElementById('dashboard-overlay').style.display = 'flex';
+    document.getElementById('user-dropdown').classList.remove('show'); // Close dropdown
+    // Mở tab profile mặc định khi mở dashboard
+    openDashboardTab('profile');
+}
+
+/**
+ * Closes the user dashboard overlay.
+ */
+function closeDashboard() {
+    document.getElementById('dashboard-overlay').style.display = 'none';
+}
+
+/**
+ * Tải danh sách scene của chính người dùng đăng nhập
+ */
+async function loadMyScenes() {
+    const token = localStorage.getItem('jwt');
+    const listContainer = document.getElementById('my-scenes-list');
+    listContainer.innerHTML = '<p>Đang tải danh sách...</p>';
+
+    try {
+        const res = await fetch(`${API_BASE_URL}/me/scenes`, {
+            headers: { 'Authorization': `Bearer ${token}` }
+        });
+        const scenes = await res.json();
+        if (!res.ok) throw new Error(scenes.message);
+
+        listContainer.innerHTML = '';
+        if (scenes.length === 0) {
+            listContainer.innerHTML = '<p>Bạn chưa tạo scene nào.</p>';
+            return;
+        }
+
+        scenes.forEach(scene => {
+            const item = document.createElement('div');
+            item.className = 'dashboard-item';
+            item.innerHTML = `
+                <div class="item-info">
+                    <strong>${scene.name || scene.title}</strong>
+                    <span>Quyền: ${scene.privacy} - Ngày tạo: ${formatSystemDate(scene.createdAt)}</span>
+                </div>
+                <div class="item-actions">
+                    <button class="edit-btn" id="edit-${scene._id}">Sửa</button>
+                    <button class="delete-btn" onclick="deleteScene('${scene._id}')">Xóa</button>
+                </div>
+            `;
+            listContainer.appendChild(item);
+            // Gán sự kiện sửa bằng code để truyền object scene an toàn
+            document.getElementById(`edit-${scene._id}`).onclick = () => openEditSceneModal(scene);
+        });
+    } catch (e) {
+        listContainer.innerHTML = `<p style="color:#ff4d4d">Lỗi: ${e.message}</p>`;
+    }
+}
+
+/**
+ * Opens a specific tab within the dashboard.
+ * @param {string} tabName - The ID of the tab pane to open (e.g., 'profile', 'my-scenes').
+ */
+function openDashboardTab(tabName) {
+    // Ẩn tất cả các tab pane
+    document.querySelectorAll('.dashboard-tab-pane').forEach(pane => {
+        pane.classList.remove('active');
+    });
+    // Bỏ active khỏi tất cả các nút tab
+    document.querySelectorAll('.dashboard-tabs .tab-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+
+    // Hiển thị tab pane được chọn
+    const selectedPane = document.getElementById(`tab-${tabName}`);
+    if (selectedPane) {
+        selectedPane.classList.add('active');
+        // Nếu là tab profile, cập nhật nội dung
+        if (tabName === 'profile') {
+            updateProfileTabContent();
+        }
+        if (tabName === 'my-scenes') {
+            loadMyScenes();
+        }
+    }
+
+    // Đánh dấu nút tab được chọn là active
+    const selectedTabButton = document.querySelector(`.dashboard-tabs .tab-btn[onclick="openDashboardTab('${tabName}')"]`);
+    if (selectedTabButton) {
+        selectedTabButton.classList.add('active');
+    }
+
+    // Cập nhật avatar initials khi mở dashboard
+    const username = localStorage.getItem('username');
+    if (username) {
+        document.getElementById('avatar-initials').innerText = username.charAt(0).toUpperCase();
+    }
+}