Implemented feature for userstory 24

src/main/java/com/cardiff/client_project/service/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;
-
-}

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="/dashboard" class="nav-link">
+                        <i class="fas fa-home"></i> Home
+                    </a>
+                    <a href="/beds" 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_BASE_URL}/available`,
             method: 'GET',
             contentType: 'application/json',
             success: function(response) {
                 if(response && response.code === 1) {
-                    if (response.data && response.data.length > 0) {
-                        updateTable(response.data);
-                    } else {
-                        showNoDataMessage();
-                    }
+                    updateTable(response.data || []);
                 } else {
-                    showError('Error loading hospitals');
+                    showError(response.msg || DEFAULT_ERROR);
                 }
             },
-            error: function(xhr) {
-                showError('Failed to load hospitals');
-                console.error('API Error:', xhr);
-            }
+            error: handleAjaxError
         });
     }
 
@@ -59,26 +79,7 @@ $(document).ready(function () {
 
     function initializeEventHandlers() {
         // Search Handler
-        $("#searchButton").click(function() {
-            const searchName = $("#searchName").val();
-            
-            $.ajax({
-                url: `${API_BASE_URL}/available`,
-                method: 'GET',
-                data: { name: searchName },
-                success: function(response) {
-                    if(response && response.code === 200) {
-                        updateTable(response.data);
-                    } else {
-                        showError('Search failed');
-                    }
-                },
-                error: function(xhr) {
-                    showError('Search failed');
-                    console.error('Search Error:', xhr);
-                }
-            });
-        });
+        $("#searchButton").click(handleSearch);
 
         // Add Hospital Handler
         $("#addHospitalBtn").click(function() {
@@ -94,40 +95,7 @@ $(document).ready(function () {
         });
 
         // Form Submit Handler
-        $("#hospitalForm").submit(function(e) {
-            e.preventDefault();
-            
-            const hospitalData = {
-                name: $("#hospitalName").val(),
-                location: $("#hospitalLocation").val(),
-                phone: $("#hospitalPhone").val(),
-                totalBeds: parseInt($("#totalBeds").val()),
-                availableBeds: parseInt($("#availableBeds").val())
-            };
-
-            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(hospitalData),
-                success: function(response) {
-                    if(response.code === 200) {
-                        $("#hospitalModal").fadeOut();
-                        loadHospitals();
-                    } else {
-                        alert(response.msg || 'Operation failed');
-                    }
-                },
-                error: function(xhr) {
-                    alert('Error processing request');
-                    console.error('API Error:', xhr);
-                }
-            });
-        });
+        $("#hospitalForm").submit(handleFormSubmit);
 
         // Delete Handler
         $(document).on('click', '.delete-btn', function() {
@@ -152,6 +120,65 @@ $(document).ready(function () {
         });
     }
 
+    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>');
     }
@@ -163,4 +190,88 @@ $(document).ready(function () {
     function showError(message) {
         $('#hospitalTable tbody').html(`<tr><td colspan="8" class="text-center text-danger">${message}</td></tr>`);
     }
+
+    // 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';
+}