Refactor theme vars; add employee list UI & scripts

Introduce centralized theme variables and refactor many CSS files to use them (base/theme/sidebar + many component styles). Add new employee management feature: template (employee-list.html), styles (employee-list.css) and JS (employee-popup.js, room-code.js, copy-code.js). Add sidebar activation JS and various template tweaks (dashboard links, faceID/document actions, user info edit popup). Add /employeeList mapping in HomeController. Remove legacy attendance-common/manager CSS. Update application.properties datasource (switch to MySQL and credential changes) and minor footer/formatting fixes.

src/main/java/com/attendenceSystem/frontroller/HomeController.java

@@ -84,6 +84,10 @@ public class HomeController {
     public String accountList() {
         return "cms/account/account-list";
     }
+    @GetMapping("/employeeList")
+    public String employeeList() {
+        return "cms/account/employee-list";
+    }
     @GetMapping("/absentCreate")
     public String absentCreate() {
         return "cms/absent/absent-create";

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

@@ -70,13 +70,13 @@
 .form-group textarea {
     width: 100%;
 
-    background: rgba(255, 255, 255, .04);
+    background: var(--bg-form);
 
-    border: 1px solid rgba(255, 255, 255, .08);
+    border: 1px solid var(--border);
 
     border-radius: 14px;
 
-    color: white;
+    color: var(--text-white);
 
     padding: 14px 16px;
 
@@ -98,7 +98,7 @@
 .form-group textarea:focus {
     outline: none;
 
-    border-color: var(--indigo);
+    border-color: var(--indigo-06);
 
     box-shadow:
         0 0 0 4px rgba(99, 102, 241, .15);
@@ -109,8 +109,8 @@
 ========================= */
 
 .form-group select option {
-    background: #0f172a;
-    color: white;
+    background: var(--bg-card);
+    color: var(--text-white);
 }
 
 /* =========================
@@ -150,7 +150,7 @@
 
     background:
         linear-gradient(to right,
-            var(--indigo),
+            var(--indigo-06),
             var(--purple));
 }
 
@@ -159,12 +159,12 @@
 }
 
 .btn-secondary {
-    background: #334155;
-    color: white;
+    background: var(--btn-secondary);
+    color: var(--text-white);
 }
 
 .btn-secondary:hover {
-    background: #475569;
+    background: var(--btn-secondary-hover);
 }
 
 /* =========================

src/main/resources/static/css/absent/absent-history.css

@@ -71,9 +71,9 @@
 
     color: white;
 
-    background: rgba(255, 255, 255, .05);
+    background: var(--bg-form);
 
-    border: 1px solid rgba(255, 255, 255, .08);
+    border: 1px solid var(--border);
 
     transition: .3s;
 }
@@ -82,14 +82,14 @@
 .form-group select:focus {
     outline: none;
 
-    border-color: var(--indigo);
+    border-color: var(--indigo-06);
 
     box-shadow:
-        0 0 0 4px rgba(99, 102, 241, .15);
+        0 0 0 4px var(--shadow-box);
 }
 
 .form-group select option {
-    background: #0f172a;
+    background: var(--bg-dark);
 }
 
 /* ===================================
@@ -127,7 +127,7 @@
 
     background:
         linear-gradient(to right,
-            var(--indigo),
+            var(--indigo-06),
             var(--purple));
 }
 
@@ -136,12 +136,12 @@
 }
 
 .btn-secondary {
-    background: #334155;
-    color: white;
+    background: var(--btn-secondary);
+    color: var(--text-white);
 }
 
 .btn-secondary:hover {
-    background: #475569;
+    background: var(--btn-secondary-hover);
 }
 
 /* ===================================
@@ -159,7 +159,7 @@
 
 .table thead {
     background:
-        rgba(255, 255, 255, .03);
+        var(--bg-table);
 }
 
 .table th {
@@ -180,7 +180,7 @@
     color: #e2e8f0;
 
     border-bottom:
-        1px solid rgba(255, 255, 255, .04);
+        1px solid var(--bg-form);
 }
 
 .table tbody tr {
@@ -189,7 +189,7 @@
 
 .table tbody tr:hover {
     background:
-        rgba(255, 255, 255, .03);
+        var(--bg-table);
 }
 
 /* ===================================
@@ -218,14 +218,14 @@
 
 .approved {
     background:
-        rgba(34, 197, 94, .15);
+        var(--btn-approv-15);
 
     color: var(--success);
 }
 
 .rejected {
     background:
-        rgba(239, 68, 68, .15);
+        var(--btn-reject-15);
 
     color: var(--danger);
 }
@@ -253,20 +253,20 @@
 
     transition: .25s;
 
-    color: white;
+    color: var(--text-white);
 }
 
 .btn-view {
-    background: #334155;
+    background: var(--border);
 }
 
 .btn-approve {
-    background: rgba(34, 197, 94, .18);
+    background: var(--btn-approv-18);
     color: var(--success);
 }
 
 .btn-reject {
-    background: rgba(239, 68, 68, .18);
+    background: var(--btn-reject-18);
     color: var(--danger);
 }
 

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

@@ -83,7 +83,7 @@
 .form-group select:focus {
     outline: none;
 
-    border-color: var(--indigo);
+    border-color: var(--indigo-06);
 
     box-shadow:
         0 0 0 4px rgba(99, 102, 241, .15);
@@ -128,7 +128,7 @@
 
     background:
         linear-gradient(to right,
-            var(--indigo),
+            var(--indigo-06),
             var(--purple));
 }
 

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

@@ -57,7 +57,7 @@
 
     background:
         linear-gradient(to right,
-            var(--indigo),
+            var(--indigo-06),
             var(--purple));
 
     transition: .25s;
@@ -85,11 +85,11 @@
 
     border-radius: 14px;
 
-    border: 1px solid rgba(255, 255, 255, .08);
+    border: 1px solid var(--border);
 
-    background: rgba(255, 255, 255, .05);
+    background: var(--bg-form);
 
-    color: white;
+    color: var(--text-white);
 
     transition: .3s;
 }
@@ -97,9 +97,9 @@
 .search-box input:focus {
     outline: none;
 
-    border-color: var(--indigo);
+    border-color: var(--indigo-06);
 
-    box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
+    box-shadow: 0 0 0 4px var(--shadow-box);
 }
 
 /* ===================================
@@ -117,7 +117,7 @@ table {
 }
 
 thead {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 }
 
 th {
@@ -137,7 +137,7 @@ td {
 
     color: #e2e8f0;
 
-    border-bottom: 1px solid rgba(255, 255, 255, .04);
+    border-bottom: 1px solid var(--bg-form) ;
 }
 
 tbody tr {
@@ -145,7 +145,7 @@ tbody tr {
 }
 
 tbody tr:hover {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 }
 
 /* ===================================
@@ -174,7 +174,7 @@ tbody tr:hover {
 
     background:
         linear-gradient(135deg,
-            var(--indigo),
+            var(--indigo-06),
             var(--purple));
 }
 
@@ -192,7 +192,7 @@ tbody tr:hover {
     font-size: .85rem;
     font-weight: 600;
 
-    background: rgba(99, 102, 241, .15);
+    background: var(--shadow-box);
 
     color: #a5b4fc;
 }
@@ -213,14 +213,14 @@ tbody tr:hover {
 }
 
 .active {
-    background: rgba(34, 197, 94, .15);
+    background: var(--btn-approv-15);
 
     color: var(--success);
 }
 
 .inactive,
 .locked {
-    background: rgba(239, 68, 68, .15);
+    background:var(--btn-reject-15);
 
     color: var(--danger);
 }
@@ -246,7 +246,7 @@ tbody tr:hover {
 
     font-weight: 600;
 
-    color: white;
+    color: var(--text-white);
 
     transition: .25s;
 }
@@ -254,12 +254,12 @@ tbody tr:hover {
 .btn-role {
     background:
         linear-gradient(to right,
-            var(--indigo),
+            var(--indigo-06),
             var(--purple));
 }
 
 .lock {
-    background: rgba(239, 68, 68, .18);
+    background:var(--btn-reject-18);
 
     color: var(--danger);
 }
@@ -281,7 +281,7 @@ tbody tr:hover {
     align-items: center;
     justify-content: center;
 
-    background: rgba(0, 0, 0, .65);
+    background: var(--bg-dark);
 
     backdrop-filter: blur(6px);
 
@@ -327,9 +327,9 @@ tbody tr:hover {
 
     cursor: pointer;
 
-    color: white;
+    color: var(--text-white);
 
-    background: rgba(255, 255, 255, .05);
+    background: var(--bg-form);
 }
 
 .detail-body {

src/main/resources/static/css/account/employee-list.css

@@ -0,0 +1,627 @@
+@import url("../base.css");
+
+/* ===================================
+   DASHBOARD CARD
+=================================== */
+
+.dashboard-card {
+    background: var(--bg-card);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--border);
+    border-radius: 24px;
+    overflow: hidden;
+}
+
+.card-header {
+    padding: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--border);
+}
+
+.card-header h2 {
+    font-size: 1.3rem;
+    font-weight: 700;
+}
+
+/* ===================================
+   BUTTON
+=================================== */
+
+.add-btn {
+    height: 46px;
+    padding: 0 22px;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    font-weight: 600;
+    color: white;
+    background: linear-gradient(135deg,
+            var(--indigo-06),
+            var(--purple));
+    transition: .25s;
+}
+
+.add-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(99, 102, 241, .35);
+}
+
+
+/* ===================================
+   TOOLBAR
+=================================== */
+
+.toolbar {
+    padding: 20px 24px;
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    flex-wrap: wrap;
+    border-bottom: 1px solid var(--border);
+}
+
+/* ===================================
+   SEARCH
+=================================== */
+
+.search-box {
+    flex: 1;
+    min-width: 320px;
+}
+
+.search-box input {
+    width: 100%;
+    height: 50px;
+    padding: 0 18px;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, .08);
+    background: rgba(255, 255, 255, .05);
+    color: white;
+    font-size: .95rem;
+    transition: .25s;
+}
+
+.search-box input::placeholder {
+    color: #94a3b8;
+}
+
+.search-box input:focus {
+    outline: none;
+    border-color: var(--indigo-06);
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
+}
+
+/* ===================================
+   FILTER
+=================================== */
+
+.filter-box {
+    display: flex;
+    gap: 14px;
+    flex-wrap: wrap;
+}
+
+.filter-box select {
+    min-width: 190px;
+    height: 50px;
+    padding: 0 16px;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, .08);
+    background: rgba(255, 255, 255, .05);
+    color: white;
+    cursor: pointer;
+    transition: .25s;
+}
+
+.filter-box select:focus {
+    outline: none;
+    border-color: var(--indigo-06);
+}
+
+.filter-box option {
+    background: #0f172a;
+    color: white;
+}
+
+/* ===================================
+   TABLE
+=================================== */
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+thead {
+    background: rgba(255, 255, 255, .03);
+}
+
+th {
+    padding: 18px;
+    text-align: left;
+    color: var(--text-light);
+    font-size: .9rem;
+    font-weight: 600;
+    border-bottom: 1px solid var(--border);
+}
+
+td {
+    padding: 18px;
+    border-bottom: 1px solid rgba(255, 255, 255, .05);
+    color: #e2e8f0;
+}
+
+tbody tr {
+    transition: .25s;
+}
+
+tbody tr:hover {
+    background: rgba(255, 255, 255, .03);
+}
+
+/* ===================================
+   USER
+=================================== */
+
+.user {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: white;
+    background: linear-gradient(135deg,
+            var(--indigo-06),
+            var(--purple));
+}
+
+/* ===================================
+   STATUS
+=================================== */
+
+.status {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 14px;
+    border-radius: 999px;
+    font-size: .85rem;
+    font-weight: 600;
+}
+
+.active {
+    background: rgba(34, 197, 94, .15);
+    color: var(--success);
+}
+
+.inactive {
+    background: rgba(245, 158, 11, .15);
+    color: var(--warning);
+}
+
+.locked {
+    background: rgba(239, 68, 68, .15);
+    color: var(--danger);
+}
+
+/* ===================================
+   ACTIONS
+=================================== */
+
+.actions {
+    display: flex;
+    gap: 10px;
+}
+
+.icon-btn {
+    border: none;
+    border-radius: 10px;
+    padding: 10px 16px;
+    cursor: pointer;
+    font-size: .85rem;
+    font-weight: 600;
+    color: white;
+    background: rgba(255, 255, 255, .06);
+    transition: .25s;
+}
+
+.icon-btn:hover {
+    transform: translateY(-2px);
+    background: rgba(255, 255, 255, .12);
+}
+
+.btn-role {
+    background: linear-gradient(135deg,
+            var(--indigo-06),
+            var(--purple));
+}
+
+.btn-role:hover {
+    box-shadow: 0 10px 20px rgba(99, 102, 241, .35);
+}
+
+.lock {
+    background: rgba(239, 68, 68, .18);
+    color: var(--danger);
+}
+
+
+.lock:hover {
+    background: rgba(239, 68, 68, .28);
+}
+
+/* ===================================
+   ADD EMPLOYEE POPUP
+=================================== */
+
+.card-add {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, .65);
+    backdrop-filter: blur(8px);
+
+    display: none;
+    justify-content: center;
+    align-items: center;
+
+    z-index: 9999;
+    animation: fadeIn .25s ease;
+}
+
+.card-add.show {
+    display: flex;
+}
+
+.card-container {
+    width: 520px;
+    max-width: 92%;
+    background: var(--bg-card);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--border);
+    border-radius: 24px;
+    overflow: hidden;
+    animation: popup .3s ease;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
+}
+
+/* ===================================
+   HEADER
+=================================== */
+
+.card-add .card-headers {
+    padding: 24px;
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    border-bottom: 1px solid var(--border);
+}
+
+.header-icon {
+    width: 54px;
+    height: 54px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 16px;
+
+    background: linear-gradient(135deg,
+            var(--indigo-06),
+            var(--purple));
+
+    color: white;
+    font-size: 22px;
+
+    flex-shrink: 0;
+}
+
+.card-add .card-headers h2 {
+    font-size: 1.25rem;
+    color: white;
+    font-weight: 700;
+}
+
+/* ===================================
+   BODY
+=================================== */
+
+.card-body {
+    padding: 28px;
+}
+
+/* ===================================
+   SELECT
+=================================== */
+
+.card-body label {
+    display: block;
+    margin-bottom: 10px;
+    color: var(--text-light);
+    font-size: .9rem;
+    font-weight: 600;
+}
+
+.card-add .filter-box {
+    display: block;
+}
+
+.card-add select {
+    width: 100%;
+    height: 52px;
+
+    padding: 0 18px;
+
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, .08);
+
+    background: rgba(255, 255, 255, .05);
+    color: white;
+
+    font-size: .95rem;
+    transition: .25s;
+}
+
+.card-add select:focus {
+    outline: none;
+    border-color: var(--indigo-06);
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
+}
+
+/* ===================================
+   QR CONTAINER
+=================================== */
+
+.container-QR {
+    margin-top: 28px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+}
+
+/* ===================================
+   ROOM CODE
+=================================== */
+
+.room-code-box {
+    width: 100%;
+
+    padding: 22px;
+
+    border-radius: 18px;
+
+    border: 1px solid rgba(255, 255, 255, .08);
+
+    background: rgba(255, 255, 255, .04);
+
+    text-align: center;
+}
+
+.room-code-box span {
+    color: var(--text-light);
+    font-size: .9rem;
+}
+
+.room-code-box h1 {
+    margin: 16px 0 20px;
+
+    font-size: 2rem;
+    letter-spacing: 4px;
+    color: white;
+}
+
+/* ===================================
+   COPY BUTTON
+=================================== */
+
+#copyBtn {
+    border: none;
+    cursor: pointer;
+
+    padding: 12px 26px;
+
+    border-radius: 12px;
+
+    font-weight: 600;
+    color: white;
+
+    background: linear-gradient(135deg,
+            var(--indigo-06),
+            var(--purple));
+
+    transition: .25s;
+}
+
+#copyBtn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(99, 102, 241, .35);
+}
+
+/* ===================================
+   QR
+=================================== */
+
+.qr-box {
+    width: 220px;
+    height: 220px;
+
+    padding: 14px;
+
+    background: white;
+    border-radius: 20px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.qr-box img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+/* ===================================
+   NOTE
+=================================== */
+
+.note {
+    text-align: center;
+    color: var(--text-light);
+    line-height: 1.6;
+    font-size: .9rem;
+}
+
+/* ===================================
+   CLOSE BUTTON
+=================================== */
+
+.close-btn {
+    margin-left: auto;
+
+    width:60px;
+    height: 42px;
+    padding:5px;
+    border: none;
+    border-radius: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+
+    background: linear-gradient(135deg,
+            var(--indigo-06),
+            var(--purple));
+    transition: .25s;
+        color: var(--text-white);
+
+    font-size: 22px;
+
+    transition: .25s;
+    display:flex;
+    align-items: center;
+    justify-content: end;
+}
+
+
+
+.close-btn:hover {
+    background: var(--btn-reject-18);
+    color: var(--danger);
+}
+
+/* ===================================
+   ANIMATION
+=================================== */
+
+@keyframes popup {
+
+    from {
+        opacity: 0;
+        transform: translateY(20px) scale(.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+
+}
+
+@keyframes fadeIn {
+
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+
+}
+
+/* ===================================
+   RESPONSIVE
+=================================== */
+
+@media (max-width: 600px) {
+
+    .card-container {
+        width: 95%;
+    }
+
+    .room-code-box h1 {
+        font-size: 1.5rem;
+        letter-spacing: 2px;
+    }
+
+    .qr-box {
+        width: 180px;
+        height: 180px;
+    }
+
+}
+
+/* ===================================
+   RESPONSIVE
+=================================== */
+
+@media (max-width:1200px) {
+
+    .actions {
+        flex-direction: column;
+    }
+
+    .icon-btn {
+        width: 100%;
+    }
+
+}
+
+@media (max-width:900px) {
+
+    .toolbar {
+        flex-direction: column;
+    }
+
+    .search-box {
+        min-width: 100%;
+    }
+
+    .filter-box {
+        width: 100%;
+        flex-direction: column;
+    }
+
+    .filter-box select {
+        width: 100%;
+    }
+
+}
+
+@media (max-width:768px) {
+
+    .card-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+    }
+
+    table {
+        min-width: 900px;
+    }
+
+    .dashboard-card {
+        overflow-x: auto;
+    }
+
+}

src/main/resources/static/css/attendance/attendance-common.css

@@ -1,64 +0,0 @@
-/* =========================
-   ATTENDANCE BASE UI
-========================= */
-
-/* CONTAINER */
-.attendance-container{
-    max-width:1400px;
-    margin:auto;
-}
-
-/* =========================
-   HEADER (CHUNG)
-========================= */
-.attendance-header{
-    padding:20px;
-    margin-bottom:20px;
-}
-
-.attendance-header h1{
-    font-size:1.6rem;
-    font-weight:800;
-
-    background: linear-gradient(to right, #c7cbeb, #e5e1e8);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-.attendance-header p{
-    color:var(--text-gray);
-}
-
-/* =========================
-   STATS GRID (CHUNG)
-========================= */
-.stats-grid{
-    display:grid;
-    grid-template-columns:repeat(5,1fr);
-    gap:16px;
-    margin-bottom:20px;
-}
-
-/* CARD CHUNG */
-.stats-card{
-    padding:18px;
-    border-radius:18px;
-
-    background:var(--bg-card);
-    border:1px solid var(--border);
-
-    backdrop-filter:blur(16px);
-}
-
-/* VALUE */
-.stats-value{
-    font-size:1.8rem;
-    font-weight:800;
-    display:block;
-}
-
-/* LABEL */
-.stats-label{
-    color:var(--text-gray);
-}

src/main/resources/static/css/attendance/attendance-history.css

@@ -30,7 +30,7 @@
 
     object-fit: cover;
 
-    border: 2px solid rgba(255, 255, 255, .1);
+    border: 2px solid var(--bg-table);
 }
 
 .profile-info h3 {
@@ -86,7 +86,7 @@
 
     margin-bottom: 6px;
 
-    color: white;
+    color: var(--text-white);
 }
 
 .stats-label {
@@ -107,7 +107,7 @@
 }
 
 .total .stats-value {
-    color: var(--indigo);
+    color: var(--indigo-06);
 }
 
 /* ===================================
@@ -132,11 +132,11 @@
 
     border-radius: 14px;
 
-    border: 1px solid rgba(255, 255, 255, .08);
+    border: 1px solid var(--border);
 
-    background: rgba(255, 255, 255, .05);
+    background: var(--bg-form);
 
-    color: white;
+    color: var(--text-white);
 
     transition: .25s;
 }
@@ -145,9 +145,9 @@
 .filter-panel select:focus {
     outline: none;
 
-    border-color: var(--indigo);
+    border-color: var(--indigo-06);
 
-    box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
+    box-shadow: 0 0 0 4px var(--shadow-box);
 }
 
 .filter-panel button {
@@ -162,9 +162,9 @@
 
     font-weight: 600;
 
-    color: white;
+    color: var(--text-white);
 
-    background: linear-gradient(to right, var(--indigo), var(--purple));
+    background: linear-gradient(to right, var(--indigo-06), var(--purple));
 
     transition: .25s;
 }
@@ -205,7 +205,7 @@
     font-size: 1.2rem;
     font-weight: 700;
 
-    color: white;
+    color: var(--text-white);
 }
 
 .table-header span {
@@ -224,7 +224,7 @@
 }
 
 .attendance-table thead {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 }
 
 .attendance-table th {
@@ -240,13 +240,13 @@
 .attendance-table td {
     padding: 16px;
 
-    color: #e2e8f0;
+    color: var(--text-white);
 
-    border-bottom: 1px solid rgba(255, 255, 255, .04);
+    border-bottom: 1px solid var(--bg-form);
 }
 
 .attendance-table tbody tr:hover {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 }
 
 /* ===================================
@@ -265,17 +265,17 @@
 }
 
 .badge.success {
-    background: rgba(34, 197, 94, .15);
+    background: var(--btn-approv-15);
     color: var(--success);
 }
 
 .badge.late {
-    background: rgba(245, 158, 11, .15);
+    background: var(--btn-reject-15);
     color: var(--warning);
 }
 
 .badge.warning {
-    background: rgba(139, 92, 246, .15);
+    background: var( --btn-warning);
     color: var(--purple);
 }
 

src/main/resources/static/css/attendance/attendance-manager.css

@@ -1,27 +0,0 @@
-@import url("/css/layout/footer.css");
-@import url("/css/sidebar/sidebar.css");
-@import url("/css/attendance/attendance-common.css");
-@import url("/css/base.css");
-/* =========================
-   STATS VARIANTS
-========================= */
-
-.present .stats-value{
-    color:var(--success);
-}
-
-.absent .stats-value{
-    color:var(--danger);
-}
-
-.pending .stats-value{
-    color:var(--warning);
-}
-
-.late .stats-value{
-    color:var(--purple);
-}
-
-/* =========================
-   PAGE CUSTOM (nếu có)
-========================= */

src/main/resources/static/css/attendance/attendance.css

@@ -99,11 +99,11 @@
     padding:0 16px;
 
     background:
-        rgba(255,255,255,.05);
+        var(--bg-form);
 
     color:white;
 
-    border:1px solid rgba(255,255,255,.08);
+    border:1px solid var(--border);
 
     transition:.3s;
 }
@@ -112,10 +112,10 @@
 .filter-panel select:focus{
     outline:none;
 
-    border-color:var(--indigo);
+    border-color:var(--indigo-06);
 
     box-shadow:
-        0 0 0 4px rgba(99,102,241,.15);
+        0 0 0 4px var(--shadow-box);
 }
 
 .search-input{
@@ -133,13 +133,13 @@
 
     cursor:pointer;
 
-    color:white;
+    color:var(--text-white);
     font-weight:600;
 
     background:
         linear-gradient(
             to right,
-            var(--indigo),
+            var(--indigo-06),
             var(--purple)
         );
 
@@ -151,7 +151,7 @@
 }
 
 .secondary{
-    background:#334155 !important;
+    background:var(--btn-secondary) !important;
 }
 
 /* ===================================
@@ -206,10 +206,10 @@
 .attendance-table td{
     padding:18px;
 
-    color:#e2e8f0;
+    color:var(--text-white);
 
     border-bottom:
-        1px solid rgba(255,255,255,.04);
+        1px solid var(--bg-form);
 }
 
 .attendance-table tbody tr{
@@ -218,7 +218,7 @@
 
 .attendance-table tbody tr:hover{
     background:
-        rgba(255,255,255,.03);
+        var(--bg-table);
 }
 
 /* ===================================
@@ -236,21 +236,21 @@
 
 .badge-success{
     background:
-        rgba(34,197,94,.15);
+        var(--btn-approv-15);
 
     color:var(--success);
 }
 
 .badge-warning{
     background:
-        rgba(245,158,11,.15);
+        var(--btn-warning-15);
 
     color:var(--warning);
 }
 
 .badge-danger{
     background:
-        rgba(239,68,68,.15);
+        var(--btn-reject-15);
 
     color:var(--danger);
 }
@@ -265,11 +265,11 @@
 }
 
 ::-webkit-scrollbar-track{
-    background:#1e293b;
+    background:var(--bg-card);
 }
 
 ::-webkit-scrollbar-thumb{
-    background:#475569;
+    background:var(--border);
     border-radius:8px;
 }
 

src/main/resources/static/css/base.css

@@ -6,22 +6,47 @@
 =================================== */
 
 :root {
-    --bg-dark: #020617;
+    --bg-dark: #171233;
     --bg-card: rgba(15, 23, 42, .65);
 
+    --bg-table: rgba(255, 255, 255, .03);
+    --bg-form: rgba(255, 255, 255, .04);
+    --bg-table-06: rgba(255, 255, 255, .06);
+    --bg-table-015: rgba(255, 255, 255, .15);
+
+    --bg-purple-025:rgba(1, 1, 11, 0.25);
+
     --border: rgba(255, 255, 255, .08);
 
     --text-white: #ffffff;
     --text-gray: #94a3b8;
     --text-light: #cbd5e1;
 
-    --indigo: #6366f1;
+    --indigo-06: rgba(99, 102, 241, .6);
+    --indigo-15: rgba(99, 102, 241, .15);
+    --indigo-08: rgba(10, 11, 65, 0.08);
     --purple: #8b5cf6;
+    --purple-light: #b794ff;
     --pink: #ec4899;
+    --blue: #3b82f6;
+    --pinl-light: #d68eff;
 
-    --success: #22c55e;
+    --success: rgb(37, 249, 83);
     --warning: #f59e0b;
     --danger: #ef4444;
+
+    --shadow-box: rgba(99, 102, 241, .15);
+
+    --btn-secondary: #334155;
+    --btn-secondary-hover: #475569;
+
+    --btn-warning-15: rgba(139, 92, 246, .15);
+
+    --btn-reject-18: rgba(239, 68, 68, .18);
+    --btn-reject-15: rgba(239, 68, 68, .15);
+
+    --btn-approv-18: rgba(34, 197, 94, .18);
+    --btn-approv-15: rgba(34, 197, 94, .15);
 }
 
 /* ===================================
@@ -44,13 +69,13 @@ body {
         "Segoe UI",
         sans-serif;
 
-    color: white;
+    color: var(--text-white);
 
     background:
         linear-gradient(135deg,
-            #020617 0%,
-            #1e1b4b 50%,
-            #020617 100%);
+            #1a1633 0%,
+            rgba(188, 163, 237) 50%,
+            #191339 100%);
 }
 
 .layout {
@@ -85,11 +110,11 @@ body {
 
     background:
         radial-gradient(circle at top left,
-            rgba(1, 1, 11, 0.25),
-            transparent 100%),
+            #1b0f38,
+            transparent 80%),
         radial-gradient(circle at bottom right,
-            rgba(31, 20, 58, 0.25),
-            transparent 50%);
+            #220d54,
+            transparent 80%);
 }
 
 /* ===================================
@@ -111,14 +136,14 @@ body {
 =================================== */
 
 .container-header {
-    background-color: #020c2e;
+    background-color: var(--bg-dark);
     margin-bottom: 32px;
     padding: 15px 20px 15px 15px;
     border-radius: 1px;
     height: 112px;
-    border: 0.65px solid #291c56;
+    border: 0.65px solid var(--shadow-box);
     padding-left: 20px;
-    height:140px;
+    height: 140px;
 }
 
 .container-header h1 {
@@ -130,9 +155,9 @@ body {
 
     background:
         linear-gradient(to right,
-            #c7cbeb,
-            #e5e1e8,
-            #e5e2e3);
+            var(--text-white),
+            var(--text-light),
+            var(--text-white));
 
     background-clip: text;
     -webkit-background-clip: text;
@@ -140,7 +165,7 @@ body {
 }
 
 .container-header p {
-    color: #94a3b8;
+    color: var(--text-gray);
     font-size: 1rem;
 }
 

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

@@ -24,7 +24,7 @@
 
     background:
         linear-gradient(135deg,
-            var(--indigo),
+            var(--indigo-06),
             var(--purple));
 }
 
@@ -32,7 +32,7 @@
     /* width: 42px;
     height: 42px; */
     font-size: 20px;
-    color: white;
+    color: var(--text-white);
 }
 /* ===================================
    STAT CARD
@@ -112,7 +112,7 @@
 
 .admin-action-card:hover {
     transform: translateY(-4px);
-    border-color: rgba(99, 102, 241, .4);
+    border-color: var(--shadow-box);
 }
 
 .admin-action-card__badge {
@@ -123,8 +123,8 @@
     height: 24px;
     padding: 0 7px;
     border-radius: 999px;
-    background: linear-gradient(to right, var(--indigo), var(--purple));
-    color: white;
+    background: linear-gradient(to right, var(--indigo-06), var(--purple));
+    color: var(--text-white);
     font-size: .75rem;
     font-weight: 700;
     display: flex;
@@ -145,7 +145,7 @@
 
     background:
         linear-gradient(135deg,
-            var(--indigo),
+            var(--indigo-06),
             var(--purple));
 }
 
@@ -153,7 +153,7 @@
     /* width: 42px;
     height: 42px; */
     font-size: 20px;
-    color: white;
+    color: var(--text-white);
 }
 
 .admin-action-card__title {
@@ -248,7 +248,7 @@
 }
 
 .activity-item:hover {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-form);
 }
 
 .activity-item__left {
@@ -264,7 +264,7 @@
     flex-shrink: 0;
 }
 
