Update templates/doctor_dashboard.html

templates/doctor_dashboard.html

@@ -6,171 +6,204 @@
     <title>Doctor Dashboard - Patient Care Management</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
-            --primary-color: #4e73df;
-            --secondary-color: #1cc88a;
-            --danger-color: #e74a3b;
-            --warning-color: #f6c23e;
-            --info-color: #36b9cc;
-            --dark-color: #5a5c69;
+            --primary-color: #4e73df; /* Blue */
+            --secondary-color: #1cc88a; /* Green */
+            --danger-color: #e74a3b; /* Red */
+            --warning-color: #f6c23e; /* Yellow */
+            --info-color: #36b9cc; /* Cyan */
+            --dark-color: #5a5c69; /* Dark Grey */
+            --light-bg: #f8f9fc; /* Light Grey Background */
+            --border-color: #e3e6f0; /* Light Border */
         }
-        
+
         body {
             font-family: 'Nunito', sans-serif;
-            background-color: #f8f9fc;
+            background-color: var(--light-bg);
+            color: var(--dark-color);
         }
-        
+
         .navbar {
             background-color: white;
             box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
         }
-        
+
         .navbar-brand {
             font-weight: 800;
-            color: var(--primary-color);
+            color: var(--primary-color) !important; /* Override default link color */
         }
-        
+
         .card {
             border: none;
             box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
             border-radius: 0.35rem;
             margin-bottom: 1.5rem;
+            background-color: white;
         }
-        
+
         .card-header {
-            background-color: #f8f9fc;
-            border-bottom: 1px solid #e3e6f0;
+            background-color: var(--light-bg);
+            border-bottom: 1px solid var(--border-color);
             font-weight: 700;
             color: var(--dark-color);
+            padding: 1rem 1.25rem;
         }
-        
+
         .btn-primary {
             background-color: var(--primary-color);
             border-color: var(--primary-color);
+            transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
         }
-        
+        .btn-primary:hover {
+             background-color: #2e59d9; /* Darker blue */
+             border-color: #2653d4;
+        }
+
         .btn-success {
             background-color: var(--secondary-color);
             border-color: var(--secondary-color);
         }
-        
+
         .btn-danger {
             background-color: var(--danger-color);
             border-color: var(--danger-color);
         }
-        
+
         .role-toggle {
             display: flex;
             align-items: center;
         }
-        
+
         .role-toggle-btn {
             display: flex;
             align-items: center;
             gap: 8px;
-            background-color: #f8f9fc;
-            border: 1px solid #e3e6f0;
+            background-color: var(--light-bg);
+            border: 1px solid var(--border-color);
             border-radius: 30px;
             padding: 0.5rem 1rem;
             font-weight: 600;
+            color: var(--dark-color);
             transition: all 0.3s ease;
+            text-decoration: none; /* Remove underline */
         }
-        
+
         .role-toggle-btn:hover {
-            background-color: #edf2ff;
+            background-color: #edf2ff; /* Lighter blue */
         }
-        
+
         .role-toggle-btn.active {
             background-color: var(--primary-color);
             color: white;
+            border-color: var(--primary-color);
         }
-        
+
         .main-content {
-            padding: 2rem;
+            padding: 1.5rem; /* Reduced padding */
         }
-        
+
         .patient-list {
             list-style: none;
             padding: 0;
+            max-height: calc(100vh - 250px); /* Adjust height to fit viewport */
+            overflow-y: auto; /* Add scroll for long lists */
         }
-        
+
         .patient-item {
             background-color: white;
             border-radius: 0.35rem;
-            border-left: 4px solid var(--info-color);
-            margin-bottom: 1rem;
+            border-left: 4px solid var(--info-color); /* Default border */
+            margin-bottom: 0.75rem; /* Less margin */
             padding: 1rem;
             box-shadow: 0 0.15rem 0.5rem 0 rgba(58, 59, 69, 0.05);
             cursor: pointer;
             transition: all 0.2s ease;
         }
