Merge branch 'wyl' into 'main'

show data on page come true,update some logic

See merge request !21

build.gradle

@@ -24,6 +24,7 @@ repositories {
 }
 
 dependencies {
+    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
     implementation 'org.springframework.boot:spring-boot-starter-jdbc'
     implementation 'org.springframework.boot:spring-boot-starter-web'
     implementation 'org.springframework.boot:spring-boot-starter-security'

src/main/java/com/cardiff/client_project/config/WebSecurityConfig.java

@@ -2,10 +2,9 @@ package com.cardiff.client_project.config;
 
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.context.annotation.Bean;
-import org.springframework.context.annotation.Configuration;
 
-import org.springframework.security.authentication.BadCredentialsException;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
+import org.springframework.security.config.core.GrantedAuthorityDefaults;
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.security.web.SecurityFilterChain;
@@ -32,6 +31,15 @@ public class WebSecurityConfig{
         return new BCryptPasswordEncoder();
     }
 
+    /**
+     * Delete the default ROLE_ prefix
+     * @return
+     */
+    @Bean
+    public GrantedAuthorityDefaults grantedAuthorityDefaults(){
+        return new GrantedAuthorityDefaults("");
+    }
+
 
     /**
      * Set filter chain
@@ -45,6 +53,7 @@ public class WebSecurityConfig{
         http    .csrf(csrf-> csrf.disable())
                 .authorizeHttpRequests(requests -> requests
                         .requestMatchers("/device.html").hasRole("ADMIN")
+                        //.requestMatchers("/superAdminView.html").hasRole("SUPER")
                         .requestMatchers("/commonUser.html").authenticated()
                         .anyRequest().permitAll()
                 )

src/main/java/com/cardiff/client_project/controller/ViewController.java

+package com.cardiff.client_project.controller;
+
+import com.cardiff.client_project.service.SuperAdminService;
+import com.cardiff.client_project.utils.Result;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+
+
+
+@Controller
+public class ViewController {
+
+    @Autowired
+    private SuperAdminService superAdminService;
+
+    @GetMapping("/loadLeft")
+    public String loadLeftView() {
+
+        return "leftView";
+    }
+
+    @GetMapping("/defaultLoadMain")
+    public String loadMainView_1(Model model) {
+       Result result = superAdminService.selectAllAdmin();
+        // Add data to the model
+        model.addAttribute("tableData", result.getData());
+        return "mainSupAdminView";
+    }
+
+    @GetMapping("/hospitalLoadMain")
+    public String loadMainView_2(Model model) {
+        System.out.println("loadMainView_2");
+        Result result = superAdminService.selectAllHospital();
+        // Add data to the model
+        model.addAttribute("tableData", result.getData());
+        System.out.println("result"+result.getData());
+        return "mainHospitalView";
+    }
+}

src/main/java/com/cardiff/client_project/controller/admin/AdminController.java → src/main/java/com/cardiff/client_project/controller/admin/SuperAdminController.java

@@ -2,7 +2,7 @@ package com.cardiff.client_project.controller.admin;
 
 import com.cardiff.client_project.pojo.dto.SelectDTO;
 import com.cardiff.client_project.pojo.dto.SignUserDTO;
-import com.cardiff.client_project.service.AdminService;
+import com.cardiff.client_project.service.SuperAdminService;
 import com.cardiff.client_project.utils.Result;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
@@ -12,10 +12,10 @@ import java.util.List;
 
 @RestController
 @RequestMapping("/admin")
-public class AdminController {
+public class SuperAdminController {
 
     @Autowired
-    private AdminService adminService;
+    private SuperAdminService superAdminService;
 
     /**
      * User registration
@@ -25,7 +25,7 @@ public class AdminController {
     @PostMapping("/sign")
     public Result signIn(@RequestBody SignUserDTO signDTO){
         System.out.println(signDTO);
-        Result result=adminService.insertUserInform(signDTO);
+        Result result= superAdminService.insertUserInform(signDTO);
         return result;
     }
 
@@ -36,18 +36,7 @@ public class AdminController {
      */
     @DeleteMapping("/deleteById")
     public Result deleteById(@RequestBody List<Integer> ids){
-        Result result=adminService.deleteById(ids);
-        return result;
-    }
-
-    /**
-     * Query information based on type
-     * @param type
-     * @return
-     */
-    @GetMapping("/select/{type}")
-    public Result selectAll(@PathVariable String type){
-        Result result=adminService.selectAllByType(type);
+        Result result= superAdminService.deleteById(ids);
         return result;
     }
 
@@ -58,8 +47,8 @@ public class AdminController {
      */
     @GetMapping("/select")
     public Result selectByItem(@RequestBody SelectDTO selectDTO){
-
-        Result result=adminService.selectByItem(selectDTO);
+        System.out.println(selectDTO);
+        Result result= superAdminService.selectByItem(selectDTO);
         return result;
     }
 
@@ -71,7 +60,7 @@ public class AdminController {
      */
     @PutMapping("/update")
     public Result updateById(@RequestBody SelectDTO selectDTO){
-        Result result=adminService.update(selectDTO);
+        Result result= superAdminService.update(selectDTO);
         return result;
     }
 }

src/main/java/com/cardiff/client_project/mapper/AdminMapper.java

@@ -3,7 +3,9 @@ package com.cardiff.client_project.mapper;
 import com.cardiff.client_project.constant.ResponseCode;
 import com.cardiff.client_project.pojo.dto.SelectDTO;
 import com.cardiff.client_project.pojo.entity.CommonAdmin;
-import com.cardiff.client_project.pojo.vo.SelectVO;
+import com.cardiff.client_project.pojo.entity.Hospital;
+import com.cardiff.client_project.pojo.vo.AdminVO;
+
 import com.cardiff.client_project.utils.Result;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.jdbc.core.BeanPropertyRowMapper;
@@ -11,6 +13,7 @@ import org.springframework.jdbc.core.JdbcTemplate;
 import org.springframework.jdbc.core.simple.SimpleJdbcInsert;
 import org.springframework.stereotype.Repository;
 
+
 import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
@@ -74,27 +77,41 @@ public class AdminMapper {
         }
         // Batch delete
         int[] item = jdbcTemplate.batchUpdate(sql, idList);
+        String s;
+        s = "ALTER TABLE common_admin DROP COLUMN id;";
+        jdbcTemplate.update(s);
+        s= "ALTER TABLE common_admin ADD COLUMN id INT NOT NULL PRIMARY KEY AUTO_INCREMENT FIRST;";
+        jdbcTemplate.update(s);
+
         return item;
     }
 
-    public Result selectAllBytype(String type) {
-        String sql;
-        List<SelectVO> query = new ArrayList<>();
-        if ("commonAdmin".equals(type)) {
-            // Parameterized queries avoid SQL injection
-            sql = "SELECT * FROM common_admin WHERE type = ?";
-            query = jdbcTemplate.query(sql, new Object[]{"commonAdmin"}, new BeanPropertyRowMapper<>(SelectVO.class));
-        }
+    /**
+     * select admin
+     * @return
+     */
+    public  List<AdminVO> selectAllAdmin() {
 
-        if("patient".equals(type)){
-            sql = "SELECT * FROM patient WHERE type = ?";
-            query = jdbcTemplate.query(sql, new Object[]{"patient"}, new BeanPropertyRowMapper<>(SelectVO.class));
-        }
+        // Parameterized queries avoid SQL injection
+        String sql = "SELECT * FROM common_admin";
+        List<AdminVO> query = jdbcTemplate.query(sql,new BeanPropertyRowMapper<>(AdminVO.class));
+        return query;
+    }
 
+    /**
+     * select hospital
+     * @return
+     */
+    public List<Hospital> selectAllHospital(){
 
-        return Result.success(query);
+        // Parameterized queries avoid SQL injection
+        String sql = "SELECT * FROM hospital";
+        List<Hospital> query = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Hospital.class));
+        System.out.println(query);
+        return query;
     }
 
