.

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

@@ -173,9 +173,65 @@
 
     object-fit: cover;
 }
-/* ==========================
-   FACE MODAL
-========================== */
+
+    .face-gallery {
+        display: grid;
+        grid-template-columns: 1.3fr 1fr;
+        gap: 24px;
+        align-items: start;
+    }
+
+    .face-gallery-image {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .face-detail-panel {
+        display: grid;
+        gap: 14px;
+    }
+
+    .action-group {
+    display: flex;
+    gap: 8px;
+}
+
+.btn-small {
+    height: 38px;
+
+    padding: 0 16px;
+
+    font-size: .85rem;
+
+    border-radius: 10px;
+}
+    .face-detail-panel .detail-item {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid var(--border);
+        border-radius: 14px;
+        padding: 16px;
+    }
+
+    .face-detail-panel .detail-item span {
+        display: block;
+        font-size: 0.85rem;
+        color: var(--text-light);
+        margin-bottom: 6px;
+    }
+
+    .face-detail-panel .detail-item p {
+        margin: 0;
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text-white);
+    }
+
+    .face-detail-panel .detail-item p#detailStatus {
+        color: var(--success);
+    }
+
+
 
 .face-modal {
     display: none;

src/main/resources/templates/cms/face-id/faceID-list.html

@@ -58,11 +58,32 @@
                                 </td>
                                 <td th:text="${faceProfile.userEmail}">user@example.com</td>
                                 <td>
-                                    <img th:src="${faceProfile.thumbnailUrl}" alt="Face" style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;" th:if="${faceProfile.thumbnailUrl}">
+                                    <button class="detail-btn btn-small" type="button" th:data-id="${faceProfile.id}"
+                                        th:data-name="${faceProfile.userFullName}"
+                                        th:data-face-code="${faceProfile.faceCode}"
+                                        th:data-sample-count="${faceProfile.sampleCount}"
+                                        th:data-email="${faceProfile.userEmail}"
+                                        th:data-thumbnail-url="${faceProfile.thumbnailUrl}">
+                                        Chi tiết
+                                    </button>
                                 </td>
 
                                 <td>
-                                    <button class="detail-btn btn-primary" type="button">Chi tiết</button>
+                                    <div class="action-group">
+
+                                        <form method="post">
+                                            <button class="btn-primary btn-small">
+                                                Phê duyệt
+                                            </button>
+                                        </form>
+
+                                        <form method="post">
+                                            <button class="btn-secondary btn-small">
+                                                Từ chối
+                                            </button>
+                                        </form>
+
+                                    </div>
                                 </td>
                             </tr>
                         </tbody>
@@ -81,7 +102,7 @@
         <div class="face-modal-content">
 
             <div class="face-modal-header">
-                <h2>Ảnh Face ID</h2>
+                <h2>Chi tiết Face ID</h2>
 
                 <button class="close-btn" onclick="closeFaceGallery()">
                     ✕
@@ -90,7 +111,37 @@
 
             <div class="face-gallery">
 
-                <img id="facePreviewImage" src="https://i.pinimg.com/736x/6a/5e/fc/6a5efc25bf7c7603afac79d7046f999c.jpg" alt="Face ID">
+                <div class="face-gallery-image">
+                    <img id="facePreviewImage"
+                        src="https://i.pinimg.com/736x/6a/5e/fc/6a5efc25bf7c7603afac79d7046f999c.jpg" alt="Face ID">
+                </div>
+
+                <div class="face-detail-panel">
+                    <div class="detail-item">
+                        <span>Mã SV</span>
+                        <p id="detailId">--</p>
+                    </div>
+                    <div class="detail-item">
+                        <span>Họ tên</span>
+                        <p id="detailName">--</p>
+                    </div>
+                    <div class="detail-item">
+                        <span>Face ID</span>
+                        <p id="detailFaceCode">--</p>
+                    </div>
+                    <div class="detail-item">
+                        <span>Số mẫu</span>
+                        <p id="detailSampleCount">--</p>
+                    </div>
+                    <div class="detail-item">
+                        <span>Email</span>
+                        <p id="detailEmail">--</p>
+                    </div>
+                    <div class="detail-item">
+                        <span>Trạng thái</span>
+                        <p id="detailStatus">--</p>
+                    </div>
+                </div>
 
             </div>
 
@@ -98,25 +149,57 @@
 
     </div>
     <script>
-        function openFaceGallery() {
+        const facePreviewImage = document.getElementById("facePreviewImage");
+        const detailId = document.getElementById("detailId");
+        const detailName = document.getElementById("detailName");
+        const detailFaceCode = document.getElementById("detailFaceCode");
+        const detailSampleCount = document.getElementById("detailSampleCount");
+        const detailEmail = document.getElementById("detailEmail");
+        const detailStatus = document.getElementById("detailStatus");
 
-            document
-                .getElementById("faceGalleryModal")
-                .classList.add("show");
+        function openFaceGallery() {
+            document.getElementById("faceGalleryModal").classList.add("show");
         }
 
         function closeFaceGallery() {
+            document.getElementById("faceGalleryModal").classList.remove("show");
+        }
 
-            document
-                .getElementById("faceGalleryModal")
-                .classList.remove("show");
+        function formatDetailValue(value, suffix = "") {
+            return value !== undefined && value !== null && value !== "" ? `${value}${suffix}` : "--";
         }
 
-        window.onclick = function (event) {
+        function getFaceStatus(sampleCount) {
+            const count = Number(sampleCount);
+            if (Number.isNaN(count)) {
+                return "--";
+            }
+            return count >= 5 ? "Đã đăng ký" : "Chưa đủ mẫu";
+        }
 
-            const modal =
-                document.getElementById("faceGalleryModal");
+        document.querySelectorAll('.detail-btn').forEach(button => {
+            button.addEventListener('click', () => {
+                const faceId = button.dataset.id;
+                const name = button.dataset.name;
+                const faceCode = button.dataset.faceCode;
+                const sampleCount = button.dataset.sampleCount;
+                const email = button.dataset.email;
+                const thumbnailUrl = button.dataset.thumbnailUrl;
+
+                detailId.textContent = formatDetailValue(faceId);
+                detailName.textContent = formatDetailValue(name);
+                detailFaceCode.textContent = formatDetailValue(faceCode);
+                detailSampleCount.textContent = formatDetailValue(sampleCount, ' mẫu');
+                detailEmail.textContent = formatDetailValue(email);
+                detailStatus.textContent = getFaceStatus(sampleCount);
+                facePreviewImage.src = thumbnailUrl ? thumbnailUrl : "https://i.pinimg.com/736x/6a/5e/fc/6a5efc25bf7c7603afac79d7046f999c.jpg";
+
+                openFaceGallery();
+            });
+        });
 
+        window.onclick = function (event) {
+            const modal = document.getElementById("faceGalleryModal");
             if (event.target === modal) {
                 closeFaceGallery();
             }