Add detail in report

src/main/java/com/attendenceSystem/module/report/dto/response/ReportDetailResponse.java

@@ -1,6 +1,7 @@
 package com.attendenceSystem.module.report.dto.response;
 
 import java.time.LocalDateTime;
+import java.util.List;
 
 import com.attendenceSystem.module.report.entity.enums.ReportStatus;
 
@@ -14,5 +15,6 @@ public record ReportDetailResponse(
         ReportStatus status,
         String rejectReason,
         LocalDateTime createdAt,
-        LocalDateTime reviewedAt) {
+        LocalDateTime reviewedAt,
+        List<String> sharedUserNames) {
 }

src/main/java/com/attendenceSystem/module/report/entity/Report.java

@@ -7,6 +7,8 @@ import org.hibernate.annotations.CreationTimestamp;
 import com.attendenceSystem.module.report.entity.enums.ReportStatus;
 import com.attendenceSystem.module.user.entity.User;
 
+import java.util.List;
+
 import jakarta.persistence.Column;
 import jakarta.persistence.Entity;
 import jakarta.persistence.FetchType;
@@ -16,6 +18,7 @@ import jakarta.persistence.Id;
 import jakarta.persistence.JoinColumn;
 import jakarta.persistence.Lob;
 import jakarta.persistence.ManyToOne;
+import jakarta.persistence.OneToMany;
 import jakarta.persistence.Table;
 
 import lombok.AllArgsConstructor;
@@ -66,4 +69,7 @@ public class Report {
 
     @Column(name = "reviewed_at")
     private LocalDateTime reviewedAt;
-}
+
+    @OneToMany(mappedBy = "report", fetch = FetchType.LAZY)
+    private List<ReportShare> shares;
+}

src/main/java/com/attendenceSystem/module/report/mapper/response/ReportDetailResponseMapper.java

@@ -1,7 +1,12 @@
 package com.attendenceSystem.module.report.mapper.response;
 
+import java.util.Collections;
+import java.util.List;
+import java.util.stream.Collectors;
+
 import com.attendenceSystem.module.report.dto.response.ReportDetailResponse;
 import com.attendenceSystem.module.report.entity.Report;
+import com.attendenceSystem.module.report.entity.ReportShare;
 
 import lombok.AccessLevel;
 import lombok.NoArgsConstructor;
@@ -10,6 +15,14 @@ import lombok.NoArgsConstructor;
 public class ReportDetailResponseMapper {
 
     public static ReportDetailResponse fromEntity(Report report) {
+        List<String> sharedUserNames = Collections.emptyList();
+        if (report.getShares() != null) {
+            sharedUserNames = report.getShares().stream()
+                    .map(ReportShare::getUser)
+                    .map(user -> user.getFullName())
+                    .collect(Collectors.toList());
+        }
+
         return new ReportDetailResponse(
                 report.getId(),
                 report.getTitle(),
@@ -20,7 +33,8 @@ public class ReportDetailResponseMapper {
                 report.getStatus(),
                 report.getRejectReason(),
                 report.getCreatedAt(),
-                report.getReviewedAt()
+                report.getReviewedAt(),
+                sharedUserNames
         );
     }
-}
+}

src/main/java/com/attendenceSystem/module/report/repository/ReportRepository.java

@@ -1,8 +1,12 @@
 package com.attendenceSystem.module.report.repository;
 
+import java.util.Optional;
+
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 import org.springframework.stereotype.Repository;
 
 import com.attendenceSystem.module.report.entity.Report;
@@ -15,4 +19,7 @@ public interface ReportRepository extends JpaRepository<Report, Long> {
     long countByEmployeeAndStatus(User employee, ReportStatus status);
     Page<Report> findByEmployeeOrderByCreatedAtDesc(User employee, Pageable pageable);
     Page<Report> findAllByOrderByCreatedAtDesc(Pageable pageable);
-}
+
+    @Query("SELECT r FROM Report r LEFT JOIN FETCH r.shares rs LEFT JOIN FETCH rs.user WHERE r.id = :id")
+    Optional<Report> findByIdWithShares(@Param("id") Long id);
+}

src/main/java/com/attendenceSystem/module/report/service/impl/ReportServiceImpl.java