-.activity-dot--blue   { background: var(--indigo); }
+.activity-dot--blue   { background: var(--indigo-06); }
 .activity-dot--green  { background: var(--success); }
 .activity-dot--yellow { background: var(--warning); }
 .activity-dot--red    { background: var(--danger); }
@@ -319,8 +319,8 @@
     border-radius: 12px;
     cursor: pointer;
     font-weight: 600;
-    color: white;
-    background: linear-gradient(to right, var(--indigo), var(--purple));
+    color: var(--text-white);
+    background: linear-gradient(to right, var(--indigo-06), var(--purple));
     transition: .25s;
 }
 
@@ -342,14 +342,14 @@
     padding: 12px 14px;
     border-radius: 12px;
     border: 1px solid var(--border);
-    background: rgba(255, 255, 255, .03);
-    color: white;
+    background: var(--bg-table);
+    color: var(--text-white);
     outline: none;
     transition: .2s;
 }
 
 .search-box input:focus {
-    border-color: rgba(99, 102, 241, .6);
+    border-color: var(--indigo-06);
 }
 
 
@@ -363,7 +363,7 @@ table {
 }
 
 thead {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 }
 
 th {
@@ -376,12 +376,12 @@ th {
 
 td {
     padding: 14px;
-    color: #e2e8f0;
-    border-bottom: 1px solid rgba(255, 255, 255, .04);
+    color: var(--text-white);
+    border-bottom: 1px solid var(--bg-form);
 }
 
 tbody tr:hover {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 }
 
 
@@ -402,7 +402,7 @@ tbody tr:hover {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(255, 255, 255, .06);
+    background: var(--bg-table-06);
     font-weight: 700;
     color: white;
 }
@@ -418,8 +418,8 @@ tbody tr:hover {
     border-radius: 999px;
     font-size: .8rem;
     font-weight: 600;
-    background: rgba(99, 102, 241, .15);
-    color: var(--indigo);
+    background: var(--indigo-15);
+    color: var(--indigo-06);
 }
 
 .status {
@@ -431,12 +431,12 @@ tbody tr:hover {
 }
 
 .status.active {
-    background: rgba(34, 197, 94, .15);
+    background: var(--btn-approv-15);
     color: var(--success);
 }
 
 .status.locked {
-    background: rgba(239, 68, 68, .15);
+    background: var(--btn-reject-15);
     color: var(--danger);
 }
 
@@ -454,7 +454,7 @@ tbody tr:hover {
     padding: 6px 10px;
     border-radius: 10px;
     border: 1px solid var(--border);
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
     color: white;
     cursor: pointer;
     transition: .2s;
@@ -479,7 +479,7 @@ tbody tr:hover {
     display: none;
     align-items: center;
     justify-content: center;
-    background: rgba(0, 0, 0, .6);
+    background: var(--bg-dark);
     backdrop-filter: blur(6px);
 }
 
@@ -499,14 +499,14 @@ tbody tr:hover {
 }
 
 .detail-header h2 {
-    color: white;
+    color: var(--text-white);
     font-size: 1.1rem;
 }
 
 .close-btn {
     background: transparent;
     border: none;
-    color: white;
+    color: var(--text-white);
     font-size: 1.3rem;
     cursor: pointer;
 }
@@ -524,7 +524,7 @@ tbody tr:hover {
 
 .detail-item p,
 .detail-item span {
-    color: white;
+    color: var(--text-white);
     font-weight: 600;
 }
 

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

@@ -56,7 +56,7 @@
 
     background:
         linear-gradient(135deg,
-            var(--indigo),
+            var(--indigo-06),
             var(--purple));
 }
 
@@ -64,14 +64,14 @@
     /* width: 42px;
     height: 42px; */
     font-size: 24px;
-    color: white;
+    color: var(--text-white);
 }
 
 .employee-stat-card__number {
     font-size: 1.6rem;
     font-weight: 800;
 
-    color: white;
+    color: var(--text-white);
 }
 
 .employee-stat-card__label {
@@ -88,7 +88,7 @@
 
     border-radius: 999px;
 
-    background: rgba(255, 255, 255, .05);
+    background: var(--bg-form);
 
     color: var(--text-light);
 }
@@ -96,7 +96,7 @@
 /* color variants */
 
 .report-submitted .employee-stat-card__number {
-    color: var(--indigo);
+    color: var(--indigo-06);
 }
 
 .report-approved .employee-stat-card__number {
@@ -137,7 +137,7 @@
 
     margin-bottom: 14px;
 
-    color: white;
+    color: var(--text-white);
 }
 
 .quick-actions-grid {
@@ -159,7 +159,7 @@
 
     text-decoration: none;
 
-    color: white;
+    color: var(--text-white);
 
     transition: .25s;
 
@@ -176,7 +176,7 @@
     /* width: 42px;
     height: 42px; */
     font-size: 25px;
-    color: white;
+    color: var(--text-white);
 }
 
 .quick-action-card:hover {
@@ -210,7 +210,7 @@
 }
 
 .attendance-table thead {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 }
 
 .attendance-table th {
@@ -226,13 +226,13 @@
 .attendance-table td {
     padding: 16px;
 
-    color: #e2e8f0;
+    color: var(--text-white);
 
-    border-bottom: 1px solid rgba(255, 255, 255, .04);
+    border-bottom: 1px solid var(--bg-form);
 }
 
 .attendance-table tbody tr:hover {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 }
 
 /* ===================================
@@ -252,17 +252,17 @@
 }
 
 .status-success {
-    background: rgba(34, 197, 94, .15);
+    background: var(--btn-approv-15);
     color: var(--success);
 }
 
 .status-warning {
-    background: rgba(245, 158, 11, .15);
+    background: var(--btn-warning-15);
     color: var(--warning);
 }
 
 .status-danger {
-    background: rgba(239, 68, 68, .15);
+    background: var(--btn-reject-15);
     color: var(--danger);
 }
 
@@ -332,9 +332,9 @@
 
     font-weight: 600;
 
-    color: white;
+    color: var(--text-white);
 
-    background: linear-gradient(to right, var(--indigo), var(--purple));
+    background: linear-gradient(to right, var(--indigo-06), var(--purple));
 
     transition: .25s;
 }
@@ -352,7 +352,7 @@
 
     margin-bottom: 8px;
 
-    color: white;
+    color: var(--text-white);
 }
 
 .reminder-card__content {

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

@@ -48,7 +48,7 @@
 
     margin-bottom:6px;
 
-    color:white;
+    color:var(--text-white);
 }
 
 .stat-card p{
@@ -59,7 +59,7 @@
 
 /* COLORS */
 .stat-card.total h3{
-    color:var(--indigo);
+    color:var(--indigo-06);
 }
 
 .stat-card.present h3{
@@ -112,7 +112,7 @@
 
     font-weight:700;
 
-    color:white;
+    color:var(--text-white);
 }
 
 .card-body{
@@ -134,7 +134,7 @@
 
     border-radius:14px;
 
-    background:rgba(255,255,255,.03);
+    background:var(--bg-table);
 
     margin-bottom:10px;
 
@@ -142,7 +142,7 @@
 }
 
 .activity-card .activity-item:hover{
-    background:rgba(255,255,255,.06);
+    background:var(--bg-table-06);
 }
 
 .activity-left{
@@ -169,7 +169,7 @@
 .activity-item h4{
     font-size:.95rem;
 
-    color:white;
+    color:var(--text-white);
 }
 
 .activity-item p{

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

@@ -64,11 +64,11 @@
 
     border-radius:14px;
 
-    border:1px solid rgba(255,255,255,.08);
+    border:1px solid var(--border);
 
-    background:rgba(255,255,255,.05);
+    background:var(--bg-table-06);
 
-    color:white;
+    color:var(--text-white);
 
     outline:none;
 
@@ -82,9 +82,9 @@
 .form-group input:focus,
 .form-group textarea:focus,
 .form-group select:focus{
-    border-color:var(--indigo);
+    border-color:var(--indigo-06);
 
-    box-shadow:0 0 0 4px rgba(99,102,241,.15);
+    box-shadow:0 0 0 4px var(--indigo-15);
 }
 
 /* ===================================
@@ -102,11 +102,11 @@
 input[type="file"]{
     padding:10px;
 
-    background:rgba(255,255,255,.03);
+    background:var(--bg-table);
 
     border-radius:14px;
 
-    border:1px dashed rgba(255,255,255,.15);
+    border:1px dashed var(--bg-table-015);
 
     color:var(--text-gray);
 }
@@ -137,7 +137,7 @@ input[type="file"]{
 
     color:white;
 
-    background:linear-gradient(to right, var(--indigo), var(--purple));
+    background:linear-gradient(to right, var(--indigo-06), var(--purple));
 
     transition:.25s;
 
@@ -158,9 +158,9 @@ input[type="file"]{
 
     border-radius:14px;
 
-    border:1px solid rgba(255,255,255,.1);
+    border:1px solid var(--bg-table);
 
-    background:rgba(255,255,255,.05);
+    background:var(--bg-table-015);
 
     color:var(--text-light);
 
@@ -170,7 +170,7 @@ input[type="file"]{
 }
 
 .btn-secondary:hover{
-    background:rgba(255,255,255,.08);
+    background:var(--border);
 }
 
 /* ===================================

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

@@ -1,35 +1,27 @@
 @import url("../base.css");
 
-/* ===================================
-   CARD WRAPPER
-=================================== */
 
 .document-card {
     background: var(--bg-card);
-
+    backdrop-filter: blur(20px);
     border: 1px solid var(--border);
-
     border-radius: 24px;
-
-    backdrop-filter: blur(20px);
-
     overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
 }
 
+/* ==========================
+   TABLE
+========================== */
+
 .document-container {
     overflow-x: auto;
 }
 
-/* ===================================
-   TABLE SYSTEM (UNIFIED)
-=================================== */
-
 .document-table {
     width: 100%;
-
+    min-width: 1200px;
     border-collapse: collapse;
-
-    min-width: 900px;
 }
 
 .document-table thead {
@@ -37,60 +29,64 @@
 }
 
 .document-table th {
-    padding: 16px;
-
+    padding: 18px;
     text-align: left;
-
     color: var(--text-light);
-
     font-size: .9rem;
-
+    font-weight: 600;
     border-bottom: 1px solid var(--border);
 }
 
 .document-table td {
-    padding: 16px;
-
+    padding: 18px;
     color: #e2e8f0;
+    border-bottom: 1px solid rgba(255, 255, 255, .05);
+    vertical-align: middle;
+}
 
-    border-bottom: 1px solid rgba(255, 255, 255, .04);
+.document-table tbody tr {
+    transition: .25s;
 }
 
 .document-table tbody tr:hover {
     background: rgba(255, 255, 255, .03);
 }
 
-/* ===================================
+/* ==========================
    FILE LINK
-=================================== */
+========================== */
 
 .file-link {
-    color: var(--indigo);
-
-    text-decoration: none;
-
+    color: var(--indigo-06);
     font-weight: 600;
+    text-decoration: none;
+    transition: .25s;
 }
 
 .file-link:hover {
-    text-decoration: underline;
+    color: var(--purple);
+}
+
+td span {
+    display: block;
+    margin-top: 6px;
+    font-size: .85rem;
+    color: #94a3b8;
 }
 
-/* ===================================
-   STATUS BADGE (SYSTEM UNIFIED)
-=================================== */
+/* ==========================
+   STATUS
+========================== */
 
 .status-pending,
 .status-approved,
 .status-rejected {
     display: inline-flex;
-
-    padding: 6px 12px;
-
+    align-items: center;
+    justify-content: center;
+    padding: 6px 14px;
     border-radius: 999px;
-
     font-size: .85rem;
-
     font-weight: 600;
 }
 
@@ -109,113 +105,130 @@
     color: var(--danger);
 }
 
-/* ===================================
-   BUTTON SYSTEM
-=================================== */
+/* ==========================
+   BUTTON
+========================== */
 
 .btn {
-    padding: 8px 14px;
-
-    border-radius: 12px;
-
     border: none;
-
+    border-radius: 12px;
+    padding: 10px 16px;
     cursor: pointer;
-
-    font-weight: 600;
-
     font-size: .85rem;
-
+    font-weight: 600;
     transition: .25s;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 
-/* DETAIL */
-.btn-detail {
-    background: rgba(59, 130, 246, .15);
+/* XEM */
 
-    color: #3b82f6;
+.btn-detail {
+    background: rgba(255, 255, 255, .06);
+    color: white;
 }
 
 .btn-detail:hover {
-    background: rgba(59, 130, 246, .25);
+    background: rgba(255, 255, 255, .12);
+    transform: translateY(-2px);
 }
 
-/* SUCCESS */
+/* DUYỆT */
+
 .btn-success {
     background: rgba(34, 197, 94, .15);
-
     color: var(--success);
 }
 
 .btn-success:hover {
     background: rgba(34, 197, 94, .25);
+    transform: translateY(-2px);
 }
 
-/* DANGER */
+/* TỪ CHỐI */
+
 .btn-danger {
     background: rgba(239, 68, 68, .15);
-
     color: var(--danger);
 }
 
 .btn-danger:hover {
     background: rgba(239, 68, 68, .25);
+    transform: translateY(-2px);
 }
 
-/* ACTION GROUP */
+/* ==========================
+   ACTIONS
+========================== */
+
 .action-group {
     display: flex;
-
     gap: 10px;
 }
 
-/* ===================================
+.action-group form {
+    margin: 0;
+}
+
+/* ==========================
    PAGINATION
-=================================== */
+========================== */
 
 .pagination {
-    display: flex;
+    padding: 20px 24px;
+    border-top: 1px solid var(--border);
 
+    display: flex;
     justify-content: space-between;
-
     align-items: center;
-
-    padding: 16px;
-
-    border-top: 1px solid var(--border);
 }
 
 .btn-pagination {
-    background: rgba(255, 255, 255, .05);
-
-    color: var(--text-light);
-
-    padding: 8px 14px;
+    min-width: 120px;
 
-    border-radius: 12px;
-
-    text-decoration: none;
+    background: linear-gradient(
+        135deg,
+        var(--indigo-06),
+        var(--purple)
+    );
 
-    transition: .25s;
+    color: white;
 }
 
 .btn-pagination:hover {
-    background: rgba(255, 255, 255, .08);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(99, 102, 241, .35);
 }
 
-/* ===================================
+.pagination span {
+    color: var(--text-light);
+}
+
+/* ==========================
    RESPONSIVE
-=================================== */
+========================== */
 
-@media(max-width:768px) {
+@media (max-width: 1200px) {
 
     .action-group {
         flex-direction: column;
     }
 
+    .action-group .btn {
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+
+    .document-table {
+        min-width: 1200px;
+    }
+
     .pagination {
         flex-direction: column;
-
-        gap: 10px;
+        gap: 15px;
     }
 }

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

@@ -31,7 +31,7 @@ video {
 
     font-weight:700;
 
-    color:white;
+    color:var(--text-white);
 }
 
 .card-body{
@@ -65,11 +65,11 @@ video {
 
     border-radius:14px;
 
-    border:1px solid rgba(255,255,255,.08);
+    border:1px solid var(--border);
 
-    background:rgba(255,255,255,.05);
+    background:var(--bg-form);
 
-    color:white;
+    color:var(--text-white);
 
     outline:none;
 
@@ -77,9 +77,9 @@ video {
 }
 
 .room-code-input input:focus{
-    border-color:var(--indigo);
+    border-color:var(--indigo-06);
 
-    box-shadow:0 0 0 4px rgba(99,102,241,.15);
+    box-shadow:0 0 0 4px var(--indigo-15);
 }
 
 /* ===================================
@@ -113,11 +113,11 @@ video {
 
     border-radius:14px;
 
-    border:1px solid rgba(255,255,255,.08);
+    border:1px solid var(--border);
 
-    background:rgba(255,255,255,.05);
+    background:var(--bg-table-06);
 
-    color:white;
+    color:var(--text-white);
 
     outline:none;
 }
@@ -127,9 +127,9 @@ video {
 
     border-radius:14px;
 
-    border:1px solid rgba(255,255,255,.1);
+    border:1px solid var(--border);
 
-    background:rgba(255,255,255,.05);
+    background:var(--bg-table-06);
 
     color:var(--text-light);
 
@@ -153,7 +153,7 @@ video {
 =================================== */
 
 .panel{
-    background:rgba(255,255,255,.03);
+    background:var(--bg-table);
 
     border:1px solid var(--border);
 
@@ -187,9 +187,9 @@ video {
 
     cursor:pointer;
 
-    background:linear-gradient(to right, var(--indigo), var(--purple));
+    background:linear-gradient(to right, var(--indigo-06), var(--purple));
 
-    color:white;
+    color:var(--text-white);
 
     font-weight:600;
 }
@@ -213,9 +213,9 @@ video {
 
     border-radius:12px;
 
-    border:1px solid rgba(255,255,255,.1);
+    border:1px solid var(--border);
 
-    background:rgba(255,255,255,.05);
+    background:var(--bg-table-06);
 
     color:var(--text-light);
 
@@ -225,11 +225,11 @@ video {
 }
 
 .mode-tabs button.active{
-    background:rgba(99,102,241,.2);
+    background:var(--indigo-15);
 
     border-color:var(--indigo);
 
-    color:white;
+    color:var(--text-white);
 }
 
 /* ===================================
@@ -241,9 +241,9 @@ video {
 
     border-radius:14px;
 
-    background:rgba(255,255,255,.03);
+    background:var(--bg-table);
 
-    border:1px solid rgba(255,255,255,.08);
+    border:1px solid var(--border);
 
     margin-bottom:12px;
 
@@ -308,19 +308,19 @@ video {
 
     font-weight:600;
 
-    color:white;
+    color:var(--text-white);
 }
 
 /* PRIMARY */
 #captureFaceBtn{
-    background:linear-gradient(to right, var(--indigo), var(--purple));
+    background:linear-gradient(to right, var(--indigo-06), var(--purple));
 }
 
 /* SECONDARY */
 .action-row .secondary{
-    background:rgba(255,255,255,.05);
+    background:var(--bg-table-06);
 
-    border:1px solid rgba(255,255,255,.1);
+    border:1px solid var(--border);
 
     color:var(--text-light);
 }

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

@@ -25,11 +25,11 @@
 
     border-collapse:collapse;
 
-    color:#e2e8f0;
+    color:var(--text-white);
 }
 
 .face-table thead{
-    background:rgba(255,255,255,.03);
+    background:var(--bg-table);
 }
 
 .face-table th{
@@ -47,7 +47,7 @@
 .face-table td{
     padding:16px;
 
-    border-bottom:1px solid rgba(255,255,255,.04);
+    border-bottom:1px solid var(--bg-form);
 
     font-size:.95rem;
 }
@@ -57,9 +57,10 @@
 }
 
 .face-table tbody tr:hover{
-    background:rgba(255,255,255,.03);
+    background:var(--bg-table);
 }
 
+
 /* ===================================
    BADGE
 =================================== */
@@ -75,11 +76,11 @@
 
     font-weight:600;
 
-    background:rgba(99,102,241,.15);
+    background:var(--bg-table-015);
 
-    color:var(--indigo);
+    color:var(--text-white );
 
-    border:1px solid rgba(99,102,241,.25);
+    border:1px solid var(--indigo-15);
 }
 
 /* ===================================
@@ -91,9 +92,9 @@
 
     border-radius:12px;
 
-    border:1px solid rgba(255,255,255,.1);
+    border:1px solid var(--border);
 
-    background:rgba(255,255,255,.05);
+    background:var(--bg-table-06);
 
     color:var(--text-light);
 
@@ -103,9 +104,9 @@
 }
 
 .detail-btn:hover{
-    background:rgba(99,102,241,.2);
+    background:var(--indigo-15);
 
-    border-color:var(--indigo);
+    border-color:var(--indigo-06);
 
     color:white;
 }
@@ -125,7 +126,14 @@
 
     font-weight:600;
 }
-
+.btn-secondery{
+    background-color:var(--danger) ;
+    color: var(--text-white);
+}
+.btn-primary{
+    background-color:var(--success) ;
+    color: var(--text-white);
+}
 /* ===================================
    TABLE WRAPPER IMPROVEMENT
 =================================== */

src/main/resources/static/css/layout/footer.css

@@ -4,24 +4,24 @@
 
 footer {
     width: 100%;
-    
+
 }
 
 .footer-layout {
     max-width: 1550px;
 
     margin: 0px;
-    padding:40px 60px 30px 60px;
+    padding: 40px 60px 30px 60px;
 
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
 
-    background: rgba(3, 7, 30, 0.85);
+    background: var(--bg-card);
 
     backdrop-filter: blur(12px);
 
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--border);
 }
 
 /* =========================
@@ -39,15 +39,15 @@ footer {
     font-weight: 700;
 
     background: linear-gradient(90deg,
-            #8b7cff,
-            #d68eff);
+            #8b5cf6,
+            #b794ff);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
 .left-description {
-    color: #9ca3af;
+    color: var(--text-light);
     font-size: 1rem;
     line-height: 1.6;
 }
@@ -63,7 +63,7 @@ footer {
 }
 
 .right-title {
-    color: white;
+    color: var(--text-white);
     font-size: 1.1rem;
     font-weight: 600;
 
@@ -73,13 +73,13 @@ footer {
 .right-description {
     text-decoration: none;
 
-    color: #9ca3af;
+    color: var(--text-light);
 
     transition: .3s;
 }
 
 .right-description:hover {
-    color: #b794ff;
+    color: var(--purple-light);
 }
 
 /* =========================
@@ -91,9 +91,10 @@ footer {
 
     padding: 20px;
 
-    color: #aeb5c4;
-    background-color: #070d20;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    color: var(--text-light);
+    background-color: #0f172a;
+    
+    border-top: 1px solid var(--bg-table-06);
 }
 
 /* =========================

src/main/resources/static/css/report/report-day.css

@@ -23,7 +23,7 @@
 
     font-weight: 800;
 
-    color: white;
+    color: var(--text-white);
 }
 
 .container-header p {
@@ -37,7 +37,7 @@
 =================================== */
 
 .card-header {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 
     border: 1px solid var(--border);
 
@@ -51,7 +51,7 @@
 
     font-weight: 700;
 
-    color: white;
+    color: var(--text-white);
 }
 
 /* ===================================
@@ -90,11 +90,11 @@
 
     border-radius: 14px;
 
-    border: 1px solid rgba(255, 255, 255, .08);
+    border: 1px solid var(--border);
 
-    background: rgba(255, 255, 255, .05);
+    background: var(--bg-table-06);
 
-    color: white;
+    color: var(--text-white);
 
     outline: none;
 
@@ -103,9 +103,9 @@
 
 .filter-group input:focus,
 .filter-group select:focus {
-    border-color: var(--indigo);
+    border-color: var(--indigo-06);
 
-    box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
+    box-shadow: 0 0 0 4px var(--indigo-15);
 }
 
 /* FILTER BUTTON */
@@ -123,9 +123,9 @@
 
     font-weight: 700;
 
-    color: white;
+    color: var(--text-white);
 
-    background: linear-gradient(to right, var(--indigo), var(--purple));
+    background: linear-gradient(to right, var(--indigo-06), var(--purple));
 
     transition: .25s;
 }
@@ -153,11 +153,11 @@
 
     border-collapse: collapse;
 
-    color: #e2e8f0;
+    color: var(--text-white);
 }
 
 .attendance-table thead {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 }
 
 .attendance-table th {
@@ -175,7 +175,7 @@
 .attendance-table td {
     padding: 16px;
 
-    border-bottom: 1px solid rgba(255, 255, 255, .04);
+    border-bottom: 1px solid var(--bg-form);
 }
 
 .attendance-table tbody tr {
@@ -183,7 +183,7 @@
 }
 
 .attendance-table tbody tr:hover {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 }
 
 /* ===================================
@@ -201,19 +201,19 @@
 }
 
 .status.present {
-    background: rgba(34, 197, 94, .15);
+    background: var(--btn-approv-15);
 
     color: var(--success);
 }
 
 .status.late {
-    background: rgba(245, 158, 11, .15);
+    background: var(--btn-warning-15);
 
     color: var(--warning);
 }
 
 .status.absent {
-    background: rgba(239, 68, 68, .15);
+    background: var(--btn-reject-15);
 
     color: var(--danger);
 }

src/main/resources/static/css/report/report-month.css

@@ -23,7 +23,7 @@
 
     font-weight: 800;
 
-    color: white;
+    color: var(--text-white);
 }
 
 .container-header p {
@@ -80,11 +80,11 @@
 
     border-radius: 14px;
 
-    border: 1px solid rgba(255, 255, 255, .08);
+    border: 1px solid var(--border);
 
-    background: rgba(255, 255, 255, .05);
+    background: var(--bg-table-06);
 
-    color: white;
+    color: var(--text-white);
 
     outline: none;
 
@@ -93,9 +93,9 @@
 
 .filter-group input:focus,
 .filter-group select:focus {
-    border-color: var(--indigo);
+    border-color: var(--indigo-06);
 
-    box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
+    box-shadow: 0 0 0 4px var(--indigo-15);
 }
 
 /* EXPORT BUTTON */
@@ -111,9 +111,9 @@
 
     font-weight: 700;
 
-    color: white;
+    color: var(--text-white);
 
-    background: linear-gradient(to right, var(--indigo), var(--purple));
+    background: linear-gradient(to right, var(--indigo-06), var(--purple));
 
     transition: .25s;
 }
@@ -169,7 +169,7 @@
 
     font-weight: 800;
 
-    color: white;
+    color: var(--text-white);
 }
 
 /* ===================================
@@ -195,7 +195,7 @@
 
     font-weight: 700;
 
-    color: white;
+    color: var(--text-white);
 
     margin-bottom: 12px;
 }
@@ -221,7 +221,7 @@
 .table-card h2 {
     font-size: 1.1rem;
 
-    color: white;
+    color: var(--text-white);
 
     margin-bottom: 12px;
 }
@@ -231,7 +231,7 @@
 
     border-collapse: collapse;
 
-    color: #e2e8f0;
+    color: var(--text-white);
 }
 
 .report-table th {
@@ -249,11 +249,11 @@
 .report-table td {
     padding: 14px;
 
-    border-bottom: 1px solid rgba(255, 255, 255, .04);
+    border-bottom: 1px solid var(--bg-form);
 }
 
 .report-table tbody tr:hover {
-    background: rgba(255, 255, 255, .03);
+    background: var(--bg-table);
 }
 
 /* ===================================

src/main/resources/static/css/sidebar/sidebar.css

@@ -1,15 +1,56 @@
 /* ===== SIDEBAR ===== */
+:root {
+    --bg-dark: #020617;
+    --bg-card: rgba(15, 23, 42, .65);
+
+    --bg-table: rgba(255, 255, 255, .03);
+    --bg-form: rgba(255, 255, 255, .04);
+    --bg-table-06: rgba(255, 255, 255, .06);
+    --bg-table-015: rgba(255, 255, 255, .15);
+
+    --border: rgba(255, 255, 255, .08);
+
+    --text-white: #ffffff;
+    --text-gray: #94a3b8;
+    --text-light: #cbd5e1;
+
+    --indigo-06: rgba(99, 102, 241, .6);
+    --indigo-15: rgba(99, 102, 241, .15);
+
+    --purple: #8b5cf6;
+    --purple-light: #b794ff;
+    --pink: #ec4899;
+    --blue: #3b82f6;
+    --pinl-light: #d68eff;
+
+    --success: rgb(37, 249, 83);
+    --warning: #f59e0b;
+    --danger: #ef4444;
+
+    --shadow-box: rgba(99, 102, 241, .15);
+
+    --btn-secondary: #334155;
+    --btn-secondary-hover: #475569;
+
+    --btn-warning-15: rgba(139, 92, 246, .15);
+
+    --btn-reject-18: rgba(239, 68, 68, .18);
+    --btn-reject-15: rgba(239, 68, 68, .15);
+
+    --btn-approv-18: rgba(34, 197, 94, .18);
+    --btn-approv-15: rgba(34, 197, 94, .15);
+}
 
 .sidebar {
-    
+
     min-height: 100vh;
 
-    background: #020c2e;
+    background: var(--bg-dark);
 
     display: flex;
     flex-direction: column;
 
-    color: white;
+    color: var(--text-white);
     font-family: "Segoe UI", sans-serif;
     padding-bottom: 30px;
 }
@@ -25,7 +66,7 @@
 }
 
 .logo {
-    width:56px;
+    width: 56px;
     height: 48px;
 
     border-radius: 18px;
@@ -36,15 +77,14 @@
 
     font-size: 24px;
 
-    background: linear-gradient(
-        135deg,
-        #02085c,
-        #2461ca
-    );
+    background: linear-gradient(135deg,
+            #02085c,
+            #2461ca);
 }
-.logo i{
+
+.logo i {
     width: 26px;
-    height:26px;
+    height: 26px;
 }
 
 .sidebar-header h2 {
@@ -53,7 +93,7 @@
 }
 
 .header-description {
-    color: #94a3b8;
+    color: var(--text-gray);
     margin-top: 4px;
     font-size: 0.95rem;
 }
@@ -62,7 +102,7 @@
 
 .sidebar-line {
     height: 1px;
-    background: rgba(255,255,255,0.08);
+    background: var(--border);
 }
 
 /* ===== MENU ===== */
@@ -85,7 +125,7 @@
 
     text-decoration: none;
 
-    color: #94a3b8;
+    color: var(--text-gray);
 
     padding: 14px 18px;
 
@@ -100,23 +140,33 @@
 /* Hover */
 
 .sidebar-link:hover {
-    background: rgba(255,255,255,0.05);
-    color: white;
+    background: var(--bg-table-06);
+    color: var(--text-white);
 }
 
 /* Active giống ảnh */
+.sidebar-link.active {
+    background: linear-gradient(135deg,
+            #3b82f6,
+            #6366f1,
+            #8b5cf6);
+
+    color: #fff;
 
-.sidebar-option.active .sidebar-link {
-    background: linear-gradient(
-        90deg,
-        #02085c,
-        #2461ca
-    );
+    border: 1px solid rgba(255, 255, 255, .08);
 
-    color: white;
+    transform: translateX(6px);
 
     box-shadow:
-        0 8px 25px rgba(63, 120, 235, 0.3);
+        0 0 20px rgba(99, 102, 241, .45),
+        0 10px 30px rgba(99, 102, 241, .35);
+
+    backdrop-filter: blur(10px);
+}
+
+.sidebar-link.active span {
+    transform: scale(1.15);
+    text-shadow: 0 0 12px rgba(255, 255, 255, .8);
 }
 
 /* ===== FOOTER ===== */
@@ -135,7 +185,7 @@
 
     border-radius: 20px;
 
-    background: rgba(255,255,255,0.05);
+    background: var(--bg-table-06);
 
     margin-bottom: 20px;
 }
@@ -152,16 +202,16 @@
 
     font-size: 20px;
 
-    background: linear-gradient(
-        135deg,
-        #1e044d,
-        #251785
-    );
+    background: linear-gradient(135deg,
+            #1e044d,
+            #251785);
 }
+
 .avatar i {
     font-size: 28px;
-    color:white;
+    color: var(--text-white);
 }
+
 .footer-user h3 {
     font-size: 1.1rem;
 }
@@ -171,7 +221,7 @@
     align-items: center;
     gap: 12px;
 
-    color: #94a3b8;
+    color: var(--text-gray);
 
     cursor: pointer;
 
@@ -186,6 +236,6 @@
 }
 
 .logout:hover {
-    background: rgba(255,255,255,0.05);
-    color: white;
+    background: var(--bg-table-06);
+    color: var(--text-white);
 }

src/main/resources/static/css/theme.css

@@ -1,235 +1,43 @@
-/* ===========================
-   FACE ID ATTENDANCE SYSTEM
-   Theme CSS - Light & Dark Mode
-   =========================== */
+[data-theme="light"] {
+    --bg-dark: #020617;
+    --bg-card: rgba(15, 23, 42, .65);
 
-:root {
-    /* Light Mode Colors */
-    --background: #ffffff;
-    --foreground: #0F1117;
-    --card: #ffffff;
-    --card-foreground: #0F1117;
-    --popover: #ffffff;
-    --popover-foreground: #0F1117;
-    --primary: #3B82F6;
-    --primary-foreground: #ffffff;
-    --secondary: #F3F4F6;
-    --secondary-foreground: #0F1117;
-    --muted: #F3F4F6;
-    --muted-foreground: #6B7280;
-    --accent: #F3F4F6;
-    --accent-foreground: #0F1117;
-    --destructive: #EF4444;
-    --destructive-foreground: #ffffff;
-    --border: #E5E7EB;
-    --input: #E5E7EB;
-    --input-background: #ffffff;
-    --ring: #3B82F6;
-    --success: #10B981;
-    --warning: #F59E0B;
-    --info: #3B82F6;
+    --bg-table: rgba(255, 255, 255, .03);
+    --bg-form: rgba(255, 255, 255, .04);
+    --bg-table-06: rgba(255, 255, 255, .06);
+    --bg-table-015: rgba(255, 255, 255, .15);
 
-    /* Spacing */
-    --radius: 0.5rem;
-    --transition-duration: 300ms;
-}
+    --bg-purple-025:rgba(1, 1, 11, 0.25);
 
-[data-theme="dark"] {
-    /* Dark Mode Colors */
-    --background: #0F1117;
-    --foreground: #F9FAFB;
-    --card: #1B1F2A;
-    --card-foreground: #F9FAFB;
-    --popover: #1B1F2A;
-    --popover-foreground: #F9FAFB;
-    --primary: #60A5FA;
-    --primary-foreground: #0F1117;
-    --secondary: #1F2937;
-    --secondary-foreground: #F9FAFB;
-    --muted: #1F2937;
-    --muted-foreground: #9CA3AF;
-    --accent: #1F2937;
-    --accent-foreground: #F9FAFB;
-    --destructive: #EF4444;
-    --destructive-foreground: #ffffff;
-    --border: #374151;
-    --input: #374151;
-    --input-background: #1F2937;
-    --ring: #60A5FA;
-    --success: #10B981;
-    --warning: #F59E0B;
-    --info: #60A5FA;
-}
+    --border: rgba(255, 255, 255, .08);
 
-/* ===========================
-   RESET & BASE STYLES
-   =========================== */
+    --text-white: #ffffff;
+    --text-gray: #94a3b8;
+    --text-light: #cbd5e1;
 
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
+    --indigo-06: rgba(99, 102, 241, .6);
+    --indigo-15: rgba(99, 102, 241, .15);
+    --indigo-08: rgba(10, 11, 65, 0.08);
+    --purple: #8b5cf6;
+    --purple-light: #b794ff;
+    --pink: #ec4899;
+    --blue: #3b82f6;
+    --pinl-light: #d68eff;
 
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    background-color: var(--background);
-    color: var(--foreground);
-    line-height: 1.5;
-    transition: background-color var(--transition-duration), color var(--transition-duration);
-}
+    --success: rgb(37, 249, 83);
+    --warning: #f59e0b;
+    --danger: #ef4444;
 
-h1, h2, h3, h4, h5, h6 {
-    font-weight: 700;
-    line-height: 1.2;
-}
+    --shadow-box: rgba(99, 102, 241, .15);
 
-h1 { font-size: 2rem; }
-h2 { font-size: 1.5rem; }
-h3 { font-size: 1.25rem; }
+    --btn-secondary: #334155;
+    --btn-secondary-hover: #475569;
 
-/* ===========================
-   SCROLLBAR STYLING
-   =========================== */
+    --btn-warning-15: rgba(139, 92, 246, .15);
 
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
+    --btn-reject-18: rgba(239, 68, 68, .18);
+    --btn-reject-15: rgba(239, 68, 68, .15);
 
-::-webkit-scrollbar-track {
-    background: var(--secondary);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--muted-foreground);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--foreground);
-}
-
-/* ===========================
-   UTILITY CLASSES
-   =========================== */
-
-.container {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 0 1.5rem;
-}
-
-.text-center { text-align: center; }
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-
-.font-bold { font-weight: 700; }
-.font-semibold { font-weight: 600; }
-.font-medium { font-weight: 500; }
-
-.text-sm { font-size: 0.875rem; }
-.text-xs { font-size: 0.75rem; }
-.text-lg { font-size: 1.125rem; }
-.text-xl { font-size: 1.25rem; }
-.text-2xl { font-size: 1.5rem; }
-.text-3xl { font-size: 1.875rem; }
-
-.text-muted { color: var(--muted-foreground); }
-.text-primary { color: var(--primary); }
-.text-success { color: var(--success); }
-.text-warning { color: var(--warning); }
-.text-destructive { color: var(--destructive); }
-
-.bg-card { background-color: var(--card); }
-.bg-secondary { background-color: var(--secondary); }
-.bg-primary { background-color: var(--primary); }
-.bg-success { background-color: var(--success); }
-.bg-warning { background-color: var(--warning); }
-.bg-destructive { background-color: var(--destructive); }
-
-.border { border: 1px solid var(--border); }
-.border-primary { border-color: var(--primary); }
-.border-success { border-color: var(--success); }
-.border-warning { border-color: var(--warning); }
-.border-destructive { border-color: var(--destructive); }
-
-.rounded { border-radius: var(--radius); }
-.rounded-lg { border-radius: calc(var(--radius) * 1.5); }
-.rounded-xl { border-radius: calc(var(--radius) * 2); }
-.rounded-full { border-radius: 9999px; }
-
-.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
-.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
-
-.transition-all {
-    transition: all var(--transition-duration);
-}
-
-/* Flexbox */
-.flex { display: flex; }
-.flex-col { flex-direction: column; }
-.items-center { align-items: center; }
-.items-start { align-items: flex-start; }
-.items-end { align-items: flex-end; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-.justify-end { justify-content: flex-end; }
-.gap-1 { gap: 0.25rem; }
-.gap-2 { gap: 0.5rem; }
-.gap-3 { gap: 0.75rem; }
-.gap-4 { gap: 1rem; }
-.gap-6 { gap: 1.5rem; }
-
-/* Grid */
-.grid { display: grid; }
-.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
-.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
-.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
-.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
-.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
-
-/* Spacing */
-.p-1 { padding: 0.25rem; }
-.p-2 { padding: 0.5rem; }
-.p-3 { padding: 0.75rem; }
-.p-4 { padding: 1rem; }
-.p-6 { padding: 1.5rem; }
-.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
-.px-4 { padding-left: 1rem; padding-right: 1rem; }
-.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
-.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
-.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
-.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
-
-.m-0 { margin: 0; }
-.mb-1 { margin-bottom: 0.25rem; }
-.mb-2 { margin-bottom: 0.5rem; }
-.mb-3 { margin-bottom: 0.75rem; }
-.mb-4 { margin-bottom: 1rem; }
-.mb-6 { margin-bottom: 1.5rem; }
-.mt-1 { margin-top: 0.25rem; }
-.mt-2 { margin-top: 0.5rem; }
-.mt-4 { margin-top: 1rem; }
-.mx-auto { margin-left: auto; margin-right: auto; }
-
-/* Width & Height */
-.w-full { width: 100%; }
-.h-full { height: 100%; }
-.min-h-screen { min-height: 100vh; }
-
-/* Display */
-.hidden { display: none; }
-.block { display: block; }
-.inline-block { display: inline-block; }
-.inline-flex { display: inline-flex; }
-
-/* Position */
-.relative { position: relative; }
-.absolute { position: absolute; }
-.fixed { position: fixed; }
-
-/* Overflow */
-.overflow-hidden { overflow: hidden; }
-.overflow-auto { overflow: auto; }
+    --btn-approv-18: rgba(34, 197, 94, .18);
+    --btn-approv-15: rgba(34, 197, 94, .15);
+}

src/main/resources/static/css/user/user-information.css

@@ -7,7 +7,7 @@
 .container-card,
 .dashboard-card {
     background: var(--bg-card);
-    border: 0.65px solid rgba(41, 28, 86, 0.6);
+    border: 0.65px solid var(--indigo-15);
     border-radius: 14px;
 
     backdrop-filter: blur(10px);
@@ -22,15 +22,35 @@
 
 .card-header {
     padding: 16px 20px;
-
-    border-bottom: 1px solid rgba(255,255,255,0.06);
-    background: rgba(2, 12, 46, 0.6);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--bg-table-06);
+    background: var(--indigo-08);
 }
 
 .card-header h2 {
     font-size: 16px;
     font-weight: 700;
     color: var(--text-white);
+    padding-right: 730px;
+}
+.edit-header {
+    padding: 16px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--bg-table-06);
+    background: var(--indigo-08);
+    margin-bottom: 30px;
+    border-radius: 15px;
+}
+
+.edit-header h2 {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-white);
+    padding-right: 730px;
 }
 
 /* =========================
@@ -40,24 +60,35 @@
 .card-body {
     padding: 18px 20px;
 }
+#editInformation {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
 
+    background: var(--bg-dark);
+
+    justify-content: center;
+    align-items: center;
+
+    z-index: 9999;
+}
 /* =========================
    INFO GRID
 ========================= */
 
-.info-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 14px;
-}
+
 
 .info-item {
     padding: 12px 14px;
 
     border-radius: 12px;
-    border: 1px solid rgba(255,255,255,0.06);
+    border: 1px solid var(--bg-table-06);
 
-    background: rgba(2, 6, 23, 0.35);
+    background: var(--bg-card);
 }
 
 .info-item label {
@@ -93,16 +124,16 @@
     padding: 10px 12px;
 
     border-radius: 10px;
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid var(--bg-table-06);
 
-    background: rgba(2, 6, 23, 0.6);
+    background: var(--bg-dark);
     color: var(--text-white);
 
     outline: none;
 }
 
 .form-group input:focus {
-    border-color: var(--indigo);
+    border-color: var(--indigo-06);
 }
 
 /* =========================
@@ -124,8 +155,8 @@
     cursor: pointer;
     font-weight: 600;
 
-    color: white;
-    background: linear-gradient(90deg, var(--indigo), var(--purple));
+    color: var(--text-white);
+    background: linear-gradient(90deg, var(--indigo-06), var(--purple));
 
     transition: 0.2s;
 }
@@ -139,7 +170,7 @@
     padding: 10px 14px;
 
     border-radius: 10px;
-    border: 1px solid rgba(255,255,255,0.12);
+    border: 1px solid var(--bg-table-015);
 
     background: transparent;
     color: var(--text-white);
@@ -149,9 +180,195 @@
 }
 
 .btn-secondary:hover {
-    background: rgba(255,255,255,0.05);
+    background: var(--bg-table-06);
+}
+
+
+/* =========================
+   POPUP
+========================= */
+
+#editInformation {
+    display: none;
+    position: fixed;
+    inset: 0;
+
+    background: var(--bg-dark);
+    backdrop-filter: blur(6px);
+
+    justify-content: center;
+    align-items: center;
+
+    z-index: 9999;
+}
+
+/* hiện popup */
+#editInformation.show {
+    display: flex;
+}
+
+/* =========================
+   CARD
+========================= */
+
+.edit-card {
+    width: 1550px;
+    max-width: 100%;
+
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 18px;
+
+    overflow: hidden;
+
+    box-shadow: 0 20px 60px var(--bg-dark);
+    animation: popup .25s ease;
+
+    backdrop-filter: blur(10px);
+
+    margin-bottom: 20px;
+}
+
+@keyframes popup{
+    from{
+        opacity:0;
+        transform:translateY(-20px) scale(.95);
+    }
+    to{
+        opacity:1;
+        transform:translateY(0) scale(1);
+    }
+}
+
+/* =========================
+   HEADER
+========================= */
+
+.card-header{
+    padding:18px 24px;
+
+    background: var(--bg-card);
+    border-bottom:1px solid var(--border);
+}
+
+.card-header h2{
+    margin:0;
+    font-size:18px;
+    color:var(--text-white);
+}
+
+/* =========================
+   BODY
+========================= */
+
+.edit-body{
+   
+    padding: 18px 20px;
+
+    background-color: var(--bg-card);
+    border-radius: 30px;
+    border-color:1px var(--border)  ;
 }
 