-        
+
         .patient-item:hover {
             transform: translateY(-3px);
             box-shadow: 0 0.3rem 0.8rem 0 rgba(58, 59, 69, 0.1);
+            background-color: #fcfcfc; /* Slightly lighter hover background */
         }
         
+        .patient-item.active {
+            border: 1px solid var(--primary-color); /* Highlight active item */
+            border-left: 4px solid var(--primary-color);
+            background-color: #eef2fc; /* Subtle background for active */
+        }
+
+
         .patient-item.emergency {
             border-left-color: var(--danger-color);
         }
-        
+
         .patient-item.deteriorating {
             border-left-color: var(--warning-color);
         }
-        
+
         .patient-item.improving {
             border-left-color: var(--secondary-color);
         }
-        
+
         .patient-item.stable {
             border-left-color: var(--info-color);
         }
-        
+
         .patient-status {
-            padding: 0.25rem 0.75rem;
+            padding: 0.3rem 0.8rem; /* Slightly larger padding */
             border-radius: 50rem;
             color: white;
-            font-size: 0.8rem;
+            font-size: 0.85rem; /* Slightly larger font */
             font-weight: 700;
+            min-width: 80px; /* Ensure minimum width */
+            text-align: center;
         }
-        
+
         .status-emergency {
             background-color: var(--danger-color);
         }
-        
+
         .status-deteriorating {
             background-color: var(--warning-color);
-            color: #212529;
+            color: #212529; /* Dark text for yellow background */
         }
-        
+
         .status-improving {
             background-color: var(--secondary-color);
         }
-        
+
         .status-stable {
             background-color: var(--info-color);
         }
-        
+         .status-unknown {
+            background-color: var(--dark-color);
+            color: white;
+        }
+
+
         .care-plan-tabs {
             margin-top: 1.5rem;
         }
-        
+
         .care-plan-content {
-            background-color: #f8f9fc;
-            border-radius: 0.35rem;
-            border: 1px solid #e3e6f0;
+            background-color: var(--light-bg);
+            border-radius: 0 0 0.35rem 0.35rem; /* Rounded corners at bottom */
+            border: 1px solid var(--border-color);
+            border-top: none; /* No border top because of tabs */
             padding: 1.5rem;
-            margin-top: 1rem;
-            white-space: pre-line;
-            height: 400px;
-            overflow-y: auto;
+            height: 400px; /* Fixed height */
+            overflow-y: auto; /* Scroll */
+            white-space: pre-line; /* Preserve line breaks */
+            font-size: 1rem;
+            color: #333;
         }
-        
-        .patient-details {
-            display: none;
+
+        .patient-details-section {
+            display: none; /* Hidden by default */
         }
-        
+
         .loader {
             border: 5px solid #f3f3f3;
             border-top: 5px solid var(--primary-color);
@@ -181,11 +214,28 @@
             margin: 2rem auto;
             display: none;
         }
-        
+
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+
+        #no-patient-selected {
+             min-height: 300px;
+             display: flex;
+             flex-direction: column;
+             justify-content: center;
+             align-items: center;
+        }
+
+        .alert-danger {
+             color: #721c24;
+             background-color: #f8d7da;
+             border-color: #f5c6cb;
+        }
+         .alert-danger strong {
+              color: var(--danger-color);
+         }
     </style>
 </head>
 <body>
@@ -202,16 +252,16 @@
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item">
-                        <a class="nav-link" href="/">Home</a>
+                        <a class="nav-link" href="/" role="button">Home</a>
                     </li>
                     <li class="nav-item">
                         <div class="role-toggle">
-                            <button class="role-toggle-btn" data-role="patient">
+                            <a href="/" class="role-toggle-btn" data-role="patient">
                                 <i class="fas fa-user"></i> Patient
-                            </button>
-                            <button class="role-toggle-btn active ms-2" data-role="doctor">
+                            </a>
+                            <a href="/doctor_dashboard" class="role-toggle-btn active ms-2" data-role="doctor">
                                 <i class="fas fa-user-md"></i> Doctor