@@ -107,7 +107,7 @@ public class ReportServiceImpl implements ReportService {
 
     @Override
     public ReportDetailResponse getReportById(final Long id) {
-        Report report = reportRepository.findById(id)
+        Report report = reportRepository.findByIdWithShares(id)
                 .orElseThrow(() -> new ResourceNotFoundException("Không tìm thấy báo cáo với id: " + id));
         return ReportDetailResponseMapper.fromEntity(report);
     }

src/main/resources/static/css/document/document-list.css

@@ -1,5 +1,114 @@
 @import url("../base.css");
 
+/* ==========================
+   MODAL
+========================== */
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background: var(--bg-card);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--border);
+    border-radius: 24px;
+    padding: 32px;
+    max-width: 600px;
+    width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
+    position: relative;
+}
+
+.modal-content h2 {
+    font-size: 1.4rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    color: var(--text-white);
+    padding-right: 30px;
+}
+
+.modal-content p {
+    margin-bottom: 12px;
+    color: var(--text-light);
+    font-size: .95rem;
+    line-height: 1.5;
+}
+
+.modal-content p strong {
+    color: var(--text-white);
+    display: inline-block;
+    min-width: 140px;
+}
+
+.modal-content .report-detail,
+.modal-content .report-shared-users,
+.modal-content .report-attachments,
+.modal-content .report-link {
+    margin-bottom: 16px;
+    padding: 12px 16px;
+    background: rgba(255, 255, 255, .04);
+    border-radius: 12px;
+    border: 1px solid var(--border);
+}
+
+.modal-content .report-detail strong,
+.modal-content .report-shared-users strong,
+.modal-content .report-attachments strong,
+.modal-content .report-link strong {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-white);
+    font-size: .9rem;
+}
+
+.modal-content .report-detail p,
+.modal-content .report-shared-users div,
+.modal-content .report-attachments div,
+.modal-content .report-link div {
+    color: var(--text-light);
+    font-size: .9rem;
+    line-height: 1.6;
+}
+
+.shared-user-tag {
+    display: inline-block;
+    background: rgba(99, 102, 241, .15);
+    color: var(--indigo-06);
+    padding: 4px 12px;
+    border-radius: 999px;
+    font-size: .85rem;
+    font-weight: 500;
+    margin: 2px 4px;
+}
+
+.close-btn {
+    position: absolute;
+    top: 16px;
+    right: 20px;
+    font-size: 1.8rem;
+    color: var(--text-gray);
+    cursor: pointer;
+    transition: .25s;
+    line-height: 1;
+}
+
+.close-btn:hover {
+    color: var(--text-white);
+    transform: rotate(90deg);
+}
 
 .document-card {
     background: var(--bg-card);

src/main/resources/templates/cms/document/document-detail.html

@@ -1,4 +1,4 @@
-<div id="reportModal" class="modal">
+<div id="reportModal" class="modal" th:fragment="reportModal">
 
     <div class="modal-content">
 
@@ -7,7 +7,7 @@
         <h2 id="modalTitle"></h2>
 
         <p>
-            <strong>Nhân viên:</strong>
+            <strong>Người chia sẻ:</strong>
             <span id="modalEmployee"></span>
         </p>
 
@@ -21,13 +21,18 @@
             <p id="modalContent"></p>
         </div>
 
+        <div class="report-shared-users">
+            <strong>Người được chia sẻ:</strong>
+            <div id="modalSharedUsers"></div>
+        </div>
+
         <div class="report-attachments">
-            <strong>File đính kèm:</strong>
+            <strong>Tập đính kèm:</strong>
             <div id="modalFiles"></div>
         </div>
 
         <div class="report-link">
-            <strong>Link tài liệu:</strong>
+            <strong>Liên kết:</strong>
             <div id="modalLink"></div>
         </div>
 

src/main/resources/templates/cms/document/document-list.html

@@ -35,13 +35,13 @@
                                     <th>Ngày nộp</th>
                                     <th>File đính kèm</th>
                                     <th>Link tài liệu</th>
-                                    
+                                    <th>Hành động</th>
                                 </tr>
                             </thead>
 
                             <tbody id="reportTableBody">
                                 <tr>
-                                    <td colspan="5" style="text-align:center">Đang tải...</td>
+                                    <td colspan="6" style="text-align:center">Đang tải...</td>
                                 </tr>
                             </tbody>
                         </table>
@@ -69,6 +69,9 @@
         </div>
     </div>
 
+    <!-- Modal chi tiết báo cáo -->
+    <div th:replace="~{cms/document/document-detail :: reportModal}"></div>
+
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const tableBody = document.getElementById('reportTableBody');
@@ -129,19 +132,95 @@
                             '<td>' + report.title + '</td>' +
                             '<td>' + formattedDate + '</td>' +
                             '<td>' + filesHtml + '</td>' +
-                            '<td>' + linkHtml + '</td>';
+                            '<td>' + linkHtml + '</td>' +
+                            '<td><button class="btn btn-detail" data-id="' + report.id + '">Chi tiết</button></td>';
 
                         tableBody.appendChild(row);
                     });