+.info-grid{
+    
+    
+    display:grid;
+    grid-template-columns:repeat(2,1fr);
+    gap:18px;
+}
+
+/* =========================
+   INPUT
+========================= */
+
+.info-item{
+    display:flex;
+    flex-direction:column;
+}
+
+.info-item label{
+    margin-bottom:8px;
+
+    font-size:13px;
+    font-weight:600;
+
+    color:var(--text-gray);
+}
+
+.info-item input{
+    width:100%;
+    padding:12px 14px;
+
+    border-radius:12px;
+    border:1px solid var(--border);
+
+    background:var(--bg-card);
+
+    color:var(--text-white);
+    font-size:14px;
+
+    outline:none;
+    transition:.25s;
+}
+
+.info-item input::placeholder{
+    color:var(--text-gray);
+}
+
+.info-item input:focus{
+    border-color:var(--indigo-06);
+    box-shadow:0 0 0 3px var(--indigo-15);
+}
+
+/* =========================
+   BUTTONS
+========================= */
+
+.btn-run{
+    grid-column:1 / -1;
+
+    display:flex;
+    justify-content:flex-end;
+    gap:12px;
+
+    margin-top:10px;
+}
+
+.btn{
+    min-width:120px;
+    padding:12px 18px;
+
+    border:none;
+    border-radius:10px;
+
+    font-size:14px;
+    font-weight:600;
+
+    cursor:pointer;
+    transition:.25s;
+}
+
+.btn-primary{
+    color:var(--text-white);
+    background:linear-gradient(135deg,var(--indigo-06),var(--purple));
+}
+
+.btn-primary:hover{
+    transform:translateY(-2px);
+    box-shadow:0 10px 20px var(--indigo-15);
+}
+
+.btn-close{
+    color:var(--text-white);
+
+    background:transparent;
+    border:1px solid var(--bg-table-015);
+}
+
+.btn-close:hover{
+    background:var(--bg-table-06);
+}
 /* =========================
    RESPONSIVE
 ========================= */