+
     /**
      * update data
      * @param commonAdmin
@@ -122,14 +139,8 @@ public class AdminMapper {
         String type = selectDTO.getType();
 
         // Build the basic SQL and parameter list
-        StringBuilder sql = new StringBuilder("SELECT * FROM ");
+        StringBuilder sql = new StringBuilder("SELECT * FROM common_admin ");
         //Dynamic table name stitching
-        if(type.equals("commonAdmin")){
-            sql.append("common_admin");
-        }
-        if(type.equals("patient")){
-            sql.append("patient");
-        }
         sql.append(" WHERE 1=1 ");
         List<Object> params = new ArrayList<>();
 

src/main/java/com/cardiff/client_project/pojo/entity/Hospital.java

+package com.cardiff.client_project.pojo.entity;
+
+
+import lombok.Data;
+import lombok.ToString;
+
+@Data
+@ToString
+public class Hospital {
+    private int id;
+    private String name;
+    private int amountPatient;
+    private int maxAmount;
+    private int patientId;
+    private int deviceId;
+    private String type;
+    private String address;
+    private String phone;
+    private int status;
+
+}

src/main/java/com/cardiff/client_project/pojo/vo/SelectVO.java → src/main/java/com/cardiff/client_project/pojo/vo/AdminVO.java

@@ -3,19 +3,15 @@ package com.cardiff.client_project.pojo.vo;
 import lombok.Data;
 import lombok.ToString;
 
-import java.util.Date;
-
 @Data
 @ToString
-public class SelectVO {
+public class AdminVO {
+
     private int id;
     private String name;
-    private String email;
+    private String password;
     private String phone;
-    private String address;
-    private String type;
-    private String role;
-    private String maxAmount;
+    private String email;
+    private String status_str;
     private int status;
-    private Date freetime;
 }

src/main/java/com/cardiff/client_project/pojo/vo/HospitalVO.java

+package com.cardiff.client_project.pojo.vo;
+
+import lombok.Data;
+import lombok.ToString;
+
+@Data
+@ToString
+public class HospitalVO {
+    private Integer id;
+    private String name;
+    private String address;
+    private String phone;
+    private int status;
+    private String status_str;
+    private int maxAmount;
+    private int amountPatient;
+}

src/main/java/com/cardiff/client_project/service/AdminService.java → src/main/java/com/cardiff/client_project/service/SuperAdminService.java

@@ -6,7 +6,7 @@ import com.cardiff.client_project.utils.Result;
 
 import java.util.List;
 
-public interface AdminService {
+public interface SuperAdminService {
     /**
      * User registration
      * @param signDTO
@@ -23,12 +23,16 @@ public interface AdminService {
     Result deleteById(List<Integer> ids);
 
     /**
-     * Query information based on type
-     * @param type
+     * Query admin information
      * @return
      */
