a

src/main/resources/static/css/dashboard/dashboard-employee.css

@@ -235,6 +235,34 @@
     background: var(--bg-table);
 }
 
+
+/* ===================================
+   ATTENDANCE HISTORY
+=================================== */
+
+.attendance-history {
+    background: var(--bg-card);
+
+    border: 1px solid var(--border);
+
+    border-radius: 24px;
+
+    backdrop-filter: blur(20px);
+
+    overflow: hidden;
+}
+
+.attendance-history .section-title {
+    margin: 0;
+
+    padding: 20px 24px;
+
+    border-bottom: 1px solid var(--border);
+}
+
+.attendance-history .table-wrapper {
+    padding: 0;
+}
 /* ===================================
    STATUS BADGE (SYSTEM UNIFIED)
 =================================== */

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

@@ -19,13 +19,13 @@
 }
 
 .document-table {
-    width: 100%;
-    min-width: 1200px;
+    width: 78%;
+    min-width: 1180px;
     border-collapse: collapse;
 }
 
 .document-table thead {
-    background: rgba(255, 255, 255, .03);
+    background: rgba(8, 3, 31, 0.08);
 }
 
 .document-table th {
@@ -40,7 +40,7 @@
 .document-table td {
     padding: 18px;
     color: #e2e8f0;
-    border-bottom: 1px solid rgba(255, 255, 255, .05);
+    border-bottom: 1px solid rgba(15, 8, 53, 0.05);
     vertical-align: middle;
 }
 
@@ -49,7 +49,7 @@
 }
 
 .document-table tbody tr:hover {
-    background: rgba(255, 255, 255, .03);
+    background: rgba(7, 2, 31, 0.03);
 }
 
 /* ==========================
@@ -58,7 +58,7 @@
 
 .file-link {
     color: var(--indigo-06);
-    font-weight: 600;
+    font-weight: 500;
     text-decoration: none;
     transition: .25s;
 }

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

@@ -4,343 +4,588 @@
    FORM CARD SYSTEM
 =================================== */
 