src/main/resources/static/js/employee/copy-code.js

@@ -0,0 +1,7 @@
+const copyBtn = document.getElementById("copyBtn");
+
+copyBtn.addEventListener("click", () => {
+    navigator.clipboard.writeText(
+        document.getElementById("roomCode").textContent
+    );
+});

src/main/resources/static/js/employee/employee-popup.js

@@ -0,0 +1,24 @@
+const popup = document.getElementById("card-addEmployee");
+
+function openPopup() {
+    popup.classList.add("show");
+}
+
+function closePopup() {
+    popup.classList.remove("show");
+}
+
+// Mở popup
+document.getElementById("add-employee")
+    .addEventListener("click", openPopup);
+
+// Đóng bằng nút X
+document.getElementById("closePopup")
+    .addEventListener("click", closePopup);
+
+// Đóng khi click nền tối
+popup.addEventListener("click", (e) => {
+    if (e.target === popup) {
+        closePopup();
+    }
+});

src/main/resources/static/js/employee/room-code.js

@@ -0,0 +1,13 @@
+const roomSelect = document.getElementById("roomSelect");
+const roomCode = document.getElementById("roomCode");
+
+const roomCodes = {
+    DE211: "DE211-X7A9",
+    DE212: "DE212-LP81",
+    DE213: "DE213-KM32"
+};
+
+roomSelect.addEventListener("change", () => {
+    roomCode.textContent =
+        roomCodes[roomSelect.value] || "--------";
+});