-    Result selectAllByType(String type);
+    Result selectAllAdmin();
 
+    /**
+     * Query hospital information
+     * @return
+     */
+    Result selectAllHospital();
     /**
      * Update data
      * @param selectDTO

src/main/java/com/cardiff/client_project/service/imp/AdminServiceImp.java → src/main/java/com/cardiff/client_project/service/imp/SuperAdminServiceImp.java

@@ -8,18 +8,23 @@ import com.cardiff.client_project.mapper.PatientMapper;
 import com.cardiff.client_project.pojo.dto.SelectDTO;
 import com.cardiff.client_project.pojo.dto.SignUserDTO;
 import com.cardiff.client_project.pojo.entity.CommonAdmin;
+import com.cardiff.client_project.pojo.entity.Hospital;
 import com.cardiff.client_project.pojo.entity.Patient;
-import com.cardiff.client_project.service.AdminService;
+import com.cardiff.client_project.pojo.vo.AdminVO;
+
+import com.cardiff.client_project.pojo.vo.HospitalVO;
+import com.cardiff.client_project.service.SuperAdminService;
 import com.cardiff.client_project.utils.Result;
 import org.springframework.beans.BeanUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.stereotype.Service;
 
+import java.util.ArrayList;
 import java.util.List;
 
 @Service
-public class AdminServiceImp implements AdminService {
+public class SuperAdminServiceImp implements SuperAdminService {
 
     @Autowired
     private AdminMapper adminMapper;
@@ -62,14 +67,58 @@ public class AdminServiceImp implements AdminService {
 
 
     /**
-     * Query information based on type
-     * @param type
+     * Query admin information
      * @return
      */
     @Override