+
+                    // Gắn sự kiện click cho các nút Chi tiết
+                    document.querySelectorAll('.btn-detail').forEach(button => {
+                        button.addEventListener('click', function() {
+                            const reportId = this.getAttribute('data-id');
+                            openReportDetail(reportId);
+                        });
+                    });
                 } else {
-                    tableBody.innerHTML = '<tr><td colspan="5" style="text-align:center">Không có báo cáo nào</td></tr>';
+                    tableBody.innerHTML = '<tr><td colspan="6" style="text-align:center">Không có báo cáo nào</td></tr>';
                 }
             })
             .catch(error => {
                 console.error('Error loading reports:', error);
-                tableBody.innerHTML = '<tr><td colspan="5" style="text-align:center">Lỗi khi tải danh sách báo cáo</td></tr>';
+                tableBody.innerHTML = '<tr><td colspan="6" style="text-align:center">Lỗi khi tải danh sách báo cáo</td></tr>';
             });
+
+            // Modal functions
+            const modal = document.getElementById('reportModal');
+            const closeBtn = modal.querySelector('.close-btn');
+
+            closeBtn.onclick = function() {
+                modal.style.display = 'none';
+            };
+
+            window.onclick = function(event) {
+                if (event.target === modal) {
+                    modal.style.display = 'none';
+                }
+            };
+
+            async function openReportDetail(reportId) {
+                try {
+                    const response = await fetch('/api/report/' + reportId);
+                    if (!response.ok) {
+                        throw new Error('Không thể tải chi tiết báo cáo');
+                    }
+                    const data = await response.json();
+
+                    document.getElementById('modalTitle').textContent = data.title || '--';
+                    document.getElementById('modalEmployee').textContent = data.employeeName || '--';
+
+                    const date = data.createdAt ? new Date(data.createdAt) : null;
+                    document.getElementById('modalDate').textContent = date ? date.toLocaleDateString('vi-VN') : '--';
+
+                    document.getElementById('modalContent').textContent = data.content || '--';
+
+                    // Hiển thị người được chia sẻ
+                    const sharedUsersDiv = document.getElementById('modalSharedUsers');
+                    if (data.sharedUserNames && data.sharedUserNames.length > 0) {
+                        sharedUsersDiv.innerHTML = data.sharedUserNames.map(name => 
+                            '<span class="shared-user-tag">' + name + '</span>'
+                        ).join(' ');
+                    } else {
+                        sharedUsersDiv.innerHTML = '<span>Không có</span>';
+                    }
+
+                    // Hiển thị tập đính kèm
+                    const filesDiv = document.getElementById('modalFiles');
+                    if (data.attachmentFiles) {
+                        const filePaths = data.attachmentFiles.split(',');
+                        filesDiv.innerHTML = filePaths.map(path => {
+                            const filename = path.split('/').pop();
+                            return '<a href="' + path + '" class="file-link" download>📎 ' + filename + '</a>';
+                        }).join('<br>');
+                    } else {
+                        filesDiv.innerHTML = '<span>Không có</span>';
+                    }
+
+                    // Hiển thị liên kết
+                    const linkDiv = document.getElementById('modalLink');
+                    if (data.attachmentUrl) {
+                        linkDiv.innerHTML = '<a href="' + data.attachmentUrl + '" target="_blank" class="file-link">🔗 Mở link</a>';
+                    } else {
+                        linkDiv.innerHTML = '<span>Không có</span>';
+                    }
+
+                    modal.style.display = 'flex';
+                } catch (error) {
+                    console.error('Error loading report detail:', error);
+                    alert('Lỗi khi tải chi tiết báo cáo');
+                }
+            }
         });
     </script>
 </body>
-</html>
+</html>

src/main/resources/templates/cms/sidebar/sidebar-admin.html

@@ -18,7 +18,7 @@
         <li class="sidebar-option">
             <a href="/dashboard/admin" class="sidebar-link">
                 <span>📊</span>
-                Dashboard
+                Tổng quan
             </a>
         </li>
 

src/main/resources/templates/cms/sidebar/sidebar-employee.html

@@ -18,7 +18,7 @@
         <li class="sidebar-option">
             <a href="/dashboard/employee" class="sidebar-link">
                 <span>📊</span>
-                Dashboard
+                Tổng quan
             </a>
         </li>
 

src/main/resources/templates/cms/sidebar/sidebar-manage.html

@@ -24,7 +24,7 @@
         <li class="sidebar-option">
             <a href="/dashboard/manager" class="sidebar-link">
                 <span>📊</span>
-                Dashboard
+                Tổng quan
             </a>
         </li>