Merge branch 'main' of https://github.com/minhhai266/Attendance

pom.xml

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://maven.apache.org/POM/4.0.0"
-    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
     <modelVersion>4.0.0</modelVersion>
     <parent>
         <groupId>org.springframework.boot</groupId>
@@ -31,45 +30,39 @@
         <java.version>21</java.version>
     </properties>
     <dependencies>
-        <dependency>
-            <groupId>org.mariadb.jdbc</groupId>
-            <artifactId>mariadb-java-client</artifactId>
-        </dependency>
+        <!-- <dependency>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-starter-data-jpa</artifactId>
+        </dependency> -->
         <dependency>
             <groupId>org.springframework.boot</groupId>
-            <artifactId>spring-boot-starter-data-jpa</artifactId>
+            <artifactId>spring-boot-starter-validation</artifactId>
         </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>
-            <artifactId>spring-boot-starter-validation</artifactId>
+            <artifactId>spring-boot-starter-data-jpa</artifactId>
         </dependency>
         <dependency>
             <groupId>org.projectlombok</groupId>
             <artifactId>lombok</artifactId>
-            <version>1.18.32</version>
+            <!-- <version>1.18.32</version> -->
             <optional>true</optional>
         </dependency>
+        <!-- OAuth2 Google Login -->
         <dependency>
             <groupId>org.springframework.boot</groupId>
-            <artifactId>spring-boot-starter-restclient</artifactId>
-        </dependency>
-        <dependency>
-            <groupId>org.apache.tomcat.embed</groupId>
-            <artifactId>tomcat-embed-jasper</artifactId>
+            <artifactId>spring-boot-starter-oauth2-client</artifactId>
         </dependency>
-
+        <!-- Spring Boot Web -->
         <dependency>
-            <groupId>jakarta.servlet.jsp.jstl</groupId>
-            <artifactId>jakarta.servlet.jsp.jstl-api</artifactId>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
         </dependency>
 
-        <dependency>
-            <groupId>org.glassfish.web</groupId>
-            <artifactId>jakarta.servlet.jsp.jstl</artifactId>
-        </dependency>
+        <!-- Embedded Tomcat (not provided so java -jar works) -->
         <dependency>
             <groupId>org.springframework.boot</groupId>
-            <artifactId>spring-boot-starter-webmvc</artifactId>
+            <artifactId>spring-boot-starter-tomcat</artifactId>
         </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>
@@ -77,27 +70,27 @@
             <scope>runtime</scope>
             <optional>true</optional>
         </dependency>
-        <!-- <dependency>
-                <groupId>com.mysql</groupId>
-                <artifactId>mysql-connector-j</artifactId>
-                <scope>runtime</scope>
-        </dependency> -->
-        <!-- <dependency>
-                <groupId>org.springframework.boot</groupId>
-                <artifactId>spring-boot-starter-data-jpa-test</artifactId>
-                <scope>test</scope>
-        </dependency> -->
+        <!-- JSP support -->
         <dependency>
-            <groupId>org.springframework.boot</groupId>
-            <artifactId>spring-boot-starter-restclient-test</artifactId>
-            <scope>test</scope>
+            <groupId>org.apache.tomcat.embed</groupId>
+            <artifactId>tomcat-embed-jasper</artifactId>
         </dependency>
 
+        <!-- JSTL -->
         <dependency>
-            <groupId>org.springframework.boot</groupId>
-            <artifactId>spring-boot-starter-webmvc-test</artifactId>
-            <scope>test</scope>
+            <groupId>jakarta.servlet.jsp.jstl</groupId>
+            <artifactId>jakarta.servlet.jsp.jstl-api</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.glassfish.web</groupId>
+            <artifactId>jakarta.servlet.jsp.jstl</artifactId>
         </dependency>
+        <dependency>
+            <groupId>com.mysql</groupId>
+            <artifactId>mysql-connector-j</artifactId>
+            <scope>runtime</scope>
+        </dependency>
+
     </dependencies>
 
     <build>

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

