Add my-leave

src/main/java/com/attendenceSystem/constant/Routes.java

@@ -56,6 +56,7 @@ public final class Routes {
         public static final String ROOT = "/attendance";
         public static final String HISTORY = "/history";
         public static final String LEAVE = "/leave";
+        public static final String MY_LEAVE = "/leave/list";
         public static final String LEAVE_DETAIL = "/leave/detail";
         public static final String CHECK_IN = "/check-in";
         public static final String CHECK_OUT = "/check-out";

src/main/java/com/attendenceSystem/constant/Views.java

@@ -37,6 +37,7 @@ public final class Views {
         public static final String HISTORY = "cms/attendance/attendance-history";
         public static final String LEAVE_CREATE = "cms/absent/absent-create";
         public static final String LEAVE_LIST = "cms/absent/absent-list";
+        public static final String MY_LEAVE_LIST = "cms/absent/my-absent-list";
         public static final String LEAVE_HISTORY = "cms/absent/absent-history";
     }
 

src/main/java/com/attendenceSystem/module/attendance/controller/AttendanceController.java

@@ -125,6 +125,30 @@ public class AttendanceController {
         return Views.Attendance.LEAVE_LIST;
     }
 
+    @GetMapping(Routes.Attendance.MY_LEAVE)
+    public String myLeaveRequestList(
+            @RequestParam(required = false) LeaveStatus status,
+            @RequestParam(required = false) String week,
+            @PageableDefault(size = 10) Pageable pageable,
+            Model model) {
+
+        boolean hasFilter = status != null || (week != null && !week.isBlank());
+
+        Page<LeaveRequestResponse> leaveRequests;
+        if (hasFilter) {
+            leaveRequests = leaveService.getLeaveRequests(status, week, pageable);
+        } else {
+            leaveRequests = leaveService.getLeaveRequests(pageable);
+        }
+
+        model.addAttribute("leaveRequests", leaveRequests);
+        model.addAttribute("selectedStatus", status);
+        model.addAttribute("selectedWeek", week);
+        model.addAttribute("hasFilter", hasFilter);
+
+        return Views.Attendance.MY_LEAVE_LIST;
+    }
+
     @GetMapping(Routes.Attendance.LEAVE + Routes.Action.CREATE)
     public String toLeaveRequestPage(Model model) {
         model.addAttribute("createLeaveRequest", new CreateLeaveRequest());

src/main/java/com/attendenceSystem/module/attendance/service/LeaveService.java

@@ -16,6 +16,8 @@ public interface LeaveService {
 
     Page<LeaveRequestResponse> getLeaveRequests(Pageable pageable);
 
+    Page<LeaveRequestResponse> getLeaveRequests(LeaveStatus status, String week, Pageable pageable);
+
     Page<LeaveRequestResponse> getAllLeaveRequests(Pageable pageable);
 
     Page<LeaveRequestResponse> getAllLeaveRequests(String keyword, LeaveStatus status, String week, Pageable pageable);

src/main/java/com/attendenceSystem/module/attendance/service/impl/LeaveServiceImpl.java

@@ -73,6 +73,20 @@ public class LeaveServiceImpl implements LeaveService {
                 .map(leaveRequestResponseMapper::fromEntity);
     }
 
+    @Override
+    public Page<LeaveRequestResponse> getLeaveRequests(final LeaveStatus status, final String week, final Pageable pageable) {
+        User user = userContextProvider.getCurrentUserEntity();
+        Specification<LeaveRequest> spec = Specification
+                .where(hasUser(user))
+                .and(LeaveRequestSpecification.hasStatus(status))
+                .and(LeaveRequestSpecification.hasWeek(week));
+        return leaveRequestRepository.findAll(spec, pageable).map(leaveRequestResponseMapper::fromEntity);
+    }
+
+    private Specification<LeaveRequest> hasUser(User user) {
+        return (root, query, cb) -> cb.equal(root.get("user"), user);
+    }
+
     @Override
     public Page<LeaveRequestResponse> getAllLeaveRequests(final Pageable pageable) {
         return leaveRequestRepository.findAll(pageable).map(leaveRequestResponseMapper::fromEntity);

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

@@ -0,0 +1,430 @@
+@import url("../base.css");
+/* ===================================
+   CARD
+=================================== */
+
+.dashboard-card {
+    background: var(--bg-card);
+
+    backdrop-filter: blur(20px);
+
+    border: 1px solid var(--border);
+    border-radius: 24px;
+
+    overflow: hidden;
+
+    margin-bottom: 24px;
+}
+
+.card-header {
+    padding: 24px;
+
+    border-bottom: 1px solid var(--border);
+}
+
+.card-header h2 {
+    font-size: 1.25rem;
+    font-weight: 700;
+}
+
+.card-body {
+    padding: 24px;
+}
+
+/* ===================================
+   FILTER
+=================================== */
+
+.filter-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.filter-grid {
+    display: grid;
+    grid-template-columns:
+        1fr 1fr;
+
+    gap: 18px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.form-group label {
+    color: var(--text-light);
+    font-size: .9rem;
+    font-weight: 600;
+}
+
+.form-group input,
+.form-group select {
+    height: 50px;
+
+    padding: 0 16px;
+
+    border-radius: 14px;
+
+    background:
+        rgba(255, 255, 255, .05);
+
+    border: 1px solid rgba(255, 255, 255, .08);
+
+    color: white;
+
+    transition: .3s;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+    outline: none;
+
+    border-color: var(--indigo-06);
+
+    box-shadow:
+        0 0 0 4px rgba(99, 102, 241, .15);
+}
+
+.form-group select option {
+    background: #0f172a;
+}
+
+/* ===================================
+   BUTTON
+=================================== */
+
+.form-actions {
+    display: flex;
+    gap: 12px;
+}
+
+.btn-primary,
+.btn-secondary {
+    height: 50px;
+
+    padding: 0 24px;
+
+    border: none;
+    border-radius: 14px;
+
+    cursor: pointer;
+
+    font-weight: 600;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    transition: .25s;
+}
+
+.btn-primary {
+    color: white;
+
+    background:
+        linear-gradient(to right,
+            var(--indigo-06),
+            var(--purple));
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+}
+
+.btn-secondary {
+    background: #334155;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #475569;
+}
+
+/* ===================================
+   TABLE
+=================================== */
+
+.table-wrapper {
+    overflow-x: auto;
+}
+
+.table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.table thead {
+    background:
+        rgba(255, 255, 255, .03);
+}
+
+.table th {
+    padding: 18px;
+
+    text-align: left;
+
+    color: var(--text-light);
+
+    border-bottom: 1px solid var(--border);
+}
+
+.table td {
+    padding: 18px;
+
+    color: #e2e8f0;
+
+    border-bottom:
+        1px solid rgba(255, 255, 255, .04);
+}
+
+.table tbody tr {
+    transition: .25s;
+}
+
+.table tbody tr:hover {
+    background:
+        rgba(255, 255, 255, .03);
+}
+
+/* ===================================
+   STATUS
+=================================== */
+
+.status {
+    display: inline-flex;
+
+    padding: 6px 12px;
+
+    border-radius: 999px;
+
+    font-size: .85rem;
+    font-weight: 600;
+}
+
+.pending {
+    background:
+        rgba(245, 158, 11, .15);
+
+    color: var(--warning);
+}
+
+.approved {
+    background:
+        rgba(34, 197, 94, .15);
+
+    color: var(--success);
+}
+
+.rejected {
+    background:
+        rgba(239, 68, 68, .15);
+
+    color: var(--danger);
+}
+
+/* ===================================
+   PAGINATION
+=================================== */
+
+.pagination {
+    margin-top: 30px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    gap: 18px;
+}
+
+.btn-pagination {
+    padding: 12px 20px;
+
+    border-radius: 14px;
+
+    cursor: pointer;
+
+    color: white;
+
+    text-decoration: none;
+
+    background:
+        rgba(255, 255, 255, .05);
+
+    border: 1px solid rgba(255, 255, 255, .08);
+
+    transition: .25s;
+}
+
+.btn-pagination:hover {
+    background:
+        rgba(255, 255, 255, .08);
+}
+
+.page-info {
+    color: var(--text-light);
+    font-weight: 600;
+}
+
+/* ===================================
+   SCROLLBAR
+=================================== */
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1e293b;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #475569;
+    border-radius: 8px;
+}
+/* ==========================
+   ABSENT MODAL
+========================== */
+
+.absent-modal {
+    display: none;
+
+    position: fixed;
+
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: rgba(0, 0, 0, .75);
+
+    justify-content: center;
+    align-items: center;
+
+    z-index: 9999;
+}
+
+.absent-modal.show {
+    display: flex;
+}
+
+.absent-modal-content {
+    width: 850px;
+    max-width: 95%;
+
+    background: var(--bg-card);
+
+    border: 1px solid var(--border);
+
+    border-radius: 20px;
+
+    overflow: hidden;
+
+    box-shadow: 0 0 30px rgba(0,0,0,.4);
+}
+
+.absent-modal-header {
+    display: flex;
+
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 20px;
+
+    border-bottom: 1px solid var(--border);
+
+    color: var(--text-white);
+}
+
+.absent-modal-body {
+    padding: 24px;
+}
+
+.detail-grid {
+    display: grid;
+
+    grid-template-columns: repeat(2, 1fr);
+
+    gap: 20px;
+
+    margin-bottom: 24px;
+}
+
+.detail-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.detail-item label {
+    color: var(--text-light);
+    font-size: .85rem;
+    font-weight: 600;
+}
+
+.detail-item span {
+    color: var(--text-white);
+}
+
+.detail-reason {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.reason-box {
+    padding: 16px;
+
+    border-radius: 12px;
+
+    border: 1px solid var(--border);
+
+    background: var(--bg-table);
+
+    color: var(--text-white);
+
+    line-height: 1.7;
+}
+
+@media(max-width:768px) {
+
+    .detail-grid {
+        grid-template-columns: 1fr;
+    }
+}
+/* ===================================
+   RESPONSIVE
+=================================== */
+
+@media(max-width:992px) {
+
+    .filter-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media(max-width:768px) {
+
+    .card-body {
+        padding: 18px;
+    }
+
+    .form-actions {
+        flex-direction: column;
+    }
+
+    .btn-primary,
+    .btn-secondary {
+        width: 100%;
+    }
+
+    .pagination {
+        flex-direction: column;
+    }
+}

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

@@ -0,0 +1,301 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Xem nghỉ phép</title>
+    <link rel="stylesheet" href="/css/absent/my-absent-list.css">
+    <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 class="layout">
+
+        <!-- SIDEBAR -->
+        <div th:replace="~{cms/sidebar/sidebar-role :: sidebar}"></div>
+
+        <!-- CONTENT -->
+        <div class="container-layout">
+
+            <!-- HEADER -->
+            <div class="container-header">
+                <h1>Xem nghỉ phép</h1>
+                <p>Danh sách đơn xin nghỉ phép của bạn</p>
+            </div>
+
+            <main class="main-container">
+
+                <!-- FILTER CARD -->
+                <section class="dashboard-card">
+
+                    <div class="card-header">
+                        <h2>Bộ lọc tìm kiếm</h2>
+                    </div>
+
+                    <div class="card-body">
+
+                        <form class="filter-form" th:action="@{/attendance/leave/list}" method="get">
+
+                            <div class="filter-grid">
+
+                                <!-- Trạng thái -->
+                                <div class="form-group">
+                                    <label>Trạng thái</label>
+                                    <select name="status">
+                                        <option value="" th:selected="${selectedStatus == null}">Tất cả</option>
+                                        <option value="PENDING" th:selected="${selectedStatus?.name() == 'PENDING'}">Chờ duyệt</option>
+                                        <option value="APPROVED" th:selected="${selectedStatus?.name() == 'APPROVED'}">Đã duyệt</option>
+                                        <option value="REJECTED" th:selected="${selectedStatus?.name() == 'REJECTED'}">Từ chối</option>
+                                    </select>
+                                </div>
+
+                                <!-- Tuần -->
+                                <div class="form-group">
+                                    <label>Tuần</label>
+                                    <input type="week" name="week" th:value="${selectedWeek}">
+                                </div>
+
+                            </div>
+
+                            <div class="form-actions">
+                                <button type="submit" class="btn-primary">
+                                    <i class="fa-solid fa-magnifying-glass"></i>
+                                    Tìm kiếm
+                                </button>
+
+                                <button type="reset" class="btn-secondary">
+                                    Reset
+                                </button>
+                            </div>
+
+                        </form>
+
+                    </div>
+
+                </section>
+
+                <!-- TABLE CARD -->
+                <section class="dashboard-card">
+
+                    <div class="card-header">
+                        <h2>Danh sách đơn nghỉ phép</h2>
+                    </div>
+
+                    <div class="card-body">
+
+                        <div class="table-wrapper">
+
+                            <table class="table">
+                                <thead>
+                                    <tr>
+                                        <th>Từ ngày</th>
+                                        <th>Đến ngày</th>
+                                        <th>Lý do</th>
+                                        <th>Trạng thái</th>
+                                        <th>Chi tiết</th>
+                                    </tr>
+                                </thead>
+
+                                <tbody>
+                                    <!-- Không có dữ liệu -->
+                                    <tr th:if="${leaveRequests == null or leaveRequests.content.isEmpty()}">
+                                        <td colspan="5" class="text-center">
+                                            Chưa có đơn nghỉ phép nào.
+                                        </td>
+                                    </tr>
+                                    <tr th:each="leave : ${leaveRequests.content}">
+                                        <td th:text="${#temporals.format(leave.startDate(), 'dd/MM/yyyy')}">Từ ngày</td>
+                                        <td th:text="${#temporals.format(leave.endDate(), 'dd/MM/yyyy')}">Đến ngày</td>
+                                        <td th:text="${leave.reason()}">Lý do</td>
+                                        <td>
+                                            <span th:classappend="${leave.status()} ? 'status-' + ${leave.status().name().toLowerCase()}" 
+                                                  class="status"
+                                                  th:text="${leave.status()}">
+                                            </span>
+                                        </td>
+                                        <td>
+                                            <button th:data-id="${leave.id}"
+                                                class="btn btn-small btn-primary btn-view-detail" type="button">
+                                                <i class="fa-solid fa-eye"></i>
+                                                Xem chi tiết
+                                            </button>
+                                        </td>
+                                    </tr>
+
+                                </tbody>
+
+                            </table>
+
+                        </div>
+
+                    </div>
+
+                </section>
+
+                <!-- PAGINATION -->
+                <div class="pagination" th:if="${leaveRequests.totalPages > 1}">
+                    <a th:if="${leaveRequests.hasPrevious()}"
+                       th:href="@{/attendance/leave/list(page=${leaveRequests.number - 1}, size=${leaveRequests.size}, status=${selectedStatus}, week=${selectedWeek})}"
+                       class="btn btn-pagination">← Trước</a>
+
+                    <span class="page-info">
+                        <a th:each="i : ${#numbers.sequence(0, leaveRequests.totalPages - 1)}"
+                           th:if="${i == leaveRequests.number}"
+                           th:href="@{/attendance/leave/list(page=${i}, size=${leaveRequests.size}, status=${selectedStatus}, week=${selectedWeek})}"
+                           class="page-link active" th:text="${i + 1}">1</a>
+                        <a th:each="i : ${#numbers.sequence(0, leaveRequests.totalPages - 1)}"
+                           th:unless="${i == leaveRequests.number}"
+                           th:href="@{/attendance/leave/list(page=${i}, size=${leaveRequests.size}, status=${selectedStatus}, week=${selectedWeek})}"
+                           class="page-link" th:text="${i + 1}">1</a>
+                    </span>
+
+                    <a th:if="${leaveRequests.hasNext()}"
+                       th:href="@{/attendance/leave/list(page=${leaveRequests.number + 1}, size=${leaveRequests.size}, status=${selectedStatus}, week=${selectedWeek})}"
+                       class="btn btn-pagination">Sau →</a>
+                </div>
+
+                <div id="absentDetailModal" class="absent-modal">
+
+                    <div class="absent-modal-content">
+
+                        <div class="absent-modal-header">
+                            <h2>Chi tiết đơn nghỉ phép</h2>
+
+                            <button class="close-btn" onclick="closeAbsentDetail()">
+                                ✕
+                            </button>
+                        </div>
+
+                        <div class="absent-modal-body">
+
+                            <div class="detail-grid">
+
+                                <div class="detail-item">
+                                    <label>Mã đơn</label>
+                                    <span id="detailId">#LV001</span>
+                                </div>
+
+                                <div class="detail-item">
+                                    <label>Tên đăng nhập</label>
+                                    <span id="detailUsername">--</span>
+                                </div>
+
+                                <div class="detail-item">
+                                    <label>Người gửi</label>
+                                    <span id="detailFullName">--</span>
+                                </div>
+
+                                <div class="detail-item">
+                                    <label>Từ ngày</label>
+                                    <span id="detailStartDate">--</span>
+                                </div>
+
+                                <div class="detail-item">
+                                    <label>Đến ngày</label>
+                                    <span id="detailEndDate">--</span>
+                                </div>
+
+                                <div class="detail-item">
+                                    <label>Số ngày nghỉ</label>
+                                    <span id="detailDays">--</span>
+                                </div>
+
+                                <div class="detail-item">
+                                    <label>Trạng thái</label>
+                                    <span id="detailStatus" class="status pending">
+                                        --
+                                    </span>
+                                </div>
+
+                            </div>
+
+                            <div class="detail-reason">
+                                <label>Lý do nghỉ phép</label>
+
+                                <div id="detailReason" class="reason-box">
+                                    --
+                                </div>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+            </main>
+            <!-- FOOTER -->
+            <div th:replace="~{cms/layout/footer :: footer}"></div>
+        </div>
+    </div>
+
+    <!-- DETAIL CARD -->
+
+    <script>
+        function openAbsentDetail() {
+            document
+                .getElementById("absentDetailModal")
+                .classList.add("show");
+        }
+
+        function closeAbsentDetail() {
+            document
+                .getElementById("absentDetailModal")
+                .classList.remove("show");
+        }
+
+        window.onclick = function (event) {
+
+            const modal =
+                document.getElementById("absentDetailModal");
+
+            if (event.target === modal) {
+                closeAbsentDetail();
+            }
+        };
+
+        document.querySelectorAll('.btn-view-detail').forEach(button => {
+            button.addEventListener('click', async function () {
+                const leaveId = this.getAttribute('data-id');
+                try {
+                    const response = await fetch('/api/attendance/leave/detail/' + leaveId);
+                    if (!response.ok) {
+                        throw new Error('Không thể tải chi tiết đơn nghỉ phép');
+                    }
+                    const data = await response.json();
+
+                    document.getElementById('detailId').textContent = '#' + data.id;
+                    document.getElementById('detailUsername').textContent = data.username || '--';
+                    document.getElementById('detailFullName').textContent = data.fullName || '--';
+                    document.getElementById('detailStartDate').textContent = data.startDate || '--';
+                    document.getElementById('detailEndDate').textContent = data.endDate || '--';
+
+                    if (data.startDate && data.endDate) {
+                        const start = new Date(data.startDate);
+                        const end = new Date(data.endDate);
+                        const days = Math.max(1, Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1);
+                        document.getElementById('detailDays').textContent = days + ' ngày';
+                    } else {
+                        document.getElementById('detailDays').textContent = '--';
+                    }
+
+                    const statusEl = document.getElementById('detailStatus');
+                    statusEl.textContent = data.status || '--';
+                    statusEl.className = 'status ' + (data.status ? data.status.toLowerCase() : '');
+
+                    document.getElementById('detailReason').textContent = data.reason || '--';
+
+                    openAbsentDetail();
+                } catch (error) {
+                    console.error(error);
+                    alert(error.message || 'Có lỗi xảy ra, vui lòng thử lại');
+                }
+            });
+        });
+    </script>
+
+</body>
+
+</html>

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

@@ -28,7 +28,12 @@
                 Lịch sử điểm danh
             </a>
         </li>
-
+        <li class="sidebar-option">
+            <a href="/attendance/leave/list" class="sidebar-link">
+                <span>📋</span>
+                Đơn nghỉ phép của tôi
+            </a>
+        </li>
         <li class="sidebar-option">
             <a href="/attendance/leave/create" class="sidebar-link">
                 <span>📅</span>