Thêm tính năng hiển thị ảnh ở quản lí ảnh và media

frontend/css/style.css

@@ -689,3 +689,64 @@ html, body {
     visibility: visible;
     top: -55px; /* Nhích lên một chút khi xuất hiện */
 }
+
+/* --- Media Library Dashboard --- */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 20px;
+    margin-top: 15px;
+}
+
+.media-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: column;
+}
+
+.media-card.trash-item { border-color: rgba(220, 53, 69, 0.4); }
+
+.media-thumb {
+    position: relative;
+    width: 100%;
+    height: 120px;
+    background: #000;
+}
+
+.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
+
+.badge-trash {
+    position: absolute; top: 8px; right: 8px;
+    background: #dc3545; color: white; font-size: 10px;
+    padding: 2px 6px; border-radius: 4px; font-weight: bold;
+}
+
+.media-info { padding: 12px; flex: 1; }
+.media-info strong { display: block; font-size: 15px; margin-bottom: 5px; }
+.media-info .desc { font-size: 12px; color: #aaa; margin-bottom: 8px; }
+.media-info .parent-link { font-size: 11px; color: #007bff; margin-bottom: 5px; }
+.media-info .date { font-size: 10px; color: #666; }
+
+.media-actions {
+    padding: 10px;
+    display: flex;
+    gap: 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.edit-btn-small, .delete-btn-small {
+    flex: 1;
+    padding: 6px;
+    font-size: 11px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.edit-btn-small { background: #28a745; color: white; }
+.delete-btn-small { background: #dc3545; color: white; }
+.media-actions button:hover { opacity: 0.8; }

frontend/js/main_map.js

@@ -1200,6 +1200,114 @@ async function loadMyScenes() {
     }
 }
 
+/**
+ * Tải và hiển thị kho ảnh/media của người dùng
+ */
+async function loadMyAssets() {
+    const token = localStorage.getItem('jwt');
+    const gridContainer = document.getElementById('media-library-list');
+    const currentUserId = localStorage.getItem('userId');
+    const userRole = localStorage.getItem('role');
+    
+    gridContainer.innerHTML = '<p>Đang tải kho ảnh...</p>';
+
+    try {
+        const res = await fetch(`${API_BASE_URL}/me/assets`, {
+            headers: { 'Authorization': `Bearer ${token}` }
+        });
+        const assets = await res.json();
+        if (!res.ok) throw new Error(assets.message);
+
+        gridContainer.innerHTML = '';
+        if (assets.length === 0) {
+            gridContainer.innerHTML = '<p>Kho ảnh trống.</p>';
+            return;
+        }
+
+        assets.forEach(asset => {
+            const scene = asset.linkedScene;
+            const isTrash = !scene;
+            const parentNames = asset.parentScenes?.map(p => p.name || p.title).join(', ');
+            
+            const card = document.createElement('div');
+            card.className = `media-card ${isTrash ? 'trash-item' : ''}`;
+            
+            // Build inner HTML without the onclick for edit/delete buttons
+            let innerHtml = `
+                <div class="media-thumb">
+                    <img src="${API_BASE_URL}/assets/view/${asset._id}?token=${token}" alt="Thumbnail">
+                    ${isTrash ? '<span class="badge-trash">Ảnh rác</span>' : ''}
+                </div>
+                <div class="media-info">
+                    <strong>${scene ? (scene.name || scene.title) : 'Chưa gắn Scene'}</strong>
+                    <p class="desc">${scene?.description || 'Không có mô tả'}</p>
+                    ${parentNames ? `<p class="parent-link">🔗 Liên kết từ: ${parentNames}</p>` : ''}
+                    <span class="date">Tải lên: ${formatSystemDate(asset.createdAt)}</span>
+                </div>
+                <div class="media-actions">
+                </div>
+            `;
+            card.innerHTML = innerHtml;
+
+            // Add edit button and its event listener separately
+            if (scene && asset.uploadedBy === currentUserId) {
+                const editButton = document.createElement('button');
+                editButton.className = 'edit-btn-small';
+                editButton.innerText = 'Sửa Scene';
+                editButton.addEventListener('click', () => openEditFromMedia(scene)); // Pass scene object directly
+                card.querySelector('.media-actions').appendChild(editButton);
+            }
+
+            // Add delete button and its event listener
+            if (asset.uploadedBy === currentUserId || (isTrash && userRole === 'Chủ sở hữu')) {
+                const deleteButton = document.createElement('button');
+                deleteButton.className = 'delete-btn-small';
+                deleteButton.innerText = 'Xóa';
+                deleteButton.addEventListener('click', () => deleteAsset(asset._id));
+                card.querySelector('.media-actions').appendChild(deleteButton);
+            }
+
+            gridContainer.appendChild(card);
+        });
+    } catch (e) {
+        gridContainer.innerHTML = `<p style="color:#ff4d4d">Lỗi nạp media: ${e.message}</p>`;
+    }
+}
+
+/**
+ * Xóa ảnh khỏi kho media
+ */
+window.deleteAsset = async function(assetId) {
+    if (!confirm('Bạn có chắc chắn muốn xóa ảnh này? Nếu ảnh đang được gắn vào một cảnh, cảnh đó cũng sẽ bị xóa vĩnh viễn.')) {
+        return;
+    }
+
+    const token = localStorage.getItem('jwt');
+    try {
+        const res = await fetch(`${API_BASE_URL}/assets/${assetId}`, {
+            method: 'DELETE',
+            headers: { 'Authorization': `Bearer ${token}` }
+        });
+        const data = await res.json();
+
+        if (!res.ok) throw new Error(data.message);
+
+        alert(data.message);
+        loadMyAssets(); // Nạp lại kho ảnh
+        loadScenes();   // Nạp lại bản đồ nếu có scene bị xóa kèm theo
+    } catch (e) {
+        alert("Lỗi khi xóa: " + e.message);
+    }
+};
+
+window.openEditFromMedia = function(scene) {
+    if (!scene || !scene._id) {
+        alert("Không thể chỉnh sửa: Ảnh này không được gắn với một Scene hợp lệ.");
+        return;
+    }
+    openEditSceneModal(scene);
+};
+
 /**
  * Opens a specific tab within the dashboard.
  * @param {string} tabName - The ID of the tab pane to open (e.g., 'profile', 'my-scenes').
@@ -1225,6 +1333,9 @@ function openDashboardTab(tabName) {
         if (tabName === 'my-scenes') {
             loadMyScenes();
         }
+        if (tabName === 'media-library') {
+            loadMyAssets();
+        }
     }
 
     // Đánh dấu nút tab được chọn là active