Merge remote-tracking branch 'origin/main'

# Conflicts:
#	src/main/java/com/cardiff/client_project/pojo/dto/HospitalDTO.java

health_care.sql → healthcare.sql

@@ -11,28 +11,12 @@
  Target Server Version : 80031
  File Encoding         : 65001
 
- Date: 26/11/2024 14:50:12
+ Date: 09/12/2024 10:09:27
 */
 
 SET NAMES utf8mb4;
 SET FOREIGN_KEY_CHECKS = 0;
--- ----------------------------
--- Available beds
--- ----------------------------
-SELECT
-    id AS hospital_id,
-    name AS hospital_name,
-    address AS location,
-    phone,
-    maxAmount AS total_beds,
-    (maxAmount - amountPatient) AS available_beds
-FROM
-    hospital
-WHERE
-    status = 1
-  AND (maxAmount - amountPatient) > 0
-ORDER BY
-    available_beds DESC;
+
 -- ----------------------------
 -- Table structure for common_admin
 -- ----------------------------
@@ -52,8 +36,9 @@ CREATE TABLE `common_admin`  (
 -- ----------------------------
 -- Records of common_admin
 -- ----------------------------
-INSERT INTO `common_admin` VALUES (1, '264978365@qq.com', '$2a$10$5UzuKUxgR8H0RzLYrP.BUu8.76yKwMD4XkvJIu/xxB7AAHWfphFQm', 'commonAdmin', 1, '22222', 'jjy', 1);
-INSERT INTO `common_admin` VALUES (2, '26497@qq.com', '$2a$10$4uTgtSP1B6TLvKUicCuA0.lGwDKfNxtF2vJTXqX4WfekNa5C9Ny4u', 'commonAdmin', 1, '111', 'test', 1);
+INSERT INTO `common_admin` VALUES (1, '26497@qq.com', '$2a$10$5UzuKUxgR8H0RzLYrP.BUu8.76yKwMD4XkvJIu/xxB7AAHWfphFQm', 'commonAdmin', 1, '111', 'justnoww', 1);
+INSERT INTO `common_admin` VALUES (2, '1234@qq.com', '$2a$10$iW/zeL9TLq55SHFaOfyfr.xFMvB4aD3CL2layeAlGC7CqZ9kcscA.', 'commonAdmin', 1, '123', 'BAa', 1);
+INSERT INTO `common_admin` VALUES (3, '123cmy@qq.com', '$2a$10$u2KxNBaHuTVwX7KudUgyNelp8j2lymarXKkkUXfWBMRAgbPNryTuW', 'commonAdmin', 1, '123', 'cmy', 1);
 
 -- ----------------------------
 -- Table structure for device
@@ -61,15 +46,21 @@ INSERT INTO `common_admin` VALUES (2, '26497@qq.com', '$2a$10$4uTgtSP1B6TLvKUicC
 DROP TABLE IF EXISTS `device`;
 CREATE TABLE `device`  (
   `id` int NOT NULL AUTO_INCREMENT,
+  `hospitalId` int NULL DEFAULT NULL,
   `name` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
   `type` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
-  `freetime` datetime NULL DEFAULT NULL,
+  `freeTime` datetime NULL DEFAULT NULL,
   PRIMARY KEY (`id`) USING BTREE
-) ENGINE = InnoDB CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;
+) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = DYNAMIC;
 
 -- ----------------------------
 -- Records of device
 -- ----------------------------
+INSERT INTO `device` VALUES (1, 0, 'bed1', 'bed', '2024-12-02 09:51:12');
+INSERT INTO `device` VALUES (2, 2, 'bed2', 'bed', '2024-12-03 09:30:00');
+INSERT INTO `device` VALUES (3, 2, 'bed3', 'bed', '2025-12-05 10:30:35');
+INSERT INTO `device` VALUES (4, 2, 'instrument1', 'instrument', '2024-12-05 07:15:59');
+INSERT INTO `device` VALUES (5, 2, 'instrument5', 'instrument', '2024-12-05 10:30:00');
 
 -- ----------------------------
 -- Table structure for hospital
@@ -86,16 +77,18 @@ CREATE TABLE `hospital`  (
   `status` int NULL DEFAULT NULL,
   `roleId` int NULL DEFAULT NULL,
   `email` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
+  `password` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
+  `patientId` int NULL DEFAULT NULL,
+  `deviceId` int NULL DEFAULT NULL,
   PRIMARY KEY (`id`) USING BTREE
-) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;
+) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;
 
 -- ----------------------------
 -- Records of hospital
 -- ----------------------------
-INSERT INTO `hospital` VALUES (1, 'jjy', 100, 300, 'hospital', 'Cardiffe', '22222', 0, 3, '264978365@qq.com');
-INSERT INTO `hospital` VALUES (2, 'park00000', 5, 10, 'hospital', 'cardiff', '1234', 0, 3, '2649783657@qq.com');
-INSERT INTO `hospital` VALUES (3, 'test', 0, 0, 'hospital', 'cardiff', '123', 0, 3, '264@qq.com');
-INSERT INTO `hospital` VALUES (4, 'ttttttt', 0, 0, 'hospital', 'cardiff', '123', 0, 3, '26492@qq.com');
+INSERT INTO `hospital` VALUES (1, 'hospital0', 3, 100, 'hospital', 'road', '145267', 1, 3, 'agag', '$2a$10$wvAZoj4V51MH/MLhVIrnG.NrY07/.Gn9Ar6JsyzRAubWtqbWzgKie', 0, 0);
+INSERT INTO `hospital` VALUES (2, 'hospital1', 5, 200, 'hospital', 'beijing', '6371', 1, 3, 'soga', '$2a$10$wvAZoj4V51MH/MLhVIrnG.NrY07/.Gn9Ar6JsyzRAubWtqbWzgKie', 0, 0);
+INSERT INTO `hospital` VALUES (3, 'hospital2', 10, 50, 'hospital', 'cardiff', '123', 1, 3, 'hospital2@qq.com', '$2a$10$wvAZoj4V51MH/MLhVIrnG.NrY07/.Gn9Ar6JsyzRAubWtqbWzgKie', 0, 0);
 
 -- ----------------------------
 -- Table structure for hospital_device