-                            </button>
+                            </a>
                         </div>
                     </li>
                 </ul>
@@ -221,7 +271,7 @@
 
     <div class="container-fluid main-content">
         <div class="row">
-            <!-- Patient List -->
+            <!-- Patient List Sidebar -->
             <div class="col-md-4">
                 <div class="card">
                     <div class="card-header d-flex justify-content-between align-items-center">
@@ -232,27 +282,28 @@
                         <div id="emergency-alerts">
                             <!-- Emergency alerts will be populated here -->
                         </div>
-                        
+
                         <div class="mb-3">
                             <input type="text" class="form-control" id="patient-search" placeholder="Search patients...">
                         </div>
-                        
+
                         <div id="patient-list-container">
                             <div class="loader" id="patient-list-loader"></div>
                             <ul class="patient-list" id="patient-list">
                                 <!-- Patient list will be populated here -->
                             </ul>
+                             <div id="no-patients-found" class="text-center p-3 text-muted" style="display: none;">No patients found.</div>
                         </div>
                     </div>
                 </div>
             </div>
-            
-            <!-- Patient Details -->
+
+            <!-- Patient Details Main Area -->
             <div class="col-md-8">
-                <div class="patient-details" id="patient-details">
+                <div class="patient-details-section" id="patient-details-section">
                     <div class="card">
                         <div class="card-header">
-                            <h5 class="mb-0" id="patient-name"><i class="fas fa-user me-2"></i>Patient Details</h5>
+                            <h5 class="mb-0" id="patient-name-header"><i class="fas fa-user me-2"></i>Patient Details</h5>
                         </div>
                         <div class="card-body">
                             <div class="row mb-3">
@@ -266,34 +317,34 @@
                                     <strong>Status:</strong> <span id="patient-status" class="patient-status"></span>
                                 </div>
                             </div>
-                            
+
                             <div class="mb-3">
                                 <strong>Feedback/Symptoms:</strong>
-                                <p id="patient-feedback" class="p-2 bg-light rounded"></p>
+                                <p id="patient-feedback" class="p-3 bg-light rounded border"></p>
                             </div>
-                            
+
                             <div class="mb-3">
                                 <strong>Last Updated:</strong> <span id="patient-timestamp"></span>
                             </div>
-                            
+
                             <button class="btn btn-primary" id="download-pdf">
-                                <i class="fas fa-file-download me-2"></i>Download PDF
+                                <i class="fas fa-file-download me-2"></i>Download Care Plan PDF
                             </button>
-                            
+
                             <div class="care-plan-tabs mt-4">
                                 <ul class="nav nav-tabs" id="carePlanTabs" role="tablist">
                                     <li class="nav-item" role="presentation">
-                                        <button class="nav-link active" id="updated-plan-tab" data-bs-toggle="tab" data-bs-target="#updated-plan" type="button" role="tab">Updated Care Plan</button>
+                                        <button class="nav-link active" id="updated-plan-tab" data-bs-toggle="tab" data-bs-target="#updated-plan" type="button" role="tab" aria-controls="updated-plan" aria-selected="true">Updated Care Plan</button>
                                     </li>
                                     <li class="nav-item" role="presentation">
-                                        <button class="nav-link" id="original-plan-tab" data-bs-toggle="tab" data-bs-target="#original-plan" type="button" role="tab">Original Care Plan</button>
+                                        <button class="nav-link" id="original-plan-tab" data-bs-toggle="tab" data-bs-target="#original-plan" type="button" role="tab" aria-controls="original-plan" aria-selected="false">Original Care Plan</button>
                                     </li>
                                 </ul>
                                 <div class="tab-content" id="carePlanTabsContent">
-                                    <div class="tab-pane fade show active" id="updated-plan" role="tabpanel">
+                                    <div class="tab-pane fade show active" id="updated-plan" role="tabpanel" aria-labelledby="updated-plan-tab">
                                         <div class="care-plan-content" id="updated-plan-content"></div>
                                     </div>
