diff --git a/src/main/java/com/cardiff/client_project/controller/admin/CommonAdminHospitalController.java b/src/main/java/com/cardiff/client_project/controller/admin/CommonAdminHospitalController.java
new file mode 100644
index 0000000000000000000000000000000000000000..52b239dd38ba94d406ddf430497d898b06c22b6a
--- /dev/null
+++ b/src/main/java/com/cardiff/client_project/controller/admin/CommonAdminHospitalController.java
@@ -0,0 +1,40 @@
+package com.cardiff.client_project.controller.admin;
+
+import com.cardiff.client_project.pojo.dto.HospitalDTO;
+import com.cardiff.client_project.service.CommonAdminHospitalService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/commonAdmin/hospital")
+public class CommonAdminHospitalController {
+
+ @Autowired
+ private CommonAdminHospitalService commonAdminHospitalService;
+
+ @GetMapping("/all")
+ public List<HospitalDTO> getAllHospitals() {
+ return commonAdminHospitalService.getAllHospitals();
+ }
+
+ @PostMapping("/add")
+ public ResponseEntity<String> addHospital(@RequestBody HospitalDTO hospital) {
+ commonAdminHospitalService.addHospital(hospital);
+ return ResponseEntity.ok("Hospital added successfully!");
+ }
+
+ @PutMapping("/update")
+ public ResponseEntity<String> updateHospital(@RequestBody HospitalDTO hospital) {
+ commonAdminHospitalService.updateHospital(hospital);
+ return ResponseEntity.ok("Hospital updated successfully!");
+ }
+
+ @DeleteMapping("/delete/{id}")
+ public ResponseEntity<String> deleteHospital(@PathVariable int id) {
+ commonAdminHospitalService.deleteHospital(id);
+ return ResponseEntity.ok("Hospital deleted successfully!");
+ }
+}
diff --git a/src/main/resources/static/html/admin.html b/src/main/resources/static/html/admin.html
new file mode 100644
index 0000000000000000000000000000000000000000..8c8d95b2f9e79d190bdc99225cb580a811f6d9d5
--- /dev/null
+++ b/src/main/resources/static/html/admin.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Hospital Management</title>
+ <link rel="stylesheet" type="text/css" href="../css/admin.css">
+</head>
+<body>
+<!-- Left Sidebar Navigation -->
+<nav class="sidebar">
+ <div class="text-lg font-semibold">System</div>
+ <a href="#" data-content="hospital">Hospital</a>
+ <a href="#" data-content="patient">Nursing staff</a>
+ <a href="#" data-content="logout">LogOut</a>
+</nav>
+
+<!-- Main Content Area -->
+<div class="content">
+ <div id="dynamic-content">
+ <h1>Welcome to the Management System</h1>
+ <p>Select an option from the sidebar to get started.</p>
+ </div>
+</div>
+
+<!-- Modal for Adding Hospital -->
+<div id="modal">
+ <div class="modal-content">
+ <h2>Add New Hospital</h2>
+ <div>
+ <label for="modal-name">Name</label>
+ <input type="text" id="modal-name" />
+ </div>
+ <div>
+ <label for="modal-location">Location</label>
+ <input type="text" id="modal-location" />
+ </div>
+ <div>
+ <label for="modal-phone">Phone</label>
+ <input type="text" id="modal-phone" />
+ </div>
+ <div>
+ <label for="modal-totalBeds">Total Beds</label>
+ <input type="number" id="modal-totalBeds" />
+ </div>
+ <div>
+ <label for="modal-availableBeds">Available Beds</label>
+ <input type="number" id="modal-availableBeds" />
+ </div>
+ <div class="modal-footer">
+ <button id="modal-save">Save</button>
+ <button id="modal-close">Close</button>
+ </div>
+ </div>
+</div>
+
+<script>
+ document.addEventListener("DOMContentLoaded", function () {
+ const dynamicContent = document.getElementById("dynamic-content");
+ const modal = document.getElementById("modal");
+ const modalClose = document.getElementById("modal-close");
+ const modalSave = document.getElementById("modal-save");
+
+ // Fetch hospital data
+ function loadHospitals(filters = {}) {
+ const query = new URLSearchParams(filters).toString();
+ fetch(`/commonAdmin/hospital/all?${query}`)
+ .then(response => response.json())
+ .then(data => {
+ const tableBody = document.getElementById("table-body");
+ tableBody.innerHTML = "";
+ data.forEach(hospital => {
+ const row = document.createElement("tr");
+ row.innerHTML = `
+ <td>${hospital.id}</td>
+ <td>${hospital.name}</td>
+ <td>${hospital.location}</td>
+ <td>${hospital.phone}</td>
+ <td>${hospital.totalBeds}</td>
+ <td>${hospital.availableBeds}</td>
+ `;
+ tableBody.appendChild(row);
+ });
+ })
+ .catch(error => console.error('Error loading hospitals:', error));
+ }
+
+ // Open modal
+ function openModal() {
+ modal.style.display = "block";
+ }
+
+ // Close modal
+ modalClose.addEventListener("click", () => {
+ modal.style.display = "none";
+ });
+
+ // Save new hospital
+ modalSave.addEventListener("click", () => {
+ const name = document.getElementById("modal-name").value;
+ const location = document.getElementById("modal-location").value;
+ const phone = document.getElementById("modal-phone").value;
+ const totalBeds = document.getElementById("modal-totalBeds").value;
+ const availableBeds = document.getElementById("modal-availableBeds").value;
+
+ const newHospital = { name, location, phone, totalBeds, availableBeds };
+
+ fetch('/commonAdmin/hospital/add', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(newHospital)
+ })
+ .then(response => response.json())
+ .then(() => {
+ loadHospitals(); // Reload hospital list
+ modal.style.display = "none"; // Close modal
+ })
+ .catch(error => console.error('Error saving hospital:', error));
+ });
+
+ // Load hospital interface
+ function loadHospitalInterface() {
+ dynamicContent.innerHTML = `
+ <div id="toolbar">
+ <label for="searchName">Name</label>
+ <input type="text" class="searchBox" id="searchName" placeholder="type name..." />
+ <label for="searchLocation">Location</label>
+ <input type="text" class="searchBox" id="searchLocation" placeholder="type location..." />
+ <button id="searchButton">Search</button>
+ </div>
+ <div class="table-container">
+ <button id="add-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add</button>
+ <table>
+ <thead>
+ <tr>
+ <th>ID</th>
+ <th>Name</th>
+ <th>Location</th>
+ <th>Phone</th>
+ <th>Total Beds</th>
+ <th>Available Beds</th>
+ </tr>
+ </thead>
+ <tbody id="table-body">
+ <!-- Table content will be dynamically inserted -->
+ </tbody>
+ </table>
+ </div>
+ `;
+
+ // Add hospital button event
+ document.getElementById("add-btn").addEventListener("click", openModal);
+
+ // Search button event
+ document.getElementById("searchButton").addEventListener("click", () => {
+ const filters = {
+ name: document.getElementById("searchName").value,
+ location: document.getElementById("searchLocation").value
+ };
+ loadHospitals(filters);
+ });
+
+ // Load hospital data initially
+ loadHospitals();
+ }
+
+ // Sidebar navigation
+ document.querySelectorAll(".sidebar a").forEach(link => {
+ link.addEventListener("click", function (event) {
+ event.preventDefault();
+ const contentKey = this.getAttribute("data-content");
+ if (contentKey === "hospital") {
+ loadHospitalInterface();
+ }
+ });
+ });
+ });
+</script>
+</body>
+</html>