@@ -110,6 +103,32 @@ CREATE TABLE `hospital_device`  (
 -- Records of hospital_device
 -- ----------------------------
 
+-- ----------------------------
+-- Table structure for nurse
+-- ----------------------------
+DROP TABLE IF EXISTS `nurse`;
+CREATE TABLE `nurse`  (
+  `id` int NOT NULL AUTO_INCREMENT,
+  `name` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
+  `status` int NULL DEFAULT NULL,
+  `hospitalId` int NULL DEFAULT NULL,
+  `type` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
+  `age` int NULL DEFAULT NULL,
+  `phone` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
+  `email` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
+  `address` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
+  PRIMARY KEY (`id`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = DYNAMIC;
+
+-- ----------------------------
+-- Records of nurse
+-- ----------------------------
+INSERT INTO `nurse` VALUES (1, 'nn', 0, 2, 'nurse', 23, '111', '23453', 'Cardiff');
+INSERT INTO `nurse` VALUES (2, 'Li Xiaoming', 1, 2, 'nurse', 25, '222', '4399', 'Cardiff');
+INSERT INTO `nurse` VALUES (3, 'Sun Hao', 1, 0, 'nurse', 24, '123', '23576', 'Bute');
+INSERT INTO `nurse` VALUES (4, 'Wang Xiaoming', 0, 2, 'nurse', 26, '333', '34578', 'Cardiff');
+INSERT INTO `nurse` VALUES (5, 'Tian Hao', 0, 2, 'nurse', 30, '321', '24353', 'Cardiff');
+
 -- ----------------------------
 -- Table structure for patient
 -- ----------------------------
@@ -126,12 +145,16 @@ CREATE TABLE `patient`  (
   `phone` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
   `email` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL,
   PRIMARY KEY (`id`) USING BTREE
-) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;
+) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = DYNAMIC;
 
 -- ----------------------------
 -- Records of patient
 -- ----------------------------
-INSERT INTO `patient` VALUES (1, 'jyy', '$2a$10$obgmyiqAuhIkBjuw3bROr.LkCh.Nb70e4dL8lwKjSsPxS8gSpQxSC', 2, 0, 0, 'patient', 0, NULL, NULL);
+INSERT INTO `patient` VALUES (1, 'Li Ming', '$2a$10$obgmyiqAuhIkBjuw3bROr.LkCh.Nb70e4dL8lwKjSsPxS8gSpQxSC', 2, 1, 0, 'patient', 20, '135', 'wwgwg@outlook.com');
+INSERT INTO `patient` VALUES (2, 'Li Hua', '$2a$10$obgmyiqAuhIkBjuw3bROr.LkCh.Nb70e4dL8lwKjSsPxS8gSpQxSC', 2, 0, 0, 'patient', 21, '166', 'ss@qq.com');
+INSERT INTO `patient` VALUES (3, 'Huang Li', '$2a$10$obgmyiqAuhIkBjuw3bROr.LkCh.Nb70e4dL8lwKjSsPxS8gSpQxSC', 2, 0, 0, 'patient', 13, '111', '22@qq.com');
+INSERT INTO `patient` VALUES (4, 'Xia Ming', '$2a$10$obgmyiqAuhIkBjuw3bROr.LkCh.Nb70e4dL8lwKjSsPxS8gSpQxSC', 2, 1, 2, 'patient', 61, '15', '131@qq.com');
+INSERT INTO `patient` VALUES (5, 'Xia Yu', '$2a$10$obgmyiqAuhIkBjuw3bROr.LkCh.Nb70e4dL8lwKjSsPxS8gSpQxSC', 2, 1, 2, 'patient', 33, '14315', 'xx@qq.com');
 
 -- ----------------------------
 -- Table structure for patient_hospital
@@ -173,7 +196,7 @@ CREATE TABLE `super_admin`  (
   `password` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NOT NULL,
   `roleId` int NULL DEFAULT NULL,
   PRIMARY KEY (`id`) USING BTREE
-) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;
+) ENGINE = InnoDB AUTO_INCREMENT = 2 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;
 
 -- ----------------------------
 -- Records of super_admin

src/main/java/com/cardiff/client_project/controller/nursinghome/NursingHomeController.java

+package com.cardiff.client_project.controller.nursinghome;
+
+import com.cardiff.client_project.pojo.dto.HospitalDTO;
+import com.cardiff.client_project.service.NursingHomeService;
+import com.cardiff.client_project.utils.Result;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/hospitals")
+@CrossOrigin(origins = "*")
+public class NursingHomeController {
+
+    @Autowired
+    private NursingHomeService nursingHomeService;
+
+    // READ - Get available beds
+    @GetMapping("/available")
+    public Result<List<HospitalDTO>> getAvailableBeds() {
+        try {
+            return nursingHomeService.getAvailableBeds();
+        } catch (Exception e) {
+            return Result.error("Error fetching available beds: " + e.getMessage());
+        }
+    }
+
+    // CREATE - Add new hospital/bed data
+    @PostMapping
+    public Result<HospitalDTO> addHospital(@RequestBody HospitalDTO hospitalDTO) {
+        try {
+            return nursingHomeService.insertPatientInfo(hospitalDTO);
+        } catch (Exception e) {
+            return Result.error("Error adding hospital: " + e.getMessage());
+        }
+    }
+
+    // UPDATE - Update bed count
+    @PutMapping("/{hospitalId}/beds")
+    public Result<String> updateBedCount(
+            @PathVariable int hospitalId,
+            @RequestParam int currentPatients) {
+        try {
+            return nursingHomeService.updateBedCount(hospitalId, currentPatients);
+        } catch (Exception e) {
+            return Result.error("Error updating bed count: " + e.getMessage());
+        }
+    }
+
+    // DELETE - Delete hospital record
+    @DeleteMapping("/{id}")
+    public Result<String> deleteHospital(@PathVariable int id) {
+        try {
+            List<Integer> ids = List.of(id);
+            return nursingHomeService.deletePatientById(ids);
+        } catch (Exception e) {
+            return Result.error("Error deleting hospital: " + e.getMessage());
+        }
+    }
+}

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

+package com.cardiff.client_project.mapper;
+
+import com.cardiff.client_project.pojo.dto.HospitalDTO;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Repository
+public class NursingHomeMapper {
+
+    @Autowired
+    private JdbcTemplate jdbcTemplate;
+
+    public List<HospitalDTO> findAllNursingHomes() {
+        String sql = """
+            SELECT 
+                id,
+                name,
+                address,
+                phone,
+                maxAmount,
+                amountPatient,
+                status
+            FROM hospital 
+            WHERE status = 1
+        """;
+
+        return jdbcTemplate.query(sql, (rs, rowNum) -> {
+            HospitalDTO dto = new HospitalDTO();
+            dto.setId(rs.getInt("id"));
+            dto.setName(rs.getString("name"));
+            dto.setLocation(rs.getString("address"));
+            dto.setPhone(rs.getString("phone"));
+            dto.setTotalBeds(rs.getInt("maxAmount"));
+            int maxAmount = rs.getInt("maxAmount");
+            int amountPatient = rs.getInt("amountPatient");
+            dto.setAvailableBeds(maxAmount - amountPatient);
+            dto.setOccupancyRate(calculateOccupancy(maxAmount, amountPatient));
+            return dto;
+        });
+    }
+
+    private double calculateOccupancy(int maxAmount, int amountPatient) {
+        return maxAmount > 0 ? ((double) amountPatient / maxAmount) * 100 : 0;
+    }
+
+    public int insertHospital(HospitalDTO dto) {
+        String sql = """
+            INSERT INTO hospital (
+                name, 
+                address,
+                phone,
+                maxAmount,
+                amountPatient,
+                status,
+                type,
+                roleId
+            ) VALUES (?, ?, ?, ?, ?, 1, 'hospital', 3)
+        """;
+
+        return jdbcTemplate.update(sql,
+            dto.getName(),
+            dto.getLocation(),
+            dto.getPhone(),
+            dto.getTotalBeds(),
+            dto.getTotalBeds() - dto.getAvailableBeds()
+        );
+    }
+
+    public int updateHospital(HospitalDTO dto) {
+        String sql = """
+            UPDATE hospital 
+            SET 
+                name = ?,
+                address = ?,
+                phone = ?,
+                maxAmount = ?,
+                amountPatient = ?
+            WHERE id = ? AND status = 1
+        """;
+
+        return jdbcTemplate.update(sql,
+            dto.getName(),
+            dto.getLocation(),
+            dto.getPhone(),
+            dto.getTotalBeds(),
+            dto.getTotalBeds() - dto.getAvailableBeds(),
+            dto.getId()
+        );
+    }
+
+    public int[] deleteHospitalByIds(List<Integer> ids) {
+        String sql = "UPDATE hospital SET status = 0 WHERE id = ?";
+        List<Object[]> params = ids.stream()
+            .map(id -> new Object[]{id})
+            .toList();
+        return jdbcTemplate.batchUpdate(sql, params);
+    }
+
+    public int updateBedCount(int hospitalId, int currentPatients) {
+        String sql = """
+            UPDATE hospital 
+            SET amountPatient = ?
+            WHERE id = ? AND maxAmount >= ? AND status = 1
+        """;
+        return jdbcTemplate.update(sql, currentPatients, hospitalId, currentPatients);
+    }
+}
\ No newline at end of file

src/main/java/com/cardiff/client_project/pojo/dto/HospitalDTO.java

@@ -6,6 +6,7 @@ import lombok.Data;
 public class HospitalDTO {
     private int id;
     private String name;
+    private String location;
     private String address;
     private String phone;
     private int totalBeds;

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

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

src/main/java/com/cardiff/client_project/service/NursingHomeService.java

+package com.cardiff.client_project.service;
+
+import com.cardiff.client_project.pojo.dto.HospitalDTO;
+import com.cardiff.client_project.utils.Result;
+import java.util.List;
+
+public interface NursingHomeService {
+    Result<List<HospitalDTO>> getAvailableBeds();
+    Result<HospitalDTO> insertPatientInfo(HospitalDTO hospitalDTO);
+    Result<String> updatePatient(HospitalDTO hospitalDTO);
+    Result<String> deletePatientById(List<Integer> ids);
+    Result<List<HospitalDTO>> getAllPatients();
+    Result<String> updateBedCount(int hospitalId, int currentPatients);
+}
\ No newline at end of file

src/main/java/com/cardiff/client_project/service/imp/NursingHomeServiceImp.java

+package com.cardiff.client_project.service.imp;
+
+import com.cardiff.client_project.mapper.NursingHomeMapper;
+import com.cardiff.client_project.pojo.dto.HospitalDTO;
+import com.cardiff.client_project.service.NursingHomeService;
+import com.cardiff.client_project.utils.Result;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.dao.DataAccessException;
+
+import java.util.List;
+
+@Service
+public class NursingHomeServiceImp implements NursingHomeService {
+
+    @Autowired
+    private NursingHomeMapper nursingHomeMapper;
+
+    @Override
+    public Result<List<HospitalDTO>> getAvailableBeds() {
+        try {
+            List<HospitalDTO> hospitals = nursingHomeMapper.findAllNursingHomes();
+            if (hospitals == null || hospitals.isEmpty()) {
+                return Result.error("No hospitals available");
+            }
+            return Result.success(hospitals);
+        } catch (DataAccessException e) {
+            return Result.error("Database error: " + e.getMessage());
+        } catch (Exception e) {
+            return Result.error("Internal server error");
+        }
+    }
+
+    @Override
+    public Result<HospitalDTO> insertPatientInfo(HospitalDTO hospitalDTO) {
+        try {
+            if (!validateHospitalData(hospitalDTO)) {
+                return Result.error("Invalid hospital data");
+            }
+            int result = nursingHomeMapper.insertHospital(hospitalDTO);
+            if (result > 0) {
+                return Result.success(hospitalDTO);
+            }
+            return Result.error("Failed to insert hospital");
+        } catch (DataAccessException e) {
+            return Result.error("Database error: " + e.getMessage());
+        } catch (Exception e) {
+            return Result.error("Internal server error");
+        }
+    }
+
+    @Override
+    public Result<String> updatePatient(HospitalDTO hospitalDTO) {
+        try {
+            if (!validateHospitalData(hospitalDTO)) {
+                return Result.error("Invalid hospital data");
+            }
+            int result = nursingHomeMapper.updateHospital(hospitalDTO);
+            return result > 0 ? 
+                Result.success("Hospital updated successfully") :
+                Result.error("Failed to update hospital");
+        } catch (Exception e) {
+            return Result.error("Error updating hospital: " + e.getMessage());
+        }
+    }
+
+    @Override
+    public Result<String> deletePatientById(List<Integer> ids) {
+        try {
+            int[] results = nursingHomeMapper.deleteHospitalByIds(ids);
+            return results.length > 0 ? 
+                Result.success("Hospital deleted successfully") :
+                Result.error("No hospitals were deleted");
+        } catch (Exception e) {
+            return Result.error("Error deleting hospital: " + e.getMessage());
+        }
+    }
+
+    @Override
+    public Result<List<HospitalDTO>> getAllPatients() {
+        return getAvailableBeds();
+    }
+
+    @Override
+    public Result<String> updateBedCount(int hospitalId, int currentPatients) {
+        try {
+            if (currentPatients < 0) {
+                return Result.error("Patient count cannot be negative");
+            }
+            int result = nursingHomeMapper.updateBedCount(hospitalId, currentPatients);
+            return result > 0 ? 
+                Result.success("Bed count updated successfully") :
+                Result.error("Failed to update bed count");
+        } catch (Exception e) {
+            return Result.error("Error updating bed count: " + e.getMessage());
+        }
+    }
+
+    private boolean validateHospitalData(HospitalDTO hospitalDTO) {
+        if (hospitalDTO == null) return false;
+        return hospitalDTO.getName() != null &&
+               !hospitalDTO.getName().trim().isEmpty() &&
+               hospitalDTO.getLocation() != null &&
+               !hospitalDTO.getLocation().trim().isEmpty() &&
+               hospitalDTO.getPhone() != null &&
+               !hospitalDTO.getPhone().trim().isEmpty() &&
+               hospitalDTO.getTotalBeds() > 0 &&
+               hospitalDTO.getAvailableBeds() >= 0 &&
+               hospitalDTO.getAvailableBeds() <= hospitalDTO.getTotalBeds();
+    }
+}
\ No newline at end of file

src/main/resources/application-dev.yml

 healthcare:
   datasource:
-    url: jdbc:mysql://localhost:3306/health_care
+    url: jdbc:mysql://localhost:3306/healthcare
     port: 3306
     username: root
     password: root
\ No newline at end of file

src/main/resources/static/css/beds.css

 /* Base Styles */
+:root {
+    --primary-color: #1f2937;
+    --secondary-color: #3b82f6;
+    --background-color: #f3f4f6;
+    --text-color: #1f2937;
+    --border-color: #e5e7eb;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --danger-color: #ef4444;
+}
+
 body {
     font-family: 'Poppins', sans-serif;
     margin: 0;
     padding: 0;
-    background: linear-gradient(135deg, #f6f8fd 0%, #f1f4f9 100%);
-    color: #2c3e50;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    line-height: 1.5;
 }
 
 /* Header Styling */
 header {
-    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
+    background: var(--primary-color);
     color: white;
-    text-align: center;
-    padding: 2rem 0;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+    border-radius: 10px;
     margin-bottom: 2rem;
+    text-align: center;
 }
 
 header h1 {
-    font-size: 2.5rem;
     margin: 0;
+    font-size: 2rem;
     font-weight: 600;
-    letter-spacing: 0.5px;
 }
 
 header p {
-    font-size: 1.1rem;
     margin-top: 0.5rem;
     opacity: 0.9;
 }
 
 /* Main Container */
 .main-container {
-    max-width: 1400px;
+    max-width: 1200px;
     margin: 0 auto;
-    padding: 0 2rem;
+    padding: 2rem;
 }
 
 /* Toolbar Section */
@@ -50,6 +60,15 @@ header p {
     flex-wrap: wrap;
 }
 
+.toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
 .searchBox {
     padding: 0.75rem 1rem;
     border: 2px solid #e5e7eb;
@@ -65,19 +84,34 @@ header p {
     outline: none;
 }
 
+.search-group {
+    display: flex;
+    gap: 1rem;
+    flex: 1;
+}
+
+.search-input {
+    flex: 1;
+    padding: 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    font-size: 1rem;
+}
+
 /* Table Styling */
 .table-container {
     background: white;
-    border-radius: 12px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     overflow: hidden;
     margin-bottom: 2rem;
 }
 
 table {
     width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
+    border-collapse: collapse;
 }
 
 th {
@@ -99,19 +133,33 @@ tr:hover td {
     background-color: #f8fafc;
 }
 
+th, td {
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+}
+
+th {
+    background: #f8fafc;
+    font-weight: 600;
+}
+
 /* Button Styling */
 .btn {
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
     border: none;
     font-size: 0.95rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
 .primary-btn {
-    background: #3b82f6;
+    background: var(--secondary-color);
     color: white;
 }
 
@@ -121,23 +169,34 @@ tr:hover td {
 }
 
 .secondary-btn {
-    background: #e5e7eb;
-    color: #4b5563;
+    background: var(--border-color);
+    color: var(--text-color);
 }
 
 .secondary-btn:hover {
     background: #d1d5db;
 }
 
+.edit-btn {
+    background: #3b82f6;
+    color: white;
+    margin-right: 0.5rem;
+}
+
+.delete-btn {
+    background: #ef4444;
+    color: white;
+}
+
 /* Modal Styling */
 .modal-overlay {
+    display: none;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
-    display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
@@ -146,7 +205,7 @@ tr:hover td {
 
 .modal {
     background: white;
-    border-radius: 12px;
+    border-radius: 10px;
     padding: 2rem;
     width: 90%;
     max-width: 600px;
@@ -154,6 +213,9 @@ tr:hover td {
 }
 
 .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-bottom: 1.5rem;
 }
 
@@ -164,7 +226,7 @@ tr:hover td {
 }
 
 .form-group {
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
 }
 
 .form-group label {
@@ -177,9 +239,10 @@ tr:hover td {
 .form-group input {
     width: 100%;
     padding: 0.75rem;
-    border: 2px solid #e5e7eb;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
     transition: all 0.3s ease;
+    font-size: 1rem;
 }
 
 .form-group input:focus {
@@ -188,6 +251,21 @@ tr:hover td {
     outline: none;
 }
 
+.button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.25rem;
+    color: var(--text-color);
+}
+
 /* Status Indicators */
 .status-badge {
     padding: 0.5rem 1rem;
@@ -231,10 +309,18 @@ footer {
         align-items: stretch;
     }
 
+    .toolbar {
+        flex-direction: column;
+    }
+
     .searchBox {
         width: 100%;
     }
 
+    .search-group {
+        width: 100%;
+    }
+
     th, td {
         padding: 1rem 0.75rem;
     }
@@ -243,5 +329,16 @@ footer {
         width: 100%;
         margin-bottom: 0.5rem;
     }
+
+    .table-container {
+        overflow-x: auto;
+    }
+}
+
+/* beds.css */
+.error {
+    color: #ef4444;
+    text-align: center;
+    padding: 1rem;
 }
 

src/main/resources/static/html/beds.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Available Beds Dashboard</title>
+    <title>Hospital Bed Management</title>
     <link rel="stylesheet" href="../css/beds.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@@ -11,164 +11,81 @@
 </head>
 <body>
     <div class="main-container">
-
-    <!-- Header Section -->
-
         <header>
-
-        <h1>Hospital Management Dashboard</h1>
-
+            <h1>Hospital Bed Management</h1>
             <p>Track and manage hospital bed availability with ease</p>
-
         </header>
 
-
-
-    <!-- Toolbar Section -->
-
-    <div id="toolbar">
-
-        <label for="searchName">Search by Name:</label>
-
-        <input type="text" id="searchName" class="searchBox" placeholder="Enter hospital name...">
-
-
-
-        <label for="searchLocation">Location:</label>
-
-        <input type="text" id="searchLocation" class="searchBox" placeholder="Enter location...">
-
-
-
-        <label for="searchStatus">Status:</label>
-
-        <select id="searchStatus" class="searchBox">
-
-            <option value="">All</option>
-
-            <option value="active">Active</option>
-
-            <option value="inactive">Inactive</option>
-
-        </select>
-
-
-
-        <button id="searchButton" class="btn search-btn">Search</button>
-
-        <button id="addButton" class="btn add-btn">Add Hospital</button>
-
+        <div class="toolbar">
+            <div class="search-group">
+                <input type="text" id="searchName" class="search-input" placeholder="Search by hospital name...">
+                <button id="searchButton" class="btn primary-btn">
+                    <i class="fas fa-search"></i> Search
+                </button>
+            </div>
+            <button id="addHospitalBtn" class="btn primary-btn">
+                <i class="fas fa-plus"></i> Add Hospital
+            </button>
         </div>
-
-
-
-    <!-- Table Section -->
 
         <div class="table-container">
-
-        <h2>Hospitals with Available Beds</h2>
-
-        <table>
-
+            <table id="hospitalTable">
                 <thead>
-
                     <tr>
-
-                <th>Hospital ID</th>
-
+                        <th>ID</th>
                         <th>Hospital Name</th>
-
                         <th>Location</th>
-
                         <th>Phone</th>
-
                         <th>Total Beds</th>
-
                         <th>Available Beds</th>
-
+                        <th>Occupancy</th>
                         <th>Actions</th>
-
                     </tr>
-
                 </thead>
-
                 <tbody>
-
-            <!-- Table Rows Populated Dynamically -->
-
+                    <!-- Data populated by JavaScript -->
                 </tbody>
-
             </table>
-
         </div>
-
     </div>
 
-
-
-<!-- Add/Edit Modal -->
-
-<div id="overlay">
-
-    <div id="formContainer">
-
-        <h2 id="modalTitle">Add New Hospital</h2>
-
+    <!-- Modal for Add/Edit -->
+    <div id="hospitalModal" class="modal-overlay">
+        <div class="modal">
+            <div class="modal-header">
+                <h2 id="modalTitle">Add Hospital</h2>
+                <button class="close-btn"><i class="fas fa-times"></i></button>
+            </div>
             <form id="hospitalForm">
-
                 <input type="hidden" id="hospitalId">
-
-            <label for="hospitalName">Hospital Name:</label>
-
-            <input type="text" id="hospitalName" placeholder="Enter hospital name..." required>
-
-
-
-            <label for="hospitalLocation">Location:</label>
-
-            <input type="text" id="hospitalLocation" placeholder="Enter location..." required>
-
-
-
-            <label for="hospitalPhone">Phone:</label>
-
-            <input type="text" id="hospitalPhone" placeholder="Enter phone number..." required>
-
-
-
-            <label for="hospitalTotalBeds">Total Beds:</label>
-
-            <input type="number" id="hospitalTotalBeds" placeholder="Enter total beds..." required>
-
-
-
-            <label for="hospitalAvailableBeds">Available Beds:</label>
-
-            <input type="number" id="hospitalAvailableBeds" placeholder="Enter available beds..." required>
-
-
-
-            <button type="submit" class="btn save-btn">Save</button>
-
-            <button type="button" id="cancelButton" class="btn cancel-btn">Cancel</button>
-
+                <div class="form-group">
+                    <label for="hospitalName">Hospital Name</label>
+                    <input type="text" id="hospitalName" required>
+                </div>
+                <div class="form-group">
+                    <label for="hospitalLocation">Location</label>
+                    <input type="text" id="hospitalLocation" required>
+                </div>
+                <div class="form-group">
+                    <label for="hospitalPhone">Phone</label>
+                    <input type="tel" id="hospitalPhone" required>
+                </div>
+                <div class="form-group">
+                    <label for="totalBeds">Total Beds</label>
+                    <input type="number" id="totalBeds" min="0" required>
+                </div>
+                <div class="form-group">
+                    <label for="availableBeds">Available Beds</label>
+                    <input type="number" id="availableBeds" min="0" required>
+                </div>
+                <div class="button-group">
+                    <button type="submit" class="btn primary-btn">Save</button>
+                    <button type="button" class="btn secondary-btn" id="cancelBtn">Cancel</button>
+                </div>
             </form>
-
         </div>
-
     </div>
 
-
-
-<footer>
-
-    <p>&copy; 2024 Hospital Management System</p>
-
-</footer>
-
-
-
     <script src="../js/beds.js"></script>
-
 </body>
 </html>

src/main/resources/static/html/device.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/hospitalView.html

@@ -17,19 +17,48 @@
             box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Dark shadow effect */
             padding: 10px;
         }
+        #top {
+            border-radius: 15px;
+            margin-bottom: 5px;
+            background-color: #2c3e50;
+            height: 10vh;
+            width: 100%;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: space-between; /* Adjust spacing between elements */
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+            padding: 0 20px; /* Add padding for consistent spacing */
+        }
+        #showSpan {
+            color: #ecf0f1;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        }
+        #loginIdText {
+            color: white;
+            text-align: left;
+            margin: 0;
+        }
     </style>
 </head>
 <body>
 
 <div id="container" style="display: flex; flex-direction: column; height: 100vh;">
     <!-- top area -->
-    <div id="top" style="border-radius: 15px; margin-bottom: 5px; background-color: #2c3e50; height: 10vh; width: 100%; position: relative; display: flex; align-items: center; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);">
+    <div id="top">
+        <!-- Centered title -->
         <span style="color: #ecf0f1; font-size: 1.5rem; font-weight: bold; font-family: 'Arial', sans-serif; position: absolute; left: 50%; transform: translateX(-50%);">
             Digital Insight for Health
         </span>
-        <span id="showSpan" style="color: #ecf0f1; position: absolute; right: 20px; display: flex; flex-direction: column; align-items: flex-end;"></span>
-    </div>
 
+        <!-- Left aligned elements -->
+        <div style="display: flex; flex-direction: column; align-items: flex-end;">
+            <span id="showSpan"></span>
+            <p id="loginIdText">current loginId: </p>
+        </div>
+    </div>
 
     <!-- main block，left and right -->
     <div style="display: flex; height: 80vh;">
@@ -53,6 +82,9 @@
         const urlParams = new URLSearchParams(window.location.search);
         const hospitalId = localStorage.getItem('hospitalId');
 
+        var loginIdText = document.getElementById('loginIdText');
+        loginIdText.textContent = 'current loginId: hospital ' + hospitalId;
+
         const type = urlParams.get('type');
         if(type==null){
             $('#mainview').load("/hospitalLoadMain2");
@@ -73,6 +105,7 @@
         if(type=="nurse"){
             $('#mainview').load(`/nurseLoadMain/${hospitalId}`);
         }
+
     })
 </script>
 </html>
\ No newline at end of file

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

@@ -155,6 +155,8 @@
                     var itemsArray=data.msg.split(",");
                     var type=itemsArray[0];
                     var item=itemsArray[1];
+                    localStorage.setItem("type",type);
+                    localStorage.setItem("name",item);
                     if (type == "[" + "SUPER" + "]") {
                      window.location.href = "superAdminView.html";
                     }

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

 $(document).ready(function () {
+    // Constants
+    const API_BASE_URL = '/api/hospitals';
+    const DEFAULT_ERROR = 'Operation failed. Please try again.';
+    
+    // Initialize page
+    setupNavBar();
     loadHospitals();
+    initializeEventHandlers();
+
+    function setupNavBar() {
+        const nav = `
+            <nav class="top-nav">
+                <div class="nav-brand">Digital Insight for Health</div>
+                <div class="nav-items">
+                    <a href="/superAdminView.html?type=hospital" class="nav-link">
+                        <i class="fas fa-home"></i> Home
+                    </a>
+                    <a href="/beds.html" class="nav-link active">
+                        <i class="fas fa-bed"></i> Beds
+                    </a>
+                    <button class="nav-link sign-out" onclick="handleSignOut()">
+                        <i class="fas fa-sign-out-alt"></i> Sign Out
+                    </button>
+                </div>
+                <div class="user-info">
+                    <span class="user-name">${localStorage.getItem('name') || 'User'}</span>
+                    <span class="user-role">${localStorage.getItem('type') || 'Guest'}</span>
+                </div>
+            </nav>
+        `;
+        $('.main-container').prepend(nav);
+    }
 
     function loadHospitals() {
+        showLoading();
         $.ajax({
-            url: '/api/hospitals/available',
+            url: `${API_BASE_URL}/available`,
             method: 'GET',
+            contentType: 'application/json',
             success: function(response) {
-                if(response.code === 200) {
-                    populateTable(response.data);
+                if(response && response.code === 1) {
+                    updateTable(response.data || []);
                 } else {
-                    alert(response.msg);
+                    showError(response.msg || DEFAULT_ERROR);
                 }
             },
-            error: function(xhr) {
-                alert('Error loading hospitals: ' + xhr.responseText);
+            error: handleAjaxError
+        });
     }
+
+    function updateTable(hospitals) {
+        const tbody = $('#hospitalTable tbody');
+        tbody.empty();
+        
+        hospitals.forEach(function(hospital) {
+            const tr = `
+                <tr>
+                    <td>${hospital.id}</td>
+                    <td>${hospital.name || ''}</td>
+                    <td>${hospital.location || ''}</td>
+                    <td>${hospital.phone || ''}</td>
+                    <td>${hospital.totalBeds || 0}</td>
+                    <td>${hospital.availableBeds || 0}</td>
+                    <td>${Math.round(hospital.occupancyRate)}%</td>
+                    <td>
+                        <button class="btn edit-btn" data-id="${hospital.id}">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                        <button class="btn delete-btn" data-id="${hospital.id}">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </td>
+                </tr>
+            `;
+            tbody.append(tr);
         });
     }
 
+    function initializeEventHandlers() {
+        // Search Handler
+        $("#searchButton").click(handleSearch);
+
+        // Add Hospital Handler
+        $("#addHospitalBtn").click(function() {
+            $("#hospitalModal").fadeIn();
+            $("#modalTitle").text("Add New Hospital");
+            $("#hospitalForm")[0].reset();
+            $("#hospitalId").val('');
+        });
+
+        // Close Modal Handler
+        $(".close-btn, #cancelBtn").click(function() {
+            $("#hospitalModal").fadeOut();
+        });
+
+        // Form Submit Handler
         $("#hospitalForm").submit(function(e) {
             e.preventDefault();
-        const hospitalData = {
+            const formData = {
                 name: $("#hospitalName").val(),
                 location: $("#hospitalLocation").val(),
+                address: $("#hospitalLocation").val(), // Match DB schema
                 phone: $("#hospitalPhone").val(),
-            totalBeds: parseInt($("#hospitalTotalBeds").val()),
-            availableBeds: parseInt($("#hospitalAvailableBeds").val())
+                totalBeds: parseInt($("#totalBeds").val()),
+                availableBeds: parseInt($("#availableBeds").val()),
+                type: 'hospital',
+                status: 1,
+                roleId: 3,
+                email: '',
+                password: '$2a$10$wvAZoj4V51MH/MLhVIrnG.NrY07/.Gn9Ar6JsyzRAubWtqbWzgKie'
             };
 
+            if (!validateFormData(formData)) {
+                showError('Please fill all required fields');
+                return;
+            }
+
             $.ajax({
-            url: '/api/hospitals',
+                url: API_BASE_URL,
                 method: 'POST',
                 contentType: 'application/json',
-            data: JSON.stringify(hospitalData),
+                data: JSON.stringify(formData),
                 success: function(response) {
-                if(response.code === 200) {
-                    alert('Hospital added successfully');
-                    $("#overlay").fadeOut();
+                    if(response && response.code === 1) {
+                        $("#hospitalModal").fadeOut();
                         loadHospitals();
+                        showSuccess('Hospital added successfully');
                     } else {
-                    alert(response.msg);
+                        showError(response.msg || DEFAULT_ERROR);
                     }
                 },
-            error: function(xhr) {
-                alert('Error adding hospital: ' + xhr.responseText);
+                error: function(xhr, status, error) {
+                    console.error('API Error:', error);
+                    showError(DEFAULT_ERROR);
                 }
             });
         });
 
-    // Add delete functionality
+        // Delete Handler
         $(document).on('click', '.delete-btn', function() {
-        const hospitalId = $(this).data('id');
+            const id = $(this).data('id');
             if(confirm('Are you sure you want to delete this hospital?')) {
                 $.ajax({
-                url: '/api/hospitals',
+                    url: `${API_BASE_URL}/${id}`,
                     method: 'DELETE',
-                contentType: 'application/json',
-                data: JSON.stringify([hospitalId]),
                     success: function(response) {
-                    if(response.code === 200) {
+                        if(response && response.code === 1) {
                             loadHospitals();
+                            showSuccess('Hospital deleted successfully');
                         } else {
-                        alert(response.msg);
+                            showError(response.msg || 'Delete failed');
                         }
                     },
                     error: function(xhr) {
-                    alert('Error deleting hospital: ' + xhr.responseText);
+                        console.error('Delete Error:', xhr);
+                        showError('Failed to delete hospital');
                     }
                 });
             }
         });
+    }
+
+    function handleSearch(event) {
+        event.preventDefault();
+        const searchTerm = $("#searchName").val().trim();
+        
+        $.ajax({
+            url: `${API_BASE_URL}/search`,
+            method: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify({ name: searchTerm }),
+            success: function(response) {
+                if(response && response.code === 1) {
+                    updateTable(response.data || []);
+                } else {
+                    showError('No hospitals found');
+                }
+            },
+            error: handleAjaxError
         });
+    }
+
+    function handleFormSubmit(event) {
+        event.preventDefault();
+        const formData = {
+            name: $("#hospitalName").val(),
+            address: $("#hospitalLocation").val(),
+            phone: $("#hospitalPhone").val(),
+            maxAmount: parseInt($("#totalBeds").val()),
+            amountPatient: parseInt($("#totalBeds").val() - $("#availableBeds").val()),
+            type: 'hospital',
+            status: 1
+        };
+
+        const id = $("#hospitalId").val();
+        const method = id ? 'PUT' : 'POST';
+        const url = id ? `${API_BASE_URL}/${id}` : API_BASE_URL;
+
+        $.ajax({
+            url: url,
+            method: method,
+            contentType: 'application/json',
+            data: JSON.stringify(formData),
+            success: function(response) {
+                if(response && response.code === 1) {
+                    $("#hospitalModal").fadeOut();
+                    showSuccess('Operation successful');
+                    loadHospitals();
+                } else {
+                    showError(response.msg || DEFAULT_ERROR);
+                }
+            },
+            error: handleAjaxError
+        });
+    }
+
+    function handleAjaxError(xhr, status, error) {
+        console.error('API Error:', {xhr, status, error});
+        showError(DEFAULT_ERROR);
+    }
+
+    function showLoading() {
+        $('#hospitalTable tbody').html('<tr><td colspan="8" class="text-center">Loading...</td></tr>');
+    }
+
+    function showNoDataMessage() {
+        $('#hospitalTable tbody').html('<tr><td colspan="8" class="text-center">No hospitals available</td></tr>');
+    }
+
+    function showError(message) {
+        $('#hospitalTable tbody').html(`<tr><td colspan="8" class="text-center text-danger">${message}</td></tr>`);
+    }
+
+    function validateFormData(data) {
+        return data.name && 
+               data.location && 
+               data.phone && 
+               data.totalBeds > 0 && 
+               data.availableBeds >= 0 && 
+               data.availableBeds <= data.totalBeds;
+    }
+
+    function showSuccess(message) {
+        const alert = `
+            <div class="alert alert-success">
+                ${message}
+            </div>
+        `;
+        $('.table-container').before(alert);
+        setTimeout(() => {
+            $('.alert').fadeOut().remove();
+        }, 3000);
+    }
+
+    // Add CSS for new components
+    const styles = `
+        .top-nav {
+            background: var(--primary-color);
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .nav-brand {
+            color: white;
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .nav-items {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+        }
+
+        .nav-link {
+            color: white;
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            transition: all 0.3s ease;
+        }
+
+        .nav-link:hover, .nav-link.active {
+            background: rgba(255,255,255,0.1);
+        }
+
+        .sign-out {
+            background: var(--danger-color);
+            border: none;
+            cursor: pointer;
+        }
+
+        .user-info {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            color: white;
+        }
+
+        .user-name {
+            font-weight: 500;
+        }
+
+        .user-role {
+            font-size: 0.875rem;
+            opacity: 0.8;
+        }
+
+        .success-message {
+            background: var(--success-color);
+            color: white;
+            padding: 1rem;
+            border-radius: 6px;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+    `;
+
+    $('<style>').text(styles).appendTo('head');
+
+    // Initialize tooltips and other UI enhancements
+    $('[data-toggle="tooltip"]').tooltip();
+    
+    // Add fade effects for smoother transitions
+    $('.table-container').hide().fadeIn();
+});
+
+function handleSignOut() {
+    localStorage.clear();
+    window.location.href = '/login.html';
+}

src/main/resources/templates/leftView2.html

@@ -8,7 +8,6 @@
 <!-- Vertical navigation bar -->
 <!--<div class="nav-item" onclick="chooseAdmin()">CommonAdmin</div>-->
 <div class="nav-item" onclick="chooseHospital()">Hospital</div>
-<div class="nav-item" onclick="choosePatient()">Patient</div>
 <div class="nav-item" onclick="chooseDevice()">Device</div>
 <div class="nav-item" onclick="chooseNurse()">Nurse</div>
 <div class="nav-item" onclick="chooseOut()" style="margin-top: 335px">Sign Out</div>
@@ -21,10 +20,6 @@
         window.location.href="/HospitalView.html?type=hospital"
     }
 
-    function choosePatient(){
-        window.location.href="/HospitalView.html?type=patient"
-    }
-
     function chooseDevice(){
         window.location.href="/HospitalView.html?type=device"
     }