src/main/resources/static/js/main.js

@@ -8,14 +8,18 @@
 // ===========================
 
 function initTheme() {
-    const savedTheme = localStorage.getItem('theme') || 'light';
-    document.documentElement.setAttribute('data-theme', savedTheme);
-    updateThemeIcon(savedTheme);
+    const savedTheme = localStorage.getItem("theme");
+
+    if (savedTheme) {
+        document.documentElement.setAttribute("data-theme", savedTheme);
+    }
+
+    updateThemeIcon(savedTheme || "dark");
 }
 
 function toggleTheme() {
     const currentTheme = document.documentElement.getAttribute('data-theme');
-    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+    const newTheme = currentTheme === 'light' ? 'dark' : 'dark';
     document.documentElement.setAttribute('data-theme', newTheme);
     localStorage.setItem('theme', newTheme);
     updateThemeIcon(newTheme);

src/main/resources/static/js/sidebar.js

@@ -0,0 +1,13 @@
+
+document.addEventListener("DOMContentLoaded", () => {
+    const links = document.querySelectorAll(".sidebar-link");
+
+    links.forEach(link => {
+        link.addEventListener("click", function (e) {
+            e.preventDefault();
+
+            links.forEach(item => item.classList.remove("active"));
+            this.classList.add("active");
+        });
+    });
+});

src/main/resources/templates/cms/account/employee-list.html

@@ -0,0 +1,271 @@
+<!doctype html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Quản lý nhân viên</title>
+
+    <link rel="stylesheet" th:href="@{/css/account/employee-list.css}">
+</head>
+
+<body>
+
+    <div class="bg-image"></div>
+
+    <div class="layout">
+
+        <div th:replace="~{cms/sidebar/sidebar-manage :: sidebar}"></div>
+
+        <div class="container-layout">
+
+            <!-- HEADER -->
+            <div class="container-header">
+                <h1>Quản lý nhân viên</h1>
+                <p>Quản lý nhân viên theo phòng ban</p>
+            </div>
+
+            <main class="main-container">
+
+                <section class="dashboard-card">
+
+                    <!-- Header -->
+                    <div class="card-header">
+
+                        <h2>Danh sách nhân viên</h2>
+
+                        <button id="add-employee" class="add-btn">
+                            + Thêm nhân viên
+                        </button>
+
+                    </div>
+
+                    <!-- Search + Filter -->
+                    <div class="toolbar">
+
+                        <div class="search-box">
+                            <input type="text" placeholder="Tìm theo tên, email hoặc mã nhân viên...">
+                        </div>
+
+                        <div class="filter-box">
+
+                            <select>
+                                <option>Tất cả phòng ban</option>
+                                <option>Phòng IT</option>
+                                <option>Phòng Nhân sự</option>
+                                <option>Phòng Kế toán</option>
+                                <option>Phòng Marketing</option>
+                            </select>
+
+                            <select>
+                                <option>Tất cả trạng thái</option>
+                                <option>Đang làm việc</option>
+                                <option>Nghỉ việc</option>
+                                <option>Tạm khóa</option>
+                            </select>
+
+                        </div>
+
+                    </div>
+
+                    <!-- TABLE -->
+                    <table>
+
+                        <thead>
+
+                            <tr>
+
+                                <th>Nhân viên</th>
+
+                                <th>Mã NV</th>
+
+                                <th>Email</th>
+
+                                <th>Phòng ban</th>
+
+                                <th>Vai trò</th>
+
+                                <th>Trạng thái</th>
+
+                                <th>Hành động</th>
+
+                            </tr>
+
+                        </thead>
+
+                        <tbody>
+
+                            <tr>
+
+                                <td>
+
+                                    <div class="user">
+
+                                        <div class="avatar">H</div>
+
+                                        <strong>Nguyễn Minh Hải</strong>
+
+                                    </div>
+
+                                </td>
+
+                                <td>EMP001</td>
+
+                                <td>hai@gmail.com</td>
+
+                                <td>IT</td>
+
+                                <td>Nhân viên</td>
+
+                                <td>
+
+                                    <span class="status active">
+                                        Đang làm việc
+                                    </span>
+
+                                </td>
+
+                                <td>
+
+                                    <div class="actions">
+
+                                        <button class="icon-btn">
+                                            Chi tiết
+                                        </button>
+
+                                        <button class="icon-btn btn-role">
+                                            Chuyển phòng
+                                        </button>
+
+                                        <button class="icon-btn lock">
+                                            Khóa
+                                        </button>
+
+                                    </div>
+
+                                </td>
+
+                            </tr>
+
+                            <tr>
+
+                                <td>
+
+                                    <div class="user">
+
+                                        <div class="avatar">A</div>
+
+                                        <strong>Nguyễn Văn An</strong>
+
+                                    </div>
+
+                                </td>
+
+                                <td>EMP002</td>
+
+                                <td>an@gmail.com</td>
+
+                                <td>Nhân sự</td>
+
+                                <td>Trưởng phòng</td>
+
+                                <td>
+
+                                    <span class="status inactive">
+                                        Nghỉ việc
+                                    </span>
+
+                                </td>
+
+                                <td>
+
+                                    <div class="actions">
+
+                                        <button class="icon-btn">
+                                            Chi tiết
+                                        </button>
+
+                                        <button class="icon-btn btn-role">
+                                            Chuyển phòng
+                                        </button>
+
+                                        <button class="icon-btn lock">
+                                            Mở khóa
+                                        </button>
+
+                                    </div>
+
+                                </td>
+
+                            </tr>
+
+                        </tbody>
+
+                    </table>
+
+                </section>
+
+            </main>
+
+            <div th:replace="~{cms/layout/footer :: footer}"></div>
+
+        </div>
+
+    </div>
+    <section id="card-addEmployee" class="card-add">
+        <div class="card-container">
+
+            <div class="card-headers">
+                <div class="header-icon">
+                    <i class="bi bi-person-add"></i>
+                </div>
+
+                <h2>Mời thành viên vào phòng</h2>
+            </div>
+
+            <div class="card-body">
+
+                <!-- Chọn phòng -->
+                <div class="filter-box">
+                    <label>Chọn phòng</label>
+
+                    <select id="roomSelect">
+                        <option value="">-- Chọn phòng ban --</option>
+                        <option value="DE211">Phòng DE211</option>
+                        <option value="DE212">Phòng DE212</option>
+                        <option value="DE213">Phòng DE213</option>
+                    </select>
+                </div>
+
+                <!-- Hiển thị sau khi chọn -->
+                <div class="container-QR" id="joinInfo">
+
+                    <div class="room-code-box">
+                        <span>Mã tham gia</span>
+
+                        <h1 id="roomCode">DE211-X7A9</h1>
+
+                        <button id="copyBtn">
+                            Sao chép mã
+                        </button>
+                    </div>
+
+                    <p class="note">
+                        Sinh viên nhập mã trên hoặc quét QR để tham gia phòng.
+                    </p>
+
+                </div>
+                <button id="closePopup" class="close-btn">
+                    <i class="fas fa-times">Đóng</i>
+                    
+                </button>
+            </div>
+
+        </div>
+    </section>
+    <script src="/js/employee/employee-popup.js"></script>
+    <script src="/js/employee/room-code.js"></script>
+    <script src="/js/employee/copy-code.js"></script>
+</body>
+
+</html>

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

@@ -103,7 +103,7 @@
 
                             <div class="quick-actions-grid">
 
-                                <a href="#" class="quick-action-card">
+                                <a href="/useInformation" class="quick-action-card">
                                     <div class="quick-action-card__icon">
                                         <i class="bi bi-person-lines-fill"></i>
                                     </div>
@@ -115,7 +115,7 @@
                                     </div>
                                 </a>
 
-                                <a href="#" class="quick-action-card">
+                                <a href="/documentCreate" class="quick-action-card">
                                     <div class="quick-action-card__icon">
                                         <i class="bi bi-file-earmark-arrow-up-fill"></i>
                                     </div>
@@ -125,7 +125,7 @@
                                     </div>
                                 </a>
 
-                                <a href="#" class="quick-action-card">
+                                <a href="/attendanceHistory" class="quick-action-card">
                                     <div class="quick-action-card__icon">
                                         <i class="bi bi-calendar-check-fill"></i>
                                     </div>
@@ -135,7 +135,7 @@
                                     </div>
                                 </a>
 
-                                <a href="#" class="quick-action-card">
+                                <a href="/absentCreate" class="quick-action-card">
                                     <div class="quick-action-card__icon">
                                         <i class="bi bi-calendar2-x-fill"></i>
                                     </div>
@@ -241,17 +241,17 @@
 
                             <div class="profile-item">
                                 <label>Email</label>
-                                <span th:text="${#authentication.principal.email}"></span>
+                                <span >haivuive266@gmail.com</span>
                             </div>
 
                             <div class="profile-item">
                                 <label>Số điện thoại</label>
-                                <span th:text="${#authentication.principal.phone}"></span>
+                                <span >0987654321</span>
                             </div>
 
                             <div class="profile-item">
                                 <label>Phòng ban</label>
-                                <span th:text="${#authentication.principal.department}">IT Department</span>
+                                <span >IT Department</span>
                             </div>
 
                             <div class="profile-item">

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

@@ -45,22 +45,21 @@
 
                                 <tr>
 
-                                    <td ">
-                                    Nguyễn Văn A
-                                </td>
-
-                                <td >
-                                    Báo cáo tuần 01
-                                </td>
-
-                                <td >
-                                    15/02/2025
-                                </td>
-
-                                <td>
-                                    <a 
-                                        class=" file-link">
-                                        📎 Tải file
+                                    <td>
+                                        Nguyễn Văn A
+                                    </td>
+
+                                    <td>
+                                        Báo cáo tuần 01
+                                    </td>
+
+                                    <td>
+                                        15/02/2025
+                                    </td>
+
+                                    <td>
+                                        <a class=" file-link">
+                                            📎 Tải file
                                         </a>
 
                                         <span>
@@ -80,17 +79,11 @@
 
                                     <td>
 
-                                        <span th:if="${report.status == 'PENDING'}" class="status-pending">
+                                        <span  class="status-pending">
                                             Chờ duyệt
                                         </span>
 
-                                        <span th:if="${report.status == 'APPROVED'}" class="status-approved">
-                                            Đã duyệt
-                                        </span>
-
-                                        <span th:if="${report.status == 'REJECTED'}" class="status-rejected">
-                                            Từ chối
-                                        </span>
+                                        
 
                                     </td>
 
@@ -102,7 +95,7 @@
 
                                     <td>
 
-                                        <div class="action-group" th:if="${report.status == 'PENDING'}">
+                                        <div class="action-group" >
 
                                             <form method="post">
 

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

@@ -57,6 +57,7 @@
                                         10 / 10
                                     </span>
                                 </td>
+                                <td>DE214</td>
                                 <td><button class="detail-btn" onclick="openFaceGallery()">
 
                                         Xem ảnh
@@ -65,8 +66,8 @@
                                 </td>
 
                                 <td>
-
-                                    Chấp nhận -từ chốt
+                                    <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>
                             </tr>
 
@@ -89,7 +90,8 @@
 
                                     </button>
                                 </td>
-                                <td>Đồng ý</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>
                             </tr>
 
                         </tbody>

src/main/resources/templates/cms/layout/footer.html

@@ -45,6 +45,7 @@
             © 2026 Smart Attendance. All rights reserved.
         </div>
     </footer>
+    
 </body>
 
 </html>

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

@@ -60,8 +60,8 @@
                 </div>
             </div> -->
             <div>
-                <h3 >Nguyen van an</h3>
-                <div class="header-description" >
+                <h3>Nguyen van an</h3>
+                <div class="header-description">
                     admin
                 </div>
             </div>
@@ -74,4 +74,14 @@
         </form>
 
     </div>
+    <script>
+        const links = document.querySelectorAll(".sidebar-link");
+        const currentPath = window.location.pathname;
+
+        links.forEach(link => {
+            if (link.getAttribute("href") === currentPath) {
+                link.classList.add("active");
+            }
+        });
+    </script>
 </div>

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

@@ -94,4 +94,14 @@
         </form>
 
     </div>
+    <script>
+        const links = document.querySelectorAll(".sidebar-link");
+        const currentPath = window.location.pathname;
+
+        links.forEach(link => {
+            if (link.getAttribute("href") === currentPath) {
+                link.classList.add("active");
+            }
+        });
+    </script>
 </div>

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

@@ -1,18 +1,20 @@
 <div class="sidebar" th:fragment="sidebar">
 
     <div class="sidebar-header">
-        <div class="logo">
-            <a href="/" >
-            📷
-        </a>
 
+        <div class="logo">
+            <a href="/">
+                📷
+            </a>
         </div>
-        
+
 
         <div>
             <h2>Smart Attendance</h2>
             <div class="header-description">Quản lý</div>
         </div>
+
+
     </div>
 
     <div class="sidebar-line"></div>
@@ -32,7 +34,12 @@
                 Quản lý điểm danh
             </a>
         </li>
-
+        <li class="sidebar-option">
+            <a href="/employeeList" class="sidebar-link">
+                <span>👥</span>
+                Quản lý nhân viên
+            </a>
+        </li>
         <li class="sidebar-option">
             <a href="/faceIDList" class="sidebar-link">
                 <span>👤</span>
@@ -46,6 +53,12 @@
                 Duyệt nghỉ phép
             </a>
         </li>
+        <li class="sidebar-option">
+            <a href="/documentList" class="sidebar-link">
+                <span>📝</span>
+                Danh sách báo cáo
+            </a>
+        </li>
         <li class="sidebar-option">
             <a href="/userInformation" class="sidebar-link">
                 <span>🪪</span>
@@ -73,9 +86,9 @@
                     Vai trò
                 </div>
             </div> -->
-             <div>
-                <h3 >Nguyen van an</h3>
-                <div class="header-description" >
+            <div>
+                <h3>Nguyen van an</h3>
+                <div class="header-description">
                     Manager
                 </div>
             </div>
@@ -88,5 +101,14 @@
         </form>
 
     </div>
+    <script>
+        const links = document.querySelectorAll(".sidebar-link");
+        const currentPath = window.location.pathname;
 
+        links.forEach(link => {
+            if (link.getAttribute("href") === currentPath) {
+                link.classList.add("active");
+            }
+        });
+    </script>
 </div>

src/main/resources/templates/cms/user/user-information.html

@@ -34,10 +34,11 @@
 
                     <div class="card-header">
                         <h2>Thông tin cá nhân</h2>
+                        <button class="btn btn-primary" id="changeInformation">Sửa</button>
+
                     </div>
 
                     <div class="card-body">
-
                         <div class="info-grid">
 
                             <div class="info-item">
@@ -112,13 +113,69 @@
                 </section>
 
             </main>
+
             <div th:replace="~{cms/layout/footer :: footer}"></div>
 
         </div>
     </div>
 
+    <section class="edit-card" id="editInformation">
+
+        
+            <div class="edit-body">
+                <div class="edit-header">
+                    <h2>Thông tin cá nhân</h2>
+                </div>
+                <div class="info-grid">
+                    <div class="info-item">
+                        <label >Họ và tên</label>
+                        <input type="text">
+                    </div>
+                    <div class="info-item">
+                        <label >Tên đăng nhập</label>
+                        <input type="text">
+                    </div>
+                    <div class="info-item">
+                        <label >Email</label>
+                        <input type="text">
+                    </div>
+                    <div class="info-item">
+                        <label >Số điện thoại</label>
+                        <input type="text">
+                    </div>
+                    <div class="info-item">
+                        <label >Bộ phận</label>
+                        <input type="text">
+                    </div>
+                    <div class="btn-run">
+                        <button id="btnEdit" class="btn btn-primary">
+                            Sửa
+                        </button>
+
+                        <button id="btnClose" class="btn btn-close">
+                            Đóng
+                        </button>
+                    </div>
+                </div>
+            </div>
+        
+    </section>
     <!-- FOOTER -->
-
+    <script>
+        const btn = document.getElementById("editInformation");
+        document.getElementById("changeInformation").onclick = function () {
+            btn.style.display = "flex";
+        };
+        document.getElementById("btnClose").onclick = function () {
+            btn.style.display = "none";
+        }
+
+        btn.addEventListener("click", function (e) {
+            if (e.target === btn) {
+                btn.style.display = "none";
+            }
+        });
+    </script>
 </body>
 
 </html>