-.dashboard-card{
-    background:var(--bg-card);
+.dashboard-card {
+    background: var(--bg-card);
 
-    border:1px solid var(--border);
+    border: 1px solid var(--border);
 
-    border-radius:24px;
+    border-radius: 24px;
 
-    backdrop-filter:blur(20px);
+    backdrop-filter: blur(20px);
 
-    overflow:hidden;
+    overflow: hidden;
 }
+
 video {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }
-.card-header{
-    padding:18px;
 
-    border-bottom:1px solid var(--border);
+.card-header {
+    padding: 18px;
+
+    border-bottom: 1px solid var(--border);
 }
 
-.card-header h2{
-    font-size:1.1rem;
+.card-header h2 {
+    font-size: 1.1rem;
 
-    font-weight:700;
+    font-weight: 700;
 
-    color:var(--text-white);
+    color: var(--text-white);
 }
 
-.card-body{
-    padding:18px;
+.card-body {
+    padding: 18px;
 }
 
 /* ===================================
    ROOM INPUT
 =================================== */
 
-.room-code-input{
-    display:flex;
+.room-code-input {
+    display: flex;
 
-    flex-direction:column;
+    flex-direction: column;
 
-    gap:6px;
+    gap: 6px;
 
-    margin-bottom:16px;
+    margin-bottom: 16px;
 }
 
-.room-code-input label{
-    color:var(--text-light);
+.room-code-input label {
+    color: var(--text-light);
 
-    font-size:.9rem;
+    font-size: .9rem;
 
-    font-weight:600;
+    font-weight: 600;
 }
 
-.room-code-input input{
-    padding:12px 14px;
+.room-code-input input {
+    padding: 12px 14px;
 
-    border-radius:14px;
+    border-radius: 14px;
 
-    border:1px solid var(--border);
+    border: 1px solid var(--border);
 
-    background:var(--bg-form);
+    background: var(--bg-form);
 
-    color:var(--text-white);
+    color: var(--text-white);
 
-    outline:none;
+    outline: none;
 
-    transition:.25s;
+    transition: .25s;
 }
 
-.room-code-input input:focus{
-    border-color:var(--indigo-06);
+.room-code-input input:focus {
+    border-color: var(--indigo-06);
 
-    box-shadow:0 0 0 4px var(--indigo-15);
+    box-shadow: 0 0 0 4px var(--indigo-15);
 }
 
 /* ===================================
    STUDENT SELECT AREA
 =================================== */
 
-.student-select{
-    display:flex;
+.student-select {
+    display: flex;
 
-    align-items:end;
+    align-items: end;
 
-    gap:12px;
+    gap: 12px;
 
-    margin-bottom:20px;
+    margin-bottom: 20px;
 }
 
-.student-select label{
-    display:block;
+.student-select label {
+    display: block;
 
-    color:var(--text-light);
+    color: var(--text-light);
 
-    font-size:.9rem;
+    font-size: .9rem;
 
-    font-weight:600;
+    font-weight: 600;
 }
 
-.student-select select{
-    flex:1;
+.student-select select {
+    flex: 1;
 
-    padding:12px 14px;
+    padding: 12px 14px;
 
-    border-radius:14px;
+    border-radius: 14px;
 
-    border:1px solid var(--border);
+    border: 1px solid var(--border);
 
-    background:var(--bg-table-06);
+    background: var(--bg-table-06);
 
-    color:var(--text-white);
+    color: var(--text-white);
 
-    outline:none;
+    outline: none;
 }
 
-.sample-btn{
-    padding:10px 14px;
+.sample-btn {
+    padding: 10px 14px;
 
-    border-radius:14px;
+    border-radius: 14px;
 
-    border:1px solid var(--border);
+    border: 1px solid var(--border);
 
-    background:var(--bg-table-06);
+    background: var(--bg-table-06);
 
-    color:var(--text-light);
+    color: var(--text-light);
 
-    font-weight:600;
+    font-weight: 600;
 }
 
 /* ===================================
    FACE GRID
 =================================== */
 
-.face-register-grid{
-    display:grid;
+.face-register-grid {
+    display: grid;
 
-    grid-template-columns:1fr;
+    grid-template-columns: 1fr;
 
-    gap:16px;
+    gap: 16px;
 }
 
 /* ===================================
    PANEL (CAMERA BOX)
 =================================== */
 
-.panel{
-    background:var(--bg-table);
+.panel {
+    background: var(--bg-table);
 
-    border:1px solid var(--border);
+    border: 1px solid var(--border);
 
-    border-radius:24px;
+    border-radius: 24px;
 
-    padding:16px;
+    padding: 16px;
 }
 
-.panel-header{
-    display:flex;
+.panel-header {
+    display: flex;
 
-    justify-content:space-between;
+    justify-content: space-between;
 
-    align-items:center;
+    align-items: center;
 
-    margin-bottom:12px;
+    margin-bottom: 12px;
 }
 
-.panel-header h3{
-    font-size:1rem;
+.panel-header h3 {
+    font-size: 1rem;
 
-    color:white;
+    color: white;
 }
 
-.panel-header button{
-    padding:8px 12px;
+.panel-header button {
+    padding: 8px 12px;
 
-    border-radius:12px;
+    border-radius: 12px;
 
-    border:none;
+    border: none;
 
-    cursor:pointer;
+    cursor: pointer;
 
-    background:linear-gradient(to right, var(--indigo-06), var(--purple));
+    background: linear-gradient(to right, var(--indigo-06), var(--purple));
 
-    color:var(--text-white);
+    color: var(--text-white);
 
-    font-weight:600;
+    font-weight: 600;
 }
 
 /* ===================================
    MODE TABS
 =================================== */
 
-.mode-tabs{
-    display:flex;
+.mode-tabs {
+    display: flex;
 
-    gap:10px;
+    gap: 10px;
 
-    margin-bottom:12px;
+    margin-bottom: 12px;
 }
 
-.mode-tabs button{
-    flex:1;
+.mode-tabs button {
+    flex: 1;
 
-    padding:8px 10px;
+    padding: 8px 10px;
 
-    border-radius:12px;
+    border-radius: 12px;
 
-    border:1px solid var(--border);
+    border: 1px solid var(--border);
 
-    background:var(--bg-table-06);
+    background: var(--bg-table-06);
 
-    color:var(--text-light);
+    color: var(--text-light);
 
-    cursor:pointer;
+    cursor: pointer;
 
-    transition:.25s;
+    transition: .25s;
 }
 
-.mode-tabs button.active{
-    background:var(--indigo-15);
+.mode-tabs button.active {
+    background: var(--indigo-15);
 
-    border-color:var(--indigo);
+    border-color: var(--indigo);
 
-    color:var(--text-white);
+    color: var(--text-white);
 }
 
 /* ===================================
    GUIDE BOX
 =================================== */
 
-.guide-box{
-    padding:12px;
+.guide-box {
+    padding: 12px;
 
-    border-radius:14px;
+    border-radius: 14px;
 
-    background:var(--bg-table);
+    background: var(--bg-table);
 
-    border:1px solid var(--border);
+    border: 1px solid var(--border);
 
-    margin-bottom:12px;
+    margin-bottom: 12px;
 
-    color:var(--text-gray);
+    color: var(--text-gray);
 
-    font-size:.9rem;
+    font-size: .9rem;
 }
 
 /* ===================================
    VIDEO
 =================================== */
 
-.video-wrap{
-    position:relative;
+.video-wrap {
+    position: relative;
 
-    width:96%;
+    width: 96%;
 
-    height:550px;
+    height: 550px;
 
-    border-radius:18px;
+    border-radius: 18px;
 
-    overflow:hidden;
+    overflow: hidden;
 
-    background:#000;
+    background: #000;
 
-    margin-bottom:12px;
+    margin-bottom: 12px;
 }
 
 .video-wrap video,
-.video-wrap canvas{
-    position:absolute;
+.video-wrap canvas {
+    position: absolute;
 
-    inset:0;
+    inset: 0;
 
-    width:100%;
+    width: 100%;
 
-    height:100%;
+    height: 100%;
 
-    object-fit:cover;
+    object-fit: cover;
 }
 
 /* ===================================
    ACTION ROW
 =================================== */
 
-.action-row{
-    display:flex;
+.action-row {
+    display: flex;
 
-    gap:12px;
+    gap: 12px;
 }
 
-.action-row button{
-    flex:1;
+.action-row button {
+    flex: 1;
 
-    padding:12px;
+    padding: 12px;
 
-    border-radius:14px;
+    border-radius: 14px;
 
-    border:none;
+    border: none;
 
-    cursor:pointer;
+    cursor: pointer;
 
-    font-weight:600;
+    font-weight: 600;
 
-    color:var(--text-white);
+    color: var(--text-white);
 }
 
 /* PRIMARY */
-#captureFaceBtn{
-    background:linear-gradient(to right, var(--indigo-06), var(--purple));
+#captureFaceBtn {
+    background: linear-gradient(to right, var(--indigo-06), var(--purple));
 }
 
 /* SECONDARY */
-.action-row .secondary{
-    background:var(--bg-table-06);
+.action-row .secondary {
+    background: var(--bg-table-06);
+
+    border: 1px solid var(--border);
+
+    color: var(--text-light);
+}
+
+/* ===================================
+   FACE REGISTER META
+=================================== */
+
+.face-register-meta {
+    display: flex;
+    flex-direction: column;
+
+    gap: 12px;
+
+    margin-bottom: 18px;
+}
+
+.face-register-meta h3 {
+    color: var(--text-white);
+    font-size: 1rem;
+}
+
+.face-register-meta label {
+    color: var(--text-light);
+    font-size: .9rem;
+    font-weight: 600;
+}
+
+.face-register-meta input {
+    padding: 12px 14px;
+
+    border-radius: 14px;
+
+    border: 1px solid var(--border);
+
+    background: var(--bg-form);
+
+    color: var(--text-white);
+
+    outline: none;
+
+    transition: .25s;
+}
+
+.face-register-meta input:focus {
+    border-color: var(--indigo-06);
+
+    box-shadow: 0 0 0 4px var(--indigo-15);
+}
+
+/* ===================================
+   SAMPLE SUMMARY
+=================================== */
+
+.face-sample-summary {
+    display: flex;
+
+    align-items: center;
+
+    gap: 12px;
+
+    margin-top: 6px;
+
+    flex-wrap: wrap;
+}
+
+.face-sample-count-btn {
+    padding: 10px 16px;
+
+    border-radius: 14px;
+
+    border: 1px solid var(--border);
+
+    background: var(--bg-table-06);
+
+    color: var(--text-white);
+
+    font-weight: 700;
+
+    cursor: default;
+}
+
+.face-sample-summary span {
+    color: var(--text-gray);
+
+    font-size: .9rem;
+}
+
+/* ===================================
+   FACE MODE HINT
+=================================== */
+
+.face-mode-hint {
+    margin-bottom: 12px;
+
+    color: var(--text-gray);
+
+    font-size: .9rem;
+
+    line-height: 1.5;
+}
+
+/* ===================================
+   MESSAGE
+=================================== */
+
+.message {
+    margin-top: 14px;
+
+    padding: 12px;
+
+    border-radius: 14px;
+
+    background: var(--bg-table);
+
+    border: 1px solid var(--border);
+
+    color: var(--text-light);
+
+    min-height: 48px;
 
-    border:1px solid var(--border);
+    display: flex;
 
-    color:var(--text-light);
+    align-items: center;
+}
+
+/* ===================================
+   GUIDE PANEL
+=================================== */
+
+.scan-tips {
+    list-style: none;
+
+    display: flex;
+
+    flex-direction: column;
+
+    gap: 10px;
+
+    margin-bottom: 16px;
+}
+
+.scan-tips li {
+    color: var(--text-light);
+
+    font-size: .95rem;
+}
+
+.muted {
+    color: var(--text-gray);
+
+    font-size: .9rem;
+
+    line-height: 1.6;
+}
+
+/* ===================================
+   REGISTER GRID 2 COLUMNS
+=================================== */
+
+.face-register-grid {
+    display: grid;
+
+    grid-template-columns: 2fr 1fr;
+
+    gap: 20px;
+}
+
+/* ===================================
+   STATUS BOX
+=================================== */
+
+.status-box {
+    display: flex;
+
+    flex-direction: column;
+
+    gap: 12px;
+}
+
+.status-item {
+    padding: 12px;
+
+    border-radius: 14px;
+
+    background: var(--bg-table);
+
+    border: 1px solid var(--border);
+}
+
+.status-item h4 {
+    margin-bottom: 6px;
+
+    color: var(--text-white);
+
+    font-size: .95rem;
+}
+
+.status-item p {
+    color: var(--text-gray);
+
+    font-size: .9rem;
+}
+
+/* ===================================
+   BUTTON EFFECTS
+=================================== */
+
+.panel-header button:hover,
+.action-row button:hover {
+    transform: translateY(-2px);
+
+    transition: .25s;
+}
+
+#captureFaceBtn:hover {
+    box-shadow: 0 10px 25px rgba(99, 102, 241, .25);
+}
+
+/* ===================================
+   RESPONSIVE
+=================================== */
+
+@media (max-width: 1100px) {
+
+    .face-register-grid {
+        grid-template-columns: 1fr;
+    }
+
+}
+
+@media (max-width: 768px) {
+
+    .face-sample-summary {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .action-row {
+        flex-direction: column;
+    }
+
+    .video-wrap {
+        height: 300px;
+    }
 }
 
 /* ===================================
    RESPONSIVE
 =================================== */
 
-@media(max-width:768px){
+@media(max-width:768px) {
 
-    .student-select{
-        flex-direction:column;
-        align-items:stretch;
+    .student-select {
+        flex-direction: column;
+        align-items: stretch;
     }
 
-    .action-row{
-        flex-direction:column;
+    .action-row {
+        flex-direction: column;
     }
 
-    .video-wrap{
-        height:240px;
+    .video-wrap {
+        height: 240px;
     }
 }

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

@@ -4,60 +4,60 @@
    CARD SYSTEM
 =================================== */
 
-.card{
-    background:var(--bg-card);
+.card {
+    background: var(--bg-card);
 
-    border:1px solid var(--border);
+    border: 1px solid var(--border);
 
-    border-radius:24px;
+    border-radius: 24px;
 
-    backdrop-filter:blur(20px);
+    backdrop-filter: blur(20px);
 
-    overflow:hidden;
+    overflow: hidden;
 }
 
 /* ===================================
    TABLE WRAPPER
 =================================== */
 
-.face-table{
-    width:100%;
+.face-table {
+    width: 100%;
 
-    border-collapse:collapse;
+    border-collapse: collapse;
 
-    color:var(--text-white);
+    color: var(--text-white);
 }
 
-.face-table thead{
-    background:var(--bg-table);
+.face-table thead {
+    background: var(--bg-table);
 }
 
-.face-table th{
-    text-align:left;
+.face-table th {
+    text-align: left;
 
-    padding:16px;
+    padding: 16px;
 
-    font-size:.9rem;
+    font-size: .9rem;
 
-    color:var(--text-light);
+    color: var(--text-light);
 
-    border-bottom:1px solid var(--border);
+    border-bottom: 1px solid var(--border);
 }
 
-.face-table td{
-    padding:16px;
+.face-table td {
+    padding: 16px;
 
-    border-bottom:1px solid var(--bg-form);
+    border-bottom: 1px solid var(--bg-form);
 
-    font-size:.95rem;
+    font-size: .95rem;
 }
 
-.face-table tbody tr{
-    transition:.2s;
+.face-table tbody tr {
+    transition: .2s;
 }
 
-.face-table tbody tr:hover{
-    background:var(--bg-table);
+.face-table tbody tr:hover {
+    background: var(--bg-table);
 }
 
 
@@ -65,101 +65,193 @@
    BADGE
 =================================== */
 
-.sample-badge{
-    display:inline-block;
+.sample-badge {
+    display: inline-block;
 
-    padding:6px 12px;
+    padding: 6px 12px;
 
-    border-radius:999px;
+    border-radius: 999px;
 
-    font-size:.85rem;
+    font-size: .85rem;
 
-    font-weight:600;
+    font-weight: 600;
 
-    background:var(--bg-table-015);
+    background: var(--bg-table-015);
 
-    color:var(--text-white );
+    color: var(--text-white);
 
-    border:1px solid var(--indigo-15);
+    border: 1px solid var(--indigo-15);
 }
 
 /* ===================================
    BUTTONS
 =================================== */
 
-.detail-btn{
-    padding:8px 12px;
+.detail-btn {
+    padding: 8px 12px;
 
-    border-radius:12px;
+    border-radius: 12px;
 
-    border:1px solid var(--border);
+    border: 1px solid var(--border);
 
-    background:var(--bg-table-06);
+    background: var(--bg-table-06);
 
-    color:var(--text-light);
+    color: var(--text-light);
 
-    cursor:pointer;
+    cursor: pointer;
 
-    transition:.25s;
+    transition: .25s;
 }
 
-.detail-btn:hover{
-    background:var(--indigo-15);
+.detail-btn:hover {
+    background: var(--indigo-15);
 
-    border-color:var(--indigo-06);
+    border-color: var(--indigo-06);
 
-    color:white;
+    color: white;
 }
 
 /* ===================================
    ACTION TEXT STATES
 =================================== */
 
-.status-accept{
-    color:var(--success);
+.status-accept {
+    color: var(--success);
 
-    font-weight:600;
+    font-weight: 600;
 }
 
-.status-reject{
-    color:var(--danger);
+.status-reject {
+    color: var(--danger);
 
-    font-weight:600;
+    font-weight: 600;
 }
-.btn-secondery{
-    background-color:var(--danger) ;
+
+.btn-secondery {
+    background-color: var(--danger);
     color: var(--text-white);
 }
-.btn-primary{
-    background-color:var(--success) ;
+
+.btn-primary {
+    background-color: var(--success);
     color: var(--text-white);
 }
+
 /* ===================================
    TABLE WRAPPER IMPROVEMENT
 =================================== */
 
-.card{
-    padding:0;
+.card {
+    padding: 0;
+}
+
+.card table {
+    width: 100%;
+}
+
+
+.face-gallery {
+    padding: 20px;
+
+    display: flex;
+
+    justify-content: center;
+
+    align-items: center;
+
+    min-height: 350px;
 }
 
-.card table{
-    width:100%;
+.face-gallery img {
+    max-width: 400px;
+
+    width: 100%;
+
+    border-radius: 16px;
+
+    border: 1px solid var(--border);
+
+    object-fit: cover;
 }
+/* ==========================
+   FACE MODAL
+========================== */
 
+.face-modal {
+    display: none;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: rgba(0, 0, 0, 0.75);
+
+    justify-content: center;
+    align-items: center;
+
+    z-index: 9999;
+}
+
+.face-modal.show {
+    display: flex;
+}
+
+.face-modal-content {
+    width: 700px;
+    max-width: 90%;
+
+    background: var(--bg-card);
+
+    border: 1px solid var(--border);
+
+    border-radius: 20px;
+
+    overflow: hidden;
+
+    box-shadow: 0 0 30px rgba(0, 0, 0, .4);
+}
+
+.face-modal-header {
+    display: flex;
+
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 16px 20px;
+
+    border-bottom: 1px solid var(--border);
+
+    color: var(--text-white);
+}
+
+.close-btn {
+    border: none;
+
+    background: transparent;
+
+    color: var(--text-white);
+
+    font-size: 22px;
+
+    cursor: pointer;
+}
 /* ===================================
    RESPONSIVE
 =================================== */
 
-@media(max-width:768px){
+@media(max-width:768px) {
 
-    .face-table{
-        display:block;
+    .face-table {
+        display: block;
 
-        overflow-x:auto;
+        overflow-x: auto;
     }
 
     .face-table th,
-    .face-table td{
-        white-space:nowrap;
+    .face-table td {
+        white-space: nowrap;
     }
 }

src/main/resources/templates/cms/absent/absent-create.html

@@ -44,12 +44,12 @@
 
                                 <div class="form-group">
                                     <label>Từ ngày</label>
-                                    <input type="date" th:field="*{startDate}" required>
+                                    <input type="date"  required>
                                 </div>
 
                                 <div class="form-group">
                                     <label>Đến ngày</label>
-                                    <input type="date" th:field="*{endDate}" required>
+                                    <input type="date"  required>
                                 </div>
 
                             </div>
@@ -57,7 +57,7 @@
                             <!-- Lý do -->
                             <div class="form-group">
                                 <label>Lý do</label>
-                                <textarea th:field="*{reason}" rows="5" placeholder="Nhập lý do xin nghỉ..."
+                                <textarea  rows="5" placeholder="Nhập lý do xin nghỉ..."
                                     required></textarea>
                             </div>
 

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

@@ -103,7 +103,7 @@
 
                             <div class="quick-actions-grid">
 
-                                <a href="/useInformation" class="quick-action-card">
+                                <a href="/userInformation" class="quick-action-card">
                                     <div class="quick-action-card__icon">
                                         <i class="bi bi-person-lines-fill"></i>
                                     </div>

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

@@ -36,7 +36,6 @@
                                     <th>File đính kèm</th>
                                     <th>Link tài liệu</th>
                                     <th>Trạng thái</th>
-                                    <th>Chi tiết</th>
                                     <th>Thao tác</th>
                                 </tr>
                             </thead>
@@ -87,11 +86,7 @@
 
                                     </td>
 
-                                    <td>
-                                        <a class="btn btn-detail">
-                                            Xem
-                                        </a>
-                                    </td>
+                                    
 
                                     <td>
 

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

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Face Recognition Dashboard</title>
+    <title>Đăng ký Face ID</title>
 
     <link rel="stylesheet" th:href="@{/css/faceID/faceID-create.css}">
 </head>
@@ -12,23 +12,24 @@
 <body>
 
     <div class="bg-image"></div>
+
     <div class="layout">
+
         <!-- SIDEBAR -->
         <div th:replace="~{cms/sidebar/sidebar-employee :: sidebar}"></div>
 
-        <!-- MAIN LAYOUT -->
+        <!-- CONTENT -->
         <div class="container-layout">
 
             <!-- HEADER -->
             <div class="container-header">
-                <h1>Đăng kí face ID</h1>
-                <p>Tạo face ID đăng kí vào phòng</p>
+                <h1>Đăng ký Face ID</h1>
+                <p>Đăng ký khuôn mặt để sử dụng hệ thống ra vào phòng</p>
             </div>
 
-            <!-- =========================
-                FACE REGISTER
-            ========================== -->
+            <!-- MAIN -->
             <main class="main-container">
+
                 <section class="dashboard-card">
 
                     <div class="card-header">
@@ -37,10 +38,30 @@
 
                     <div class="card-body">
 
-                        <!-- ROOM CODE -->
-                        <div class="room-code-input">
-                            <label>Mã phòng</label>
-                            <input type="text" id="roomCode" placeholder="Nhập mã phòng (VD: P101)">
+                        <!-- THÔNG TIN -->
+                        <div class="face-register-meta">
+
+                            <h3>Thông tin đăng ký</h3>
+
+                            <label for="roomCode">Mã phòng</label>
+                            <input type="text"
+                                   id="roomCode"
+                                   placeholder="Ví dụ: P101">
+
+                            <div class="face-sample-summary">
+
+                                <button id="faceSampleCount"
+                                        class="face-sample-count-btn"
+                                        type="button">
+                                    0 / 5 mẫu
+                                </button>
+
+                                <span id="faceSampleStatusText">
+                                    Nhập mã phòng và bắt đầu quét khuôn mặt.
+                                </span>
+
+                            </div>
+
                         </div>
 
                         <!-- GRID -->
@@ -51,67 +72,269 @@
 
                                 <div class="panel-header">
                                     <h3>Camera đăng ký</h3>
-                                    <button id="faceRegisterToggleBtn">Bật camera</button>
+
+                                    <button id="faceRegisterToggleBtn"
+                                            type="button">
+                                        Bật camera
+                                    </button>
                                 </div>
 
+                                <!-- MODE -->
                                 <div class="mode-tabs">
-                                    <button class="active">Thêm mẫu</button>
-                                    <button>Quét lại</button>
+                                    <button class="active"
+                                            type="button">
+                                        Đăng ký mới
+                                    </button>
+
+                                    <button type="button"
+                                            id="rescanBtn">
+                                        Quét lại
+                                    </button>
                                 </div>
 
+                                <p class="face-mode-hint">
+                                    Hệ thống yêu cầu 5 góc khuôn mặt để tăng độ chính xác nhận diện.
+                                </p>
+
+                                <!-- GUIDE -->
                                 <div class="guide-box">
-                                    <div id="scanGuideCurrent">Nhìn thẳng vào camera</div>
-                                    <div id="scanGuideSteps">Bước 1 / 5</div>
+
+                                    <div id="scanGuideCurrent">
+                                        Nhìn thẳng vào camera
+                                    </div>
+
+                                    <div id="scanGuideSteps">
+                                        Bước 1 / 5
+                                    </div>
+
                                 </div>
 
+                                <!-- VIDEO -->
                                 <div class="video-wrap">
-                                    <video id="video" autoplay playsinline muted></video>
-                                </div>
 
+                                    <video id="video"
+                                           autoplay
+                                           playsinline
+                                           muted>
+                                    </video>
+
+                                    <canvas id="captureCanvas"
+                                            style="display:none;">
+                                    </canvas>
 
+                                </div>
 
                                 <!-- ACTION -->
                                 <div class="action-row">
 
-                                    <button type="button" id="captureFaceBtn">
-                                        📷 Đăng ký Face ID
+                                    <button type="button"
+                                            id="captureFaceBtn">
+                                        📷 Chụp mẫu
                                     </button>
 
-                                    <button type="button" class="secondary">
+                                    <button type="button"
+                                            id="resetFaceScanBtn"
+                                            class="secondary">
                                         Làm lại
                                     </button>
 
                                 </div>
 
+                                <!-- MESSAGE -->
+                                <div id="faceRegisterMessage"
+                                     class="message">
+                                </div>
+
+                            </div>
+
+                            <!-- GUIDE PANEL -->
+                            <div class="panel">
+
+                                <div class="panel-header">
+                                    <h3>Hướng dẫn quét</h3>
+                                </div>
+
+                                <ul class="scan-tips">
+                                    <li>✓ Bước 1: Nhìn thẳng.</li>
+                                    <li>✓ Bước 2: Quay mặt sang trái.</li>
+                                    <li>✓ Bước 3: Quay mặt sang phải.</li>
+                                    <li>✓ Bước 4: Ngẩng mặt lên.</li>
+                                    <li>✓ Bước 5: Cúi mặt xuống.</li>
+                                </ul>
+
+                                <p class="muted">
+                                    Đảm bảo khuôn mặt đủ sáng, không bị che bởi khẩu trang hoặc kính râm.
+                                </p>
+
                             </div>
 
                         </div>
 
                     </div>
+
                 </section>
+
             </main>
+
             <div th:replace="~{cms/layout/footer :: footer}"></div>
 
         </div>
+
     </div>
+
     <script>
         const video = document.getElementById("video");
-        const btn = document.getElementById("faceRegisterToggleBtn");
+        const canvas = document.getElementById("captureCanvas");
+        const toggleBtn = document.getElementById("faceRegisterToggleBtn");
+        const captureBtn = document.getElementById("captureFaceBtn");
+        const resetBtn = document.getElementById("resetFaceScanBtn");
+
+        const sampleCountBtn = document.getElementById("faceSampleCount");
+        const sampleStatusText = document.getElementById("faceSampleStatusText");
+        const scanGuideCurrent = document.getElementById("scanGuideCurrent");
+        const scanGuideSteps = document.getElementById("scanGuideSteps");
+        const messageBox = document.getElementById("faceRegisterMessage");
+
+        let stream = null;
+        let capturedSamples = [];
+
+        const guideSteps = [
+            "Nhìn thẳng vào camera",
+            "Quay mặt sang trái",
+            "Quay mặt sang phải",
+            "Ngẩng mặt lên",
+            "Cúi mặt xuống"
+        ];
+
+        // MỞ CAMERA
+        toggleBtn.addEventListener("click", async () => {
+
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+                stream = null;
+                video.srcObject = null;
+                toggleBtn.textContent = "Bật camera";
+                return;
+            }
 
-        btn.addEventListener("click", async () => {
             try {
-                const stream = await navigator.mediaDevices.getUserMedia({
+
+                stream = await navigator.mediaDevices.getUserMedia({
                     video: true,
                     audio: false
                 });
 
                 video.srcObject = stream;
-            } catch (err) {
-                console.error(err);
+                toggleBtn.textContent = "Tắt camera";
+
+            } catch (error) {
+
+                console.error(error);
                 alert("Không thể mở camera");
+
             }
         });
+
+        // CHỤP ẢNH
+        captureBtn.addEventListener("click", () => {
+
+            if (!video.srcObject) {
+                alert("Vui lòng bật camera trước.");
+                return;
+            }
+
+            if (capturedSamples.length >= 5) {
+                alert("Đã đủ 5 mẫu.");
+                return;
+            }
+
+            const ctx = canvas.getContext("2d");
+
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+
+            ctx.drawImage(
+                video,
+                0,
+                0,
+                canvas.width,
+                canvas.height
+            );
+
+            const imageBase64 =
+                canvas.toDataURL("image/jpeg");
+
+            capturedSamples.push(imageBase64);
+
+            updateUI();
+
+            if (capturedSamples.length === 5) {
+
+                messageBox.innerHTML =
+                    "✅ Đã thu thập đủ 5 mẫu khuôn mặt. Có thể gửi lên server.";
+
+                /*
+                Ví dụ gửi về Spring Boot
+
+                fetch('/face/register', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        roomCode: document.getElementById('roomCode').value,
+                        samples: capturedSamples
+                    })
+                });
+                */
+            }
+        });
+
+        // RESET
+        resetBtn.addEventListener("click", () => {
+
+            capturedSamples = [];
+
+            updateUI();
+
+            messageBox.innerHTML =
+                "Đã làm lại quá trình quét.";
+
+        });
+
+        // UPDATE UI
+        function updateUI() {
+
+            const count = capturedSamples.length;
+
+            sampleCountBtn.textContent =
+                `${count} / 5 mẫu`;
+
+            sampleStatusText.textContent =
+                `Đã thu thập ${count}/5 mẫu khuôn mặt`;
+
+            if (count < 5) {
+
+                scanGuideCurrent.textContent =
+                    guideSteps[count];
+
+                scanGuideSteps.textContent =
+                    `Bước ${count + 1} / 5`;
+
+            } else {
+
+                scanGuideCurrent.textContent =
+                    "Hoàn thành đăng ký";
+
+                scanGuideSteps.textContent =
+                    "5 / 5";
+
+            }
+        }
+
+        updateUI();
     </script>
+
 </body>
 
 </html>

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

@@ -58,10 +58,9 @@
                                     </span>
                                 </td>
                                 <td>DE214</td>
-                                <td><button class="detail-btn" onclick="openFaceGallery()">
-
+                                <td>
+                                    <button class="detail-btn" onclick="openFaceGallery()">
                                         Xem ảnh
-
                                     </button>
                                 </td>
 
@@ -91,7 +90,8 @@
                                     </button>
                                 </td>
                                 <td><button class="detail-btn btn-primary" type="submit">Chấp nhận</button>
-                                    <button class="detail-btn btn-secondery" type="submit">Từ chối</button></td>
+                                    <button class="detail-btn btn-secondery" type="submit">Từ chối</button>
+                                </td>
                             </tr>
 
                         </tbody>
@@ -105,7 +105,53 @@
 
         </div>
     </div>
+    <div id="faceGalleryModal" class="face-modal">
+
+        <div class="face-modal-content">
+
+            <div class="face-modal-header">
+                <h2>Ảnh Face ID</h2>
+
+                <button class="close-btn" onclick="closeFaceGallery()">
+                    ✕
+                </button>
+            </div>
+
+            <div class="face-gallery">
+
+                <img id="facePreviewImage" src="https://i.pinimg.com/736x/6a/5e/fc/6a5efc25bf7c7603afac79d7046f999c.jpg" alt="Face ID">
+
+            </div>
+
+        </div>
+
+    </div>
+    <script>
+        function openFaceGallery() {
+
+            document
+                .getElementById("faceGalleryModal")
+                .classList.add("show");
+        }
+
+        function closeFaceGallery() {
+
+            document
+                .getElementById("faceGalleryModal")
+                .classList.remove("show");
+        }
+
+        window.onclick = function (event) {
+
+            const modal =
+                document.getElementById("faceGalleryModal");
+
+            if (event.target === modal) {
+                closeFaceGallery();
+            }
+        };
 
+    </script>
 
 </body>
 

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

@@ -42,7 +42,12 @@
                 Đăng kí Face ID
             </a>
         </li>
-
+        <li class="sidebar-option">
+            <a href="/documentList" class="sidebar-link">
+                <span>📝</span>
+                Báo cáo được chia sẻ
+            </a>
+        </li>
         <li class="sidebar-option">
             <a href="/documentCreate" class="sidebar-link">
                 <span>📄</span>