-    public Result selectAllByType(String type) {
-        Result result = adminMapper.selectAllBytype(type);
-        return result;
+    public Result selectAllAdmin() {
+        List<AdminVO> selectVOS = adminMapper.selectAllAdmin();
+
+        List<AdminVO> adminVOS=new ArrayList<>();
+        selectVOS.forEach(selectVO -> {
+            AdminVO adminVO = new AdminVO();
+            BeanUtils.copyProperties(selectVO, adminVO);  // Copy properties from selectVO to adminVO
+
+            // Set the corresponding status string according to status
+            if (adminVO.getStatus() == 1) {
+                adminVO.setStatus_str("ACTIVE");
+            }
+            if (adminVO.getStatus() == 0) {
+                adminVO.setStatus_str("INACTIVE");
+            }
+            // Added to the adminVOS list
+            adminVOS.add(adminVO);
+        });
+        return Result.success(adminVOS);
+
+    }
+
+
+    /**
+     * Query hospital information
+     * @return
+     */
+    @Override
+    public Result selectAllHospital() {
+        System.out.println("service");
+        List<Hospital> hospitals = adminMapper.selectAllHospital();
+        System.out.println(hospitals);
+        List<HospitalVO> hospitalVOS =new ArrayList<>();
+        hospitals.forEach(select -> {
+            HospitalVO hospitalVO = new HospitalVO();
+            BeanUtils.copyProperties(select, hospitalVO);  // Copy properties from selectVO to adminVO
+
+            // Set the corresponding status string according to status
+            if (hospitalVO.getStatus() == 1) {
+                hospitalVO.setStatus_str("ACTIVE");
+            }
+            if (hospitalVO.getStatus() == 0) {
+                hospitalVO.setStatus_str("INACTIVE");
+            }
+            // Added to the hospitalVOS list
+            hospitalVOS.add(hospitalVO);
+        });
+        return Result.success(hospitalVOS);
     }
 
     /**
@@ -83,7 +132,7 @@ public class AdminServiceImp implements AdminService {
         if(selectDTO.getType().equals("commonAdmin")){
             CommonAdmin commonAdmin = new CommonAdmin();
             BeanUtils.copyProperties(selectDTO,commonAdmin);
-             update = adminMapper.update(commonAdmin);
+            update = adminMapper.update(commonAdmin);
         }
         if(selectDTO.getType().equals("patient")){
             Patient patient = new Patient();
@@ -114,3 +163,4 @@ public class AdminServiceImp implements AdminService {
         }
     }
 }
+

src/main/resources/application.yml

@@ -7,4 +7,9 @@ spring:
     url: ${healthcare.datasource.url}
     username: ${healthcare.datasource.username}
     password: ${healthcare.datasource.password}
-    port: ${healthcare.datasource.port}
\ No newline at end of file
+    port: ${healthcare.datasource.port}
+  thymeleaf:
+    prefix: classpath:/templates/
+    suffix: .html
+    enabled: true
+    cache: false
\ No newline at end of file

src/main/resources/static/css/mainSupAdminView.css

+/* Toolbar Style */
+#toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start; /* Align to the left */
+    background-color: #ffffff; /* Toolbar background color */
+    padding: 15px 20px; /* Add padding */
+    border-radius: 8px; /* Rounded corners */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
+    margin: 20px auto; /* Center align */
+    max-width: 1500px; /* Toolbar width */
+}
+
+/* Label Style */
+label {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333333; /* Label text color */
+    margin-right: 10px; /* Space between label and input field */
+}
+
+/* Common Input Field Style */
+.searchBox {
+    flex: 1; /* Input field occupies remaining space */
+    padding: 10px;
+    border: 1px solid #dddddd;
+    border-radius: 5px;
+    margin-right: 20px; /* Space between input field and button */
+    font-size: 16px;
+    background-color: #fafafa; /* Input field background color */
+    transition: all 0.3s ease; /* Transition animation */
+}
+
+/* Focus Effect for Input Fields */
+.searchBox:focus {
+    outline: none;
+    border-color: #007bff; /* Focus border color */
+    background-color: #ffffff; /* Focus background color */
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Focus shadow */
+}
+
+/* Common Button Style */
+button {
+    margin-right: 15px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.3s ease; /* Transition animation */
+}
+
+/* Search Button Style */
+#searchButton {
+    background-color: #007bff; /* Button color */
+    color: white;
+}
+
+#searchButton:hover {
+    background-color: #0056b3; /* Button color on hover */
+}
+
+/* Add Button Style */
+#resetButton {
+    background-color: #28a745; /* Button color */
+    color: white;
+}
+
+#resetButton:hover {
+    background-color: #218838; /* Button color on hover */
+}
+
+/* Dropdown Style */
+.searchBox {
+    flex: 1; /* Occupies remaining space */
+    padding: 10px;
+    border: 1px solid #dddddd;
+    border-radius: 5px;
+    font-size: 16px;
+    margin-right: 20px; /* Space between dropdown and button */
+    background-color: #fafafa;
+    appearance: none; /* Remove default style */
+}
+
+/* Table Container Style */
+table {
+    width: 100%;
+    border-collapse: collapse; /* Remove space between cells */
+    margin-top: 20px; /* Space between table and content above */
+    border-radius: 8px; /* Rounded corners for the table */
+    overflow: hidden; /* Ensure rounded corners are not covered by content */
+}
+
+/* Table Header Style */
+th {
+    background-color: #007bff; /* Header background color */
+    color: white; /* Header text color */
+    padding: 12px 15px; /* Header padding */
+    font-size: 16px; /* Header text size */
+    text-align: left; /* Left alignment */
+}
+
+/* Table Cell Style */
+td {
+    padding: 12px 15px; /* Cell padding */
+    font-size: 14px; /* Cell text size */
+    color: #333333; /* Cell text color */
+    border-bottom: 1px solid #ddd; /* Cell bottom border */
+}
+
+/* Alternating Row Background Colors */
+tr:nth-child(even) {
+    background-color: #f9f9f9; /* Background color for even rows */
+}
+
+/* Row Hover Effect */
+tr:hover {
+    background-color: #f1f1f1; /* Background color on hover */
+}
+
+/* Overall Table Style */
+table, th, td {
+    border: 1px solid #ddd; /* Table border */
+}
+
+/* Add Shadow and Rounded Corner Effect */
+table {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Table shadow */
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    #toolbar {
+        flex-direction: column; /* Vertical arrangement */
+        align-items: stretch; /* Adjust child elements to fit parent container width */
+    }
+
+    .searchBox {
+        margin-right: 0;
+        margin-bottom: 10px;
+    }
+
+    button {
+        width: 100%; /* Button width adapts */
+        margin-bottom: 10px;
+    }
+
+    table {
+        font-size: 14px; /* Adjust font size on smaller devices */
+    }
+
+    th, td {
+        padding: 8px 10px; /* Reduce cell padding on smaller devices */
+    }
+}