-                                    <div class="tab-pane fade" id="original-plan" role="tabpanel">
+                                    <div class="tab-pane fade" id="original-plan" role="tabpanel" aria-labelledby="original-plan-tab">
                                         <div class="care-plan-content" id="original-plan-content"></div>
                                     </div>
                                 </div>
@@ -301,10 +352,10 @@
                         </div>
                     </div>
                 </div>
-                
+
                 <div id="no-patient-selected" class="text-center p-5">
-                    <i class="fas fa-user-md fa-4x text-muted mb-3"></i>
-                    <h4 class="text-muted">Select a patient to view details</h4>
+                    <i class="fas fa-notes-medical fa-5x text-muted mb-3"></i>
+                    <h4 class="text-muted">Select a patient from the list to view details</h4>
                 </div>
             </div>
         </div>
@@ -314,60 +365,50 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
         $(document).ready(function() {
-            // Role toggle buttons
-            $('.role-toggle-btn').click(function() {
-                $('.role-toggle-btn').removeClass('active');
-                $(this).addClass('active');
-                
-                const role = $(this).data('role');
-                
-                if (role === 'patient') {
-                    // Post to switch role endpoint and redirect
-                    $.post('/switch_role', { role: 'patient' }, function() {
-                        window.location.href = '/';
-                    });
-                } else if (role === 'doctor') {
-                    // Stay on doctor dashboard and refresh
-                    $.post('/switch_role', { role: 'doctor' });
-                }
-            });
-            
+            // Set active role button on load
+            $('.role-toggle-btn[data-role="doctor"]').addClass('active');
+            $('.role-toggle-btn[data-role="patient"]').removeClass('active');
+
+
+            // Role toggle buttons - now just links
+            // They handle the redirection via href
+
+
             // Show patient list loader
             $('#patient-list-loader').show();
-            
+            $('#no-patients-found').hide();
+
             // Load all patients
             function loadPatients() {
+                console.log("Loading patients...");
                 $.ajax({
                     url: '/get_patients',
                     type: 'GET',
                     success: function(response) {
                         $('#patient-list-loader').hide();
-                        
+
                         if (response.success && response.patients.length > 0) {
+                             console.log("Patients loaded:", response.patients.length);
                             // Update patient count
                             $('#patient-count').text(response.patients.length);
-                            
+
                             // Clear patient list
                             $('#patient-list').empty();
-                            
-                            // Sort patients by timestamp (newest first) and priority (emergency first)
+
+                            // Sort patients by status priority (Emergency first) then timestamp (newest first)
+                            const statusPriority = { 'emergency': 0, 'deteriorating': 1, 'improving': 2, 'stable': 3, 'unknown': 4 };
                             const sortedPatients = response.patients.sort((a, b) => {
-                                // Sort by status first (emergency > deteriorating > improving > stable)
-                                const statusPriority = {
-                                    'emergency': 0,
-                                    'deteriorating': 1,
-                                    'improving': 2,
-                                    'stable': 3
-                                };
-                                
-                                if (statusPriority[a.status] !== statusPriority[b.status]) {
-                                    return statusPriority[a.status] - statusPriority[b.status];
+                                const priorityDiff = statusPriority[a.status] - statusPriority[b.status];
+                                if (priorityDiff !== 0) {
+                                    return priorityDiff;
                                 }
-                                
-                                // Then sort by timestamp (newest first)
-                                return new Date(b.timestamp) - new Date(a.timestamp);
+                                // Fallback to timestamp if status is the same
+                                const dateA = new Date(a.timestamp || '1900-01-01T00:00:00Z'); // Handle missing timestamp
+                                const dateB = new Date(b.timestamp || '1900-01-01T00:00:00Z'); // Handle missing timestamp
+                                return dateB - dateA; // Newest first
                             });
-                            
+
+
                             // Populate emergency alerts
                             const emergencyPatients = sortedPatients.filter(p => p.status === 'emergency');
                             if (emergencyPatients.length > 0) {
@@ -381,150 +422,210 @@
                             } else {
                                 $('#emergency-alerts').empty();
                             }
-                            
+
                             // Populate patient list
                             sortedPatients.forEach(patient => {
                                 const statusText = {
                                     'emergency': 'EMERGENCY',
                                     'deteriorating': 'HIGH RISK',
                                     'improving': 'IMPROVING',
-                                    'stable': 'STABLE'
+                                    'stable': 'STABLE',
+                                    'unknown': 'UNKNOWN'
                                 };
-                                
+
                                 const statusClass = {
+                                    'emergency': 'emergency', // Use for border-left-color
+                                    'deteriorating': 'deteriorating',
+                                    'improving': 'improving',
+                                    'stable': 'stable',
+                                    'unknown': 'stable' // Default to stable color if unknown
+                                };
+
+                                const statusBadgeClass = {
                                     'emergency': 'status-emergency',
                                     'deteriorating': 'status-deteriorating',
                                     'improving': 'status-improving',
-                                    'stable': 'status-stable'
+                                    'stable': 'status-stable',
+                                     'unknown': 'status-unknown'
                                 };
-                                
+
                                 const patientHtml = `
-                                    <li class="patient-item ${patient.status}" data-id="${patient.id}">
+                                    <li class="patient-item ${statusClass[patient.status]}" data-id="${patient.id}">
                                         <div class="d-flex justify-content-between align-items-center">
                                             <div>
-                                                <h6 class="mb-1">${patient.name}</h6>
-                                                <small class="text-muted">Age: ${patient.age} | Gender: ${patient.gender}</small>
+                                                <h6 class="mb-1">${patient.name || 'Unnamed'}</h6>
+                                                <small class="text-muted">Age: ${patient.age || 'N/A'} | Gender: ${patient.gender || 'N/A'}</small>
                                             </div>
-                                            <span class="patient-status ${statusClass[patient.status]}">${statusText[patient.status]}</span>
+                                            <span class="patient-status ${statusBadgeClass[patient.status]}">${statusText[patient.status]}</span>
                                         </div>
                                     </li>
                                 `;
                                 $('#patient-list').append(patientHtml);
                             });
-                            
+
                             // Add click event to patient items
-                            $('.patient-item').click(function() {
+                            $('.patient-item').off('click').on('click', function() { // Use .off().on() to avoid duplicate handlers
                                 const patientId = $(this).data('id');
+                                // Update URL without full page reload
+                                history.pushState({}, '', `/doctor_dashboard?patient_id=${patientId}`);
                                 loadPatientDetails(patientId);
                             });
-                            
-                            // Check if a patient is selected from URL
+
+                            // Check if a patient ID is in the URL on page load
                             const urlParams = new URLSearchParams(window.location.search);
                             const selectedPatientId = urlParams.get('patient_id');
                             if (selectedPatientId) {
+                                console.log("Loading patient details from URL:", selectedPatientId);
                                 loadPatientDetails(selectedPatientId);
+                            } else {
+                                $('#no-patient-selected').show();
+                                $('#patient-details-section').hide();
                             }
+
+
                         } else {
-                            $('#patient-list').html('<li class="text-center p-3">No patients found</li>');
+                            console.log("No patients found.");
+                            $('#patient-count').text('0');
+                            $('#patient-list').empty();
+                            $('#emergency-alerts').empty();
+                            $('#no-patients-found').show();
+                             $('#no-patient-selected').show();
+                             $('#patient-details-section').hide();
                         }
                     },
-                    error: function() {
+                    error: function(xhr, status, error) {
+                        console.error("Error loading patients:", error);
                         $('#patient-list-loader').hide();
-                        $('#patient-list').html('<li class="text-center p-3 text-danger">Error loading patients</li>');
+                        $('#patient-list').html('<li class="text-center p-3 text-danger">Error loading patients.</li>');
+                        $('#no-patients-found').hide(); // Hide no patients message if there was an error
+                         $('#no-patient-selected').show();
+                         $('#patient-details-section').hide();
                     }
                 });
             }
-            
+
             // Load patient details
             function loadPatientDetails(patientId) {
+                 console.log("Attempting to load details for patient ID:", patientId);
                 // Highlight selected patient
                 $('.patient-item').removeClass('active');
                 $(`.patient-item[data-id="${patientId}"]`).addClass('active');
-                
-                // Show patient details loader
-                $('#patient-details').hide();
+
+                // Show patient details section, hide placeholder
                 $('#no-patient-selected').hide();
-                
+                $('#patient-details-section').show();
+
+
+                // You could add a loader here if the API call was slow
+                // $('#patient-details-section').addClass('loading');
+
                 $.ajax({
                     url: `/get_patient/${patientId}`,
                     type: 'GET',
                     success: function(response) {
+                        // $('#patient-details-section').removeClass('loading');
                         if (response.success) {
                             const patient = response.patient;
-                            
+                            console.log("Successfully loaded patient details:", patient.name);
+
                             // Update patient details
-                            $('#patient-name').html(`<i class="fas fa-user me-2"></i>${patient.name}`);
-                            $('#patient-age').text(patient.age);
-                            $('#patient-gender').text(patient.gender);
-                            $('#patient-feedback').text(patient.feedback);
-                            $('#patient-timestamp').text(patient.timestamp);
-                            
+                            $('#patient-name-header').html(`<i class="fas fa-user me-2"></i>${patient.name || 'Unnamed Patient'}`);
+                            $('#patient-age').text(patient.age || 'N/A');
+                            $('#patient-gender').text(patient.gender || 'N/A');
+                            $('#patient-feedback').text(patient.feedback || 'No feedback recorded.');
+                            $('#patient-timestamp').text(patient.timestamp || 'N/A');
+
                             // Set status badge
                             const statusText = {
                                 'emergency': 'EMERGENCY',
                                 'deteriorating': 'HIGH RISK',
                                 'improving': 'IMPROVING',
-                                'stable': 'STABLE'
+                                'stable': 'STABLE',
+                                'unknown': 'UNKNOWN'
                             };
-                            
-                            const statusClass = {
+
+                            const statusBadgeClass = {
                                 'emergency': 'status-emergency',
                                 'deteriorating': 'status-deteriorating',
                                 'improving': 'status-improving',
-                                'stable': 'status-stable'
+                                'stable': 'status-stable',
+                                'unknown': 'status-unknown'
                             };
-                            
+
                             $('#patient-status')
                                 .text(statusText[patient.status] || 'UNKNOWN')
-                                .attr('class', 'patient-status ' + (statusClass[patient.status] || ''));
-                            
-                            // Update care plans
-                            $('#updated-plan-content').text(patient.updated_plan);
-                            $('#original-plan-content').text(patient.original_plan || 'No original plan available');
-                            
+                                .attr('class', 'patient-status ' + (statusBadgeClass[patient.status] || 'status-unknown'));
+
+
+                            // Update care plans content
+                            $('#updated-plan-content').text(patient.updated_plan || 'No updated care plan available.');
+                            $('#original-plan-content').text(patient.original_plan || 'No original care plan available.');
+
+                            // Reset tab to updated plan and show content
+                            $('#carePlanTabs button').removeClass('active');
+                            $('#updated-plan-tab').addClass('active').tab('show');
+
+
                             // Set up PDF download button
                             $('#download-pdf').off('click').on('click', function() {
-                                window.location.href = `/download_pdf/${patientId}`;
+                                console.log("Download button clicked for patient ID:", patient.id);
+                                window.location.href = `/download_pdf/${patient.id}`;
                             });
-                            
-                            // Show patient details
-                            $('#patient-details').fadeIn();
+
                         } else {
+                            console.error('Error loading patient details:', response.error);
                             alert('Error: ' + response.error);
-                            $('#no-patient-selected').fadeIn();
+                            $('#no-patient-selected').show(); // Show placeholder if patient not found
+                            $('#patient-details-section').hide();
                         }
                     },
-                    error: function() {
+                    error: function(xhr, status, error) {
+                         console.error("API Error loading patient details:", error);
                         alert('Error loading patient details');
-                        $('#no-patient-selected').fadeIn();
+                        $('#no-patient-selected').show(); // Show placeholder on API error
+                        $('#patient-details-section').hide();
                     }
                 });
             }
-            
+
             // Patient search functionality
             $('#patient-search').on('input', function() {
                 const searchTerm = $(this).val().toLowerCase();
-                
+                let foundPatients = false;
+
                 $('.patient-item').each(function() {
                     const patientName = $(this).find('h6').text().toLowerCase();
-                    const patientDetails = $(this).find('small').text().toLowerCase();
-                    
+                    const patientDetails = $(this).find('small').text().toLowerCase(); // Includes age/gender
+
                     if (patientName.includes(searchTerm) || patientDetails.includes(searchTerm)) {
                         $(this).show();
+                        foundPatients = true;
                     } else {
                         $(this).hide();
                     }
                 });
+
+                if (foundPatients) {
+                    $('#no-patients-found').hide();
+                } else {
+                    $('#no-patients-found').show();
+                }
             });
-            
-            // Check for emergency notifications periodically
+
+
+            // Initial patient data load when page is ready
+            loadPatients();
+
+            // Periodically check for emergency notifications (and refresh list if found)
             function checkEmergencyNotifications() {
+                console.log("Checking for emergency notifications...");
                 $.ajax({
                     url: '/get_emergency_notifications',
                     type: 'GET',
                     success: function(response) {
                         if (response.success && response.notifications.length > 0) {
-                            // Update emergency alerts
+                             console.log(`Found ${response.notifications.length} emergency notifications.`);
+                            // Update emergency alerts section
                             const alertCount = response.notifications.length;
                             let alertHtml = `
                                 <div class="alert alert-danger mb-3">
@@ -533,19 +634,50 @@
                                 </div>
                             `;
                             $('#emergency-alerts').html(alertHtml);
-                            
-                            // If there are new emergency alerts, reload patient list
-                            loadPatients();
+
+                            // Reload the patient list to bring emergency patients to the top
+                            // Ensure currently selected patient remains selected if they are still in the list
+                            const currentSelectedId = $('#patient-details-section').is(':visible') ? $('.patient-item.active').data('id') : null;
+                             loadPatients(); // This will re-render the list and handle selection from URL
+
+                             // If you want to *only* reload if there's a *new* emergency notification,
+                             // you'd need to track seen notifications or compare list contents.
+                             // For simplicity, we reload the list whenever *any* emergency exists.
+
+                        } else {
+                             // If no emergencies, clear the alert area
+                             console.log("No emergency notifications.");
+                            $('#emergency-alerts').empty();
+                            // Optionally, reload the patient list if you want to revert sorting,
+                            // but sorting already keeps non-emergency patients sorted by timestamp.
+                            // So no need to reload the full list if only alerts disappear.
                         }
+                    },
+                    error: function(xhr, status, error) {
+                         console.error("Error checking emergency notifications:", error);
                     }
                 });
             }
-            
-            // Initial patient data load
-            loadPatients();
-            
-            // Set interval to check emergency notifications every 30 seconds
-            setInterval(checkEmergencyNotifications, 30000);
+
+            // Check for emergency notifications every 30 seconds
+            setInterval(checkEmergencyNotifications, 30000); // 30 seconds
+
+             // Handle browser back/forward button for URL patient ID
+             window.onpopstate = function(event) {
+                 const urlParams = new URLSearchParams(window.location.search);
+                 const patientIdFromUrl = urlParams.get('patient_id');
+                 if (patientIdFromUrl) {
+                     loadPatientDetails(patientIdFromUrl);
+                 } else {
+                     // If no patient ID in URL (e.g., went back to dashboard root)
+                     $('.patient-item').removeClass('active');
+                     $('#patient-details-section').hide();
+                     $('#no-patient-selected').show();
+                     // Optionally refresh list if needed, but not strictly necessary here
+                 }
+             };
+
+
         });
     </script>
 </body>