@@ -11,7 +11,11 @@ public class PageController {
 
     @GetMapping({"home",""})
     public String home() {
-        return "home";
+        return "home.";
+    }
+    @GetMapping("homet")
+    public String homet() {
+        return "homet";
     }
     @GetMapping("login")
     public String login() {

src/main/resources/application.properties

@@ -1,6 +1,7 @@
-spring.application.name=attendenceSystem
-
+server.port=8080
 
+spring.servlet.multipart.max-file-size=10MB
+spring.servlet.multipart.max-request-size=10MB
 # JSP Configuration
 spring.mvc.view.prefix=/WEB-INF/views/
 spring.mvc.view.suffix=.jsp
@@ -11,14 +12,35 @@ spring.mvc.view.suffix=.jsp
 # spring.thymeleaf.encoding=UTF-8
 # spring.thymeleaf.mode=HTML
 
+# Google OAuth2
+# spring.security.oauth2.client.registration.google.client-id=
+# spring.security.oauth2.client.registration.google.client-secret=
+# spring.security.oauth2.client.registration.google.scope=email,profile
+
+spring.devtools.restart.enabled=true
+spring.devtools.livereload.enabled=true
+
+server.servlet.jsp.init-parameters.development=true
+
 # DataSource Configuration for SQL Server
-spring.datasource.url=jdbc:mariadb://localhost:3306/MOONBLIGHT
+# spring.datasource.url=jdbc:mariadb://localhost:3306/MOONBLIGHT
+# spring.datasource.username=root
+# spring.datasource.password=QQQewqwqa401!
+# spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
+
+spring.datasource.url=jdbc:mysql://localhost:3306/game_promo_web
 spring.datasource.username=root
-spring.datasource.password=QQQewqwqa401!
-spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
+spring.datasource.password=annguyenthanh2k5
+
+
+# SMPT EMAIL
+# spring.mail.host=smtp.gmail.com
+# spring.mail.port=587
+# spring.mail.username=donhatquang401@gmail.com
+# spring.mail.password=lzzxdgzmirxdwqdv
+
 # JPA configuration
-spring.jpa.hibernate.ddl-auto=update
-spring.jpa.show-sql=true
 
-#TimeZone Setting
-app.timezone=Asia/Ho_Chi_Minh
+
+
+>>>>>>> Stashed changes

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

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="vi">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Xin nghỉ phép</title>
+
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+</head>
+
+<body>
+    <div class="bg-image"></div>
+    <div th:replace="~{cms/fragments/sidebar :: sidebar}"></div>
+    <div class="absent-page">
+        <header class="page-header">
+            <h1>Xin nghỉ phép</h1>
+
+            <div class="notification">
+                <i class="fa-regular fa-bell"></i>
+                <span class="dot"></span>
+            </div>
+        </header>
+        <main class="main-section">
+
+            <!-- Form -->
+            <div class="absent-card">
+
+                <h2>Đơn xin nghỉ phép</h2>
+
+                <!-- Loại nghỉ phép -->
+                <div class="form-group">
+                    <label>Loại nghỉ phép</label>
+
+                    <div class="select-wrapper">
+                        <select>
+                            <option selected disabled>Chọn loại nghỉ phép</option>
+                            <option>Nghỉ có lương</option>
+                            <option>Nghỉ không lương</option>
+                            <option>Nghỉ bệnh</option>
+                            <option>Nghỉ phép năm</option>
+                        </select>
+
+                        <i class="fa-solid fa-chevron-down"></i>
+                    </div>
+                </div>
+
+                <!-- Từ ngày - Đến ngày -->
+                <div class="date-row">
+
+                    <div class="form-group">
+                        <label>Từ ngày</label>
+
+                        <div class="input-icon">
+                            <input type="date">
+                            <i class="fa-regular fa-calendar"></i>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label>Đến ngày</label>
+
+                        <div class="input-icon">
+                            <input type="date">
+                            <i class="fa-regular fa-calendar"></i>
+                        </div>
+                    </div>
+
+                </div>
+
+                <!-- Lý do -->
+                <div class="form-group">
+                    <label>Lý do</label>
+
+                    <textarea rows="6" placeholder="Nhập lý do xin nghỉ phép..."></textarea>
+                </div>
+
+                <!-- Button -->
+                <button class="submit-btn">
+                    <i class="fa-regular fa-paper-plane"></i>
+                    Gửi đơn
+                </button>
+
+            </div>
+        </main>
+    </div>
+<div th:replace="~{cms/layouts/footer :: footer}"></div>
+</body>
+
+</html>

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

@@ -0,0 +1,193 @@
+<!doctype html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Danh sách thế giới</title>
+    <link rel="stylesheet" th:href="@{/css/world/world.css}">
+
+</head>
+
+<body>
+    <div class="bg-image"></div>
+    <div th:replace="~{cms/fragments/sidebar :: sidebar}"></div>
+
+    <div class="container-layout">
+        <div class="absent-header">
+            <h1 class="header-title">Duyệt nghỉ phép</h1>
+            <div class="header-divider"></div>
+        </div>
+
+        <main class="main-section">
+
+            <div class="absent-card">
+
+                <div class="main-absent">
+                    <div class="absent-search">
+
+                        <div class="filter-group">
+
+                            <!-- Tìm theo tên -->
+                            <div class="filter-item">
+                                <label>Tên nhân viên</label>
+                                <input type="text" name="keyword" placeholder="Nhập tên..." />
+                            </div>
+
+                            <!-- Lọc theo trạng thái -->
+                            <div class="filter-item">
+                                <label>Trạng thái</label>
+                                <select name="status">
+                                    <option value="">Tất cả</option>
+                                    <option value="PENDING">Chờ duyệt</option>
+                                    <option value="APPROVED">Đã duyệt</option>
+                                    <option value="REJECTED">Từ chối</option>
+                                </select>
+                            </div>
+
+                            <div class="filter-item">
+                                <label>Tuần</label>
+                                <input type="week" name="week">
+                            </div>
+
+                            <div class="filter-item">
+                                <button type="submit" class="btn btn-primary">
+                                    Tìm kiếm
+                                </button>
+                            </div>
+
+                        </div>
+
+                    </div>
+                    <table class="absent-table">
+                        <thead>
+                            <tr>
+                                <th>Tên</th>
+                                <th>Phòng</th>
+                                <th>Lý do</th>
+                                <th>Từ ngày</th>
+                                <th>Đến ngày</th>
+                                <th>Chi tiết</th>
+                                <th>Trạng thái</th>
+                                <th></th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            <tr>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td>
+                                    <span class="status-active">
+                                        Đang hiển thị
+                                    </span>
+
+                                    <span class="status-deleted">
+                                        Đang ẩn
+                                    </span>
+                                </td>
+                                <td>
+                                    <div class="action-group">
+
+                                        <form method="get">
+                                            <button class="btn btn-primary btn-small">
+                                                Phê duyệt
+                                            </button>
+                                        </form>
+
+                                        <form method="post">
+                                            <button class="btn btn-secondary btn-small">
+                                                Từ chối
+                                            </button>
+                                        </form>
+
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+
+                <div class="pagination">
+                    <a class="btn btn-pagination">
+                        ← Trước
+                    </a>
+
+                    <span>
+                        <a></a>
+                        <span></span>
+                    </span>
+
+                    <a class="btn btn-pagination">
+                        Sau →
+                    </a>
+                </div>
+            </div>
+
+        </main>
+
+    </div>
+    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+    ```html
+    <div id="accountModal" class="detail-modal">
+
+        <div class="detail-content">
+
+            <div class="detail-header">
+
+                <h2>Thông tin cá nhân</h2>
+
+                <button class="close-btn" onclick="closeAccountDetail()">
+
+                    ✕
+
+                </button>
+
+            </div>
+
+            <div class="detail-body">
+
+                <div class="detail-item">
+                    <label>Họ và tên</label>
+                    <p id="detailFullName"></p>
+                </div>
+
+                <div class="detail-item">
+                    <label>Email</label>
+                    <p id="detailEmail"></p>
+                </div>
+
+                <div class="detail-item">
+                    <label>Số điện thoại</label>
+                    <p id="detailPhone"></p>
+                </div>
+
+                <div class="detail-item">
+                    <label>Phòng ban</label>
+                    <p id="detailDepartment"></p>
+                </div>
+
+                <div class="detail-item">
+                    <label>Vai trò</label>
+                    <p id="detailRole"></p>
+                </div>
+
+                <div class="detail-item">
+                    <label>Trạng thái</label>
+                    <span id="detailStatus"></span>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</body>
+
+</html>

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

@@ -0,0 +1,134 @@
+<!doctype html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Danh sách thế giới</title>
+    <link rel="stylesheet" th:href="@{/css/world/world.css}">
+
+</head>
+
+<body>
+    <div class="bg-image"></div>
+    <div th:replace="~{cms/fragments/sidebar-employee :: sidebar}"></div>
+
+    <div class="container-layout">
+        <header class="page-header">
+            <h1>Quản lý người dùng</h1>
+
+            <div class="notification">
+                <i class="fa-regular fa-bell"></i>
+                <span class="dot"></span>
+            </div>
+        </header>
+
+        <div class="card">
+
+            <div class="card-header">
+                <h2>Quản lý người dùng</h2>
+                <button class="add-btn">+ Thêm người dùng</button>
+            </div>
+
+            <div class="search-box">
+                <input type="text" placeholder="Tìm kiếm người dùng...">
+            </div>
+
+            <table>
+                <thead>
+                    <tr>
+                        <th>Người dùng</th>
+                        <th>Email</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">A</div>
+                                <strong>Nguyễn Văn A</strong>
+                            </div>
+                        </td>
+                        <td>nguyenvana@company.com</td>
+                        <td><span class="role">Nhân viên</span></td>
+                        <td><span class="status active">Hoạt động</span></td>
+                        <td>
+                            <div class="actions">
+                                <button class="icon-btn btn-role">Đổi quyền</button>
+                                <button class="icon-btn lock">🔒</button>
+                            </div>
+                        </td>
+                    </tr>
+
+
+                </tbody>
+            </table>
+
+        </div>
+
+    </div>
+    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+
+    ```html
+    <div id="accountModal" class="detail-modal">
+
+        <div class="detail-content">
+
+            <div class="detail-header">
+
+                <h2>Thông tin cá nhân</h2>
+
+                <button class="close-btn" onclick="closeAccountDetail()">
+
+                    ✕
+
+                </button>
+
+            </div>
+
+            <div class="detail-body">
+
+                <div class="detail-item">
+                    <label>Họ và tên</label>
+                    <p id="detailFullName"></p>
+                </div>
+
+                <div class="detail-item">
+                    <label>Email</label>
+                    <p id="detailEmail"></p>
+                </div>
+
+                <div class="detail-item">
+                    <label>Số điện thoại</label>
+                    <p id="detailPhone"></p>
+                </div>
+
+                <div class="detail-item">
+                    <label>Phòng ban</label>
+                    <p id="detailDepartment"></p>
+                </div>
+
+                <div class="detail-item">
+                    <label>Vai trò</label>
+                    <p id="detailRole"></p>
+                </div>
+
+                <div class="detail-item">
+                    <label>Trạng thái</label>
+                    <span id="detailStatus"></span>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
+</body>
+
+</html>

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

@@ -0,0 +1,143 @@
+<%@ page contentType="text/html;charset=UTF-8" %>
+
+
+    <html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Home Attendance</title>
+        <link href="/css/attendance.css" rel="stylesheet">
+    </head>
+
+    <body>
+
+        <!-- =======================================================================
+                                    HEADER
+    ==========================================================================-->
+        <header class="header">
+            <div class="header-left">
+                <div class="header-logo">
+                    <a href="/home">MyApp</a>
+                </div>
+
+                <div class="header-info">
+                    <h1 class="header-title">Home Attendance 1</h1>
+                    <div class="header-time">22/22/22</div>
+                </div>
+            </div>
+
+            <div class="header-right">
+
+                <div class="header-clock" id="clock">
+                    00:00:00
+                </div>
+
+                <button class="header-btn theme-toggle" id="themeToggle">
+                    🌙
+                </button>
+
+                
+
+            </div>
+        </header>
+        <!-- =======================================================================
+                                    BODY
+    ==========================================================================-->
+        <div class="container">
+            <div class="container-attend-left history">
+                <h3 class="history-title">Lịch sử chấm công</h3>
+
+                <ul class="history-list">
+
+                    <li class="history-item">
+                        <div class="history-card">
+                            <span class="history-date">
+                                Ngày 01/01/2024
+                            </span>
+
+                            <span class="history-status status-in">
+                                Vào lúc 08:00
+                            </span>
+
+                            <span class="history-status status-out">
+                                Ra lúc 17:00
+                            </span>
+                        </div>
+                    </li>
+
+                </ul>
+            </div>
+            <div class="container-attend-main">
+
+                <div class="face-scanner scanner-card">
+
+                    <!-- <video id="camera" autoplay playsinline></video> -->
+
+                    <div class="scan-overlay">
+                        <div class="scan-frame"></div>
+                        <div class="scan-line"></div>
+                    </div>
+
+                    <div class="result-card success-result">
+                        ✓ Nhận diện thành công
+                    </div>
+
+                </div>
+
+                <div class="face-guide guide-card">
+                    <p class="guide-title">
+                        Hướng dẫn chấm công bằng nhận diện khuôn mặt:
+                    </p>
+
+                    <ol class="guide-list">
+                        <li>Đứng cách camera khoảng 50cm - 1m</li>
+                        <li>Nhìn thẳng vào camera</li>
+                        <li>Giữ khuôn mặt trong khung hình</li>
+                        <li>Hệ thống sẽ tự động nhận diện và ghi nhận</li>
+                    </ol>
+                </div>
+
+            </div>
+            <div class="container-attend-right">
+
+                <h3 class="attendance-title">
+                    Thống kê hôm nay
+                </h3>
+
+                <div class="stat-card success-card">
+                    <p class="attendance-present">
+                        Đã chấm công
+                    </p>
+                    <span class="stat-number">42</span>
+                </div>
+
+                <div class="stat-card warning-card">
+                    <p class="attendance-late">
+                        Đi muộn
+                    </p>
+                    <span class="stat-number">8</span>
+                </div>
+
+                <div class="stat-card danger-card">
+                    <p class="attendance-absent">
+                        Chưa chấm công
+                    </p>
+                    <span class="stat-number">12</span>
+                </div>
+
+                <div class="attendance-info">
+                    <p class="attendance-sum">
+                        Tổng nhân viên: 50
+                    </p>
+
+                    <p class="attendance-date">
+                        Giờ làm việc: 08:00 - 17:00
+                    </p>
+                </div>
+
+            </div>
+
+    </body>
+
+    </html>

src/main/resources/templates/cms/attendance/attendance.html

@@ -0,0 +1,50 @@
+<section id="attendance" class="page">
+    <div class="card attendance-card">
+        <div class="card-header">
+            <h3>Điểm danh</h3>
+            <div>
+                <button onclick="loadAttendanceRecords()">Tải lại</button>
+            </div>
+        </div>
+        <div class="filter-panel">
+            <input id="attendanceSearch" class="search-input" placeholder="Tìm mã SV hoặc họ tên" />
+            <select id="attendanceStatusFilter">
+                <option value="">Tất cả trạng thái</option>
+                <option value="present_on_time">Đúng giờ</option>
+                <option value="late">Đi muộn</option>
+                <option value="early_leave">Về sớm</option>
+                <option value="late_and_early_leave">Muộn + về sớm</option>
+                <option value="missing_checkout">Thiếu check-out</option>
+                <option value="absent">Vắng</option>
+                <option value="pending">Chưa ghi nhận</option>
+                <option value="unfinalized">Chưa chốt</option>
+            </select>
+            <label>Từ ngày<input id="attendanceDateFrom" type="date" /></label>
+            <label>Đến ngày<input id="attendanceDateTo" type="date" /></label>
+            <button onclick="loadAttendanceRecords()">Lọc</button>
+            <button class="secondary" onclick="resetAttendanceFilters()">Hôm nay</button>
+            <span id="attendanceCount" class="filter-count"></span>
+        </div>
+        <div class="table-scroll">
+            <table class="attendance-table">
+                <thead>
+                    <tr>
+                        <th>Ngày</th>
+                        <th>Sinh viên</th>
+                        <th>Vào</th>
+                        <th>Ra</th>
+                        <th>Trạng thái</th>
+                        <th>Hiện diện</th>
+                        <th>Muộn</th>
+                        <th>Về sớm</th>
+                        <th>Tổng giờ</th>
+                        <th>Ghi chú</th>
+                        <th>Chi tiết</th>
+                    </tr>
+                </thead>
+                <tbody id="attendanceTable"></tbody>
+            </table>
+        </div>
+        <div id="attendanceMessage" class="message"></div>
+    </div>
+</section>

src/main/resources/templates/cms/auths/login.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="vi">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Đăng Nhập - Face ID Attendance</title>
+    <link rel="stylesheet" href="css/components.css">
+</head>
+
+<body>
+    <div class="bg-img"></div>
+    <div th:replace="~{cms/layouts/header :: header}"></div>
+
+    <div class="card-auth layout">
+        <div class="card-header">
+
+            <h1 class="card-title">Đăng nhập</h1>
+            <p class="card-description">Nhập thông tin để truy cập!</p>
+        </div>
+        <div class="card-body">
+            <p class="error-message"></p>
+
+            <!-- form -->
+            <form method="post">
+
+                <!-- username/email -->
+                <div class="auth-group">
+                    <label>Username hoặc Email</label>
+                    <input type="text" />
+
+                    <div class="error-message">
+                    </div>
+                </div>
+
+                <!-- password -->
+                <div class="auth-group">
+                    <label>Password</label>
+                    <input type="password" />
+
+                    <div class="error-message">
+                    </div>
+                </div>
+
+                <button class="auth-btn" type="submit">
+                    Đăng nhập
+                </button>
+            </form>
+
+            <hr style="margin: 1rem 0; opacity: 0.2;" />
+
+            <a class="register-link">
+                Tạo tài khoản mới
+            </a>
+
+            <a class="forgotPass-link">
+                Quên mật khẩu
+            </a>
+        </div>
+    </div>
+    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+
+</body>
+
+</html>

src/main/resources/templates/cms/auths/register.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="vi">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Đăng Ký - Face ID Attendance</title>
+    <link rel="stylesheet" href="css/components.css">
+</head>
+
+<body>
+    <div class="bg-img"></div>
+    <div th:replace="~{cms/layouts/header :: header}"></div>
+
+    <div class="card-auth layout">
+        <div class="card-header">
+
+            <h1 class="card-title">Đăng nhập</h1>
+            <p class="card-description">Nhập thông tin để truy cập!</p>
+        </div>
+        <div class="card-body">
+            <p class="error-message"></p>
+
+            <!-- form -->
+            <form method="post">
+
+                <div class="auth-group">
+                    <label>Username hoặc Email</label>
+                    <input type="text" />
+                    <div class="error-message"></div>
+                </div>
+                <div class="auth-group">
+                    <label class="auth-label">Họ và tên *</label>
+                    <input type="text" class="auth-control" placeholder="Nguyễn Văn A" required>
+                    <div class="error-message"></div>
+                </div>
+
+                <div class="auth-group">
+                    <label class="auth-label">Email *</label>
+                    <input type="email" class="auth-control" placeholder="your.email@company.com" required>
+                                    <div class="error-message"></div>
+
+                </div>
+
+                <div class="auth-group">
+                    <label class="auth-label">Số điện thoại *</label>
+                    <input type="tel"class="auth-control" placeholder="0901234567" required>
+                </div>
+
+                <div class="auth-group">
+                    <label class="auth-label">Mật khẩu *</label>
+                    <input type="password" class="auth-control" placeholder="••••••••"
+                        required>
+                </div>
+
+                <div class="auth-group">
+                    <label class="auth-label">Xác nhận mật khẩu *</label>
+                    <input type="password"class="auth-control" placeholder="••••••••" required>
+                </div>
+
+                <button class="auth-btn" type="submit">
+                    Đăng ký
+                </button>
+            </form>
+
+            <hr style="margin: 1rem 0; opacity: 0.2;" />
+
+            <a class="register-link">
+                Đã có tài khoản
+            </a>
+
+            <a class="forgotPass-link">
+                Quên mật khẩu
+            </a>
+        </div>
+    </div>
+    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+
+</body>
+
+</html>

src/main/resources/templates/cms/chart/pie-chart..html

@@ -0,0 +1,29 @@
+<div class="distribution-layout">
+
+    <div class="distribution-chart">
+        <canvas id="attendancePieChart"></canvas>
+    </div>
+
+    <div class="distribution-legend">
+
+        <div class="legend-item">
+            <span class="legend-color green"></span>
+            <span class="legend-label">Đúng giờ</span>
+            <span class="legend-value">75%</span>
+        </div>
+
+        <div class="legend-item">
+            <span class="legend-color yellow"></span>
+            <span class="legend-label">Đi muộn</span>
+            <span class="legend-value">18%</span>
+        </div>
+
+        <div class="legend-item">
+            <span class="legend-color red"></span>
+            <span class="legend-label">Vắng mặt</span>
+            <span class="legend-value">7%</span>
+        </div>
+
+    </div>
+
+</div>

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

@@ -0,0 +1,311 @@
+<!doctype html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Danh sách thế giới</title>
+    <link rel="stylesheet" th:href="@{/css/world/world.css}">
+
+</head>
+
+<body>
+    <div class="bg-image"></div>
+    <div th:replace="~{cms/fragments/sidebar-admin :: sidebar}"></div>
+
+    <div class="container-layout">
+        <header class="page-header">
+            <h1>Dashboard</h1>
+
+            <div class="notification">
+                <i class="fa-regular fa-bell"></i>
+                <span class="dot"></span>
+            </div>
+        </header>
+
+        <main class="dashboard-admin">
+
+            <!-- =====================
+                OVERVIEW
+            ====================== -->
+            <section class="admin-overview">
+
+                <div class="admin-stat-card total-account">
+                    <div class="admin-stat-card__header">
+                        <span class="admin-stat-card__title">Tổng tài khoản</span>
+                        <div class="admin-stat-card__icon"></div>
+                    </div>
+
+                    <div class="admin-stat-card__body">
+                        <h2 class="admin-stat-card__number">53</h2>
+                        <p class="admin-stat-card__description">
+                            +12% so với tháng trước
+                        </p>
+                    </div>
+                </div>
+
+                <div class="admin-stat-card active-account">
+                    <div class="admin-stat-card__header">
+                        <span class="admin-stat-card__title">
+                            Tài khoản hoạt động
+                        </span>
+                        <div class="admin-stat-card__icon"></div>
+                    </div>
+
+                    <div class="admin-stat-card__body">
+                        <h2 class="admin-stat-card__number">48</h2>
+                        <p class="admin-stat-card__description">
+                            90.6% tổng số
+                        </p>
+                    </div>
+                </div>
+
+                <div class="admin-stat-card locked-account">
+                    <div class="admin-stat-card__header">
+                        <span class="admin-stat-card__title">
+                            Tài khoản bị khóa
+                        </span>
+                        <div class="admin-stat-card__icon"></div>
+                    </div>
+
+                    <div class="admin-stat-card__body">
+                        <h2 class="admin-stat-card__number">5</h2>
+                        <p class="admin-stat-card__description">
+                            Cần xem xét
+                        </p>
+                    </div>
+                </div>
+
+                <div class="admin-stat-card pending-account">
+                    <div class="admin-stat-card__header">
+                        <span class="admin-stat-card__title">
+                            Chờ duyệt
+                        </span>
+                        <div class="admin-stat-card__icon"></div>
+                    </div>
+
+                    <div class="admin-stat-card__body">
+                        <h2 class="admin-stat-card__number">7</h2>
+                        <p class="admin-stat-card__description">
+                            Tài khoản mới đăng ký
+                        </p>
+                    </div>
+                </div>
+
+                <div class="admin-stat-card uptime-system">
+                    <div class="admin-stat-card__header">
+                        <span class="admin-stat-card__title">
+                            Uptime hệ thống
+                        </span>
+                        <div class="admin-stat-card__icon"></div>
+                    </div>
+
+                    <div class="admin-stat-card__body">
+                        <h2 class="admin-stat-card__number">99.8%</h2>
+                        <p class="admin-stat-card__description">
+                            Hoạt động ổn định
+                        </p>
+                    </div>
+                </div>
+
+                <div class="admin-stat-card today-login">
+                    <div class="admin-stat-card__header">
+                        <span class="admin-stat-card__title">
+                            Đăng nhập hôm nay
+                        </span>
+                        <div class="admin-stat-card__icon"></div>
+                    </div>
+
+                    <div class="admin-stat-card__body">
+                        <h2 class="admin-stat-card__number">142</h2>
+                        <p class="admin-stat-card__description">
+                            Lượt đăng nhập
+                        </p>
+                    </div>
+                </div>
+
+            </section>
+
+
+
+            <!-- =====================
+                QUICK ACTION
+            ====================== -->
+            <section class="admin-quick-actions">
+
+                <a href="#" class="admin-action-card">
+                    <span class="admin-action-card__badge">7</span>
+
+                    <div class="admin-action-card__icon"></div>
+
+                    <h3 class="admin-action-card__title">
+                        Quản Lý Tài Khoản
+                    </h3>
+
+                    <p class="admin-action-card__description">
+                        Thêm, sửa, xóa, khóa tài khoản
+                    </p>
+                </a>
+
+                <a href="#" class="admin-action-card">
+
+                    <div class="admin-action-card__icon"></div>
+
+                    <h3 class="admin-action-card__title">
+                        Quản Lý Phân Quyền
+                    </h3>
+
+                    <p class="admin-action-card__description">
+                        Cấu hình vai trò và quyền hạn
+                    </p>
+                </a>
+
+                <a href="#" class="admin-action-card">
+
+                    <div class="admin-action-card__icon"></div>
+
+                    <h3 class="admin-action-card__title">
+                        Cài Đặt Hệ Thống
+                    </h3>
+
+                    <p class="admin-action-card__description">
+                        Cấu hình chung
+                    </p>
+                </a>
+
+            </section>
+
+
+
+            <!-- =====================
+                CHARTS
+            ====================== -->
+            <section class="admin-charts">
+
+                <!-- Pie Chart -->
+                <div class="admin-chart-card">
+
+                    <div class="admin-chart-card__header">
+                        <h2>Phân Bố Loại Tài Khoản</h2>
+                    </div>
+
+                    <div class="admin-chart-card__body">
+                        <canvas id="accountTypeChart"></canvas>
+                    </div>
+
+                </div>
+
+
+                <!-- Bar Chart -->
+                <div class="admin-chart-card">
+
+                    <div class="admin-chart-card__header">
+                        <h2>Hoạt Động Hệ Thống (6 Tháng)</h2>
+                    </div>
+
+                    <div class="admin-chart-card__body">
+                        <canvas id="systemActivityChart"></canvas>
+                    </div>
+
+                </div>
+
+            </section>
+
+
+
+            <!-- =====================
+            RECENT ACTIVITY
+            ====================== -->
+            <section class="recent-activity">
+
+                <div class="section-header">
+                    <h2>Hoạt Động Gần Đây</h2>
+                </div>
+
+                <div class="activity-list">
+
+                    <div class="activity-item">
+
+                        <div class="activity-item__left">
+                            <span class="activity-dot activity-dot--blue"></span>
+
+                            <span class="activity-content">
+                                <strong>NV007</strong>
+                                Đăng ký tài khoản mới
+                            </span>
+                        </div>
+
+                        <span class="activity-time">
+                            5 phút trước
+                        </span>
+
+                    </div>
+
+
+
+                    <div class="activity-item">
+
+                        <div class="activity-item__left">
+                            <span class="activity-dot activity-dot--green"></span>
+
+                            <span class="activity-content">
+                                <strong>Admin</strong>
+                                Phê duyệt tài khoản NV006
+                            </span>
+                        </div>
+
+                        <span class="activity-time">
+                            1 giờ trước
+                        </span>
+
+                    </div>
+
+
+
+                    <div class="activity-item">
+
+                        <div class="activity-item__left">
+                            <span class="activity-dot activity-dot--yellow"></span>
+
+                            <span class="activity-content">
+                                <strong>NV004</strong>
+                                Đăng nhập thất bại (3 lần)
+                            </span>
+                        </div>
+
+                        <span class="activity-time">
+                            2 giờ trước
+                        </span>
+
+                    </div>
+
+
+
+                    <div class="activity-item">
+
+                        <div class="activity-item__left">
+                            <span class="activity-dot activity-dot--red"></span>
+
+                            <span class="activity-content">
+                                <strong>Admin</strong>
+                                Khóa tài khoản NV003
+                            </span>
+                        </div>
+
+                        <span class="activity-time">
+                            3 giờ trước
+                        </span>
+
+                    </div>
+
+                </div>
+
+            </section>
+
+        </main>
+
+    </div>
+    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+</body>
+
+</html>

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

@@ -0,0 +1,274 @@
+<!doctype html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Danh sách thế giới</title>
+    <link rel="stylesheet" th:href="@{/css/world/world.css}">
+
+</head>
+
+<body>
+    <div class="bg-image"></div>
+    <div th:replace="~{cms/fragments/sidebar-employee :: sidebar}"></div>
+
+    <div class="container-layout">
+        <header class="page-header">
+            <h1>Dashboard</h1>
+
+            <div class="notification">
+                <i class="fa-regular fa-bell"></i>
+                <span class="dot"></span>
+            </div>
+        </header>
+
+        <main class="dashboard-employee">
+
+
+            <!-- ======================
+                THỐNG KÊ
+            ======================= -->
+            <section class="employee-overview">
+
+                <div class="employee-stat-card report-submitted">
+                    <div class="employee-stat-card__icon"></div>
+
+                    <div class="employee-stat-card__content">
+                        <h3 class="employee-stat-card__number">12</h3>
+                        <p class="employee-stat-card__label">Báo cáo đã nộp</p>
+                    </div>
+
+                    <span class="employee-stat-card__trend">↗</span>
+                </div>
+
+                <div class="employee-stat-card report-approved">
+                    <div class="employee-stat-card__icon"></div>
+
+                    <div class="employee-stat-card__content">
+                        <h3 class="employee-stat-card__number">10</h3>
+                        <p class="employee-stat-card__label">Báo cáo được duyệt</p>
+                    </div>
+                </div>
+
+                <div class="employee-stat-card report-rejected">
+                    <div class="employee-stat-card__icon"></div>
+
+                    <div class="employee-stat-card__content">
+                        <h3 class="employee-stat-card__number">1</h3>
+                        <p class="employee-stat-card__label">Báo cáo bị từ chối</p>
+                    </div>
+                </div>
+
+                <div class="employee-stat-card attendance-rate">
+                    <div class="employee-stat-card__icon"></div>
+
+                    <div class="employee-stat-card__content">
+                        <h3 class="employee-stat-card__number">95%</h3>
+                        <p class="employee-stat-card__label">Tỷ lệ chuyên cần</p>
+                    </div>
+
+                    <span class="employee-stat-card__status">
+                        Xuất sắc
+                    </span>
+                </div>
+
+            </section>
+
+
+
+            <!-- ======================
+         NỘI DUNG CHÍNH
+    ======================= -->
+            <section class="employee-content">
+
+                <!-- LEFT -->
+                <div class="employee-main">
+
+                    <!-- Quick Action -->
+                    <div class="quick-actions">
+
+                        <h2 class="section-title">
+                            Thao Tác Nhanh
+                        </h2>
+
+                        <div class="quick-actions-grid">
+
+                            <a href="#" class="quick-action-card">
+                                <div class="quick-action-card__icon"></div>
+
+                                <h3>Thông Tin Cá Nhân</h3>
+                                <p>Xem và cập nhật profile</p>
+                            </a>
+
+                            <a href="#" class="quick-action-card">
+                                <div class="quick-action-card__icon"></div>
+
+                                <h3>Nộp Báo Cáo</h3>
+                                <p>Tạo báo cáo công việc</p>
+                            </a>
+
+                            <a href="#" class="quick-action-card">
+                                <div class="quick-action-card__icon"></div>
+
+                                <h3>Lịch Sử Điểm Danh</h3>
+                                <p>Xem lịch sử check-in/out</p>
+                            </a>
+
+                            <a href="#" class="quick-action-card">
+                                <div class="quick-action-card__icon"></div>
+
+                                <h3>Xin Nghỉ Phép</h3>
+                                <p>Tạo đơn xin nghỉ</p>
+                            </a>
+
+                        </div>
+
+                    </div>
+
+
+
+                    <!-- Attendance History -->
+                    <div class="attendance-history">
+
+                        <h2 class="section-title">
+                            Lịch Sử Điểm Danh Gần Đây
+                        </h2>
+
+                        <div class="table-wrapper">
+
+                            <table class="attendance-table">
+
+                                <thead>
+                                    <tr>
+                                        <th>Ngày</th>
+                                        <th>Check In</th>
+                                        <th>Check Out</th>
+                                        <th>Trạng Thái</th>
+                                    </tr>
+                                </thead>
+
+                                <tbody>
+
+                                    <tr>
+                                        <td>2/6/2026</td>
+                                        <td>07:58</td>
+                                        <td>17:05</td>
+                                        <td>
+                                            <span class="status-badge status-success">
+                                                Đúng giờ
+                                            </span>
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td>1/6/2026</td>
+                                        <td>08:12</td>
+                                        <td>17:02</td>
+                                        <td>
+                                            <span class="status-badge status-warning">
+                                                Đi muộn
+                                            </span>
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td>31/5/2026</td>
+                                        <td>08:00</td>
+                                        <td>17:00</td>
+                                        <td>
+                                            <span class="status-badge status-success">
+                                                Đúng giờ
+                                            </span>
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td>30/5/2026</td>
+                                        <td>07:55</td>
+                                        <td>16:45</td>
+                                        <td>
+                                            <span class="status-badge status-danger">
+                                                Về sớm
+                                            </span>
+                                        </td>
+                                    </tr>
+
+                                </tbody>
+
+                            </table>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+
+
+                <!-- RIGHT -->
+                <aside class="employee-sidebar">
+
+                    <!-- Profile -->
+                    <div class="profile-card">
+
+                        <h2 class="profile-card__title">
+                            Thông Tin Cá Nhân
+                        </h2>
+
+                        <div class="profile-item">
+                            <label>Email</label>
+                            <span>nguyenvana@company.com</span>
+                        </div>
+
+                        <div class="profile-item">
+                            <label>Số điện thoại</label>
+                            <span>0123456789</span>
+                        </div>
+
+                        <div class="profile-item">
+                            <label>Phòng ban</label>
+                            <span>IT Department</span>
+                        </div>
+
+                        <div class="profile-item">
+                            <label>Face ID</label>
+
+                            <span class="faceid-badge">
+                                ✓ Đã đăng ký
+                            </span>
+                        </div>
+
+                        <button class="btn-update-profile">
+                            Cập nhật thông tin
+                        </button>
+
+                    </div>
+
+
+
+                    <!-- Reminder -->
+                    <div class="reminder-card">
+
+                        <div class="reminder-card__header">
+                            💡 Lời nhắc
+                        </div>
+
+                        <p class="reminder-card__content">
+                            Nhớ nộp báo cáo công việc hàng tuần
+                            trước 17:00 thứ 6.
+                        </p>
+
+                    </div>
+
+                </aside>
+
+            </section>
+
+        </main>
+
+    </div>
+    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+</body>
+
+</html>

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

@@ -0,0 +1,216 @@
+<!doctype html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Danh sách thế giới</title>
+    <link rel="stylesheet" th:href="@{/css/world/world.css}">
+
+</head>
+
+<body>
+    <div class="bg-image"></div>
+    <div th:replace="~{cms/fragments/sidebar-manage :: sidebar}"></div>
+
+    <div class="container-layout">
+        <header class="page-header">
+            <h1>Dashboard</h1>
+
+            <div class="notification">
+                <i class="fa-regular fa-bell"></i>
+                <span class="dot"></span>
+            </div>
+        </header>
+
+        <main class="dashboard-manager">
+
+            <!-- ======================
+            THỐNG KÊ TỔNG QUAN
+            ======================= -->
+            <section class="dashboard-overview">
+
+                <div class="stat-card total-employee">
+                    <div class="stat-card__icon"></div>
+
+                    <div class="stat-card__content">
+                        <h3 class="stat-card__number">50</h3>
+                        <p class="stat-card__label">Tổng nhân viên</p>
+                    </div>
+                </div>
+
+                <div class="stat-card present">
+                    <div class="stat-card__icon"></div>
+
+                    <div class="stat-card__content">
+                        <h3 class="stat-card__number">42</h3>
+                        <p class="stat-card__label">Có mặt hôm nay</p>
+                    </div>
+
+                    <span class="stat-card__percent">84%</span>
+                </div>
+
+                <div class="stat-card late">
+                    <div class="stat-card__icon"></div>
+
+                    <div class="stat-card__content">
+                        <h3 class="stat-card__number">8</h3>
+                        <p class="stat-card__label">Đi muộn hôm nay</p>
+                    </div>
+                </div>
+
+                <div class="stat-card absent">
+                    <div class="stat-card__icon"></div>
+
+                    <div class="stat-card__content">
+                        <h3 class="stat-card__number">10</h3>
+                        <p class="stat-card__label">Vắng mặt hôm nay</p>
+                    </div>
+                </div>
+
+            </section>
+
+
+
+            <!-- ======================
+            NỘI DUNG CHÍNH
+            ======================= -->
+            <section class="dashboard-content">
+
+                <!-- LEFT -->
+                <div class="dashboard-main">
+
+                    <!-- Biểu đồ cột -->
+                    <div class="dashboard-card attendance-chart">
+
+                        <div class="card-header">
+                            <h2>Chuyên Cần Tuần Này</h2>
+                        </div>
+
+                        <div class="card-body">
+
+                            <!-- ChartJS -->
+                            <canvas id="weeklyAttendanceChart"></canvas>
+
+                        </div>
+
+                    </div>
+
+
+
+                    <!-- Biểu đồ tròn -->
+                    <div class="dashboard-card attendance-distribution">
+
+                        <div class="card-header">
+                            <h2>Phân Bổ Chuyên Cần</h2>
+                        </div>
+
+                        <div class="card-body">
+
+                            <div class="distribution-layout">
+
+                                <div class="distribution-chart">
+                                    <canvas id="attendancePieChart"></canvas>
+                                </div>
+
+                                <div class="distribution-legend">
+
+                                    <div class="legend-item">
+                                        <span class="legend-color green"></span>
+                                        <span class="legend-label">Đúng giờ</span>
+                                        <span class="legend-value">75%</span>
+                                    </div>
+
+                                    <div class="legend-item">
+                                        <span class="legend-color yellow"></span>
+                                        <span class="legend-label">Đi muộn</span>
+                                        <span class="legend-value">18%</span>
+                                    </div>
+
+                                    <div class="legend-item">
+                                        <span class="legend-color red"></span>
+                                        <span class="legend-label">Vắng mặt</span>
+                                        <span class="legend-value">7%</span>
+                                    </div>
+
+                                </div>
+
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+
+
+                <!-- RIGHT -->
+                <aside class="dashboard-sidebar">
+
+                    <a href="#" class="action-card">
+                        <div class="action-card__badge">3</div>
+
+                        <div class="action-card__icon"></div>
+
+                        <div class="action-card__content">
+                            <h3>Duyệt Face ID</h3>
+                            <p>Phê duyệt đăng ký Face ID</p>
+                        </div>
+                    </a>
+
+
+                    <a href="#" class="action-card">
+                        <div class="action-card__badge">5</div>
+
+                        <div class="action-card__icon"></div>
+
+                        <div class="action-card__content">
+                            <h3>Duyệt Nghỉ Phép</h3>
+                            <p>Phê duyệt đơn xin nghỉ</p>
+                        </div>
+                    </a>
+
+
+                    <a href="#" class="action-card">
+                        <div class="action-card__badge">7</div>
+
+                        <div class="action-card__icon"></div>
+
+                        <div class="action-card__content">
+                            <h3>Quản Lý Báo Cáo</h3>
+                            <p>Duyệt báo cáo nhân viên</p>
+                        </div>
+                    </a>
+
+
+                    <a href="#" class="action-card">
+                        <div class="action-card__icon"></div>
+
+                        <div class="action-card__content">
+                            <h3>Quản Lý Nhân Viên</h3>
+                            <p>Xem danh sách nhân viên</p>
+                        </div>
+                    </a>
+
+
+                    <a href="#" class="action-card">
+                        <div class="action-card__icon"></div>
+
+                        <div class="action-card__content">
+                            <h3>Báo Cáo Điểm Danh</h3>
+                            <p>Xem báo cáo chi tiết</p>
+                        </div>
+                    </a>
+
+                </aside>
+
+            </section>
+
+        </main>
+
+    </div>
+    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+</body>
+
+</html>

src/main/resources/templates/cms/documents/document-create.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="vi">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Báo cáo công việc</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="bg-image"></div>
+    <div th:replace="~{cms/fragments/sidebar-employee :: sidebar}"></div>
+
+    <div class="container-layout">
+        <header class="page-header">
+            <h1>Nộp báo cáo công việc</h1>
+
+            <div class="notification">
+                <i class="fa-regular fa-bell"></i>
+                <span class="dot"></span>
+            </div>
+        </header>
+
+
+        <div class="report-card">
+
+            <h2>Gửi báo cáo công việc</h2>
+
+            <form>
+
+                <!-- Nội dung -->
+                <div class="form-group">
+                    <label>Nội dung báo cáo</label>
+                    <textarea placeholder="Nhập nội dung báo cáo công việc của bạn..."></textarea>
+                </div>
+
+                <!-- Upload file -->
+                <div class="form-group">
+                    <label>Tệp đính kèm</label>
+
+                    <label class="upload-box">
+                        <input type="file" multiple>
+                        <span>📎 Chọn file hoặc kéo thả vào đây</span>
+                        <small>
+                            Hỗ trợ PDF, DOCX, XLSX, JPG, PNG, ZIP
+                        </small>
+                    </label>
+                </div>
+
+                <!-- Link tài liệu -->
+                <div class="form-group">
+                    <label>Hoặc đính kèm liên kết</label>
+
+                    <input type="url" placeholder="https://drive.google.com/..." class="link-input">
+                </div>
+
+                <button type="submit" class="submit-btn">
+                    ✈ Gửi báo cáo
+                </button>
+
+            </form>
+
+        </div>
+
+    </div>
+    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+
+</body>
+
+</html>

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

@@ -0,0 +1,26 @@
+<div id="reportModal" class="modal">
+
+    <div class="modal-content">
+
+        <span class="close-btn">&times;</span>
+
+        <h2 id="modalTitle"></h2>
+
+        <p>
+            <strong>Nhân viên:</strong>
+            <span id="modalEmployee"></span>
+        </p>
+
+        <p>
+            <strong>Ngày nộp:</strong>
+            <span id="modalDate"></span>
+        </p>
+
+        <div class="report-detail">
+            <strong>Nội dung:</strong>
+            <p id="modalContent"></p>
+        </div>
+
+    </div>
+
+</div>

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

@@ -0,0 +1,155 @@
+<!doctype html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Danh sách báo cáo</title>
+    <link rel="stylesheet" th:href="@{/css/world/world.css}">
+
+</head>
+
+<body>
+    <div class="bg-image"></div>
+    <div th:replace="~{cms/fragments/sidebar :: sidebar}"></div>
+
+    <div class="container-layout">
+        <div class="absent-header">
+            <h1 class="header-title">Danh sách báo cáo</h1>
+            <div class="header-divider"></div>
+        </div>
+
+        <main class="main-section">
+
+            <div class="document-card">
+
+                <div class="main-document">
+
+                    <table class="document-table">
+                        <thead>
+                            <tr>
+                                <th>Nhân viên</th>
+                                <th>Tiêu đề</th>
+                                <th>Ngày nộp</th>
+                                <th>File đính kèm</th>
+                                <th>Link tài liệu</th>
+                                <th>Trạng thái</th>
+                                <th>Chi tiết</th>
+                                <th>Thao tác</th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+
+                            <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
+                                    </a>
+
+                                    <span >
+                                        Không có
+                                    </span>
+                                </td>
+
+                                <td>
+                                    <a 
+                                        target="_blank" class="file-link">
+                                        🔗 Mở link
+                                    </a>
+
+                                    <span >
+                                        Không có
+                                    </span>
+                                </td>
+
+                                <td>
+
+                                    <span th:if="${report.status == 'PENDING'}" 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>
+
+                                <td>
+                                    <a class="btn btn-detail">
+                                        Xem
+                                    </a>
+                                </td>
+
+                                <td>
+
+                                    <div class="action-group" th:if="${report.status == 'PENDING'}">
+
+                                        <form method="post">
+
+                                            <button class="btn btn-success">
+                                                Duyệt
+                                            </button>
+
+                                        </form>
+
+                                        <form method="post">
+
+                                            <button class="btn btn-danger">
+                                                Từ chối
+                                            </button>
+
+                                        </form>
+
+                                    </div>
+
+                                </td>
+
+                            </tr>
+
+                        </tbody>
+                    </table>
+                </div>
+
+
+                <div class="pagination">
+                    <a class="btn btn-pagination">
+                        ← Trước
+                    </a>
+
+                    <span>
+                        <a></a>
+                        <span></span>
+                    </span>
+
+                    <a class="btn btn-pagination">
+                        Sau →
+                    </a>
+                </div>
+            </div>
+
+        </main>
+
+    </div>
+    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+</body>
+
+</html>

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

@@ -0,0 +1,197 @@
+```html
+<!DOCTYPE html>
+<html lang="vi">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Face Recognition Dashboard</title>
+
+    <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+    <div class="bg-image"></div>
+    <div th:replace="~{cms/fragments/sidebar-employee :: sidebar}"></div>
+
+    <div class="container-layout">
+        <header class="page-header">
+            <h1>Nộp báo cáo công việc</h1>
+
+            <div class="notification">
+                <i class="fa-regular fa-bell"></i>
+                <span class="dot"></span>
+            </div>
+        </header>
+        <!-- FACE REGISTER -->
+        <section class="card">
+
+            <div class="section-header">
+                <h2>Đăng ký khuôn mặt</h2>
+            </div>
+
+            <div class="student-select">
+
+                <label>Sinh viên</label>
+
+                <select id="faceStudentSelect">
+                    <option>Chọn sinh viên</option>
+                </select>
+
+                <button id="faceSampleCount" class="sample-btn">
+                    0 / 10 mẫu
+                </button>
+
+            </div>
+
+            <div class="face-register-grid">
+
+                <!-- CAMERA -->
+                <div class="panel">
+
+                    <div class="panel-header">
+                        <h3>Camera đăng ký</h3>
+
+                        <button id="faceRegisterToggleBtn">
+                            Bật camera
+                        </button>
+                    </div>
+
+                    <div class="mode-tabs">
+
+                        <button class="active">
+                            Thêm mẫu
+                        </button>
+
+                        <button>
+                            Quét lại
+                        </button>
+
+                    </div>
+
+                    <div class="guide-box">
+
+                        <div id="scanGuideCurrent">
+                            Nhìn thẳng vào camera
+                        </div>
+
+                        <div id="scanGuideSteps">
+                            Bước 1 / 5
+                        </div>
+
+                    </div>
+
+                    <div class="video-wrap">
+                        <video autoplay muted></video>
+                        <canvas></canvas>
+                    </div>
+
+                    <div class="action-row">
+
+                        <button>
+                            📷 Chụp mẫu
+                        </button>
+
+                        <button class="secondary">
+                            Làm lại
+                        </button>
+
+                    </div>
+
+                </div>
+
+                <!-- UPLOAD -->
+                <div class="panel">
+
+                    <div class="panel-header">
+                        <h3>Thêm ảnh từ máy</h3>
+                    </div>
+
+                    <input type="file" multiple accept="image/*">
+
+                    <button class="upload-btn">
+                        Upload ảnh
+                    </button>
+
+                    <div class="info-box">
+                        Ảnh cần chứa đúng 1 khuôn mặt, rõ nét và đủ sáng.
+                    </div>
+
+                </div>
+
+            </div>
+
+        </section>
+
+        <!-- REALTIME CAMERA -->
+
+        <section class="card">
+
+            <div class="section-header">
+                <h2>Điểm danh Realtime</h2>
+            </div>
+
+            <div class="camera-actions">
+
+                <button>
+                    Check In ON
+                </button>
+
+                <button>
+                    Check Out ON
+                </button>
+
+                <button class="secondary">
+                    Tắt tất cả
+                </button>
+
+            </div>
+
+            <div class="dual-camera-grid">
+
+                <div class="camera-panel">
+
+                    <div class="camera-panel-header">
+                        <h3>Check In</h3>
+                        <span>Đang tắt</span>
+                    </div>
+
+                    <div class="video-wrap">
+                        <video autoplay muted></video>
+                        <canvas></canvas>
+                    </div>
+
+                    <div class="camera-result">
+                        Chưa bật camera
+                    </div>
+
+                </div>
+
+                <div class="camera-panel">
+
+                    <div class="camera-panel-header">
+                        <h3>Check Out</h3>
+                        <span>Đang tắt</span>
+                    </div>
+
+                    <div class="video-wrap">
+                        <video autoplay muted></video>
+                        <canvas></canvas>
+                    </div>
+
+                    <div class="camera-result">
+                        Chưa bật camera
+                    </div>
+
+                </div>
+
+            </div>
+
+        </section>
+
+    </div>
+
+</body>
+
+</html>

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

@@ -0,0 +1,81 @@
+<section class="page">
+
+    <div class="card">
+
+        <div class="card-header">
+            <h2>Danh sách Face ID</h2>
+
+            <input
+                type="text"
+                placeholder="Tìm kiếm sinh viên..."
+                class="search-input">
+        </div>
+
+        <table class="face-table">
+
+            <thead>
+                <tr>
+                    <th>Mã SV</th>
+                    <th>Họ tên</th>
+                    <th>Face ID</th>
+                    <th>Số mẫu</th>
+                    <th>Phòng</th>
+                    <th>Cập nhật</th>
+                    <th>Chi tiết</th>
+                </tr>
+            </thead>
+
+            <tbody>
+
+                <tr>
+                    <td>SV001</td>
+                    <td>Nguyễn Văn A</td>
+                    <td>#face_001</td>
+                    <td>
+                        <span class="sample-badge">
+                            10 / 10
+                        </span>
+                    </td>
+                    <td>21/02/2025</td>
+
+                    <td>
+                        <button
+                            class="detail-btn"
+                            onclick="openFaceGallery()">
+
+                            Xem ảnh
+
+                        </button>
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>SV002</td>
+                    <td>Trần Văn B</td>
+                    <td>#face_002</td>
+                    <td>
+                        <span class="sample-badge">
+                            7 / 10
+                        </span>
+                    </td>
+                    <td>DE214</td>
+                    <td>20/02/2025</td>
+
+                    <td>
+                        <button
+                            class="detail-btn"
+                            onclick="openFaceGallery()">
+
+                            Xem ảnh
+
+                        </button>
+                    </td>
+                </tr>
+
+            </tbody>
+
+        </table>
+
+    </div>
+
+</section>

src/main/resources/templates/cms/homaPage.jsp

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Dashboard</title>
+
+    <link rel="stylesheet" th:href="@{/css/dashboard-user.css}">
+</head>
+
+<body>
+
+    <!-- Background -->
+    <div class="bg-image"></div>
+
+    <div th:replace="~{cms/layouts/header :: header}"></div>
+
+    <div class="layout">
+
+
+        <main class="section">
+
+            <div class="container-xl">
+
+                <div class="section-header">
+                    <div class="header-left">
+                        <div class="section-eyebrow">
+                            SMART ATTENDANCE
+                        </div>
+
+                        <div class="section-title">
+                            SYSTEM
+                        </div>
+
+                        <div class="section-divider"></div>
+
+                        <p class="section-subtitle">
+                            Giải pháp điểm danh Face ID thông minh cho doanh nghiệp và cơ sở giáo dục.
+                            Quản lý hiệu quả, chính xác và an toàn
+                        </p>
+
+                        <a href="" class="btn btn-primary">Bắt đầu ngay</a>
+                        <a href="" class="btn btn-secondery">
+                            Xem Demo
+                        </a>
+                    </div>
+
+                    <div class="header-right">
+                        <div class="right-box">
+                            <div class="grid grid-cols-2 gap-4">
+                                <div class="header-form">
+                                    <i data-lucide="users" class="form-icon"></i>
+                                    <div class="form-line">5000+</div>
+                                    <div class="form-text">Người dùng</div>
+                                </div>
+                                <div class="header-form">
+                                    <i data-lucide="target" class="form-icon"></i>
+                                    <div class="form-line">99.8%</div>
+                                    <div class="form-text">Độ chính xác</div>
+                                </div>
+                                <div class="header-form">
+                                    <i data-lucide="building-2" class="form-icon"></i>
+                                    <div class="form-line">50+</div>
+                                    <div class="form-text">Đơn vị</div>
+                                </div>
+                                <div class="header-form">
+                                    <i data-lucide="clock" class="form-icon"></i>
+                                    <div class="form-line">24/7</div>
+                                    <div class="form-text">Hoạt động</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Home body -->
+                <div class="section-body">
+                    <div class="body-bg">
+                        <div class="body-header">
+                            <h2 class="header-title">Tính năng nổi bật</h2>
+                            <p class="section-subtitle">Giải pháp toàn diện cho quản lý điểm danh</p>
+                        </div>
+                        <div class="body-container">
+                            <div class="container-box">
+                                <div class="container-icon">
+                                    <i data-lucide="camera" class="icon"></i>
+                                </div>
+                                <h3 class="container-title">Face Recognition</h3>
+                                <p class="container-text">Nhận diện khuôn mặt chính xác với AI, chống
+                                    điểm danh hộ</p>
+                            </div>
+                            <div class="container-box">
+                                <div class="container-icon">
+                                    <i data-lucide="bar-chart-3" class="icon"></i>
+                                </div>
+                                <h3 class="container-title">Analytics Dashboard</h3>
+                                <p class="container-text">Thống kê realtime, biểu đồ trực quan, báo cáo
+                                    chi tiết</p>
+                            </div>
+                            <div class="container-box">
+                                <div class="container-icon">
+                                    <i data-lucide="file-text" class="icon"></i>
+                                </div>
+                                <h3 class="container-title">Report Management</h3>
+                                <p class="container-text">Quản lý báo cáo công việc hằng ngày và cuối
+                                    tuần</p>
+                            </div>
+                            <div class="container-box">
+                                <div class="container-icon">
+                                    <i data-lucide="calendar" class="icon"></i>
+                                </div>
+                                <h3 class="container-title">Leave Management</h3>
+                                <p class="container-text">Xin nghỉ phép, duyệt đơn, theo dõi lịch sử
+                                    nghỉ</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </main>
+    </div>
+    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+
+</body>
+
+</html>

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

@@ -0,0 +1,15 @@
+<footer>
+<div class="footer-layout">
+    <div class="footer-left">
+        <h2 class="left-title">Smart Attendance</h2>
+        <div class="left-description">Hệ thống điểm danh thông minh</div>
+    </div>
+    <div class="footer-right">
+        <div class="right-title">Thông tin liên hệ</div>
+        <a href="" class="right-description">Liên hệ với chúng tôi</a>
+        <a href="" class="right-description">Báo cáo lỗi</a>
+
+    </div>
+</div>
+
+</footer>

src/main/resources/templates/cms/layouts/header.html

@@ -0,0 +1,44 @@
+<header class="header-layout">
+    <div class="header-container">
+        <div class="header-left">
+            <h3 class="header-title">Smart Attendance</h3>
+        </div>
+        <div class="header-right">
+            <div class="change-light">
+                <button>Icon</button>
+            </div>
+            <div class="header-auth">
+                <div class="btn btn-register">Đăng ký</div>
+                <div class="btn btn-login">Đăng nhập</div>
+            </div>
+            <div class="user-dropdown">
+                <summary class="user-summary">
+                    <span th:text="${#authentication.name}"></span>
+                    <span class="arrow">▾</span>
+                </summary>
+
+                <div class="dropdown-menu">
+                    <a th:href="@{/user/moonblight/change-password}">
+                        🔒 Đổi mật khẩu
+                    </a>
+
+                    <form th:action="@{/user/moonblight/logout}" method="post">
+                        <button type="submit">
+                            🚪 Logout
+                        </button>
+                    </form>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <script>
+        document.addEventListener('click', function (e) {
+            const dropdown = document.querySelector('.user-dropdown');
+
+            if (!dropdown.contains(e.target)) {
+                dropdown.removeAttribute('open');
+            }
+        });
+    </script>
+</header>

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

@@ -0,0 +1,52 @@
+<div class="sidebar">
+
+    <div class="sidebar-header">
+        <i class="sidebar-icon"></i>
+        <h2> Smart Attendance</h2>
+        <div class="header-description">Quản lý</div>
+    </div>
+    <div class="sidebar-line"></div>
+
+    <ul class="sidebar-menu">
+
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Dashboard
+            </a>
+        </li>
+
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Quản lý tài khoản
+            </a>
+        </li>
+
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Đơn xét duyệt báo cáo
+            </a>
+        </li>
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Đổi mật khẩu
+            </a>
+        </li>
+        
+    </ul>
+    <div class="sidebar-line"></div>
+    <div class="sidebar-footer">
+        <div class="footer-user">
+            <i class="sidebar-icon"></i>
+            <h3> Smart Attendance</h3>
+            <div class="header-description">Admin</div>
+        </div>
+        <div class="logout">
+            <i class="logout-icon"></i>
+            <div class="logout-text">Đăng xuất</div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,63 @@
+<div class="sidebar">
+
+    <div class="sidebar-header">
+        <i class="sidebar-icon"></i>
+        <h2> Smart Attendance</h2>
+        <div class="header-description">Nhân viên</div>
+    </div>
+    <div class="sidebar-line"></div>
+
+    <ul class="sidebar-menu">
+
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Dashboard
+            </a>
+        </li>
+
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Quản lý điểm danh
+            </a>
+        </li>
+
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Đăng kí nghỉ phép
+            </a>
+        </li>
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Đăng kí Face ID
+            </a>
+        </li>
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Nộp báo cáo
+            </a>
+        </li>
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Thông tin cá nhân
+            </a>
+        </li>
+    </ul>
+    <div class="sidebar-line"></div>
+    <div class="sidebar-footer">
+        <div class="footer-user">
+            <i class="sidebar-icon"></i>
+            <h3> Smart Attendance</h3>
+            <div class="header-description">Nhân viên</div>
+        </div>
+        <div class="logout">
+            <i class="logout-icon"></i>
+            <div class="logout-text">Đăng xuất</div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,81 @@
+<div class="sidebar">
+
+    <div class="sidebar-header">
+        <i class="sidebar-icon"></i>
+        <h2> Smart Attendance</h2>
+        <div class="header-description">Quản lý</div>
+    </div>
+    <div class="sidebar-line"></div>
+
+    <ul class="sidebar-menu">
+
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Dashboard
+            </a>
+        </li>
+
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Quản lý điểm danh
+            </a>
+        </li>
+
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Duyệt nghỉ phép
+            </a>
+        </li>
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Duyệt Face ID
+            </a>
+        </li>
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Báo cáo tháng
+            </a>
+        </li>
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Danh sách báo cáo
+            </a>
+        </li>
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Quản lý tài khoản
+            </a>
+        </li>
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Quản lý tài khoản
+            </a>
+        </li>
+        <li class="sidebar-option">
+            <i class="icon"></i>
+            <a class="sidebar-link">
+                Thông tin cá nhân
+            </a>
+        </li>
+    </ul>
+    <div class="sidebar-line"></div>
+    <div class="sidebar-footer">
+        <div class="footer-user">
+            <i class="sidebar-icon"></i>
+            <h3> Smart Attendance</h3>
+            <div class="header-description">Nhân viên</div>
+        </div>
+        <div class="logout">
+            <i class="logout-icon"></i>
+            <div class="logout-text">Đăng xuất</div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,90 @@
+<!doctype html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Danh sách thế giới</title>
+    <link rel="stylesheet" th:href="@{/css/world/world.css}">
+
+</head>
+
+<body>
+    <div class="bg-image"></div>
+    <div th:replace="~{cms/layouts/sidebar :: sidebar}"></div>
+
+    <div class="container-layout">
+        <header class="page-header">
+            <h1>Thông tin cá nhân</h1>
+
+            <div class="notification">
+                <i class="fa-regular fa-bell"></i>
+                <span class="dot"></span>
+            </div>
+        </header>
+        <main class="main-section">
+            <!-- Form -->
+            <div class="absent-card">
+
+                <h2>Thông tin cá nhân</h2>
+
+                <div class="form-group">
+                    <div class="information-icon"></div>
+                    <label>Họ và tên</label>
+                    <a>Nguyễn văn x</a>
+                </div>
+
+                <div class="form-group">
+                    <div class="information-icon"></div>
+                    <label>Email</label>
+                    <p>abc@gmail.com</p>
+                </div>
+
+                <div class="form-group">
+                    <div class="information-icon"></div>
+                    <label>Phone</label>
+                    <p>0987654321</p>
+                </div>
+
+                <div class="form-group">
+                    <div class="information-icon"></div>
+                    <label>Phòng ban</label>
+                    <p>Phòng Lab 213</p>
+                </div>
+
+                <div class="form-group">
+                    <div class="information-icon"></div>
+                    <label>Mật khẩu</label>
+                    <p>.................</p>
+                </div>
+
+            </div>
+            <div class="change-password">
+                <div class="change-header">
+                    <i class="change-icon"></i>
+                    <h2>Đổi mật khẩu</h2>
+                </div>
+                <div class="change-body">
+                    <div class="form-group">
+                        <label>Mật khẩu hiện tại</label>
+                        <p type="text" class="change-text">......</p>
+                    </div>
+                    <div class="form-group">
+                        <label>Mật khẩu mới</label>
+                        <p type="text" class="change-text">......</p>
+                    </div>
+                    <div class="form-group">
+                        <label>Xác nhận mật khẩu</label>
+                        <p type="text" class="change-text">......</p>
+                    </div>
+                </div>
+
+            </div>
+
+        </main>
+
+    </div>
+    <div th:replace="~{cms/layouts/footer :: footer}"></div>
+</body>
+
+</html>

src/main/webapp/WEB-INF/views/homet.html

@@ -0,0 +1,475 @@
+
+
+<!doctype html>
+
+<!-- <html xmlns:th="http://www.thymeleaf.org"> -->
+<html>
+<head>
+    <meta charset="UTF-8" />
+    <title>Danh sách thế giới</title>
+    <style>
+        /* =====================================================
+WORLD LIST PAGE - DARK FANTASY ADMIN
+===================================================== */
+
+        :root {
+            --blood-red: #8B0000;
+            --crimson: #C41E3A;
+            --dark-bg: #080604;
+            --dark-card: #1C1410;
+            --border-dark: #2E201A;
+            --border-mid: #4A3028;
+            --cream: #DDD0B8;
+            --parchment: #C4A882;
+            --light-grey: #C8C1BC;
+            --mid-grey: #8F7E76;
+            --gold: #C9A44C;
+        }
+
+        /* =====================================================
+PAGE
+===================================================== */
+
+        main {
+            padding: 30px;
+        }
+
+        h1 {
+            color: var(--cream);
+            margin-bottom: 25px;
+
+            font-size: 2.2rem;
+            font-family: "Cormorant Garamond", serif;
+
+            letter-spacing: .05em;
+
+        }
+
+        /* =====================================================
+ALERT
+===================================================== */
+
+        p[style*="green"] {
+            background: rgba(60, 150, 60, .15);
+            color: #8ff19d;
+            padding: 12px 16px;
+            border-left: 4px solid #4caf50;
+            margin-bottom: 15px;
+        }
+
+        p[style*="red"] {
+            background: rgba(196, 30, 58, .12);
+            color: #ff9e9e;
+            padding: 12px 16px;
+            border-left: 4px solid var(--crimson);
+            margin-bottom: 15px;
+        }
+
+        /* =====================================================
+CREATE BUTTON
+===================================================== */
+
+        a[href*="create"] {
+            display: inline-block;
+            padding: 12px 22px;
+            background: var(--blood-red);
+            border: 1px solid var(--crimson);
+            color: white;
+            text-decoration: none;
+            border-radius: 6px;
+            transition: .3s;
+        }
+
+        a[href*="create"]:hover {
+            background: var(--crimson);
+            transform: translateY(-2px);
+        }
+
+        /* =====================================================
+TABLE
+===================================================== */
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 25px;
+            background: var(--dark-card);
+            border: 1px solid var(--border-dark);
+            overflow: hidden;
+
+        }
+
+        thead {
+            background:
+                linear-gradient(180deg,
+                    rgba(139, 0, 0, .25),
+                    rgba(139, 0, 0, .08));
+        }
+
+        th {
+            padding: 15px;
+            color: var(--parchment);
+            text-transform: uppercase;
+            letter-spacing: .08em;
+            font-size: .85rem;
+            border-bottom: 1px solid var(--border-dark);
+        }
+
+        td {
+            padding: 15px;
+            color: var(--light-grey);
+            border-bottom: 1px solid rgba(255, 255, 255, .05);
+            vertical-align: middle;
+
+        }
+
+        tbody tr {
+            transition: .25s;
+        }
+
+        tbody tr:hover {
+            background: rgba(139, 0, 0, .08);
+        }
+
+        tbody tr:last-child td {
+            border-bottom: none;
+        }
+
+        /* =====================================================
+IMAGE
+===================================================== */
+
+        td img {
+            width: 120px;
+            height: 70px;
+
+            object-fit: cover;
+
+            border: 1px solid var(--border-mid);
+
+            border-radius: 4px;
+
+        }
+
+        /* =====================================================
+STATUS
+===================================================== */
+
+        .status-active {
+            color: #86f3a2;
+            font-weight: 600;
+        }
+
+        .status-deleted {
+            color: #ff8f8f;
+            font-weight: 600;
+        }
+
+        /* =====================================================
+ACTION BUTTONS
+===================================================== */
+
+        td form {
+            display: inline-block;
+
+            margin-right: 5px;
+            margin-bottom: 5px;
+
+        }
+
+        button {
+            cursor: pointer;
+
+            padding: 8px 16px;
+
+            border: none;
+
+            border-radius: 4px;
+
+            transition: .3s;
+
+        }
+
+        /* Edit */
+
+        button[type="submit"] {
+            background: #2b211c;
+            color: var(--cream);
+            border: 1px solid var(--border-mid);
+        }
+
+        button[type="submit"]:hover {
+            border-color: var(--crimson);
+        }
+
+        /* Delete */
+
+        form[action*="delete"] button {
+            background: transparent;
+
+            border: 1px solid var(--crimson);
+
+            color: var(--crimson);
+
+        }
+
+        form[action*="delete"] button:hover {
+            background: var(--crimson);
+            color: white;
+        }
+
+        /* Restore */
+
+        form[action*="restore"] button {
+            background: var(--gold);
+
+            color: #111;
+
+        }
+
+        form[action*="restore"] button:hover {
+            filter: brightness(1.1);
+        }
+
+        /* =====================================================
+PAGINATION
+===================================================== */
+
+        div[th\:if] {
+            margin-top: 30px;
+        }
+
+        div[th\:if] a,
+        div[th\:if] span {
+            display: inline-block;
+
+            margin: 0 3px;
+
+        }
+
+        div[th\:if] a {
+            padding: 10px 15px;
+
+            background: var(--dark-card);
+
+            border: 1px solid var(--border-mid);
+
+            color: var(--cream);
+
+            text-decoration: none;
+
+            transition: .3s;
+
+        }
+
+        div[th\:if] a:hover {
+            border-color: var(--crimson);
+
+            color: var(--crimson);
+
+        }
+
+        div[th\:if] span[style] {
+            padding: 10px 15px;
+
+            background: var(--blood-red);
+
+            border: 1px solid var(--crimson);
+
+            color: white;
+
+        }
+.bg-image{
+    position:fixed;
+    inset:0;
+
+    background-image:
+        linear-gradient(
+            rgba(0,0,0,.65),
+            rgba(0,0,0,.85)
+        ),
+        url('img/back.png');
+
+    background-size:cover;
+    background-position:center;
+
+    z-index:-2;
+}
+
+.bg-image::after{
+    content:"";
+
+    position:absolute;
+    inset:0;
+
+    background:
+        radial-gradient(
+            circle at top,
+            rgba(196,30,58,.15),
+            transparent 35%
+        );
+
+    z-index:-1;
+}
+        /* =====================================================
+RESPONSIVE
+===================================================== */
+
+        @media(max-width:992px) {
+
+
+            table {
+                min-width: 900px;
+            }
+
+            main {
+                overflow-x: auto;
+            }
+
+
+        }
+
+        @media(max-width:768px) {
+
+
+            h1 {
+                font-size: 1.8rem;
+            }
+
+            td,
+            th {
+                padding: 10px;
+            }
+
+
+        }
+    </style>
+</head>
+
+<body>
+    <div class="layout">
+        <th:block th:replace="~{cms/fragments/sidebar :: sidebar}"></th:block>
+
+        <div class="content-wrapper">
+            <th:block th:replace="~{cms/fragments/header :: header}"></th:block>
+            <div class="bg-image"></div>
+            <main class="cms-page">
+
+                <div class="cms-header">
+                    <h1 class="cms-title">Danh sách thế giới</h1>
+
+                    <a th:href="@{/world/moonblight/create}" class="btn btn-primary">
+                        + Tạo thế giới mới
+                    </a>
+                </div>
+
+                <p class="alert-success" th:if="${successMessage}" th:text="${successMessage}">
+                </p>
+
+                <p class="alert-error" th:if="${errorMessage}" th:text="${errorMessage}">
+                </p>
+
+                <div class="table-wrapper">
+
+                    <table class="cms-table">
+
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Ảnh</th>
+                                <th>Ưu tiên</th>
+                                <th>Tag</th>
+                                <th>Tiêu đề</th>
+                                <th>Trạng thái</th>
+                                <th>Hành động</th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            <tr th:each="world : ${worlds.content}">
+
+                                <td th:text="${world.id}"></td>
+
+                                <td>
+                                    <img th:if="${world.image != null}" th:src="${world.image}" alt="World Image"
+                                        class="table-image">
+                                </td>
+
+                                <td th:text="${world.priority}"></td>
+
+                                <td th:text="${world.tag}"></td>
+
+                                <td th:text="${world.title}"></td>
+
+                                <td>
+                                    <span class="status"
+                                        th:classappend="${world.deleted} ? 'status-deleted' : 'status-active'"
+                                        th:text="${world.deleted ? 'Đã xóa' : 'Đang hiển thị'}">
+                                    </span>
+                                </td>
+
+                                <td class="action-group">
+
+                                    <form th:action="@{/world/moonblight/{id}/edit(id=${world.id})}" method="get">
+                                        <button type="submit" class="btn btn-secondary">
+                                            Sửa
+                                        </button>
+                                    </form>
+
+                                    <form th:if="${!world.deleted}"
+                                        th:action="@{/world/moonblight/{id}/delete(id=${world.id})}" method="post">
+
+                                        <button type="submit" class="btn btn-outline-red">
+                                            Xóa
+                                        </button>
+                                    </form>
+
+                                    <form th:if="${world.deleted}"
+                                        th:action="@{/world/moonblight/{id}/restore(id=${world.id})}" method="post">
+
+                                        <button type="submit" class="btn btn-gold">
+                                            Khôi phục
+                                        </button>
+                                    </form>
+
+                                </td>
+
+                            </tr>
+                        </tbody>
+
+                    </table>
+
+                </div>
+
+                <div class="pagination" th:if="${worlds.totalPages > 1}">
+
+                    <a class="page-btn" th:if="${!worlds.first}"
+                        th:href="@{/world/moonblight/list(page=${worlds.number - 1})}">
+                        ← Trước
+                    </a>
+
+                    <!-- <span th:each="i : ${#numbers.sequence(0, worlds.totalPages - 1)}"> -->
+                    <span >
+
+                        <a class="page-number" th:if="${i != worlds.number}"
+                            th:href="@{/world/moonblight/list(page=${i})}" th:text="${i + 1}">
+                        </a>
+
+                        <span class="page-number active" th:if="${i == worlds.number}" th:text="${i + 1}">
+                        </span>
+
+                    </span>
+
+                    <a class="page-btn" th:if="${!worlds.last}"
+                        th:href="@{/world/moonblight/list(page=${worlds.number + 1})}">
+                        Sau →
+                    </a>
+
+                </div>
+
+            </main>
+        </div>
+    </div>
+</body>
+
+</html>

src/main/webapp/WEB-INF/views/webapp1/login.jsp

@@ -1,89 +1,98 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-<!DOCTYPE html>
-<html lang="vi">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Đăng Nhập - Face ID Attendance</title>
-    <link rel="stylesheet" href="css/theme.css">
-    <link rel="stylesheet" href="css/components.css">
-</head>
-<body>
-    <div class="min-h-screen flex items-center justify-center" style="background-color: var(--background); padding: 1.5rem;">
-        <div class="card" style="max-width: 450px; width: 100%;">
-            <div class="card-header text-center">
-                <h1 class="card-title" style="font-size: 2rem;">Đăng Nhập</h1>
-                <p class="card-description">Nhập thông tin để truy cập hệ thống</p>
-            </div>
-
-            <div class="card-body">
-                <% String error = request.getParameter("error");
-                   if (error != null) { %>
-                    <div class="alert alert-destructive mb-4">
-                        Sai email hoặc mật khẩu!
-                    </div>
-                <% } %>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+    <!DOCTYPE html>
+    <html lang="vi">
 
-                <form action="login" method="post" id="loginForm">
-                    <div class="form-group">
-                        <label class="form-label">Vai trò</label>
-                        <select name="role" class="form-control" required>
-                            <option value="EMPLOYEE">Nhân viên (Employee)</option>
-                            <option value="TEACHER">Giáo viên / Quản lý (Teacher)</option>
-                            <option value="ADMIN">Quản trị viên (Admin)</option>
-                        </select>
-                    </div>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Đăng Nhập - Face ID Attendance</title>
+        <link rel="stylesheet" href="css/theme.css">
+        <link rel="stylesheet" href="css/components.css">
+    </head>
 
-                    <div class="form-group">
-                        <label class="form-label">Email</label>
-                        <input type="email" name="email" class="form-control" placeholder="your.email@company.com" required>
-                    </div>
+    <body>
+        <div class="min-h-screen flex items-center justify-center"
+            style="background-color: var(--background); padding: 1.5rem;">
+            <div class="card" style="max-width: 450px; width: 100%;">
+                <div class="card-header text-center">
+                    <h1 class="card-title" style="font-size: 2rem;">Đăng Nhập</h1>
+                    <p class="card-description">Nhập thông tin để truy cập hệ thống</p>
+                </div>
 
-                    <div class="form-group">
-                        <label class="form-label">Mật khẩu</label>
-                        <div style="position: relative;">
-                            <input type="password" name="password" id="password" class="form-control" placeholder="••••••••" required>
-                            <button type="button" onclick="AttendanceSystem.togglePassword('password')" 
-                                    style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
-                                <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
-                                    <circle cx="12" cy="12" r="3"></circle>
-                                </svg>
-                            </button>
+                <div class="card-body">
+                    <% String error=request.getParameter("error"); if (error !=null) { %>
+                        <div class="alert alert-destructive mb-4">
+                            Sai email hoặc mật khẩu!
                         </div>
-                    </div>
+                        <% } %>
 
-                    <button type="submit" class="btn btn-primary w-full" style="width: 100%; margin-top: 1.5rem;">
-                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
-                            <polyline points="10 17 15 12 10 7"></polyline>
-                            <line x1="15" y1="12" x2="3" y2="12"></line>
-                        </svg>
-                        Đăng nhập
-                    </button>
-                </form>
-            </div>
+                            <form action="login" method="post" id="loginForm">
+                                <div class="form-group">
+                                    <label class="form-label">Vai trò</label>
+                                    <select name="role" class="form-control" required>
+                                        <option value="EMPLOYEE">Nhân viên (Employee)</option>
+                                        <option value="TEACHER">Giáo viên / Quản lý (Teacher)</option>
+                                        <option value="ADMIN">Quản trị viên (Admin)</option>
+                                    </select>
+                                </div>
 
-            <div class="card-footer text-center">
-                <p class="text-sm text-muted">
-                    Chưa có tài khoản? 
-                    <a href="register.jsp" class="text-primary font-semibold">Đăng ký ngay</a>
-                </p>
-                <p class="text-sm text-muted" style="margin-top: 0.5rem;">
-                    <a href="index.jsp" class="text-muted">← Về trang chủ</a>
-                </p>
-            </div>
+                                <div class="form-group">
+                                    <label class="form-label">Email</label>
+                                    <input type="email" name="email" class="form-control"
+                                        placeholder="your.email@company.com" required>
+                                </div>
 
-            <div style="text-align: center; margin-top: 1rem;">
-                <button id="theme-toggle" onclick="AttendanceSystem.toggleTheme()" class="btn btn-icon btn-outline">
-                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                    </svg>
-                </button>
+                                <div class="form-group">
+                                    <label class="form-label">Mật khẩu</label>
+                                    <div style="position: relative;">
+                                        <input type="password" name="password" id="password" class="form-control"
+                                            placeholder="••••••••" required>
+                                        <button type="button" onclick="AttendanceSystem.togglePassword('password')"
+                                            style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
+                                            <svg width="20" height="20" fill="none" stroke="currentColor"
+                                                stroke-width="2">
+                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                                                <circle cx="12" cy="12" r="3"></circle>
+                                            </svg>
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <button type="submit" class="btn btn-primary w-full"
+                                    style="width: 100%; margin-top: 1.5rem;">
+                                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"
+                                        stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
+                                        <polyline points="10 17 15 12 10 7"></polyline>
+                                        <line x1="15" y1="12" x2="3" y2="12"></line>
+                                    </svg>
+                                    Đăng nhập
+                                </button>
+                            </form>
+                </div>
+
+                <div class="card-footer text-center">
+                    <p class="text-sm text-muted">
+                        Chưa có tài khoản?
+                        <a href="register.jsp" class="text-primary font-semibold">Đăng ký ngay</a>
+                    </p>
+                    <p class="text-sm text-muted" style="margin-top: 0.5rem;">
+                        <a href="index.jsp" class="text-muted">← Về trang chủ</a>
+                    </p>
+                </div>
+
+                <div style="text-align: center; margin-top: 1rem;">
+                    <button id="theme-toggle" onclick="AttendanceSystem.toggleTheme()" class="btn btn-icon btn-outline">
+                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"
+                            stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                        </svg>
+                    </button>
+                </div>
             </div>
         </div>
-    </div>
 
-    <script src="js/main.js"></script>
-</body>
-</html>
+        <script src="js/main.js"></script>
+    </body>
+
+    </html>

src/test/java/com/attendenceSystem/AttendenceSystemApplicationTests.java

@@ -1,13 +1,13 @@
-package com.attendenceSystem;
+// package com.attendenceSystem;
 
-import org.junit.jupiter.api.Test;
-import org.springframework.boot.test.context.SpringBootTest;
+// import org.junit.jupiter.api.Test;
+// import org.springframework.boot.test.context.SpringBootTest;
 
-@SpringBootTest
-class AttendenceSystemApplicationTests {
+// @SpringBootTest
+// class AttendenceSystemApplicationTests {
 
-	@Test
-	void contextLoads() {
-	}
+// 	@Test
+// 	void contextLoads() {
+// 	}
 
-}
+// }