src/main/resources/static/css/style.css

+/* 设置导航项的样式 */
+.nav-item {
+    background-color: #93a5e7;
+    color: white;
+    padding: 15px;
+    text-align: center;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    font-size: 18px;
+    font-weight: bold;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+/* 鼠标悬停时的效果 */
+.nav-item:hover {
+    background-color: #555;
+    transform: scale(1.05);/* Magnification effect */
+}
\ No newline at end of file

src/main/resources/static/html/login.html

@@ -151,7 +151,7 @@
                     console.log(data.msg);
                     var type = data.msg;
                     if (type == "[" + "SUPER" + "]") {
-                      window.location.href = "superAdmin.html";
+                      window.location.href = "superAdminView.html";
                     }
                     alert("login success");
                   }

src/main/resources/static/html/superAdmin.html

-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-    超级管理者
-</body>
-</html>
\ No newline at end of file

src/main/resources/static/html/superAdminView.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <style>
+        body{
+            background-image:url("/img/backpicture.jpg");
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+        }
+        #leftview {
+            background-color: #0056b3;
+            border-radius: 10px;
+            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Dark shadow effect */
+            padding: 10px;
+        }
+    </style>
+</head>
+<body>
+
+<div id="container" style="display: flex; flex-direction: column; height: 100vh;">
+    <!-- top area -->
+    <div id="top" style="background-color: black; height: 10vh; width: 100%"></div>
+
+    <!-- main block，left and right -->
+    <div style="display: flex; height: 80vh;">
+        <!-- left area -->
+        <div  style="display: flex; flex-direction: column; padding: 10px;">
+            <div id="leftview"></div>
+        </div>
+
+        <!-- right area -->
+        <div  style="width: 80%; background-color: lightblue;">
+            <div id="mainview" style="filter: opacity(90%);" ></div>
+        </div>
+    </div>
+</div>
+
+</body>
+<script>
+    $(document).ready(function (){
+        $('#leftview').load("/loadLeft");
+        // Gets the parameters in the URL
+        const urlParams = new URLSearchParams(window.location.search);
+
+        const type = urlParams.get('type');
+        if(type==null){
+            $('#mainview').load("/defaultLoadMain");
+        }
+
+        if(type=="commonAdmin"){
+            $('#mainview').load("/defaultLoadMain");
+        }
+        if(type=="hospital"){
+            $('#mainview').load("/hospitalLoadMain");
+        }
+
+    })
+</script>
+</html>
\ No newline at end of file

