diff --git a/src/main/resources/static/html/CHApprovalSystem.html b/src/main/resources/static/html/CHApprovalSystem.html
new file mode 100644
index 0000000000000000000000000000000000000000..4721c7ca068f303664491698059ec9141aa8d993
--- /dev/null
+++ b/src/main/resources/static/html/CHApprovalSystem.html
@@ -0,0 +1,380 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Care Home Approval System</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
+ integrity="sha384-KyZXEJr+fzzj7QPAAd6XJlNhh8Fj72V53fzmdeau9g7KZb6eYy2v8t+HjlFjzml0" crossorigin="anonymous">
+ <style>
+ body {
+ background-color: #f4f9fc;
+ font-family: 'Arial', sans-serif;
+ color: #333;
+ }
+
+ .container {
+ margin-top: 50px;
+ }
+
+ .header {
+ text-align: center;
+ margin-bottom: 40px;
+ }
+
+ .table th,
+ .table td {
+ vertical-align: middle;
+ }
+
+ .card {
+ border: 1px solid #007BFF;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ .btn {
+ border-radius: 25px;
+ padding: 8px 20px;
+ font-size: 14px;
+ transition: background-color 0.3s ease;
+ }
+
+ .btn-primary {
+ background-color: #007BFF;
+ border-color: #007BFF;
+ }
+
+ .btn-primary:hover {
+ background-color: #0056b3;
+ border-color: #0056b3;
+ }
+
+ .btn-danger {
+ background-color: #dc3545;
+ border-color: #dc3545;
+ }
+
+ .btn-danger:hover {
+ background-color: #c82333;
+ border-color: #c82333;
+ }
+
+ .btn-warning {
+ background-color: #ffc107;
+ border-color: #ffc107;
+ }
+
+ .btn-warning:hover {
+ background-color: #e0a800;
+ border-color: #e0a800;
+ }
+
+ .alert-info {
+ font-size: 16px;
+ background-color: #e3f2fd;
+ border-color: #b3e5fc;
+ color: #0277bd;
+ }
+
+ .modal-content {
+ background-color: #f8f9fa;
+ border-radius: 10px;
+ padding: 20px;
+ }
+
+ .modal-header {
+ background-color: #007BFF;
+ color: white;
+ border-bottom: none;
+ padding-bottom: 10px;
+ border-radius: 8px;
+ }
+
+ .modal-footer {
+ justify-content: space-between;
+ border-top: none;
+ padding-top: 15px;
+ }
+
+ .modal-body {
+ font-size: 16px;
+ color: #555;
+ }
+
+ .btn-group {
+ display: flex;
+ gap: 15px;
+ }
+
+ .btn-group button {
+ flex: 1;
+ max-width: 120px;
+ }
+
+ .btn-info {
+ background-color: #17a2b8;
+ border-color: #17a2b8;
+ }
+
+ .btn-info:hover {
+ background-color: #138496;
+ border-color: #138496;
+ }
+
+ .table {
+ border-radius: 10px;
+ overflow: hidden;
+ border: 1px solid #ddd;
+ width: 100%;
+ }
+
+ .table th {
+ background-color: #007BFF;
+ color: white;
+ }
+
+ .table td {
+ background-color: #ffffff;
+ }
+
+ .table-container {
+ display: flex;
+ justify-content: center;
+ margin-top: 50px;
+ }
+
+ .pagination {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+ padding: 10px 0;
+ }
+
+ .pagination .page-item {
+ border-radius: 5px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ .pagination .page-item.active .page-link {
+ background-color: #007BFF;
+ color: white;
+ }
+
+ .pagination .page-item .page-link {
+ border-radius: 5px;
+ padding: 10px 15px;
+ background-color: white;
+ color: #007BFF;
+ border: 1px solid #007BFF;
+ transition: all 0.3s ease;
+ }
+
+ .pagination .page-item:hover .page-link {
+ background-color: #007BFF;
+ color: white;
+ }
+
+ .pagination .page-item.disabled .page-link {
+ background-color: #f4f9fc;
+ color: #ccc;
+ border: 1px solid #ccc;
+ }
+ </style>
+</head>
+
+<body>
+<div class="container">
+ <div class="header">
+ <h1 class="display-4">Care Home Approval System</h1>
+ <p class="lead">Admin can approve, reject or delete the requests of registration from care homes.</p>
+ </div>
+
+ <!--E.g.-->
+ <div class="alert alert-info">There are currently 10 pending care home requests.</div>
+
+ <div class="table-container">
+ <table class="table table-striped table-bordered">
+ <thead>
+ <tr>
+ <th>CHName</th>
+ <th>Address</th>
+ <th>Option</th>
+ </tr>
+ </thead>
+ <tbody id="hospitalTableBody">
+ <!-- 动态生成表格内容 -->
+ </tbody>
+ </table>
+ </div>
+
+ <!-- 分页控件 -->
+ <div class="d-flex justify-content-center">
+ <nav aria-label="Page navigation">
+ <ul class="pagination">
+ <li class="page-item" id="prevPageBtn">
+ <a class="page-link" href="#" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li class="page-item"><a class="page-link" href="#" onclick="changePage(1)">1</a></li>
+ <li class="page-item"><a class="page-link" href="#" onclick="changePage(2)">2</a></li>
+ <li class="page-item"><a class="page-link" href="#" onclick="changePage(3)">3</a></li>
+ <li class="page-item" id="nextPageBtn">
+ <a class="page-link" href="#" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+</div>
+
+<!-- 模态框：显示详细请求信息 -->
+<div class="modal fade" id="requestDetailsModal" tabindex="-1" aria-labelledby="requestDetailsModalLabel"
+ aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="requestDetailsModalLabel">Details of Requests</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ <div id="requestDetailsContent"></div>
+ </div>
+ <div class="modal-footer">
+ <div class="btn-group">
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary" id="approveButton">Approve</button>
+ <button type="button" class="btn btn-danger" id="rejectButton">Reject</button>
+ <button type="button" class="btn btn-warning" id="deleteButton">Delete</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+ let selectedHospitalId = null;
+
+ // 示例医院数据
+ const hospitalData = [
+ { id: 1, name: "Hospital 1", address: "Cardiff" },
+ { id: 2, name: "Hospital 2", address: "Cardiff" },
+ { id: 3, name: "Hospital 3", address: "Cardiff" },
+ { id: 4, name: "Hospital 4", address: "London" },
+ { id: 5, name: "Hospital 5", address: "London" },
+ { id: 6, name: "Hospital 6", address: "Manchester" },
+ { id: 7, name: "Hospital 7", address: "Bristol" },
+ { id: 8, name: "Hospital 8", address: "London" },
+ { id: 9, name: "Hospital 9", address: "Cardiff" },
+ { id: 10, name: "Hospital 10", address: "Cardiff" }
+ ];
+
+ let currentPage = 1;
+ const itemsPerPage = 5;
+
+ // 获取当前页面的医院数据
+ function getCurrentPageData(page) {
+ const startIndex = (page - 1) * itemsPerPage;
+ const endIndex = page * itemsPerPage;
+ return hospitalData.slice(startIndex, endIndex);
+ }
+
+ // 渲染表格数据
+ function renderTable(page) {
+ const currentData = getCurrentPageData(page);
+ const tableBody = document.getElementById('hospitalTableBody');
+ tableBody.innerHTML = '';
+
+ currentData.forEach(hospital => {
+ const row = document.createElement('tr');
+ row.innerHTML = `
+ <td>${hospital.name}</td>
+ <td>${hospital.address}</td>
+ <td>
+ <button class="btn btn-info" onclick="showRequestDetails(${hospital.id}, '${hospital.name}', '${hospital.address}')">Check Requests</button>
+ </td>
+ `;
+ tableBody.appendChild(row);
+ });
+ }
+
+ // 切换分页
+ function changePage(page) {
+ currentPage = page;
+ renderTable(currentPage);
+ updatePagination();
+ }
+
+ // 更新分页按钮状态
+ function updatePagination() {
+ const totalPages = Math.ceil(hospitalData.length / itemsPerPage);
+
+ document.getElementById('prevPageBtn').classList.toggle('disabled', currentPage === 1);
+ document.getElementById('nextPageBtn').classList.toggle('disabled', currentPage === totalPages);
+
+ // 更新分页按钮显示
+ const pageLinks = document.querySelectorAll('.pagination .page-item');
+ pageLinks.forEach(link =>{
+ const pageNumber = link.querySelector('a').textContent;
+ if (parseInt(pageNumber) === currentPage) {
+ link.classList.add('active');
+ } else {
+ link.classList.remove('active');
+ }
+ });
+ }
+
+ // 显示请求详细信息
+ function showRequestDetails(id, name, address) {
+ selectedHospitalId = id;
+ const requestDetailsContent = `
+ <h5>CH Name: ${name}</h5>
+ <p><strong>Address: </strong> ${address}</p>
+ <p><strong>State: </strong> Pending</p>
+ `;
+ document.getElementById('requestDetailsContent').innerHTML = requestDetailsContent;
+
+ // 显示模态框
+ const modal = new bootstrap.Modal(document.getElementById('requestDetailsModal'));
+ modal.show();
+
+ // 设置按钮功能
+ document.getElementById('approveButton').onclick = approveHospital;
+ document.getElementById('rejectButton').onclick = rejectHospital;
+ document.getElementById('deleteButton').onclick = deleteHospital;
+ }
+
+ // 批准医院
+ function approveHospital() {
+ alert('The Care Home has been approved!');
+ window.location.reload();
+ }
+
+ // 拒绝医院
+ function rejectHospital() {
+ alert('The Care Home has been rejected!');
+ window.location.reload();
+ }
+
+ // 删除医院
+ function deleteHospital() {
+ alert('The Care Home has been deleted!');
+ window.location.reload();
+ }
+
+ // 初始化表格和分页
+ renderTable(currentPage);
+ updatePagination();
+
+
+
+
+</script>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+
+</html>