thay đổi quyền chia sẻ của user và quyền xem của các scene

frontend/js/main_map.js

@@ -1528,12 +1528,14 @@ async function loadMyScenes() {
                             <span>🔒 ${scene.privacy}</span>
                             <span>👤 ${scene.createdBy?.username || 'Bạn'}</span>
                             <span>📅 ${formatSystemDate(scene.createdAt)}</span>
+                            <span>👁️ ${scene.views || 0} lượt xem</span>
                         </div>
                         ${statusBadge}
                     </div>
                     <div class="media-actions" style="border: none; padding: 0;">
                         <button class="edit-btn-small" id="edit-scene-${scene._id}" ${scene.status === 'processing' ? 'disabled style="opacity:0.5; cursor:not-allowed;"' : ''}>Sửa</button>
                         <button class="delete-btn-small" id="delete-scene-${scene._id}">Xóa</button>
+                        <button class="edit-btn-small" id="view-stats-${scene._id}" style="background: #6f42c1;">Thống kê</button>
                     </div>
                 </div>
             `;
@@ -1555,6 +1557,11 @@ async function loadMyScenes() {
                 closeDashboard();
                 deleteScene(scene._id);
             };
+
+            // Xử lý nút Thống kê
+            document.getElementById(`view-stats-${scene._id}`).onclick = () => {
+                showViewStatsModal(scene._id, scene.name || scene.title);
+            };
         });
     } catch (e) {
         listContainer.innerHTML = `<p style="color:#ff4d4d">Lỗi: ${e.message}</p>`;
@@ -2280,6 +2287,85 @@ async function updateSystemSettings(e) {
     }
 }
 
+let viewStatsChartInstance = null; // Biến để lưu instance của Chart.js
+
+/**
+ * Mở modal hiển thị biểu đồ thống kê lượt xem
+ */
+async function showViewStatsModal(sceneId, sceneTitle) {
+    const token = localStorage.getItem('jwt');
+    const modal = document.getElementById('view-stats-modal');
+    const titleElem = document.getElementById('view-stats-modal-title');
+    const chartCanvas = document.getElementById('view-stats-chart');
+
+    if (titleElem) titleElem.innerText = `Thống kê lượt xem: ${sceneTitle}`;
+    modal.style.display = 'flex';
+
+    try {
+        const res = await fetch(`${API_BASE_URL}/me/scenes/${sceneId}/view-stats`, {
+            headers: { 'Authorization': `Bearer ${token}` }
+        });
+        const viewHistory = await res.json();
+        if (!res.ok) throw new Error(viewHistory.message);
+
+        // Chuẩn bị dữ liệu cho biểu đồ
+        const labels = [];
+        const data = [];
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+
+        // Lấy dữ liệu 30 ngày gần nhất
+        for (let i = 29; i >= 0; i--) {
+            const d = new Date(today);
+            d.setDate(today.getDate() - i);
+            labels.push(d.toLocaleDateString(systemSettings.language === 'vi' ? 'vi-VN' : 'en-US', { day: '2-digit', month: '2-digit' }));
+            
+            const entry = viewHistory.find(vh => new Date(vh.date).setHours(0,0,0,0) === d.getTime());
+            data.push(entry ? entry.count : 0);
+        }
+
+        // Nếu có instance cũ, hủy nó đi trước khi tạo mới
+        if (viewStatsChartInstance) {
+            viewStatsChartInstance.destroy();
+        }
+
+        viewStatsChartInstance = new Chart(chartCanvas, {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Lượt xem',
+                    data: data,
+                    borderColor: '#007bff',
+                    backgroundColor: 'rgba(0, 123, 255, 0.2)',
+                    fill: true,
+                    tension: 0.3
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: { y: { beginAtZero: true } }
+            }
+        });
+
+    } catch (e) {
+        showNotification("Không thể tải thống kê lượt xem: " + e.message, 'error');
+        closeViewStatsModal();
+    }
+}
+
+/**
+ * Đóng modal thống kê lượt xem
+ */
+window.closeViewStatsModal = function() {
+    document.getElementById('view-stats-modal').style.display = 'none';
+    if (viewStatsChartInstance) {
+        viewStatsChartInstance.destroy(); // Hủy biểu đồ để giải phóng bộ nhớ
+        viewStatsChartInstance = null;
+    }
+};
+
 /**
  * Opens a specific tab within the dashboard.
  * @param {string} tabName - The ID of the tab pane to open (e.g., 'profile', 'my-scenes').