src/main/resources/templates/leftView.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="/css/style.css">
+</head>
+
+<body>
+<!-- Vertical navigation bar -->
+<div class="nav-item" onclick="chooseAdmin()">CommonAdmin</div>
+<div class="nav-item" onclick="chooseHospital()">Hospital</div>
+</body>
+<script>
+    function chooseAdmin(){
+        window.location.href="/superAdminView.html?type=commonAdmin"
+    }
+    function chooseHospital(){
+        window.location.href="/superAdminView.html?type=hospital"
+    }
+</script>
+</html>

src/main/resources/templates/mainHospitalView.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="/css/mainSupAdminView.css">
+
+</head>
+<body>
+<div id="toolbar">
+    <label for="searchName">Name</label>
+    <input type="text" class="searchBox" id="searchName" placeholder="type name..." />
+    <label for="searchAddress">Address</label>
+    <input type="text" class="searchBox" id="searchAddress" placeholder="type address..." />
+    <label for="searchPhone">Phone</label>
+    <input type="text" class="searchBox" id="searchPhone" placeholder="type phone..." />
+    <select class="searchBox" id="searchStatus">
+        <option value="" disabled selected>choose status</option>
+        <option value="active">Active</option>
+        <option value="inactive">Inactive</option>
+    </select>
+    <button id="searchButton">Confirm</button>
+    <button id="resetButton">Add</button>
+</div>
+
+<div>
+    <table>
+        <thead>
+        <tr>
+            <th>ID</th>
+            <th>NAME</th>
+            <th>PHONE</th>
+            <th>ADDRESS</th>
+            <th>MAX</th>
+            <th>NOW</th>
+            <th>STATUS</th>
+        </tr>
+        </thead>
+        <tbody>
+        <!-- Ergodic set -->
+        <tr th:each="row : ${tableData}">
+            <td th:text="${row['id']}"></td>
+            <td th:text="${row['name']}"></td>
+            <td th:text="${row['phone']}"></td>
+            <td th:text="${row['address']}"></td>
+            <td th:text="${row['maxAmount']}"></td>
+            <td th:text="${row['amountPatient']}"></td>
+            <td th:text="${row['status_str']}"></td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+
+<script th:inline="javascript">
+
+</script>
+</body>
+</html>

src/main/resources/templates/mainSupAdminView.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="/css/mainSupAdminView.css">
+
+</head>
+<body>
+<div id="toolbar">
+    <label for="searchName">Name</label>
+    <input type="text" class="searchBox" id="searchName" placeholder="type name..." />
+    <label for="searchAddress">Address</label>
+    <input type="text" class="searchBox" id="searchAddress" placeholder="type address..." />
+    <label for="searchPhone">Phone</label>
+    <input type="text" class="searchBox" id="searchPhone" placeholder="type phone..." />
+    <select class="searchBox" id="searchStatus">
+        <option value="" disabled selected>choose status</option>
+        <option value="active">Active</option>
+        <option value="inactive">Inactive</option>
+    </select>
+    <button id="searchButton">Confirm</button>
+    <button id="resetButton">Add</button>
+</div>
+
+<div>
+    <table>
+        <thead>
+        <tr>
+            <th>ID</th>
+            <th>NAME</th>
+            <th>PHONE</th>
+            <th>EMAIL</th>
+            <th>STATUS</th>
+        </tr>
+        </thead>
+        <tbody>
+        <!-- Ergodic set -->
+        <tr th:each="row : ${tableData}">
+            <td th:text="${row['id']}"></td>
+            <td th:text="${row['name']}"></td>
+            <td th:text="${row['phone']}"></td>
+            <td th:text="${row['email']}"></td>
+            <td th:text="${row['status_str']}"></td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+
+<script th:inline="javascript">
+
+</script>
+</body>
+</html>